/* ===== perfil: o teu cacifo no balneário, camisolas = cromos de equipamento (fase 6, ecrã 6, 29 out 2026) ===== */
.pf-stage{container-type:size;--u:min(1cqw,1.7778cqh);background:#07060a}
.land.home-on .pf-stage{width:var(--vw)}
.pf-scene{position:absolute;left:50%;top:50%;width:max(100cqw,177.78cqh);aspect-ratio:16/9;transform:translate(-50%,-50%);container-type:inline-size}
.pf-scene img,.pf-scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.pf-grade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 75% at 50% 42%,transparent 50%,rgba(0,0,0,.45))}
.pf-plate{position:absolute;left:44.2%;top:19.4%;width:11.75%;height:2.5%;display:grid;place-items:center;pointer-events:none;font-family:var(--f-display);font-weight:700;font-size:1.25cqw;letter-spacing:.22em;text-transform:uppercase;color:rgba(28,24,20,.82);text-shadow:0 .06cqw 0 rgba(255,255,255,.45),0 -.04cqw 0 rgba(0,0,0,.5);white-space:nowrap;overflow:hidden}
.pf-badge{position:absolute;top:26.6%;transform:translate(-50%,-100%);width:2.3cqw;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;pointer-events:none;font-family:var(--f-display);font-weight:700;font-size:.85cqw;line-height:1;color:#1a1206;background:radial-gradient(circle at 35% 30%,#fff3c4,#ffc440 40%,#a8741a 85%);box-shadow:0 0 1.2cqw rgba(255,196,64,.55),inset 0 0 0 .12cqw rgba(255,255,255,.35),0 .25cqw .4cqw rgba(0,0,0,.6)}
.pf-badge.off{filter:grayscale(1) brightness(.45);box-shadow:inset 0 0 0 .12cqw rgba(255,255,255,.15),0 .25cqw .4cqw rgba(0,0,0,.6);opacity:.8}
.pf-photo{position:absolute;left:43.05%;top:36.6%;width:1.35%;height:3.3%;display:grid;place-items:center;pointer-events:none;border-radius:.1cqw;font-family:var(--f-display);font-weight:700;font-size:.85cqw}
.pf-hot{position:absolute;border:0;padding:0;cursor:pointer;background:transparent;border-radius:.4cqw;transition:background .25s,box-shadow .25s}
.pf-hot:hover,.pf-hot:focus-visible{background:rgba(255,236,200,.08);box-shadow:0 0 0 .12cqw rgba(255,214,140,.5);outline:none}
.pf-hud{position:absolute;left:2.2%;top:4%;z-index:20;display:grid;gap:calc(.6*var(--u));justify-items:start;max-width:calc(36*var(--u))}
.pf-hud .ey{font-family:var(--f-display);font-weight:500;font-size:calc(1.05*var(--u));letter-spacing:.22em;text-transform:uppercase;color:#9fb0cc}
.pf-hud h2{margin:0;font-family:var(--f-display);font-weight:700;font-size:calc(3.2*var(--u));line-height:1;text-transform:uppercase;color:#fff;text-shadow:0 calc(.3*var(--u)) calc(1.2*var(--u)) rgba(0,0,0,.7);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-hud .club{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-display);font-size:calc(1.2*var(--u));letter-spacing:.08em;text-transform:uppercase;color:#d9e2f2}
.pf-hud .club i{width:calc(1*var(--u));height:calc(1*var(--u));border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.3)}
.pf-hud .chip{display:inline-flex;gap:.4em;padding:calc(.3*var(--u)) calc(.9*var(--u));border-radius:999px;background:rgba(8,7,10,.66);box-shadow:inset 0 0 0 1px rgba(255,196,64,.5);font-family:var(--f-display);font-size:calc(1.05*var(--u));letter-spacing:.08em;text-transform:uppercase;color:#ffd98a}
.pf-hud .chip b{color:#fff}
.pf-hud .r{display:flex;gap:calc(.6*var(--u))}
.pf-hud .hb{border:0;cursor:pointer;padding:calc(.5*var(--u)) calc(1.2*var(--u));border-radius:999px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff;font-family:var(--f-display);font-weight:600;font-size:calc(1.15*var(--u));letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.pf-hud .hb.main{background:var(--fade);color:var(--on-accent);box-shadow:none}
.pf-board{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);z-index:15;display:flex;gap:calc(.4*var(--u));padding:calc(.5*var(--u));border-radius:calc(1.2*var(--u));background:rgba(8,7,10,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,220,170,.14),0 calc(1*var(--u)) calc(3*var(--u)) rgba(0,0,0,.6)}
.pf-board div{display:grid;justify-items:center;min-width:calc(9.5*var(--u));padding:calc(.4*var(--u)) calc(.6*var(--u))}
.pf-board div+div{box-shadow:-1px 0 0 rgba(255,255,255,.08)}
.pf-board b{font-family:var(--f-display);font-weight:700;font-size:calc(2.4*var(--u));line-height:1.05;color:#fff}
.pf-board span{font-family:var(--f-display);font-size:calc(.9*var(--u));letter-spacing:.14em;text-transform:uppercase;color:#bfae92;white-space:nowrap}
.pf-board .hi b{background:var(--fade);-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-pick,.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.pf-pick button,.pf-grid div{display:grid;justify-items:center;gap:2px;padding:6px 4px;border:0;border-radius:10px;background:rgba(255,255,255,.05);color:var(--fg);font-family:var(--f-display);font-size:.72rem;letter-spacing:.03em;cursor:pointer;text-align:center}
.pf-pick button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #ffc440;background:rgba(255,196,64,.1)}
.pf-pick svg,.pf-grid svg{width:54px;height:54px}
.pf-grid div{cursor:default}.pf-grid .miss{opacity:.35;filter:grayscale(1)}
.pf-ach{display:grid;gap:8px}
.pf-ach div{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05)}
.pf-ach .m{width:34px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:.8rem;color:#1a1206;background:radial-gradient(circle at 35% 30%,#fff3c4,#ffc440 40%,#a8741a 85%)}
.pf-ach .off .m{filter:grayscale(1) brightness(.5)}
.pf-ach small{display:block;color:var(--muted)}
.pf-ach em{font-style:normal;font-family:var(--f-display);color:#ffc440}.pf-ach .off em{color:var(--muted)}
/* cromo de equipamento */
.pf-kc{display:grid;justify-items:center;gap:2px;aspect-ratio:5/7;width:100%;padding:8% 6%;border-radius:8px;background:radial-gradient(120% 80% at 50% 0,color-mix(in srgb,var(--c) 55%,#fff 0%),#0e1a30 75%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 6px 14px rgba(0,0,0,.5);color:#fff;font-family:var(--f-display);text-align:center;line-height:1.1}
.pf-kc-art{width:100%;display:grid;place-items:center;flex:1}
.pf-kc small{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#ffc440}
.pf-kc b{font-size:.85rem;text-transform:uppercase}
.pf-kc span{font-size:.7rem;color:#c9d4e6}
