/* 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 ===== */
.tcard{ width:220px; max-width:100%; height:300px; margin:10px auto; perspective:900px; cursor:pointer; }
.tc-inner{ position:relative; width:100%; height:100%; transition:transform .6s; transform-style:preserve-3d; }
.tcard.flip .tc-inner{ transform:rotateY(180deg); }
.tc-front,.tc-back{ position:absolute; inset:0; border:5px solid #0a1a4a; border-radius:20px; backface-visibility:hidden; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; box-shadow:0 8px 0 #0a1a4a; color:var(--ink); }
.tc-front{ background:linear-gradient(150deg,#fff3b0 0%,#ffd23f 40%,#f5a623 70%,#ffe680 100%); }
.tc-back{ background:linear-gradient(150deg,#dfe7ff,#9fb6ff); transform:rotateY(180deg); font-weight:800; }
.tc-shine{ position:absolute; inset:-40%; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%); animation:shine 3s ease-in-out infinite; pointer-events:none; }
@keyframes shine{ 0%{ transform:translateX(-60%) } 60%,100%{ transform:translateX(60%) } }
.tc-ovr{ font-family:var(--head); font-size:2.6em; line-height:1; } .tc-pos{ font-weight:900; background:#0a1a4a; color:#fff; border-radius:8px; padding:2px 8px; }
.tc-name{ font-family:var(--head); font-style:italic; text-transform:uppercase; }
.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; } }