:root{--bg:#080e1c;--bg2:#0d1630;--panel:#111b33;--panel2:#18274a;--line:#ffffff17;--text:#eaf0fb;--mute:#9db0cf;--orange:#ff8a2a;--orange2:#ffb020;--blue:#4aa3ff;--yellow:#ffd23f;--green:#37d27a;--red:#ff5d5d;--r:14px;--head:"Avenir Next Condensed","Arial Narrow","Roboto Condensed","Helvetica Neue",Impact,system-ui,sans-serif;--body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1200px 600px at 20% -10%,#17306a55,transparent),radial-gradient(900px 500px at 100% 0,#ff8a2a22,transparent),var(--bg);color:var(--text);font:16px/1.65 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--orange2);text-decoration:none}a:hover{text-decoration:underline}
img,svg{max-width:100%}
.wrap{width:min(1180px,100% - 28px);margin:0 auto}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:8px 12px;z-index:99}.skip:focus{left:8px;top:8px}

/* header */
.hdr{position:sticky;top:0;z-index:30;background:#080e1ccc;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:18px;height:58px}
.logo{display:flex;align-items:center;gap:10px;font:900 20px/1 var(--head);letter-spacing:.04em;text-transform:uppercase;color:var(--text)}
.logo:hover{text-decoration:none}
.logo svg{width:30px;height:30px}
.logo b{color:var(--orange)}
.nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.nav a{color:var(--mute);padding:8px 12px;border-radius:9px;font-weight:600;font-size:14px}
.nav a:hover,.nav a[aria-current]{background:#ffffff10;color:var(--text);text-decoration:none}

/* hero */
.hero{padding:20px 0 8px;text-align:center}
.hero h1{margin:0 0 8px;font:900 clamp(30px,4.6vw,48px)/1.04 var(--head);text-transform:uppercase;letter-spacing:.01em}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero p.lead{margin:0 auto;max-width:760px;color:var(--mute);font-size:clamp(16px,2.2vw,19px)}
.badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.badges span{background:#ffffff0f;border:1px solid var(--line);border-radius:99px;padding:5px 12px;font-size:13px;color:var(--mute)}

/* game shell */
.game{margin:14px auto 40px;background:linear-gradient(180deg,var(--panel),#0d1528);border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:0 24px 60px #0008;min-height:420px}
.noscript{padding:30px;text-align:center;color:var(--mute)}
.gm-loading{display:grid;place-items:center;min-height:380px;color:var(--mute);gap:6px;text-align:center}
.spin{width:36px;height:36px;border:4px solid #ffffff22;border-top-color:var(--orange);border-radius:50%;animation:sp 1s linear infinite;margin:0 auto}
@keyframes sp{to{transform:rotate(360deg)}}

.modes{display:flex;gap:6px;background:#0a1226;border:1px solid var(--line);border-radius:12px;padding:5px;width:fit-content;margin:0 auto 18px}
.tab{appearance:none;border:0;background:transparent;color:var(--mute);font:800 15px var(--head);letter-spacing:.05em;text-transform:uppercase;padding:10px 20px;border-radius:9px;cursor:pointer}
.tab.on{background:linear-gradient(180deg,var(--orange2),var(--orange));color:#1a0e00}
.tab:not(.on):hover{color:var(--text);background:#ffffff0d}
.menu-body{max-width:640px;margin:0 auto}
.sc-card{background:linear-gradient(160deg,#16264a,#0f1a35);border:1px solid #ffffff22;border-radius:16px;padding:18px}
.sc-top{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.sc-meta{color:var(--mute);font-size:13px}
.chip{font:800 12px var(--head);letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:#ffffff14}
.chip.off{background:#ff8a2a2e;color:var(--orange2)}.chip.def{background:#4aa3ff2e;color:#8cc6ff}
.sc-score{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;text-align:center;margin:6px 0 12px}
.sc-score div:first-child,.sc-score div:last-child{display:flex;flex-direction:column}
.sc-score b{font:900 22px var(--head);letter-spacing:.04em}
.sc-score span{font:900 46px/1 var(--head)}
.sc-clock{font:900 36px/1 var(--head);color:var(--yellow);background:#00000040;border-radius:10px;padding:8px 14px}.sc-clock small{display:block;font:700 11px var(--body);color:var(--mute);letter-spacing:.1em}
.sc-line{margin:0 0 4px;color:var(--text)}
.sc-tag{margin:0;color:var(--orange2);font-weight:700}
.done-box{margin-top:12px;background:#37d27a1f;border:1px solid #37d27a55;border-radius:10px;padding:10px 12px}
.menu-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 4px;justify-content:center}
.fine{color:var(--mute);font-size:13px;text-align:center;margin:8px 0}
.past-row{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--mute)}
.past{appearance:none;background:#ffffff0d;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:5px 9px;cursor:pointer;position:relative;font-size:13px}
.past:hover{background:#ffffff1c}
.past i{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--mute)}.past i.w{background:var(--green)}.past i.l{background:var(--red)}
.sv-box{display:flex;align-items:center;gap:18px;justify-content:center;background:#ffffff0a;border:1px solid var(--line);border-radius:16px;padding:18px}
.sv-num{font:900 72px/1 var(--head);color:var(--orange)}
.sv-txt{display:flex;flex-direction:column}.sv-txt span{color:var(--mute)}
.sv-help{text-align:center;color:var(--mute);margin:12px 0}
.pr-box{display:flex;flex-direction:column;gap:6px}
.pr-box label{font-weight:700}
select{background:#0a1226;color:var(--text);border:1px solid #ffffff30;border-radius:10px;padding:12px;font:inherit}
.menu-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:22px auto 0;max-width:640px}
.menu-stats div{background:#ffffff08;border:1px solid var(--line);border-radius:12px;text-align:center;padding:10px 4px}
.menu-stats b{display:block;font:900 24px var(--head)}.menu-stats span{font-size:12px;color:var(--mute)}

.btn{appearance:none;border:1px solid #ffffff30;background:#ffffff0f;color:var(--text);padding:12px 20px;border-radius:11px;font:800 15px var(--head);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:transform .12s,background .15s}
.btn:hover{background:#ffffff1c}.btn:active{transform:translateY(1px)}
.btn small{display:block;font:500 11px var(--body);text-transform:none;letter-spacing:0;opacity:.8}
.btn.primary{background:linear-gradient(180deg,var(--orange2),var(--orange));border-color:transparent;color:#1a0e00;box-shadow:0 8px 22px #ff8a2a44}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.link{appearance:none;background:none;border:0;color:var(--mute);cursor:pointer;font:600 14px var(--body);padding:4px}.link:hover{color:var(--text)}

/* play */
.gm-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:13px;color:var(--mute)}
.gm-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board{background:#070d1c;border:1px solid var(--line);border-radius:16px;padding:12px}
.sb{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:10px;margin-bottom:10px}
.sb-team{display:flex;align-items:center;gap:12px;background:#ffffff08;border-radius:12px;padding:8px 14px;border-top:3px solid var(--orange)}
.sb-team.opp{flex-direction:row-reverse;border-top-color:var(--blue)}
.sb-name{font:900 24px/1.05 var(--head);letter-spacing:.04em;flex:1}.sb-team.opp .sb-name{text-align:right}
.sb-name small{display:block;font:600 11px var(--body);letter-spacing:0;color:var(--mute)}
.poss{display:inline-block;width:0;height:0;border-left:9px solid var(--yellow);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-right:7px;vertical-align:middle}
.opp .poss{border-left:0;border-right:9px solid var(--yellow);margin:0 0 0 7px;float:right;margin-top:7px}
.sb-score{font:900 52px/1 var(--head)}
.sb-to{display:flex;gap:4px;flex-direction:column}.sb-to i{width:14px;height:5px;border-radius:2px;background:#ffffff25}.sb-to i.on{background:var(--yellow)}
.sb-mid{background:#000;border:1px solid #ffffff22;border-radius:12px;text-align:center;padding:6px 18px;min-width:130px}
.sb-time{font:900 38px/1 var(--head);color:var(--yellow);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.sb-q{font:800 12px var(--head);letter-spacing:.14em;color:var(--mute)}
.run{display:block;font:800 10px var(--body);letter-spacing:.12em;color:var(--mute);margin-top:2px}.run.on{color:var(--green)}
.sit{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:10px;font-size:15px}
.sit>b{font:900 22px var(--head);letter-spacing:.05em;background:var(--yellow);color:#201600;padding:2px 12px;border-radius:8px}
.sit span{color:var(--mute)}
.sit .wp{margin-left:auto}.sit .wp b{color:var(--text);font-size:18px}.sit .wp small{margin-left:6px;font-size:11px}
.fieldwrap{position:relative;border-radius:14px;overflow:hidden}
#field{display:block;width:100%;height:auto}
.pl circle{stroke:#0009;stroke-width:2}
.pl circle.hit{fill:transparent;stroke-width:0}
.pl circle.c{stroke:#0009}
.pl:hover circle.c{stroke:#ffffff;stroke-width:3}
.pl:focus circle.c{stroke:var(--yellow);stroke-width:3}
.po circle.c{fill:#4aa3ff}.pd circle.c{fill:#ff8a2a}.home-off .po circle.c{fill:#ff8a2a}.home-off .pd circle.c{fill:#4aa3ff}
.pl text{transform-box:fill-box;transform-origin:center;transform:scaleX(var(--fx,1));pointer-events:none}
.pn{font:800 12px var(--body);fill:#fff;paint-order:stroke;stroke:#0008;stroke-width:2px}
.pn.position-label{font-size:9px}
.pl.is-carrier .c{stroke:#fff;stroke-width:3.5;filter:drop-shadow(0 0 4px #ffd23f)}
.in-motion .pl.is-contact .c{stroke:#ffe4a0;stroke-width:3.5}
.in-motion .pl.is-down .c{transform:rotate(-22deg) scale(1.12,.72);stroke:#fff2ca;stroke-width:3}
.in-motion .pl.is-down .pn{paint-order:stroke;stroke:#102a1d;stroke-width:3px}
.ball-shadow{fill:#071b10;pointer-events:none}
.ball-trail{fill:none;stroke:#fff8;stroke-width:2.5;stroke-linecap:round;pointer-events:none}
.pt{font:700 12px var(--body);fill:#fff;paint-order:stroke;stroke:#000c;stroke-width:3px;stroke-linejoin:round}
.banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7);opacity:0;pointer-events:none;font:900 clamp(22px,5vw,46px)/1 var(--head);letter-spacing:.05em;text-transform:uppercase;padding:10px 24px;border-radius:12px;background:#000c;border:2px solid #ffffff55;white-space:nowrap;transition:opacity .25s,transform .25s}
.banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.banner.good{color:var(--green);border-color:var(--green)}.banner.bad{color:var(--red);border-color:var(--red)}.banner.neutral{color:var(--yellow);border-color:var(--yellow)}

.gm-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:14px;margin-top:14px}
.gm-grid.over{grid-template-columns:1fr}.gm-grid.over .gm-main{display:none}.gm-grid.over .gm-side{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.gm-grid.over .log{margin-top:0}
.panel{background:#0b1327;border:1px solid var(--line);border-radius:14px;padding:14px}
.panel h3{margin:0;font:900 18px var(--head);letter-spacing:.06em;text-transform:uppercase}
.panel-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.hint{color:var(--mute);font-size:13px}
.tabs2{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.tabs2 button{appearance:none;border:1px solid var(--line);background:#ffffff08;color:var(--mute);padding:6px 12px;border-radius:8px;font:800 13px var(--head);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.tabs2 button.on{background:var(--panel2);color:var(--text);border-color:#ffffff40}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:8px}
.cards.def{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.card{appearance:none;text-align:left;background:#111d3a;border:1px solid #ffffff1c;color:var(--text);border-radius:12px;padding:10px 12px;cursor:pointer;display:grid;grid-template-columns:40px 1fr;grid-template-areas:"i n" "d d" "r r";gap:2px 10px;font:inherit;transition:border-color .15s,transform .12s,background .15s}
.card:hover{border-color:#ffffff55;background:#15244a}
.card.sel{border-color:var(--orange);background:#2a1d10;box-shadow:0 0 0 2px #ff8a2a55}
.card.def{grid-template-areas:"n n" "d d"}
.rt{grid-area:i;width:40px;height:40px;color:var(--orange2);background:#0000003a;border-radius:9px;padding:3px}
.cn{grid-area:n;font:900 16px/1.2 var(--head);letter-spacing:.04em;text-transform:uppercase;align-self:center}
.cd{grid-area:d;font-size:12.5px;color:var(--mute);line-height:1.4}
.cr{grid-area:r;display:flex;gap:10px;align-items:baseline;font-size:11px;color:var(--mute);margin-top:6px;padding-top:6px;border-top:1px solid #ffffff12}
.cr .ys{color:var(--text);font:800 13px var(--head);letter-spacing:.04em;text-transform:uppercase}.cr .fd{font-weight:700;color:var(--orange2)}
.cr .rk{margin-left:auto;font-size:10px;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px}
.cr .rk::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green)}.cr .rk.r2::before{background:var(--yellow)}.cr .rk.r3::before{background:var(--red)}
.pips i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ffffff25;margin-left:2px}.pips i.on{background:var(--orange2)}
.opts{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px}
.opt{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.opt label{font-size:12px;color:var(--mute);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.seg{display:inline-flex;background:#0a1226;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{appearance:none;border:0;background:transparent;color:var(--mute);padding:7px 12px;font:700 13px var(--body);cursor:pointer}
.seg button.on{background:var(--panel2);color:var(--text)}
.seg.dis{opacity:.45}
.ctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.ctl-l{display:flex;gap:12px;align-items:center;flex-wrap:wrap;flex:1;min-width:220px}
.to{appearance:none;border:1px solid #ffffff30;background:#ffffff0a;color:var(--text);border-radius:9px;padding:7px 12px;font:700 13px var(--body);cursor:pointer}
.to span{color:var(--mute);margin-left:4px;font-weight:500}
.to.on{background:#ffd23f26;border-color:var(--yellow)}
.to:disabled{opacity:.4;cursor:not-allowed}
.snap{min-width:200px;font-size:16px;padding:14px 22px}
.prompt p{margin:6px 0 12px;color:var(--mute)}
.prompt-row{display:flex;gap:10px;flex-wrap:wrap}.prompt-row .btn{flex:1;min-width:180px}

.review h3{margin-bottom:6px}.review.empty p{color:var(--mute);font-size:14px;margin:6px 0 0}
.rv-h{display:flex;justify-content:space-between;align-items:center}
.grade{font:900 13px var(--head);letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:99px}
.g-best{background:#37d27a26;color:var(--green)}.g-close{background:#ffd23f26;color:var(--yellow)}.g-costly{background:#ff8a2a30;color:var(--orange)}.g-miss{background:#ff5d5d30;color:var(--red)}
.rv-line{margin:8px 0;font-size:14px}
.alts{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:4px}
.alts li{display:flex;justify-content:space-between;background:#ffffff08;border-radius:8px;padding:6px 10px;font-size:13px}.alts li i{color:var(--mute);font-size:11px}
.log{margin-top:14px}
.log ol{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px;max-height:340px;overflow:auto}
.log li{display:grid;grid-template-columns:42px 1fr;gap:8px;font-size:13px;line-height:1.45;background:#ffffff07;border-left:3px solid #ffffff22;border-radius:6px;padding:6px 8px}
.log li time{color:var(--mute);font-variant-numeric:tabular-nums}
.log li.pos{border-left-color:var(--green)}.log li.neg{border-left-color:var(--red)}
.log li small{color:var(--mute)}
.gd{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:currentColor}

.endp{display:grid;grid-template-columns:1.1fr 1fr 1.4fr;gap:14px;align-items:center;margin-top:12px;padding:16px;border-radius:14px;border:1px solid #ffffff30;background:#101b36}
.endp.win{background:linear-gradient(120deg,#12351f,#101b36);border-color:#37d27a66}.endp.loss{background:linear-gradient(120deg,#3a1518,#101b36);border-color:#ff5d5d55}
.end-title{font:900 42px/1 var(--head);letter-spacing:.04em}
.win .end-title{color:var(--green)}.loss .end-title{color:var(--red)}.tie .end-title{color:var(--yellow)}
.end-score{font:800 18px var(--head);color:var(--mute);margin-top:6px;letter-spacing:.04em}
.sv-line{margin:6px 0 0}
.coach{display:flex;align-items:baseline;gap:10px}.coach b{font:900 54px/1 var(--head)}.coach span{color:var(--mute);font-size:13px}.coach em{font:900 28px var(--head);font-style:normal;color:var(--orange2)}
.gc{list-style:none;display:flex;gap:6px;padding:0;margin:10px 0 0}.gc li{flex:1;text-align:center;border-radius:8px;padding:6px 2px;font-size:11px}.gc b{display:block;font:900 20px var(--head)}
.spark-wrap span{font-size:12px;color:var(--mute)}.spark{display:block;width:100%;height:70px;background:#0000003a;border-radius:8px;margin-top:4px}
.end-r .menu-actions{justify-content:flex-start;margin-top:10px}

/* content */
main section.block{padding:34px 0;border-top:1px solid var(--line)}
h2{font:900 clamp(26px,4vw,38px)/1.1 var(--head);text-transform:uppercase;margin:0 0 14px;letter-spacing:.01em}
h2 em{font-style:normal;color:var(--orange)}
h3.sub{font:900 20px var(--head);text-transform:uppercase;letter-spacing:.04em;margin:20px 0 6px}
p{margin:0 0 14px}
.lead2{color:var(--mute);max-width:820px;font-size:17px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.step .n{font:900 40px/1 var(--head);color:var(--orange);margin-bottom:6px}
.step h3{margin:0 0 6px;font:900 20px var(--head);text-transform:uppercase}
.step p{color:var(--mute);margin:0}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.box h3{margin:0 0 6px;font:900 19px var(--head);text-transform:uppercase;letter-spacing:.03em}
.box p{color:var(--mute);margin:0}
.box p+p{margin-top:10px}
.pb{width:100%;border-collapse:collapse;font-size:14px;background:var(--panel);border-radius:var(--r);overflow:hidden}
.pb th,.pb td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.pb th{background:#16264a;font:800 13px var(--head);letter-spacing:.08em;text-transform:uppercase}
.pb td:first-child{font-weight:700;white-space:nowrap}
.tblwrap{overflow:auto;border-radius:var(--r);border:1px solid var(--line)}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:8px;padding:0 16px}
.faq summary{cursor:pointer;padding:14px 0;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--orange);font-weight:900;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--mute);padding-bottom:14px;margin:0}
.links{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:10px}
.links a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;color:var(--text)}
.links a:hover{border-color:var(--orange);text-decoration:none}
.links a b{display:block;font:900 17px var(--head);text-transform:uppercase;margin-bottom:4px}.links a span{color:var(--mute);font-size:13.5px}
.page{padding:34px 0 50px;max-width:860px}
.page h1{font:900 clamp(34px,5vw,54px)/1.04 var(--head);text-transform:uppercase;margin:0 0 12px}
.page h2{font-size:clamp(22px,3vw,30px);margin:30px 0 10px}
.page ul,.page ol{padding-left:22px;margin:0 0 14px}.page li{margin-bottom:6px}
.page .meta{color:var(--mute);font-size:14px;margin-bottom:20px}
.crumbs{font-size:13px;color:var(--mute);margin-bottom:10px}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.cta .btn{text-decoration:none;display:inline-block}
.callout{background:#ff8a2a14;border:1px solid #ff8a2a55;border-radius:12px;padding:14px 16px;margin:16px 0}
.ftr{border-top:1px solid var(--line);padding:30px 0 40px;color:var(--mute);font-size:14px;margin-top:30px}
.ftr .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:20px}
.ftr h4{margin:0 0 8px;color:var(--text);font:900 15px var(--head);letter-spacing:.08em;text-transform:uppercase}
.ftr a{display:block;color:var(--mute);padding:2px 0}.ftr a:hover{color:var(--text)}
.ftr p.small{font-size:12.5px;margin:14px 0 0}

@media (max-width:900px){
.gm-grid.over .gm-side{grid-template-columns:1fr}
.gm-grid{grid-template-columns:1fr}.endp{grid-template-columns:1fr}.steps,.grid3{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}
.ftr .cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* sticky snap bar */
.ctl{position:sticky;bottom:0;z-index:6;background:linear-gradient(180deg,#0b1327e6,#0b1327 30%);margin:14px -14px -14px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));border-radius:0 0 14px 14px;backdrop-filter:blur(6px)}
.seldesc{margin-top:12px;font-size:13.5px;color:var(--mute);background:#ffffff08;border-left:3px solid var(--orange);border-radius:8px;padding:8px 12px;display:none}
.seldesc b{color:var(--text);font:900 15px var(--head);letter-spacing:.04em;text-transform:uppercase;margin-right:4px}
.seldesc span{margin-left:8px;white-space:nowrap}
.keys{margin:10px 0 0;font-size:12px;color:var(--mute)}
.keys kbd{background:#ffffff14;border:1px solid #ffffff2a;border-bottom-width:2px;border-radius:5px;padding:0 6px;font:700 11px var(--body);color:var(--text);margin:0 1px}
@media (hover:none){.keys{display:none}}
.card{position:relative}
.cards{counter-reset:k}
.card::before{counter-increment:k;content:counter(k);position:absolute;right:8px;top:6px;font:800 11px var(--body);color:#ffffff55}
.card:nth-child(n+10)::before{content:none}
@media (hover:none){.card::before{content:none}}

/* leaderboard */
.board-box{max-width:760px;margin:0 auto}
.namef{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.namef label{font-size:12px;color:var(--mute);font-weight:700;letter-spacing:.06em;text-transform:uppercase;width:100%}
.namef input{flex:1;min-width:160px;max-width:280px;background:#0a1226;border:1px solid var(--line);color:var(--text);border-radius:9px;padding:9px 12px;font:600 15px var(--body)}
.bd-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:18px 0 8px}
.bd-h h3{margin:0;font:900 20px var(--head);letter-spacing:.05em;text-transform:uppercase}
.bd{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.bd li{display:grid;grid-template-columns:36px 1fr auto 72px;gap:8px;align-items:center;background:#ffffff08;border-radius:9px;padding:8px 12px;font-size:14px}
.bd li i{font:900 16px var(--head);font-style:normal;color:var(--mute)}
.bd li:nth-child(1) i{color:var(--yellow)}.bd li:nth-child(2) i{color:#d7dfee}.bd li:nth-child(3) i{color:#d89a63}
.bd li b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd li span{font-weight:700;font-variant-numeric:tabular-nums}.bd li em{font-style:normal;color:var(--mute);font-size:12px;text-align:right}
.bd li.you{background:#ff8a2a22;border:1px solid #ff8a2a77}
.bd-you{margin:6px 0;background:#ffd23f14;border:1px solid #ffd23f55;border-radius:9px;padding:8px 12px;font-size:14px}
.link{appearance:none;background:none;border:0;color:var(--orange2);cursor:pointer;font:inherit;padding:0;text-decoration:underline}
.rankline{margin:8px 0 0;font-size:14px;background:#ffd23f14;border:1px solid #ffd23f55;border-radius:9px;padding:6px 10px}
.rankline.off{background:#ffffff0a;border-color:var(--line);color:var(--mute)}
.style-line{margin:8px 0 0;font-size:13px;color:var(--mute)}.style-line b{color:var(--orange2);font:900 15px var(--head);letter-spacing:.05em;text-transform:uppercase}

.tab .sh{display:none}
.board-box .fine,.board-box p{text-align:left}
/* mobile */
@media (max-width:640px){
.hdr{position:static}.keys{display:none}.tab .sh{display:inline}.tab .lg{display:none}
.hdr .wrap{height:auto;padding:6px 0;flex-wrap:wrap;gap:2px}.nav{margin-left:0;overflow-x:auto;flex-wrap:nowrap;width:100%}.nav a{padding:6px 9px;font-size:13px;white-space:nowrap}
.hero{padding:18px 0 8px}.hero .badges{display:none}.hero p.lead{font-size:15px}
.game{padding:8px;border-radius:14px;margin-top:8px}
.modes{width:100%;overflow-x:auto;margin-bottom:12px;padding:4px;gap:3px}.tab{padding:9px 10px;font-size:12.5px;flex:1;white-space:nowrap}
.gm-bar{font-size:12px;flex-wrap:wrap;gap:6px}.gm-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* compact scoreboard: one row */
.sb{grid-template-columns:1fr auto 1fr;gap:6px;margin-bottom:6px}
.sb-team{padding:6px 8px;gap:6px;border-radius:10px}
.sb-name{font-size:15px}.sb-name small{display:none}
.sb-score{font-size:32px}.sb-to{display:flex;flex-direction:column;gap:3px}.sb-to i{width:10px;height:4px}
.sb-mid{min-width:0;padding:4px 10px}.sb-time{font-size:26px}.sb-q{font-size:10px;letter-spacing:.08em}.sb-mid .run{display:none}
.sit{gap:8px;font-size:13px;margin-bottom:6px}.sit>b{font-size:17px;padding:1px 9px}.sit .wp{margin-left:auto}.sit .wp small{display:none}.sit .wp b{font-size:15px}
.fieldwrap{border-radius:10px}
.banner{font-size:20px;padding:7px 14px}
.gm-grid{margin-top:8px;gap:10px}
.panel{padding:10px}.panel h3{font-size:16px}
.panel-h{margin-bottom:8px}.tabs2{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap}.tabs2 button{flex:1;white-space:nowrap;padding:8px 10px}
.panel-h .hint{display:none}
.cards,.cards.def{grid-template-columns:repeat(2,1fr);gap:6px}
.card{grid-template-columns:30px 1fr;grid-template-areas:"i n" "d d" "r r";padding:8px 8px;gap:2px 8px;min-height:50px}
.card.def{grid-template-areas:"n n" "d d"}
.rt{width:30px;height:30px;padding:2px}.cn{font-size:14px}.cr{margin-top:4px;padding-top:4px;gap:6px}.cr .rk{display:none}.cr .ys{font-size:12px}
.card:not(.sp) .cd{display:none}.card.sp .cd{font-size:11.5px}
.seldesc{display:block}
.ctl{margin:10px -10px -10px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:8px;border-radius:0 0 12px 12px}
.ctl-l{min-width:100%;gap:8px;flex-wrap:nowrap;overflow-x:auto}.ctl-l .hint{display:none}
.opt label{display:none}.seg button{padding:8px 10px}.to{white-space:nowrap;padding:8px 10px}
.opts{gap:8px;margin-top:8px}.opts .opt label{display:inline;font-size:11px}
.snap{width:100%;min-width:0;padding:14px;font-size:16px}
.endp{padding:12px}.end-title{font-size:34px}.coach b{font-size:42px}
.menu-stats{grid-template-columns:repeat(2,1fr)}
.sc-score span{font-size:36px}
.bd li{grid-template-columns:28px 1fr auto;padding:8px 10px}.bd li em{display:none}
.log ol{max-height:240px}
}

/* headline + intro modal + real result */
.sc-big{text-align:center;margin:2px 0 10px}
.sc-big b{display:block;font:900 clamp(34px,7vw,52px)/1 var(--head);letter-spacing:.02em;color:var(--text)}
.sc-big span{display:block;margin-top:4px;font:800 14px var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--orange2)}
.real{margin:8px 0 0;font-size:13.5px;color:var(--mute)}.real b{color:var(--text)}.real b.up{color:var(--green)}.real b.down{color:var(--orange)}
.modal{position:fixed;inset:0;z-index:100;background:#000a;display:grid;place-items:center;padding:16px;backdrop-filter:blur(3px)}
.modal-box{position:relative;background:#101b36;border:1px solid #ffffff2a;border-radius:18px;max-width:460px;width:100%;padding:22px 22px 18px;box-shadow:0 30px 80px #000a}
.modal-box h2{margin:0 0 12px;font-size:30px}
.modal-box ol{margin:0 0 10px;padding-left:20px;color:var(--mute)}.modal-box li{margin-bottom:8px}.modal-box li b{color:var(--text)}
.modal-box .btn{width:100%;margin-top:6px}
.modal-x{position:absolute;right:10px;top:8px;appearance:none;background:none;border:0;color:var(--mute);font-size:28px;cursor:pointer;line-height:1}

.mini{position:absolute;left:10px;right:10px;bottom:6px;height:5px;border-radius:3px;background:#00000066;pointer-events:none}
.mini i{position:absolute;top:-3px;width:11px;height:11px;margin-left:-5px;border-radius:50%;border:2px solid #fff;transition:left .9s cubic-bezier(.2,.8,.2,1)}
.mini #mf{width:3px;height:11px;border-radius:2px;border:0;background:var(--yellow);margin-left:-1px}
.cr .rk{white-space:nowrap}
.banner{top:14%;font-size:clamp(18px,3.4vw,30px);padding:6px 18px}

.narrow .pd .pt{display:none}

/* ===== competitor-parity additions: swing badge, announcements, glow, toast, sound, sticky scoreboard ===== */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sitwrap{position:relative}
.swing{position:absolute;right:-4px;top:-12px;font:900 17px/1 var(--head);letter-spacing:.02em;padding:3px 9px;border-radius:7px;background:#000a;border:1px solid #ffffff2e;animation:flipk .5s cubic-bezier(.2,1.4,.36,1) both}
.swing.up{color:var(--green)}.swing.dn{color:var(--red)}
@keyframes flipk{0%{transform:rotateX(90deg);opacity:0}60%{transform:rotateX(-14deg)}100%{transform:rotateX(0);opacity:1}}
.anno{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.72);opacity:0;pointer-events:none;font:900 clamp(26px,6.4vw,54px)/1 var(--head);letter-spacing:.05em;text-transform:uppercase;padding:10px 24px;border-radius:14px;background:#000d;border:2px solid #ffffff4a;white-space:nowrap;z-index:5;text-shadow:0 2px 22px #000}
.anno.show{animation:annopop .4s cubic-bezier(.2,1.5,.4,1) both, annohold .5s ease 1s both}
.anno.good{color:var(--green);border-color:var(--green)}
.anno.bad{color:var(--red);border-color:var(--red)}
.anno.neutral{color:var(--yellow);border-color:var(--yellow)}
.anno.opp{color:var(--blue);border-color:var(--blue)}
@keyframes annopop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes annohold{to{opacity:0}}
.toastbox{position:fixed;left:50%;bottom:16px;transform:translate(-50%,14px);background:var(--ink,#eaf0fb);color:var(--bg,#080e1c);font:800 14px var(--body);padding:8px 15px;border-radius:99px;z-index:80;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;box-shadow:0 8px 22px #0006;white-space:nowrap}
.toastbox.show{opacity:1;transform:translate(-50%,0)}
.sndbtn{appearance:none;background:#ffffff10;border:1px solid var(--line);color:var(--mute);border-radius:8px;width:30px;height:30px;padding:0;display:grid;place-items:center;cursor:pointer;flex:none;margin-left:2px}
.sndbtn:hover{background:#ffffff1c;color:var(--text)}
.sndbtn svg{width:16px;height:16px}
#fball ellipse,#fball line{filter:drop-shadow(0 3px 3px #0008)}
.pl.ppop{animation:ppop .4s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--i,0)*.02s)}
@keyframes ppop{0%{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(.2)}100%{opacity:1}}
.why-line{margin:8px 0 4px;font-size:13px;color:var(--orange2);border-left:3px solid var(--orange);padding-left:8px;line-height:1.5}
.gm-play .board{position:relative;top:auto;z-index:1}
.ctrlbtn{appearance:none;background:#ffffff0d;border:1px solid var(--line);color:var(--mute);border-radius:8px;padding:5px 9px;font:700 11px var(--head);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.ctrlbtn:hover{color:var(--text);background:#ffffff18}
.ctrlbtn:disabled{opacity:.35;cursor:not-allowed}
@media (prefers-reduced-motion: reduce){.anno.show,.swing,.pl.ppop{animation:none!important}.anno.show{opacity:.95;transform:translate(-50%,-50%) scale(1);transition:opacity .6s ease-out,transform .6s ease-out}.anno.show{animation:annohold .5s ease 1.3s both}.toastbox{transition:none}#fball{display:none!important}}
@media (max-width:640px){.swing{font-size:14px;padding:2px 7px;top:-10px}}

/* Live play: score above the field and playbook, feedback below. */
.game{scroll-margin-top:70px}
.resume-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;margin-bottom:14px;border:1px solid #ffb02066;border-radius:12px;background:#ffb0200d}
.game-gallery{margin:20px 0}.game-gallery figure{margin:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}.game-gallery img{display:block;width:100%;height:220px;object-fit:contain;background:var(--bg)}.game-gallery figcaption{padding:16px}.game-gallery h3{font:900 20px var(--head);margin:0 0 8px}.game-gallery p{font-size:14px;color:var(--mute);margin:0}
.resume-card b,.resume-card span{display:block}.resume-card span{color:var(--mute);font-size:12px;margin-top:3px}.resume-card .btn{flex:none}
.copy-fallback{position:fixed;inset:0;width:1px;height:1px;opacity:0}
.share-dialog{width:min(480px,calc(100% - 24px));padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text)}
.share-dialog::backdrop{background:#000a}.share-dialog h2{font-size:24px}.share-dialog p{color:var(--mute)}
.share-dialog textarea{display:block;width:100%;min-height:180px;margin:16px 0;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:12px;font:14px/1.5 var(--body);resize:vertical}
@media(max-width:640px){.resume-card{align-items:stretch;flex-direction:column}.resume-card .btn{width:100%}}
html:has(.gm-play){scroll-behavior:auto}
.gm-play{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(400px,1fr);grid-template-areas:"bar bar" "score score" "field calls" "result result" "feedback feedback";gap:12px;align-items:start}
.gm-bar{grid-area:bar;margin:0;min-height:32px}
#sbwrap{grid-area:score;position:sticky;top:58px;z-index:20;background:#0a1121;border:1px solid var(--line);border-radius:12px;padding:10px 12px 0;box-shadow:0 8px 20px #0003}
.sb{margin-bottom:8px}.sb-score{font-variant-numeric:tabular-nums}
.sb-team{padding:6px 12px}.sb-time{font-size:34px}.sb-score{font-size:42px}
.sit{gap:10px;font-size:13px;margin-bottom:8px}.sit>b{font-size:18px}.sit .wp{display:flex;align-items:center;gap:7px;font-size:12px}.sit .wp b{font-size:16px}
.wp-delta{font:700 11px var(--body);font-style:normal;padding:3px 6px;border-radius:5px;background:#ffffff0c;white-space:nowrap;color:var(--mute)}
.wp-delta.up{color:var(--green);background:#37d27a15}.wp-delta.down{color:var(--red);background:#ff5d5d15}
.wp-track{height:3px;background:#4aa3ff44;margin:0 -12px;border-radius:0 0 12px 12px;overflow:hidden}
.wp-track i{display:block;height:100%;background:var(--orange);transition:width .35s ease-out}
.gm-play .board{grid-area:field;padding:10px;min-width:0;border-radius:12px;background:#0b1425}
.gm-main{grid-area:calls;min-width:0}
.gm-grid,.gm-grid.over{grid-area:feedback;display:block;margin:0}
.gm-grid .gm-side,.gm-grid.over .gm-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.gm-grid .log{margin:0}
.endp{grid-area:result;margin:0;scroll-margin-top:185px}
@media(min-width:961px){.gm-play.is-over{grid-template-areas:"bar bar" "score score" "field result" "feedback feedback"}.gm-play.is-over .gm-main{display:none}.gm-play.is-over .endp{grid-template-columns:1fr;gap:16px;align-self:stretch}.gm-play.is-over .end-r .menu-actions{gap:7px}.gm-play.is-over .end-r .btn{font-size:12px;padding:10px 12px}}
.playbook{padding:0;margin:0;border:0;min-width:0}
.playbook:disabled{cursor:progress}.playbook:disabled .card{opacity:.55;cursor:wait}
.gm-main .panel{padding:12px}.gm-main .panel-h{gap:8px;margin-bottom:10px}
.gm-main .panel-h h3{font-size:17px}.gm-main .panel-h .hint{font-size:12px;line-height:1.4}
.gm-main .tabs2{width:100%;margin:0;flex-wrap:nowrap;gap:3px}
.gm-main .tabs2 button{flex:1;padding:8px 6px;white-space:nowrap}
.gm-main .cards,.gm-main .cards.def{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.gm-main .card{grid-template-columns:30px 1fr;padding:8px;gap:3px 8px;border-radius:8px;min-height:64px}
.gm-main .rt{width:30px;height:30px}.gm-main .cn{font-size:13px;padding-right:7px}
.gm-main .card:not(.sp) .cd{display:none}.gm-main .card.def .cd{display:block;font-size:11px}
.gm-main .cr{margin-top:3px;padding-top:4px;gap:6px;font-size:10px}.gm-main .cr .ys{font-size:12px}.gm-main .cr .rk{margin-left:auto}
.gm-main .seldesc{display:block;min-height:36px;margin-top:9px;font-size:12px;line-height:1.4}
.gm-main .opts{gap:6px;margin-top:10px}.gm-main .opt{gap:6px}.gm-main .opt label{font-size:10px}
.gm-main .seg button{padding:7px 9px;font-size:12px;min-height:32px}
.gm-main .ctl{position:static;margin:10px 0 0;padding:10px 0 0;gap:9px;border-radius:0;background:none;backdrop-filter:none}
.gm-main .ctl-l{min-width:0;gap:8px;width:100%;flex-wrap:wrap}
.gm-main .ctl-l .hint{width:100%;font-size:11px;line-height:1.4}
.gm-main .snap{width:100%;min-width:0;padding:12px;font-size:15px}
.gm-main .to{padding:7px 9px;min-height:32px;font-size:12px}
.gm-main .keys{font-size:10px;margin-bottom:0;line-height:1.5}
.playback{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:2px 0 12px;margin-bottom:10px}
.playback-state{display:flex;align-items:center;gap:7px;min-width:0;font-size:11px}
.playback-state>i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 9px #37d27a55;flex:none}
.playback-state b{font:800 12px var(--head);letter-spacing:.06em;white-space:nowrap}.playback-state span{color:var(--mute);font-size:11px;max-width:170px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.playback-buttons{display:flex;gap:4px;margin-left:auto}.playback-buttons .ctrlbtn{min-height:32px;min-width:38px}
.ctrlbtn[aria-pressed=true]{color:var(--orange2);border-color:var(--orange)}
.motion-track{position:absolute;bottom:0;left:0;right:0;height:2px;background:#ffffff12}
.motion-track i{display:block;background:var(--orange2);width:0;height:100%}
.fieldwrap{border:1px solid #ffffff18;background:#1c6f3d}
#field{touch-action:pan-y pinch-zoom}
.pl{cursor:pointer;outline:none}.pl .hit{fill:transparent!important;stroke:none;pointer-events:all}
.pl:hover>circle:not(.hit),.pl:focus-visible>circle:not(.hit){stroke:#fff;stroke-width:3.5}
.pl .pt{display:none}.pl:hover .pt,.pl:focus-visible .pt{display:block}
.in-motion .pl .pt{display:none}#ball,#routes{pointer-events:none}
#routes path{fill:none;stroke:#ffe99d;stroke-width:2.5;stroke-dasharray:6 5;opacity:.8}#routes .route-arrow{stroke-dasharray:none}
.field-legend{display:flex;align-items:center;gap:14px;margin:10px 0;font-size:11px;color:var(--mute)}
.field-legend span{display:flex;gap:5px;align-items:center}.field-legend i{width:7px;height:7px;border-radius:50%}.you-dot{background:var(--orange)}.opp-dot{background:var(--blue)}
.field-legend small{margin-left:auto;font-size:10px}
.player-info{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:58px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:#ffffff04;color:var(--mute);font-size:12px}
.player-info b{display:block;color:var(--text);font-size:14px}.player-info span{display:block;font-size:11px}.player-info small{font-size:10px;max-width:140px;text-align:right}
.coach-hint{color:var(--orange2);font-size:12px;line-height:1.5;margin:12px 0 0;padding-left:10px;border-left:2px solid var(--orange)}
.last-play{color:var(--mute);font-size:12px;line-height:1.5;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.banner,.anno{max-width:95%;text-align:center;white-space:normal;font-size:clamp(16px,2.1vw,27px);line-height:1.15}
.banner{top:12%;padding:7px 12px}.anno{font-size:clamp(22px,3vw,38px)}
.sndbtn{width:36px;height:36px}
button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
button:disabled{cursor:not-allowed}.ctrlbtn[hidden]{display:none}
@media (max-width:960px){
  .gm-play{grid-template-columns:minmax(0,1fr);grid-template-areas:"bar" "score" "field" "calls" "result" "feedback"}
  .gm-play .board{position:static}
  .gm-main .cards,.gm-main .cards.def{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gm-main .ctl{position:sticky;bottom:0;background:#0b1327;z-index:10;padding:10px;border-radius:10px;box-shadow:0 -5px 14px #0005}
  .gm-main .ctl-l{flex:1}.gm-main .snap{width:auto;min-width:210px}
  #field{max-height:330px}
}
@media (max-width:640px){
  .game{scroll-margin-top:6px}.gm-play{gap:8px}
  #sbwrap{top:0;padding:8px 8px 0;border-radius:9px}.wp-track{margin:0 -8px}
  .sb-team{padding:6px;gap:5px}.sb-score{font-size:30px}.sb-time{font-size:27px}
  .sit{gap:6px;font-size:11px}.sit>b{font-size:15px;padding:2px 6px}.sit .wp{font-size:10px;gap:4px}.sit .wp b{font-size:13px}.wp-delta{font-size:10px;padding:2px 4px}
  .gm-play .board{padding:7px}.playback-state span{display:none}
  .field-legend{gap:10px;margin:7px 0}.field-legend small{font-size:9px}
  .player-info{min-height:46px;padding:6px 9px;font-size:11px}.coach-hint{font-size:11px;margin-top:8px}.last-play{margin-top:8px;padding-top:8px;font-size:11px}
  .gm-main .panel{padding:10px}.gm-main .cards,.gm-main .cards.def{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gm-main .card{min-height:62px}.gm-main .cn{font-size:13px}.gm-main .cr .rk{display:none}
  .gm-main .tabs2 button{min-height:38px;padding:8px 5px;font-size:12px}.gm-main .seg button,.gm-main .to{min-height:38px}
  .gm-main .ctl{margin:10px -10px -10px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-radius:0 0 12px 12px}
  .gm-main .ctl-l{min-width:100%;overflow:visible;gap:6px;flex-wrap:wrap}.gm-main .ctl-l .hint{display:block;font-size:10px}
  .gm-main .snap{width:100%;min-height:46px}.gm-main .opt label{display:none}
  .gm-grid .gm-side,.gm-grid.over .gm-side{grid-template-columns:1fr;gap:8px}
  .endp{scroll-margin-top:130px}.toastbox{bottom:150px;max-width:90%;white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .game *,#form,#ball{animation:none!important;transition:none!important}
  .anno.show{opacity:1;transform:translate(-50%,-50%)}
}