@import url("../rules.css");
/* Local display preference: retain the same game-action targets in both modes. */
#ctgRoot .ctgSetLayout{flex:none;width:30px;height:30px;padding:2px;margin:-5px 0;border:1px solid #dabd7670;border-radius:4px;background:#21170d66;color:#dec48d}
#ctgRoot .ctgSetLayout svg{display:block;width:100%;height:100%;pointer-events:none}
#ctgRoot .ctgSetLayout:hover,#ctgRoot .ctgSetLayout[aria-pressed="true"]{background:#dac18a33;color:#fff0c4}
#ctgRoot .ctgSetsHeading{align-items:center;justify-content:flex-start}
#ctgRoot .ctgSetStack>.ctgSetCopy{display:none}
#ctgRoot.ctgExpandedSets .ctgTable{align-items:end}
#ctgRoot.ctgExpandedSets .ctgSetStack{display:grid;transform:none}
#ctgRoot.ctgExpandedSets .ctgSetStack:before{display:none}
#ctgRoot.ctgExpandedSets .ctgSetStack>.ctgCard{grid-area:1/1;position:relative;margin-top:calc(var(--ctg-set-extra) * 100%);z-index:1}
#ctgRoot.ctgExpandedSets .ctgSetStack>.ctgSetCopy{display:block;align-self:start;margin-top:calc(var(--ctg-copy) * 100%);z-index:0}
#ctgRoot{max-width:1100px;margin:0 auto;padding:clamp(8px,2vw,20px);color:#30291e;background:linear-gradient(145deg,#f6efdcf2,#e4dbc6f5);border-radius:12px;font-family:system-ui,sans-serif;box-sizing:border-box}
#ctgRoot *{box-sizing:border-box}#ctgRoot h2{font-size:1.2rem;margin:0}#ctgRoot h3{font-size:1rem;margin:14px 0 7px}.ctgHeader{border-bottom:1px solid #b8a98c;padding-bottom:10px;margin-bottom:12px}
.ctgPlayers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:8px}.ctgPlayer{display:flex;flex-direction:column;gap:3px;border-left:5px solid var(--ctgColor);border-radius:6px;background:#fff9;padding:8px;font-size:.85rem;min-width:0;overflow-wrap:anywhere}.ctgPlayer strong{font-size:1rem}.ctgOnTurn{outline:2px solid var(--ctgColor);background:#fff}.ctgScores{font-variant-numeric:tabular-nums}
.ctgColor0{--ctgColor:#b63740}.ctgColor1{--ctgColor:#267994}.ctgColor2{--ctgColor:#bd901d}.ctgColor3{--ctgColor:#567644}
.ctgCard{display:block;width:100%;height:auto;aspect-ratio:5/7;object-fit:contain;border-radius:5px;pointer-events:none}.ctgPiles{display:grid;grid-template-columns:repeat(4,minmax(0,105px));justify-content:center;gap:clamp(5px,2vw,22px);margin:20px 0}.ctgPile,.ctgSet,.ctgHandCard{position:relative;border:2px solid transparent;border-radius:7px;background:transparent;padding:2px;color:inherit;font:inherit;min-width:0;opacity:1!important}.ctgPile>span:first-child{font-size:.78rem;display:block;min-height:2.4em;line-height:1.2}.ctgEmpty{display:grid;place-items:center;aspect-ratio:5/7;border:2px dashed #ac9b7c;border-radius:6px;width:100%}.ctgBadge{position:absolute;right:0;bottom:0;background:#292419;color:white;border-radius:12px;padding:2px 7px;font-size:.85rem;font-weight:700}.ctgUsed:after{content:'✓';position:absolute;top:45%;left:35%;font-size:2rem;color:#fff;text-shadow:0 1px 4px #000}
.ctgTable{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:7px}.ctgSet{border-bottom:5px solid var(--ctgColor,#c5b99f);padding-bottom:25px}.ctgSet .ctgBadge{bottom:27px}.ctgOwner{position:absolute;bottom:2px;left:0;right:0;font-size:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ctgVacant img{opacity:.4}.ctgKnown{display:flex;flex-wrap:wrap;gap:2px}.ctgKnown .ctgCard{width:22px}
#ctgHand{display:flex;flex-wrap:wrap;gap:5px;padding:6px 0 12px;align-items:flex-end}.ctgHandCard{width:clamp(54px,8vw,85px);flex-shrink:0}.ctgSelected{transform:translateY(-6px);outline:3px solid #a74323;box-shadow:0 5px 10px #0003}.ctgEye{position:absolute;right:4px;bottom:4px;background:#fff;border-radius:50%;font-size:12px;padding:1px 3px}.ctgDisplaced{display:flex;align-items:center;gap:10px;margin-top:10px}.ctgDisplaced .ctgCard{width:45px}#ctgControls{margin-top:10px}
#ctgRoot button:not(:disabled){cursor:pointer}#ctgRoot .ctgPile:not(:disabled),#ctgRoot .ctgSet:not(:disabled){outline:3px solid #598536;background:#eef5d6}#ctgRoot button:focus-visible{outline:3px solid #154b91;outline-offset:3px}#log .action .ctgLog{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}#log .action .ctgLog img.ctgCard{width:40px;height:56px;max-width:none;flex:0 0 40px;object-fit:contain}.ctgLogScore{border-bottom:2px solid var(--ctgColor);margin-right:6px}
@media(max-width:650px){.ctgTable{grid-template-columns:repeat(5,minmax(0,1fr))}.ctgPlayers{grid-template-columns:repeat(2,minmax(0,1fr))}.ctgPiles{margin:14px 0}.ctgPlayer{font-size:.75rem}.ctgPlayer strong{font-size:.85rem}}
@media(prefers-reduced-motion:reduce){#ctgRoot *{transition:none!important}}
.ctgLastAction{box-shadow:0 0 0 3px #846129,0 0 14px #84612988}
#ctgRoot{container-type:inline-size}
@container(max-width:650px){.ctgTable{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Original artwork, with responsive controls and readable public information. */
#ctgRoot{color:#f6ecd5;border:6px solid #34251b;border-radius:3px;background:linear-gradient(180deg,#24190de8,#34200b66 35%,#22180777 70%,#22170df0),url('../images/fujiyama.webp') center/cover;box-shadow:inset 0 0 50px #10090088}
#ctgRoot .ctgHeader{display:flex;align-items:center;flex-wrap:wrap;gap:10px;border-color:#cfb27566}
#ctgRoot .ctgTitle{font:clamp(20px,3vw,29px) Georgia,serif;margin-right:auto}#ctgRoot .ctgHeader h2{font-size:.9rem}
#ctgRoot .ctgPublisher{width:65px;height:48px;object-fit:contain;background:#fffa;border-radius:4px;padding:3px}
#ctgRoot .ctgPlayer{background:linear-gradient(110deg,#eee0bd,#e2cda3 85%,#c9af7c);color:#433020;border:1px solid #d7bd86;border-bottom:5px solid var(--ctgColor);border-radius:2px;box-shadow:0 3px 8px #0005}
#ctgRoot .ctgOnTurn{outline:2px solid #dfc488;outline-offset:2px}#ctgRoot .ctgPlayer strong{font-family:Georgia,serif}
#ctgRoot h3{color:#ecdbb7;font-size:.8rem;letter-spacing:1px;border-bottom:1px solid #dabd7655;padding-bottom:6px}
#ctgRoot .ctgPiles{gap:clamp(5px,3vw,30px);grid-template-columns:repeat(4,minmax(0,115px));align-items:start}
#ctgRoot .ctgPile{padding:2px 14px 16px 2px}#ctgRoot .ctgPile[data-pile="1"]{padding:2px 2px 16px 14px}
#ctgRoot .ctgPile>span:first-child{font-size:.7rem;margin-bottom:20px}
#ctgRoot .ctgStack{display:block;position:relative;isolation:isolate;transform:translateY(calc(-1 * var(--stack-depth)));margin-bottom:var(--stack-depth)}
#ctgRoot .ctgStack:before{content:'';position:absolute;z-index:-1;inset:3px 0 calc(-1 * var(--stack-depth));border-radius:5px;background:repeating-linear-gradient(0deg,#cfbfa1 0 1px,#645747 1px 2px);box-shadow:2px 4px 5px #0008}
#ctgRoot .ctgStack .ctgCard{box-shadow:0 2px 5px #0006}
#ctgRoot .ctgBadge{background:#e9d3a0;color:#3d2b1b;border:1px solid #b29455;box-shadow:0 2px 4px #0005}
#ctgRoot .ctgPreview{position:absolute;display:flex;flex-direction:column;align-items:center;right:-5px;top:48px;width:20px;pointer-events:none}
#ctgRoot .ctgPile[data-pile="1"] .ctgPreview{right:auto;left:-5px}
.ctgNumber{display:inline-block;width:32px;height:31px;flex-shrink:0;vertical-align:middle}
#ctgRoot .ctgPreview .ctgNumber{width:20px;height:19px;margin-bottom:-1px}#ctgRoot .ctgMore{font-size:22px;line-height:10px;text-shadow:0 1px 2px #000}
#ctgRoot .ctgSet{background:#21190c24;padding-top:8px;border-radius:3px}#ctgRoot .ctgOwner{background:var(--ctgColor,#392815aa);color:#fff5dd;padding:3px 2px}
#ctgRoot .ctgVacant{border:1px dashed #c7ae6970}#ctgRoot .ctgVacant img{opacity:.15;filter:sepia(1)}#ctgRoot .ctgVacant .ctgBadge{display:none}
#ctgRoot .ctgVacant .ctgOwner{background:transparent;color:#dfcda2}
#ctgRoot #ctgHand{justify-content:center;gap:0;row-gap:12px;padding-right:12px}#ctgRoot .ctgHandCard{margin-right:-12px}#ctgRoot .ctgHandCard .ctgCard{box-shadow:0 4px 8px #0008}
#ctgRoot .ctgHandCard:hover,#ctgRoot .ctgHandCard:focus-visible,#ctgRoot .ctgSelected{z-index:1;transform:translateY(-6px)}
#ctgRoot .ctgEye{left:3px;right:auto;bottom:4px;background:#e5ddc5;color:#564834;line-height:16px;font-size:16px;border-radius:2px}
#ctgRoot .ctgEye.ctgPublic{background:#43d4b3;color:#123e35}#ctgRoot .ctgNew{position:absolute;bottom:23px;left:4px;color:#fff23d;font-size:22px;line-height:24px;text-shadow:0 1px 3px #312700}
#ctgRoot .ctgInspection summary{cursor:pointer;text-decoration:underline;font-size:.8rem}#ctgRoot .ctgInspection summary:focus-visible{outline:2px solid #154b91}#ctgRoot .ctgInspection>span{display:block;font-size:.75rem}
#ctgRoot .ctgKnown{margin:4px 0;gap:2px}
#ctgRoot .ctgPile:not(:disabled),#ctgRoot .ctgSet:not(:disabled){outline-color:#a7c867;background:#65783c55}
#log .action .ctgLog svg.ctgNumber{width:36px;height:34px;max-width:none;flex:0 0 36px}
@container(max-width:650px){#ctgRoot .ctgPlayers{grid-template-columns:repeat(2,minmax(0,1fr))}#ctgRoot .ctgPreview{top:48px;width:15px}#ctgRoot .ctgPreview .ctgNumber{width:15px;height:14px}#ctgRoot .ctgPiles{padding-bottom:30px}#ctgRoot .ctgPublisher{width:45px;height:36px}}

/* Let the available board width determine card size, including on large screens. */
#ctgRoot{max-width:none;width:100%;--ctg-card:clamp(65px,10cqw,180px)}
#ctgRoot .ctgPlayers{align-items:start;grid-template-columns:repeat(4,minmax(0,1fr))}
#ctgRoot .ctgPlayer{position:relative;padding:7px 10px;gap:1px}
#ctgRoot .ctgMetrics{display:flex;align-items:center;gap:12px;min-height:48px}
#ctgRoot .ctgPoints{display:inline-flex;align-items:baseline;gap:4px;font-size:25px;line-height:1}
#ctgRoot .ctgPoints small{font-size:12px;font-weight:bold;border:1px solid #927849;border-radius:3px;padding:2px}
#ctgRoot .ctgTotal{font-size:14px;white-space:nowrap;color:#655133}
#ctgRoot .ctgInspection{margin-left:auto}
#ctgRoot .ctgInspection summary{list-style:none;text-decoration:none;display:block}
#ctgRoot .ctgInspection summary::-webkit-details-marker{display:none}
#ctgRoot .ctgFan{position:relative;display:block;width:47px;height:42px}
#ctgRoot .ctgFan i{position:absolute;left:12px;top:4px;width:26px;height:34px;border:2px solid #f1e6ce;background:#524432;border-radius:3px;box-shadow:0 1px 2px #0005}
#ctgRoot .ctgFan i:first-child{transform:rotate(-24deg);transform-origin:bottom center}
#ctgRoot .ctgFan i:nth-child(2){transform:rotate(22deg);transform-origin:bottom center}
#ctgRoot .ctgFan b{position:absolute;inset:10px 0 0 4px;text-align:center;color:#fff;font-size:19px;text-shadow:0 1px 2px #000}
#ctgRoot .ctgHandContents{position:absolute;top:100%;right:0;z-index:20;background:#efe0ba;color:#433020;padding:10px;width:min(240px,70vw);box-shadow:0 4px 10px #0008;border:2px solid var(--ctgColor);border-radius:4px;font-size:.8rem}
#ctgRoot .ctgPiles{grid-template-columns:repeat(4,minmax(0,var(--ctg-card)));margin:22px auto}
#ctgRoot .ctgHandCard{width:clamp(85px,12cqw,210px);margin-right:clamp(-25px,-2cqw,-12px)}
#ctgRoot #ctgHand{padding-right:25px;row-gap:18px;min-height:50px}
#ctgRoot .ctgTable{gap:clamp(6px,1cqw,18px)}
#ctgRoot .ctgDisplaced{justify-content:center;margin:8px 0}
body.ctgGame #log .move.color0{background:#b63740;color:#fff}
body.ctgGame #log .move.color1{background:#267994;color:#fff}
body.ctgGame #log .move.color2{background:#bd901d;color:#211b0d}
body.ctgGame #log .move.color3{background:#567644;color:#fff}
body.ctgGame #log .move{padding:5px 8px;border-radius:3px}
body.ctgGame #log .ctgLogNotice,body.ctgGame #log .ctgEndReasons{display:block;width:100%;margin:4px 0}
body.ctgGame #log .ctgEndReasons{padding:6px 8px;border-left:3px solid #a17326;background:#f5e8c9;color:#463419}
@container(max-width:650px){#ctgRoot .ctgPlayers{grid-template-columns:repeat(2,minmax(0,1fr))}#ctgRoot .ctgMetrics{gap:6px}#ctgRoot .ctgPoints{font-size:22px}#ctgRoot .ctgTotal{font-size:12px}#ctgRoot .ctgPiles{padding-bottom:30px}#ctgRoot .ctgHandCard{width:clamp(85px,20cqw,130px)}}

/* Hover previews no longer resemble selection. Only checked cards are raised. */
#ctgRoot .ctgHandCard:hover,#ctgRoot .ctgHandCard:focus-visible{transform:none}
#ctgRoot .ctgHandCard:not(.ctgSelected):hover .ctgCard{filter:brightness(1.08)}
#ctgRoot .ctgHandCard.ctgSelected{transform:translateY(-12px);outline:3px solid #f2e6b9;box-shadow:0 4px 8px #0008}
#ctgRoot .ctgHandCard.ctgSelected:after{content:'✓';position:absolute;right:3px;top:3px;width:24px;height:24px;line-height:24px;border-radius:50%;background:#244f3d;color:white;border:1px solid white;font-weight:bold;font-size:18px}
#ctgRoot .ctgEye{padding:3px;width:25px;height:20px;line-height:1;border-radius:3px}
#ctgRoot .ctgEye svg{display:block;width:100%;height:100%}
#ctgRoot .ctgRound{margin-left:auto;letter-spacing:0;font-weight:normal;white-space:nowrap}
#ctgRoot h3{display:flex;justify-content:space-between;gap:12px}
#ctgRoot .ctgFooter{display:flex;justify-content:flex-end;margin-top:4px}
#ctgRoot .ctgFooter .ctgPublisher{width:45px;height:36px;background:transparent;padding:0}
#ctgRoot .ctgDisplaced .ctgCard{width:clamp(65px,8cqw,110px)}

/* Language-neutral scoring token and a paper-corner public visibility marker. */
#ctgRoot .ctgPointToken{display:inline-flex;align-self:center;width:22px;height:22px}
#ctgRoot .ctgPointToken svg{width:100%;height:100%;display:block}
#ctgRoot .ctgEye.ctgPublic{left:3px;bottom:3px;width:36px;height:36px;padding:0;background:#735239;color:#fff8e8;border-radius:0 0 0 4px;clip-path:polygon(0 0,100% 100%,0 100%)}
#ctgRoot .ctgEye.ctgPublic svg{position:absolute;left:3px;bottom:4px;width:20px;height:14px}

/* Keep left/right spatially stable and use the same face size as character sets. */
#ctgRoot .ctgPiles{--ctg-slot:calc((100cqw - 8 * clamp(6px,1cqw,18px)) / 9);grid-template-columns:repeat(4,minmax(0,var(--ctg-slot)));gap:clamp(16px,4cqw,35px);max-width:none;padding:0;margin:18px auto 24px}
#ctgRoot .ctgPile,#ctgRoot .ctgPile[data-pile="1"]{padding:2px 2px 22px}
#ctgRoot .ctgPile>span:first-child{height:36px;min-height:36px;margin-bottom:8px;display:flex;align-items:center;justify-content:center}
#ctgRoot .ctgStack{transform:none;margin-bottom:20px}
#ctgRoot .ctgEmpty{margin-bottom:20px}
#ctgRoot .ctgSet.ctgVacant{border-width:2px;border-bottom-width:5px}
#ctgRoot .ctgSet.ctgVacant>.ctgCard{margin-bottom:20px}
#ctgRoot .ctgPreview{top:48px;right:-17px}
#ctgRoot .ctgPile[data-pile="1"] .ctgPreview{left:-17px;right:auto}
#ctgRoot .ctgPile .ctgBadge{left:50%;right:auto;transform:translateX(-50%);bottom:0}
#ctgRoot .ctgNew{top:5px;bottom:auto;left:4px;font-size:20px;line-height:22px}
@container(max-width:650px){
 #ctgRoot .ctgPiles{--ctg-slot:calc((100cqw - 4 * clamp(6px,1cqw,18px)) / 5);padding-bottom:20px}
 #ctgRoot .ctgPreview{right:-15px}
 #ctgRoot .ctgPile[data-pile="1"] .ctgPreview{left:-15px}
}

#ctgRoot .ctgTasks{display:flex;justify-content:center;align-items:start;flex-wrap:wrap;gap:12px;margin:12px 0}
#ctgRoot .ctgTaskCard{display:block;width:100%;height:auto;aspect-ratio:5/7;border-radius:6px;pointer-events:none}
#ctgRoot .ctgTaskChoice,#ctgRoot .ctgTaskEntry{width:clamp(70px,12cqw,125px);padding:3px;border:2px solid transparent;border-radius:6px;background:#251d15;color:#f8edcf;font:inherit;text-align:center;opacity:1}
#ctgRoot .ctgTaskChoice span,#ctgRoot .ctgTaskEntry span,#ctgRoot .ctgTaskEntry small{display:block;font-size:12px;line-height:1.3;padding-top:4px;overflow-wrap:anywhere}
#ctgRoot .ctgTaskEntry{border-bottom:4px solid var(--ctgColor)}
#ctgRoot .ctgTaskChoice:not(:disabled){outline:3px solid #afc96f;cursor:pointer}#ctgRoot .ctgTaskChoice:not(:disabled):hover{background:#46502d}
#ctgRoot .ctgTaskChoice:focus-visible{outline:3px solid white;outline-offset:3px}
#ctgRoot .ctgTaskAnchor{display:grid;place-items:center;width:90px;height:126px;border:2px dashed #cfb882;border-radius:6px}
#ctgRoot .ctgTaskCount{font-size:12px;white-space:nowrap;color:#655133}
@container(max-width:450px){#ctgRoot .ctgMetrics{flex-wrap:wrap}#ctgRoot .ctgTaskCount{order:3;flex-basis:100%;text-align:right}}

#ctgRoot .ctgTaskArea{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px}
#ctgRoot .ctgTaskArea>.ctgTasks{margin:4px 0;flex:0 1 auto}
#ctgRoot .ctgTaskOverview{flex:0 0 auto;color:#f1e5c9;padding:4px 0}
#ctgRoot .ctgTaskGrid{display:grid;grid-template-columns:repeat(6,30px);gap:5px}
#ctgRoot .ctgTaskToken{display:block;width:30px;height:29px}
#ctgRoot .ctgTaskGrid .ctgNumber{display:block;width:30px;height:29px}
#ctgRoot .ctgTaskSpent{opacity:.22;filter:grayscale(.65)}
body.ctgGame #log .ctgSetScores{display:flex;flex-wrap:wrap;gap:4px 14px;padding:6px 0}
body.ctgGame #log .ctgSetScores strong{flex-basis:100%}

#ctgRoot .ctgPlayerNinjas,#ctgRoot #ctgNinjaStock{display:flex;justify-content:center;align-items:center;gap:3px;min-height:34px}
#ctgRoot #ctgNinjaStock{margin:-12px 0 10px}
#ctgRoot .ctgNinjaFigure{display:block;width:25px;height:35px;max-width:none}
#ctgRoot .ctgNinja{background:transparent;border:1px solid transparent;border-radius:4px;padding:1px;opacity:1}
#ctgRoot .ctgNinjaFresh{opacity:.35}
#ctgRoot .ctgNinja:not(:disabled){cursor:pointer;border-color:#8c6824;background:#f2e0b3}
#ctgRoot .ctgNinja:focus-visible{outline:2px solid #fff}
#ctgRoot #ctgNinjaVictim{margin:4px auto}
#ctgRoot #ctgNinjaStock span{font-size:11px;color:#e6d6b0}

#ctgRoot .ctgPlayerHeading{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:26px}
#ctgRoot .ctgPlayerHeading>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ctgRoot .ctgPlayerHeading .ctgPlayerNinjas{flex:none;min-height:0;gap:1px;margin-left:auto}
#ctgRoot .ctgPlayerHeading .ctgNinjaFigure{width:16px;height:22px}
#ctgRoot .ctgPlayerHeading .ctgNinja{padding:0}

/* Also apply outside the board: the framework mounts flying cards in its animation layer. */
.ctgCutCard{display:block;position:relative;aspect-ratio:5/7}
.ctgKatanaCuts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ctgKatanaCuts path{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.ctgKatanaCuts .ctgCutShadow{stroke:#21160d;stroke-width:6;opacity:.9}
.ctgKatanaCuts .ctgCutEdge{stroke:#fff0c9;stroke-width:2.2}
#ctgRoot #ctgNinjaVictim .ctgCutCard{width:clamp(65px,8cqw,110px)}
#ctgRoot #ctgNinjaVictim .ctgCutCard .ctgCard{width:100%}

.ctgFarmerCrown{position:fixed;z-index:1100;pointer-events:none;filter:drop-shadow(0 2px 2px #0008);animation:ctgCrownArrive .35s ease-out}
.ctgFarmerCrown svg{display:block;width:100%;height:auto}
.ctgFarmerWisdom{position:fixed;z-index:1101;max-width:calc(100vw - 16px);width:max-content;box-sizing:border-box;padding:10px 18px;border:2px solid #c9a256;border-radius:5px;background:#352518;color:#fff0c9;text-align:center;font:16px Georgia,serif;box-shadow:0 3px 14px #0007;pointer-events:none}
@keyframes ctgCrownArrive{from{opacity:0;transform:translateY(-12px) rotate(-8deg)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ctgFarmerCrown{animation:none}}

/* Compact board: readable controls and cards fitted to the available desktop height. */
#ctgRoot{padding:10px}
#ctgRoot .ctgSidebar{display:contents}
#ctgRoot .ctgMain{min-width:0}
#ctgRoot:not(.ctgWide){display:flex;flex-direction:column}
#ctgRoot:not(.ctgWide) .ctgRound{order:-3;align-self:flex-end;font-size:12px;margin-bottom:5px}
#ctgRoot:not(.ctgWide) .ctgPlayers{order:-2;margin-bottom:10px}
#ctgRoot .ctgPiles{margin:6px auto 12px;padding-bottom:0}
#ctgRoot .ctgPile>span:first-child{height:auto;min-height:0;margin-bottom:20px;display:block}
#ctgRoot .ctgPile>.ctgEmpty:first-child{display:grid;font:clamp(10px,1.4cqw,15px) Georgia,serif;letter-spacing:.03em;color:#e0cd9b99;overflow-wrap:anywhere}
#ctgRoot .ctgPreview{top:2px}
#ctgRoot .ctgTable{border-top:1px solid #dabd7640;padding-top:8px}
#ctgRoot .ctgPersonal{border-top:1px solid #dabd7640;margin-top:8px;padding-top:8px}
#ctgRoot #ctgHand{padding-top:4px;padding-bottom:4px;row-gap:12px}
#ctgRoot #ctgControls:empty{display:none}
#ctgRoot #ctgNinjaStock{margin:0 0 6px}
#ctgRoot .ctgHandContents{position:fixed;right:auto;top:auto;padding:30px 12px 12px;z-index:1200;max-height:70vh;overflow:auto}
#ctgRoot .ctgInspectionClose{position:absolute;right:3px;top:1px;background:transparent;border:0;color:#433020;font:26px/26px Arial,sans-serif;width:30px;height:30px;padding:0;cursor:pointer}
#ctgRoot.ctgWide{display:grid;grid-template-columns:minmax(0,1fr) 195px;gap:18px;align-items:start}
#ctgRoot.ctgWide .ctgSidebar{display:flex;flex-direction:column;gap:9px;min-width:0}
#ctgRoot.ctgWide .ctgSidebar .ctgRound{font-size:13px}
#ctgRoot.ctgWide .ctgPlayers{grid-template-columns:1fr;gap:8px}
#ctgRoot.ctgWide .ctgMetrics{gap:6px}
#ctgRoot.ctgWide .ctgPiles{grid-template-columns:repeat(4,var(--ctg-fit-card));gap:30px}
#ctgRoot.ctgWide .ctgTable{grid-template-columns:repeat(9,var(--ctg-fit-card));gap:7px;justify-content:center}
#ctgRoot.ctgWide .ctgSet{padding-top:2px}
#ctgRoot.ctgWide .ctgPersonal{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px}
#ctgRoot.ctgWide #ctgHand{flex:1 1 400px;min-width:0}
#ctgRoot.ctgWide .ctgHandCard{width:calc(var(--ctg-fit-card) * 1.3);margin-right:calc(var(--ctg-fit-card) * -.3)}
#ctgRoot.ctgWide .ctgTaskArea{flex:0 1 auto;max-width:100%;gap:5px 10px}
#ctgRoot.ctgWide .ctgTaskChoice{width:clamp(55px,var(--ctg-fit-card),105px)}
#ctgRoot.ctgWide .ctgTasks{gap:5px}
#ctgRoot.ctgWide .ctgTaskGrid{grid-template-columns:repeat(6,23px);gap:3px}
#ctgRoot.ctgWide .ctgTaskToken,#ctgRoot.ctgWide .ctgTaskGrid .ctgNumber{width:23px;height:22px}

/* Reserve scrollbar space and keep the personal-area columns independent of card sizing. */
body.ctgGame #content{scrollbar-gutter:stable}
/* Match exposed host space and the scrollbar gutter to the board border. */
body.ctgGame #content,body.ctgGame #game{background:#34251b}
#ctgRoot.ctgWide .ctgPersonal.calltoglory2-state-1{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:16px}
#ctgRoot.ctgWide .ctgPersonal.calltoglory2-state-1 #ctgHand{width:100%}
#ctgRoot.ctgWide .ctgTaskArea{min-width:0}

#ctgRoot .ctgFaceValue{position:absolute;top:3px;left:3px;pointer-events:none;z-index:2;filter:drop-shadow(0 1px 2px #0009)}
#ctgRoot .ctgFaceValue .ctgNumber{display:block;width:clamp(26px,2.5cqw,36px);height:auto}
#ctgRoot .ctgVacant .ctgFaceValue{opacity:.45}
#ctgRoot .ctgNew{left:4px;right:auto;top:42px;z-index:3}
#ctgRoot .ctgHandArea{min-width:0;flex:1 1 400px}
#ctgRoot .ctgPersonal{border-top:0;padding-top:0}
#ctgRoot .ctgTable{border-top:0;padding-top:0}
#ctgRoot h3{margin:8px 0 6px}
#ctgRoot.ctgWide .ctgPersonal.calltoglory2-state-1{grid-template-columns:minmax(0,1fr) 250px;align-items:start}
#ctgRoot.ctgWide .ctgTaskArea{flex-direction:column;align-items:center;margin-top:8px;gap:6px}
#ctgRoot.ctgWide .ctgTaskChoice{width:clamp(55px,var(--ctg-fit-card),76px)}
#ctgRoot.ctgWide #ctgHand{display:grid;justify-content:center;align-items:end;gap:12px 0;padding:4px 0}
#ctgRoot.ctgWide .ctgHandCard{margin-right:0}

#ctgRoot .ctgSetsHeading .ctgRound{order:initial;align-self:auto;margin:0 0 0 auto;font-size:12px}
#ctgRoot .ctgTaskArea>h3{flex-basis:100%;width:100%;align-self:stretch}
#ctgRoot.ctgWide .ctgTaskArea>h3{flex-basis:auto}
#ctgRoot .ctgFooter .ctgPublisher{width:67.5px;height:54px}
#ctgRoot .ctgNinjaSupply>h3{display:none}
#ctgRoot.ctgWide .ctgNinjaSupply>h3{display:flex}
#ctgRoot.ctgWide .ctgNinjaSupply #ctgNinjaStock{margin:4px 0 8px}

#ctgRoot{position:relative;isolation:isolate}
#ctgRoot>.ctgFooter{position:absolute;right:10px;bottom:10px;margin:0;z-index:-1}
#ctgRoot:not(.ctgWide) .ctgHandCard{margin-right:0}
#ctgRoot:not(.ctgWide) #ctgHand{display:grid;justify-content:center;align-items:end;gap:12px 0;padding:4px 0}
#ctgRoot:not(.ctgWide) .ctgPlayers{width:min(100%,900px);margin-left:auto;margin-right:auto}
#ctgRoot.ctgWide .ctgPersonal{align-items:start}
#ctgRoot.ctgWide .ctgTaskArea{margin-top:0}
#ctgRoot .ctgTaskArea>h3,#ctgRoot .ctgHandArea>h3{margin-top:8px;margin-bottom:6px;min-height:23px}
#ctgRoot .ctgHandContents{padding:12px}
#ctgRoot .ctgTaskLegend{display:block;max-width:220px;margin-top:5px;color:#d4c39f;font-size:10px;line-height:1.35;text-align:center}

#ctgRoot:not(.ctgWide) .ctgPlayers{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
#ctgRoot:not(.ctgWide) .ctgPlayers>.ctgPlayer{flex:0 1 219px;width:calc(50% - 4px);max-width:calc(50% - 4px)}
#ctgRoot .ctgPendingDiscards{min-width:0;margin:6px 0}
#ctgRoot .ctgPendingDiscards .ctgPendingEntry{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin:6px 0}
#ctgRoot .ctgPendingText{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:12px;line-height:1.35}
#ctgRoot .ctgPendingText b{font-size:16px}
#ctgRoot .ctgPendingText strong{font-size:12px;color:#f4dfa5}
#ctgRoot .ctgPendingCompact{display:none;position:relative;flex:none;width:36px;height:40px}
#ctgRoot.ctgWide .ctgPendingEntry>.ctgCard,#ctgRoot.ctgWide #ctgNinjaVictim .ctgCutCard{width:65px;flex:none}
#ctgRoot:not(.ctgWide) .ctgPendingEntry>.ctgCard,#ctgRoot:not(.ctgWide) .ctgPendingEntry>.ctgCutCard{display:none}
#ctgRoot:not(.ctgWide) .ctgPendingCompact{display:block}
#ctgRoot:not(.ctgWide) .ctgPendingDiscards>h3{display:none}
#ctgRoot:not(.ctgWide) .ctgPendingText{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 8px}

/* Keep pending discards recognizable on narrow boards as well. */
#ctgRoot:not(.ctgWide) .ctgPendingDiscards{padding:8px 10px;margin:10px 0;background:#21170d55;border:1px solid #dabd7640;border-radius:4px}
#ctgRoot:not(.ctgWide) .ctgPendingDiscards>h3{display:flex;margin:0 0 8px}
#ctgRoot:not(.ctgWide) .ctgPendingEntry>.ctgCard,#ctgRoot:not(.ctgWide) #ctgNinjaVictim>.ctgCutCard{display:block;width:76px;flex:0 0 76px}
#ctgRoot:not(.ctgWide) .ctgPendingCompact{display:none}
#ctgRoot:not(.ctgWide) .ctgPendingDiscards .ctgPendingEntry{gap:14px}
#ctgRoot:not(.ctgWide) .ctgPendingText{flex:1;flex-direction:column;align-items:flex-start;gap:6px;font-size:13px;line-height:1.4}
#ctgRoot:not(.ctgWide) .ctgPendingText strong{font-size:13px}

/* Information control beside the left draw pile; independent of draw actions. */
#ctgRoot .ctgPiles{grid-template-columns:40px repeat(4,minmax(0,var(--ctg-slot)));gap:clamp(6px,2cqw,24px)}
#ctgRoot.ctgWide .ctgPiles{grid-template-columns:40px repeat(4,var(--ctg-fit-card));gap:24px}
#ctgRoot .ctgRemaining{align-self:center;width:40px;min-height:48px;padding:2px;margin-bottom:22px;border:0;border-radius:6px;background:transparent;color:#ddbe78;filter:drop-shadow(0 3px 3px #0007);transition:transform .15s,color .15s}
#ctgRoot .ctgRemaining svg{display:block;width:100%;height:auto;pointer-events:none}
#ctgRoot .ctgRemaining:hover,#ctgRoot .ctgRemaining[aria-expanded="true"]{color:#ffe6a8;transform:translateY(-2px);background:#e2be7218}
.ctgRemainingPopover{--bs-popover-max-width:320px;--bs-popover-bg:#30251c;--bs-popover-border-color:#a58a54;--bs-popover-header-bg:#413222;--bs-popover-header-color:#f5dda7;--bs-popover-body-color:#f2e7cf;width:min(320px,calc(100vw - 20px));box-shadow:0 8px 28px #0006}
.ctgRemainingPopover .ctgUnknownCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px}
.ctgRemainingPopover .ctgUnknownCard{display:flex;align-items:center;justify-content:center;gap:5px;font-size:13px;font-weight:600;white-space:nowrap}
.ctgRemainingPopover .ctgExhausted{opacity:.4}
.ctgRemainingPopover .ctgUnknownHelp{font-size:12px;line-height:1.4;margin:12px 0 0}
.ctgRemainingPopover .popover-body{max-height:calc(100dvh - 100px);overflow-y:auto}

.ctgTutorialLink { display: inline-flex; align-items: center; gap: .4rem; margin-right: auto; }