:root{color-scheme:dark;--bg:#071522;--panel:#12253a;--soft:#1a354a;--edge:#294a5c;--ink:#f2f8fc;--muted:#b0c7d4;--blue:#20b9ed;--red:#f36c7b;--gold:#ffd075;--green:#165543}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:radial-gradient(ellipse at 50% -10%,#21435a,var(--bg) 59%);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--ink);min-height:100vh;overscroll-behavior-y:contain}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}button:disabled{opacity:.4;cursor:default}.app{max-width:480px;margin:0 auto;padding:env(safe-area-inset-top) 10px calc(25px + env(safe-area-inset-bottom));min-height:100vh}.mast{padding:17px 4px 12px;display:flex;align-items:center;justify-content:space-between;gap:9px}.micro{color:var(--gold);font-size:10px;letter-spacing:.12em;font-weight:900}.brand{font-size:25px;font-weight:950;letter-spacing:.05em;line-height:1.15}.caption{font-size:11px;color:var(--muted)}.pill{border:1px solid #95743a;border-radius:20px;padding:5px 8px;color:#ffdc8c;font-size:10px;white-space:nowrap;font-weight:800}.panel{border:1px solid var(--edge);background:linear-gradient(160deg,#10273a,#0e1e2e);padding:13px;border-radius:17px;margin-bottom:10px;box-shadow:0 8px 25px #0002}.hidden{display:none!important}.hero{font-size:20px;line-height:1.45;font-weight:900;margin:4px 0 9px}.muted{color:var(--muted)}.tiny{font-size:11px}.btn{color:#f8fcff;background:#214258;border:1px solid #4a6c81;border-radius:11px;font-weight:850;padding:12px 11px;min-height:43px}.btn.primary{background:linear-gradient(145deg,#1592c6,#18749c);border-color:#5acef4}.btn.gold{background:linear-gradient(130deg,#d6a447,#98712c);border-color:#ffe098;color:#171d21}.btn.full{width:100%}.btnlink{background:none;border:0;color:#86d7fa;text-decoration:underline;padding:9px}.stack{display:grid;gap:10px}.row{display:flex;align-items:center;gap:8px}.between{justify-content:space-between}.split{display:grid;grid-template-columns:1fr 1fr;gap:8px}.subtitle{font-size:16px;font-weight:900;margin:0}.rule{height:1px;background:#355061;margin:12px 0}.tabs{display:flex;gap:5px;padding:3px;background:#091d2c;border:1px solid #304b5d;border-radius:12px;margin-bottom:12px}.tab{flex:1;background:transparent;border:0;color:#b1c9d6;font-weight:900;padding:10px 4px;border-radius:9px}.tab.on{background:#28495e;color:#fff}.screen{display:none}.screen.on{display:block}.boardscore{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;font-size:12px;font-weight:900}.score{font-size:24px;font-variant-numeric:tabular-nums;letter-spacing:.05em}.blue{color:#75d7ff}.red{color:#ff8c9c}.turn{background:#213647;border-radius:9px;padding:8px 10px;text-align:center;font-weight:850;font-size:12px;margin-bottom:9px}.turn.mine{background:#1b564e;color:#e6ffec}.gamebar{display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:9px}.commands{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:7px}.cmd{min-height:42px;font-size:12px;font-weight:900;background:#1d394b;color:#dceefa;border:1px solid #416477;border-radius:9px;padding:7px 2px}.cmd.on{background:#f9c863;color:#1b252b;border-color:#fff0b2}.actions{font-size:12px;color:#c9e3ec;padding:3px 0 7px}.hint{color:#add2df;font-size:11px;margin:7px 0 9px;min-height:18px}.goal{height:15px;width:38%;margin:auto;border:2px solid #c5dbd9;border-bottom:0;text-align:center;font-size:9px;font-weight:900;letter-spacing:.06em;background:#66777866;line-height:12px}.goal.bottom{transform:rotate(180deg)}.pitch{position:relative;width:min(100%,42svh);margin:0 auto;aspect-ratio:11/17;background:#1a5946;box-shadow:0 0 0 2px #81bfa47a,inset 0 0 0 1px #ffffff54;overflow:hidden}.pitch:before{content:"";pointer-events:none;position:absolute;top:50%;left:0;width:100%;height:1px;background:#ddf8e99c;z-index:1}.pitch:after{content:"";pointer-events:none;position:absolute;top:50%;left:50%;width:25%;aspect-ratio:1;border:1px solid #d2f1e9a8;border-radius:50%;transform:translate(-50%,-50%);z-index:1}.penalty{position:absolute;pointer-events:none;left:22%;width:56%;height:12%;border:1px solid #e3ffec9b;z-index:1}.penalty.top{top:0;border-top:0}.penalty.bottom{bottom:0;border-bottom:0}.cells{display:grid;position:relative;z-index:2;grid-template-columns:repeat(11,minmax(0,1fr));grid-template-rows:repeat(17,minmax(0,1fr));width:100%;height:100%}.cell{min-width:0;min-height:0;background:transparent;border:0;padding:0;display:flex;align-items:center;justify-content:center;color:white;position:relative;border-radius:0;touch-action:manipulation}.cell.stripe{background:transparent}.cell.valid{background:#f6e38180;box-shadow:inset 0 0 0 1px #fff3ac}.cell.pass{background:#48b8e389;box-shadow:inset 0 0 0 1px #95e4fa}.cell.tackle{background:#fa7d8580;box-shadow:inset 0 0 0 1px #ffb1b1}.piece{position:relative;width:87%;height:auto;aspect-ratio:1;border-radius:50%;box-shadow:0 1px 3px #000b,inset 0 0 0 1px #ffffff40;border:1.5px solid #ffffffa8;display:flex;justify-content:center;align-items:center;font-size:clamp(8px,2.45vw,12px);font-weight:950;line-height:1;letter-spacing:-.05em}.piece.mineblue{background:#0c9acb}.piece.minered{background:#ce3b52}.piece.chosen{outline:3px solid #ffe484;outline-offset:0;z-index:3}.ball{position:absolute;right:-6px;bottom:-6px;font-size:15px;filter:drop-shadow(0 1px 1px #000)}.boardend{display:flex;justify-content:space-between;gap:7px;color:#b3d7d0;font-size:10px;margin:7px 2px 3px}.notice{padding:10px 12px;border-radius:10px;background:#1a3348;border-left:3px solid #ffd277;font-size:12px;min-height:42px}.logs{font-size:12px;color:#d0e5f0;max-height:130px;overflow-y:auto;padding:0;margin:0;list-style:none}.logs li{border-bottom:1px solid #355166;padding:6px 0}.roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:11px 0}.roster button{font-weight:850;padding:10px 2px;border:1px solid #45677a;background:#1b3648;color:#e1f0f8;border-radius:9px}.roster button.on{background:#93dcf8;color:#112232}.meter{display:flex;align-items:center;gap:7px;margin:11px 0}.meter .name{width:74px;font-weight:700;font-size:12px}.adjust{width:37px;height:36px;background:#1b3a51;border:1px solid #4a6c82;border-radius:8px;color:white;font-size:20px;font-weight:850}.meter strong{width:25px;text-align:right;font-variant-numeric:tabular-nums}.meter .grow{flex:1;height:8px;background:#294458;border-radius:30px;overflow:hidden}.meter .bar{height:100%;background:#59cbf0}.pts{font-size:20px;font-weight:950;color:#ffd47c}.invite{background:#102333;border:1px dashed #789aa9;border-radius:11px;padding:11px;text-align:center}.invitecode{letter-spacing:.12em;font-size:27px;font-weight:950;color:#ffd88c}.ok{color:#87f2ae}.notok{color:#ffc67f}.footer{text-align:center;color:#829cac;font-size:10px;padding:7px 8px 18px}.toast{position:fixed;z-index:10;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#203f53;border:1px solid #6bacc6;color:white;border-radius:12px;padding:10px 15px;box-shadow:0 10px 30px #0009;max-width:min(92vw,430px);font-size:12px;width:max-content}.tapnote{font-size:12px;line-height:1.7}code{color:#ace1fc;overflow-wrap:anywhere}input.joincode{width:100%;padding:13px;border-radius:10px;background:#0e2030;color:white;border:1px solid #587587;letter-spacing:.08em;text-align:center;text-transform:uppercase}.badge{display:inline-block;background:#254558;border:1px solid #517386;border-radius:7px;padding:3px 7px;font-size:10px;font-weight:800}.bottompanel{margin-top:10px}a{color:#9dddff}
@media(min-width:600px){.app{max-width:475px}}@media(max-width:370px){.app{padding-left:6px;padding-right:6px}.piece{font-size:8px}.cmd{font-size:11px}.panel{padding:10px}.ball{font-size:12px;right:-5px;bottom:-5px}}
.growth-summary,.statusline{background:#1b3447;border:1px solid #47647a;padding:10px;border-radius:10px;margin:9px 0;font-size:12px;color:#d7e6ef;line-height:1.7}
.roster{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.roster button{padding:9px 2px;font-size:11px}.roster button.need{border-color:#e2b35e}.roster button.coach{grid-column:span 2}.roster button.on{background:#ffd075;color:#17212e}
.meter .name{width:93px;flex-shrink:0;font-size:11px}.meter strong{width:52px;font-size:12px;white-space:nowrap}.adjust{font-size:14px;width:32px;flex-shrink:0}.meter{gap:4px;margin:10px 0}.meter .grow{min-width:12px}.meter .bar{background:#f4c669}
.sub-box,.reward-box{background:#132c3b;border:1px solid #45657a;border-radius:11px;padding:10px;margin-top:12px}.sub-box select{background:#183950;color:#fff;border:1px solid #56778a;border-radius:8px;padding:10px;max-width:100%;margin-right:6px}.sub-box strong,.reward-box strong{font-size:13px}.reward-box{border-color:#d1a45b}.reward-box .btn{margin-top:10px}.btn:disabled{filter:grayscale(.4)}

.commands{grid-template-columns:repeat(3,1fr)}.cell.tackle{outline:1px solid #ffb0b0}.recovery{margin-top:16px;background:#112b3c;border:1px solid #395d76;border-radius:12px;padding:12px}.recoverycode{word-break:break-all;color:#ffd075;font-weight:800;font-size:12px;margin:8px 0}.piece{font-size:clamp(7px,2.15vw,11px)}

/* v0.7 names and help */
.naming-settings{background:#102b3c;border:1px solid #365e75;border-radius:12px;padding:11px;margin:10px 0 14px}
.field-title{display:block;font-size:12px;font-weight:850;color:#e2f4fb;margin-bottom:6px}
.naming-settings input{min-width:0;flex:1;width:100%;border:1px solid #55778c;border-radius:9px;background:#092132;color:#f6fbff;padding:10px;font-size:16px}
.naming-settings .row{gap:6px;align-items:stretch}.naming-settings .btn{flex:0 0 auto}
.naming-settings .tiny{margin:7px 0 0}
.guide{font-size:13px;line-height:1.75;color:#dcecf5}.guide h3{font-size:14px;color:#ffd68d;margin:19px 0 5px;border-bottom:1px solid #405c68;padding-bottom:3px}.guide p{margin:7px 0 12px}.guide strong{color:#fff}
#help-home-content{margin-bottom:14px}.boardscore>div:first-child,.boardscore>div:last-child{max-width:36%;overflow-wrap:anywhere;font-size:11px;line-height:1.25}
.roster button{overflow-wrap:anywhere;min-height:44px;font-size:10px;padding:5px 2px}.roster button.coach{grid-column:span 2}

/* v0.8 tactical commands: only circular preview markers, no permanent grid */
.tactic-box{margin:10px 0;background:#122f43;border:1px solid #40677c;border-radius:12px;padding:10px}
.tactic-box strong{font-size:13px}.tactic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:9px 0}
.tactic-btn{background:#204459;color:#fff;border:1px solid #578093;border-radius:10px;min-height:41px;padding:6px 3px;font-size:12px;font-weight:900}
.tactic-btn.on{background:#e5bd60;color:#182431;border-color:#ffedbd}.tactic-btn:disabled{opacity:.3}
.tactic-feedback{font-size:11px;color:#b8deeb;min-height:27px;margin:6px 0 8px}
.piece.tactical-source{box-shadow:0 0 0 2px #ffcf69,0 0 10px #ffd075;z-index:4}
.tactic-target{display:flex;align-items:center;justify-content:center;width:70%;aspect-ratio:1;background:#f7cc58d8;border:1px solid #fff2be;border-radius:50%;font-size:12px;color:#1b3023;font-weight:900;pointer-events:none}


/* v0.9: mobile-first match screen - present the field before controls */
body:has(#game:not(.hidden)) .mast{display:none}
body:has(#game:not(.hidden)) .footer{display:none}
body:has(#game:not(.hidden)) .app{padding:env(safe-area-inset-top) 5px calc(12px + env(safe-area-inset-bottom))}
#game.panel{padding:7px 6px 12px;box-shadow:none;background:#0a2030}
#game .tabs{gap:2px;padding:2px;margin:0 0 5px;border-radius:8px}
#game .tab{padding:5px 3px;min-height:30px;font-size:12px}
#screen-play.on{display:block}
.match-hud{padding:0 3px 3px}
.match-hud .boardscore{margin:0;min-height:35px;gap:6px}
.match-hud .boardscore>div:first-child,.match-hud .boardscore>div:last-child{flex:1;max-width:unset;min-width:0;font-size:12px;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.match-hud .boardscore>div:last-child{text-align:right}
.scoreline{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;font-variant-numeric:tabular-nums}
.scorecolon{font-weight:700;font-size:16px;color:#9fb8c5}
.scoreline .score{font-size:23px;line-height:1.2}
.match-meta{display:flex;justify-content:space-between;align-items:center;gap:7px;margin-bottom:5px}
.match-meta .turn{flex:1;min-height:24px;display:flex;align-items:center;justify-content:center;margin:0;padding:2px 5px;font-size:11px;border-radius:7px}
.meta-remaining{font-size:11px;color:#bdd5de;white-space:nowrap;background:#1a3746;padding:4px 7px;border-radius:6px}
.field-wrap{margin:0 auto;width:100%;max-width:420px}
.field-wrap .pitch{width:100%;max-width:none;aspect-ratio:11/17}
.field-wrap .goal{height:13px;font-size:8px;line-height:11px}
.field-wrap .goal.bottom{color:transparent}
#screen-play .piece{width:92%;font-size:clamp(9px,2.7vw,13px);border:1.6px solid #dceef2}
#screen-play .piece.chosen{outline:3px solid #ffe484}
#screen-play .ball{right:-5px;bottom:-5px;font-size:14px}
#screen-play .boardend{padding:2px 4px;margin:3px 0 0;color:#c1d6df}
.play-prompt{display:flex;flex-direction:column;gap:4px;margin:5px 1px 7px}
.play-prompt .hint{font-size:12px;font-weight:900;color:#ffdf92;margin:0;min-height:0}
.play-prompt .notice{font-size:11px;line-height:1.3;min-height:0;background:transparent;border:0;padding:0;color:#b8cdd9}
.play-controls{background:#112b3c;border:1px solid #345569;padding:7px;border-radius:12px;display:flex;flex-direction:column;gap:6px}
.play-controls .commands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0}
.play-controls .cmd{min-height:45px;font-size:13px;padding:6px 3px;background:#24475c;color:#f4faff;border-color:#4c7991}
.play-controls .cmd.on{background:#ffd075;color:#17212b;border-color:#ffe7a6}
.action-row{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:6px}
.action-item{background:#1c4257;color:#f3fbff;border:1px solid #577e93;border-radius:9px;min-height:44px;font-size:12px;font-weight:900;padding:7px 4px}
.action-item[aria-expanded="true"]{background:#2d6579}
.action-next{color:#20211e;background:#e8b34d;border-color:#ffe0a1}
.disclosure{font-size:13px}
.action-footer{display:flex;align-items:center;justify-content:space-between;gap:7px;min-height:28px}
.action-footer .actions{font-size:11px;padding:0;line-height:1.3;min-width:0;flex:1}
.action-footer .btn{padding:5px 12px;min-height:30px;font-size:11px;white-space:nowrap}
#game .drawer{margin:7px 0 0;background:#122e41;border:1px solid #37576b;border-radius:10px;padding:0}
#game .drawer>summary{list-style:none;cursor:pointer;font-weight:900;font-size:13px;min-height:40px;display:flex;justify-content:space-between;align-items:center;padding:8px 11px;gap:5px}
#game .drawer>summary::-webkit-details-marker{display:none}
#game .drawer>summary:after{content:'⌄';font-size:17px;line-height:1;color:#b2d7e8;flex:0 0 auto}
#game .drawer[open]>summary:after{content:'⌃'}
#game .drawer>summary .tiny{font-size:10px;font-weight:500;max-width:60%;line-height:1.15}
#game .drawer.tactic-box>.tactic-grid,#game .drawer.tactic-box>.tactic-feedback,#game .drawer.tactic-box>#tactic-launch{margin-left:9px;margin-right:9px}
#game .drawer.tactic-box>#tactic-launch{width:calc(100% - 18px);margin-bottom:10px}
#game .drawer.sub-box>p,#game .drawer.sub-box>.sub-input-row{margin:7px 10px}
#game .drawer.sub-box select{width:55%;min-width:0;margin:0}
.sub-input-row{display:flex;align-items:center;gap:6px}
#game .drawer.sub-box .btn{min-height:43px;flex:1;padding:8px 5px;font-size:12px}
#game #game-history .logs,#game #game-history .tapnote{margin:6px 12px 11px}
#game .reward-box{margin-top:8px}
@media(min-width:480px){#game.panel{padding:9px 8px}body:has(#game:not(.hidden)) .app{max-width:450px}}
@media(max-width:360px){#screen-play .piece{font-size:9px}.play-controls .cmd{font-size:12px}.match-hud .boardscore>div:first-child,.match-hud .boardscore>div:last-child{font-size:10px}}