/* Base reset (from the original artifact wrapper) */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: a sunny cartoon sports game. A sky-and-pitch backdrop, wooden panels with metal bolts and ribbon banners,
   chunky glossy buttons and a big outlined title. One bright look by choice, so no dark theme. */
:root{
  --sky:#3fb0f5; --sky-2:#bfe8ff; --grass:#5cc23a; --grass-2:#3b9a24;
  --ink:#3d2410; --ink-2:#7a5634; --parch:#fff4d9; --parch-2:#f5dcaa;
  --wood:#b4702f; --wood-2:#8a5222; --wood-d:#4e2b0c; --metal:#c3ccd3; --metal-d:#5d6872;
  --yellow:#ffd23f; --orange:#ff9a1f; --good:#2f9e2f; --away:#e53935;
  --title:"Luckiest Guy","Lilita One","Arial Black",Impact,sans-serif;
  --ui:"Lilita One","Arial Rounded MT Bold","Arial Black",sans-serif;
  --body:"Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:var(--ui);
  --yellow-card:#ffd60a; --red-card:#e5202e; --bronze:#cd7f32; --silver:#c9d2d8; --holo:#7fe3ff;
  color-scheme:light;
}
html,body{min-height:100%}
body{font-family:var(--body);font-size:18px;line-height:1.5;margin:0;color:var(--ink);
  background:
    radial-gradient(circle at 88% 6%,rgba(255,250,200,.95) 0 40px,rgba(255,240,170,.45) 70px,transparent 140px),
    radial-gradient(ellipse 120px 34px at 14% 12%,#fff 60%,transparent 62%),
    radial-gradient(ellipse 90px 28px at 22% 9%,#fff 60%,transparent 62%),
    radial-gradient(ellipse 110px 30px at 70% 20%,rgba(255,255,255,.9) 60%,transparent 62%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 60px,transparent 60px 120px),
    linear-gradient(180deg,var(--sky) 0,var(--sky-2) 34%,#e4f6ff 40%,var(--grass) 40.2%,var(--grass-2) 100%);
  background-attachment:fixed;background-color:var(--grass-2)}
.wrap{max-width:640px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px 40px;display:flex;flex-direction:column;gap:18px}
h1,h2,h3{font-family:var(--ui);font-weight:400;margin:0;text-wrap:balance;letter-spacing:.01em}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:4px solid #fff;outline-offset:3px;box-shadow:0 0 0 7px var(--orange)}
.label{font-family:var(--ui);font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.note{color:var(--ink-2);font-size:15px;margin:0;max-width:65ch}

/* ---------- Title ---------- */
.brand{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand h1{font-family:var(--title);font-size:clamp(42px,12vw,74px);line-height:1;letter-spacing:.02em;
  color:var(--yellow);background:linear-gradient(180deg,#fff27a 10%,#ffd23f 45%,#ff9a1f 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:4px #3a1d05;paint-order:stroke fill;filter:drop-shadow(0 5px 0 #3a1d05) drop-shadow(0 8px 10px rgba(0,0,0,.25));padding:6px 4px 2px}
.brand p{margin:2px 0 0;font-family:var(--ui);font-size:19px;color:#fff;text-shadow:0 2px 0 rgba(0,60,120,.55),0 0 6px rgba(0,60,120,.4)}
.brand.home{flex-direction:column;justify-content:center;text-align:center;gap:0}
.brand.sub h1{font-size:clamp(36px,10vw,56px)}
.brand.sub{justify-content:center;text-align:center}
.brand.sub>div{display:flex;flex-direction:column;align-items:center}

/* ---------- Glossy buttons ---------- */
.kickoff,.btn,.ghost,.next,.claim,.shoot{--c1:#86e23a;--c2:#3c9d10;--edge:#1f5207;position:relative;isolation:isolate;
  font-family:var(--ui);font-size:20px;line-height:1.15;color:#fff;letter-spacing:.02em;border:3px solid var(--edge);border-radius:18px;padding:12px 18px;
  background:linear-gradient(180deg,var(--c1),var(--c2));
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.5),0 5px 0 var(--edge),0 9px 14px rgba(40,20,0,.25);
  text-shadow:-1.5px -1.5px 0 var(--edge),1.5px -1.5px 0 var(--edge),-1.5px 1.5px 0 var(--edge),1.5px 1.5px 0 var(--edge),0 3px 0 var(--edge);
  transition:transform .08s,box-shadow .08s}
.kickoff::after,.btn::after,.ghost::after,.next::after,.claim::after,.shoot::after{content:"";position:absolute;z-index:-1;left:8%;right:8%;top:3px;height:42%;border-radius:14px 14px 30px 30px;background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.08));pointer-events:none}
.kickoff:active,.btn:active,.ghost:active,.next:active,.claim:active,.shoot:active{transform:translateY(4px);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.5),0 1px 0 var(--edge),0 3px 6px rgba(40,20,0,.25)}
.kickoff:disabled,.btn:disabled,.ghost:disabled,.next:disabled{--c1:#cfd3d6;--c2:#9aa1a7;--edge:#5d6872;cursor:default}
.kickoff{font-size:30px;padding:14px 18px}
.kickoff .goalname{display:block;font-family:var(--ui);font-size:15px;opacity:.95;margin-top:2px;letter-spacing:.01em}
.btn.blue,.ghost{--c1:#56b8ff;--c2:#1468cf;--edge:#0b3a78}
.btn.red{--c1:#ff7a6a;--c2:#d62b20;--edge:#7a110a}
.btn.purple{--c1:#c98bff;--c2:#7d2fd0;--edge:#43106f}
.btn.orange,.shoot{--c1:#ffc04a;--c2:#f07c0a;--edge:#7a3a00}
.btn.green{--c1:#86e23a;--c2:#3c9d10;--edge:#1f5207}
.btn.small,.claim{font-size:16px;padding:6px 14px;border-radius:14px}
.ghost{font-size:17px;padding:10px 16px}
.next{font-size:22px}
.shoot{font-size:28px;padding:12px}
.linkbtn{font-family:var(--ui);color:#fff;font-size:17px;align-self:center;padding:6px 10px;text-decoration:underline;text-shadow:0 2px 0 rgba(0,60,20,.6)}
.danger{--c1:#ff7a6a;--c2:#d62b20;--edge:#7a110a}
.pill{display:inline-block;min-width:1.4em;border-radius:12px;background:#fff;color:#7a3a00;font-size:15px;padding:0 7px;margin-left:4px;text-shadow:none;border:2px solid #7a3a00}
.menu{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1 1 160px}
.bottom{justify-content:space-between}.bottom>*{flex:0 1 auto}
.wrow{align-items:center}.wrow>*{flex:0 1 auto}

/* ---------- Wooden panels with metal bolts and a ribbon banner ---------- */
.panel,.qcard{position:relative;color:var(--ink);border-radius:22px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px;border:5px solid var(--wood-d);
  background:
    radial-gradient(circle at 14px 14px,#fff 1.5px,var(--metal) 2.5px,var(--metal-d) 5px,transparent 6px) top left/30px 30px no-repeat,
    radial-gradient(circle at calc(100% - 14px) 14px,#fff 1.5px,var(--metal) 2.5px,var(--metal-d) 5px,transparent 6px) top right/30px 30px no-repeat,
    radial-gradient(circle at 14px calc(100% - 14px),#fff 1.5px,var(--metal) 2.5px,var(--metal-d) 5px,transparent 6px) bottom left/30px 30px no-repeat,
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px),#fff 1.5px,var(--metal) 2.5px,var(--metal-d) 5px,transparent 6px) bottom right/30px 30px no-repeat,
    linear-gradient(180deg,var(--parch),var(--parch-2));
  box-shadow:inset 0 0 0 5px var(--wood),inset 0 0 0 8px var(--wood-2),inset 0 0 0 10px #e9c98e,0 6px 0 #3a1f06,0 12px 18px rgba(30,15,0,.28);
  padding:22px 22px 20px}
.panel>.label:first-child{align-self:center;margin:-40px 0 2px;position:relative;z-index:1;padding:7px 26px 6px;border-radius:12px;font-size:19px;letter-spacing:.04em;color:#fff;
  background:linear-gradient(180deg,#c98447,#8a5222);border:3px solid var(--wood-d);
  box-shadow:0 0 0 3px var(--metal),0 0 0 5px var(--metal-d),0 4px 0 5px #2c1704;text-shadow:0 2px 0 var(--wood-d),-1px -1px 0 var(--wood-d),1px 1px 0 var(--wood-d)}
.panel:has(>.label:first-child){margin-top:18px}
.namebox{display:flex;flex-direction:column;gap:4px;min-width:0}
input,textarea{font:inherit;color:var(--ink);background:#fffaf0;border:3px solid var(--wood-2);border-radius:12px;padding:8px 12px;box-shadow:inset 0 2px 0 rgba(0,0,0,.08)}
.namebox input{font-weight:700;width:11ch}
textarea{font-size:16px;width:100%;box-sizing:border-box;resize:vertical}

/* Cream tiles used for choices, chips, levels and pass tiers */
.pick,.chip,.lv,.stg,.tier,.sw,.opt{background:linear-gradient(180deg,#fffaf0,#f7e6c2);border:3px solid var(--wood-2);border-radius:16px;color:var(--ink);box-shadow:0 4px 0 var(--wood-d)}
.pick[aria-pressed="true"],.chip[aria-pressed="true"],.lv[aria-pressed="true"],.stg[aria-pressed="true"]{border-color:#e08a00;background:linear-gradient(180deg,#fff7c9,#ffd96a);box-shadow:0 0 0 3px #fff,0 0 0 6px var(--orange),0 4px 0 6px #7a3a00}
.pick:disabled,.chip:disabled,.lv:disabled{opacity:.5;cursor:default;filter:grayscale(.4)}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pick{padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-family:var(--ui);font-size:18px;line-height:1.15}
.pick svg{width:54px;height:54px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.2))}
.pick small{font-family:var(--body);font-weight:500;color:var(--ink-2);font-size:12px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:flex;align-items:center;gap:8px;padding:8px 12px;font-family:var(--ui);font-size:16px;text-align:left;line-height:1.15}
.chip small{display:block;font-family:var(--body);font-weight:500;font-size:12px;color:var(--ink-2)}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.sw{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#1b1400;box-shadow:0 3px 0 var(--wood-d)}
.sw[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--orange)}
.sw:disabled{opacity:.5;cursor:default}
.fields{display:flex;flex-wrap:wrap;gap:12px}
.fields input{max-width:100%}.fields .num{width:4ch}.fields .wide input{width:16ch}

/* ---------- Home ---------- */
.hero{display:flex;justify-content:center;margin:-6px 0 -10px}
.heroart{width:min(100%,520px);aspect-ratio:560/340;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,40,0,.25))}
.playercard{flex-wrap:wrap}
.pc-main{display:flex;align-items:center;gap:12px}
.pc-text{display:flex;flex-direction:column;flex:1 1 140px;min-width:0}
.pc-text b{font-family:var(--ui);font-weight:400;font-size:24px;line-height:1.1}.pc-text b span{color:#e07a00}
.pc-text>span{color:var(--ink-2);font-size:15px}
.mini{width:72px;height:96px;object-fit:contain;flex:none;background:radial-gradient(ellipse at 50% 90%,#d6f0b8,#bfe6ff 70%);border:3px solid var(--wood-2);border-radius:14px}
.preview .mini,.ftplayer .mini{width:96px;height:128px}
.ftplayer{display:flex;justify-content:center}
.rankline{display:flex;align-items:center;gap:6px;font-family:var(--ui);font-size:16px;color:var(--ink)}
.pc-btns{display:flex;flex-wrap:wrap;gap:8px}
.pc-xp{flex:1 1 100%;display:flex;flex-direction:column;gap:4px}
.pc-xp span{font-size:13px;color:var(--ink-2)}
.xpbar{height:16px;border-radius:9px;background:#e7cf9f;border:2px solid var(--wood-2);overflow:hidden;box-shadow:inset 0 2px 0 rgba(0,0,0,.12)}
.xpbar i{display:block;height:100%;background:linear-gradient(180deg,#a8ee55,#3c9d10);border-radius:6px}
.playercard.frame-bronze{border-color:var(--bronze)}
.playercard.frame-silver{border-color:#8f9aa3}
.playercard.frame-gold{border-color:#d49a00;box-shadow:inset 0 0 0 5px #f2c230,inset 0 0 0 8px #b07d00,inset 0 0 0 10px #ffe9a0,0 6px 0 #6b4a00,0 12px 18px rgba(30,15,0,.28)}
.playercard.frame-holo{border-color:#5a7dff;box-shadow:inset 0 0 0 5px #7fe3ff,inset 0 0 0 8px #c58cff,inset 0 0 0 10px #e8f7ff,0 6px 0 #33307a,0 12px 18px rgba(30,15,0,.28)}
.playercard.frame-champ{border-color:#d49a00;box-shadow:inset 0 0 0 5px #ffd23f,inset 0 0 0 8px #ff9a1f,inset 0 0 0 10px #fff4b0,0 6px 0 #6b4a00,0 0 26px rgba(255,201,60,.7)}
.cabinet{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center}
.cabinet b{display:block;font-family:var(--ui);font-weight:400;font-size:28px;line-height:1.1;color:#e07a00;text-shadow:0 2px 0 #fff3c4;font-variant-numeric:tabular-nums}
.cabinet span{font-size:13px;color:var(--ink-2)}

/* Levels */
.lvhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.zone-tag{font-family:var(--ui);font-size:15px;color:#c05a00}
.stages{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.stg{padding:6px 0;font-family:var(--ui);font-size:18px;display:flex;align-items:center;justify-content:center;gap:4px}
.stagename{margin:0;font-family:var(--ui);font-size:18px}.stagename span{color:var(--ink-2);font-family:var(--body);font-size:14px;margin-left:6px}
.lvgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.lv{padding:8px 2px;display:flex;flex-direction:column;align-items:center;gap:2px}
.lv b{font-family:var(--ui);font-weight:400;font-size:24px;line-height:1}
.lv.t2{background:linear-gradient(180deg,#eaf6ff,#bfe2fb)}.lv.t3{background:linear-gradient(180deg,#f6ecff,#dcc2f6)}
.lv.fin{border-color:#d49a00}
.lvstars{color:#f0a000;font-size:13px;letter-spacing:1px;line-height:1;margin:0;-webkit-text-stroke:.5px #7a3a00}
.lvstars.big{font-size:34px;letter-spacing:4px}

/* ---------- Character select ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ccard{display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:16px;padding:6px 4px 10px;background:radial-gradient(ellipse at 50% 85%,rgba(255,210,63,.35),transparent 65%)}
.ccard b{font-family:var(--ui);font-weight:400;font-size:20px}
.ccard.on{background:radial-gradient(ellipse at 50% 70%,rgba(255,154,31,.5),transparent 70%);box-shadow:0 0 0 3px var(--orange) inset}
.cport{width:100%;max-width:150px;aspect-ratio:240/320;object-fit:contain}
@media (max-width:520px){.cards{grid-template-columns:repeat(2,1fr)}}

/* ---------- Scoreboard: blue | clock | red ---------- */
.board{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:0;border-radius:18px;border:4px solid #13213a;box-shadow:0 5px 0 #0b1426,0 9px 14px rgba(0,0,0,.25);overflow:hidden;background:#13213a}
.team{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:6px 8px;background:linear-gradient(180deg,#4fb0ff,#1565c0);color:#fff}
.team.away{background:linear-gradient(180deg,#ff6b5e,#c62828)}
.team .nm{font-family:var(--ui);font-size:14px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.digits{font-family:var(--title);font-size:44px;line-height:1;font-variant-numeric:tabular-nums;color:#fff;-webkit-text-stroke:2px #0b1426;paint-order:stroke fill;text-shadow:0 3px 0 #0b1426}
.mid{text-align:center;font-size:12px;color:#c8d6ee;line-height:1.3;padding:6px 10px;background:linear-gradient(180deg,#26385c,#13213a);border-inline:3px solid #0b1426}
.mid b{display:block;font-family:var(--ui);font-weight:400;font-size:19px;color:#fff}
.pips{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-top:3px}
.pip{width:12px;height:12px;border-radius:50%;background:#3a4d70;border:2px solid #0b1426}
.pip.hit{background:#7fe03a}.pip.miss{background:#ff6b5e}.pip.now{box-shadow:0 0 0 2px var(--yellow)}
.fouls{display:flex;gap:3px;align-items:center;min-height:18px;margin-top:2px}
.mcard{display:inline-block;width:11px;height:15px;border-radius:2px;border:1px solid rgba(0,0,0,.4)}
.mcard.yellow{background:var(--yellow-card)}.mcard.red{background:var(--red-card)}
.fchip{font-family:var(--ui);font-size:11px;text-transform:uppercase;letter-spacing:.04em;background:var(--yellow-card);color:#1b1400;border-radius:6px;padding:1px 6px}

/* ---------- Field ---------- */
.field{position:relative;border-radius:20px;overflow:hidden;border:5px solid var(--wood-d);box-shadow:inset 0 0 0 4px var(--wood),0 6px 0 #3a1f06,0 12px 18px rgba(30,15,0,.28);background:#2f9be8}
.field svg,.field canvas{display:block;width:100%}
.streak{position:absolute;left:12px;top:10px;font-family:var(--ui);font-size:15px;color:#fff;background:linear-gradient(180deg,#ffb23f,#f06a0a);border:2px solid #7a3a00;border-radius:20px;padding:2px 12px;text-shadow:0 1px 0 #7a3a00}
/* "GOAL!" in a starburst */
.shout{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;
  font-family:var(--title);font-size:clamp(44px,14vw,84px);letter-spacing:.02em;color:var(--yellow);-webkit-text-stroke:4px #3a1d05;paint-order:stroke fill;text-shadow:0 5px 0 #3a1d05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cpolygon points='0,-98 14,-40 58,-80 36,-22 96,-30 44,4 92,40 34,34 50,92 8,48 -18,96 -22,40 -74,74 -40,16 -98,6 -42,-18 -84,-60 -24,-38 -30,-94' fill='%23ffffff' stroke='%23ff9a1f' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E") center/min(78%,330px) no-repeat}
.shout.miss{background:none;color:#fff;font-size:clamp(30px,9vw,52px);-webkit-text-stroke:3px #13213a;text-shadow:0 4px 0 #13213a}

/* ---------- Question card ---------- */
.qtop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.skill{font-family:var(--ui);font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:#c05a00}
.speak{display:flex;align-items:center;gap:6px;font-family:var(--ui);font-size:15px;color:#fff;border-radius:20px;padding:6px 14px;background:linear-gradient(180deg,#56b8ff,#1468cf);border:2px solid #0b3a78;box-shadow:0 3px 0 #0b3a78;text-shadow:0 1px 0 #0b3a78}
.speak svg{width:18px;height:18px}
.move{margin:0;font-size:15px;background:#fffdf5;border:2px dashed var(--wood);border-radius:12px;padding:8px 12px;color:var(--ink)}
.move b{display:block;font-family:var(--ui);font-weight:400;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#c05a00}
.passage{background:#fffdf5;border-left:6px solid var(--wood);border-radius:10px;padding:10px 14px;font-size:18px;line-height:1.6;max-width:65ch}
.prompt{font-size:22px;font-weight:700;line-height:1.35;margin:0;text-wrap:balance}
.prompt em{font-style:normal;background:#ffe27a;padding:0 6px;border-radius:6px;box-shadow:0 2px 0 #e0a800}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{padding:14px 10px;font-size:20px;font-weight:600;min-height:60px;line-height:1.25;transition:transform .08s}
.opt:active{transform:translateY(3px);box-shadow:0 1px 0 var(--wood-d)}
.opt.long{grid-column:1/-1;text-align:left}
.opt.right{background:linear-gradient(180deg,#c9f7a3,#7fdc4a);border-color:#2e7d0a;box-shadow:0 4px 0 #1f5207}
.opt.wrong{background:linear-gradient(180deg,#ffd0c8,#ff8a7a);border-color:#a51f17;box-shadow:0 4px 0 #7a110a}
.opt:disabled{cursor:default}
.tiles,.slots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tile,.slot{width:46px;height:52px;border-radius:12px;font-family:var(--ui);font-size:26px;display:flex;align-items:center;justify-content:center;text-transform:uppercase}
.tile{color:#5a2c00;background:linear-gradient(180deg,#ffe27a,#ffb21f);border:3px solid #7a3a00;box-shadow:0 4px 0 #7a3a00}
.tile:disabled{opacity:.3;box-shadow:none}
.slot{background:#fffdf5;border:3px dashed var(--wood);color:var(--ink)}
.slot.full{border-style:solid;border-color:var(--wood-d)}
.feedback{border-radius:14px;padding:12px 14px;font-size:17px;display:flex;flex-direction:column;gap:10px;border:3px solid}
.feedback.good{background:#e6f9d6;border-color:#4caf20}.feedback.bad{background:#fff1dc;border-color:#f09a3e}
.feedback p{margin:0}
.foulnote{border-top:2px dashed rgba(122,86,52,.35);padding-top:8px}
.shotui{display:flex;flex-direction:column;gap:8px;background:linear-gradient(180deg,var(--parch),var(--parch-2));color:var(--ink);border-radius:18px;padding:12px 14px;border:4px solid var(--wood-d);box-shadow:inset 0 0 0 4px var(--wood),0 5px 0 #3a1f06}
.shotlabel{font-family:var(--ui);font-size:17px;margin:0}
.track{position:relative;height:30px;background:#e7cf9f;border:3px solid var(--wood-2);border-radius:16px;overflow:hidden}
.zone{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,#a8ee55,#3c9d10)}
.mark{position:absolute;top:0;bottom:0;width:8px;background:#13213a;border-radius:3px;transform:translateX(-50%)}

/* ---------- Full time, goal card, pass, rewards ---------- */
.ft{text-align:center;gap:14px}
.ft h2,.rankup h2{font-family:var(--title);font-size:clamp(38px,10vw,58px);color:var(--yellow);-webkit-text-stroke:3px #3a1d05;paint-order:stroke fill;text-shadow:0 4px 0 #3a1d05}
.ft .result{font-size:20px;font-weight:700}
.stars{display:flex;justify-content:center;gap:4px;flex-wrap:wrap}
.stars svg{width:32px;height:32px;filter:drop-shadow(0 2px 0 #7a3a00)}
.unlock{margin:0;border-radius:14px;padding:10px;font-family:var(--ui);font-size:17px;color:#fff;background:linear-gradient(180deg,#86e23a,#3c9d10);border:3px solid #1f5207;text-shadow:0 2px 0 #1f5207}
.unlock b{font-weight:400}
.unlock.trophy{display:flex;flex-direction:column;align-items:center;gap:6px;background:linear-gradient(180deg,#fff27a,#ffb21f);border-color:#7a3a00;color:#5a2c00;text-shadow:none}
.unlock.sentoff{background:linear-gradient(180deg,#ff7a6a,#c62828);border-color:#7a110a;text-shadow:0 2px 0 #7a110a}
.goalcard{background:#fffdf5;color:var(--ink);border-radius:16px;padding:14px 16px;text-align:left;display:flex;flex-direction:column;gap:6px;border:4px solid #e0a800;box-shadow:0 4px 0 #7a3a00}
.goalcard p{margin:0}
.goalcard .label{color:#c05a00}
.goalcard .gtitle{font-family:var(--ui);font-weight:400;font-size:26px;line-height:1.15}
.goalcard ol{margin:4px 0 0;padding-left:22px;font-size:15px;display:flex;flex-direction:column;gap:2px}
.goalcard li{color:#9a8268}.goalcard li.done{color:var(--ink);font-weight:500}
.xpgain{background:#fffdf5;border:3px solid var(--wood-2);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;text-align:left}
.xprow{display:flex;justify-content:space-between;font-size:16px}
.xprow b{color:var(--good);font-variant-numeric:tabular-nums}
.xprow.total{border-top:2px dashed rgba(122,86,52,.35);padding-top:6px;font-weight:700}
.xprow.total b{color:#e07a00}
.xpgain .unlock{margin:4px 0 0}
.rankup{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;border-radius:16px;background:radial-gradient(circle at 50% 30%,rgba(255,210,63,.55),transparent 70%),#fff7dc;border:3px solid #e0a800;overflow:hidden}
.rankup p{margin:0}
.rankup #confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.voucher{margin-top:8px;background:#fff;border:3px dashed var(--orange);border-radius:14px;padding:10px 16px;text-align:center;max-width:32ch}
.vreward{font-size:20px;font-weight:700}
.badge{flex:none;display:block;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.rankcard{flex-direction:row;align-items:center;flex-wrap:wrap}
.rankname{font-family:var(--ui);font-weight:400;font-size:30px;line-height:1.1;-webkit-text-stroke:1px rgba(0,0,0,.35)}
.rankmeter{flex:1 1 100%;display:flex;flex-direction:column;gap:4px}
.tiers{display:flex;gap:12px;overflow-x:auto;padding:6px 4px 12px;scroll-snap-type:x proximity}
.tier{flex:0 0 136px;scroll-snap-align:start;padding:10px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-height:156px}
.tier b{font-size:15px;line-height:1.25}
.tier.ready{border-color:#e08a00;background:linear-gradient(180deg,#fff7c9,#ffd96a)}
.tier.got{opacity:.6}
.tnum{font-family:var(--title);font-size:24px;color:var(--orange);-webkit-text-stroke:1.5px #7a3a00;paint-order:stroke fill;line-height:1}
.ttype{font-family:var(--ui);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.tstate{margin-top:auto;font-size:13px;color:var(--ink-2)}
.claim{margin-top:auto}
.dot{display:inline-block;width:20px;height:20px;border-radius:50%;border:2px solid var(--wood-d);flex:none}
.pat{width:26px;height:27px;border-radius:5px;border:2px solid var(--wood-d);flex:none}
.rankrow{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-top:2px dashed rgba(122,86,52,.3);opacity:.75}
.rankrow:first-of-type{border-top:0}
.rankrow.got{opacity:1}
.rankrow .pc-text>span{font-size:15px;color:var(--ink-2)}
.rankrow .pc-text>span b{font-size:inherit;color:var(--ink)}
.alert{border-color:#c05a00;box-shadow:inset 0 0 0 5px var(--orange),inset 0 0 0 8px #c05a00,inset 0 0 0 10px #ffe0a8,0 6px 0 #7a3a00,0 0 0 4px rgba(255,255,255,.6),0 12px 18px rgba(30,15,0,.28)}
.alert-top{display:flex;gap:12px;align-items:flex-start}
.alert-msg{margin:2px 0 0;font-size:16px}
.gate{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.gate input,.wrow input[type=password]{width:7ch;letter-spacing:.3em}
.rwlist{display:flex;flex-direction:column;gap:10px}
.rw{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center}
.rw input{grid-column:1/-1;width:100%;box-sizing:border-box}
.vrow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px}
.skillrow{display:grid;grid-template-columns:9.5em 1fr 4.5em;align-items:center;gap:10px;font-size:15px}
.bar{height:14px;border-radius:8px;background:#e7cf9f;border:2px solid var(--wood-2);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(180deg,#a8ee55,#3c9d10)}
.skillrow .pct{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}

/* ---------- Fouls and the game clock ---------- */
.foul{position:absolute;left:0;right:0;top:10px;margin:0 auto;width:max-content;max-width:calc(100% - 24px);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:linear-gradient(180deg,var(--parch),var(--parch-2));border:4px solid var(--wood-d);box-shadow:inset 0 0 0 3px var(--wood),0 5px 0 #3a1f06;border-radius:16px;padding:10px 18px;pointer-events:none;text-align:center;min-width:150px}
.foul b{font-family:var(--title);font-weight:400;font-size:clamp(24px,7vw,34px);line-height:1.1;color:var(--yellow);-webkit-text-stroke:2.5px #3a1d05;paint-order:stroke fill}
.foul span{font-family:var(--ui);font-size:13px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.bigcard{display:block;width:34px;height:48px;border-radius:5px;border:2px solid rgba(0,0,0,.35);box-shadow:0 3px 0 rgba(0,0,0,.35);transform:rotate(-6deg)}
.bigcard.yellow{background:var(--yellow-card)}.bigcard.red{background:var(--red-card)}
.ftcard{width:46px;height:64px;align-self:center}
.whistle svg{width:54px;height:36px;display:block}
.gclock{position:absolute;right:max(10px,env(safe-area-inset-right,0px));top:10px;background:linear-gradient(180deg,#26385c,#13213a);border:3px solid #0b1426;box-shadow:0 0 0 2px var(--metal),0 4px 0 2px #0b1426;border-radius:12px;padding:4px 10px;display:flex;flex-direction:column;align-items:center;pointer-events:none;min-width:64px}
.gclock span{font-family:var(--ui);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#c8d6ee}
.gclock b{font-family:var(--title);font-weight:400;font-size:28px;line-height:1.1;color:#ff6b5e;font-variant-numeric:tabular-nums}
.gclock b.long{font-family:var(--ui);font-size:14px;line-height:1.9;color:var(--yellow)}
.gclock.buzzer{animation:buzz .25s 4 alternate}
.gclock.buzzer span{color:#ff6b5e}
@keyframes buzz{from{background:#13213a}to{background:#7a110a}}

@media (max-width:420px){.opts{grid-template-columns:1fr}.skillrow{grid-template-columns:7.5em 1fr 4em}.tile,.slot{width:40px;height:48px;font-size:22px}.cabinet b{font-size:24px}.kickoff{font-size:26px}.digits{font-size:36px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.gclock.buzzer{animation:none;background:#7a110a}.rankup #confetti{display:none}}
.row>.kickoff,.row>.btn,.row>.ghost{font-size:21px;padding:12px 14px}
.brand{justify-content:center;text-align:center}
.brand>div{display:flex;flex-direction:column;align-items:center}
.brand p{text-shadow:-1.5px -1.5px 0 #0b3a78,1.5px -1.5px 0 #0b3a78,-1.5px 1.5px 0 #0b3a78,1.5px 1.5px 0 #0b3a78,0 3px 0 #0b3a78}
.panel>.label:first-child{text-align:center;max-width:85%}
.wrap>.note,.wrap>p.note{color:#fff;font-weight:600;text-shadow:0 1px 0 #1f5207,0 0 4px #1f5207}
.brand h1{-webkit-text-stroke:2.5px #3a1d05;letter-spacing:.04em}
.digits{font-family:var(--ui);font-size:42px;-webkit-text-stroke:0;text-shadow:0 3px 0 #0b1426,0 0 2px #0b1426}

/* ---------- Open Roam ---------- */
.kickoff.roambtn{--c1:#5fe6d6;--c2:#0f9a8c;--edge:#05514a}
.roam{display:flex;flex-direction:column;gap:14px}
.roam-main,.roam-side{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (min-width:900px){.wrap.widewrap{max-width:1120px}.roam{display:grid;grid-template-columns:1.6fr 1fr;align-items:start}}
.rclock{display:block;font-family:var(--title);font-size:24px;line-height:1.1;color:var(--yellow);font-variant-numeric:tabular-nums}
.ctrl{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;border-radius:22px;border:4px solid var(--wood-d);
  background:linear-gradient(180deg,var(--parch),var(--parch-2));box-shadow:inset 0 0 0 3px var(--wood),0 5px 0 #3a1f06;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.stick{position:relative;width:128px;height:128px;border-radius:50%;flex:none;touch-action:none;cursor:grab;
  background:radial-gradient(circle,#fffaf0 0 28%,#efd9a8 29% 100%);border:4px solid var(--wood-2);box-shadow:inset 0 4px 10px rgba(0,0,0,.18)}
.stick i{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;pointer-events:none;
  background:linear-gradient(180deg,#56b8ff,#1468cf);border:3px solid #0b3a78;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 4px 0 #0b3a78}
.acts{display:flex;gap:12px;align-items:center}
.acts .btn{min-width:98px;min-height:84px;font-size:22px;border-radius:44px;touch-action:none;-webkit-user-select:none;user-select:none}
.shootb .power{position:absolute;left:16px;right:16px;bottom:10px;height:7px;border-radius:4px;background:rgba(0,0,0,.28);overflow:hidden}
.shootb .power i{display:block;height:100%;width:0;background:linear-gradient(90deg,#fff27a,#fff)}
.winback{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.winback b{font-family:var(--title);font-weight:400;font-size:30px;line-height:1;color:var(--orange);-webkit-text-stroke:1.5px #7a3a00;paint-order:stroke fill}
.winback span{font-family:var(--ui);font-size:15px;color:var(--ink-2)}
.wbdots{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.wbdots i{width:24px;height:24px;border-radius:50%;background:#e7cf9f;border:3px solid var(--wood-2)}
.wbdots i.on{background:linear-gradient(180deg,#a8ee55,#3c9d10);border-color:#1f5207}
.wbdots .danger{margin-left:auto;display:flex;gap:4px;align-items:center;font-family:var(--ui);font-size:13px;color:var(--ink-2)}
.wbdots .danger i{width:16px;height:16px}
.wbdots .danger i.on{background:linear-gradient(180deg,#ff7a6a,#d62b20);border-color:#7a110a}
.tips ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:16px}
@media (max-width:420px){.stick{width:112px;height:112px}.acts .btn{min-width:84px;min-height:74px;font-size:19px}}

/* Open Roam hub: fixture, league table, training, skills, ladder */
.fixture{display:flex;align-items:center;gap:12px}
.fixture b{display:block;font-family:var(--ui);font-weight:400;font-size:21px;line-height:1.15}
.fixture span{font-size:15px;color:var(--ink-2)}
.fx-kit{flex:none;width:40px;height:44px;border-radius:10px 10px 14px 14px;border:5px solid;box-shadow:0 3px 0 var(--wood-d)}
.ltable{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.ltable th{font-family:var(--ui);font-weight:400;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);text-align:right;padding:4px 6px;border-bottom:2px solid var(--wood-2)}
.ltable td{text-align:right;padding:6px;border-bottom:1px dashed rgba(122,86,52,.3)}
.ltable th:nth-child(2),.ltable td:nth-child(2){text-align:left;width:100%}
.ltable tr.up td:first-child{color:#2e7d0a;font-weight:700}
.ltable tr.me td{background:#fff3b8;font-weight:700}
.ltable tr.me td:first-child{border-radius:8px 0 0 8px}.ltable tr.me td:last-child{border-radius:0 8px 8px 0}
.tpline{margin:0;font-size:16px}.tpline b{font-family:var(--title);font-weight:400;font-size:26px;color:var(--orange);-webkit-text-stroke:1.5px #7a3a00;paint-order:stroke fill}
.statrow,.skrow{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:2px dashed rgba(122,86,52,.3)}
.st-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.st-text b{font-family:var(--ui);font-weight:400;font-size:19px}
.st-text span{font-size:14px;color:var(--ink-2)}
.spips{display:flex;gap:3px;margin-top:4px}
.spips i{flex:1;max-width:22px;height:10px;border-radius:4px;background:#e7cf9f;border:2px solid var(--wood-2)}
.spips i.on{background:linear-gradient(180deg,#a8ee55,#3c9d10);border-color:#1f5207}
.maxed{font-family:var(--ui);color:#2e7d0a;font-size:17px}
.skrow em{font-style:normal;font-family:var(--ui);font-size:14px;color:var(--ink-2);text-align:right}
.skrow.got em{color:#2e7d0a}
.skrow:not(.got){opacity:.7}
.ladder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ladder li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:#fffaf0;border:3px solid #e2c99a;color:var(--ink-2)}
.ladder li b{font-family:var(--ui);font-weight:400;font-size:18px}
.ladder li span{font-size:14px;display:flex;align-items:center;gap:4px}
.ladder li.done{color:var(--ink);border-color:#9ccc65}
.ladder li.now{color:var(--ink);border-color:var(--orange);background:linear-gradient(180deg,#fff7c9,#ffd96a);box-shadow:0 3px 0 #7a3a00}
.ladder .cup{color:#b07d00}
/* Match extras */
.acts{flex-direction:column;align-items:flex-end}
.acts-main{display:flex;gap:12px}
.skbtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.skbtns .btn{min-height:44px;font-size:16px;touch-action:none}
.skbtns .btn.cooling{--c1:#cfd3d6;--c2:#9aa1a7;--edge:#5d6872}
.chal{margin:0;background:#fff3b8;border:2px dashed #e0a800;border-radius:12px;padding:8px 12px;font-size:16px}
.chalres{margin:0;font-weight:600;color:var(--ink-2)}.chalres.done{color:#2e7d0a}
.tpgain{margin:0;font-size:17px}.tpgain b{color:var(--orange);font-family:var(--ui);font-weight:400;font-size:22px}

/* Open Roam: the floating joystick, and the controls laid over the pitch on wide screens */
.roamfield .ctrl{border:0;border-top:4px solid var(--wood-d);border-radius:0;box-shadow:none;padding:10px 14px}
.stickzone{position:relative;flex:1;align-self:stretch;min-height:132px;touch-action:none;-webkit-user-select:none;user-select:none}
.stickzone .stick{position:absolute;left:0;top:50%;margin-top:-64px;transition:opacity .15s}
.stickzone .stick.on{margin-top:0;transition:none}
@media (max-width:420px){.stickzone .stick{margin-top:-56px}.stickzone .stick.on{margin-top:0}}
@media (min-width:900px){
  .roam{grid-template-columns:2.1fr 1fr}
  .roamfield .ctrl{position:absolute;inset:0;background:none;border:0;padding:16px;align-items:flex-end;pointer-events:none}
  .roamfield .stickzone{pointer-events:auto;height:100%;max-width:48%}
  .roamfield .stickzone .stick{top:auto;bottom:0;margin-top:0;opacity:.8;background:radial-gradient(circle,rgba(255,250,240,.75) 0 28%,rgba(239,217,168,.55) 29% 100%)}
  .roamfield .stickzone .stick.on{bottom:auto;opacity:.95}
  .roamfield .acts{pointer-events:auto}
  .roamfield .acts .btn{opacity:.92}
}

/* Open Roam: control levels, and the Shoot button glowing when there's a good chance */
.choices.assist .pick{font-size:19px}
/* The glow is a yellow disc under the button that grows out from behind it and fades: transform and opacity
   only, so it doesn't repaint every frame. While it shows, the button's face (colour, rim and bevel) is drawn by
   ::after so the disc (::before) can sit beneath it. */
.game.roam .acts .shootb:is(.glow,.urge){background:transparent;border-color:transparent;box-shadow:none}
.game.roam .acts .shootb:is(.glow,.urge)::after{display:block;content:"";position:absolute;z-index:-1;inset:-3px;left:-3px;right:-3px;top:-3px;height:auto;
  border-radius:50%;background:var(--kp);border:3px solid var(--navy);box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.5),0 5px 0 var(--navy)}
.game.roam .acts .shootb:is(.glow,.urge):active::after{box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.5),0 1px 0 var(--navy)}
.game.roam .acts .shootb:is(.glow,.urge)::before{content:"";position:absolute;z-index:-2;inset:-15px;border-radius:50%;background:rgb(255,210,63);pointer-events:none;will-change:transform,opacity}
.game.roam .acts .shootb.glow::before{animation:shootglow .8s ease-in-out infinite alternate}
@keyframes shootglow{from{transform:scale(.72);opacity:.9}to{transform:none;opacity:0}}
@media (prefers-reduced-motion:reduce){.shootb.glow{outline:4px solid var(--yellow)}.game.roam .acts .shootb.glow::before{animation:none;opacity:0}}
/* Open Roam's autopilot: the On/Off picker, the AUTOPILOT badge above the joystick, and the shooting moment
   (SHOOT! with a draining bar over the Shoot button, which pulses hard) */
.choices.autopick{grid-template-columns:repeat(2,1fr)}
.autopill{position:absolute;left:4px;bottom:140px;display:flex;align-items:center;gap:7px;padding:4px 12px;border-radius:999px;background:rgba(10,25,40,.72);border:2px solid rgba(255,255,255,.85);color:#fff;font-family:var(--ui);font-size:15px;letter-spacing:.08em;white-space:nowrap;pointer-events:none}
.autopill::before{content:"";width:9px;height:9px;border-radius:50%;background:#8ef05a;box-shadow:0 0 6px #8ef05a}
@media (max-width:420px){.autopill{bottom:124px}}
@media (max-height:520px){.game .roamfield .autopill{bottom:118px}.swin b{font-size:30px}}
.acts{position:relative}
.swin{position:absolute;right:0;bottom:calc(100% + 12px);display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 16px 10px;border-radius:16px;background:rgba(10,25,40,.75);pointer-events:none;animation:swpop .25s ease-out}
.swin b{font-family:var(--title);font-weight:400;font-size:36px;line-height:1;color:var(--yellow);-webkit-text-stroke:2px #3a1d05;paint-order:stroke fill;text-shadow:0 3px 0 #3a1d05}
.swin span{display:block;width:132px;height:10px;border-radius:5px;background:rgba(255,255,255,.25);overflow:hidden}
.swin i{display:block;height:100%;background:linear-gradient(90deg,#ff6a3d,#ffd23f);transform-origin:left}
@keyframes swdrain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes swpop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.shootb.urge{animation:shooturge .45s ease-in-out infinite alternate}
.game.roam .acts .shootb.urge::before{inset:-21px;animation:urgering .45s ease-in-out infinite alternate}
@keyframes shooturge{from{transform:scale(1)}to{transform:scale(1.14)}}
@keyframes urgering{from{transform:scale(.64);opacity:1}to{transform:none;opacity:0}}
@media (prefers-reduced-motion:reduce){.shootb.urge{animation:none;outline:6px solid var(--yellow);outline-offset:2px}.game.roam .acts .shootb.urge::before{animation:none;opacity:0}.swin{animation:none}}

/* ---------- Full-screen game view ---------- */
body.gamemode{overflow:hidden;overscroll-behavior:none}
/* In a match nothing touches the phone's status or nav bars: the HUD and every pop-up keep these gaps from the
   safe-area insets (10px, 12px at the bottom where cards cast their shadow). --under is the top of things that pop
   up under the scorebug. */
.game{position:fixed;inset:0;z-index:50;background:#14351c;-webkit-user-select:none;user-select:none;
  --gt:calc(env(safe-area-inset-top,0px) + 10px);--gb:calc(env(safe-area-inset-bottom,0px) + 12px);--gl:calc(env(safe-area-inset-left,0px) + 10px);--gr:calc(env(safe-area-inset-right,0px) + 10px);
  --under:calc(var(--gt) + var(--hud-h) + 36px)}
.game .roam-main,.game .roam-side{display:contents}
.game .field{position:absolute;inset:0;border:0;border-radius:0;box-shadow:none}
.game #fieldsvg{position:absolute;inset:0}
.game .board{position:absolute;z-index:5;top:var(--gt);left:50%;transform:translateX(-50%);width:min(520px,calc(100% - 120px));border-width:3px;border-radius:14px;box-shadow:0 3px 0 #0b1426,0 6px 10px rgba(0,0,0,.3)}
.game .team{padding:3px 6px}.game .team .nm{font-size:11px}.game .digits{font-size:26px}
.game .mid{padding:3px 8px;font-size:11px}.game .mid b{font-size:14px}.game .rclock{font-size:19px}
.game .pip{width:9px;height:9px}
.game .gamebar{position:absolute;z-index:6;top:var(--gt);left:var(--gl);right:var(--gr);display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
.game .gamebar>*{pointer-events:auto}
.game .hudr{display:flex;gap:6px}
.game .gamebar .linkbtn{width:var(--ctl);height:var(--ctl);padding:0;border-radius:50%;background:rgba(10,25,40,.55);border:2px solid rgba(255,255,255,.7);color:#fff;font-size:18px;text-decoration:none;text-shadow:none;display:flex;align-items:center;justify-content:center}
@media (max-width:560px){.game .hudr{flex-direction:column}.game .board{width:calc(100% - 110px)}}
.game .streak,.game .foul,.game .gclock{top:var(--under)}
.game .shout{z-index:4}
/* The question card slides up only when there's a question; once answered it shrinks to the result. */
.game .qcard{position:absolute;z-index:8;left:50%;transform:translateX(-50%);bottom:calc(var(--gb) / var(--zf,1));width:min(640px,calc(100% - 20px / var(--zf,1)));max-height:62%;overflow:auto;animation:sheetup .25s ease-out;box-shadow:inset 0 0 0 5px var(--wood),inset 0 0 0 8px var(--wood-2),inset 0 0 0 10px #e9c98e,0 6px 0 #3a1f06,0 12px 30px rgba(0,0,0,.45)}
.game .qcard[data-done] :is(.qtop,.passage,.prompt,.opts,.slots,.tiles,.move,.wbdots){display:none}
.game .qcard[data-done]{padding:14px 16px}
.game .shotui{position:absolute;z-index:9;left:50%;transform:translateX(-50%);bottom:var(--gb);width:min(520px,calc(100% - 24px))}
/* Sideways (the way the game is meant to be held): the question sits on the right, the pitch stays in view. */
@media (orientation:landscape) and (min-width:600px){
  .game .qcard{left:auto;right:calc(var(--gr) / var(--zf,1));transform:none;top:96px;bottom:auto;width:min(400px,46%);max-height:calc(100% - 108px);animation:sheetin .25s ease-out}
}
/* Short screens (a phone on its side): everything in the game view gets more compact. */
@media (max-height:520px){
  .game .board{width:min(400px,calc(100% - 180px))}
  .game .digits{font-size:20px}.game .team .nm{font-size:10px}.game .mid b{font-size:12px}.game .mid{font-size:10px}.game .rclock{font-size:16px}
  .game .gamebar .linkbtn{font-size:15px}.game .hudr{flex-direction:row}
  .game .qcard{top:82px;max-height:calc(100% - 90px);padding:12px 14px;gap:8px}
  .game .qcard .prompt{font-size:17px}.game .qcard .passage{font-size:15px;padding:6px 10px}.game .qcard .move{font-size:13px;padding:5px 9px}
  .game .qcard .opt{font-size:16px;min-height:42px;padding:8px}.game .qcard .opts{gap:8px}
  .game .qcard .speak{padding:4px 10px;font-size:13px}.game .winback b{font-size:22px}.game .wbdots i{width:18px;height:18px}
  .game .streak,.game .foul,.game .gclock,.game .intro{top:var(--under)}
  .game .tips{font-size:14px;padding:16px}.game .tips ul{font-size:14px;gap:3px}
  .game .roamfield .stick{width:108px;height:108px}.game .roamfield .acts .btn{min-width:80px;min-height:68px;font-size:18px}
}
/* Held upright on a touch device: ask for the tablet to be turned sideways. */
.game::after{content:none}
@media (orientation:portrait) and (pointer:coarse){
  .game::after{content:"⟳\A Turn your tablet sideways to play";white-space:pre-line;position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
    background:rgba(16,40,22,.94);color:#fff;font-family:var(--ui);font-size:28px;line-height:1.5}
}
@keyframes sheetup{from{transform:translate(-50%,40px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes sheetin{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
/* Open Roam in the game view: controls over the pitch, a short intro, How to play as an overlay. */
.game .roamfield .ctrl{position:absolute;left:0;right:0;bottom:0;top:auto;height:58%;background:none;border:0;box-shadow:none;padding:16px max(16px,var(--gr)) max(16px,var(--gb)) max(16px,var(--gl));align-items:flex-end;pointer-events:none}
.game .roamfield .stickzone{pointer-events:auto;height:100%;max-width:50%}
.game .roamfield .stickzone .stick{top:auto;bottom:0;margin-top:0;opacity:.8;background:radial-gradient(circle,rgba(255,250,240,.75) 0 28%,rgba(239,217,168,.55) 29% 100%)}
.game .roamfield .stickzone .stick.on{bottom:auto;opacity:.95}
.game .roamfield .acts{pointer-events:auto}
.game .roamfield .acts .btn{opacity:.92}
.game .intro{position:absolute;z-index:4;top:var(--under);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:8px 18px;border-radius:14px;background:rgba(10,25,40,.6);color:#fff;pointer-events:none;animation:introfade 5s forwards;width:max-content;max-width:calc(100% - 24px)}
.game .intro b{font-family:var(--ui);font-weight:400;font-size:20px}.game .intro span{font-size:14px}
@keyframes introfade{0%,75%{opacity:1}100%{opacity:0;visibility:hidden}}
.game .tips{position:absolute;z-index:10;top:50%;left:50%;transform:translate(-50%,-50%);width:min(520px,calc(100% - 24px));max-height:calc(100% - (var(--gt) + var(--gb)) / var(--zf,1));overflow:auto}
.game .tips[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.game .qcard{animation:none}.game .intro{animation:none;display:none}}

/* Syllabus questions: big pictures and simple graphs in prompts, school-year pickers and the progress report */
.prompt .emo{display:block;font-size:44px;line-height:1.25;letter-spacing:4px;margin:6px 0;word-break:break-word}
.prompt .graph{display:block;font-size:22px;line-height:1.5;margin:6px 0;font-weight:600}
.game .prompt .emo{font-size:36px}
.yearpick{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.yearpick .pick{padding:6px 0 8px;gap:0;font-size:26px;line-height:1}
.yearpick .pick small{font-family:var(--ui);font-size:11px;line-height:1.3}
.yearrow{display:flex;flex-direction:column;gap:6px;padding:6px 0}
.yearrow b{font-family:var(--ui);font-weight:400;font-size:18px}
.sylhead{font-family:var(--ui);font-size:20px;margin:6px 0 2px}
.sylrow{display:grid;grid-template-columns:1fr 6em 3.5em;align-items:center;gap:10px;padding:6px 0;border-top:1px dashed rgba(122,86,52,.3)}
.syltext{display:flex;flex-direction:column;min-width:0}
.syltext b{font-size:15px}.syltext span{font-size:12px;color:var(--ink-2)}
.sylrow .pct{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:14px}
@media (max-width:420px){.sylrow{grid-template-columns:1fr 4em 3em}}

/* Friends */
.flist{margin:4px 0 8px;padding-left:22px;font-size:16px;line-height:1.5}
.fcode{display:flex;align-items:center;justify-content:center;gap:12px}
.fcode b{font-family:var(--display,inherit);font-size:34px;letter-spacing:.08em;color:var(--ink)}
.frow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:2px dashed rgba(122,58,0,.2)}
.frow:last-of-type{border-bottom:0}
.fcard{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.fport{width:54px;height:72px;object-fit:contain;flex:none;background:radial-gradient(ellipse at 50% 90%,#d6f0b8,#bfe6ff 70%);border:3px solid var(--wood-2);border-radius:12px}
.ftext{display:flex;flex-direction:column;min-width:0;flex:1}
.ftext b{font-size:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftext span{font-size:14px;opacity:.85}
.ftext .rec{font-weight:700;opacity:1}
.fbtns{display:flex;align-items:center;gap:6px;flex:none}
.fbtns .ghost{font-size:15px;padding:6px 10px}
.linkbtn.fx{color:var(--ink);text-shadow:none;text-decoration:none;font-size:18px;padding:4px 8px}
.kickoff.small{font-size:19px;padding:8px 16px}
.addrow{display:flex;gap:8px;justify-content:center;align-items:center}
.codein{width:9ch;font-weight:700;font-size:22px;letter-spacing:.1em;text-transform:uppercase;text-align:center}
.fres{margin:4px 0;font-size:15px}
.fres b.won{color:#2e8b12}.fres b.lost{color:#c0392b}.fres b.draw{color:#7a3a00}

/* ---------- Tab bar ---------- */
/* The kids' screens share a wooden tab bar along the bottom, clear of the phone's home bar. */
:root{--tabh:76px}
@media (max-height:520px){:root{--tabh:60px}}
body[data-tab] .wrap{padding-bottom:calc(var(--tabh) + 24px)}
body[data-tab] #bk{display:none}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;gap:4px;
  height:var(--tabh);box-sizing:content-box;padding:0 max(8px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(8px,env(safe-area-inset-left,0px));
  background:linear-gradient(180deg,#a96528,#6b3c14 60%,#4e2b0c);border-top:4px solid #3a1f06;box-shadow:0 -6px 16px rgba(30,15,0,.3),inset 0 3px 0 rgba(255,255,255,.18)}
.tab{position:relative;flex:1 1 0;max-width:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:56px;
  font-family:var(--ui);font-size:14px;line-height:1;color:#ffe3b5;text-shadow:0 2px 0 rgba(0,0,0,.35);border-radius:16px;margin:6px 0;transition:transform .12s}
.tab svg{width:34px;height:34px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.3))}
.tab[aria-current="page"]{color:#5a2a00;text-shadow:none;background:linear-gradient(180deg,#fff27a,#ffd23f 45%,#ff9a1f);border:3px solid #7a3a00;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(122,58,0,.35);margin:7px 0 9px}
.tab[aria-current="page"] svg{filter:none}
.tab:active{transform:translateY(2px)}
.tabdot{position:absolute;top:2px;left:calc(50% + 8px);min-width:22px;height:22px;box-sizing:border-box;padding:0 6px;border-radius:11px;background:#e5202e;border:2px solid #fff;
  color:#fff;font:400 13px/18px var(--ui);font-style:normal;text-shadow:none;box-shadow:0 2px 0 rgba(0,0,0,.3)}
@media (max-height:520px){.tab{flex-direction:row;gap:8px;font-size:16px;margin:5px 0}.tab svg{width:28px;height:28px}.tab[aria-current="page"]{margin:6px 0}.tabdot{left:auto;right:4px;top:-4px}}

/* Round icon buttons: sound, grown-ups, back, close */
.iconbtn{width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:16px;color:#fff;background:rgba(14,40,74,.55);border:3px solid #fff;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.iconbtn svg{width:28px;height:28px}
.iconbtn:active{transform:translateY(2px)}

/* ---------- Lobby (home) ---------- */
/* Exactly one screen tall: top bar, the stage where your player stands, and the buttons. The 3D scene (or the
   sky on the page) fills the space behind all of it. */
body[data-tab=home]{overflow:hidden}
body[data-tab=home] .wrap{max-width:none;padding-top:0;padding-bottom:0;gap:0}
.lobby{position:relative;box-sizing:border-box;height:calc(100vh - var(--tabh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  height:calc(100dvh - var(--tabh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top" "stage" "go";gap:8px;
  width:100%;max-width:560px;margin:0 auto;padding:10px 0 22px}
.lb-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.lb-bg canvas{display:block;width:100%;height:100%}
.lobby>*:not(.lb-bg){position:relative;z-index:1}
.lb-top{grid-area:top;display:flex;align-items:center;gap:8px;min-width:0}
.lb-sp{flex:1}
.lb-me{display:flex;align-items:center;gap:8px;min-width:0;height:56px;padding:3px 14px 3px 3px;border-radius:30px;background:rgba(14,40,74,.6);border:3px solid #fff;color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.lb-me.frame-gold,.lb-me.frame-champ{border-color:#ffd23f}.lb-me.frame-holo{border-color:#7fe3ff}.lb-me.frame-bronze{border-color:var(--bronze)}.lb-me.frame-silver{border-color:var(--silver)}
.lb-face{width:44px;height:44px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 8%;background:radial-gradient(circle at 50% 30%,#bfe8ff,#56b8ff)}
.lb-me>span{display:flex;flex-direction:column;align-items:flex-start;min-width:0;overflow:hidden;line-height:1.05}
.lb-me b{font-family:var(--ui);font-weight:400;font-size:19px;max-width:9ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-me small{display:flex;align-items:center;gap:3px;font-family:var(--ui);font-size:13px}.lb-me em{font-style:normal}
.lb-stat{display:flex;align-items:center;gap:4px;height:44px;padding:0 12px 0 6px;border-radius:24px;background:rgba(14,40,74,.6);border:3px solid #fff;color:#fff;font-family:var(--ui);font-size:19px}
.lb-stat svg{width:28px;height:28px}.lb-stat b{font-weight:400}
.lb-stage{grid-area:stage;position:relative;display:flex;flex-direction:column;align-items:center;min-height:0}
.lb-logo{flex:none;font-family:var(--title);font-weight:400;font-size:clamp(34px,min(10vw,7vh),68px);line-height:1;letter-spacing:.02em;margin:0;padding:4px 4px 0;
  color:var(--yellow);background:linear-gradient(180deg,#fff27a 10%,#ffd23f 45%,#ff9a1f 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:3px #3a1d05;paint-order:stroke fill;filter:drop-shadow(0 4px 0 #3a1d05) drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.lb-frame{flex:1;width:100%;min-height:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.lb-frame .heroart{width:100%;height:100%;max-height:100%;aspect-ratio:auto;object-fit:contain}
.lb-frame.live .heroart{visibility:hidden}
.lb-go{grid-area:go;display:flex;flex-direction:column;gap:12px}
.lb-alerts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.lb-alerts:empty{display:none}
.lb-alert{display:flex;align-items:center;gap:8px;min-height:48px;padding:4px 16px 4px 6px;border-radius:26px;background:#fff7c9;border:3px solid #e08a00;box-shadow:0 4px 0 #7a3a00;
  font-family:var(--ui);font-size:17px;color:#5a2a00;animation:nudge 2.4s ease-in-out infinite}
.lb-alert svg{width:36px;height:36px;color:#1468cf}
@keyframes nudge{0%,80%,100%{transform:none}86%{transform:rotate(-3deg) scale(1.04)}93%{transform:rotate(3deg) scale(1.04)}}
.lb-modes{display:flex;gap:10px;justify-content:center}
.lb-mode{display:flex;align-items:center;gap:8px;min-height:52px;padding:4px 16px 4px 6px;font-family:var(--ui);font-size:19px;color:var(--ink);
  background:linear-gradient(180deg,#fffaf0,#f7e6c2);border:3px solid var(--wood-2);border-radius:18px;box-shadow:0 4px 0 var(--wood-d)}
.lb-mode svg{width:40px;height:40px;flex:none}
.lb-mode:active{transform:translateY(3px);box-shadow:0 1px 0 var(--wood-d)}
.lb-play{display:flex;align-items:center;justify-content:center;gap:14px;border-radius:26px;padding:10px 18px 12px;min-height:84px}
.lb-play svg{width:46px;height:46px;flex:none;filter:drop-shadow(0 3px 0 #1f5207)}
.lb-play>span{display:flex;flex-direction:column;align-items:flex-start;font-family:var(--title);font-size:clamp(38px,6vh,54px);line-height:1;letter-spacing:.04em;text-transform:uppercase}
.lb-play small{font-family:var(--ui);font-size:15px;letter-spacing:.01em;text-transform:none;margin-top:2px}
.lb-roam{--c1:#5be3d2;--c2:#13998a;--edge:#0a4f47;display:flex;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:6px 16px 8px}
.lb-roam svg{width:38px;height:38px;flex:none;color:#0a4f47}
.lb-roam>span{display:flex;flex-direction:column;align-items:flex-start;font-size:23px;line-height:1.05}
.lb-roam small{font-size:14px;letter-spacing:.01em}
/* Landscape phones: the player on the left, the buttons in a column on the right. */
@media (orientation:landscape) and (max-height:620px){
  .lobby{max-width:1100px;grid-template-columns:minmax(0,1fr) minmax(300px,42%);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"top top" "stage go";column-gap:20px;padding:8px 0 14px}
  .lb-go{justify-content:center;gap:10px}
  .lb-logo{font-size:clamp(28px,8vh,44px)}
  .lb-play{min-height:0;padding:6px 14px 8px}.lb-play svg{width:38px;height:38px}.lb-play>span{font-size:clamp(30px,8.5vh,44px)}
  .lb-roam{min-height:52px;padding:4px 12px 6px}.lb-roam>span{font-size:20px}
  .lb-mode{min-height:48px;font-size:17px}.lb-mode svg{width:34px;height:34px}
  .lb-me,.iconbtn{height:48px}.iconbtn{width:48px}.lb-face{width:38px;height:38px}
}
@media (orientation:landscape) and (max-height:400px){.lb-go{gap:8px}.lb-play small{font-size:13px}.lb-alerts{display:none}}
/* Big tablets in landscape: the same split, with more room. */
@media (orientation:landscape) and (min-height:621px) and (min-width:900px){
  .lobby{max-width:1180px;grid-template-columns:minmax(0,1fr) 440px;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"top top" "stage go";column-gap:32px}
  .lb-go{justify-content:center;gap:16px}
}
@media (max-width:380px){.lb-stat{padding:0 8px 0 4px;font-size:16px}.lb-stat svg{width:22px;height:22px}.lb-me b{max-width:6ch}.lb-stat+.lb-stat{display:none}}
@media (max-height:640px) and (orientation:portrait){.lb-play{min-height:70px}.lb-roam{min-height:52px}.lb-go{gap:9px}}

/* ---------- Levels ---------- */
.lv-go{position:sticky;bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px) + 12px);z-index:5}
.lv-go .lb-play{width:100%;min-height:76px}
@media (orientation:landscape) and (max-height:620px){.lvgrid{grid-template-columns:repeat(10,1fr)}
  .lv-go{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px) + 14px)}
  .lv-go .lb-play{width:auto;min-height:0;padding:6px 20px 8px}.lv-go .lb-play>span{font-size:30px}.lv-go .lb-play svg{width:32px;height:32px}}
@media (max-height:520px){body[data-tab] .brand.sub h1{font-size:34px}body[data-tab] .wrap{gap:12px;padding-top:8px}}
.wrap>.lb-modes{margin-bottom:-4px}

/* ---------- Sheets: pickers, grown-ups, alerts ---------- */
.sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;background:rgba(10,25,45,.55);
  padding:calc(12px + env(safe-area-inset-top,0px)) calc(10px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(10px + env(safe-area-inset-left,0px));animation:fadein .15s}
.sheet-card{position:relative;width:100%;max-width:560px;max-height:calc(100% - 12px);overflow:auto;box-sizing:border-box;border-radius:26px;padding:20px 18px 22px;
  background:linear-gradient(180deg,var(--parch),var(--parch-2));border:5px solid var(--wood-d);box-shadow:inset 0 0 0 5px var(--wood),inset 0 0 0 8px var(--wood-2),0 10px 30px rgba(0,0,0,.4);animation:slideup .22s ease-out}
.sheet-card>.panel{margin-top:22px}
.sheet-x{position:absolute;top:12px;right:12px;z-index:2;background:var(--wood-2);border-color:var(--wood-d);width:48px;height:48px}
.sheet-h{font-family:var(--ui);font-size:30px;text-align:center;margin:4px 48px 8px}
@keyframes slideup{from{transform:translateY(40px);opacity:0}}
@keyframes fadein{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.sheet,.sheet-card,.lb-alert{animation:none}}
.ask{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 52px 16px;font-family:var(--ui);font-size:clamp(24px,6vw,32px);line-height:1.1;text-align:left}
.spk{background:#1468cf;border-color:#fff;flex:none}
.bigpicks{display:grid;gap:12px}
.bigpicks.n2{grid-template-columns:repeat(2,minmax(0,170px));justify-content:center}
.bigpicks.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bigpicks.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bigpicks.years{display:flex;flex-wrap:wrap;justify-content:center}.bigpicks.years .bigpick{flex:0 1 calc(25% - 9px);min-width:64px}
.bigpick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 6px;min-height:96px;font-family:var(--ui);font-size:20px;line-height:1.1;color:var(--ink);
  background:linear-gradient(180deg,#fffaf0,#f7e6c2);border:3px solid var(--wood-2);border-radius:20px;box-shadow:0 5px 0 var(--wood-d)}
.bigpick svg{width:min(72px,100%);height:auto}
.bigpick .cport{max-width:120px}
.bigpick[aria-pressed="true"]{border-color:#e08a00;background:linear-gradient(180deg,#fff7c9,#ffd96a);box-shadow:0 0 0 3px #fff,0 0 0 6px var(--orange),0 5px 0 6px #7a3a00}
.bigpick:active{transform:translateY(4px);box-shadow:0 1px 0 var(--wood-d)}
.bigpick.yr b{font-family:var(--title);font-weight:400;font-size:44px;line-height:1;color:var(--orange);-webkit-text-stroke:2px var(--wood-d);paint-order:stroke fill}
.bigpick.yr span{font-size:15px;color:var(--ink-2)}
@media (max-width:520px){.bigpicks.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gate-note{text-align:center;color:var(--ink-2);font-size:16px;margin:0 auto 8px;max-width:36ch}
.holdbtn{position:relative;display:grid;place-items:center;width:150px;height:150px;margin:8px auto 4px;border-radius:50%;color:#fff;touch-action:none;user-select:none;-webkit-user-select:none;
  background:radial-gradient(circle at 50% 35%,#56b8ff,#1468cf);border:4px solid #0b3a78;box-shadow:0 6px 0 #0b3a78,0 10px 18px rgba(0,0,0,.25)}
.holdbtn>svg:first-child{width:64px;height:64px}
.holdbtn .ring{position:absolute;inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px);transform:rotate(-90deg);pointer-events:none}
.holdbtn .ring circle{fill:none;stroke:var(--orange);stroke-width:6;stroke-linecap:round;stroke-dasharray:289;stroke-dashoffset:289}
.holdbtn.holding .ring circle{stroke-dashoffset:0;transition:stroke-dashoffset 3s linear}
.holdbtn.holding{transform:scale(.96)}

/* ---------- First run ---------- */
.firstrun{display:flex;flex-direction:column;gap:6px;min-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 60px);justify-content:center}
.fr-top{display:grid;grid-template-columns:52px 1fr 52px;align-items:center}
.dots{display:flex;gap:10px;justify-content:center}
.dots i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.55);border:2px solid rgba(0,60,120,.4)}
.dots i.on{background:#ffd23f;border-color:#7a3a00;transform:scale(1.25)}.dots i.done{background:#fff}
.fr-logo{font-family:var(--title);font-weight:400;text-align:center;font-size:clamp(40px,11vw,64px);line-height:1;margin:6px 0 10px;
  color:var(--yellow);background:linear-gradient(180deg,#fff27a 10%,#ffd23f 45%,#ff9a1f 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:3px #3a1d05;paint-order:stroke fill;filter:drop-shadow(0 4px 0 #3a1d05)}
.firstrun .ask{color:#fff;text-shadow:0 2px 0 rgba(0,60,120,.6),0 0 8px rgba(0,60,120,.4);margin:4px 0 16px}
@media (orientation:landscape) and (max-height:520px){.fr-logo{display:none}.bigpicks.years .bigpick{flex-basis:calc(14.28% - 11px);min-height:84px}.bigpicks.n4{grid-template-columns:repeat(4,minmax(0,1fr))}.bigpick .cport{max-width:90px}}

/* ---------- Locker Room: the character creator ---------- */
/* One screen like the lobby: the dressing room with your player on a podium, and the choices in picture tabs.
   Phones in portrait stack them; anything wider puts the player on the left. */
body[data-tab=home] .wrap,body[data-tab=locker] .wrap,body[data-tab=pass] .wrap{max-width:none;padding-top:0;padding-bottom:0;gap:0}
body[data-tab=locker],body[data-tab=pass]{overflow:hidden}
.creator{box-sizing:border-box;height:calc(100vh - var(--tabh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  height:calc(100dvh - var(--tabh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  display:grid;grid-template-rows:minmax(0,44fr) minmax(0,56fr);gap:10px;width:100%;max-width:1180px;margin:0 auto;padding:10px 0 16px}
.cr-stage{position:relative;overflow:hidden;border-radius:24px;border:5px solid var(--wood-d);box-shadow:0 6px 0 #3a1f06,0 12px 18px rgba(30,15,0,.28);
  background:radial-gradient(ellipse at 50% 85%,rgba(255,210,63,.45),transparent 45%),linear-gradient(180deg,#3a4652,#2a3440 60%,#5b6670 60%,#4a545e)}
.cr-bg{position:absolute;inset:0}
.cr-bg canvas{display:block;width:100%;height:100%}
.cr-frame{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;touch-action:pan-y;cursor:grab}
.cr-still{height:92%;max-width:90%;object-fit:contain}
.cr-frame.live .cr-still{visibility:hidden}
.cr-plate{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;white-space:nowrap;
  padding:5px 18px 6px;border-radius:14px;background:linear-gradient(180deg,#c98447,#8a5222);border:3px solid var(--wood-d);box-shadow:0 0 0 2px var(--metal),0 4px 0 3px #2c1704;color:#fff;pointer-events:none}
.cr-plate b{font-family:var(--ui);font-weight:400;font-size:20px;text-shadow:0 2px 0 var(--wood-d)}
.cr-plate span{font-family:var(--ui);font-size:13px;color:#ffe3b5}.cr-plate i{font-style:normal}
.cr-trick{position:absolute;right:10px;top:10px;background:linear-gradient(180deg,#86e23a,#3c9d10);border-color:#fff}
.tpanel{display:flex;flex-direction:column;min-height:0;border-radius:24px;overflow:hidden;border:5px solid var(--wood-d);
  background:linear-gradient(180deg,var(--parch),var(--parch-2));box-shadow:inset 0 0 0 4px var(--wood),0 6px 0 #3a1f06,0 12px 18px rgba(30,15,0,.28)}
.tp-tabs{flex:none;display:flex;gap:4px;padding:8px 8px 0;overflow-x:auto;scrollbar-width:none;background:linear-gradient(180deg,#a96528,#8a5222);border-bottom:4px solid var(--wood-d)}
.tp-tabs::-webkit-scrollbar{display:none}
.tp-tab{flex:1 1 0;min-width:44px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 6px;border-radius:14px 14px 0 0;font-family:var(--ui);font-size:13px;line-height:1;color:#ffe3b5;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.tp-tab svg{width:30px;height:30px}
.tp-tab span{max-width:100%;overflow:hidden;white-space:nowrap}
.tp-tab[aria-selected="true"]{background:linear-gradient(180deg,var(--parch),var(--parch));color:var(--ink);text-shadow:none;box-shadow:inset 0 3px 0 #fff}
.tp-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 14px 18px;display:flex;flex-direction:column;gap:14px}
.cr-sec h3{font-family:var(--ui);font-size:16px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);margin:0 0 8px}
.cr-dots{display:flex;flex-wrap:wrap;gap:10px}
.cr-dot{width:48px;height:48px;border-radius:50%;background:var(--c);border:3px solid var(--wood-d);box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),inset 0 3px 0 rgba(255,255,255,.35),0 3px 0 var(--wood-d);display:grid;place-items:center;color:var(--wood-d)}
.cr-dot.none{background:#fffaf0}.cr-dot.none svg{width:22px;height:22px}
.cr-dot.ring{background:#fffaf0;box-shadow:inset 0 0 0 7px var(--c),0 3px 0 var(--wood-d)}
.cr-dot[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--orange),inset 0 -5px 0 rgba(0,0,0,.18);transform:scale(1.08)}
.cr-dot.ring[aria-pressed="true"]{box-shadow:inset 0 0 0 7px var(--c),0 0 0 3px #fff,0 0 0 6px var(--orange)}
.cr-dot:disabled{opacity:.55}.cr-dot svg{width:18px;height:18px}
.cr-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.cr-tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.cr-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;padding:8px 6px;font-family:var(--ui);font-size:15px;line-height:1.1;text-align:center;color:var(--ink);
  background:linear-gradient(180deg,#fffaf0,#f7e6c2);border:3px solid var(--wood-2);border-radius:16px;box-shadow:0 4px 0 var(--wood-d)}
.cr-tile>svg{width:44px;height:44px}
.cr-tile .gsw,.cr-tile>span:first-child:empty{display:none}
.cr-tile small{font-family:var(--body);font-size:11px;color:var(--ink-2);display:flex;align-items:center;gap:3px}
.cr-tile[aria-pressed="true"]{border-color:#e08a00;background:linear-gradient(180deg,#fff7c9,#ffd96a);box-shadow:0 0 0 3px #fff,0 0 0 6px var(--orange),0 4px 0 6px #7a3a00}
.cr-tile:disabled{opacity:.6;filter:grayscale(.5)}
.cr-tile:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--wood-d)}
.cr-tile.tall{padding:4px 4px 8px}.cr-port{width:100%;max-width:90px;aspect-ratio:3/4;object-fit:contain;border-radius:10px;background:radial-gradient(ellipse at 50% 80%,#d6f0b8,#bfe6ff 70%)}
.cr-in{width:100%;box-sizing:border-box;font-family:var(--ui);font-size:24px;padding:10px 14px}.cr-in.num{width:5ch;text-align:center}
.cr-more{display:flex;align-items:center;justify-content:center;gap:10px;font-size:18px}.cr-more svg{width:30px;height:30px}
@media (orientation:landscape),(min-width:700px) and (min-height:900px){
  .creator{grid-template-rows:none;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:16px}
}
@media (orientation:landscape) and (max-height:520px){.creator{padding:6px 0 10px;gap:10px}.tp-tab span{display:none}.tp-tab{flex-basis:48px;padding:4px}.cr-dot{width:44px;height:44px}.cr-plate b{font-size:17px}}
.cr-tile .dot{display:block;width:30px;height:30px;border-radius:50%;border:2px solid var(--wood-d)}
.cr-tile .pat{width:38px;height:40px;border-radius:8px;border:2px solid var(--wood-d)}

/* ---------- Tab screen headers ---------- */
.scr-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.scr-title{display:flex;align-items:center;gap:8px;margin:0;padding:4px 18px 4px 8px;border-radius:18px;font-family:var(--title);font-weight:400;font-size:30px;line-height:1;letter-spacing:.02em;color:#fff;
  background:linear-gradient(180deg,#c98447,#8a5222);border:3px solid var(--wood-d);box-shadow:0 0 0 3px var(--metal),0 0 0 5px var(--metal-d),0 5px 0 5px #2c1704;text-shadow:0 3px 0 var(--wood-d),-1px -1px 0 var(--wood-d),1px 1px 0 var(--wood-d)}
.scr-title svg{width:36px;height:36px;color:#ffd23f;filter:drop-shadow(0 2px 0 var(--wood-d))}
.scr-title span{padding-top:4px;white-space:nowrap}
@media (max-width:420px){.scr-title{font-size:24px;padding-right:12px}.scr-title svg{width:30px;height:30px}}
@media (max-height:520px){.scr-title{font-size:24px}.scr-title svg{width:28px;height:28px}}

/* ---------- Screens that fit: Open Roam, Coach's corner ---------- */
/* One screen tall, with the long parts in a tabbed panel that scrolls inside itself. */
.wrap:has(>.fitscreen){max-width:none;padding-top:0;padding-bottom:0;gap:0}
body:has(.fitscreen){overflow:hidden}
.fitscreen{box-sizing:border-box;height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:10px;width:100%;max-width:1180px;margin:0 auto;padding:10px 0 14px}
.fitscreen>.tpanel{flex:1}
.backbtn{background:linear-gradient(180deg,#ff7a6a,#d62b20);border-color:#fff}
.fs-main{flex:1;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px}
@media (orientation:landscape),(min-width:700px) and (min-height:900px){.fs-main{grid-template-rows:none;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:16px}}
.tp-h{font-family:var(--ui);font-weight:400;font-size:16px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);margin:4px 0 0}
.tp-body>.note{margin:0}
.gu-tag{display:flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 8px;border-radius:20px;background:#1b2a5c;border:3px solid #fff;color:#fff;font-family:var(--ui);font-size:16px}
.gu-tag svg{width:22px;height:22px}
.tpline{display:flex;align-items:center;gap:8px}.tpline>svg{width:34px;height:34px;flex:none}
.rewardsbox{display:flex;flex-direction:column;gap:12px}
.coachscreen .tpanel{max-width:900px;width:100%;margin:0 auto}
.coachscreen .tp-body textarea{font-size:18px}

/* The next match: a fixture card with both kits, the bonus, and Play. */
.matchcard{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 14px 16px;border-radius:24px;color:#fff;text-align:center;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.25),transparent 60%),linear-gradient(180deg,#1f6fb0,#14467a);border:5px solid #0b2a4e;box-shadow:inset 0 0 0 3px rgba(255,255,255,.25),0 6px 0 #071c34,0 12px 18px rgba(0,20,40,.3)}
.mc-league{font-family:var(--ui);font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:#bfe8ff}
.mc-round{font-family:var(--title);font-size:clamp(24px,6vw,32px);line-height:1;color:#ffd23f;-webkit-text-stroke:2px #3a1d05;paint-order:stroke fill;text-shadow:0 3px 0 #3a1d05}
.mc-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;width:100%}
.mc-team{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.mc-team svg{width:64px;height:64px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.3))}
.mc-team b{font-family:var(--ui);font-weight:400;font-size:16px;line-height:1.1;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.mc-v{font-family:var(--title);font-size:32px;color:#fff;-webkit-text-stroke:2px #0b2a4e;paint-order:stroke fill}
.mc-chip{display:flex;align-items:center;gap:8px;margin:0;padding:6px 12px 6px 8px;border-radius:14px;background:rgba(0,0,0,.25);font-size:15px;text-align:left;line-height:1.25}
.mc-chip svg{width:26px;height:26px;flex:none}
.mc-chip.warn{background:#ffd23f;color:#5a2a00}.mc-chip.warn svg{color:#7a3a00}
.matchcard .lb-play{width:100%;margin-top:4px}
@media (orientation:landscape) and (max-height:520px){.matchcard{gap:5px;padding:8px 10px 10px}.mc-team svg{width:44px;height:44px}.mc-round{font-size:22px}.mc-chip{font-size:13px;padding:4px 10px 4px 6px}.matchcard .lb-play{min-height:0;padding:4px 14px 6px}.matchcard .lb-play>span{font-size:28px}}
@media (orientation:portrait) and (max-height:700px){.mc-team svg{width:48px;height:48px}.matchcard{gap:6px}}

/* ---------- Full time ---------- */
/* A results screen: a shiny headline, your player on a glowing spot, the stars, then the details folded away. */
.ft{max-width:560px;width:100%;margin:0 auto;box-sizing:border-box;gap:12px}
.ft h2{text-shadow:none;font-size:clamp(42px,12vw,64px);background:linear-gradient(180deg,#fff27a 10%,#ffd23f 45%,#ff9a1f 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 0 #3a1d05);margin:0}
.ftplayer{position:relative;padding-bottom:6px}
.ftplayer::before{content:"";position:absolute;left:50%;bottom:0;width:180px;height:44px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(255,210,63,.75),rgba(255,210,63,0) 70%)}
.ftplayer .mini{position:relative;width:132px;height:176px;background:none;border:0;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25))}
.ft .result{font-family:var(--ui);font-weight:400;font-size:24px;line-height:1.2;margin:0}
.ft .stars svg{width:38px;height:38px}
.ft-body>.row:last-child{gap:10px;margin-top:4px}
.ft-body>.row:last-child .kickoff{flex:1 1 100%;font-size:32px;min-height:72px}
.ft-body>.row:last-child>:not(.kickoff){flex:1 1 120px;font-size:17px;padding:10px 8px}
/* The player and the result (ft-hero), then everything else (ft-body); side by side on screens held sideways. */
.ft-hero,.ft-body{display:flex;flex-direction:column;gap:12px;min-width:0}.ft-hero{align-items:center}
/* The score, on a scoreboard. */
.scoreline{display:grid;grid-template-columns:1fr auto auto auto 1fr;align-items:center;gap:8px;padding:10px 12px;border-radius:16px;background:#14202c;border:4px solid #3a4652;box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 4px 0 #0a1118;color:#fff}
.scoreline span{font-family:var(--ui);font-size:15px;line-height:1.1}.scoreline span:first-child{text-align:right}.scoreline span:last-child{text-align:left}
.scoreline b{font-family:var(--title);font-weight:400;font-size:40px;line-height:1;color:#ffd23f;min-width:1ch}
.scoreline i{font-style:normal;font-size:24px;color:#9fb3c2}
details.xpgain>summary,details.goalcard>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px}
details.xpgain>summary::-webkit-details-marker,details.goalcard>summary::-webkit-details-marker{display:none}
details.xpgain>summary::after,details.goalcard>summary::after{content:"";width:12px;height:12px;flex:none;margin-left:auto;border-right:3px solid var(--wood-2);border-bottom:3px solid var(--wood-2);transform:rotate(45deg) translate(-3px,-3px);transition:transform .15s}
details[open].xpgain>summary::after,details[open].goalcard>summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.xptotal{font-family:var(--title);font-weight:400;font-size:26px;color:var(--orange);-webkit-text-stroke:1.5px #7a3a00;paint-order:stroke fill;margin-left:auto}
details.goalcard>summary{flex-direction:column;align-items:flex-start;gap:2px;padding-right:22px;position:relative}
details.goalcard>summary::after{position:absolute;right:2px;top:16px}

/* ---------- Friends ---------- */
.fcode{flex-direction:column;gap:8px}
.fcode b{font-family:var(--title);font-weight:400;font-size:44px;letter-spacing:.1em;padding:6px 20px 2px;border-radius:16px;background:#fff;border:3px dashed var(--wood-2);color:var(--ink)}
.frow{gap:12px;padding:10px;margin-top:8px;border:3px solid var(--wood-2);border-bottom-width:3px;border-radius:18px;background:#fffaf0;box-shadow:0 4px 0 var(--wood-d)}
.frow:last-of-type{border-bottom:3px solid var(--wood-2)}
.fport{width:56px;height:56px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 6%;background:radial-gradient(circle at 50% 30%,#bfe8ff,#56b8ff);border:3px solid var(--wood-2)}
.ftext b{font-family:var(--ui);font-weight:400;font-size:20px}
.flist{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.flist li{display:flex;gap:8px;align-items:flex-start}.flist li::before{content:"✓";font-family:var(--ui);color:#2e7d0a;font-size:18px;line-height:1.3}
@media (max-width:420px){.gu-tag{font-size:0;gap:0;padding:0 9px}.gu-tag svg{width:22px;height:22px}}
.frow{flex-wrap:wrap}.frow .fcard{flex:1 1 170px}.frow .fbtns{margin-left:auto;align-items:center}.ftext .rec{white-space:nowrap;font-family:var(--ui);color:var(--ink-2)}
.frow .fcard{flex-wrap:wrap;row-gap:8px}.frow .ftext{flex:1 1 120px}
.fs-main>.matchcard{align-self:start}
details.xpgain>summary::after{margin-left:12px}

/* ---------- Lively: the logo ---------- */
/* Big chunky letters, stacked shadows for a 3D edge, a spinning ball between the words, a ribbon underneath,
   a gentle bob and a few twinkles. */
.logo.lb-logo,.logo.fr-logo{background:none;-webkit-text-fill-color:currentColor;-webkit-text-stroke:0;filter:none;color:inherit;padding:0}
.logo{position:relative;display:flex;flex-direction:column;align-items:center;margin:0;font-weight:400;line-height:1;--lg:clamp(52px,min(17vw,9vh),104px);
  transform:rotate(-3deg);animation:bob 3.2s ease-in-out infinite}
.lg-row{display:flex;align-items:center;gap:.06em;font-size:var(--lg)}
.lg-w{font-family:var(--title);letter-spacing:.02em;padding:.08em .02em 0;
  background:linear-gradient(180deg,#fffbd0 0%,#fff27a 22%,#ffd23f 50%,#ff9a1f 85%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:.06em #3a1d05;paint-order:stroke fill;
  filter:drop-shadow(0 .03em 0 #c25700) drop-shadow(0 .03em 0 #8a3d00) drop-shadow(0 .04em 0 #3a1d05) drop-shadow(0 .1em .08em rgba(0,0,0,.3))}
.lg-ball{display:block;width:.62em;height:.62em;margin:0 .02em;animation:spin 5s linear infinite;filter:drop-shadow(0 .04em 0 #3a1d05)}
.lg-ball svg{display:block;width:100%;height:100%}
.lg-tag{margin-top:-.1em;padding:5px 22px 4px;font-family:var(--ui);font-size:clamp(13px,calc(var(--lg)*.2),19px);color:#fff;letter-spacing:.03em;white-space:nowrap;
  background:linear-gradient(180deg,#ff6b5a,#d62b20);text-shadow:0 2px 0 #7a110a;transform:rotate(1.5deg);
  clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%);filter:drop-shadow(0 3px 0 #7a110a)}
.spark{position:absolute;width:22px;height:22px;background:#fff6a8;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  animation:twinkle 2.4s ease-in-out infinite;pointer-events:none}
.spark.k1{left:-6%;top:6%}.spark.k2{right:-4%;top:-4%;width:28px;height:28px;animation-delay:.8s}.spark.k3{right:6%;bottom:8%;width:16px;height:16px;animation-delay:1.5s}.spark.k4{left:8%;bottom:2%;width:14px;height:14px;animation-delay:.4s}
@keyframes bob{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-6px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes twinkle{0%,100%{transform:scale(.2) rotate(0);opacity:0}45%{transform:scale(1) rotate(45deg);opacity:1}70%{opacity:.8}}
.fr-logo{--lg:clamp(56px,16vw,96px);margin:4px 0 18px}
@media (orientation:landscape) and (max-height:620px){.logo{--lg:clamp(34px,11vh,60px)}.lg-tag{display:none}}

/* ---------- Lively: buttons ---------- */
/* Deeper, glossier and springy: they squash down when pressed and bounce back. */
.kickoff,.btn,.ghost,.next,.claim,.shoot{border-radius:20px;border-width:3px;
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.2),inset 0 3px 0 rgba(255,255,255,.55),0 7px 0 var(--edge),0 12px 16px rgba(40,20,0,.28);
  transition:transform .18s cubic-bezier(.3,1.7,.5,1),box-shadow .1s,filter .15s}
.kickoff::after,.btn::after,.ghost::after,.next::after,.claim::after,.shoot::after{top:4px;height:45%;background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.1))}
@media (hover:hover){.kickoff:hover:not(:disabled),.btn:hover:not(:disabled),.ghost:hover:not(:disabled){filter:brightness(1.07) saturate(1.1);transform:translateY(-2px)}}
.kickoff:active,.btn:active,.ghost:active,.next:active,.claim:active,.shoot:active{transform:translateY(6px) scale(.97);transition-duration:.05s;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.2),inset 0 3px 0 rgba(255,255,255,.55),0 1px 0 var(--edge),0 3px 6px rgba(40,20,0,.25)}
/* The big buttons: the icon sits in a white badge, a shine sweeps across, and Play breathes. */
.lb-play>svg,.lb-roam>svg{box-sizing:border-box;border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff,#e9f8dc);box-shadow:0 3px 0 rgba(0,0,0,.25),inset 0 -3px 0 rgba(0,0,0,.08);filter:none}
.lb-play>svg{width:58px;height:58px;padding:12px 10px 12px 14px}
.lb-play>svg path{fill:#3c9d10;stroke:#1f5207;stroke-width:1.5}
.lb-roam>svg{width:46px;height:46px;padding:4px;background:#fff}
/* The shine is a band of light sliding across inside .shine (which clips it to the button); Play's glow is a
   halo on ::before that fades in and out as it breathes. Both move with transform and opacity only, so they
   don't repaint the button every frame. */
.lb-play>.shine,.lb-roam>.shine{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
.lb-play>.shine::before,.lb-roam>.shine::before{content:"";position:absolute;top:0;bottom:0;left:-200%;width:300%;will-change:transform;
  background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);animation:shine 3.6s ease-in-out infinite}
.lb-roam>.shine::before{animation-delay:1.8s}
.lb-play::before{content:"";position:absolute;z-index:-1;inset:-3px;border-radius:inherit;pointer-events:none;opacity:0}
.lobby .lb-play{animation:breathe 2.4s ease-in-out infinite}
/* The halo's box takes in the rim below the button, so the glow goes round the rim rather than over it. */
.lobby .lb-play::before{inset:-3px -3px -10px;box-shadow:0 0 26px rgba(255,236,120,.95),0 0 10px rgba(255,236,120,.7);animation:breatheglow 2.4s ease-in-out infinite;will-change:opacity}
.lobby .lb-play:active,.lobby .lb-play:active::before{animation:none}
@keyframes shine{0%,55%{transform:none}100%{transform:translateX(100%)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes breatheglow{0%,100%{opacity:0}50%{opacity:1}}
.lb-play>span{font-size:clamp(42px,7vh,62px);text-shadow:-2px -2px 0 var(--edge),2px -2px 0 var(--edge),-2px 2px 0 var(--edge),2px 2px 0 var(--edge),0 5px 0 var(--edge)}
/* Chips: the sport and subject pickers and the counters pop a little. */
.lb-mode,.bigpick,.cr-tile,.tp-tab,.tab,.lb-me,.iconbtn{transition:transform .18s cubic-bezier(.3,1.7,.5,1)}
.lb-mode:active,.bigpick:active,.iconbtn:active,.lb-me:active{transform:translateY(3px) scale(.95)}
.lb-mode svg{transition:transform .3s cubic-bezier(.3,1.7,.5,1)}
@media (hover:hover){.lb-mode:hover svg{transform:rotate(-12deg) scale(1.1)}}
.lb-stat{box-shadow:0 3px 0 rgba(0,0,0,.25)}
.lb-stat svg{animation:glint 4s ease-in-out infinite}
@keyframes glint{0%,85%,100%{transform:none}90%{transform:scale(1.25) rotate(18deg)}}

/* ---------- Lively: tabs and arrivals ---------- */
.tab[data-tab=home] svg{color:#ffb84d}.tab[data-tab=levels] svg{color:#ffd23f}.tab[data-tab=locker] svg{color:#ff7a6a}.tab[data-tab=friends] svg{color:#86e23a}.tab[data-tab=pass] svg{color:#c98bff}
.tab[aria-current="page"] svg{color:#5a2a00;animation:tabpop .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes tabpop{0%{transform:scale(.5) rotate(-15deg)}100%{transform:none}}
/* Things on a new screen pop in, one after another. */
.lb-top>*,.lb-go>*,.scr-top>*,.bigpicks>*,.matchcard,.tpanel,.creator>*,.ft>*{animation:popin .45s cubic-bezier(.3,1.5,.5,1) backwards}
.lb-top>:nth-child(2),.lb-go>:nth-child(2),.bigpicks>:nth-child(2),.ft>:nth-child(2){animation-delay:.05s}
.lb-top>:nth-child(3),.lb-go>:nth-child(3),.bigpicks>:nth-child(3),.ft>:nth-child(3),.tpanel,.creator>:nth-child(2){animation-delay:.1s}
.lb-top>:nth-child(n+4),.lb-go>:nth-child(4),.bigpicks>:nth-child(4),.ft>:nth-child(4){animation-delay:.15s}
.lb-go>:nth-child(n+5),.bigpicks>:nth-child(n+5),.ft>:nth-child(n+5){animation-delay:.2s}
.lobby .lb-play{animation:popin .45s cubic-bezier(.3,1.5,.5,1) .15s backwards,breathe 2.4s ease-in-out .6s infinite}
.lobby .lb-play::before{animation-delay:.6s}
@keyframes popin{from{opacity:0;transform:translateY(18px) scale(.9)}}
@media (prefers-reduced-motion:reduce){.logo,.lg-ball,.spark,.lb-play::before,.shine::before,.lb-stat svg,.lobby .lb-play,.tab[aria-current="page"] svg,
  .lb-top>*,.lb-go>*,.scr-top>*,.bigpicks>*,.matchcard,.tpanel,.creator>*,.ft>*{animation:none}.spark{display:none}}
@media (min-height:621px) and (min-width:700px){.logo.lb-logo{--lg:clamp(72px,min(11vw,11vh),124px)}}

/* ---------- Lively: the lobby's extras ---------- */
/* Your teammate's speech bubble, a confetti burst for kick-off, and the day-streak flame. */
.lb-bubble{position:absolute;right:4%;top:calc(var(--lg,80px) * 1.45);z-index:3;display:flex;align-items:center;gap:6px;max-width:min(58%,260px);padding:8px 14px 8px 8px;
  border-radius:20px;background:#fff;border:3px solid #3a1d05;box-shadow:0 4px 0 #3a1d05;font-family:var(--ui);font-size:16px;line-height:1.15;color:var(--ink);text-align:left;opacity:0}
.lb-bubble::after{content:"";position:absolute;right:28%;bottom:-14px;border:9px solid transparent;border-top:12px solid #3a1d05}
.lb-bubble::before{content:"";position:absolute;right:calc(28% + 3px);bottom:-8px;z-index:1;border:6px solid transparent;border-top:9px solid #fff}
.lb-bubble>svg{width:30px;height:30px;flex:none;padding:5px;box-sizing:border-box;border-radius:50%;background:#1468cf;color:#fff}
.lb-bubble.pop{animation:bubble 6.5s ease-in-out both}
@keyframes bubble{0%{opacity:0;transform:scale(.4) translateY(20px)}6%{opacity:1;transform:scale(1.08)}10%{transform:scale(1)}88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8) translateY(-10px)}}
.lb-stage{--lg:clamp(52px,min(17vw,9vh),104px)}
@media (min-height:621px) and (min-width:700px){.lb-stage{--lg:clamp(72px,min(11vw,11vh),124px)}}
@media (orientation:landscape) and (max-height:620px){.lb-bubble{top:auto;bottom:3%;right:2%;font-size:14px}.lb-bubble::before,.lb-bubble::after{display:none}}
.burst{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none}
.lb-stat.lb-streak{background:linear-gradient(180deg,#ff9a1f,#d9480f);border-color:#fff}
.lb-stat.lb-streak svg{animation:flicker 1.2s ease-in-out infinite}
@keyframes flicker{0%,100%{transform:scale(1) rotate(-4deg)}50%{transform:scale(1.15) rotate(4deg)}}
@media (max-width:420px){.lb-stat.lb-streak{display:none}}
/* phones: keep the name badge whole; the trophy count drops out instead of squashing the name */
.lb-me{flex-shrink:0}
@media (max-width:440px){.lb-stat+.lb-stat{display:none}}
@media (prefers-reduced-motion:reduce){.lb-bubble.pop{animation:none;opacity:1}.lb-stat.lb-streak svg{animation:none}}

/* ---------- Daily reward chest ---------- */
/* On the home screen: a chest in the corner of the pitch that wobbles and glows while today's is waiting. */
.lb-chest{position:absolute;left:3%;bottom:4%;z-index:3;width:clamp(64px,10vh,96px);display:flex;flex-direction:column;align-items:center;padding:0;filter:drop-shadow(0 6px 4px rgba(0,0,0,.3))}
.lb-chest .chestsvg{width:100%;height:auto;overflow:visible}
.lb-chest.ready{animation:wobble 2.2s ease-in-out infinite}
.lb-chest.ready::before{content:"";position:absolute;inset:-25%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(255,236,120,.9),rgba(255,236,120,0) 65%);animation:glow 1.6s ease-in-out infinite}
.lb-chest.done{opacity:.85;filter:grayscale(.35) drop-shadow(0 4px 3px rgba(0,0,0,.25))}
.lb-chest small{margin-top:-4px;padding:1px 8px;border-radius:10px;background:rgba(14,40,74,.75);color:#fff;font-family:var(--ui);font-size:12px}
.chest-bang{position:absolute;top:-8px;right:-6px;width:28px;height:28px;border-radius:50%;background:#e5202e;border:3px solid #fff;color:#fff;font:400 18px/22px var(--title);font-style:normal;text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.3);animation:glint 1.4s ease-in-out infinite}
@keyframes wobble{0%,60%,100%{transform:rotate(0)}66%{transform:rotate(-8deg) scale(1.06)}72%{transform:rotate(7deg) scale(1.06)}78%{transform:rotate(-5deg)}84%{transform:rotate(3deg)}90%{transform:none}}
@keyframes glow{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@media (orientation:landscape) and (max-height:620px){.lb-chest{bottom:auto;top:2%;left:auto;right:3%;width:60px}}

/* Opening it: a dark stage with spinning light rays, the chest bursts open, confetti, and the prize pops up. */
.chestopen{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 50% 45%,#2a5a9c,#0b1d3a 70%);animation:fadein .2s}
.chestopen .burst{z-index:2}
.rays{position:absolute;left:50%;top:42%;width:160vmax;height:160vmax;transform:translate(-50%,-50%);opacity:.35;animation:rays 14s linear infinite;
  background:repeating-conic-gradient(from 0deg,rgba(255,236,120,.55) 0deg 10deg,transparent 10deg 24deg);-webkit-mask:radial-gradient(circle,#000 10%,transparent 55%);mask:radial-gradient(circle,#000 10%,transparent 55%)}
@keyframes rays{to{transform:translate(-50%,-50%) rotate(360deg)}}
.chest-card{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;width:min(100%,420px);text-align:center;color:#fff}
.chest-day{margin:0 0 34px;font-family:var(--title);font-size:clamp(34px,9vw,52px);line-height:1;color:#ffd23f;-webkit-text-stroke:2.5px #3a1d05;paint-order:stroke fill;filter:drop-shadow(0 4px 0 #3a1d05)}
.chestbig{width:min(62vw,240px);animation:chestshake .9s ease-in-out}
.chestbig .chestsvg{width:100%;height:auto;overflow:visible}
.chestbig .chest-lid{transform-box:fill-box;transform-origin:50% 100%;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.chestbig.open .chest-lid{transform:translateY(-14px) rotate(-28deg)}
.chestbig.open{filter:drop-shadow(0 0 30px rgba(255,236,120,.95))}
.chestbig.super .chest-base rect:first-child,.chestbig.super .chest-lid path:first-child{fill:#8b4dff}
.sheet-card .chestbig{margin:0 auto;width:150px;animation:none}
@keyframes chestshake{0%,100%{transform:none}20%{transform:rotate(-6deg) scale(1.04)}40%{transform:rotate(6deg) scale(1.06)}60%{transform:rotate(-4deg) scale(1.08)}80%{transform:rotate(3deg) scale(1.1)}}
.chest-prize{margin:0;opacity:0;transform:scale(.3)}
.chestbig.open~.chest-prize{animation:prize .6s cubic-bezier(.3,1.7,.5,1) forwards}
.chest-prize b{font-family:var(--title);font-weight:400;font-size:clamp(48px,13vw,72px);line-height:1;color:#fff27a;-webkit-text-stroke:3px #3a1d05;paint-order:stroke fill;filter:drop-shadow(0 5px 0 #3a1d05)}
@keyframes prize{to{opacity:1;transform:none}}
.chest-track{display:flex;gap:6px;justify-content:center}
.chest-track i{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;font:400 16px var(--ui);font-style:normal;color:#9fb3c2;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.3)}
.chest-track i.on{background:#ffd23f;border-color:#fff;color:#5a2a00}
.chest-track i.big{width:42px;height:42px}.chest-track i svg{width:26px;height:26px}
.chest-card .xpbar{width:100%}.chest-card .note{color:#cfe3f5;margin:0}
.chest-card .kickoff{width:100%;margin-top:6px}
@media (prefers-reduced-motion:reduce){.lb-chest.ready,.lb-chest.ready::before,.chest-bang,.rays,.chestbig{animation:none}.chest-prize{opacity:1;transform:none}}
.chestopen{overflow:auto}
@media (max-height:560px){.chest-card{gap:6px}.chest-day{font-size:30px;margin-bottom:18px}.chestbig{width:110px}.chest-prize b{font-size:40px}.chest-track i{width:26px;height:26px;font-size:13px}.chest-track i.big{width:32px;height:32px}.chest-card .kickoff{min-height:0;padding:8px;font-size:22px}}
.rays{position:fixed}
@media (max-height:560px){.chestbig{width:92px}.chest-day{margin-bottom:12px}.chest-card .note{font-size:13px}}

/* ---------- Lobby: scoreboard, chest bar, logo position ---------- */
/* The scoreboard sits above the sport and subject buttons, the daily chest is a bar under Open Roam, and the logo
   has room to sit a little lower. */
.lb-screen{position:relative;display:grid;place-items:center;height:clamp(42px,6vh,60px);overflow:hidden;border-radius:14px;border:4px solid #1b1f24;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 2px,transparent 2px 4px),linear-gradient(180deg,#0d2a52,#071a33);box-shadow:inset 0 0 18px rgba(0,0,0,.6),0 4px 0 #0a0d10}
.lb-screen::before,.lb-screen::after{content:"";position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#e5202e;box-shadow:0 0 8px #e5202e;animation:glow 1.2s ease-in-out infinite}
.lb-screen::before{left:10px}.lb-screen::after{right:10px;animation-delay:.6s}
.lb-screen span{font-family:var(--title);font-size:clamp(20px,3.6vh,32px);line-height:1;letter-spacing:.04em;white-space:nowrap;text-transform:uppercase;padding:0 24px;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(180deg,#fff27a,#ffd23f 50%,#ff9a1f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 6px rgba(255,210,63,.6))}
.lb-screen span.flip{animation:flipin .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes flipin{from{transform:translateY(-70%) scaleY(.4);opacity:0}}
.lobby .lb-chest{position:relative;left:auto;bottom:auto;top:auto;right:auto;width:auto;display:flex;flex-direction:row;align-items:center;gap:10px;min-height:52px;padding:4px 14px 4px 8px;
  border-radius:18px;background:linear-gradient(180deg,#ffe48a,#ffb423);border:3px solid #7a3a00;box-shadow:0 5px 0 #7a3a00;color:#5a2a00;text-align:left;filter:none}
.lobby .lb-chest.done{background:linear-gradient(180deg,#fff7e0,#f1dfb8);border-color:var(--wood-2);box-shadow:0 5px 0 var(--wood-d);opacity:1;filter:none}
.lobby .lb-chest.ready{animation:none}
.lobby .lb-chest.ready .lb-chest-ic{animation:wobble 2.2s ease-in-out infinite}
.lobby .lb-chest.ready::before{inset:-6px;border-radius:22px;background:none;box-shadow:0 0 18px rgba(255,210,63,.9)}
.lb-chest-ic{position:relative;width:52px;flex:none;margin-top:-10px}
.lb-chest-ic .chest-bang{top:-6px;right:-10px;width:24px;height:24px;font-size:15px;line-height:18px}
.lb-chest-t{display:flex;flex-direction:column;font-family:var(--ui);font-size:19px;line-height:1.1}
.lb-chest-t small{font-size:13px;opacity:.8}
.lb-stage .logo{margin-top:clamp(6px,3vh,34px)}
/* Phones in portrait keep the players big: no scoreboard, and the chest sits beside Open Roam as a square. */
@media (orientation:portrait) and (max-height:960px){.lb-screen{display:none}
  .lb-go{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px}.lb-go>*{grid-column:1/-1}
  .lb-go>.lb-roam{grid-column:1}.lobby .lb-go>.lb-chest{grid-column:2;padding:4px 8px;justify-content:center}.lb-chest-t{display:none}.lb-chest-ic{margin-top:-6px}}
@media (orientation:portrait) and (max-height:740px){.lb-stage .logo{margin-top:4px}}
@media (orientation:landscape) and (max-height:620px){.lb-screen{height:40px}.lb-screen span{font-size:20px}.lobby .lb-chest{min-height:40px;padding:2px 12px 2px 6px}.lb-chest-ic{width:40px;margin-top:-6px}.lb-chest-t{font-size:16px}.lb-chest-t small{display:none}.lb-stage .logo{margin-top:6vh}}
.lb-screen span{display:block}
.lb-chest-t small{background:none;color:inherit;padding:0;margin:0;border-radius:0}

/* The menus' stadium (Match3D's, before kick-off) behind every screen outside matches; matches draw their own. */
#stagebg{position:fixed;inset:0;z-index:0;pointer-events:none}
#stagebg canvas{display:block;width:100%;height:100%}
body.gamemode #stagebg{display:none}
#app{position:relative;z-index:1}
/* Changing tab: the screen holds back while the ball is passed to its spot, then comes in as it's trapped. */
#app.passin{animation:passin .35s ease-out .95s both}
@keyframes passin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* The tabs other than Home, Locker and Pass: the players stand in #stageframe. Wide screens dock the screen on the
   right and frame the players on the left; upright phones frame them in a strip across the top. */
#stageframe{position:fixed;left:0;right:0;top:0;height:24vh;pointer-events:none;z-index:0}
body[data-tab]:not([data-tab=home]):not([data-tab=locker]):not([data-tab=pass]) .wrap{padding-top:calc(24vh + 8px)}
@media (orientation:landscape) and (min-width:700px){
  #stageframe{right:auto;bottom:var(--tabh);height:auto;width:calc(100vw - min(560px,52vw) - 24px)}
  body[data-tab]:not([data-tab=home]):not([data-tab=locker]):not([data-tab=pass]) .wrap{padding-top:14px;margin-left:auto;margin-right:max(16px,env(safe-area-inset-right,0px));max-width:min(560px,52vw);box-sizing:border-box}
}
/* Kick-off from the menus: the screen fades away while the players run out. */
#app.runout{transition:opacity .45s ease,transform .45s ease;opacity:0;transform:translateY(10px);pointer-events:none}
/* The loading cover (coverUp in app.js): Kit Stripes. The kit's stripes under a navy wash, the gold logo, a ball
   rolling along a striped track, the line in white and a changing tip. Sized from the game's tokens. */
#cover{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--gap) * 1.4);
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:radial-gradient(ellipse at 50% 45%,transparent 30%,rgba(8,16,36,.55) 100%),repeating-linear-gradient(115deg,var(--navy) 0 44px,color-mix(in srgb,var(--k1) 38%,var(--navy)) 44px 88px);
  background-color:var(--navy);transition:opacity .45s ease}
#cover.off{opacity:0;pointer-events:none}
#cover .cv-logo{display:flex;margin:0;--lg:clamp(44px,min(15vw,14vh),120px)}
#cover .cv-logo .lg-w{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:#ffd23f;color:#ffd23f;
  -webkit-text-stroke:.14em var(--navy);paint-order:stroke fill;filter:none;text-shadow:0 .1em 0 var(--navy),0 .16em 18px rgba(0,0,0,.35);padding:.1em .03em 0}
#cover .cv-logo .lg-ball{filter:drop-shadow(0 .06em 0 var(--navy))}
#cover .cv-logo .lg-tag{background:var(--k1);color:var(--kt);text-shadow:none;margin-top:.02em;filter:drop-shadow(0 3px 0 var(--navy)) drop-shadow(0 -2px 0 var(--navy))}
/* The track: white with a navy rim, filling with the kit's stripes as the ball rolls along it and back. */
.cv-track{position:relative;width:min(400px,72vw);height:calc(var(--tap) * .36);margin-top:calc(var(--tap) * .5);border-radius:999px;background:#fff;border:3px solid #fff;box-shadow:0 0 0 3px var(--navy),0 5px 0 3px var(--navy)}
.cv-track>i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:inherit;background:var(--kstripes);transform-origin:left;animation:cvfill 2.4s ease-in-out infinite alternate}
.cv-ball{position:absolute;left:0;bottom:50%;width:calc(var(--tap) * .8);height:calc(var(--tap) * .8);margin-left:calc(var(--tap) * -.4);animation:cvroll 2.4s ease-in-out infinite alternate}
.cv-ball svg{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 0 var(--navy))}
@keyframes cvfill{from{transform:scaleX(.04)}to{transform:scaleX(1)}}
@keyframes cvroll{from{left:2%;transform:rotate(0)}to{left:98%;transform:rotate(720deg)}}
#cover .cv-note{margin:0;padding:4px 14px 3px;border-radius:10px;background:var(--navy);color:#fff;font-family:var(--ui);font-size:calc(var(--fs-opt) * 1.05);text-align:center}
#cover .cv-tip{margin:0;max-width:34ch;padding:6px 14px;border-radius:12px;background:#fff;color:var(--navy);font-size:var(--fs-label);font-weight:600;text-align:center;box-shadow:0 4px 0 var(--navy)}
#cover .cv-tip b{font-family:var(--ui);font-weight:400}
@media (prefers-reduced-motion:reduce){.cv-track>i,.cv-ball{animation:none}.cv-track>i{transform:scaleX(.6)}.cv-ball{left:60%}#cover .cv-logo .lg-ball{animation:none}}
/* Player pictures stay hidden until they've been drawn: no broken-image boxes or alt text while loading. */
img[data-portrait]:not([src]){visibility:hidden}

/* ---------- Menu screens: spacing ---------- */
/* Panel banners: clear room above (away from the panel before) and below (away from the panel's content). */
.panel>.label:first-child{margin-bottom:10px}
.panel:has(>.label:first-child){margin-top:28px}
/* Levels: a dashed line between the stage pills and the level grid, so their highlights never meet. */
.stages{padding-bottom:16px;margin-bottom:2px;border-bottom:2px dashed rgba(122,86,52,.3)}
/* Levels: Play sits in the page after the panels, so it never covers them. */
.lv-go{position:static;display:flex;justify-content:center}
/* XP bars: a sunken track, so an empty bar still reads as a bar. */
.xpbar{height:18px;box-sizing:border-box;background:linear-gradient(180deg,#a87a45,#d4b077 55%,#e6cc9a);border-color:#6b4520;box-shadow:inset 0 3px 4px rgba(40,20,0,.45),0 1px 0 rgba(255,255,255,.7)}
.xpbar i{box-shadow:inset 0 2px 0 rgba(255,255,255,.5)}
/* Friends when it can't be reached here: two friends in a badge with a star and a cup, a heading and the reason. */
.fempty{align-items:center;text-align:center;gap:10px}
.fe-art{position:relative;width:112px;height:112px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 40% 30%,#eaffd6,#9ad86a);border:4px solid var(--wood-2);box-shadow:0 5px 0 var(--wood-d)}
.fe-art>svg:first-child{width:64px;height:64px;color:#2e7d0a}
.fe-art>svg:nth-child(2),.fe-art>svg:nth-child(3){position:absolute;width:36px;height:36px}
.fe-art>svg:nth-child(2){top:-6px;right:-12px;transform:rotate(14deg)}
.fe-art>svg:nth-child(3){bottom:-4px;left:-14px;transform:rotate(-10deg)}
.fe-head{margin:4px 0 0;font-family:var(--ui);font-weight:400;font-size:24px;line-height:1.1;color:var(--ink)}
.fempty p{margin:0;max-width:34ch;color:var(--ink-2)}
@media (max-height:520px){.fe-art{width:72px;height:72px}.fe-art>svg:first-child{width:42px;height:42px}.fe-art>svg:nth-child(2),.fe-art>svg:nth-child(3){width:26px;height:26px}.fe-head{font-size:20px}}
/* Locker: the note that stands in for the choices a girl doesn't have. */
.cr-note{margin:0;padding:10px 14px;border-radius:14px;background:#fff7c9;border:2px dashed #e0a040;color:var(--ink);font-size:15px}
/* Home: the teammate's bubble sits under the logo (in the flow) instead of over its ribbon. Landscape phones keep
   theirs at the bottom of the stage. */
@media (orientation:portrait),(min-height:621px){.lb-bubble{position:relative;top:auto;right:auto;align-self:flex-end;margin:6px 4% -52px 0}}
@media (orientation:portrait) and (max-height:700px){.lb-bubble{margin-bottom:-40px;padding:5px 10px 5px 5px;font-size:14px}.lb-bubble>svg{width:24px;height:24px;padding:4px}}
/* Home: Open Roam's league and matchday stay on one line. */
.lb-roam{min-width:0}.lb-roam>span{min-width:0;max-width:100%}
.lb-roam small{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:420px){.lb-roam{gap:8px;padding-left:10px;padding-right:10px}.lb-roam>svg{width:40px;height:40px}.lb-roam small{font-size:13px}}
/* Under the tab bar: with the stadium up, the page is dark navy (the Kit Stripes tab bar's edge), so a taller
   visible area (toolbars sliding away, the app's browser pane) shows no grass. Without WebGL the grass stays. */
body.staged{background:#13244a}

/* ========================================================================================================= */
/* ---------- Kit Stripes: the menus wear the team's kit ---------- */
/* Every kit colour comes from kitTheme() in app.js (CSS variables on <html>): --k1/--k1s the shirt colour in two
   shades for the stripes, --kt the text on the stripes, --ko the outlines, --kp/--kpt the Play button, --ka an
   accent for text on white. Striped kit panels with chunky outlines and solid drop shadows; white chips, tiles and
   cards with navy text. Small text always sits on white; only big headings and button titles sit on the stripes.
   Menus only: tab screens (body[data-tab]), the Open Roam hub, sheets, the first-run picker and the chest pop-up.
   Matches, Coach's corner and the loading cover keep their own look. */
:root{--navy:#13244a;--k1:#d4142c;--k1s:#bb1127;--kt:#fff;--ko:#13244a;--kp:#ffd23f;--kpt:#13244a;--ka:#d4142c;
  --kstripes:repeating-linear-gradient(115deg,var(--k1) 0 22px,var(--k1s) 22px 44px);--tabh:62px}
@media (max-height:520px){:root{--tabh:62px}}
/* Inside the menus the old wood and parchment colours turn white and navy, so every rule built on them follows. */
:is(body[data-tab],.roamhub,.sheet,.firstrun){--ink:#13244a;--ink-2:#46557a;--wood:#13244a;--wood-2:#13244a;--wood-d:#13244a;--parch:#fff;--parch-2:#fff}

/* Panels: white cards with a striped kit banner; the ones full of tiles (Levels' grid, the trophy cabinet) are
   striped all over, with the banner turned white. --tb is the outline for things inside: navy on white, --ko on
   the stripes. */
:is(body[data-tab],.roamhub,.sheet,.firstrun) .panel{--tb:var(--navy);background:#fff;color:var(--navy);border:3px solid var(--ko);border-radius:22px;box-shadow:0 6px 0 var(--ko);padding:20px 16px 16px}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .panel>.label:first-child{background:var(--kstripes);color:var(--kt);border:3px solid var(--ko);border-radius:12px;
  box-shadow:0 3px 0 var(--ko);text-shadow:none;font-size:19px}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .panel:is(:has(>.lvgrid),:has(>.cabinet)){--tb:var(--ko);background:var(--kstripes);color:var(--kt)}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .panel:is(:has(>.lvgrid),:has(>.cabinet))>.label:first-child{background:#fff;color:var(--navy)}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .label{color:var(--ink-2)}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .note{color:var(--ink-2)}
:is(body[data-tab],.roamhub,.sheet,.firstrun) :is(input,textarea){background:#fff;color:var(--navy);border-color:var(--navy);box-shadow:inset 0 2px 0 rgba(19,36,74,.1)}
/* Text on the stadium, outside any panel: white on a navy shadow. */
body[data-tab] .wrap>.note,body[data-tab] .wrap>p.note{color:#fff;text-shadow:0 1px 0 var(--navy),0 0 4px var(--navy)}

/* Tiles: levels, stages, pass tiers, choices, chips. White with navy text; the chosen one in the Play colour. */
:is(body[data-tab],.roamhub,.sheet,.firstrun) :is(.pick,.chip,.lv,.stg,.tier,.sw){background:#fff;color:var(--navy);border:3px solid var(--tb,var(--navy));box-shadow:0 4px 0 var(--tb,var(--navy))}
:is(body[data-tab],.roamhub,.sheet,.firstrun) :is(.pick,.chip,.lv,.stg)[aria-pressed="true"]{background:var(--kp);color:var(--kpt);border-color:var(--tb,var(--navy));
  box-shadow:0 0 0 3px #fff,0 0 0 6px var(--tb,var(--navy)),0 6px 0 6px var(--tb,var(--navy))}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .pick small{color:inherit;opacity:.85}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .lv.t2:not([aria-pressed="true"]):not(:disabled){background:linear-gradient(180deg,#f3f9ff,#d6ebfb)}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .lv.t3:not([aria-pressed="true"]):not(:disabled){background:linear-gradient(180deg,#faf5ff,#e8d9f8)}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .lv.fin:not([aria-pressed="true"]){border-color:#d49a00}
:is(body[data-tab],.roamhub,.sheet,.firstrun) :is(.lv,.stg):disabled{opacity:1;filter:none;background:rgba(255,255,255,.84);color:#55627d;box-shadow:none}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .lvstars{color:#f0a000;-webkit-text-stroke:.5px var(--navy)}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .lv[aria-pressed="true"] .lvstars{color:var(--kpt);-webkit-text-stroke:0}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .stages{border-bottom-color:color-mix(in srgb,var(--kt) 50%,transparent)}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .zone-tag{color:var(--navy)}
/* The trophy cabinet: the numbers on a white board inside the stripes. */
:is(body[data-tab],.roamhub,.sheet,.firstrun) .cabinet{background:#fff;color:var(--navy);border:2px solid var(--ko);border-radius:14px;padding:10px 6px}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .cabinet b{color:var(--navy);text-shadow:none}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .cabinet span{color:var(--ink-2)}
/* XP bars: a light sunken track with a navy rim. */
:is(body[data-tab],.roamhub,.sheet,.firstrun,.chestopen) .xpbar{background:linear-gradient(180deg,#b9c4d8,#dfe5ef 55%,#eef1f6);border-color:var(--navy);box-shadow:inset 0 3px 4px rgba(19,36,74,.35)}
/* Career Pass */
:is(body[data-tab],.roamhub,.sheet,.firstrun) .tier.ready{background:var(--kp);color:var(--kpt)}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .tier.ready :is(.ttype,.tstate){color:inherit}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .tnum{color:var(--ka);-webkit-text-stroke:0}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .tier.ready .tnum{color:var(--kpt)}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .rankrow{border-top-color:rgba(19,36,74,.2)}
/* Friends */
:is(body[data-tab],.roamhub,.sheet,.firstrun) .frow{background:#fff;box-shadow:0 4px 0 var(--navy)}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .fe-art{box-shadow:0 5px 0 var(--navy)}
/* Open Roam hub lists */
.roamhub .ltable td{border-bottom-color:rgba(19,36,74,.2)}
.roamhub :is(.statrow,.skrow){border-top-color:rgba(19,36,74,.2)}
.roamhub .spips i{background:#e3e8f1;border-color:var(--navy)}
.roamhub .ladder li{background:#fff;border-color:#c9d2e3}
.roamhub .ladder li.now{background:var(--kp);color:var(--kpt);border-color:var(--navy);box-shadow:0 3px 0 var(--navy)}
.roamhub .tpline b{color:var(--ka);-webkit-text-stroke:0}

/* Screen titles: big gold letters with a navy outline, like the logo, straight on the stadium (no plate). Gold, not
   the Play colour: on dark-shirted kits Play turns navy, which would vanish into the outline. */
:is(body[data-tab],.roamhub) .scr-title{background:none;border:0;box-shadow:none;padding:4px 6px 4px 0;color:#ffd23f;
  -webkit-text-stroke:6px var(--navy);paint-order:stroke fill;text-shadow:0 4px 0 var(--navy)}
:is(body[data-tab],.roamhub) .scr-title svg{color:#ffd23f;filter:drop-shadow(0 3px 0 var(--navy))}

/* Round chips over the stadium: your player, stars, cups, sound and the padlock. White with navy. */
.lb-me,.lb-stat,:is(body[data-tab],.roamhub,.sheet,.firstrun) .iconbtn{background:#fff;color:var(--navy);border:3px solid var(--ko);box-shadow:0 4px 0 var(--ko)}
.lb-me.frame-gold,.lb-me.frame-champ{border-color:#ffd23f}.lb-me.frame-holo{border-color:#7fe3ff}.lb-me.frame-bronze{border-color:var(--bronze)}.lb-me.frame-silver{border-color:var(--silver)}
.lb-me small em{-webkit-text-stroke:.6px var(--navy);paint-order:stroke fill}
.lb-stat.lb-streak{background:#fff;border-color:var(--ko)}
:is(body[data-tab],.roamhub,.sheet,.firstrun) .spk{background:#fff;color:var(--navy);border-color:var(--navy)}
/* The teammate's bubble, alerts, and the stadium scoreboard (a navy LED board, kit-outlined). */
.lb-bubble{border-color:var(--navy);box-shadow:0 4px 0 var(--navy);color:var(--navy)}
.lb-bubble::after{border-top-color:var(--navy)}
.lb-bubble>svg{background:var(--k1);color:var(--kt)}
.lb-alert{background:#fff;border-color:var(--ko);box-shadow:0 4px 0 var(--ko);color:var(--navy)}
.lb-alert svg{color:var(--navy)}
.lb-screen{border:3px solid var(--ko);box-shadow:inset 0 0 18px rgba(0,0,0,.6),0 4px 0 var(--ko)}

/* The logo: gold letters with a thick navy outline, the spinning ball between the words, the tagline on a ribbon
   in the kit's colour. (The loading cover keeps its own logo.) */
:is(.lb-logo,.firstrun .fr-logo) .lg-w{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:#ffd23f;color:#ffd23f;
  -webkit-text-stroke:.14em var(--navy);paint-order:stroke fill;filter:none;text-shadow:0 .1em 0 var(--navy),0 .16em 18px rgba(0,0,0,.35);padding:.1em .03em 0}
:is(.lb-logo,.firstrun .fr-logo) .lg-ball{filter:drop-shadow(0 .06em 0 var(--navy))}
:is(.lb-logo,.firstrun .fr-logo) .lg-tag{background:var(--k1);color:var(--kt);text-shadow:none;margin-top:.02em;filter:drop-shadow(0 3px 0 var(--ko)) drop-shadow(0 -2px 0 var(--ko))}

/* The sport and subject buttons, and the daily chest: white chips. */
.lb-mode{background:#fff;color:var(--navy);border:3px solid var(--ko);box-shadow:0 4px 0 var(--ko)}
.lb-mode:active{box-shadow:0 1px 0 var(--ko)}
.lobby .lb-chest,.lobby .lb-chest.done{background:#fff;color:var(--navy);border:3px solid var(--ko);box-shadow:0 4px 0 var(--ko)}
.lobby .lb-chest.done .lb-chest-t{color:var(--ink-2)}

/* Play: the Play colour with a navy rim and a diagonal-stripe sheen; the icon a navy disc with a Play-coloured
   arrow. It never shrinks below its icon and title. */
.lb-play{--c1:var(--kp);--c2:var(--kp);--edge:var(--ko);flex:none;min-height:76px;background:var(--kp);color:var(--kpt);border:3px solid var(--ko);
  box-shadow:0 7px 0 var(--ko),0 10px 16px rgba(0,0,0,.25)}
.lb-play::after{content:"";position:absolute;z-index:-1;left:auto;right:0;top:0;bottom:0;width:110px;height:auto;border-radius:0 23px 23px 0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.3) 0 10px,transparent 10px 20px) -20px 0/130px 100% no-repeat;pointer-events:none}
.lb-play>span{color:var(--kpt);text-shadow:none;line-height:1;padding-top:.06em}
.lb-play small{color:var(--kpt)}
.lb-play>svg{background:var(--kpt);box-shadow:0 3px 0 rgba(0,0,0,.25)}
.lb-play>svg path{fill:var(--kp);stroke:none}
.lb-play:active{box-shadow:0 1px 0 var(--ko)}
/* Open Roam: a striped kit button with the navy compass; its league and matchday on a white tag. */
.lb-roam{--edge:var(--ko);flex:none;background:var(--kstripes);color:var(--kt);border:3px solid var(--ko);box-shadow:0 6px 0 var(--ko),0 9px 14px rgba(0,0,0,.2);text-shadow:none}
.lb-roam::after{display:none}
.lb-roam>svg{background:transparent;padding:0;box-shadow:none;filter:drop-shadow(0 3px 0 var(--ko))}
.lb-roam small{margin-top:3px;padding:2px 8px;border-radius:8px;background:#fff;color:var(--navy);font-size:13px}
.lb-roam:active{box-shadow:0 1px 0 var(--ko)}

/* The tab bar: a striped kit band under a navy edge; the open tab hangs down from the edge as a white tab. */
.tabbar{background:linear-gradient(var(--ko) 0 4px,transparent 4px),var(--kstripes);border-top:0;box-shadow:0 -4px 14px rgba(0,0,0,.25);gap:2px}
.tab{color:var(--kt);text-shadow:none;font-size:13px;margin:4px 0 6px;border-radius:0 0 16px 16px;gap:3px}
.tab svg,.tab[data-tab] svg{width:28px;height:28px;color:currentColor;filter:none}
.tab[aria-current="page"]{color:var(--navy);background:#fff;border:0;margin:4px 0 6px;box-shadow:0 4px 0 var(--ko)}
.tab[aria-current="page"] svg{color:var(--ka)}
@media (max-height:520px){.tab{font-size:15px;margin:4px 0 6px}.tab svg,.tab[data-tab] svg{width:26px;height:26px}.tab[aria-current="page"]{margin:4px 0 6px}}

/* The Locker room and the Open Roam hub: the 3D room framed in the kit's outline, the tab panel with a striped
   tab strip and a white body. */
.cr-stage{border:3px solid var(--ko);box-shadow:0 6px 0 var(--ko),0 10px 16px rgba(0,0,0,.25)}
.cr-plate{background:#fff;color:var(--navy);border:3px solid var(--ko);box-shadow:0 4px 0 var(--ko)}
.cr-plate b{text-shadow:none;color:var(--navy)}.cr-plate span{color:var(--ink-2)}
:is(body[data-tab],.roamhub) .tpanel{background:#fff;border:3px solid var(--ko);box-shadow:0 6px 0 var(--ko),0 10px 16px rgba(0,0,0,.2)}
:is(body[data-tab],.roamhub) .tp-tabs{background:var(--kstripes);border-bottom:3px solid var(--ko)}
:is(body[data-tab],.roamhub) .tp-tab{color:var(--kt);text-shadow:none}
:is(body[data-tab],.roamhub) .tp-tab[aria-selected="true"]{background:#fff;color:var(--navy);box-shadow:none}
:is(body[data-tab],.roamhub) .tp-tab[aria-selected="true"] svg{color:var(--ka)}
:is(body[data-tab],.roamhub) .cr-tile{background:#fff;color:var(--navy);border-color:var(--navy);box-shadow:0 4px 0 var(--navy)}
:is(body[data-tab],.roamhub) .cr-tile[aria-pressed="true"]{background:var(--kp);color:var(--kpt);border-color:var(--navy);box-shadow:0 0 0 3px #fff,0 0 0 6px var(--navy),0 4px 0 6px var(--navy)}
:is(body[data-tab],.roamhub) .cr-tile[aria-pressed="true"] small{color:inherit}
:is(body[data-tab],.roamhub) :is(.cr-dot.none,.cr-dot.ring){background:#fff}
/* The Open Roam hub's next match: a striped kit card, its small print on white tags. */
.roamhub .matchcard{background:var(--kstripes);color:var(--kt);border:3px solid var(--ko);box-shadow:0 6px 0 var(--ko),0 10px 16px rgba(0,0,0,.2)}
.roamhub .mc-league{padding:3px 10px;border-radius:8px;background:#fff;color:var(--navy);font-size:14px}
.roamhub .mc-round{color:#ffd23f;-webkit-text-stroke:2px var(--navy);text-shadow:0 3px 0 var(--navy)}
.roamhub .mc-team b{padding:2px 8px;border-radius:8px;background:#fff;color:var(--navy);text-shadow:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roamhub .mc-v{color:var(--kt);-webkit-text-stroke:0;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.roamhub .mc-chip{background:#fff;color:var(--navy);border:2px solid var(--ko)}
.roamhub .mc-chip.warn{background:#ffd23f;color:var(--navy)}.roamhub .mc-chip.warn svg{color:var(--navy)}

/* Sheets: a striped kit card; the question and heading in big letters on the stripes, the choices as white tiles
   and any small print on white. */
.sheet{background:rgba(10,20,45,.6)}
.sheet-card{background:var(--kstripes);color:var(--kt);border:3px solid var(--ko);box-shadow:0 6px 0 var(--ko),0 10px 30px rgba(0,0,0,.45)}
.sheet-card :is(.sheet-h,.ask){color:var(--kt);text-shadow:0 2px 0 rgba(0,0,0,.18)}
.sheet-card .gate-note{background:#fff;color:var(--navy);border-radius:14px;padding:10px 14px;border:2px solid var(--ko)}
:is(.sheet,.firstrun) .bigpick{background:#fff;color:var(--navy);border:3px solid var(--ko);box-shadow:0 5px 0 var(--ko)}
:is(.sheet,.firstrun) .bigpick[aria-pressed="true"]{background:var(--kp);color:var(--kpt);box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ko),0 5px 0 6px var(--ko)}
:is(.sheet,.firstrun) .bigpick:active{box-shadow:0 1px 0 var(--ko)}
:is(.sheet,.firstrun) .bigpick.yr b{color:var(--ka);-webkit-text-stroke:0}
:is(.sheet,.firstrun) .bigpick.yr span{color:var(--ink-2)}
:is(.sheet,.firstrun) .bigpick[aria-pressed="true"] :is(b,span){color:inherit}
.firstrun .dots i{border-color:var(--navy)}.firstrun .dots i.on{background:#ffd23f;border-color:var(--navy)}
.firstrun .ask{text-shadow:0 2px 0 var(--navy),0 0 8px rgba(19,36,74,.5)}

/* The daily chest pop-up: navy strokes instead of brown, and its button in the Play colour. */
.chest-day{-webkit-text-stroke:2.5px var(--navy);filter:drop-shadow(0 4px 0 var(--navy))}
.chest-prize b{-webkit-text-stroke:3px var(--navy);filter:drop-shadow(0 5px 0 var(--navy))}
.chest-track i.on{color:var(--navy);border-color:#fff}
.chest-card .kickoff{--c1:var(--kp);--c2:var(--kp);--edge:var(--ko);color:var(--kpt);text-shadow:none;border-color:var(--ko);background:var(--kp);
  box-shadow:0 7px 0 var(--ko),0 10px 16px rgba(0,0,0,.25)}
.chest-card .kickoff::after{display:none}
.chest-card .kickoff:active{box-shadow:0 1px 0 var(--ko)}

/* Levels: Play stays in reach. Upright phones: after the trophy cabinet. Wide screens (the screen docked on the
   right): the level grid and cabinet scroll inside the column and Play sits pinned at its foot, above the tab bar. */
.lv-scroll{display:flex;flex-direction:column;gap:inherit;min-width:0}
.lv-scroll>.lb-modes{margin-bottom:-4px}
.lv-go{flex:none}
.lv-go .lb-play{width:100%;min-height:76px;padding:8px 18px 10px}
.lv-go .lb-play>span{font-size:clamp(34px,6vh,48px)}
.lv-go .lb-play>svg{width:54px;height:54px;padding:11px 9px 11px 13px}
@media (orientation:landscape) and (min-width:700px){
  body[data-tab=levels]{overflow:hidden}
  body[data-tab=levels] .wrap{box-sizing:border-box;overflow:hidden;gap:10px;
    height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    padding-bottom:calc(var(--tabh) + 14px)}
  body[data-tab=levels] .lv-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -8px;padding:0 8px 14px;gap:18px}
  body[data-tab=levels] .lv-go{position:static;padding:0}
  body[data-tab=levels] .lv-go .lb-play{width:100%;min-height:72px;padding:6px 18px 8px}
  body[data-tab=levels] .lv-go .lb-play>span{font-size:clamp(32px,7vh,46px)}
  body[data-tab=levels] .lv-go .lb-play>svg{width:50px;height:50px;padding:10px 8px 10px 12px}
}
@media (orientation:landscape) and (min-width:700px) and (max-height:520px){body[data-tab=levels] .lv-scroll{gap:12px}}
/* Home on short landscape screens (phones on their side): Play keeps its full height, so the stadium scoreboard
   steps aside to make room (as it does on upright phones). Elsewhere it never squashes. */
.lb-screen{flex:none}
@media (orientation:landscape) and (max-height:420px){.lb-screen{display:none}.lb-play{min-height:72px}}
/* Phones on their side (short landscape): everything a size down so it all fits with room to breathe. Smaller
   type, paddings and gaps (not a transform); Play keeps a height that fits its icon and title. */
@media (orientation:landscape) and (max-height:430px){
  :root{--tabh:52px}
  .tab{font-size:14px;margin:4px 0 5px}.tab svg,.tab[data-tab] svg{width:22px;height:22px}.tab[aria-current="page"]{margin:4px 0 5px}
  /* Home */
  .lobby{padding:6px 0 10px;column-gap:16px}
  .lb-me,.iconbtn{height:42px}.iconbtn{width:42px}.iconbtn svg{width:22px;height:22px}.lb-face{width:32px;height:32px}
  .lb-me b{font-size:16px}.lb-me small{font-size:12px}
  .lb-stat{height:36px;font-size:16px;padding:0 10px 0 5px}.lb-stat svg{width:22px;height:22px}
  .lb-go{gap:8px}
  .lb-mode{min-height:40px;font-size:15px;padding:2px 12px 2px 4px}.lb-mode svg{width:28px;height:28px}
  .lb-play{min-height:62px;padding:4px 14px 6px;gap:10px}.lb-play>svg{width:44px;height:44px;padding:9px 7px 9px 11px}
  .lb-play>span{font-size:32px}.lb-play small{font-size:12px}
  .lb-roam{min-height:46px;padding:3px 12px 5px;gap:8px}.lb-roam>svg{width:34px;height:34px}.lb-roam>span{font-size:18px}.lb-roam small{font-size:11px;margin-top:2px}
  .lobby .lb-chest{min-height:36px}.lb-chest-ic{width:34px;margin-top:-4px}.lb-chest-t{font-size:15px}
  .lb-bubble{font-size:13px;padding:4px 10px 4px 4px}.lb-bubble>svg{width:24px;height:24px;padding:4px}
  /* Screen tops, panels and tiles */
  :is(body[data-tab],.roamhub) .scr-title{font-size:22px;-webkit-text-stroke:5px var(--navy);text-shadow:0 3px 0 var(--navy)}
  :is(body[data-tab],.roamhub) .scr-title svg{width:24px;height:24px}
  .scr-top{margin-bottom:0}
  :is(body[data-tab],.roamhub) .panel{padding:16px 12px 12px;border-radius:18px;gap:10px}
  :is(body[data-tab],.roamhub) .panel>.label:first-child{font-size:15px;padding:5px 18px 4px;margin-top:-32px}
  :is(body[data-tab],.roamhub) .panel:has(>.label:first-child){margin-top:20px}
  .stg{font-size:15px;padding:3px 0}.stages{padding-bottom:10px;gap:6px}
  .lvgrid{gap:6px}.lv{padding:4px 2px}.lv b{font-size:18px}.lvstars{font-size:11px}
  .cabinet b{font-size:22px}.cabinet span{font-size:12px}
  /* Levels' Play, pinned at the foot of the column */
  body[data-tab=levels] .wrap{padding-top:8px;padding-bottom:calc(var(--tabh) + 10px);gap:8px}
  body[data-tab=levels] .lv-scroll{gap:10px;padding-bottom:10px}
  body[data-tab=levels] .lv-go .lb-play,.lv-go .lb-play{min-height:60px;padding:4px 14px 6px}
  body[data-tab=levels] .lv-go .lb-play>span,.lv-go .lb-play>span{font-size:30px}
  body[data-tab=levels] .lv-go .lb-play>svg,.lv-go .lb-play>svg{width:42px;height:42px;padding:9px 7px 9px 11px}
  /* Locker and the Open Roam hub */
  .creator{padding:6px 0 8px;gap:10px}
  .fitscreen{padding:6px 0 8px;gap:6px}
  .fs-main{gap:10px}
  .roamhub .matchcard{gap:4px;padding:6px 10px 8px}
  .roamhub .mc-league{font-size:12px;padding:2px 8px}.roamhub .mc-chip{font-size:12px;padding:3px 8px 3px 6px}.roamhub .mc-chip svg{width:20px;height:20px}
  .roamhub .mc-team svg{width:36px;height:36px}.roamhub .mc-team b{font-size:13px}.roamhub .mc-round{font-size:20px}.roamhub .mc-v{font-size:24px}
  .roamhub .matchcard .lb-play{min-height:60px;margin-top:2px}
  .tp-tab{padding:4px}.tp-tab svg{width:24px;height:24px}.tp-body{padding:10px 12px 12px;gap:10px}
  /* Friends' message, small enough to sit whole above the tab bar */
  .fempty{gap:6px}.fe-art{width:52px;height:52px;border-width:3px}.fe-art>svg:first-child{width:30px;height:30px}
  .fe-art>svg:nth-child(2),.fe-art>svg:nth-child(3){width:20px;height:20px}
  .fe-head{font-size:18px}.fempty p{font-size:14px;line-height:1.35;max-width:44ch}
}

/* ========================================================================================================= */
/* ---------- Game sizing: one standard ---------- */
/* Every match screen (level matches, Open Roam, the loading cover) sizes itself from these, so a phone on its side,
   a tablet and a laptop get the same layout, only smaller or bigger. They scale with the screen's short side (clamp
   on vmin), so a phone on its side and an upright phone size alike. Reuse them before adding a new size.
   --tap   the smallest touch target             --ctl   round buttons: leave, help, full screen, sound, read aloud, hints
   --stick the Open Roam joystick                --act   Pass and Shoot
   --hud-h the scorebug's row (its text scales from it)
   --fs-q  question text    --fs-opt  answer text    --fs-label  small labels (the skill chip, dot labels)
   --gap   space between things in a card        --pad   card padding */
:root{--tap:clamp(40px,11.5vmin,44px);--ctl:clamp(40px,11vmin,46px);--stick:clamp(88px,27vmin,120px);--act:clamp(56px,17vmin,64px);--hud-h:clamp(32px,10.5vmin,40px);
  --fs-q:clamp(15px,4.8vmin,24px);--fs-opt:clamp(14px,4.4vmin,20px);--fs-label:clamp(12px,3.6vmin,15px);--gap:clamp(4px,1.6vmin,12px);--pad:clamp(8px,2.4vmin,14px)}

/* ========================================================================================================= */
/* ---------- Kit Stripes in matches: a TV scorebug, a white question card, hints ---------- */
/* Level matches, friend challenges and Open Roam (.game.game: the class twice keeps these rules heavier than the
   older .game ones). Small text sits on white or navy, never on the stripes. */
/* The scorebug, pinned top-left: your kit, the score in a white box, the other team, and the pips under it. */
.game.game .board.bug{box-sizing:border-box;left:var(--gl);top:var(--gt);transform:none;width:auto;
  max-width:calc(100% - 114px - var(--gl) - var(--gr));display:flex;flex-direction:column;align-items:stretch;
  background:var(--navy);border:3px solid var(--navy);border-radius:12px;overflow:hidden;box-shadow:0 4px 0 rgba(10,20,45,.6),0 8px 18px rgba(0,0,0,.35);font-family:var(--ui)}
.bug-row{display:flex;align-items:stretch;height:var(--hud-h);min-width:0}
.bug-team{flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:6px;padding:0 10px;background:var(--k1);color:var(--kt);border-radius:9px 0 0 0}
.bug-team.away{background:var(--navy);color:#fff;border-radius:0}
.bug-team b{font-weight:400;font-size:calc(var(--hud-h) * .42);line-height:1.1;padding-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(var(--hud-h) * 4);min-width:2.5em}
.bug-team small{flex:none;font-family:var(--body);font-weight:700;font-size:13px}
.bug-team .fouls{min-height:0;margin:0;flex:none}
.bug-box{flex:none;display:flex;align-items:center;gap:6px;padding:0 12px;background:#fff;color:var(--navy)}
.bug-box b{font-family:var(--title);font-weight:400;font-size:calc(var(--hud-h) * .68);line-height:1;padding-top:4px;font-variant-numeric:tabular-nums;min-width:.6em;text-align:center}
.bug-box i{font-style:normal;font-size:18px;color:#46557a}
.bug-clock{flex:none;display:flex;align-items:center;padding:0 10px;background:var(--navy);border-left:2px solid #2c3d63}
.bug-stat{display:flex;align-items:center;gap:5px}
.bug-stat+.bug-stat{padding-left:8px;border-left:2px solid #d5dbe7}
.bug-stat small{font-size:11px;line-height:1.05;text-transform:uppercase;letter-spacing:.03em;color:#46557a;max-width:5.5em}
.bug-strip{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 8px 4px;background:linear-gradient(var(--k1) 0 3px,var(--navy) 3px);color:#fff;font-size:12px;line-height:1}
.bug-strip b{flex:none;font-weight:400;font-size:13px;white-space:nowrap}
.game.game .bug-strip .pips{display:flex;flex:0 1 auto;flex-wrap:nowrap;gap:4px;margin:0;min-width:0;overflow:hidden}
.game.game .bug .pip{flex:none;width:9px;height:9px;box-sizing:border-box;border:1.5px solid #8b9bbb;background:#2c3d63}
.game.game .bug .pip.hit{background:#7fe03a;border-color:#7fe03a}.game.game .bug .pip.miss{background:#ff6b5e;border-color:#ff6b5e}
.game.game .bug .pip.now{box-shadow:0 0 0 2px #ffd23f}
.bug-lv{margin-left:auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#c8d3ea}
@media (max-width:560px){.game.game .board.bug{max-width:calc(100% - 2 * var(--ctl) - 14px - var(--gl) - var(--gr))}.bug-stat small{font-size:10px;max-width:3.6em}.bug-box{padding:0 6px;gap:3px}.bug-team{padding:0 6px;gap:4px}.bug-clock{padding:0 6px}}
/* Upright narrow screens: a long name may take two lines (fitText in app.js then steps its size down to fit). */
@media (max-width:560px) and (orientation:portrait){.bug-team b{white-space:normal;line-height:1.05;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:normal}}
/* The leave button joins the round buttons on the right, so nothing sits on the scorebug. */
.game.game .gamebar{justify-content:flex-end;gap:6px}
.game.game #quit{order:2;align-self:flex-start}
/* Things that pop up on the pitch sit under the scorebug; the game clock moves to the left, under it. */
.game.game :is(.streak,.foul){top:var(--under)}
.game.game .streak{left:var(--gl)}
.game.game .gclock{top:var(--under);right:auto;left:var(--gl)}
.game.game .field:has(.gclock) .streak{top:calc(var(--under) + 62px)}

/* The question card: white with a navy rim, the skill on a striped kit banner, the helpers and speaker beside it.
   Nothing in it gets squashed: if it's too tall, it zooms to fit (fitAll in app.js). */
.game.game .qcard>*{flex-shrink:0}
.game.game .qcard{--ink:#13244a;--ink-2:#46557a;--wood:#13244a;--wood-2:#13244a;--wood-d:#13244a;--parch:#fff;--parch-2:#fff;
  box-sizing:border-box;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:20px;padding:0 var(--pad) var(--pad);gap:var(--gap);
  max-height:min(62%,calc(100% - (var(--under) + var(--gb)) / var(--zf,1)));box-shadow:0 6px 0 var(--navy),0 12px 28px rgba(0,0,0,.4)}
.game.game .qtop{position:sticky;top:0;z-index:2;margin:0 calc(-1 * var(--pad));padding:clamp(2px,1.2vmin,9px) 10px clamp(2px,1.2vmin,9px) 12px;background:var(--kstripes);border-bottom:3px solid var(--navy);border-radius:17px 17px 0 0}
.game.game .skill{min-width:0;padding:5px 12px 4px;border-radius:10px;background:#fff;color:var(--navy);border:2px solid var(--navy);font-size:var(--fs-label);line-height:1.15;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qtools{flex:none;display:flex;align-items:center;gap:10px}
.game.game :is(.speak,.qtool){position:relative;flex:none;width:var(--ctl);height:var(--ctl);padding:0;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--navy);
  border:3px solid var(--navy);box-shadow:0 3px 0 var(--navy);text-shadow:none;font-family:var(--ui);font-size:15px;line-height:1}
.game.game .speak svg{width:24px;height:24px}
.qtool svg{width:26px;height:26px}
.qtool.q50{width:auto;min-width:var(--ctl);padding:0 10px;border-radius:23px;letter-spacing:.02em}
.qcount{position:absolute;top:-8px;right:-8px;min-width:21px;height:21px;box-sizing:border-box;padding:0 5px;border-radius:11px;background:var(--navy);color:#fff;border:2px solid #fff;
  font:400 12px/17px var(--ui);font-style:normal;text-align:center}
.game.game :is(.speak,.qtool):active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--navy)}
.qtool:disabled{background:#e3e7ef;color:#55627d;border-color:#8994ab;box-shadow:none;cursor:default}
.qtool:disabled svg path:first-child{fill:#c4cad6}
.qtool:disabled .qcount{background:#6b7790}
.game.game .prompt{font-size:var(--fs-q);font-weight:800;line-height:1.28;color:var(--navy)}
.game.game .clue{margin:0;display:flex;align-items:flex-start;gap:8px;padding:clamp(4px,1.2vmin,8px) 12px;border-radius:12px;background:#fff6cc;border:2px solid #d49a00;color:var(--navy);font-size:calc(var(--fs-opt) * .88);font-weight:600;line-height:1.3}
.game.game .clue svg{flex:none;width:22px;height:22px;color:var(--navy)}
.game.game .move b{color:var(--navy)}
.game.game .qcard .passage{font-size:calc(var(--fs-opt) * .9);line-height:1.35;padding:clamp(3px,1vmin,10px) clamp(9px,2vmin,14px)}
/* Answers: big white buttons, each with a letter badge. The right one flashes green, a wrong one shakes red. */
.game.game .opt{display:flex;align-items:center;gap:clamp(7px,1.6vmin,10px);text-align:left;padding:clamp(3px,1vmin,8px) 10px clamp(3px,1vmin,8px) clamp(5px,1vmin,8px);min-height:min(60px,max(var(--tap),12vmin));font-size:var(--fs-opt);line-height:1.2;font-weight:700;color:var(--navy);
  background:#fff;border:3px solid var(--navy);border-radius:16px;box-shadow:0 4px 0 var(--navy);transition:transform .08s,opacity .25s}
.game.game .opt .ol{flex:none;width:calc(var(--fs-opt) * 1.7);height:calc(var(--fs-opt) * 1.7);display:grid;place-items:center;border-radius:calc(var(--fs-opt) * .5);background:var(--navy);color:#fff;font:400 calc(var(--fs-opt) * .9)/1 var(--ui);font-style:normal}
.game.game .opt>span{min-width:0;overflow-wrap:anywhere}
.game.game .opt:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--navy)}
.game.game .opt:disabled:not(.right):not(.wrong){opacity:.5}
.game.game .opt.gone{opacity:.25;box-shadow:none;border-style:dashed;text-decoration:line-through}
.game.game .opt.right{background:#d8f5d0;border-color:#1e7b30;box-shadow:0 4px 0 #1e7b30;animation:optright .7s ease-out}
.game.game .opt.right .ol{background:#1e7b30}
.game.game .opt.wrong{background:#ffe0dc;border-color:#b3261e;box-shadow:0 4px 0 #b3261e;animation:optwrong .45s ease-in-out}
.game.game .opt.wrong .ol{background:#b3261e}
@keyframes optright{0%{background:#8fe36b;box-shadow:0 4px 0 #1e7b30,0 0 0 0 rgba(46,180,70,.8)}100%{box-shadow:0 4px 0 #1e7b30,0 0 0 14px rgba(46,180,70,0)}}
@keyframes optwrong{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
/* Spelling scrambles: gold letter tiles with navy, white slots that turn green or red. */
.game.game .tile{background:#ffd23f;color:var(--navy);border-color:var(--navy);box-shadow:0 4px 0 var(--navy)}
.game.game .slot{background:#fff;color:var(--navy)}
.game.game .slots.right .slot{background:#d8f5d0;border-color:#1e7b30;color:var(--navy)}
.game.game .slots.wrong .slot{background:#ffe0dc;border-color:#b3261e;color:var(--navy)}
.game.game .slots.wrong{animation:optwrong .45s ease-in-out}
/* Just answered: the answers stay up for a moment (see renderQ), then the card shrinks to the result. */
.game.game .qcard[data-done]{padding:var(--pad)}
.game.game .qcard.reveal[data-done] .prompt{display:block}
.game.game .qcard.reveal[data-done] .opts{display:grid}
.game.game .qcard.reveal[data-done] .slots{display:flex}
.game.game .qcard.reveal #fb{display:none}
.game.game .qcard[data-done]:not(.reveal) .clue{display:none}
.game.game .feedback{color:var(--navy)}
.game.game .feedback.good{background:#e6f7e2;border-color:#1e7b30}
.game.game .feedback.bad{background:#fff1e6;border-color:#c25e00}
.game.game .qcard .next{--c1:var(--kp);--c2:var(--kp);--edge:var(--navy);color:var(--kpt);text-shadow:none;background:var(--kp);border-color:var(--navy);box-shadow:0 5px 0 var(--navy)}
.game.game .qcard .next::after{display:none}
.game.game .qcard .next:active{box-shadow:0 1px 0 var(--navy)}
/* The result card's button (Next move, Try the move again, Full time): centred under the text, a size smaller,
   with room above it. */
.game.game .feedback #after{display:flex;flex-direction:column;gap:inherit}
.game.game .feedback #after:empty{display:none}
.game.game .qcard .next{align-self:center;margin-top:10px;min-width:min(220px,80%);font-size:19px;padding:8px 20px}
@media (prefers-reduced-motion:reduce){.game.game :is(.opt.right,.opt.wrong,.slots.wrong){animation:none}}
/* Sideways: the card on the right under the round buttons, never past the bottom; the scorebug keeps clear of it. */
@media (orientation:landscape) and (min-width:600px){
  .game.game .qcard{top:calc((var(--gt) + var(--ctl) + 8px) / var(--zf,1));width:min(420px,46%);
    max-height:calc(100% - (var(--gt) + var(--ctl) + 8px + var(--gb)) / var(--zf,1))}
  .game.game .board.bug{max-width:calc(54% - 30px - var(--gl))}
}
/* Short screens (a phone on its side): a slimmer scorebug and a tighter card. */
@media (max-height:520px){
  .bug-team{padding:0 8px}.bug-team small{font-size:12px}.bug-box{padding:0 10px}
  .bug-strip{padding:5px 8px 3px}
  .game.game :is(.streak,.foul,.gclock){top:var(--under)}
  .game.game .field:has(.gclock) .streak{top:calc(var(--under) + 54px)}
  .game.game .skill{padding:4px 10px 3px}.qtool.q50{font-size:14px}
  /* The move on one line, so the question, a clue and all four answers fit without scrolling */
  .game.game .qcard .move{font-size:13px;line-height:1.3;padding:4px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game.game .qcard .move b{display:inline;margin-right:6px}
}

/* ---------- Career Pass: a season pass that pops up over the stadium ---------- */
/* Like the Locker, it fills the screen above the tab bar and the players stay put behind it: a striped header with
   your rank and tier, the reward track scrolling sideways, and the rank rewards in a white list. */
.seasonpass{box-sizing:border-box;width:100%;max-width:1180px;margin:0 auto;padding:10px 0 16px;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:14px;
  height:calc(100vh - var(--tabh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));height:calc(100dvh - var(--tabh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
.seasonpass>*{min-width:0;animation:popin .45s cubic-bezier(.3,1.5,.5,1) backwards}
.seasonpass>:nth-child(2){animation-delay:.06s}.seasonpass>:nth-child(3){animation-delay:.12s}
.sp-head{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:20px;background:var(--kstripes);border:3px solid var(--ko);box-shadow:0 6px 0 var(--ko),0 10px 16px rgba(0,0,0,.25)}
.sp-head>.badge{filter:drop-shadow(0 3px 0 var(--ko))}
.sp-plate{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px;padding:6px 14px 7px;border-radius:14px;background:#fff;color:var(--navy);border:3px solid var(--ko)}
.sp-kick{font-family:var(--ui);font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#46557a}
.sp-rank{font-family:var(--title);font-weight:400;font-size:32px;line-height:1;padding-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-sub{font-size:14px;color:#46557a}.sp-sub b{color:var(--navy)}
.sp-tier{flex:0 1 320px;min-width:0;display:flex;flex-direction:column;gap:5px;padding:8px 14px 9px;border-radius:14px;background:var(--navy);color:#fff;border:3px solid var(--ko)}
.sp-tierno{font-family:var(--ui);font-size:17px;line-height:1}.sp-tierno b{font-weight:400;font-size:28px;color:#ffd23f}
.sp-tier .xpbar{height:14px}
.sp-xp{font-size:13px;color:#d6deef}
.sp-trackbox{display:flex;flex-direction:column;gap:6px;padding:10px 0 4px;border-radius:20px;background:var(--navy);border:3px solid var(--ko);box-shadow:0 6px 0 var(--ko),0 10px 16px rgba(0,0,0,.25)}
.sp-trackhead{display:flex;align-items:center;gap:10px;padding:0 12px}
.sp-h{font-family:var(--ui);font-size:20px;line-height:1.1;color:#fff}
.sp-msg{flex:1 1 auto;min-width:0;margin:0;font-size:14px;color:#d6deef}
.sp-all,.sp-lk{flex:none;min-height:44px;padding:0 16px;border-radius:14px;font-family:var(--ui);font-size:17px;border:3px solid #fff;box-shadow:0 4px 0 rgba(0,0,0,.4)}
.sp-all{background:var(--kp);color:var(--kpt)}
.sp-lk{background:#fff;color:var(--navy);font-size:15px}
:is(.sp-all,.sp-lk):active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.sp-track{position:relative;gap:12px;padding:10px 12px 14px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
body[data-tab] .sp-track .tier{position:relative;flex:0 0 140px;min-height:188px;box-sizing:border-box;padding:10px 10px 12px;gap:5px;align-items:center;text-align:center;scroll-snap-align:center;
  border-radius:16px;background:#fff;color:var(--navy);border:3px solid #fff;box-shadow:0 4px 0 rgba(0,0,0,.4);opacity:1}
body[data-tab] .sp-track .tnum{width:34px;height:34px;flex:none;border-radius:50%;background:var(--navy);color:#fff;font:400 19px/36px var(--title);-webkit-text-stroke:0}
.sp-track .tart{height:40px;display:grid;place-items:center;color:var(--navy)}
.sp-track .tart svg:not(.pat){width:36px;height:36px}
.sp-track .tart .dot{width:32px;height:32px;border-color:var(--navy)}.sp-track .tart .pat{width:36px;height:38px;border-color:var(--navy)}
body[data-tab] .sp-track .ttype{font-size:11px;color:#46557a}
.sp-track .tier b{font-size:15px;line-height:1.2}
body[data-tab] .sp-track .tstate{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:#46557a}
.sp-track .tstate svg{width:14px;height:14px}
body[data-tab] .sp-track .tier.got{background:#e9eef6}
body[data-tab] .sp-track .tier.got .tstate{color:#17692a}
body[data-tab] .sp-track .tier.locked .tart{opacity:.55}
body[data-tab] .sp-track .tier.ready{background:#fff;color:var(--navy);border-color:#ffd23f;box-shadow:0 4px 0 rgba(0,0,0,.4),0 0 18px rgba(255,210,63,.75)}
body[data-tab] .sp-track .tier.ready .ttype{color:#46557a}
body[data-tab] .sp-track .tier.ready .tnum{background:#ffd23f;color:var(--navy)}
.sp-track .claim{--c1:var(--kp);--c2:var(--kp);--edge:var(--navy);width:100%;min-height:44px;margin-top:auto;padding:6px 8px;font-size:19px;color:var(--kpt);text-shadow:none;background:var(--kp);box-shadow:0 4px 0 var(--navy)}
.sp-track .claim::after{display:none}
.sp-track .claim:active{box-shadow:0 1px 0 var(--navy)}
body[data-tab] .sp-track .tier.now{outline:4px solid #ffd23f;outline-offset:3px}
.sp-ranks{min-height:0;display:flex;flex-direction:column;gap:4px;padding:10px 14px 0;border-radius:20px;background:#fff;color:var(--navy);border:3px solid var(--ko);box-shadow:0 6px 0 var(--ko)}
.sp-ranks .sp-h{color:var(--navy)}
.sp-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));column-gap:20px;align-content:start;padding-bottom:10px}
body[data-tab] .sp-list .rankrow{opacity:1;border-top:2px solid rgba(19,36,74,.15)}
.sp-list .rankrow:not(.got) .badge{opacity:.6}
.sp-list .rankrow .pc-text b{font-size:20px}
@media (max-width:620px){.sp-head{flex-wrap:wrap}.sp-tier{flex:1 1 100%}.sp-rank{font-size:26px}.sp-kick{font-size:12px}}
@media (prefers-reduced-motion:reduce){.seasonpass>*{animation:none}}
/* Phones on their side: a slimmer header and track; the rank rewards scroll up from under them. */
@media (orientation:landscape) and (max-height:520px){
  .seasonpass{grid-template-rows:auto auto auto;overflow-y:auto;overscroll-behavior:contain;padding:6px 0 10px;gap:8px}
  .sp-head{padding:4px 8px;gap:8px;border-radius:16px}.sp-head>.badge{width:36px;height:36px}
  .sp-plate{padding:3px 10px 4px;gap:0;border-width:2px}.sp-kick{display:none}.sp-rank{font-size:20px}.sp-sub{font-size:12px}
  .sp-tier{padding:4px 10px 5px;gap:3px;border-width:2px}.sp-tierno{font-size:14px}.sp-tierno b{font-size:18px}.sp-tier .xpbar{height:9px}.sp-xp{font-size:12px}
  .sp-trackbox{padding:4px 0 0;gap:0;border-radius:16px}.sp-h{font-size:16px}.sp-msg{font-size:12px}
  .sp-all,.sp-lk{min-height:40px;font-size:14px;padding:0 12px;border-width:2px}
  .sp-track{padding:6px 10px 8px;gap:10px}
  body[data-tab] .sp-track .tier{flex-basis:118px;min-height:0;padding:6px 8px 7px;gap:3px}
  body[data-tab] .sp-track .tnum{width:22px;height:22px;font-size:13px;line-height:24px}
  .sp-track .tart{height:24px}.sp-track .tart svg:not(.pat){width:22px;height:22px}.sp-track .tart .dot{width:20px;height:20px}.sp-track .tart .pat{width:22px;height:23px}
  body[data-tab] .sp-track .ttype{display:none}.sp-track .tier b{max-width:100%;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sp-track .claim{min-height:40px;font-size:16px;padding:4px 8px}body[data-tab] .sp-track .tstate{font-size:12px;white-space:nowrap}
  .sp-ranks{padding:8px 12px 0;border-radius:16px}.sp-list{overflow:visible}
}

/* ========================================================================================================= */
/* ---------- Kit Stripes in Open Roam: its extras on top of the match rules above ---------- */
/* The scorebug's clock, the kick-off banner, How to play, fouls and shouts, the controls, the win-it-back card
   and full time. Open Roam plays in the soccer kit (kitTheme(soccerKit()) in roamNow). */
.game .bug-clock .rclock{font-size:calc(var(--hud-h) * .52);line-height:1;padding-top:3px;color:#ffd23f}
.game.roam .bug-lv{margin-left:0;color:#fff}
/* Kick-off banner and fouls: white cards with a navy rim under the scorebug. */
.game.roam .intro{top:var(--under);gap:0;padding:0;overflow:hidden;background:#fff;color:var(--navy);border:3px solid var(--navy);box-shadow:0 4px 0 var(--navy),0 8px 16px rgba(0,0,0,.3)}
.game.roam .intro b{align-self:stretch;padding:clamp(3px,1vmin,6px) 16px;font-size:calc(var(--fs-q) * .9);background:var(--kstripes);color:var(--kt);border-bottom:3px solid var(--navy)}
.game.roam .intro span{padding:clamp(4px,1.2vmin,6px) 16px clamp(5px,1.4vmin,8px);font-size:var(--fs-label);font-weight:600}
.game.roam .foul{background:#fff;border:3px solid var(--navy);box-shadow:0 5px 0 var(--navy)}
.game.roam .foul b{-webkit-text-stroke-color:var(--navy)}
.game.roam .foul span{color:#46557a}
.game.roam .shout{-webkit-text-stroke-color:var(--navy);text-shadow:0 5px 0 var(--navy)}
.game.roam .shout.miss{text-shadow:0 4px 0 var(--navy)}
/* How to play: a white panel with a striped kit banner, and Play-coloured Let's play. */
/* Like the question card it fits whole: under the scorebug, wide on a screen on its side with the tips in two
   columns, sized from the tokens. */
.game.roam .tips{--ink:#13244a;--ink-2:#46557a;--wood:#13244a;--wood-2:#13244a;--wood-d:#13244a;--parch:#fff;--parch-2:#fff;background:#fff;color:var(--navy);
  --tt:calc(var(--gt) + var(--hud-h) + 29px);top:calc(var(--tt) / var(--zf,1));transform:translateX(-50%);width:min(880px,calc(100% - 24px / var(--zf,1)));max-height:calc(100% - (var(--tt) + var(--gb)) / var(--zf,1));
  box-sizing:border-box;margin:0;border:3px solid var(--navy);border-radius:20px;box-shadow:0 6px 0 var(--navy),0 12px 28px rgba(0,0,0,.4);padding:0 var(--pad) var(--pad);gap:var(--gap);font-size:calc(var(--fs-opt) * .85)}
.game.roam .tips>.label:first-child{position:sticky;top:0;align-self:stretch;max-width:none;margin:0 calc(-1 * var(--pad));padding:clamp(4px,1.4vmin,9px) 16px;border-radius:17px 17px 0 0;border:0;border-bottom:3px solid var(--navy);
  background:var(--kstripes);color:var(--kt);text-shadow:none;box-shadow:none;font-size:calc(var(--fs-q) * .85)}
.game.roam .tips :is(.chal,.note){font-size:inherit;padding-top:clamp(3px,1vmin,8px);padding-bottom:clamp(3px,1vmin,8px)}
.game.roam .tips ul{display:block;columns:2 210px;column-gap:20px;font-size:inherit;line-height:1.25}
.game.roam .tips li{break-inside:avoid;margin-bottom:clamp(2px,.8vmin,6px)}
@media (orientation:landscape) and (max-height:420px){.game.roam .tips .note{display:none}}
@media (orientation:landscape) and (max-height:340px){.game.roam .tips .chal{display:none}}
/* Touch screens have no keyboard, so its line (the last tip) goes. */
@media (hover:none) and (pointer:coarse){.game.roam .tips li:last-child{display:none}}
.game.roam .tips .kickoff{align-self:center;min-width:min(260px,100%);min-height:var(--tap);padding:2px 24px;font-size:calc(var(--fs-q) * 1.05)}
.game.roam .tips .chal{background:#fff6cc;border:2px solid #d49a00;color:var(--navy)}
.game.roam .tips ul{color:var(--navy)}
:is(.game.roam .tips,.ftkit) .kickoff{--c1:var(--kp);--c2:var(--kp);--edge:var(--navy);color:var(--kpt);text-shadow:none;border-color:var(--navy);background:var(--kp);box-shadow:0 6px 0 var(--navy)}
:is(.game.roam .tips,.ftkit) .kickoff::after{display:none}
:is(.game.roam .tips,.ftkit) .kickoff:active{box-shadow:0 1px 0 var(--navy)}
/* The joystick: a see-through ring with a white rim, the knob in the kit's colour. Sized by --stick. */
.game.roam .roamfield .stickzone .stick{width:var(--stick);height:var(--stick);background:radial-gradient(circle,rgba(255,255,255,.55) 0 28%,rgba(19,36,74,.38) 29% 100%);border:4px solid #fff;
  box-shadow:0 0 0 3px var(--navy),inset 0 4px 10px rgba(0,0,0,.3)}
.game.roam .stick i{box-sizing:border-box;width:calc(var(--stick) * .44);height:calc(var(--stick) * .44);margin:calc(var(--stick) * -.22) 0 0 calc(var(--stick) * -.22);
  background:var(--k1);border:4px solid #fff;box-shadow:0 0 0 3px var(--navy),0 5px 0 3px var(--navy)}
/* Pass white, Shoot in the Play colour, both navy-rimmed round buttons sized by --act; the skills as white pills. */
.game.roam .acts-main{gap:calc(var(--act) * .2)}
.game.roam .acts-main .btn{box-sizing:border-box;width:var(--act);height:var(--act);min-width:0;min-height:0;padding:0;border-radius:50%;font-size:calc(var(--act) * .27)}
.game.roam .acts .btn{--edge:var(--navy);opacity:1;border:3px solid var(--navy);text-shadow:none;box-shadow:0 5px 0 var(--navy),0 8px 14px rgba(0,0,0,.3)}
.game.roam .acts .btn::after{display:none}
.game.roam .acts .btn:active{box-shadow:0 1px 0 var(--navy)}
.game.roam #passB,.game.roam .skbtns .btn{--c1:#fff;--c2:#fff;background:#fff;color:var(--navy)}
.game.roam .shootb{--c1:var(--kp);--c2:var(--kp);background:var(--kp);color:var(--kpt)}
.game.roam .shootb .power{left:22%;right:22%;bottom:15%;height:5px;background:rgba(19,36,74,.25)}
.game.roam .shootb .power i{background:var(--kpt)}
.game.roam .skbtns .btn{min-width:0;min-height:var(--tap);padding:0 12px;border-radius:999px;font-size:calc(var(--act) * .24);box-shadow:0 4px 0 var(--navy),0 6px 10px rgba(0,0,0,.25)}
.game.roam .skbtns .btn.cooling{background:#e3e7ef;color:#55627d;border-color:#8994ab;box-shadow:none}
.game.roam .roamfield .autopill{bottom:calc(var(--stick) + 12px);font-size:var(--fs-label);background:var(--navy);border:2px solid #fff;box-shadow:0 3px 0 rgba(0,0,0,.3)}
.game.roam .swin{background:var(--navy);border:3px solid #fff;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.game.roam .swin b{-webkit-text-stroke-color:#0a1530;text-shadow:0 3px 0 #0a1530}
/* The card: the skill banner on top, then Win it back! (or Shoot!) and the right / miss dots. */
.game.roam .winback{align-items:baseline;column-gap:10px;row-gap:0}
.game.roam .winback b{font-family:var(--ui);font-size:calc(var(--fs-q) * 1.1);color:var(--navy);-webkit-text-stroke:0;white-space:nowrap}
.game.roam .winback span{font-size:var(--fs-label);font-weight:600;color:#46557a}
.game.roam .wbdots{justify-content:space-between;gap:6px 14px}
.game.roam .wbdots>span{margin:0;display:flex;align-items:center;gap:5px;font-family:var(--ui);font-size:calc(var(--fs-label) * .9);letter-spacing:.04em;text-transform:uppercase;color:#46557a}
.game.roam .wbdots i{box-sizing:border-box;width:calc(var(--fs-opt) * 1.1);height:calc(var(--fs-opt) * 1.1);background:#fff;border:3px solid var(--navy)}
.game.roam .wbdots i.on{background:#1e7b30;border-color:#1e7b30}
.game.roam .wbdots .danger i{width:calc(var(--fs-opt) * .8);height:calc(var(--fs-opt) * .8);border-width:2px}
.game.roam .wbdots .danger i.on{background:#b3261e;border-color:#b3261e}
.game.roam .winback .wbdots{flex:1 1 100%}
.game.roam .qcard[data-done] .winback b{font-size:var(--fs-q)}
.game.roam .qcard:not([hidden])~.intro{display:none}
/* Full time (Open Roam's and levels'): a white card with a striped banner, the score on a navy board, results on
   light tints. */
.ftkit{--ink:#13244a;--ink-2:#46557a;--wood:#13244a;--wood-2:#13244a;--wood-d:#13244a;--parch:#fff;--parch-2:#fff;background:#fff;color:var(--navy);
  border:3px solid var(--ko);box-shadow:0 6px 0 var(--ko),0 10px 16px rgba(0,0,0,.2)}
.ftkit.panel>.label{background:var(--kstripes);color:var(--kt);border:3px solid var(--ko);box-shadow:0 3px 0 var(--ko);text-shadow:none;font-size:19px}
.ftkit h2{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:#ffd23f;color:#ffd23f;-webkit-text-stroke:6px var(--navy);paint-order:stroke fill;
  filter:none;text-shadow:0 4px 0 var(--navy)}
.ftkit .scoreline{background:var(--navy);border:3px solid var(--ko);box-shadow:0 4px 0 rgba(0,0,0,.25)}
.ftkit .unlock{background:#e6f7e2;border-color:#1e7b30;color:var(--navy);text-shadow:none}
.ftkit .unlock.trophy{background:#fff6cc;border-color:#d49a00}
.ftkit .unlock.sentoff{background:#ffe0dc;border-color:#b3261e}
.ftkit .chalres.done,.ftkit .xprow b{color:#17692a}
.ftkit .tpgain b,.ftkit .xprow.total b,.ftkit .xptotal{color:var(--navy);-webkit-text-stroke:0}
.ftkit .xpgain{background:#fff;border-color:var(--navy)}
.ftkit .xpbar{background:linear-gradient(180deg,#b9c4d8,#dfe5ef 55%,#eef1f6);border-color:var(--navy);box-shadow:inset 0 3px 4px rgba(19,36,74,.35)}
.ftkit .ghost{--c1:#fff;--c2:#fff;--edge:var(--navy);background:#fff;color:var(--navy);text-shadow:none;box-shadow:0 5px 0 var(--navy)}
.ftkit .ghost::after{display:none}
/* The hub: the tab panel ends with a gap above the screen's edge, like the match card beside it. */
.roamhub.fitscreen{padding-bottom:22px}
/* Train: +1 buttons in the Play colour (grey until you can afford them). */
.roamhub [data-stat]{--c1:var(--kp);--c2:var(--kp);--edge:var(--navy);flex:none;background:var(--kp);color:var(--kpt);border-color:var(--navy);text-shadow:none;box-shadow:0 4px 0 var(--navy);min-height:44px}
.roamhub [data-stat]::after{display:none}
.roamhub [data-stat]:active{box-shadow:0 1px 0 var(--navy)}
.roamhub [data-stat]:disabled{background:#e3e7ef;color:#55627d;border-color:#8994ab;box-shadow:none}
.roamhub .tpline svg{color:var(--navy)}
@media (max-height:520px){
  .bug-clock{padding:0 8px}
}

/* ---------- One pop-up rule: the question card always fits ---------- */
/* The tokens do the sizing; this places the card. On a phone on its side (and the short heights a browser leaves with
   its address bar showing) the card sits on the right under the round buttons, the answers 2 by 2 (long ones wrap
   inside their button), and nothing scrolls. A reading passage, or sentence-long answers on a narrow phone, get a
   wide card under the scorebug instead, the passage on the left. --qt and --qwide are the two card tops. */
@media (orientation:landscape) and (max-height:520px){
  .game.game{--qw:min(460px,max(50%,300px));--qt:calc(var(--gt) + var(--ctl) + 6px);--qwide:calc(var(--gt) + var(--hud-h) + 29px);
    --qww:min(780px,calc(100% - var(--gl) - var(--gr)));--qb:var(--gb)}
  .game.game .qcard{left:auto;right:calc(var(--gr) / var(--zf,1));bottom:auto;transform:none;width:var(--qw);animation:sheetin .25s ease-out;
    top:calc(var(--qt) / var(--zf,1));max-height:calc(100% - (var(--qt) + var(--qb)) / var(--zf,1))}
  .game.game .board.bug{max-width:calc(100% - var(--qw) - 20px - var(--gl) - var(--gr))}
  /* A card or foul pops up under the scorebug, beside the question card rather than behind it. */
  .game.game .foul{left:var(--gl);right:auto;margin:0;max-width:calc(100% - var(--qw) - 20px - var(--gl) - var(--gr))}
  .game.game .qcard .opts{gap:var(--gap)}
  .game.game .qcard .feedback{font-size:var(--fs-opt);padding:8px 10px;gap:6px}
  .game.game .qcard .next{font-size:17px;padding:6px 18px}
  .game.game .qcard:has(>.passage){display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);align-content:start;column-gap:10px;
    width:min(780px,calc(100% - (var(--gl) + var(--gr)) / var(--zf,1)));top:calc(var(--qwide) / var(--zf,1));max-height:calc(100% - (var(--qwide) + var(--qb)) / var(--zf,1))}
  .game.game .qcard:has(>.passage)>*{grid-column:1/-1}
  .game.game .qcard:has(>.passage)>.passage{grid-column:1;grid-row:span 2;align-self:start;max-width:none}
  .game.game .qcard:has(>.passage)>:is(.prompt,.opts){grid-column:2}
  .game.game .qcard[data-done]:not(.reveal):has(>.passage){display:flex;width:var(--qw);top:calc(var(--qt) / var(--zf,1));max-height:calc(100% - (var(--qt) + var(--qb)) / var(--zf,1))}
}
/* Any screen on its side: the answers always 2 by 2. */
@media (orientation:landscape){.game.game .qcard .opts{grid-template-columns:1fr 1fr}.game.game .qcard .opt.long{grid-column:auto}}
/* Upright screens: the card rises from the bottom as far as the round buttons' column, answers 2 by 2 unless long. */
@media (orientation:portrait){
  .game.game .qcard{max-height:calc(100% - (var(--gt) + 3 * var(--ctl) + 26px + var(--gb)) / var(--zf,1))}
  .game.game .qcard .opts{grid-template-columns:1fr 1fr}
}
/* Narrow phones on their side: every card sits under the scorebug (which gets the width beside the round buttons),
   and sentence-long answers get the wide card. */
@media (orientation:landscape) and (max-height:520px) and (max-width:760px){
  .game.game{--qt:var(--qwide);--qw:min(460px,max(64%,360px))}
  .game.game .board.bug{max-width:calc(100% - 4 * var(--ctl) - 26px - var(--gl) - var(--gr))}
  .game.game .qcard:has(.opt.long){width:min(780px,calc(100% - (var(--gl) + var(--gr)) / var(--zf,1)))}
  .game.game .qcard[data-done]:not(.reveal):has(.opt.long){width:var(--qw)}
}
/* The very shortest: Win it back! and its dots share one line, without the reason; a famous goal's move line steps
   aside while a clue is showing (the pips on the scorebug still count the moves). */
@media (orientation:landscape) and (max-height:380px){
  .game.game .qcard:has(.clue) .move{display:none}
  .game.game .qcard .clue{line-height:1.2}.game.game .qcard .clue svg{width:18px;height:18px}
  .game.roam .qcard .winback{flex-wrap:nowrap;align-items:center}
  .game.roam .qcard .winback>span{display:none}
  .game.roam .qcard .winback .wbdots{flex:0 1 auto;margin-left:auto;flex-wrap:nowrap;gap:10px}
  .game.roam .wbdots>span{gap:3px}
}
/* ...and on narrow phones the Right / Misses words become a tick and a cross, so the line still fits. */
@media (orientation:landscape) and (max-height:380px) and (max-width:700px){
  .game.roam .qcard .wbdots>span{font-size:0}
  .game.roam .qcard .wbdots>span::before{font:400 15px/1 var(--ui);margin-right:1px}
  .game.roam .qcard .wbdots .hits::before{content:"✓";color:#1e7b30}.game.roam .qcard .wbdots .danger::before{content:"✗";color:#b3261e}
}
/* Full time on the sizing standard: the player and headline scale with the screen, and on screens held sideways the
   result sits beside the details (which scroll if they must) so the whole card fits the screen. */
.ft.ftkit{gap:var(--gap)}
.ftkit .ft-hero,.ftkit .ft-body{gap:var(--gap)}
.ftkit .ftplayer .mini{width:clamp(72px,24vmin,132px);height:clamp(96px,32vmin,176px)}
.ftkit .ftplayer::before{width:clamp(110px,34vmin,180px)}
.ftkit h2{font-size:clamp(30px,11vmin,60px)}
.ftkit .result{font-size:var(--fs-q)}
.ftkit .stars svg{width:clamp(24px,8vmin,38px);height:clamp(24px,8vmin,38px)}
/* A missed star on the white card: a pale outline, so it doesn't read as a filled one. */
.ftkit .stars svg.off path{fill:#e3e8f1;stroke:#9aa6bd;stroke-width:1.4;stroke-linejoin:round}
.ftkit .ft-body>.row:last-child .kickoff{font-size:clamp(22px,7.5vmin,32px);min-height:calc(var(--tap) + 16px)}
.ftkit .ft-body>.row:last-child>:not(.kickoff){font-size:var(--fs-opt);min-height:var(--tap)}
@media (orientation:landscape) and (min-width:560px){
  /* Rows: a rank-up (if any), the banner, then the two columns, which take what height is left. */
  #app:has(>.ftkit){padding-bottom:12px}
  .ft.ftkit{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto auto minmax(0,1fr);row-gap:0;
    column-gap:calc(var(--pad) * 2);align-items:center;max-width:min(900px,100%);
    max-height:calc(100dvh - 56px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
  .ftkit>.label,.ftkit>.rankup{grid-column:1/-1}.ftkit>.rankup{margin-bottom:var(--gap)}
  .ftkit .ft-hero,.ftkit .ft-body{grid-row:3}
  .ftkit .ft-body{align-self:stretch;min-height:0;overflow:auto;padding:4px 4px 0}
  .ftkit .ft-body>.row:last-child{position:sticky;bottom:0;background:#fff;padding:6px 0 4px;margin-top:0}
}

/* Why a wrong answer is wrong, on the result card, with a button to hear it again */
.why{display:grid;grid-template-columns:1fr auto;column-gap:8px;align-items:start;background:#fff8d6;border:2px dashed #d9a400;border-radius:12px;padding:8px 10px;color:var(--navy,#13244a)}
.why b{grid-column:1;font-size:.85em;letter-spacing:.04em;text-transform:uppercase;color:#8a5a00}
.why span{grid-column:1;line-height:1.35}
.why .whysay{grid-column:2;grid-row:1/span 2;align-self:center;padding:6px 10px}
/* The card steps aside while a move plays on the pitch, then comes back with the result */
.game .qcard.aside{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s linear .25s}
.game .qcard{transition:opacity .25s ease}
.voicepick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.voicepick .pick{padding:10px;font-size:16px}

/* Live penalty shootout */
.livewait{text-align:center}
.liveball{font-size:56px;animation:livebounce 1s ease-in-out infinite}
@keyframes livebounce{50%{transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.liveball{animation:none}}
.game .liverole{display:block}
.game .liverole .ltime{font-variant-numeric:tabular-nums}
.livemsg{margin:0;font-size:18px}
.lwait{margin:4px 0 0;font-size:.9em;opacity:.8}
.game.live .bug-strip .pips{display:flex;flex-direction:column;gap:3px}
.game.live .lrow{display:flex;gap:3px}
.corners{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.shoot.corner{font-size:18px;padding:12px 6px}
.shoot.corner.picked{outline:4px solid #fff;outline-offset:2px}
.game.game .liverole{left:50%;right:auto;transform:translateX(-50%);top:var(--gt);white-space:nowrap;z-index:7}

/* Full time on one screen: XP on one line, and the famous moment as a button that opens its story */
.xpgain.xpline{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 12px}
.xpline .label{margin:0}.xpline .xptotal{font-size:20px}
.xpline .xpto,.xpline .xpnew{display:flex;align-items:center;gap:8px;font-size:14px;margin-left:auto}
.xpline .xpto .xpbar{display:block;width:70px;height:10px}
.goalbtn{font:inherit;cursor:pointer;width:100%;align-items:flex-start}
.goalbtn .goalmore{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-family:var(--ui);font-size:16px;color:#c05a00}
.goalbtn .goalmore svg{width:18px;height:18px}
.goalbtn:active{transform:translateY(2px)}
.goalstory{border:0;box-shadow:none;padding:4px 0}
.goalstory ol{font-size:16px}
/* A long list that can't fit: a big "More" arrow at the bottom that scrolls it a page */
.morebtn{position:sticky;bottom:6px;left:0;margin:6px auto 0;display:flex;align-items:center;gap:6px;z-index:5;
  padding:8px 18px;border-radius:999px;border:3px solid var(--navy,#13244a);background:#ffd23f;color:#13244a;font-family:var(--ui);font-size:17px;
  box-shadow:0 4px 0 var(--navy,#13244a);animation:morebob 1.2s ease-in-out infinite;cursor:pointer;flex:none}
.morebtn i{font-style:normal}
.morebtn.gone{visibility:hidden}
@keyframes morebob{50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.morebtn{animation:none}}
.morebtn.pagemore{position:fixed;left:50%;bottom:calc(max(10px,env(safe-area-inset-bottom,0px)) + 64px);transform:translateX(-50%);margin:0;z-index:60}
@keyframes morebobx{50%{transform:translate(-50%,4px)}}
.morebtn.pagemore{animation-name:morebobx}
.sheet-card .ghost svg,.goalbtn svg{width:20px;height:20px;flex:none}
.sheet-card .ghost{display:inline-flex;align-items:center;gap:8px}
/* Full time on a phone held sideways: everything on one screen */
@media (orientation:landscape) and (max-height:520px){
  .ft{gap:6px;padding-top:12px;padding-bottom:10px}
  .ft-hero,.ft-body{gap:6px}
  .ft h2{font-size:40px}
  .ft .result{font-size:17px}
  .ft .stars svg{width:24px;height:24px}
  .ft-body>.note{display:none}
  .ft .lvstars.big{font-size:22px;margin:0}
  .goalbtn{padding:6px 12px;gap:0}.goalbtn .gtitle{font-size:19px}.goalbtn .goalmore{margin-top:0;font-size:14px}
  .ft .unlock{padding:4px 10px;margin:0;font-size:15px}
  .xpgain.xpline{padding:4px 10px}
  .ft .tpgain{display:none}
  .ft-body>.row:last-child .kickoff{flex:1 1 auto;font-size:22px;min-height:48px;padding:6px 12px}
  .ft-body>.row:last-child{flex-wrap:nowrap}
  .ft-body>.row:last-child>:not(.kickoff){flex:0 1 auto;font-size:14px;padding:8px}
  .ftplayer .mini,.ft-hero .mini{height:120px;width:auto}
}
/* Career pass on mid-size screens (small tablets): when the rank list would be squeezed to nothing, the whole pass
   scrolls instead, with its More arrow, as on phones. */
@media (max-height:760px){
  .seasonpass{grid-template-rows:auto auto auto;overflow-y:auto;overscroll-behavior:contain}
  .sp-list{overflow:visible}
}
@media (orientation:landscape) and (max-height:520px){
  .fjoin{display:grid;grid-template-columns:1.1fr 1fr;column-gap:22px;align-items:start}
  .fjoin>.label{grid-column:1/-1}
  .fjoin{padding-top:12px;padding-bottom:10px}
  .fjoin>p:not(.note){grid-column:1;font-size:13.5px;line-height:1.35;margin:2px 0}
  .fjoin>.flist{grid-column:1;font-size:12.5px;line-height:1.3;margin:4px 0}
  .fjoin>.flist li{margin:2px 0}
  .fjoin>#gate,.fjoin>.note,.fjoin>#tocoach{grid-column:2;grid-row:2/span 2}
}
/* The frame rate counter (Coach's corner → More), off by default. */
#fpsm{position:fixed;z-index:9999;top:calc(env(safe-area-inset-top,0px) + 4px);left:50%;transform:translateX(-50%);pointer-events:none;
  font:600 12px/1.2 ui-monospace,Menlo,Consolas,monospace;color:#8dff8d;background:rgba(0,0,0,.7);padding:3px 8px;border-radius:8px;white-space:nowrap}
/* A goal's celebration: confetti, the scorer's banner, and a tap anywhere to bring the card back early. */
.celeb-confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.celeb-banner{position:absolute;z-index:4;left:max(4%,var(--gl,0px));bottom:16%;display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none;
  transform-origin:left center;animation:bannerin .5s cubic-bezier(.2,1.5,.4,1) .2s backwards,bannerout .4s ease-in 3.8s forwards}
.celeb-banner b{font-family:var(--title);font-weight:400;font-size:clamp(40px,8vw,76px);line-height:.95;color:var(--yellow);-webkit-text-stroke:3px #3a1d05;paint-order:stroke fill;text-shadow:0 5px 0 #3a1d05}
.celeb-banner span{font-family:var(--ui);font-size:clamp(15px,2.6vw,22px);color:#fff;background:var(--navy,#13244a);padding:6px 14px;border-radius:10px;border:2px solid rgba(255,255,255,.85);box-shadow:0 4px 0 rgba(0,0,0,.3)}
@keyframes bannerin{from{opacity:0;transform:translateX(-40px) scale(.8)}}
@keyframes bannerout{to{opacity:0;transform:translateX(-30px)}}
.celeb-skip{position:absolute;inset:0;z-index:5;background:none;border:0;padding:0 0 var(--gb,16px);display:flex;align-items:flex-end;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.celeb-skip span{font-family:var(--ui);font-size:17px;color:#fff;background:rgba(10,25,40,.62);padding:8px 18px;border-radius:999px;border:2px solid rgba(255,255,255,.8);animation:fadein .4s ease 1.6s backwards}
.ltable tr.down td:first-child{color:#c62828;font-weight:700}
/* Open Roam: the shot chance, a pill over the top of the Shoot button. */
.shootb .chance{position:absolute;z-index:2;right:-2px;top:-16px;padding:3px 9px;border-radius:12px;border:2px solid var(--navy);
  font-family:var(--ui);font-weight:400;font-size:13px;line-height:1.1;white-space:nowrap;pointer-events:none;box-shadow:0 2px 0 var(--navy);color:#fff}
.shootb .chance[hidden]{display:none}
.shootb .chance.big{background:#22a447}.shootb .chance.half{background:#ffc928;color:var(--navy)}.shootb .chance.long{background:#e2342d}

/* ========================================================================================================= */
/* ---------- Levels and the Career pass on solid panels; the tab rail on phones on their side ---------- */
/* Levels and the Career pass scroll inside a solid navy panel (scrollPanel in app.js), with a fade along the bottom
   while there's more below instead of a More arrow. Upright phones: a strip of the stadium on top (a fifth of the
   screen) that the panel slides up over, its title bar sticking at the top and adding the league or your rank.
   Phones on their side: the tab bar is a rail down the left; Levels splits into the stadium (left, next to the
   rail) and the panel (right) with a round Play in its corner; the Career pass is one panel, the rank rewards along
   the same track as the tier rewards after a yellow divider. Tablets and laptops on their side keep their layouts. */
:root{--slab:#13213a}
.hero3d,.hdr-sub,.fadeb,.seasonpass>.hdrbar,.sp-track>:is(.sp-div,.rankcard){display:none}
.lv-body,.sp-body{display:contents}
.sp-body>*{min-width:0}
.hdr-sub{min-width:0;flex:0 1 auto;font-family:var(--ui);font-size:17px;line-height:1.2;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:3px}
.fadeb{position:relative;z-index:3;height:0;pointer-events:none}
.fadeb::before{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(rgba(19,33,58,0),var(--slab) 85%);transition:opacity .2s}
.fadeb.gone::before{opacity:0}
/* The rank rewards on the track: the yellow divider, then a white card for each rank. */
.sp-div{flex:none;align-items:center;justify-content:center;width:26px;margin:0 4px;border-radius:13px;background:#ffd23f;box-shadow:0 4px 0 rgba(0,0,0,.4)}
.sp-div span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--ui);font-size:13px;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);white-space:nowrap}
.rankcard{flex:0 0 200px;box-sizing:border-box;grid-template-columns:auto minmax(0,1fr);align-content:start;column-gap:8px;row-gap:3px;padding:8px 10px 10px;border-radius:16px;
  background:#fff;color:var(--navy);border:3px solid #fff;box-shadow:0 4px 0 rgba(0,0,0,.4);scroll-snap-align:center;font-size:12px;line-height:1.3}
.rankcard>.badge{grid-row:1/span 2;align-self:center}
.rankcard>b{align-self:end;min-width:0;font-family:var(--ui);font-weight:400;font-size:17px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rankcard>.rk-at{font-weight:600;color:#46557a}
.rankcard.got>.rk-at{color:#17692a}
.rankcard:not(.got)>.badge{opacity:.6}
.rankcard>span:not(.rk-at){grid-column:1/-1;color:#46557a}
.rankcard>span b{color:var(--navy)}

/* Upright: the stadium strip, then the panel sliding up over it. */
@media (orientation:portrait){
  body:is([data-tab=levels],[data-tab=pass]){overflow:hidden;--hero:calc(20vh - env(safe-area-inset-top,0px))}
  body:is([data-tab=levels],[data-tab=pass]) #app{box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;max-width:none;margin:0;padding:0;gap:0;
    height:calc(100vh - var(--tabh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));height:calc(100dvh - var(--tabh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
  body[data-tab=levels] #stageframe{top:env(safe-area-inset-top,0px);height:var(--hero)}
  #app>[data-fade]{flex:1;min-height:0;height:auto;width:100%;max-width:none;margin:0;padding:0;display:block;overflow-y:auto;overscroll-behavior:contain;
    background:linear-gradient(transparent calc(var(--hero) + 22px),var(--slab) 0) local}
  #app>[data-fade]>.hero3d{display:block;height:var(--hero)}
  #app>[data-fade]>.hdrbar{display:flex;position:sticky;top:0;z-index:3;margin:0;min-height:54px;box-sizing:border-box;padding:6px 14px;gap:8px;
    background:var(--slab);border-radius:22px 22px 0 0;transition:border-radius .2s,box-shadow .2s}
  #app>[data-fade]>.hdrbar.stuck{border-radius:0;box-shadow:0 6px 10px rgba(0,0,0,.3)}
  #app:has(>[data-fade]>.hdrbar.stuck)::before{content:"";position:fixed;z-index:5;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:var(--slab)}
  #app>[data-fade]>.hdrbar .scr-title{flex:none;font-size:24px}
  #app>[data-fade]>.hdrbar .scr-title svg{width:26px;height:26px}
  #app>[data-fade]>.hdrbar.stuck .hdr-sub{display:block}
  #app>[data-fade] :is(.lv-body,.sp-body){display:flex;flex-direction:column;gap:14px;padding:4px 14px 30px}
  #app>.fadeb{display:block}
  body[data-tab=levels] #app .lv-go{flex:none;position:static;padding:8px 14px 12px;background:var(--slab)}
  body[data-tab=levels] #app .lv-go .lb-play{width:100%;min-height:52px;padding:2px 16px 4px 6px;gap:10px;border-radius:20px;box-shadow:0 5px 0 var(--ko),0 8px 12px rgba(0,0,0,.25)}
  body[data-tab=levels] #app .lv-go .lb-play>svg{width:40px;height:40px;padding:8px 6px 8px 10px}
  body[data-tab=levels] #app .lv-go .lb-play>span{font-size:28px}
  body[data-tab=levels] #app .lv-go .lb-play small{font-size:12px}
  .seasonpass .sp-kick{display:none}
  .seasonpass .sp-ranks{min-height:auto}
  .seasonpass .sp-list{overflow:visible}
}

/* Phones on their side: the rail, and the screens beside it. Nothing takes height off the bottom any more
   (--tabh is 0), so the Lobby, Locker and the rest gain the bar's height. */
@media (orientation:landscape) and (max-height:620px){
  :root{--tabh:0px;--rail:calc(64px + env(safe-area-inset-left,0px))}
  .tabbar{top:0;right:auto;bottom:0;width:52px;height:auto;flex-direction:column;justify-content:center;gap:4px;
    padding:calc(env(safe-area-inset-top,0px) + 6px) 8px calc(env(safe-area-inset-bottom,0px) + 6px) calc(env(safe-area-inset-left,0px) + 4px);
    background:linear-gradient(270deg,var(--ko) 0 4px,transparent 4px),var(--kstripes);box-shadow:4px 0 14px rgba(0,0,0,.25)}
  .tab,.tab[aria-current="page"]{flex:1 1 0;max-height:62px;min-height:0;min-width:0;max-width:none;margin:0;padding:0 2px;flex-direction:column;gap:3px;font-size:11px;border-radius:14px}
  .tab svg,.tab[data-tab] svg{width:24px;height:24px}
  .tab[aria-current="page"]{box-shadow:0 3px 0 var(--ko)}
  .tabdot{top:1px;right:-1px;left:auto;min-width:18px;height:18px;padding:0 4px;font-size:11px;line-height:14px}
  body[data-tab] #app{padding-left:calc(var(--rail) + 12px)}
  #stageframe{left:var(--rail)}
  /* Levels: the stadium on the left, the panel on the right, Play in its corner. */
  body[data-tab=levels]{overflow:hidden}
  body[data-tab=levels] #stageframe{top:env(safe-area-inset-top,0px);bottom:env(safe-area-inset-bottom,0px);right:auto;height:auto;width:calc((100vw - var(--rail)) * .35)}
  body[data-tab=levels] #app{position:fixed;top:0;bottom:0;right:0;left:calc(var(--rail) + (100vw - var(--rail)) * .35);height:auto;max-width:none;margin:0;box-sizing:border-box;
    padding:calc(env(safe-area-inset-top,0px) + 8px) max(12px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) 12px;
    display:flex;flex-direction:column;gap:0;overflow:hidden;background:var(--slab);box-shadow:-6px 0 16px rgba(0,0,0,.3)}
  body[data-tab=levels] #app .lv-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;
    column-gap:8px;row-gap:10px;margin:0 -6px;padding:0 6px 70px}
  body[data-tab=levels] #app .hdrbar{grid-column:1;grid-row:1;min-width:0;margin:0}
  body[data-tab=levels] #app .lv-body>.lb-modes{grid-column:2;grid-row:1;align-self:center;margin:0}
  body[data-tab=levels] #app .lv-body>.panel{grid-column:1/-1}
  /* The league's grid fits above Play: its name sits in a row with the league buttons, the levels in two rows. */
  body[data-tab=levels] #app .lv-body>.panel:has(>.lvgrid){display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 10px;margin-top:0;padding:10px 10px 12px}
  body[data-tab=levels] #app .lv-body>.panel:has(>.lvgrid)>.label:first-child{grid-column:1;margin:0;max-width:none;padding:5px 12px 4px;font-size:14px;white-space:nowrap}
  body[data-tab=levels] #app .lv-body>.panel>.stages{grid-column:2;margin:0;padding:0;border:0;gap:6px}
  body[data-tab=levels] #app .lv-body>.panel>.lvgrid{grid-column:1/-1;padding-top:10px;border-top:2px dashed color-mix(in srgb,var(--kt) 50%,transparent)}
  body[data-tab=levels] #app .lv-body>.panel:has(>.lvgrid){container-type:inline-size}
  body[data-tab=levels] #app>.fadeb{display:block}
  body[data-tab=levels] #app .lv-go{position:absolute;z-index:4;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 10px);padding:0;display:block}
  body[data-tab=levels] #app .lv-go .lb-play{width:auto;min-height:48px;padding:2px 18px 4px 4px;gap:8px;border-radius:999px;box-shadow:0 5px 0 var(--ko),0 8px 14px rgba(0,0,0,.4)}
  body[data-tab=levels] #app .lv-go .lb-play>svg{width:40px;height:40px;padding:8px 6px 8px 10px}
  body[data-tab=levels] #app .lv-go .lb-play>span{font-size:24px}
  body[data-tab=levels] #app .lv-go .lb-play small{font-size:11px}
  /* The Career pass: one panel. Rank and tier on top, then one track: tier rewards, the divider, rank rewards. */
  body[data-tab=pass] #app .seasonpass{position:fixed;top:0;bottom:0;right:0;left:var(--rail);width:auto;height:auto;max-width:none;margin:0;box-sizing:border-box;
    padding:calc(env(safe-area-inset-top,0px) + 8px) max(12px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 12px) 12px;
    display:flex;flex-direction:column;gap:0;overflow:hidden;background:var(--slab)}
  body[data-tab=pass] .sp-body{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
  body[data-tab=pass] .sp-head{flex:none}
  body[data-tab=pass] .sp-trackbox{flex:1;min-height:0;padding:0;gap:2px;background:none;border:0;border-radius:0;box-shadow:none}
  body[data-tab=pass] .sp-trackhead{padding:0 2px}
  body[data-tab=pass] .sp-track{flex:1;min-height:0;overflow-y:hidden;align-items:stretch;margin:0 -4px;padding:6px 4px 10px}
  body[data-tab=pass] .sp-ranks{display:none}
  body[data-tab=pass] .sp-track>.sp-div{display:flex}
  body[data-tab=pass] .sp-track>.rankcard{display:grid}
}
/* Narrower phones on their side: a panel too narrow for ten levels a row shows five. */
@container (max-width:380px){body[data-tab=levels] #app .lv-body>.panel>.lvgrid{grid-template-columns:repeat(5,1fr)}}
/* Friends on a phone on its side: the column on the right, the players between it and the rail. */
@media (orientation:landscape) and (max-height:620px) and (min-width:700px){
  body[data-tab=friends] #app{padding-left:16px}
  body[data-tab=friends] #stageframe{width:calc(100vw - var(--rail) - min(560px,52vw) - 24px)}
}

/* ========================================================================================================= */
/* ---------- Full time, counted up (levels and Open Roam; ftCount in app.js) ---------- */
/* The score on the match's scorebug, the headline beside your player, the level's three stars landing one at a time,
   then the XP: each line counts into the total and the pass bar. A big Next, Replay and Home under it. Sized from the
   tokens so the card fits a phone either way up without scrolling, and kept 10px clear of the phone's bars. */
#app:has(>.ftx){padding-left:calc(env(safe-area-inset-left,0px) + 10px);padding-right:calc(env(safe-area-inset-right,0px) + 10px);padding-bottom:12px}
.ft.ftx{gap:var(--gap);padding:var(--pad) calc(var(--pad) + 4px) calc(var(--pad) + 6px);text-align:center}
.ftx.panel>.label:first-child{margin-top:calc(-1 * var(--pad) - 20px);margin-bottom:0;padding:5px 22px 4px;font-size:clamp(15px,4.4vmin,19px)}
.ftx .ft-hero,.ftx .ft-body{gap:var(--gap);align-items:stretch}
/* The score: the scorebug as it was at the whistle. */
.ftbug{display:flex;justify-content:center;min-width:0}
.ftbug .bug-row{max-width:100%;border:3px solid var(--navy);border-radius:12px;overflow:hidden;background:var(--navy);box-shadow:0 4px 0 rgba(10,20,45,.35);font-family:var(--ui);text-align:left}
.ftbug .bug-team{border-radius:0}
.ftbug .bug-team b{max-width:none}
/* Your player beside the headline and how it went. */
.ftx .ft-top{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:clamp(8px,2.4vmin,16px)}
.ftx .ftplayer{padding-bottom:4px}
.ftx .ftplayer .mini{width:clamp(52px,16vmin,92px);height:clamp(70px,21vmin,122px)}
.ftx .ftplayer::before{width:clamp(70px,22vmin,120px);height:26px}
.ftx .ft-head{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;min-width:0}
.ftx h2{font-size:clamp(30px,9.5vmin,52px);line-height:1;margin:0}
.ftx .ft-head .result{font-family:var(--body);font-weight:700;font-size:var(--fs-label);line-height:1.3;color:var(--navy);margin:0}
.ftx .ftcard{width:30px;height:42px;align-self:flex-start;margin-bottom:2px}
/* The level's stars: empty, then each lands with a thud (the middle one sits higher). */
.ftstars{display:flex;justify-content:center;align-items:flex-end;gap:clamp(6px,2.4vmin,16px);padding-top:4px}
.fst{display:block;line-height:0}
.fst svg{width:clamp(34px,10.5vmin,54px);height:clamp(34px,10.5vmin,54px);filter:drop-shadow(0 3px 0 rgba(19,36,74,.25))}
.fst:nth-child(2) svg{width:clamp(40px,12.5vmin,64px);height:clamp(40px,12.5vmin,64px);margin-bottom:6px}
.fst.on svg{filter:drop-shadow(0 3px 0 #7a3a00)}
.fst.land svg{animation:starland .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes starland{from{transform:scale(2.6) rotate(-35deg);opacity:0}55%{transform:scale(.88) rotate(6deg);opacity:1}to{transform:none}}
.ftx .hintcap{margin:0 auto;font-size:13px}
/* The famous goal's story: a small button that opens it. */
.ftgoal{align-self:center;display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:36px;box-sizing:border-box;padding:4px 14px;border-radius:999px;cursor:pointer;
  background:#fff6cc;border:2px solid #d49a00;color:var(--navy);font:600 var(--fs-label)/1.2 var(--body);box-shadow:0 3px 0 #d49a00}
.ftgoal span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftgoal b{font-family:var(--ui);font-weight:400}
.ftgoal svg{flex:none;width:18px;height:18px}
.ftgoal:active{transform:translateY(2px);box-shadow:0 1px 0 #d49a00}
/* The XP: a white box with each line, the total and the pass bar. */
.ftxp{display:flex;flex-direction:column;gap:clamp(3px,1vmin,6px);padding:clamp(6px,1.6vmin,10px) clamp(10px,2.6vmin,14px);border-radius:14px;background:#fff;border:3px solid var(--navy);box-shadow:0 4px 0 rgba(19,36,74,.2);text-align:left}
.ftrows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ftrows li{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-weight:700;font-size:var(--fs-label);line-height:1.25;color:var(--navy);transition:opacity .25s,transform .25s}
.ftrows li small{font-weight:600;font-size:.85em;color:#46557a}
.ftrows li b{font-family:var(--ui);font-weight:400;font-size:1.1em;color:#17692a;font-variant-numeric:tabular-nums}
.ftx.counting .ftrows li:not(.on){opacity:0;transform:translateX(-10px)}
.fttot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-top:4px;border-top:2px dashed #c9d2e3}
.fttot span{font-family:var(--ui);font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;color:#46557a}
.fttot b{font-family:var(--title);font-weight:400;font-size:clamp(22px,6.4vmin,32px);line-height:1;padding-top:3px;color:var(--navy);font-variant-numeric:tabular-nums}
.ftbar{display:flex;align-items:center;gap:8px;min-height:28px}
.ftbar .xpbar{flex:1 1 auto;min-width:50px;height:14px}
.ftbar .xpbar i{transition:width .08s linear}
.ftlab{flex:none;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#46557a;white-space:nowrap}
.ftlab b{font-family:var(--ui);font-weight:400;font-size:15px;color:#17692a}
.ftx.tierup .ftbar .xpbar{animation:tierpop .6s ease-out}
@keyframes tierpop{40%{transform:scale(1.05);box-shadow:0 0 0 4px rgba(255,210,63,.8)}}
.ftclaim{min-height:28px;padding:2px 12px;border-radius:999px;background:var(--kp);color:var(--kpt);border:2px solid var(--navy);box-shadow:0 3px 0 var(--navy);font:400 14px/1 var(--ui);cursor:pointer}
.ftclaim:active{transform:translateY(2px);box-shadow:0 1px 0 var(--navy)}
.ftnote{margin:0;font-size:var(--fs-label);font-weight:600;line-height:1.3;color:#46557a}
.ftnote b{font-family:var(--ui);font-weight:400;color:var(--navy)}
.ftx .unlock{padding:5px 10px;font-size:var(--fs-label);display:flex;align-items:center;justify-content:center;gap:8px}
.ftx .unlock svg{flex:none;width:28px;height:28px}
.ftx .ft-body>.note{margin:0 auto;font-size:var(--fs-label)}
.ftx .chalres{font-size:var(--fs-label);line-height:1.3}
/* Next: big, in the Play colour; Replay and Home under it. */
.ftbtns{display:flex;flex-wrap:wrap;gap:8px}
.ftbtns>*{margin:0}
.ft.ftx .ftbtns .kickoff{flex:1 1 100%;font-size:clamp(22px,7vmin,30px);min-height:calc(var(--tap) + 14px);padding:4px 14px}
.ft.ftx .ftbtns .ghost{flex:1 1 0;font-size:var(--fs-opt);min-height:var(--tap);padding:4px 10px}
@media (prefers-reduced-motion:reduce){.fst.land svg{animation:none}.ftrows li{transition:none}.ftx.tierup .ftbar .xpbar{animation:none}}
/* On its side: the score and stars on the left, the XP and buttons on the right, all on one screen. */
@media (orientation:landscape) and (min-width:560px){
  #app:has(>.ftx){padding-top:8px;max-width:900px}
  /* The banner sits on the card's top edge instead of taking a row. */
  .ft.ftx{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-rows:auto;column-gap:calc(var(--pad) * 2);
    align-items:center;max-width:min(860px,100%);max-height:none;padding-top:calc(var(--pad) + 12px)}
  #app>.ft.ftx{margin-top:19px}
  .ftx.panel>.label:first-child{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);margin:0;white-space:nowrap}
  .ftx .ft-hero,.ftx .ft-body{grid-row:1;align-self:center;overflow:visible;padding:0}
  .fttot b{font-size:clamp(20px,6vmin,26px)}
  .ftbar{min-height:24px}
  .ftx .unlock{padding:3px 10px}
  .ftx .ft-body>.ftbtns{position:static;padding:0;background:none}
  .ft.ftx .ftbtns{flex-wrap:nowrap}
  .ft.ftx .ftbtns .kickoff{flex:2 1 auto;font-size:clamp(20px,6vmin,26px);min-height:var(--tap);padding:4px 12px}
  .ft.ftx .ftbtns .ghost{flex:1 1 0;padding:4px 8px}
  /* Two lines of XP side by side, so the box stays short. */
  .ftrows{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .ftrows li{white-space:nowrap}
  .ft.ftx .ftbtns>*{white-space:nowrap}
  .ftnote{font-size:13px}
}
@media (orientation:landscape) and (max-height:400px){
  .ftx .ftplayer .mini{width:48px;height:64px}
  .ftx h2{font-size:34px}
  .fst svg{width:34px;height:34px}.fst:nth-child(2) svg{width:40px;height:40px;margin-bottom:4px}
  .ftx .ft-body>.ftnote{display:none}
  .ftgoal{min-height:32px;padding:2px 12px}
  /* The total and the pass bar share a line. */
  .ftxp{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px}
  .ftrows{grid-column:1/-1}
  .fttot span{display:none}
  .fttot b::after{content:" XP";font-size:.6em}
  .ftbar{border-top:2px dashed #c9d2e3;padding-top:4px}
}

/* ---------- Up next: a Kit Stripes wipe between levels (levelWipe in app.js) ---------- */
/* The stripes sweep across on a slant, a white plate with the next level rides in on them, then they sweep on off
   the screen and the match is underneath. The whole screen is the skip button. */
.lvwipe{position:fixed;inset:0;z-index:120;display:grid;place-items:center;margin:0;border:0;border-radius:0;cursor:pointer;color:var(--navy);
  padding:calc(env(safe-area-inset-top,0px) + 12px) calc(env(safe-area-inset-right,0px) + 12px) calc(env(safe-area-inset-bottom,0px) + 12px) calc(env(safe-area-inset-left,0px) + 12px);
  background:var(--kstripes);clip-path:polygon(0 0,115% 0,100% 100%,-15% 100%);animation:wipein .4s cubic-bezier(.7,0,.25,1) both;-webkit-tap-highlight-color:transparent}
.lvwipe.out{animation:wipeout .4s cubic-bezier(.75,0,.3,1) both}
@keyframes wipein{from{clip-path:polygon(0 0,0 0,-15% 100%,-15% 100%)}to{clip-path:polygon(0 0,115% 0,100% 100%,-15% 100%)}}
@keyframes wipeout{from{clip-path:polygon(0 0,115% 0,100% 100%,-15% 100%)}to{clip-path:polygon(115% 0,115% 0,100% 100%,100% 100%)}}
.lvw-plate{display:flex;flex-direction:column;align-items:center;gap:2px;max-width:min(520px,100%);box-sizing:border-box;padding:clamp(10px,3vmin,18px) clamp(18px,6vmin,36px) clamp(12px,3.4vmin,20px);
  border-radius:22px;background:#fff;border:4px solid var(--navy);box-shadow:0 7px 0 var(--navy),0 14px 30px rgba(0,0,0,.35);text-align:center;animation:platein .55s .1s cubic-bezier(.3,1.4,.5,1) both}
.lvwipe.out .lvw-plate{animation:plateout .4s cubic-bezier(.7,0,.3,1) both}
@keyframes platein{from{transform:translateX(-60vw) skewX(-10deg)}to{transform:none}}
@keyframes plateout{to{transform:translateX(60vw) skewX(-10deg)}}
.lvw-kick{font-family:var(--ui);font-size:clamp(14px,4vmin,18px);letter-spacing:.1em;text-transform:uppercase;color:#46557a}
.lvw-lv{font-family:var(--title);font-weight:400;font-size:clamp(40px,13vmin,68px);line-height:1;padding-top:4px;color:#ffd23f;-webkit-text-stroke:6px var(--navy);paint-order:stroke fill;text-shadow:0 4px 0 var(--navy)}
.lvw-name{font-family:var(--ui);font-size:clamp(18px,5.4vmin,26px);line-height:1.15;margin-top:4px}
.lvw-who{font-weight:600;font-size:clamp(13px,3.6vmin,16px);color:#46557a}
.lvw-unl{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px}
.lvw-unl i{font:400 clamp(13px,3.6vmin,15px)/1 var(--ui);font-style:normal;padding:6px 12px 5px;border-radius:999px;background:#e6f7e2;border:2px solid #1e7b30;color:var(--navy)}
@media (prefers-reduced-motion:reduce){.lvwipe{clip-path:none;animation:fadein .15s both}.lvwipe.out{animation:wipefade .15s both}.lvw-plate,.lvwipe.out .lvw-plate{animation:none}}
@keyframes wipefade{to{opacity:0}}

/* ---------- The daily chest that evolves (openChest in app.js) ---------- */
/* The chest wobbles; each tap shakes it harder, cracks it and lets more light out of the seam, and it may turn rarer:
   Bronze, Silver, Gold, Legendary (a rainbow glow). The rarity sets the chest's colours (--cw wood, --cl lid, --cm
   metal, --cwd the dark wood line) and its glow (--cg, as r,g,b). The third tap bursts it open and the rewards fly
   into the tray. Upright, it's one column; on a phone on its side the chest is on the left. */
.chestopen.chx{padding:calc(env(safe-area-inset-top,0px) + 10px) calc(env(safe-area-inset-right,0px) + 10px) calc(env(safe-area-inset-bottom,0px) + 12px) calc(env(safe-area-inset-left,0px) + 10px)}
.chx.r0{--cw:#9c5a26;--cl:#b8692e;--cm:#e8a25e;--cwd:#7a4219;--cg:255,170,90}
.chx.r1{--cw:#5f7088;--cl:#76889f;--cm:#eef2f7;--cwd:#46546a;--cg:200,225,255}
.chx.r2{--cw:#c8891c;--cl:#e2a52a;--cm:#fff3a6;--cwd:#9c6410;--cg:255,214,70}
.chx.r3{--cw:#5b2fa0;--cl:#7444c8;--cm:#ffd23f;--cwd:#3f1f75;--cg:255,140,230}
.chx .rays{opacity:.14;transition:opacity .5s}
.chx.open .rays{opacity:.4}
.chx-flash{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,#fff 0 30%,rgba(var(--cg),.85) 70%)}
.chx .chest-card{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.6vh,12px);width:min(100%,420px)}
.chx-side{display:contents}
.chx .chest-day{order:-1;margin:0}
.chx-stage{order:0;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.2vh,10px)}
.chx-tray{order:1}.chx .chest-track{order:2}.chx-end{order:3}
/* The chest: one big button. */
.chx-chest{position:relative;display:block;width:min(56vw,240px,27vh);aspect-ratio:120/104;margin-top:clamp(12px,4vh,34px);padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.chx-chest:disabled{cursor:default}
.chx-chest:focus-visible{outline:3px dashed rgba(255,255,255,.7);outline-offset:10px;border-radius:30px;box-shadow:none}
.chx-chest .chestsvg{position:relative;z-index:1;display:block;width:100%;height:auto;overflow:visible;animation:wobble 2.2s ease-in-out infinite;transform-origin:50% 90%}
.chx[data-tap="1"] .chx-chest .chestsvg{animation-duration:1.4s}
.chx[data-tap="2"] .chx-chest .chestsvg{animation-duration:.9s}
.chx.open .chx-chest .chestsvg{animation:none}
.chx .cw{fill:var(--cw)}.chx .cl{fill:var(--cl)}.chx .cm{fill:var(--cm)}.chx .cwd{stroke:var(--cwd)}
.chx :is(.cw,.cl,.cm){transition:fill .25s}
.chx .chest-lid{transform-box:fill-box;transform-origin:50% 100%;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.chx.open .chest-lid{transform:translateY(-16px) rotate(-30deg)}
/* Light through the cracks and the seam: more with each tap. */
.chx .crk{opacity:0;transition:opacity .15s}
.crk-g{fill:none;stroke:rgba(var(--cg),.6);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.crk-c{fill:none;stroke:#fffbe6;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.chx:is([data-tap="1"],[data-tap="2"],[data-tap="3"]) .c1 .crk,.chx:is([data-tap="2"],[data-tap="3"]) .c2 .crk{opacity:1}
.chx .seam{fill:none;stroke:rgb(var(--cg));stroke-linecap:round;stroke-width:2;opacity:0;transition:opacity .2s,stroke-width .2s}
.chx[data-tap="1"] .seam{opacity:.7;stroke-width:3}
.chx:is([data-tap="2"],[data-tap="3"]) .seam{opacity:1;stroke-width:4.5}
.chx.open .seam{opacity:0}
.chx-glow{position:absolute;z-index:0;inset:-22%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(var(--cg),.95),rgba(var(--cg),0) 62%);opacity:.35;transform:scale(.75);transition:opacity .3s,transform .3s}
.chx[data-tap="1"] .chx-glow{opacity:.55;transform:scale(.9)}
.chx[data-tap="2"] .chx-glow{opacity:.8;transform:scale(1.05)}
.chx.open .chx-glow{opacity:1;transform:scale(1.3)}
.chx.r3 .chx-glow{background:conic-gradient(#ff4d4d,#ffb84d,#fff04d,#5fe08a,#4dd2ff,#8a6dff,#ff4dd8,#ff4d4d);-webkit-mask:radial-gradient(circle,#000 28%,transparent 66%);mask:radial-gradient(circle,#000 28%,transparent 66%);animation:spin 2.4s linear infinite}
.chx.r3.open .chx-glow{transform:none;inset:-40%}
.chx-tap{position:absolute;z-index:2;top:-4%;right:-12%;padding:5px 12px 4px;border-radius:14px;background:#fff;color:var(--navy);border:3px solid var(--navy);box-shadow:0 3px 0 var(--navy);font:400 clamp(16px,5vmin,22px)/1 var(--ui);font-style:normal;animation:chxtap .7s ease-in-out infinite alternate}
@keyframes chxtap{to{transform:translateY(-6px) rotate(6deg)}}
.chx.open .chx-tap{display:none}
/* The rarity, on a pill in its colour (a rainbow for Legendary), and three dots for the taps. */
.chx-rar{margin:0}
.chx-rar span{display:inline-block;padding:4px 16px 3px;border-radius:999px;background:rgb(var(--cg));color:var(--navy);border:3px solid var(--navy);box-shadow:0 3px 0 var(--navy);font:400 clamp(16px,4.8vmin,22px)/1.1 var(--ui);letter-spacing:.02em}
.chx.r3 .chx-rar span{background:linear-gradient(90deg,#ff7a7a,#ffd36b,#8ff0a4,#7fd8ff,#c9a2ff)}
.chx-pips{display:flex;gap:8px}
.chx-pips i{width:14px;height:14px;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.15);transition:background .15s}
.chx:is([data-tap="1"],[data-tap="2"],[data-tap="3"]) .chx-pips i:nth-child(1),.chx:is([data-tap="2"],[data-tap="3"]) .chx-pips i:nth-child(2),.chx[data-tap="3"] .chx-pips i:nth-child(3){background:#ffd23f}
.chx.open .chx-pips{visibility:hidden}
.chx-spk{position:fixed;z-index:5;width:10px;height:10px;border-radius:2px;pointer-events:none;transform:translate(-50%,-50%) rotate(45deg)}
/* The tray: before the chest opens it says to tap; then the rewards land in it. */
.chx-tray{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px;width:100%;min-height:44px}
.chx-hint{position:absolute;inset:0;display:grid;place-items:center;margin:0;font:400 clamp(16px,4.6vmin,20px)/1.2 var(--ui);color:#cfe3f5}
.chx.open .chx-hint{display:none}
.chx-item{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:16px;background:#fff;color:var(--navy);border:3px solid var(--navy);box-shadow:0 4px 0 var(--navy);text-align:left;visibility:hidden}
.chx-item.in{visibility:visible}
.chx-item>span:last-child{display:flex;flex-direction:column}
.chx-item b{font:400 clamp(16px,4.6vmin,20px)/1.05 var(--ui)}
.chx-item small{font-size:12px;font-weight:700;color:#46557a}
.chx-ic{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#eef2f8}
.chx-ic svg{width:24px;height:24px}.chx-ic .dot{width:22px;height:22px}.chx-ic .pat{width:24px;height:25px}
.chx-xpic{font:400 13px/1 var(--ui);font-style:normal;color:#fff;background:var(--navy);border-radius:7px;padding:5px 5px 4px}
.chx-end{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%;visibility:hidden;opacity:0;transition:opacity .3s}
.chx.done .chx-end{visibility:visible;opacity:1}
.chx-end .kickoff{width:100%;margin:0}
.chx-end .unlock{margin:0}
.chx .chx-end .note{color:#e3eefa;font-size:14px;text-align:center;max-width:none}
@media (prefers-reduced-motion:reduce){.chx-chest .chestsvg,.chx-tap,.chx.r3 .chx-glow{animation:none}.chx .chest-lid{transition:none}}
/* A phone on its side: the chest on the left, the day, tray and button on the right. */
@media (orientation:landscape) and (max-height:560px){
  .chx .chest-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:clamp(16px,5vw,40px);width:min(100%,720px)}
  .chx-side{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
  .chx-chest{width:min(46vh,200px,30vw);margin-top:min(7vh,26px)}
  .chx .chest-day{font-size:clamp(26px,9vh,40px)}
  .chx-tray{min-height:40px}
  .chx-item{padding:3px 10px 3px 4px;border-radius:14px}.chx-ic{width:30px;height:30px}
  .chx-end .kickoff{min-height:0;padding:6px 10px;font-size:22px}
}

/* ---------- A new rank on full time: its own pop-up (ftRank in app.js) ---------- */
/* Navy on the light rank card, the real-life reward on its dashed voucher, and Awesome! in the Play colour. On a
   phone on its side the badge sits beside the words so it all fits. */
.sheet-card .rankup{color:var(--navy);gap:4px;padding:12px 14px 14px;border-color:var(--navy)}
.sheet-card .rankup h2{font-size:clamp(30px,9vmin,48px);margin:0;-webkit-text-stroke:5px var(--navy);text-shadow:0 4px 0 var(--navy)}
.sheet-card .rankup :is(p,.result){color:var(--navy);text-shadow:none;margin:0}
.sheet-card .rankup .result{font-family:var(--ui);font-size:var(--fs-q)}
.sheet-card .rankup>p:not(.result){font-size:var(--fs-label);font-weight:600}
.sheet-card .rankup .label{color:#46557a}
.sheet-card .rankup .voucher{max-width:none;align-self:stretch;margin-top:6px;padding:6px 12px;border-color:var(--navy)}
.sheet-card .rankup .voucher .note{color:#46557a;max-width:none}
.sheet-card:has(.rankup) .wrow{justify-content:center;margin-top:10px}
.sheet-card:has(.rankup) .kickoff{--c1:var(--kp);--c2:var(--kp);--edge:var(--navy);min-width:min(240px,100%);color:var(--kpt);text-shadow:none;background:var(--kp);border-color:var(--navy);box-shadow:0 6px 0 var(--navy);font-size:24px;padding:8px 24px}
.sheet-card:has(.rankup) .kickoff::after{display:none}
@media (orientation:landscape) and (max-height:520px){
  .sheet-card:has(.rankup){padding:14px 16px}
  .sheet-card .rankup{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:center;text-align:left;padding:10px 14px}
  .sheet-card .rankup>.badge{grid-row:1/span 4;width:64px;height:64px}
  .sheet-card .rankup>:not(.badge):not(canvas){grid-column:2}
  .sheet-card .rankup>.voucher{grid-column:1/-1;text-align:center}
  .sheet-card:has(.rankup) .wrow{margin-top:8px}
  .sheet-card:has(.rankup) .kickoff{font-size:20px;padding:6px 20px}
}

/* Open Roam school years: both subjects' years on the hub's match card (the one being played is filled in), or
   in the top bar in landscape, where the card has no room; the Skip ahead offer's button; and the Year 6 Legend
   card frame (Locker room). */
.mc-years{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:-2px}
.scr-top>.mc-years{display:none;margin:0}
.mc-yr{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.22);border:2px solid #fff;color:#fff;font-size:13px;line-height:1.25;white-space:nowrap}
.mc-yr b{font-weight:800}
.mc-yr svg{width:12px;height:12px;flex:none}
.mc-yr.on{background:#fff;color:var(--navy)}
.roamhub .mc-yr:not(.on){color:var(--kt);border-color:color-mix(in srgb,var(--kt) 70%,transparent);background:color-mix(in srgb,var(--kt) 14%,transparent)}
.mc-chip.mc-skip{width:100%;box-sizing:border-box}
.mc-chip.mc-skip>span{flex:1;min-width:0}
.mc-chip.mc-skip .btn{flex:none;font-size:14px;padding:5px 10px;border-radius:12px;white-space:nowrap}
@media (orientation:landscape) and (min-width:700px){
  .roamhub .matchcard>.mc-years{display:none}
  .roamhub .scr-top>.mc-years{display:flex;flex-wrap:nowrap}
  .roamhub .scr-top .mc-yr{padding:4px 10px;font-size:14px;background:#fff;color:var(--navy);border:3px solid var(--ko);box-shadow:0 3px 0 var(--ko)}
  .roamhub .scr-top .mc-yr.on{background:var(--kp);color:var(--kpt)}
}
@media (orientation:landscape) and (max-height:520px){.mc-chip.mc-skip .btn{font-size:12px;padding:3px 8px}}
.playercard.frame-legend{border-color:#7b3fd1;box-shadow:inset 0 0 0 5px #c58cff,inset 0 0 0 8px #ffd23f,inset 0 0 0 10px #f3e6ff,0 6px 0 #3d1a70,0 0 26px rgba(197,140,255,.7)}
.lb-me.frame-legend{border-color:#c58cff}

/* ---------- Loading cover, take two (coverUp in app.js) ---------- */
/* Red kit stripes, the WORD CUP title in white on a navy shadow with a ball that drops in and bounces into its
   gap, a yellow bar that fills as the game gets ready, and a game tip on a white card. Fits inside the safe areas. */
#cover{gap:clamp(10px,3.4vmin,26px);
  background:radial-gradient(ellipse at 50% 42%,transparent 40%,rgba(60,0,10,.38) 100%),repeating-linear-gradient(115deg,#d7263d 0 22px,#bb1127 22px 44px);background-color:#d7263d}
.cv-title{display:flex;align-items:center;justify-content:center;gap:.12em;margin:0;font-family:var(--title);font-weight:400;line-height:1;letter-spacing:.03em;
  font-size:clamp(40px,min(14.5vw,15vh),120px);color:#fff;text-transform:uppercase;-webkit-text-stroke:.07em #14213d;paint-order:stroke fill;
  text-shadow:0 .09em 0 #14213d,0 .16em 16px rgba(0,0,0,.3)}
.cv-title>span:not(.cv-drop){padding-top:.08em}
.cv-title .cv-drop{display:block;width:.78em;height:.78em;flex:none;animation:cvdrop 1.1s cubic-bezier(.3,0,.6,1) .15s both}
.cv-title .cv-drop svg{display:block;width:100%;height:100%;filter:drop-shadow(0 .07em 0 #14213d)}
@keyframes cvdrop{0%{transform:translateY(-120vh) rotate(-200deg)}45%{transform:translateY(0) rotate(0)}
  60%{transform:translateY(-.5em) rotate(40deg)}75%{transform:translateY(0) rotate(60deg)}86%{transform:translateY(-.16em) rotate(70deg)}100%{transform:translateY(0) rotate(75deg)}}
.cv-bar{width:min(380px,74vw);height:clamp(14px,3.6vmin,20px);border-radius:999px;background:#14213d;border:3px solid #fff;box-shadow:0 4px 0 #14213d;overflow:hidden;box-sizing:content-box}
.cv-bar>i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(180deg,#ffe07a,#ffc93c 55%,#f0a800);transition:width .25s ease-out}
#cover .cv-tip{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0;width:min(400px,84vw);max-width:none;box-sizing:border-box;padding:10px 16px 12px;border-radius:16px;
  background:#fff;color:#14213d;font-size:clamp(14px,4vmin,18px);line-height:1.3;font-weight:600;text-align:center;box-shadow:0 5px 0 #14213d;border:3px solid #14213d}
#cover .cv-tip b{font-family:var(--ui);font-weight:400;font-size:.85em;text-transform:uppercase;letter-spacing:.08em;color:#d7263d}
@media (orientation:landscape) and (max-height:520px){.cv-title{font-size:clamp(40px,15vh,84px)}#cover .cv-tip{width:min(520px,70vw);padding:6px 14px 8px}}
@media (prefers-reduced-motion:reduce){.cv-title .cv-drop{animation:none}.cv-bar>i{transition:none}#cover{transition:none}}

/* ---------- Who's playing? (welcome in app.js) ---------- */
/* A fresh device's first screen: the pitch, a big title and three doors stacked in the middle (a row in landscape). */
.welcome{position:fixed;inset:0;z-index:5;overflow:auto;display:flex;
  background:radial-gradient(circle at 50% 50%,transparent 0 23vmin,rgba(255,255,255,.55) 23vmin calc(23vmin + 3px),transparent calc(23vmin + 3px)),
    linear-gradient(90deg,transparent calc(50% - 1.5px),rgba(255,255,255,.55) calc(50% - 1.5px) calc(50% + 1.5px),transparent calc(50% + 1.5px)),
    repeating-linear-gradient(180deg,#4fb636 0 9vh,#43a22d 9vh 18vh);background-color:#43a22d}
.wc-in{margin:auto;width:100%;max-width:460px;box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;gap:clamp(10px,2.4vh,18px);
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.wc-title{margin:0 0 4px;text-align:center;font-family:var(--title);font-weight:400;font-size:clamp(36px,11vw,58px);line-height:1.05;color:#fff;
  -webkit-text-stroke:.07em #14213d;paint-order:stroke fill;text-shadow:0 .09em 0 #14213d}
.wc-doors{display:flex;flex-direction:column;gap:clamp(10px,2vh,14px)}
.wc-door{display:flex;align-items:center;gap:14px;width:100%;min-height:clamp(76px,11vh,96px);box-sizing:border-box;padding:12px 16px;border-radius:22px;text-align:left;cursor:pointer;
  font:inherit;background:#fff;color:#14213d;border:3px solid #14213d;box-shadow:0 5px 0 #14213d;transition:transform .08s ease,box-shadow .08s ease}
.wc-door:active{transform:translateY(4px);box-shadow:0 1px 0 #14213d}
.wc-door:focus-visible,.wc-sign:focus-visible{outline:3px solid #ffc93c;outline-offset:3px}
.wc-ic{flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#14213d}
.wc-ic svg{width:30px;height:30px;color:#fff;fill:currentColor}
.wc-play .wc-ic{background:#fff}.wc-play .wc-ic svg{width:44px;height:44px}
.wc-tx{display:flex;flex-direction:column;min-width:0}
.wc-tx b{font-family:var(--ui);font-weight:400;font-size:clamp(20px,6vw,25px);line-height:1.1}
.wc-tx small{font-size:clamp(13px,3.8vw,15px);line-height:1.25;font-weight:500;opacity:.85}
.wc-play{background:#ffc93c;min-height:clamp(88px,13vh,110px)}
.wc-play .wc-tx b{font-size:clamp(24px,7.4vw,30px)}
.wc-sign{align-self:center;background:none;border:0;padding:8px 12px;color:#fff;font-family:var(--ui);font-size:17px;cursor:pointer;text-shadow:0 2px 0 #14213d}
.wc-sheetbtns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.wc-sheetbtns .btn{font-size:19px;padding:10px 20px}
@media (orientation:landscape) and (max-height:560px){
  .wc-in{max-width:820px;gap:10px}
  .wc-title{font-size:clamp(30px,10vh,44px);margin:0}
  .wc-doors{flex-direction:row;align-items:stretch}
  .wc-door{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;text-align:center;gap:6px;min-height:0;padding:10px 10px 12px}
  .wc-tx{align-items:center}
  .wc-play{min-height:0}
  .wc-sign{padding:4px 12px}
}
@media (prefers-reduced-motion:reduce){.wc-door{transition:none}}

/* ---------- Grown-up accounts (acctEmail, familyBox, familyPicker in app.js) ---------- */
/* The email and code forms sit on a white card like the sheet's note; players reuse the Friends rows. */
.acct-box{width:100%;max-width:420px;box-sizing:border-box;margin:0 auto 4px;padding:10px 14px;border-radius:14px;background:#fff;color:var(--navy);border:2px solid var(--ko)}
.acct-box>.label{display:block;margin-bottom:4px}
.acct-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.acct-in{width:100%;box-sizing:border-box;font-size:18px;font-weight:600}
.acct-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.acct-row .acct-in{flex:1 1 170px;width:auto;min-width:0}
.acct-row .btn{flex:1 0 auto;font-size:19px;padding:8px 16px}
.acct-code{font-size:24px;font-weight:700;letter-spacing:.3em;text-align:center;padding-left:.3em}
.acct-links{margin-top:6px}
.acct-msg{margin:6px 0 0;font-size:15px;color:var(--navy);text-align:center}
.acct-msg:empty{display:none}
.acct-small{margin:8px auto 0;font-size:14px;text-align:center;color:var(--kt)}
.acct-links .btn{font-size:15px}
/* Short screens (a phone on its side): tighter, so the sign-in sheets fit without scrolling. */
@media (max-height:500px){
  .sheet-card:is(:has(.acct-box),:has(.fambox)){padding:12px 14px 14px}
  .sheet-card:is(:has(.acct-box),:has(.fambox)) .sheet-h{font-size:24px;margin:0 48px 6px}
  .sheet-card:is(:has(.acct-box),:has(.fambox)) .gate-note{padding:6px 12px;font-size:15px;max-width:52ch}
  .acct-box{padding:8px 12px}.acct-small{margin-top:4px}
}
/* Players side by side on a phone on its side. */
@media (orientation:landscape) and (max-height:560px){
  .fam-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 10px}
}
.fambox{display:flex;flex-direction:column;gap:10px}
.fambox>.gate-note{margin-bottom:0}
.sheet-card .fam-msg{background:#fff;border:2px solid var(--ko);border-radius:12px;padding:6px 12px}
.coachscreen .fam-msg{text-align:left;font-weight:600}
.fam-sec{gap:8px}
.fam-into{display:flex;flex-wrap:wrap;gap:8px}
.fam-into .ghost{font-size:16px;padding:6px 14px}
.fam-here{font-family:var(--ui);font-size:15px;color:var(--ink-2);padding:0 6px}
.fam-add{display:flex;flex-direction:column;gap:8px}
.fam-add .yearpick .pick{font-size:22px}
/* The family picker: the welcome screen's doors, one for each child, with their face. */
.wc-kid .fport{width:52px;height:52px;border-color:#14213d}
.wc-kids.wc-many{display:grid;grid-template-columns:1fr 1fr}
.wc-kids.wc-many .wc-door{min-height:64px;padding:8px 10px;gap:8px}
.wc-msg{margin:0;text-align:center;color:#fff;font-family:var(--ui);font-size:17px;text-shadow:0 2px 0 #14213d}
.wc-msg:empty{display:none}
@media (orientation:landscape) and (max-height:560px){
  .wc-kids,.wc-kids.wc-many{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
  .wc-kids.wc-many .wc-door{padding:6px 6px 8px;gap:2px}
  .wc-kid .fport{width:40px;height:40px}
}
@media (orientation:landscape) and (max-height:380px){
  .wc-kids.wc-many .wc-kid .fport{width:32px;height:32px}.wc-kids.wc-many .wc-tx b{font-size:18px}.wc-kids.wc-many .wc-tx small{font-size:12px}
}
/* Open Roam: the aim. A ball sweeps along the bar; tap when it's in the green. */
.aimbox{display:flex;flex-direction:column;gap:14px;padding:4px 0}
.aimbar{position:relative;height:46px;border-radius:24px;background:#e9edf3;border:3px solid var(--navy);box-shadow:inset 0 3px 0 rgba(0,0,0,.08);touch-action:none;cursor:pointer}
.aimtrack{position:absolute;left:20px;right:20px;top:0;bottom:0}
.aimzone{position:absolute;top:4px;bottom:4px;margin:0 -6px;border-radius:18px;background:#22a447;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.aimball{position:absolute;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#fff;border:3px solid var(--navy);
  box-shadow:0 2px 0 var(--navy);background-image:radial-gradient(circle at 50% 50%,var(--navy) 0 5px,transparent 6px)}
.aimbar.hit{border-color:#22a447;box-shadow:0 0 0 4px rgba(34,164,71,.35)}.aimbar.miss{border-color:#e2342d;box-shadow:0 0 0 4px rgba(226,52,45,.3)}
.aimgo{align-self:center}

/* VAR review questions, Scout report cards, teacher reports (src/unique.js) */
.vartag{display:inline-block;background:#13244a;color:#ffd23f;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:5px;margin-right:6px;vertical-align:middle}
.scoutwrap{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0 14px}
.scoutwrap .scout-card{flex:1 1 260px}
.tprev{white-space:pre-wrap;font:13px/1.45 ui-monospace,Menlo,Consolas,monospace;background:rgba(0,0,0,.05);border-radius:8px;padding:10px;max-height:320px;overflow:auto}
.trow{margin-bottom:8px}