/* Trophora Juniors: bright, chunky, rounded. Tokens first. */
:root{
  --sky1:#4fc3ff; --sky2:#a6e4ff;
  --grass:#3cc85a; --grass2:#2fae4c;
  --sun:#ffd23f; --sun2:#f2b800;
  --coral:#ff6b5e; --coral2:#e0483b;
  --grape:#7b5cff; --grape2:#5b3fe0;
  --mint:#2fd6b5; --mint2:#16b394;
  --gold:#e2b04a;
  --ink:#1d2a4d; --paper:#ffffff; --cream:#fff8e6;
  --r:22px; --line:4px;
  --font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", sans-serif;
  --base: 20px;
}
body.band-young{ --base: 22px; }
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; }
body{
  font-family:var(--font); font-size:var(--base); color:var(--ink); line-height:1.3;
  background: linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 55%,#c9f0ff 100%) fixed, var(--sky2);
  overflow-x:hidden; display:flex; flex-direction:column; min-height:100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}
button{ font:inherit; color:inherit; }
h1,h2,h3{ margin:.2em 0 .4em; line-height:1.1; font-weight:900; letter-spacing:.01em; }
h1{ font-size:1.9em; } h2{ font-size:1.45em; } h3{ font-size:1.15em; }
p{ margin:.3em 0 .7em; }

/* top bar */
.bar{ display:flex; align-items:center; gap:8px; padding:10px 12px; padding-top:max(10px, env(safe-area-inset-top)); }
.bar-title{ flex:1; text-align:center; font-weight:900; font-size:1.05em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.iconbtn{
  width:56px; height:56px; flex:0 0 56px; border-radius:18px; border:var(--line) solid var(--ink);
  background:var(--paper); font-size:26px; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 5px 0 var(--ink); transition:transform .08s, box-shadow .08s;
}
.iconbtn:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--ink); }
.iconbtn.off{ opacity:.55; }
.iconbtn[hidden]{ display:none; }

main{ flex:1; width:100%; max-width:860px; margin:0 auto; padding:6px 16px 28px; outline:none; }

/* chunky buttons */
.btn{
  display:flex; align-items:center; justify-content:center; gap:12px; min-height:68px; width:100%;
  padding:12px 20px; border:var(--line) solid var(--ink); border-radius:var(--r); cursor:pointer;
  background:var(--sun); font-weight:900; font-size:1.15em; box-shadow:0 7px 0 var(--ink);
  transition:transform .08s, box-shadow .08s; text-align:center;
}
.btn:active{ transform:translateY(5px); box-shadow:0 2px 0 var(--ink); }
.btn:focus-visible,.iconbtn:focus-visible,.tile:focus-visible,.choice:focus-visible{ outline:4px dashed var(--grape2); outline-offset:4px; }
.btn.grape{ background:var(--grape); color:#fff; } .btn.coral{ background:var(--coral); color:#fff; }
.btn.mint{ background:var(--mint); } .btn.white{ background:var(--paper); } .btn.small{ min-height:56px; font-size:1em; }
.row{ display:flex; gap:14px; flex-wrap:wrap; } .row>*{ flex:1 1 140px; }
.stack{ display:flex; flex-direction:column; gap:16px; }

.card{ background:var(--paper); border:var(--line) solid var(--ink); border-radius:26px; padding:16px; box-shadow:0 7px 0 rgba(29,42,77,.9); }
.center{ text-align:center; }

/* home */
.hero{ display:flex; align-items:center; gap:10px; margin:4px 0 14px; }
.hero .pip{ width:120px; flex:0 0 120px; }
.bubble{ position:relative; background:var(--paper); border:var(--line) solid var(--ink); border-radius:24px; padding:12px 16px; font-weight:800; }
.bubble::before{ content:""; position:absolute; left:-15px; top:26px; border:12px solid transparent; border-right-color:var(--ink); }
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; }
.tile{
  position:relative; border:var(--line) solid var(--ink); border-radius:28px; padding:14px 12px 16px; cursor:pointer;
  min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  font-weight:900; font-size:1.1em; box-shadow:0 8px 0 var(--ink); transition:transform .08s, box-shadow .08s;
}
.tile:active{ transform:translateY(6px); box-shadow:0 2px 0 var(--ink); }
.tile .ico{ font-size:56px; line-height:1; filter:drop-shadow(0 3px 0 rgba(0,0,0,.18)); }
.tile small{ font-weight:700; font-size:.72em; opacity:.85; }
.t-learn{ background:var(--grape); color:#fff; } .t-pen{ background:var(--mint); } .t-match{ background:var(--sun); } .t-stick{ background:var(--coral); color:#fff; } .t-star{ background:#ff9f43; }
.tiles .t-stick{ grid-column:1/-1; min-height:96px; flex-direction:row; gap:12px; }
.soon{ margin-top:18px; font-size:.8em; font-weight:800; opacity:.8; text-align:center; }
.parentlink{ display:block; margin:18px auto 0; background:none; border:none; text-decoration:underline; font-weight:800; font-size:.8em; min-height:48px; cursor:pointer; }

/* age picker */
.ages{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; }
.ages .tile .big{ font-size:2em; }

/* quiz */
.qhead{ display:flex; align-items:center; gap:10px; justify-content:space-between; margin-bottom:8px; }
.dots{ display:flex; gap:6px; } .dots i{ width:18px; height:18px; border-radius:50%; border:3px solid var(--ink); background:#fff; }
.dots i.ok{ background:var(--sun); } .dots i.now{ background:var(--grape); }
.qtext{ font-size:1.25em; font-weight:900; text-align:center; margin:8px 0 10px; }
.pitchsvg{ width:100%; height:auto; display:block; border:var(--line) solid var(--ink); border-radius:22px; background:var(--grass); }
.choices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-top:16px; }
.choice{
  border:var(--line) solid var(--ink); border-radius:24px; background:var(--paper); cursor:pointer; min-height:96px; padding:10px;
  font-weight:900; font-size:1.05em; box-shadow:0 7px 0 var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  transition:transform .08s, box-shadow .08s;
}
.choice .ico{ font-size:40px; line-height:1; }
.choice:active{ transform:translateY(5px); box-shadow:0 2px 0 var(--ink); }
.choice.right{ background:var(--sun); } .choice.nope{ background:#e9edf5; opacity:.6; }
.feedback{ margin-top:16px; }
.feedback .card{ display:flex; gap:12px; align-items:center; }
.feedback .pip{ width:76px; flex:0 0 76px; }

/* penalty */
.goalwrap{ position:relative; border:var(--line) solid var(--ink); border-radius:22px; overflow:hidden; background:linear-gradient(180deg,#8fdcff 0 38%, var(--grass) 38% 100%); touch-action:manipulation; }
.goalwrap svg{ display:block; width:100%; height:auto; }
.score-pills{ display:flex; gap:8px; justify-content:center; margin:10px 0; flex-wrap:wrap; }
.pill{ border:3px solid var(--ink); border-radius:999px; padding:4px 14px; font-weight:900; background:#fff; }

/* match */
.scoreboard{ display:flex; align-items:center; justify-content:center; gap:10px; margin:2px 0 8px; font-weight:900; }
.scoreboard .team{ display:flex; align-items:center; gap:6px; min-width:0; }
.scoreboard .team span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:30vw; font-size:.85em; }
.scoreboard .sc{ background:var(--ink); color:#fff; border-radius:16px; padding:4px 14px; font-size:1.5em; letter-spacing:.05em; }
.kitdot{ width:26px; height:26px; border-radius:50%; border:3px solid var(--ink); flex:0 0 26px; display:grid; place-items:center; font-size:13px; color:#fff; font-weight:900; }
.timebar{ height:16px; border:3px solid var(--ink); border-radius:999px; background:#fff; overflow:hidden; margin-bottom:8px; }
.timebar i{ display:block; height:100%; width:0; background:var(--sun); }
canvas.pitch{ width:100%; height:auto; display:block; border:var(--line) solid var(--ink); border-radius:22px; touch-action:none; background:var(--grass); }
.callout{ text-align:center; font-weight:900; font-size:1.15em; min-height:1.6em; margin:10px 0 4px; }
.hint{ text-align:center; font-weight:700; font-size:.85em; opacity:.85; }
.teampick{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; }
.teampick .choice{ min-height:84px; }
.teampick .choice.sel{ background:var(--sun); }

/* sticker book */
.stickers{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:14px; }
.sticker{ border:var(--line) dashed var(--ink); border-radius:24px; padding:12px; text-align:center; background:rgba(255,255,255,.55); min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.sticker .ico{ font-size:48px; filter:grayscale(1) opacity(.35); }
.sticker.got{ border-style:solid; background:#fff; box-shadow:0 6px 0 var(--ink); }
.sticker.got .ico{ filter:none; }
.sticker b{ font-size:.9em; } .sticker small{ font-size:.72em; font-weight:700; }

/* parent */
.gate{ max-width:440px; margin:0 auto; }
.keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.keypad .btn{ min-height:60px; }
.ansbox{ font-size:1.6em; font-weight:900; text-align:center; border:var(--line) solid var(--ink); border-radius:18px; background:#fff; min-height:64px; display:grid; place-items:center; letter-spacing:.1em; }
.parent{ font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:17px; }
.parent .card{ margin-bottom:16px; }
.parent h2{ font-family:var(--font); }
.opt{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:2px solid #e7ebf3; }
.opt:first-of-type{ border-top:none; }
.opt label{ font-weight:600; }
.seg{ display:flex; border:3px solid var(--ink); border-radius:14px; overflow:hidden; flex-wrap:wrap; }
.seg button{ border:none; background:#fff; padding:10px 12px; min-height:48px; font-weight:700; cursor:pointer; }
.seg button.on{ background:var(--sun); }
.parent ul{ padding-left:20px; margin:.4em 0; } .parent li{ margin:.25em 0; }

/* fx */
#fx{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:50; }
.conf{ position:absolute; top:-20px; width:14px; height:18px; border:2px solid var(--ink); border-radius:4px; animation:fall 1.8s linear forwards; }
@keyframes fall{ to{ transform:translateY(110vh) rotate(720deg); } }
.banner{ position:fixed; left:50%; top:38%; transform:translate(-50%,-50%) scale(.6); z-index:60; pointer-events:none;
  background:var(--sun); border:5px solid var(--ink); border-radius:28px; padding:14px 28px; font-size:2.4em; font-weight:900; box-shadow:0 9px 0 var(--ink);
  animation:pop 1.6s ease-out forwards; white-space:nowrap; }
@keyframes pop{ 0%{transform:translate(-50%,-50%) scale(.4);opacity:0} 15%{transform:translate(-50%,-50%) scale(1.08);opacity:1} 25%{transform:translate(-50%,-50%) scale(1)} 80%{opacity:1} 100%{opacity:0;transform:translate(-50%,-60%) scale(1)} }
#toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:70; max-width:calc(100% - 32px);
  background:var(--ink); color:#fff; border-radius:18px; padding:12px 18px; font-weight:800; opacity:0; transition:opacity .2s; pointer-events:none; text-align:center; }
#toast.on{ opacity:1; }

.pip-bounce{ animation:bob 2.4s ease-in-out infinite; transform-origin:50% 90%; }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
.pip-dance{ animation:dance .5s ease-in-out 3; transform-origin:50% 90%; }
@keyframes dance{ 0%,100%{ transform:rotate(0) } 25%{ transform:rotate(-14deg) translateY(-10px) } 75%{ transform:rotate(14deg) translateY(-10px) } }

body.calm *, body.calm *::before{ animation:none !important; transition:none !important; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

@media (max-width:420px){
  h1{ font-size:1.6em; }
  .hero .pip{ width:96px; flex-basis:96px; }
  .tile{ min-height:136px; } .tile .ico{ font-size:48px; }
  .tiles{ grid-template-columns:1fr 1fr; gap:12px; }
  .iconbtn{ width:50px; height:50px; flex-basis:50px; font-size:23px; }
}

/* phone fixes from the 2026-10-17 screenshots */
.scoreboard .sc{ white-space:nowrap; flex:0 0 auto; }
.scoreboard .team{ flex:1 1 0; } .scoreboard .team:last-child{ justify-content:flex-end; }
#tact>*{ flex:1 1 90px; padding:10px 8px; }
.card .score-pills .pill{ font-size:.78em; padding:3px 10px; }

/* ===== Sporty restyle (Alex 2026-10-17: "not too childish, geared like 8 yrs old").
   Bold stadium blues, chunky outlines, italic all-caps headings: a game look, not a toddler look. ===== */
:root{
  --head: "Segoe UI Black", "Arial Black", system-ui, -apple-system, sans-serif;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --base: 19px;
}
body.band-young{ --base: 21px; }
body{
  color:#fff;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 38px, rgba(255,255,255,0) 38px 76px),
    radial-gradient(120% 60% at 50% -10%, #3d8bff 0%, rgba(61,139,255,0) 60%),
    linear-gradient(180deg, #0b2a7a 0%, #123fb0 45%, #0d2c86 100%) fixed;
  background-color:#0d2c86;
}
h1,h2,h3,.bar-title,.tile,.btn,.qtext,.callout,.scoreboard .sc,.banner{ font-family:var(--head); }
h1,h2,.bar-title,.callout{ text-transform:uppercase; font-style:italic; letter-spacing:.02em; }
.bar-title{ color:#fff; }
.card,.bubble,.choice,.btn,.pill,.ansbox,.sticker.got,.feedback .card{ color:var(--ink); }
.btn.grape,.btn.coral{ color:#fff; }
.tile{ text-transform:uppercase; font-style:italic; letter-spacing:.01em; font-size:1em; }
.tile small{ text-transform:none; font-style:normal; font-family:var(--font); font-weight:800; }
.t-learn{ background:linear-gradient(160deg,#8a6bff,#5b3fe0); }
.t-pen{ background:linear-gradient(160deg,#3be6c4,#14b291); }
.t-match{ background:linear-gradient(160deg,#ffe066,#f5b700); }
.t-star{ background:linear-gradient(160deg,#ffb36b,#ff8a1f); }
.t-stick{ background:linear-gradient(160deg,#ff8378,#e8473a); }
.hero .pip{ width:92px; flex-basis:92px; }
.pip-bounce{ animation-duration:3.2s; }
.bubble::before{ border-right-color:#fff; }
.sticker{ border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.08); color:#fff; }
.soon,.hint,.parentlink{ color:#dce8ff; }
.parent h2{ color:#fff; font-family:var(--head); }
.timebar{ border-color:#0a1a4a; }
canvas.pitch,.pitchsvg,.goalwrap{ border-color:#0a1a4a; box-shadow:0 8px 0 rgba(0,0,0,.25); }
.scoreboard .sc{ background:#0a1a4a; border:3px solid #fff; }
.kitdot{ border-color:#fff; }
.iconbtn{ box-shadow:0 5px 0 #0a1a4a; border-color:#0a1a4a; }
.tile,.btn,.choice,.card{ border-color:#0a1a4a; }
.tile{ box-shadow:0 8px 0 #0a1a4a; } .btn,.choice{ box-shadow:0 7px 0 #0a1a4a; } .card{ box-shadow:0 7px 0 rgba(0,0,0,.35); }
@media (max-width:420px){ .hero .pip{ width:80px; flex-basis:80px; } .tile .ico{ font-size:44px; } }

@media (max-width:420px){ .bar-title{ font-size:.82em; letter-spacing:0; } }

/* ===== Team Boss (PES Club Manager-style) ===== */
.t-boss{ background:linear-gradient(160deg,#5ad1ff,#1e88e5); }
.boss-head{ display:flex; align-items:center; gap:12px; }
.bh-name{ font-family:var(--head); font-style:italic; text-transform:uppercase; font-size:1.05em; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.next-match{ margin-top:12px; }
.nm-label{ font-family:var(--head); font-style:italic; text-transform:uppercase; font-size:.85em; color:#5b3fe0; }
.nm-teams{ display:flex; align-items:center; gap:10px; margin:8px 0 12px; font-weight:800; min-width:0; }
.nm-teams span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.big-score{ font-family:var(--head); font-size:2em; }
.tabs{ margin-top:14px; border-color:#0a1a4a; background:#fff; display:grid; grid-template-columns:repeat(4,1fr); }
.tabs button{ padding:10px 4px; font-size:.8em; color:var(--ink); }
.lineup{ display:grid; grid-template-columns:repeat(auto-fill,minmax(138px,1fr)); gap:10px; }
.pcard{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 8px; border-radius:18px; cursor:pointer;
  border:4px solid #0a1a4a; background:linear-gradient(170deg,#fff6cf,#ffd23f); color:var(--ink); box-shadow:0 6px 0 #0a1a4a; font:inherit; }
.bench .pcard{ background:linear-gradient(170deg,#ffffff,#dfe7f7); }
.pcard.sel{ outline:4px dashed #ff6b5e; outline-offset:2px; }
.pcard.out{ background:linear-gradient(170deg,#ffe1dd,#ffb3a8); }
.pc-top{ display:flex; width:100%; align-items:center; gap:6px; }
.pc-ovr{ font-family:var(--head); font-size:1.6em; line-height:1; }
.pc-pos{ font-weight:900; font-size:.8em; background:#0a1a4a; color:#fff; border-radius:8px; padding:2px 6px; }
.pc-cap{ margin-left:auto; background:#ff6b5e; color:#fff; border:2px solid #0a1a4a; border-radius:50%; width:26px; height:26px; display:grid; place-items:center; font-weight:900; font-size:.8em; }
.pc-face{ width:44px; height:44px; border-radius:50%; border:3px solid #0a1a4a; display:grid; place-items:center; font-size:24px; }
.pc-name{ font-weight:900; font-size:.9em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.pc-stats{ display:flex; gap:6px; font-size:.75em; font-weight:800; } .pc-stats i{ font-style:normal; }
.pc-fit{ width:100%; height:8px; border:2px solid #0a1a4a; border-radius:99px; overflow:hidden; background:#fff; } .pc-fit i{ display:block; height:100%; }
.pc-warn{ font-size:.65em; font-weight:900; }
.tbl{ width:100%; border-collapse:collapse; font-size:.85em; } .tbl th,.tbl td{ padding:6px 4px; text-align:center; border-bottom:2px solid #e7ebf3; }
.tbl td:nth-child(2){ max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbl tr.me{ background:#fff3c4; font-weight:900; } .tbl .kitdot{ display:inline-grid; vertical-align:middle; }
.ground{ display:flex; align-items:center; gap:12px; } .ground .btn{ width:auto; min-width:92px; }
.parent .opt input{ flex:0 0 auto; }

.tiles .t-stick{ grid-column:auto; min-height:150px; flex-direction:column; gap:6px; }
@media (max-width:420px){ .tiles .t-stick{ min-height:136px; } }
.fmrow>*{ flex:1 1 80px; }

/* ===== trading cards ===== */
/* rarity: --t1/--t2 foil colours, --t3 deep edge, --glow the halo */
.tier-bronze{ --bgimg:url(../media/cards/card-bg-bronze.webp); --t1:#ffd9b0; --t2:#c9783f; --t3:#6b3414; --glow:rgba(201,120,63,.55); }
.tier-silver{ --bgimg:url(../media/cards/card-bg-silver.webp); --t1:#ffffff; --t2:#a9bdd2; --t3:#3b4f66; --glow:rgba(169,189,210,.6); }
.tier-gold{ --bgimg:url(../media/cards/card-bg-gold.webp); --t1:#fff6c2; --t2:#ffc21a; --t3:#8a5a00; --glow:rgba(255,194,26,.65); }
.tier-star{ --bgimg:url(../media/cards/card-bg-star.webp); --t1:#ffd6ff; --t2:#8a4dff; --t3:#22005c; --glow:rgba(160,90,255,.75); }
.tcard{ width:240px; max-width:100%; height:340px; margin:12px auto; perspective:1000px; cursor:pointer; --mx:50%; --my:30%; --rx:0deg; --ry:0deg; }
.tc-tilt{ width:100%; height:100%; transform:rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .25s ease-out; transform-style:preserve-3d; }
.tc-inner{ position:relative; width:100%; height:100%; transition:transform .7s cubic-bezier(.3,1.4,.5,1); transform-style:preserve-3d; }
.tcard.flip .tc-inner{ transform:rotateY(180deg); }
.tc-front,.tc-back{ position:absolute; inset:0; border-radius:22px; backface-visibility:hidden; overflow:hidden; color:#fff;
  border:4px solid var(--t2); box-shadow:0 0 0 3px var(--t3),0 10px 28px var(--glow),0 0 40px var(--glow); }
.tc-front{ display:flex; flex-direction:column; align-items:center; padding:12px 14px 10px;
  background:radial-gradient(120% 80% at 50% 38%,var(--t2) 0%,var(--t3) 72%);   /* fallback */
  background:radial-gradient(120% 80% at 50% 38%,color-mix(in srgb,var(--t2) 45%,transparent) 0%,color-mix(in srgb,var(--t3) 86%,transparent) 72%),var(--bgimg) center/cover; }
.tc-back{ transform:rotateY(180deg); display:flex; flex-direction:column; justify-content:center; gap:10px; padding:18px;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 10px,transparent 10px 20px),radial-gradient(120% 90% at 50% 30%,var(--t2),var(--t3)); font-weight:800; }
.tc-burst{ position:absolute; left:50%; top:36%; width:520px; height:520px; margin:-260px 0 0 -260px; opacity:.32; pointer-events:none;
  background:repeating-conic-gradient(from 0deg,var(--t1) 0 6deg,transparent 6deg 18deg); animation:burst 18s linear infinite; }
@keyframes burst{ to{ transform:rotate(360deg) } }
.tc-holo{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:color-dodge; opacity:.45;
  background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.75),transparent 38%),
    linear-gradient(115deg,transparent 20%,rgba(255,0,170,.35) 35%,rgba(0,220,255,.35) 50%,rgba(255,240,0,.35) 65%,transparent 80%);
  background-size:100% 100%,240% 240%; background-position:0 0,var(--mx) var(--my); }
.tier-bronze .tc-holo{ opacity:.18 } .tier-silver .tc-holo{ opacity:.3 }
.tc-shine{ position:absolute; inset:-40%; background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.7) 50%,transparent 58%); animation:shine 3.2s ease-in-out infinite; pointer-events:none; }
@keyframes shine{ 0%{ transform:translateX(-60%) } 60%,100%{ transform:translateX(60%) } }
.tc-spark{ position:absolute; width:14px; height:14px; pointer-events:none; opacity:0;
  background:radial-gradient(circle,#fff 0 18%,transparent 20%),conic-gradient(from 45deg,transparent 0 10%,#fff 12% 13%,transparent 15% 35%,#fff 37% 38%,transparent 40% 60%,#fff 62% 63%,transparent 65% 85%,#fff 87% 88%,transparent 90%);
  animation:spark 2.6s ease-in-out infinite; }
.tc-spark:nth-of-type(1){ left:14%; top:22%; } .tc-spark:nth-of-type(2){ left:80%; top:30%; animation-delay:.7s; }
.tc-spark:nth-of-type(3){ left:22%; top:62%; animation-delay:1.3s; } .tc-spark:nth-of-type(4){ left:74%; top:70%; animation-delay:1.9s; }
.tier-bronze .tc-spark{ display:none } .tier-silver .tc-spark:nth-of-type(n+3){ display:none }
@keyframes spark{ 0%,100%{ opacity:0; transform:scale(.3) rotate(0) } 40%{ opacity:1; transform:scale(1.2) rotate(45deg) } }
.tc-head{ position:relative; width:100%; display:flex; justify-content:space-between; align-items:flex-start; z-index:1; }
.tc-rate{ display:flex; flex-direction:column; align-items:center; }
.tc-ovr{ font-family:var(--head); font-size:2.8em; line-height:.9; text-shadow:0 2px 0 var(--t3),0 0 14px var(--glow); }
.tc-pos{ font-weight:900; font-size:.85em; letter-spacing:.06em; }
.tc-tier{ font-weight:900; font-size:.7em; letter-spacing:.12em; text-transform:uppercase; padding:3px 9px; border-radius:99px; background:var(--t1); color:var(--t3); }
.tc-art{ position:relative; z-index:1; margin-top:-26px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.tc-art svg{ display:block; }
.tc-name{ position:relative; z-index:1; font-family:var(--head); font-style:italic; text-transform:uppercase; font-size:1.25em; letter-spacing:.04em;
  margin-top:-6px; padding:2px 14px; border-radius:8px; background:rgba(0,0,0,.28); text-shadow:0 2px 0 var(--t3); }
.tc-stats{ position:relative; z-index:1; width:100%; display:flex; flex-direction:column; gap:5px; margin-top:8px; }
.tc-stat{ display:grid; grid-template-columns:1fr 70px 26px; align-items:center; gap:6px; font-size:.78em; font-weight:800; }
.tc-stat i{ height:8px; border-radius:99px; background:rgba(0,0,0,.3); overflow:hidden; }
.tc-stat i b{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--t1),#fff); }
.tc-stat em{ font-style:normal; text-align:right; }
.tc-label{ position:relative; z-index:1; margin-top:auto; font-weight:900; }
.tc-brand{ font-family:var(--head); font-style:italic; text-transform:uppercase; text-align:center; font-size:1.2em; margin-bottom:6px; }
.tcard.reveal .tc-inner{ animation:reveal 1.3s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes reveal{ 0%{ transform:scale(.2) rotateY(-540deg); filter:brightness(3) } 60%{ filter:brightness(1.6) } 100%{ transform:none; filter:none } }
.tcard:focus-visible{ outline:4px dashed #ffd23f; outline-offset:6px; border-radius:22px; }
/* squad cards share the rarity look, smaller */
.pcard[class*="tier-"]{ background:radial-gradient(120% 90% at 50% 30%,var(--t2),var(--t3)); color:#fff; border-color:var(--t3); box-shadow:0 5px 0 var(--t3),0 0 14px var(--glow); }
.pcard[class*="tier-"] .pc-pos{ background:var(--t1); color:var(--t3); }
.pcard[class*="tier-"].sel{ outline-color:#fff; }
.pcard[class*="tier-"].out{ filter:saturate(.45) brightness(.9); }
.pcard .pc-face{ width:auto; height:auto; border:0; border-radius:0; background:none; margin:-4px 0 -6px; }
.pcard .pc-face svg{ display:block; }
@media (prefers-reduced-motion: reduce){ .tc-burst,.tc-shine,.tc-spark,.tcard.reveal .tc-inner{ animation:none } .tc-tilt{ transform:none } }
.qr{ background:#fff; border:4px solid #0a1a4a; border-radius:16px; padding:8px; width:min(260px,100%); margin:10px auto; }
.qr svg{ width:100%; height:auto; display:block; }
.codebox{ width:100%; min-height:70px; font:12px/1.3 ui-monospace,Consolas,monospace; border:3px solid #0a1a4a; border-radius:12px; padding:8px; color:var(--ink); word-break:break-all; }
.tabs{ grid-template-columns:repeat(5,1fr); } .tabs button{ font-size:.72em; }
@media (max-width:340px){ .bar-title{ font-size:.68em; } }
@media (max-width:360px){ .tb-brand{ display:none; } .bar-title{ font-size:1em; } }

/* ---- Football School ---- */
.tiles .t-school{ grid-column:1/-1; min-height:110px; flex-direction:row; gap:14px; background:linear-gradient(135deg,var(--grape),#3f78ff); color:#fff; }
.tiles .t-school small{ display:block; }
.schoolbar{ display:flex; align-items:center; gap:12px; margin:6px 0 4px; } .schoolbar .timebar{ flex:1; margin:0; }
.grp{ margin:18px 4px 8px; font-size:1.05em; font-weight:900; }
.topics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.topic{ border:var(--line) solid var(--ink); border-radius:24px; background:var(--paper); cursor:pointer; padding:12px 10px; min-height:118px; font:inherit; color:var(--ink);
  box-shadow:0 7px 0 var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; transition:transform .08s, box-shadow .08s; }
.topic .ico{ font-size:38px; line-height:1; } .topic b{ font-size:1em; } .topic small{ font-weight:700; font-size:.72em; opacity:.8; }
.topic:active{ transform:translateY(5px); box-shadow:0 2px 0 var(--ink); } .topic.done{ background:#fff6c7; }
.topic:focus-visible{ outline:4px dashed var(--grape2); outline-offset:4px; }
.lesson .lhead{ display:flex; align-items:center; gap:12px; } .lesson .lico{ font-size:44px; line-height:1; } .lesson h2{ margin:0; font-size:1.35em; }
.lesson h3{ margin:14px 0 4px; font-size:.95em; text-transform:uppercase; letter-spacing:.04em; color:var(--grape2); }
.lesson .pitchsvg{ margin:12px 0; } .lesson .body,.lesson .job{ font-weight:700; margin:8px 0; }
.lesson .also{ font-size:.8em; font-weight:800; opacity:.8; margin-top:4px; }
.duties{ margin:4px 0; padding-left:1.2em; font-weight:700; } .duties li{ margin:4px 0; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; } .chips span{ border:3px solid var(--ink); border-radius:999px; padding:3px 12px; background:var(--cream); font-weight:800; font-size:.85em; }
.lesson .good{ margin:12px 0 4px; padding:10px 12px; background:#fff6c7; border-radius:16px; font-weight:800; }
.lesson .extra{ margin:8px 0 0; font-size:.9em; font-weight:700; opacity:.9; }
.intro{ text-align:center; font-weight:800; margin:6px 0 10px; } .lnav{ margin-top:16px; } .topiclabel{ font-size:.8em; font-weight:800; opacity:.75; }
.choices.txt .choice{ min-height:68px; font-size:1em; text-align:center; } .choices.one{ grid-template-columns:1fr; }

/* ===== match stage: four round buttons; full screen when the phone is sideways ===== */
.mctl{ display:flex; justify-content:center; gap:14px; margin-top:12px; }
.mbtn{ width:62px; height:62px; border-radius:50%; border:3px solid #0a1a4a; background:#fff; color:var(--ink); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0; padding:0; cursor:pointer; box-shadow:0 5px 0 #0a1a4a; font:inherit; touch-action:manipulation; }
.mbtn span{ font-size:24px; line-height:1; } .mbtn small{ font-size:.58em; font-weight:900; line-height:1.1; }
.mbtn.mint{ background:var(--mint,#2fd6b5); } .mbtn:disabled{ opacity:.45; }
.mbtn:active{ transform:translateY(3px); box-shadow:0 2px 0 #0a1a4a; }
.rotate-tip{ display:none; text-align:center; font-size:.8em; font-weight:800; opacity:.8; margin-top:10px; }
@media (orientation:portrait) and (pointer:coarse){ .mstage:not(.full) .rotate-tip{ display:block; } }
.mstage.full{ position:fixed; inset:0; z-index:9000; background:linear-gradient(rgba(6,20,40,.35),rgba(6,20,40,.55)),url(../media/cards/stadium-backdrop.webp) center/cover,#0b2a17; display:grid; place-items:center; padding:76px 8px 8px; }
.mstage.full.port{ padding:76px 8px 94px; }
.mstage.full.port .mctl{ flex-direction:row; right:auto; left:50%; transform:translateX(-50%); bottom:16px; gap:14px; }
.mstage.full #pwrap{ width:100%; }
.mstage.full canvas.pitch{ border-width:3px; border-radius:14px; box-shadow:0 0 30px rgba(0,0,0,.45); }
.mstage.full .mhud{ position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:2; width:min(420px,60vw); pointer-events:none; }
.mstage.full .scoreboard{ margin:0; gap:8px; background:rgba(10,26,74,.82); border-radius:99px; padding:4px 10px; color:#fff; }
.mstage.full .scoreboard .team span:not(.kitdot){ display:none; }
.mstage.full .scoreboard .kitdot{ width:26px; height:26px; flex-basis:26px; font-size:14px; }
.mstage.full .scoreboard .sc{ font-size:1.2em; padding:2px 12px; }
.mstage.full .timebar{ height:6px; border-width:0; margin:4px 18px 0; background:rgba(255,255,255,.35); }
.mstage.full .callout{ position:absolute; top:58px; left:50%; transform:translateX(-50%); margin:0; z-index:2; pointer-events:none; color:#fff;
  font-size:1em; text-shadow:0 2px 0 rgba(0,0,0,.5); white-space:nowrap; }
.mstage.full .hint{ display:none; }
.mstage.full .mctl{ position:absolute; right:12px; bottom:12px; margin:0; flex-direction:column; gap:10px; z-index:2; }
.mstage.full .mbtn{ width:54px; height:54px; opacity:.92; box-shadow:0 4px 0 #0a1a4a; }
.mstage.full .mbtn span{ font-size:21px; }
.mstage.full .rotate-tip{ display:none; }
@media (max-height:420px){ .mstage.full .mctl{ gap:6px; } .mstage.full .mbtn{ width:46px; height:46px; } .mstage.full .mbtn small{ display:none; } }

/* ===== Footballer Guide (guide.js): the Guide, the Footballer Bible, the Dictionary. Owned by the guide session. ===== */
.t-guide{ background:linear-gradient(150deg,#ffd23f,#ff9f43); }
.gbig{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:18px; }
.t-bible{ background:linear-gradient(150deg,#7b5cff,#3f78ff); color:#fff; } .t-dict{ background:linear-gradient(150deg,#2fd6b5,#4fc3ff); }
.grp .pill{ font-size:.75em; margin-left:6px; vertical-align:middle; }
.gpic{ margin:10px 0 6px; } .gart{ display:block; width:100%; height:auto; max-height:260px; border-radius:16px; background:#e8f7ff; }
.gart.night{ background:#0d2c86; } .gart.chart{ background:#fff8e6; }
.gphoto{ display:block; width:100%; height:auto; max-height:340px; object-fit:cover; border-radius:16px; border:3px solid var(--ink); margin-bottom:8px; background:#e8f7ff; aspect-ratio:1/1; }
.gphoto[src*="guide_why"],.gphoto[src*="guide_jobs"]{ aspect-ratio:16/9; }
.gsrc{ font-size:.66em; font-weight:700; opacity:.85; margin:10px 0 0; padding:8px 10px; background:#f2f0ff; border-radius:12px; overflow-wrap:anywhere; }
.gsrc .gurl{ display:block; font-weight:800; color:var(--grape2); }
.greasons{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0; }
.gchip{ display:inline-flex; align-items:center; gap:6px; min-height:48px; border:3px solid var(--ink); border-radius:999px; padding:6px 14px; background:#fff; font-weight:800; font-size:.85em; cursor:pointer; box-shadow:0 4px 0 var(--ink); }
.gchip.on{ background:var(--sun); } .gchip:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--ink); }
.gchip:focus-visible,.dword:focus-visible,.brule:focus-visible,.dletters button:focus-visible{ outline:4px dashed var(--grape2); outline-offset:3px; }
.glabel{ display:block; font-weight:900; font-size:.85em; margin-top:8px; }
#gNote{ width:100%; font:inherit; font-size:.9em; border:3px solid var(--ink); border-radius:16px; padding:10px 12px; margin-top:6px; resize:vertical; }
.gprivate{ font-size:.72em; font-weight:800; opacity:.8; margin:8px 0 0; }
.gdone .lico{ font-size:64px; }
.bible{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.brule{ position:relative; text-align:left; font:inherit; color:var(--ink); cursor:pointer; padding:14px; }
.brule h3{ margin:6px 0 4px; font-size:1.05em; } .brule p{ margin:0; font-weight:700; font-size:.88em; }
.brule .gart{ max-height:150px; }
.bnum{ position:absolute; top:-10px; left:-8px; z-index:1; width:42px; height:42px; border-radius:50%; background:var(--coral); color:#fff; border:3px solid var(--ink); display:grid; place-items:center; font-weight:900; font-size:1.05em; }
.gpromise{ margin-top:20px; }
.dsearch input{ width:100%; font:inherit; font-weight:800; min-height:58px; border:var(--line) solid var(--ink); border-radius:20px; padding:10px 16px; box-shadow:0 5px 0 var(--ink); }
.dkinds{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 10px; } .dkinds .gchip{ min-height:44px; font-size:.78em; padding:4px 12px; }
.dletters{ display:flex; flex-wrap:wrap; gap:6px; }
.dletters button{ width:40px; height:40px; border:3px solid var(--ink); border-radius:12px; background:#fff; font-weight:900; cursor:pointer; padding:0; }
.dcount{ font-weight:800; font-size:.8em; margin:10px 2px 0; }
.dlet{ margin:14px 4px 6px; font-size:1.3em; color:var(--grape2); scroll-margin-top:12px; }
.dlist{ display:flex; flex-direction:column; gap:8px; }
.dword{ display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:10px; text-align:left; width:100%; min-height:56px; border:3px solid var(--ink); border-radius:18px; background:#fff; padding:8px 14px; font:inherit; color:var(--ink); cursor:pointer; box-shadow:0 4px 0 var(--ink); }
.dword .dk{ font-size:1.2em; } .dword b{ font-size:1em; }
.dword.open{ background:#fff8e6; } .dword .dm,.dword .de{ grid-column:1/-1; font-weight:700; font-size:.88em; margin-top:6px; } .dword .de{ opacity:.85; font-style:italic; }
/* gentle motion; off in calm mode or reduced motion */
@keyframes gpulse{ 50%{ transform:scale(1.06); } } @keyframes gbounce{ 50%{ transform:translateY(-10px); } }
@keyframes gtilt{ 0%,100%{ transform:rotate(-3deg); } 50%{ transform:rotate(3deg); } } @keyframes gspin{ to{ transform:rotate(360deg); } }
@keyframes gfill{ from{ transform:scaleX(.15); } to{ transform:scaleX(1); } } @keyframes gdash{ to{ stroke-dashoffset:-24; } }
@keyframes gclimb{ 0%{ transform:translateY(0); } 100%{ transform:translateY(-124px); } } @keyframes gtick{ from{ opacity:0; } to{ opacity:1; } }
@keyframes gwave{ 50%{ transform:translateY(4px); } }
.gart .gpulse{ transform-box:fill-box; transform-origin:center; animation:gpulse 1.6s ease-in-out infinite; }
.gart .gbounce{ animation:gbounce .9s ease-in-out infinite; } .gart .gwave{ animation:gwave 2s ease-in-out infinite; }
.gart .gtilt{ transform-box:fill-box; transform-origin:center; animation:gtilt 3s ease-in-out infinite; }
.gart .gspin{ transform-box:view-box; transform-origin:95px 85px; animation:gspin 40s linear infinite; }
.gart .gfill{ transform-box:fill-box; transform-origin:left; animation:gfill 2.4s ease-out infinite alternate; }
.gart .gdash{ animation:gdash 1s linear infinite; } .gart .gclimb{ animation:gclimb 3s ease-in-out infinite alternate; }
.gart .gtick{ animation:gtick .4s ease-out both; }
@media (prefers-reduced-motion: reduce){ .gart *{ animation:none !important; } }
body.calm .gart *{ animation:none !important; }
.gqhead .dots{ flex-wrap:wrap; gap:4px; min-width:0; } .gqhead .dots i{ width:14px; height:14px; border-width:2.5px; }
.gqhead .pill{ flex:0 0 auto; white-space:nowrap; }
.gchip,.dletters button,.dword,.brule,.dsearch input{ color:var(--ink); }
/* ===== end Footballer Guide ===== */

/* ===== Simplify (2026-10-18): 4-tile home, sub-menus, Learn hub, parent summary, certificate ===== */
.tiles.home4{ grid-template-columns:1fr 1fr; gap:16px; }
.tiles.home4 .tile{ min-height:170px; font-size:1.25em; }
.tiles.home4 .tile .ico{ font-size:64px; }
.tiles.home4 .tile:only-child,.tiles.home4 .tile:nth-child(3):last-child{ grid-column:1/-1; }
.homerow{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:20px; }
.minibtn{ min-height:48px; padding:8px 16px; border:3px solid #0a1a4a; border-radius:999px; background:var(--paper); color:var(--ink); font:inherit; font-weight:800; font-size:.8em; cursor:pointer; }
.submenu{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.submenu .tile{ min-height:130px; }
.submenu .tile.t-school{ flex-direction:column; background:linear-gradient(135deg,var(--grape),#3f78ff); color:#fff; }
.moreon{ grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:-4px 0 6px; font-size:.85em; font-weight:800; }
.moreon .minibtn{ font-size:.85em; min-height:44px; }
.weeklist{ list-style:none; padding:0; margin:6px 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:4px 14px; }
.weeklist li{ font-size:16px; }
@media (max-width:420px){ .tiles.home4{ gap:12px; } .tiles.home4 .tile{ min-height:150px; font-size:1.1em; } .tiles.home4 .tile .ico{ font-size:52px; } .submenu{ grid-template-columns:1fr; } }

.cert{ background:#fff; color:#1d2a4d; border:6px double #c99a1e; border-radius:18px; padding:10px; }
.cert-in{ border:2px solid #c99a1e; border-radius:12px; padding:22px 18px; text-align:center; }
.cert-brand{ font-weight:900; letter-spacing:.2em; font-size:.8em; color:#0d2c86; }
.cert h1{ margin:8px 0 6px; font-size:1.7em; color:#0d2c86; text-shadow:none; }
.cert p{ margin:8px 0; font-size:16px; }
.cert-lead{ font-style:italic; }
.cert-name{ font-size:2em; font-weight:900; border-bottom:2px solid #c99a1e; display:inline-block; padding:0 14px 4px; margin:4px 0 10px; }
.cert-badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:12px 0; }
.cert-badges span{ display:flex; flex-direction:column; align-items:center; width:74px; font-size:26px; }
.cert-badges small{ font-size:10px; font-weight:700; line-height:1.15; }
.cert-next{ background:#fff8e6; border-radius:10px; padding:8px; }
.cert-foot{ display:flex; justify-content:space-between; margin-top:16px; font-weight:800; font-size:15px; }
.cert-small{ font-size:12px !important; opacity:.75; }
@media print{
  @page{ margin:12mm; }
  body{ background:#fff !important; }
  header.bar,#fx,#toast,.noprint{ display:none !important; }
  main#screen{ padding:0 !important; max-width:none !important; }
  .cert{ border-color:#c99a1e; box-shadow:none; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}
/* ===== end Simplify ===== */