:root{color:#eee7dc;font-synthesis:none;--ink:#171411;--paper:#eee7dc;--muted:#a9a095;--line:#4b433a;--red:#d84f3f;--gold:#d6a951;--panel:#211d19;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--touch-min:44px;background:#171411;font-family:system-ui,-apple-system,Hiragino Sans,Yu Gothic,sans-serif}*{box-sizing:border-box}html{height:100%}body{min-width:320px;min-height:100dvh;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);background:radial-gradient(circle at 75% 15%,#30261c 0,#171411 42%);margin:0;overflow-x:hidden}button,input,select{font:inherit}button,.button-like{border:1px solid var(--line);color:var(--paper);cursor:pointer;background:0 0;padding:.65rem 1rem;transition:all .15s}button:hover:not(:disabled),.button-like:hover{border-color:var(--gold);color:#fff;transform:translateY(-1px)}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:2px;outline:3px solid #77aee8}button:disabled{opacity:.4;cursor:not-allowed}.touch-target{min-height:var(--touch-min);min-width:var(--touch-min)}h1,h2,p{margin-top:0}h1,h2{font-family:Yu Mincho,Hiragino Mincho ProN,serif}h1{letter-spacing:.04em;margin-bottom:.7rem;font-size:clamp(2.15rem,5vw,4rem);line-height:1.05}p{color:#c6bdb2;line-height:1.75}.app-shell{flex-direction:column;max-width:100vw;min-height:100dvh;display:flex;overflow-x:hidden}.site-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:72px;padding:0 clamp(1rem,4vw,4rem);display:flex}.brand{letter-spacing:.1em;border:0;padding:0;font-family:Yu Mincho,Hiragino Mincho ProN,serif;font-size:1.15rem;font-weight:900}.brand span{color:var(--red)}.version{color:var(--muted);letter-spacing:.12em;font-size:.68rem}.screen{flex:1;width:min(1180px,100% - 2rem);margin:0 auto;padding:clamp(2rem,7vw,5rem) 0}.narrow{width:min(760px,100% - 2rem)}.eyebrow{color:var(--gold);letter-spacing:.2em;margin-bottom:.65rem;font-size:.72rem;font-weight:800}.lead{max-width:670px;font-family:Yu Mincho,Hiragino Mincho ProN,serif;font-size:clamp(1rem,2vw,1.35rem)}.hero{padding:clamp(1rem,5vw,4rem) 0 4rem;position:relative}.hero:after{content:"王";z-index:-1;color:#2b2520;font-family:Yu Mincho,serif;font-size:clamp(10rem,30vw,25rem);line-height:1;position:absolute;top:-1rem;right:7%;transform:rotate(8deg)}.hero-actions,.row-actions,.card-actions,.game-top{flex-wrap:wrap;align-items:center;gap:.7rem;display:flex}.primary{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}.large{min-width:180px;padding:.9rem 1.3rem}.mode-grid,.deck-grid{background:var(--line);border:1px solid var(--line);grid-template-columns:repeat(4,1fr);gap:1px;display:grid}.mode-grid article,.deck-card{background:var(--panel);padding:1.5rem}.mode-grid article>span{color:var(--red);font-weight:800}.mode-grid h2{margin:1.6rem 0 .5rem}.roadmap-note{margin-top:1.5rem;font-size:.85rem}.pwa-banner{z-index:40;padding:.85rem clamp(1rem,4vw,4rem);padding-bottom:calc(.85rem + var(--safe-bottom));border-top:1px solid var(--line);color:var(--paper);background:#1c1814f2;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem 1rem;margin:0;display:flex;position:sticky;bottom:0}.pwa-banner-body{flex:16rem;min-width:0}.pwa-banner-body strong{margin-bottom:.25rem;font-size:.95rem;display:block}.pwa-banner-body p{color:var(--muted);margin:0;font-size:.82rem;line-height:1.5}.pwa-banner-actions{flex-wrap:wrap;gap:.5rem;display:flex}.pwa-banner-actions button{min-height:var(--touch-min)}.back{color:var(--muted);border:0;margin-bottom:2rem;padding-left:0}.title-row{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem;display:flex}.title-row h1{margin-bottom:0}.button-like{align-items:center;display:inline-flex}.button-like input{clip:rect(0,0,0,0);width:1px;height:1px;position:absolute}.deck-grid{grid-template-columns:repeat(2,1fr);margin-top:2rem}.deck-card-head{justify-content:space-between;gap:1rem;display:flex}.deck-card h2{font-size:1.35rem}.badge{color:#e2a398;border:1px solid #723b34;height:fit-content;padding:.25rem .55rem;font-size:.72rem}.badge.valid{color:#93ceb0;border-color:#3f765c}.deck-numbers strong{color:var(--gold);font-size:1.8rem}.piece-line{color:var(--muted);font-size:.8rem}.card-warning{color:#e2a398;font-size:.8rem}.danger-text{color:#e88b80}.status{border-left:3px solid var(--gold);background:#28231e;margin:1rem 0;padding:1rem}.status.error{border-color:var(--red);color:#f0b4ad}.status.success{color:#a9dfbf;border-color:#54a475}.status ul{margin-bottom:0}.editor-layout{grid-template-columns:minmax(240px,.8fr) minmax(340px,1.2fr) minmax(210px,.7fr);align-items:start;gap:1.5rem;display:grid}.editor-panel,.piece-inspector,.ready-panel,.game-side{border:1px solid var(--line);background:var(--panel);padding:1.25rem}.field{color:var(--muted);gap:.45rem;display:grid}.field input,.field select,select{border:1px solid var(--line);width:100%;color:var(--paper);background:#161310;border-radius:0;padding:.7rem}.budget-meter{border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:1fr auto;margin-top:1.25rem;padding:1rem 0;display:grid}.budget-meter strong{color:var(--gold);font-size:1.4rem}.budget-meter small{color:var(--muted);grid-column:1/-1}.budget-meter.over strong,.budget-meter.over small{color:#f28376}.budget-meter.compact{border:1px solid var(--line);background:#171411;flex:1;min-width:0;margin:0;padding:.55rem .75rem}.budget-meter.compact strong{font-size:1.15rem}.editor-sticky-bar{z-index:8;border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1a1612ee;flex-wrap:wrap;align-items:stretch;gap:.7rem;margin-bottom:1rem;padding:.65rem;display:flex;position:sticky;top:0}.editor-sticky-bar .large{min-width:140px}.editor-hint{color:var(--muted);font-size:.78rem}.palette{grid-template-columns:repeat(4,1fr);gap:.35rem;display:grid}.palette button{place-items:center;padding:.6rem .2rem;display:grid}.palette strong{font-family:Yu Mincho,serif;font-size:1.3rem}.palette small{color:var(--muted)}.piece-roster{margin-top:1rem}.piece-roster>strong{margin-bottom:.45rem;font-size:.82rem;display:block}.piece-roster-list{gap:.35rem;max-height:220px;display:grid;overflow:auto}.roster-item{text-align:left;justify-content:space-between;align-items:center;gap:.5rem;padding:.55rem .7rem;display:flex}.roster-item.selected,.hand-piece.selected{background:var(--gold);color:var(--ink);border:2px dashed #fff1b0}.roster-item small{color:var(--muted)}.roster-item.selected small{color:#5a4630}.selected-slot{color:var(--gold);margin-bottom:.75rem;font-weight:700}.validation-box{background:#171411;margin-top:1rem;padding:1rem;font-size:.82rem}.validation-box ul{color:#dba49e;padding-left:1.2rem}.board-caption{text-align:center;font-size:.8rem}.board{aspect-ratio:1;background:#17120d;border:3px solid #0e0c0a;grid-template-columns:repeat(5,1fr);width:min(100%,590px);margin-inline:auto;display:grid;box-shadow:0 20px 60px #0007}.square{color:#1d1610;background:#c99a5c;border:1px solid #5f482f;border-top:0;border-left:0;place-items:center;min-width:0;padding:0;display:grid;position:relative}.square:nth-child(odd){background:#d3a769}.square:hover:not(:disabled){color:#1d1610;filter:brightness(1.08);border-color:#5f482f;transform:none}.square.selected{z-index:1;background-image:repeating-linear-gradient(-45deg,#0000,#0000 6px,#fff1b033 6px 8px);box-shadow:inset 0 0 0 5px #fff1b0}.square.danger-square{box-shadow:inset 0 0 0 6px var(--red);z-index:1;background-image:repeating-linear-gradient(45deg,#0000,#0000 5px,#d84f3f44 5px 7px)}.square.last-from{outline-offset:-4px;outline:2px dashed #5b4632}.square.last-to{outline-offset:-5px;outline:3px solid #2f5d47}.piece{z-index:2;clip-path:polygon(50% 0,91% 18%,100% 100%,0 100%,9% 18%);filter:drop-shadow(0 3px 2px #2a170766);background:#ead095;border:1px solid #392614;place-items:center;width:70%;height:78%;font-family:Yu Mincho,serif;font-size:clamp(1.15rem,4vw,2.4rem);font-weight:900;display:grid;position:relative}.piece small{font-family:sans-serif;font-size:clamp(.45rem,1vw,.65rem);position:absolute;bottom:1px;right:4px}.square.white .piece{background:#ead9b2;transform:rotate(180deg)}.piece[data-promoted]{color:#a7251f}.promo-mark{color:#a7251f;background:#fff8e8;border:1px solid #a7251f;padding:0 2px;font-family:sans-serif;font-size:clamp(.35rem,.9vw,.55rem);font-weight:800;line-height:1.2;position:absolute;top:1px;left:2px}.target-dot{z-index:3;aspect-ratio:1;pointer-events:none;background:#b72f27bb;border-radius:50%;width:24%;position:absolute}.target-ring{z-index:3;aspect-ratio:1;pointer-events:none;border:3px solid #b72f27;border-radius:50%;width:58%;position:absolute}.state-mark{z-index:4;color:#1d1610;pointer-events:none;background:#fff8e8;border:1px solid #1d1610;min-width:1.1rem;padding:1px 3px;font-family:sans-serif;font-size:.55rem;font-weight:800;line-height:1.2;position:absolute;top:2px;left:2px}.check-mark{border-color:var(--red);color:var(--red);background:#ffe8e4}.last-mark{color:#2f5d47;background:#e7f5ee;border-color:#2f5d47;left:auto;right:2px}.piece-inspector p{font-size:.85rem}.stack-actions{gap:.5rem;display:grid}.match-options{border:1px solid var(--line);background:var(--panel);gap:1.5rem;margin-top:2rem;padding:1.5rem;display:grid}.match-options .field span{color:var(--paper);font-size:1.1rem;font-weight:700}.stats-strip{border:1px solid var(--line);background:var(--panel);grid-template-columns:1fr auto;gap:.25rem 1rem;margin:1.5rem 0;padding:1rem;display:grid}.stats-strip span,.stats-strip small{color:var(--muted)}.stats-strip strong{color:var(--gold);font-size:1.2rem}.stats-strip small{grid-column:1/-1}.choice-field{border:0;margin:0;padding:0}.choice-field legend{color:var(--muted);margin-bottom:.55rem}.choice-grid{grid-template-columns:repeat(3,1fr);gap:.5rem;display:grid}.choice-grid label{border:1px solid var(--line);cursor:pointer;gap:.2rem;padding:.8rem;display:grid}.choice-grid label.active{border-color:var(--gold);background:#30271e}.choice-grid input{opacity:0;pointer-events:none;position:absolute}.choice-grid small{color:var(--muted)}.difficulty-grid{grid-template-columns:1fr 1fr}.difficulty-grid p{margin:.35rem 0 0;font-size:.75rem;line-height:1.5}.setup-timer{border:1px solid var(--line);padding:.7rem 1rem}.setup-timer.urgent{color:#ff8c80;border-color:var(--red)}.setup-layout,.game-layout{grid-template-columns:minmax(350px,650px) minmax(220px,1fr);align-items:start;gap:2rem;display:grid}.ready-panel{gap:1rem;display:grid}.ready-panel>div{gap:.55rem;display:grid}.ready-panel span{color:var(--muted)}.ready-panel button.ready{color:#a9dfbf;border-color:#54a475}.countdown{text-align:center;background:#171411;padding:1rem}.countdown strong{color:var(--gold);font-size:4rem}.check-banner{border:1px solid var(--red);color:#ffaca3;background:#4f201b;width:fit-content;max-width:100%;margin:.35rem auto;padding:.35rem .75rem;font-size:.85rem;font-weight:800}.game-top{color:var(--muted);justify-content:space-between;margin-bottom:.75rem}.game-top .back{margin:0}.game-meta{font-size:.85rem}.game-board-area{width:min(100%,590px);margin-inline:auto}.game-rail{gap:.25rem;display:grid}.clock{min-height:var(--touch-min);border-left:3px solid var(--line);background:#211d19;grid-template-columns:1fr auto;align-items:center;margin:.25rem 0;padding:.55rem .8rem;display:grid}.clock.active{border-color:var(--gold);background:#30271e;border-left-style:double;border-left-width:6px}.clock strong{font-variant-numeric:tabular-nums;font-size:1.35rem}.clock small{color:var(--red);grid-column:2}.hand{min-height:var(--touch-min);flex-wrap:wrap;align-items:center;gap:.35rem;padding:.2rem 0;display:flex}.hand>span{color:var(--muted);margin-right:.4rem;font-size:.75rem}.hand-piece{padding:.45rem .7rem;font-family:Yu Mincho,serif;font-size:1.05rem}.game-side{position:sticky;top:1rem}.game-side h1{font-size:clamp(1.8rem,4vw,3rem)}.game-side-head .eyebrow{margin-bottom:.35rem}.details-toggle{width:100%;margin-bottom:.7rem}.game-details p{font-size:.85rem}.danger{color:#ff9a8f;border-color:#8e3b33}.search-info{color:var(--muted);font-size:.75rem}.cpu-error{border-left:3px solid var(--red);color:#f0b4ad;background:#341d19;padding:.7rem;font-size:.82rem}.result-card{border-top:1px solid var(--line);gap:1rem;padding-top:1rem;display:grid}.result-card span{color:var(--gold)}.result-card strong{font-family:Yu Mincho,serif;font-size:1.7rem}.result-actions{flex-wrap:wrap;gap:.6rem;display:flex}.tutorial-modal{max-width:28rem}.tutorial-steps{gap:.6rem;margin:0;padding-left:1.2rem;display:grid}.tutorial-note{color:var(--muted,#6b635c);font-size:.9rem}.modal-backdrop{z-index:20;padding:max(1rem, var(--safe-bottom)) max(1rem, var(--safe-right)) max(1rem, var(--safe-bottom)) max(1rem, var(--safe-left));background:#080604d9;place-items:end center;display:grid;position:fixed;inset:0}.modal{border:1px solid var(--gold);width:min(420px,100%);margin-bottom:max(0px, calc(var(--safe-bottom)));background:#211d19;padding:1.5rem;box-shadow:0 30px 100px #000}.modal-actions{gap:.65rem;display:grid}.modal-actions button,.promotion-modal .modal-actions button,.confirm-modal .modal-actions button{width:100%;min-height:var(--touch-min);font-size:1.05rem}@media (width>=681px){.modal-backdrop{place-items:center}}.rules-list{background:var(--line);border:1px solid var(--line);grid-template-columns:1fr 1fr;gap:1px;margin:2rem 0;display:grid}.rules-list article{background:var(--panel);padding:1rem}.rules-list strong{min-width:3rem;font-family:Yu Mincho,serif;font-size:1.4rem;display:inline-block}.rules-list span{color:var(--gold)}.rules-list p{margin:.5rem 0 0;font-size:.82rem}.invite-code{border:1px solid var(--gold);color:var(--gold);letter-spacing:.28em;text-align:center;background:#161310;margin:1.5rem 0;padding:1.25rem 1.5rem;font-size:clamp(2rem,8vw,3.2rem);font-weight:800}.ready-panel small{color:var(--muted);margin-top:.35rem;font-size:.75rem;display:block}footer{border-top:1px solid var(--line);color:var(--muted);justify-content:space-between;gap:1rem;padding:1.25rem clamp(1rem,4vw,4rem);font-size:.68rem;display:flex}@media (width<=900px){.editor-layout{grid-template-columns:1fr 1.4fr}.piece-inspector{grid-column:1/-1}.mode-grid{grid-template-columns:1fr 1fr}}@media (width<=680px){.site-header{height:52px}.version{display:none}.screen{width:min(100% - 1rem,590px);padding:1rem 0 1.5rem}.title-row,.setup-layout,.game-layout,.editor-layout{grid-template-columns:1fr;display:grid}.title-row .row-actions,.deck-list-actions{justify-content:stretch;width:100%}.deck-list-actions>*{flex:1;justify-content:center}.deck-grid,.mode-grid{grid-template-columns:1fr}.editor-panel{order:2}.board-panel{order:1}.piece-inspector{order:3;grid-column:auto}.ready-panel{grid-template-columns:1fr 1fr}.countdown{grid-column:1/-1}.piece{width:76%;height:82%;font-size:clamp(1rem,8vw,2rem)}.palette{grid-template-columns:repeat(4,minmax(0,1fr))}.palette button{min-height:var(--touch-min)}footer{display:grid}.app-shell:has(.game-screen) footer{display:none}.game-screen{width:100%;max-width:100%;min-height:calc(100dvh - 52px - var(--safe-top) - var(--safe-bottom));flex-direction:column;padding:.5rem .5rem 1rem;display:flex}.game-top{gap:.4rem;margin-bottom:.4rem}.game-layout{flex-direction:column;flex:1;gap:.55rem;min-height:0;display:flex}.game-board-area{order:1;width:100%}.game-side{order:2;grid-template-columns:1fr auto;align-items:center;gap:.45rem .7rem;padding:.75rem;display:grid;position:static}.game-side-head{grid-column:1;min-width:0}.game-side h1{margin:0;font-size:1.15rem;line-height:1.25}.game-side .details-toggle{grid-column:1/-1;margin:0}.game-side .game-details,.game-side .cpu-error{grid-column:1/-1}.game-side .danger,.game-side .result-card{grid-area:1/2;align-self:center;margin:0}.game-side .result-card{border:0;flex-wrap:wrap;align-items:center;gap:.5rem;padding:0;display:flex}.game-side .result-card strong{font-size:1rem}.board{width:min(100%,100dvh - 270px);max-width:100%}.clock{margin:0;padding:.4rem .65rem}.clock strong{font-size:1.15rem}.hand{gap:.3rem}.check-banner{margin:.2rem auto;font-size:.78rem}.editor-sticky-bar{margin-inline:-.25rem;top:0}.editor-sticky-bar .large{flex:1;min-width:0}.card-actions{gap:.45rem}.card-actions button{min-height:var(--touch-min);flex:calc(50% - .45rem)}}@media (width<=430px){.board{width:min(100%,100dvh - 250px)}.game-side{grid-template-columns:1fr}.game-side .danger,.game-side .result-card{grid-area:auto/1;width:100%}}@media (height<=700px) and (width<=680px){.board{width:min(100%,100dvh - 220px)}.game-side h1{font-size:1rem}.site-header{height:46px}.game-screen{min-height:calc(100dvh - 46px - var(--safe-top) - var(--safe-bottom))}}@media (orientation:landscape) and (height<=500px){.game-layout{grid-template-columns:minmax(0,1fr) minmax(160px,.55fr);align-items:start;display:grid}.game-board-area,.game-side{order:initial}.board{width:min(100%,100dvh - 120px)}.app-shell:has(.game-screen) footer{display:none}}