/* Layout: FUTF11 — fundações aprovadas na fase 1: azul-noite com riscas de relva, focos de luz e o arco da grande área; destaque no degradê coral → dourado; Oswald + Barlow; menu em cápsula escura em baixo. Tema escuro único. */
:root{--vh:1vh;--vw:100vw;
  --night:#0e1a30; --night-2:#13223d; --night-3:#1b2d4c; --line:rgba(255,255,255,.12);
  --chalk:#f3f5f9; --muted:#aab6c8; --flood:#ffc440; --coral:#ff5a5f; --flood-soft:rgba(255,196,64,.14); --on-accent:#1a1206;
  --fade:linear-gradient(90deg,#ff5a5f 0%,#ff8a4c 45%,#ffc440 100%);
  --pitch:#2f7d55; --pitch-2:#3a8d63; --good:#3ddc84; --bad:#ff5a5f;
  --bronze:#cd8a52; --prata:#cfd8e2; --ouro:#ffcf3d;
  --f-display:"Oswald","Impact","Arial Narrow",sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-num:"Oswald","Arial Narrow",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--chalk);font-family:var(--f-body);font-size:15px;line-height:1.45;
  background:radial-gradient(60% 40% at 18% -8%,rgba(255,196,64,.22),transparent 70%),radial-gradient(60% 40% at 82% -8%,rgba(255,90,95,.16),transparent 70%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 48px,transparent 48px 96px),linear-gradient(180deg,#14223d,#0e1a30 55%,#0a1424);background-attachment:fixed;background-color:#0e1a30}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--flood);outline-offset:2px}
.app{max-width:460px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;position:relative}
.proto{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:4px 16px;background:rgba(0,0,0,.25);color:var(--muted);font-weight:600}
header.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px 6px}
.brand{font-family:var(--f-display);font-weight:700;font-size:1.6rem;letter-spacing:.01em;line-height:1;min-width:0}
.brand em{font-style:normal;background:var(--fade);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand small{display:block;font-family:var(--f-body);font-size:.72rem;color:var(--muted);letter-spacing:.04em;margin-top:3px}
.pill{display:inline-grid;justify-items:center;line-height:1.05;padding:4px 10px;border-radius:12px;background:var(--night-2);border:1px solid var(--line);font-size:.66rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.pill b{font-family:var(--f-num);font-size:1.05rem;color:var(--chalk);font-variant-numeric:tabular-nums}
main{flex:1;padding:6px 16px 96px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start}
main>*{min-width:0}
h2{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:1.6rem;letter-spacing:.01em;margin:4px 0 0;line-height:1.05;text-wrap:balance}
h3{font-family:var(--f-num);font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;margin:0;color:var(--muted)}
p{margin:0}
.lead{color:var(--muted);font-size:.92rem}
.panel{background:var(--night-2);border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:10px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px}
.btn{border:0;border-radius:12px;padding:11px 16px;font-family:var(--f-display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;background:var(--fade);color:var(--on-accent);box-shadow:0 4px 0 #b8562f,0 8px 18px rgba(255,120,80,.22);transition:transform .12s,box-shadow .12s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #b8562f}
.btn.ghost{background:rgba(255,255,255,.06);color:var(--chalk);border:0;box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:active{transform:translateY(2px)}
.btn.small{padding:7px 12px;font-size:.85rem}
.btn:disabled{opacity:.4;cursor:default}
.note{font-size:.78rem;color:var(--muted)}
.bar{height:9px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--fade);border-radius:99px;box-shadow:0 0 12px rgba(255,170,70,.45)}
.tag{font-family:var(--f-num);font-weight:500;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.08);color:var(--muted)}
.tag.new{background:var(--fade);color:var(--on-accent)}
/* progresso (topo do estádio) */
.stadium{position:relative;border-radius:16px;overflow:hidden;padding:14px 16px;display:grid;gap:6px;background:rgba(5,11,24,.55);border:1px solid var(--line)}
.stadium .big{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:2rem;line-height:1}
.stadium .sub{font-size:.85rem;color:var(--muted)}
/* cena do estádio: bancadas com público ao fundo, luz dos holofotes e o arco da grande área */
.scene{position:relative;border-radius:18px;overflow:hidden;padding:18px 10px 16px;border:1px solid var(--line);
  background:radial-gradient(70% 45% at 50% 0,rgba(255,196,64,.18),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.02) 70px,rgba(0,0,0,.18) 71px,rgba(0,0,0,.05) 100%)}
.scene::before{content:"";position:absolute;left:0;right:0;top:0;height:70px;opacity:.12;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent);
  background:repeating-linear-gradient(0deg,transparent 0 9px,rgba(255,255,255,.6) 9px 10px),repeating-linear-gradient(90deg,#ff5a5f 0 4px,transparent 4px 9px,#ffc440 9px 13px,transparent 13px 18px,#6cc4ff 18px 22px,transparent 22px 27px)}
.scene::after{content:"";position:absolute;left:8%;right:8%;bottom:-40px;height:110px;border:2px solid rgba(255,255,255,.12);border-radius:50% 50% 0 0}
.hub{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}
.hubitem{background:none;border:0;padding:0;display:grid;justify-items:center;gap:6px;color:var(--chalk);position:relative;animation:float 4.5s ease-in-out infinite;animation-delay:var(--d,0s)}
.hubitem .sign{background:#fff;color:#0e1a30;border-radius:10px;padding:6px 12px;font-family:var(--f-num);font-weight:700;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;line-height:1.1;box-shadow:0 3px 0 rgba(0,0,0,.35),0 8px 16px rgba(0,0,0,.3);transform:rotate(-1.5deg);transition:transform .25s}
.hubitem:nth-child(even) .sign{transform:rotate(1.5deg)}
.hubitem .obj{width:100%;max-width:150px;aspect-ratio:4/3;display:grid;place-items:center;filter:drop-shadow(0 10px 10px rgba(0,0,0,.45));transition:transform .3s}
.hubitem .obj svg{width:100%;height:100%;overflow:visible}
.hubitem .sub{font-size:.74rem;font-weight:600;color:var(--chalk);background:rgba(5,11,24,.7);border-radius:999px;padding:2px 9px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hubitem:hover .obj,.hubitem:focus-visible .obj{transform:translateY(-6px) scale(1.07)}
.hubitem:hover .sign,.hubitem:focus-visible .sign{transform:rotate(0) scale(1.06)}
.hubitem:active .obj{transform:scale(.96)}
.badge{position:absolute;top:-8px;right:4px;background:var(--bad);color:#fff;font-weight:700;font-size:.7rem;border-radius:999px;padding:2px 8px;animation:pulse 1.6s ease-in-out infinite;z-index:2;box-shadow:0 2px 6px rgba(0,0,0,.2)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
/* animação de cada objeto */
.obj svg *{transform-box:fill-box}
.packstack .p{transform-origin:50% 100%;animation:wiggle 3.4s ease-in-out infinite}
.packstack .p2{animation-delay:.12s}.packstack .p3{animation-delay:.24s}
@keyframes wiggle{0%,78%,100%{transform:rotate(0)}83%{transform:rotate(-7deg)}88%{transform:rotate(6deg)}93%{transform:rotate(-3deg)}}
.packstack .gloss{animation:gloss 3.4s ease-in-out infinite}
@keyframes gloss{0%,60%{transform:translateX(-60px)}80%,100%{transform:translateX(90px)}}
.book .cover{transform-origin:0% 50%;transition:transform .55s ease}
.hubitem:hover .book .cover,.hubitem:focus-visible .book .cover{transform:scaleX(.12)}
.book .pct{animation:pulse 2.4s ease-in-out infinite;transform-origin:50% 50%}
.fan .c{transform-origin:50% 100%;animation:fan 4s ease-in-out infinite}
.fan .c1{--r:-14deg}.fan .c2{--r:0deg;animation-delay:.2s}.fan .c3{--r:14deg;animation-delay:.4s}
@keyframes fan{0%,100%{transform:rotate(var(--r))}50%{transform:rotate(calc(var(--r) * 1.5)) translateY(-3px)}}
.swap .a{animation:swapA 3.6s ease-in-out infinite}.swap .b{animation:swapB 3.6s ease-in-out infinite}
@keyframes swapA{0%,35%{transform:translateX(0)}50%,85%{transform:translateX(44px)}100%{transform:translateX(0)}}
@keyframes swapB{0%,35%{transform:translateX(0)}50%,85%{transform:translateX(-44px)}100%{transform:translateX(0)}}
.mini .pdot{animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.55}50%{opacity:1}}
.trophy .t{transform-origin:50% 100%;animation:hop 2.8s ease-in-out infinite}
@keyframes hop{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-8px)}90%{transform:translateY(0)}}
.booth{position:relative;z-index:1;margin-top:16px;display:flex;gap:12px;align-items:center;background:rgba(5,11,24,.7);border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:0 6px 14px rgba(0,0,0,.3)}
.booth::before{content:"";position:absolute;left:0;right:0;top:-10px;height:12px;border-radius:8px 8px 0 0;background:repeating-linear-gradient(90deg,#ff5a5f 0 14px,#ffc440 14px 28px)}
.booth .logo{width:52px;height:52px;border-radius:10px;border:1.5px dashed var(--muted);display:grid;place-items:center;font-family:var(--f-num);font-size:.68rem;color:var(--muted);text-align:center;line-height:1.1;flex:none}
.soon{position:relative;z-index:1;margin-top:10px;text-align:center;font-size:.78rem;color:#fff;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.3)}
/* menu em cápsula horizontal, como o da Panini */
nav.tabs{position:fixed;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;justify-content:center;padding:0 10px;pointer-events:none}
nav.tabs .in{pointer-events:auto;display:flex;gap:2px;background:rgba(6,12,26,.94);border-radius:999px;padding:5px;box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 0 1px var(--line);max-width:100%;overflow-x:auto;scrollbar-width:none;backdrop-filter:blur(6px)}
nav.tabs button{flex:none;background:none;border:0;border-radius:999px;padding:9px 13px;font-family:var(--f-num);font-weight:500;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap;position:relative;transition:background .2s,color .2s}
nav.tabs button[aria-current="page"]{background:var(--fade);color:var(--on-accent);font-weight:600}
nav.tabs .nb{position:absolute;top:0;right:2px;background:var(--bad);color:#fff;border-radius:999px;font-size:.6rem;min-width:15px;height:15px;line-height:15px;padding:0 4px;font-family:var(--f-body)}
@media (max-width:400px){nav.tabs button{padding:8px 9px;font-size:.84rem}}
/* cromo */
.card{--c1:#333;--c2:#eee;position:relative;aspect-ratio:5/7;border-radius:12px;overflow:hidden;background:var(--c1);color:var(--c2);display:flex;flex-direction:column;box-shadow:0 0 0 3px var(--frame,rgba(255,255,255,.18)),0 8px 18px rgba(0,0,0,.45);max-width:100%}
.card .ovb{position:absolute;top:6px;left:6px;font-family:var(--f-num);font-weight:700;line-height:.9;text-align:center;background:rgba(0,0,0,.35);border-radius:8px;padding:4px 6px;z-index:2}
.card .ovb b{display:block;font-size:1.5em}
.card .ovb small{font-size:.7em;letter-spacing:.05em}
.card .num{position:absolute;top:2px;right:8px;font-family:var(--f-display);font-weight:700;font-size:2.4em;opacity:.35;z-index:1}
.card .art{flex:1;display:grid;place-items:end center;position:relative;overflow:hidden}
.card .art svg{width:78%;height:auto;display:block}
.card .nm{background:rgba(0,0,0,.4);padding:6px 6px 7px;text-align:center}
.card .nm b{display:block;font-family:var(--f-num);font-size:1.05em;text-transform:uppercase;letter-spacing:.03em;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .nm span{font-size:.72em;opacity:.85}
.card.rare{--frame:var(--flood)}
.card.rare::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);animation:shine 2.6s infinite;pointer-events:none;z-index:3}
@keyframes shine{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
.card.rare .art svg{animation:celebra 1.2s ease-in-out infinite}
@keyframes celebra{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-6%) rotate(-4deg)}75%{transform:translateY(-6%) rotate(4deg)}}
.f-bronze{--frame:var(--bronze)} .f-prata{--frame:var(--prata)} .f-ouro{--frame:var(--ouro)}
.slot{aspect-ratio:5/7;border-radius:12px;border:1.5px dashed var(--line);display:grid;place-items:center;align-content:center;gap:2px;color:var(--muted);text-align:center;padding:6px;background:rgba(255,255,255,.04)}
.slot b{font-family:var(--f-display);font-weight:700;font-size:1.8rem;opacity:.5}
.slot span{font-size:.7rem}
.grid4{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;font-size:12px}
@media(min-width:420px){.grid4{grid-template-columns:repeat(4,minmax(0,1fr));font-size:11px}}
.grid4>*{min-width:0}
.cell{position:relative;background:none;border:0;padding:0;text-align:left}
.cnt{position:absolute;bottom:-6px;right:-4px;background:var(--fade);color:var(--on-accent);font-weight:700;font-size:.75rem;border-radius:99px;padding:1px 7px;z-index:4}
.clubs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.clubs button{flex:none;border:1.5px solid var(--line);background:rgba(255,255,255,.06);border-radius:999px;padding:6px 12px;font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:6px}
.clubs button[aria-pressed="true"]{border-color:transparent;background:var(--fade);color:var(--on-accent)}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
/* overlay */
.overlay{position:fixed;inset:0;background:rgba(4,9,20,.93);z-index:50;display:grid;place-items:center;padding:20px 16px}
.sheet{width:100%;max-width:420px;max-height:100%;overflow:auto;background:#13223d;border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:12px;box-shadow:0 20px 40px rgba(0,0,0,.5)}
.reveal{width:100%;max-width:360px;display:grid;gap:16px;justify-items:center;text-align:center;color:#fff}
.reveal .note{color:#c5d0dc}
.reveal .stage{width:230px;font-size:15px;display:grid;place-items:center;min-height:322px}
.clue{display:grid;gap:10px;justify-items:center;animation:rise .5s ease-out}
.clue .say{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:1.9rem;line-height:1.05}
.clue .bigpos{font-family:var(--f-display);font-weight:700;font-size:5.5rem;line-height:.9;background:var(--fade);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes rise{from{transform:translateY(16px) scale(.96);opacity:.2}to{transform:none;opacity:1}}
.flood{position:fixed;inset:0;pointer-events:none;background:radial-gradient(40% 50% at 30% 0,rgba(255,210,63,.25),transparent 70%),radial-gradient(40% 50% at 70% 0,rgba(255,210,63,.25),transparent 70%);animation:sweep 1.6s ease-in-out infinite alternate}
@keyframes sweep{from{opacity:.4}to{opacity:1}}
.flip{perspective:900px;width:100%}
.flip .inner{position:relative;transition:transform .5s;transform-style:preserve-3d}
.flip.on .inner{transform:rotateY(180deg)}
.flip .face,.flip .back{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.flip .back{position:absolute;inset:0;transform:rotateY(180deg);border-radius:12px;background:var(--night-3);border:1px solid var(--line);padding:12px;display:grid;gap:8px;align-content:start;font-size:13px}
.stat{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
.formbars{display:flex;gap:4px;align-items:end;height:44px}
.formbars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(0deg,#ff5a5f,#ffc440)}
.reg{display:flex;gap:6px}
.reg i{width:16px;height:16px;border-radius:50%;background:var(--night-2);border:2px solid var(--line)}
.reg i.on{background:var(--good);border-color:var(--good)}
/* onze */
.pitchbox{background:repeating-linear-gradient(0deg,var(--pitch) 0 40px,var(--pitch-2) 40px 80px);border-radius:14px;padding:12px 8px;display:grid;gap:12px;position:relative}
.pitchbox .line{display:flex;justify-content:center;gap:8px}
.pitchbox .pc{width:23%;max-width:86px;font-size:9px}
.pitchbox .empty{aspect-ratio:5/7;border-radius:10px;border:1.5px dashed rgba(241,238,228,.6);display:grid;place-items:center;font-family:var(--f-num);font-size:12px;color:#fff;background:rgba(0,0,0,.12)}
.list{display:grid;gap:8px}
.li{display:flex;align-items:center;gap:10px;background:var(--night-2);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.li .mini{width:44px;flex:none;font-size:6px}
.li .tx{flex:1;min-width:0}
.li .tx b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .tx span{font-size:.8rem;color:var(--muted)}
.score{font-family:var(--f-num);font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums}
.qr{width:150px;height:150px;background:#fff;padding:8px;border-radius:10px;border:1px solid var(--line)}
.toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);background:var(--chalk);color:var(--night);font-weight:600;padding:10px 16px;border-radius:10px;z-index:60;max-width:90%;text-align:center}
input[type=text],input[type=number],select{font:inherit;color:var(--chalk);background:var(--night-3);border:1.5px solid var(--line);border-radius:8px;padding:9px 10px;width:100%}
.packs{display:grid;gap:10px}
.pack{display:flex;gap:12px;align-items:center;background:var(--night-2);border:1px solid var(--line);border-radius:14px;padding:12px}
.pack .foil{width:54px;height:74px;border-radius:8px;flex:none;background:linear-gradient(135deg,var(--flood),#f59e0b 45%,var(--flood) 55%,#b45309);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;color:var(--on-accent);font-size:1.1rem}
.pack .foil.green{background:linear-gradient(135deg,var(--good),var(--pitch) 50%,var(--good))}
.pack .foil.free{background:linear-gradient(135deg,var(--chalk),var(--muted));font-size:.78rem}
.pack .tx{flex:1;min-width:0}
.pack .tx b{display:block}
.pack .tx span{font-size:.8rem;color:var(--muted)}
.avatar{background:none;border:0;padding:0;border-radius:50%}
.av{display:inline-grid;place-items:center;border-radius:50%;font-family:var(--f-display);font-weight:700;letter-spacing:.02em;box-shadow:0 0 0 2px var(--flood)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stats div{background:var(--night-3);border-radius:10px;padding:8px;text-align:center}
.stats b{display:block;font-family:var(--f-num);font-size:1.4rem;font-variant-numeric:tabular-nums}
.stats span{font-size:.72rem;color:var(--muted)}
.dirty{color:var(--flood);font-size:.8rem;font-weight:600}
.home,.two{display:grid;gap:14px}
.home>div,.two>div{display:grid;gap:14px;align-content:start;min-width:0}
.rotate{display:none}
details{background:var(--night-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
summary{cursor:pointer;font-weight:600}
.dirty{color:var(--flood)}

/* telemóvel: altura real do ecrã, sem a barra do browser */
@supports (height:100dvh){:root{--vh:1dvh}}