/* You On The Pitch: tabellone sportivo + carte da collezione. Ogni partita mostra i posti come caselle; quelle vuote tratteggiate. */
:root {
  --bg: #F1F3F6; --surface: #FFFFFF; --ink: #111B2B; --muted: #5A6678; --line: #D9DFE7; --slot: #E7EBF0;
  --accent: #E04A1F; --accent-ink: #FFFFFF; --accent-soft: #FCE5DC; --ok: #1C7A4B; --ok-soft: #DCF1E5; --down: #B42318;
  --s-calcetto: #1F7A4D; --s-calciotto: #2F8F5B; --s-calcio: #14532D; --s-basket: #D2571F; --s-volley: #2E64C8; --s-beach: #B07D12; --s-padel: #0E8080; --s-tennis: #6E8A14;
  --shadow: 0 1px 2px rgba(17,27,43,.06), 0 6px 18px rgba(17,27,43,.07);
  --f-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #0C131D; --surface: #141F2E; --ink: #E8EDF4; --muted: #98A5B7; --line: #24344A; --slot: #1C2939;
  --accent: #FF6E42; --accent-ink: #1A0A04; --accent-soft: #3A1E14; --ok: #45C389; --ok-soft: #15342A; --down: #FF7B72;
  --shadow: 0 1px 2px rgba(0,0,0,.35); color-scheme: dark;
} }
* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--f-body); padding-top: env(safe-area-inset-top, 0px); }
body.locked { overflow: hidden }
button, input, select, textarea { font: inherit; color: inherit }
img { max-width: 100% }
[hidden] { display: none !important }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: .01em }
.wrap { max-width: 980px; margin-inline: auto; padding-inline: 16px }

/* header */
.top { position: sticky; top: 0; z-index: 10; background: var(--surface); border-bottom: 1px solid var(--line) }
.topin { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 10px }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 800; font-size: 25px; text-transform: uppercase; white-space: nowrap }
.jersey { display: grid; place-items: center; width: 34px; height: 36px; background: var(--accent); color: var(--accent-ink); font-size: 25px; clip-path: polygon(22% 0, 78% 0, 100% 18%, 88% 34%, 88% 100%, 12% 100%, 12% 34%, 0 18%) }
.topactions { display: flex; gap: 6px; min-width: 0 }
.loc { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: none; border-radius: 999px; padding: 5px 12px; cursor: pointer; color: var(--muted); font-size: 13px; min-width: 0 }
.loc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw }
.langbtn { border: 1px solid var(--line); background: none; border-radius: 999px; padding: 5px 10px; cursor: pointer; font-weight: 700; font-size: 12px; letter-spacing: .06em }
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none }
.tabs button { border: 0; background: none; padding: 9px 12px 10px; cursor: pointer; font: 600 17px var(--f-display); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap }
.tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--accent) }
.cnt { display: inline-block; margin-left: 5px; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 11px/18px var(--f-body); text-align: center; vertical-align: 2px }

main { padding-block: 20px 80px; display: flex; flex-direction: column; gap: 26px }
.section { display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap }
.sechead h2 { font-size: 28px; text-transform: uppercase }
.h3 { font-size: 21px; text-transform: uppercase; letter-spacing: .03em }
.sechead p { margin: 0; color: var(--muted); font-size: 13px }
.ghost { color: var(--muted); font-size: 13px; margin: 0 }
.banner { border: 1px dashed var(--line); background: var(--surface); border-radius: var(--r); padding: 10px 14px; font-size: 13px; color: var(--muted) }
.linkbtn { border: 0; background: none; color: var(--accent); font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.note { margin: 0; font-size: 13px; color: var(--muted); background: var(--surface); border-left: 3px solid var(--accent); padding: 8px 12px; border-radius: 4px }

/* hero onboarding */
.hero { display: flex; gap: 18px; align-items: center; background: var(--ink); color: var(--bg); border-radius: 16px; padding: 22px; overflow: hidden; position: relative }
.hero h1 { font-size: clamp(34px, 7vw, 56px); font-style: italic; font-weight: 800; text-transform: uppercase }
.hero p { margin: 8px 0 0; max-width: 56ch; opacity: .85 }
.hero-num { flex: none; font: italic 800 clamp(90px, 18vw, 150px)/0.8 var(--f-display); color: var(--accent); text-shadow: 0 0 40px color-mix(in srgb, var(--accent) 50%, transparent) }

/* match cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; box-shadow: var(--shadow); min-width: 0; transition: transform .15s, border-color .15s }
.card:hover { border-color: var(--muted); transform: translateY(-1px) }
.cardhead { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.card h3 { font-size: 22px; overflow-wrap: anywhere }
.meta { display: flex; flex-wrap: wrap; gap: 3px 12px; color: var(--muted); font-size: 13px }
.meta .fly { color: var(--accent); font-weight: 600 }
.sport { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em }
.sport::before, .dot { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--sc, var(--muted)); display: inline-block; flex: none }
.s-calcetto { --sc: var(--s-calcetto) } .s-calciotto { --sc: var(--s-calciotto) } .s-calcio { --sc: var(--s-calcio) } .s-basket { --sc: var(--s-basket) }
.s-volley { --sc: var(--s-volley) } .s-beach { --sc: var(--s-beach) } .s-padel { --sc: var(--s-padel) } .s-tennis { --sc: var(--s-tennis) }
.need { font: 700 15px var(--f-display); text-transform: uppercase; letter-spacing: .03em; padding: 1px 9px; border-radius: 6px; background: var(--slot); white-space: nowrap }
.need.hot { background: var(--accent); color: var(--accent-ink) }
.need.mine, .need.done { background: var(--ok-soft); color: var(--ok) }
.rolechips { display: flex; flex-wrap: wrap; gap: 5px }
.rchip { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent) }
.rchip.hit { background: var(--accent); color: var(--accent-ink); animation: pulse 1.6s ease-in-out infinite }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent) } }
.slots { display: flex; flex-wrap: wrap; gap: 4px }
.slot { width: 26px; height: 26px; border-radius: 7px; overflow: hidden; background: var(--slot) }
.slot img { width: 100%; height: 100%; object-fit: cover; display: block }
.slot.empty { background: none; border: 1.5px dashed var(--muted); opacity: .7 }
.slot.me { outline: 2px solid var(--accent); outline-offset: 1px }

/* chips, buttons, forms */
.chips { display: flex; flex-wrap: wrap; gap: 6px }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 13px; font-weight: 600 }
.chip[aria-pressed=true] { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 9px; padding: 9px 16px; cursor: pointer; font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
.btn.small { padding: 5px 10px; font-size: 13px }
.btn:disabled { opacity: .5; cursor: wait }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 16px; min-width: 0 }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; min-width: 0 }
.fields .wide { grid-column: 1 / -1 }
.grow { flex: 1; min-width: 0 }
.f { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); min-width: 0 }
.f input, .f select, select.inline, .inline-f select { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; width: 100%; min-width: 0 }
select.inline { width: auto }
.inline-f { flex-direction: row; align-items: center; gap: 8px }
.hint { font-size: 12px; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 400 }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer }
.check input { accent-color: var(--accent); width: 17px; height: 17px }
input[type=range] { accent-color: var(--accent); padding: 0 !important; border: 0 !important; background: none !important }
.profiletop { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start }
.photo { position: relative; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; cursor: pointer; flex: none; border: 3px solid var(--accent); background: var(--slot) }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block }
.photo span { position: absolute; inset: auto 0 0 0; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 700; text-align: center; padding: 4px 0 8px; text-transform: uppercase; letter-spacing: .08em }
.placebox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; text-transform: none; letter-spacing: 0 }
.placechip { font-size: 15px; font-weight: 700; color: var(--ink); background: var(--accent-soft); padding: 6px 12px; border-radius: 999px }
.placechip small { color: var(--muted); font-weight: 600; margin-left: 4px }
.placechip.none { background: var(--slot); color: var(--muted); font-weight: 500 }
.results { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); text-transform: none; letter-spacing: 0 }
.results button { text-align: left; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 9px 12px; cursor: pointer; font-weight: 600; display: flex; justify-content: space-between; gap: 10px }
.results button:hover { background: var(--slot) }
.results small { color: var(--muted); font-weight: 400 }
.results .ghost { padding: 9px 12px }
.sports { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px }
.sportrow { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.sportrow.on { border-color: var(--ink) }
.sp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.sp-fields .f:last-child { grid-column: 1 / -1 }

.empty { background: var(--surface); border: 1.5px dashed var(--line); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start }
.empty h3 { font-size: 22px } .empty p { margin: 0; color: var(--muted); max-width: 60ch }

/* player cards (figurine) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px }
.cardcell { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; min-width: 0 }
.rolelabel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted) }
.gain { font: 700 15px var(--f-display); } .gain.up { color: var(--ok) } .gain.down { color: var(--down) }
.pcard {
  --c1: #7A4A22; --c2: #D29A62; --c3: #F4D2A8; --txt: #2B1606;
  position: relative; width: 170px; aspect-ratio: 5 / 7; max-width: 100%; border-radius: 14px; padding: 10px 10px 8px; cursor: pointer;
  background: linear-gradient(155deg, var(--c3) 0%, var(--c2) 38%, var(--c1) 100%); color: var(--txt);
  display: flex; flex-direction: column; align-items: center; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,.22), inset 0 0 0 2px rgba(255,255,255,.35);
  clip-path: polygon(0 6%, 6% 0, 94% 0, 100% 6%, 100% 92%, 50% 100%, 0 92%); transition: transform .2s;
}
.pcard:hover { transform: translateY(-3px) rotate(-1deg) }
.tier-silver { --c1: #5E6875; --c2: #B9C2CC; --c3: #F1F4F7; --txt: #1C232C }
.tier-gold { --c1: #8A5C06; --c2: #E7B53C; --c3: #FFF0B8; --txt: #2A1A00 }
.tier-legend { --c1: #2A0E57; --c2: #7B2FD0; --c3: #E39CFF; --txt: #FFFFFF }
.tier-legend .pc-shine, .tier-gold .pc-shine { animation: shine 3.2s ease-in-out infinite }
.pc-shine { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); transform: translateX(-60%); pointer-events: none }
@keyframes shine { 0%, 55% { transform: translateX(-60%) } 100% { transform: translateX(60%) } }
.pc-head { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; font-family: var(--f-display); line-height: 1 }
.pc-val { font-size: 30px; font-weight: 800 }
.pc-role { font-size: 16px; font-weight: 800; padding-top: 4px }
.pc-tier { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding-top: 6px; opacity: .8 }
.pc-photo { width: 62%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; margin-top: 2px; border: 3px solid rgba(255,255,255,.7); box-shadow: 0 4px 12px rgba(0,0,0,.25) }
.pc-name { font: 800 17px/1.05 var(--f-display); text-transform: uppercase; text-align: center; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100% }
.pc-stats { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; margin-top: 5px; border-top: 1px solid currentColor; padding-top: 4px; font-size: 9px; font-weight: 700; text-align: center; opacity: .9 }
.pc-stats b { display: block; font: 800 14px/1 var(--f-display) }
.pc-foot { font-size: 9px; font-weight: 600; margin-top: auto; margin-bottom: 6px; opacity: .75; text-transform: uppercase; letter-spacing: .05em; text-align: center }
.pcard.big { width: 240px }
.pcard.big .pc-val { font-size: 42px } .pcard.big .pc-name { font-size: 24px } .pcard.big .pc-stats { font-size: 11px } .pcard.big .pc-stats b { font-size: 19px }
.pcard.spin { animation: cardspin 1.4s cubic-bezier(.2,.8,.2,1) both }
.pcard.flip { animation: cardflip .9s cubic-bezier(.2,.8,.2,1) both }
@keyframes cardspin { from { transform: perspective(800px) rotateY(540deg) scale(.4); opacity: 0 } to { transform: perspective(800px) rotateY(0) scale(1); opacity: 1 } }
@keyframes cardflip { from { transform: perspective(800px) rotateY(180deg) scale(.9) } to { transform: perspective(800px) rotateY(0) scale(1) } }
.spark { width: 100%; max-width: 250px; height: auto }
.spark .area { fill: color-mix(in srgb, var(--accent) 14%, transparent) } .spark .line { fill: none; stroke: var(--accent); stroke-width: 2 } .spark .end { fill: var(--accent) }
.tierdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: linear-gradient(135deg, var(--c3), var(--c1)) }
.tierdot.tier-bronze { --c1: #7A4A22; --c3: #F4D2A8 }

/* table */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface) }
table.rank { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px }
.rank th, .rank td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap }
.rank th { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted) }
.rank th:nth-child(2), .rank td:nth-child(2), .rank th:nth-child(3), .rank td:nth-child(3) { text-align: left }
.rank tr[data-act] { cursor: pointer } .rank tbody tr:hover { background: var(--slot) }
.rank .meRow { background: var(--accent-soft) }
.who { display: inline-flex; align-items: center; gap: 8px; font-weight: 600 }
.who img { width: 28px; height: 28px; border-radius: 50% }

/* sheet */
.overlay { position: fixed; inset: 0; z-index: 30; background: rgba(6,10,18,.6); display: flex; align-items: flex-end; justify-content: center; animation: fade .15s }
@media (min-width: 720px) { .overlay { align-items: center; padding: 24px } }
@keyframes fade { from { opacity: 0 } }
.sheet { background: var(--bg); width: 100%; max-width: 720px; max-height: 92vh; overflow: auto; border-radius: 18px 18px 0 0; padding: 18px 16px calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 16px; animation: up .22s cubic-bezier(.2,.8,.2,1) }
@media (min-width: 720px) { .sheet { border-radius: 18px; padding: 24px } }
@keyframes up { from { transform: translateY(30px); opacity: 0 } }
.sheet h2 { font-size: 32px; overflow-wrap: anywhere }
.sheethead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start }
.col { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.close { border: 0; background: var(--slot); border-radius: 50%; width: 36px; height: 36px; cursor: pointer; font-size: 18px; flex: none }
.tags { display: flex; flex-wrap: wrap; gap: 5px }
.tag { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--slot) }
.tag.fly { background: var(--accent-soft); color: var(--accent) }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; min-width: 0 }
.fact b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted) }
.fact span { font-weight: 600; overflow-wrap: anywhere }
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px }
.pl { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; min-width: 0 }
.pl.me { border-color: var(--accent) }
.pl.empty { background: none; border-style: dashed; color: var(--muted) }
.pl.muted { background: none; border-style: dashed }
.pl img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none }
.pl .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pl .n small { color: var(--muted) }
.pl .num { font: 700 16px var(--f-display); width: 30px; text-align: center }
.rab { font: 700 13px var(--f-display); background: var(--slot); padding: 1px 6px; border-radius: 5px; letter-spacing: .04em }
.elo { font: 700 14px var(--f-display); color: var(--muted); font-variant-numeric: tabular-nums }
.vote { font: 800 16px var(--f-display); min-width: 26px; text-align: center; background: var(--ink); color: var(--bg); border-radius: 5px; padding: 0 4px }
.dl { font: 700 13px var(--f-display) } .dl.up { color: var(--ok) } .dl.down { color: var(--down) }
.goals { color: var(--ink); font-size: 9px; letter-spacing: 1px }
.mvp { font: 800 12px var(--f-display); background: #E7B53C; color: #2A1A00; padding: 0 5px; border-radius: 4px }
.teams2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px }
.teamcol { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.teamhead { font: 700 20px var(--f-display); text-transform: uppercase; display: flex; align-items: baseline; gap: 8px; border-bottom: 4px solid var(--c); padding-bottom: 4px }
.teamhead small { font: 500 12px var(--f-body); color: var(--muted); text-transform: none; margin-left: auto }
.teamhead .live { margin-left: auto; font-size: 30px; color: var(--c) }
.rot { margin-top: 6px; border: 1px dashed var(--c); border-radius: 9px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px }
.rothead { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted) }
.rotrow { display: flex; gap: 8px; align-items: center; font-size: 13px }
.rotrow .t { font: 700 14px var(--f-display); width: 62px; font-variant-numeric: tabular-nums }
.rotrow img { width: 20px; height: 20px; border-radius: 50% }
.step { display: inline-flex; align-items: center; gap: 6px }
.step button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-weight: 700; font-size: 16px }
.step b { min-width: 18px; text-align: center; font: 800 18px var(--f-display) }
.scoreline { display: flex; align-items: center; justify-content: center; gap: 14px; background: var(--ink); color: var(--bg); border-radius: 12px; padding: 12px; flex-wrap: wrap }
.scoreline .big { font: 800 44px/1 var(--f-display); font-variant-numeric: tabular-nums }
.scoreline .tn { font: 700 18px var(--f-display); text-transform: uppercase; border-bottom: 3px solid var(--c) }
.cardview { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start }

.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 10px; z-index: 60; font-weight: 600; max-width: calc(100% - 32px); box-shadow: var(--shadow) }

/* ---------- celebrazioni ---------- */
.fx-layer { position: fixed; inset: 0; z-index: 50; display: none; background: radial-gradient(ellipse at 50% 30%, rgba(28,40,68,.985), rgba(4,7,14,.995)); cursor: pointer; color: #fff }
.fx-layer.on { display: block; animation: fade .2s }
.fx-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2 }
.fx-stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 16px; text-align: center; z-index: 1 }
.fx-stage.shake { animation: shake .5s }
@keyframes shake { 20% { transform: translate(-8px, 4px) } 40% { transform: translate(8px, -6px) } 60% { transform: translate(-6px, -3px) } 80% { transform: translate(5px, 5px) } }
.fx-hint::after { content: "tocca per continuare"; } :root[lang=en] .fx-hint::after { content: "tap to continue" }
.fx-hint { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; z-index: 3 }
.sc-board { display: flex; align-items: center; gap: clamp(10px, 4vw, 28px); animation: drop .7s cubic-bezier(.2,1.4,.4,1) both }
.sc-team { font: 800 clamp(18px, 4vw, 28px) var(--f-display); text-transform: uppercase; border-bottom: 5px solid var(--c); padding-bottom: 2px }
.sc-score { font: 800 clamp(70px, 18vw, 140px)/0.9 var(--f-display); font-variant-numeric: tabular-nums; display: flex; gap: 10px; text-shadow: 0 0 30px rgba(255,180,90,.45) }
.sc-score .dash { opacity: .5 }
.sc-title { font: italic 800 clamp(54px, 14vw, 120px)/0.9 var(--f-display); letter-spacing: .02em; background: linear-gradient(180deg, #FFF6D5, #FFB547 60%, #FF6B3D); -webkit-background-clip: text; background-clip: text; color: transparent; animation: punch .8s .25s cubic-bezier(.2,1.6,.4,1) both }
.sc-sub { font: 700 20px var(--f-display); text-transform: uppercase; letter-spacing: .1em; opacity: .9; animation: rise .5s .6s both }
.sc-delta { font: 800 30px var(--f-display); padding: 4px 16px; border-radius: 999px; animation: rise .5s .9s both }
.sc-delta.up { background: #1C7A4B } .sc-delta.down { background: #7F1D1D }
@keyframes drop { from { transform: translateY(-80px) scale(.8); opacity: 0 } }
@keyframes punch { from { transform: scale(3); opacity: 0 } }
@keyframes rise { from { transform: translateY(18px); opacity: 0 } }
.sc-goalwrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px }
.sc-photo { width: clamp(120px, 30vw, 170px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 5px solid #FFD966; box-shadow: 0 0 0 8px rgba(255,217,102,.18), 0 0 60px rgba(255,180,70,.6); animation: punch .7s cubic-bezier(.2,1.5,.4,1) both; position: relative; z-index: 1 }
.sc-photo.sm { width: 110px }
.sc-word { position: relative; font: italic 800 clamp(56px, 15vw, 128px)/0.9 var(--f-display); letter-spacing: .01em; color: #fff; text-shadow: 0 0 24px rgba(255,190,90,.8); animation: punch .7s .2s cubic-bezier(.2,1.6,.4,1) both; z-index: 1 }
.sc-name { font: 700 22px var(--f-display); text-transform: uppercase; letter-spacing: .08em; animation: rise .5s .5s both; z-index: 1 }
.g2 .sc-word { overflow: hidden }
.g2 .sc-word::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.9) 50%, transparent 70%); mix-blend-mode: overlay; animation: sweep 1.2s .6s ease-in-out 2 }
@keyframes sweep { from { transform: translateX(-100%) } to { transform: translateX(100%) } }
.g3 .sc-word { background: linear-gradient(180deg, #FFFFFF, #FFD966 55%, #FF8A3D); -webkit-background-clip: text; background-clip: text; color: transparent }
.sc-ball { position: absolute; top: 4px; left: calc(50% + clamp(46px, 11vw, 66px)); width: 54px; height: 54px; border-radius: 50%; z-index: 2; display: none;
  background: radial-gradient(circle at 35% 35%, #fff 0 30%, #ddd 31% 100%); box-shadow: inset -6px -6px 0 rgba(0,0,0,.15) }
.g3 .sc-ball, .g4 .sc-ball, .g5 .sc-ball { display: block; animation: bounce 1s cubic-bezier(.3,1.6,.5,1) .3s both }
.g3 .sc-ball { box-shadow: 0 0 30px 10px rgba(255,215,90,.8) }
.g4 .sc-ball, .g5 .sc-ball { box-shadow: 0 0 0 4px #FFB547, 0 -10px 30px 12px #FF6B1A, 0 -26px 40px 8px rgba(255,60,0,.7); animation: bounce 1s cubic-bezier(.3,1.6,.5,1) .3s both, flame .18s .9s linear infinite alternate }
@keyframes bounce { from { transform: translate(120px, -200px) rotate(-200deg) } }
@keyframes flame { to { box-shadow: 0 0 0 4px #FFD966, 0 -14px 34px 14px #FF8A1A, 0 -32px 46px 10px rgba(255,40,0,.6) } }
.g4 .sc-word { color: #fff; -webkit-text-stroke: 2px #FF4D4D; text-shadow: 0 0 26px #FF4D4D }
.g5 .sc-word { background: linear-gradient(180deg, #FFF, #FFD966 40%, #FF6B3D 70%, #C026D3); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(70px, 20vw, 170px) }
.sc-five { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -58%); font: italic 800 clamp(300px, 70vw, 560px)/1 var(--f-display); color: rgba(255,190,90,.12); z-index: 0; animation: grow 1.4s cubic-bezier(.2,.9,.3,1) both; pointer-events: none }
@keyframes grow { from { transform: translate(-50%, -58%) scale(.3) rotate(-25deg); opacity: 0 } }
.sc-mvplabel { font: italic 800 clamp(48px, 13vw, 96px)/0.9 var(--f-display); background: linear-gradient(180deg, #FFF6D5, #F2C14E 55%, #B8860B); -webkit-background-clip: text; background-clip: text; color: transparent; animation: punch .7s cubic-bezier(.2,1.6,.4,1) both }
.sc-cardwrap { filter: drop-shadow(0 0 40px rgba(255,200,80,.55)) }
.sc-cardwrap .pcard { cursor: default; color: var(--txt) }
.sc-clean .sc-shutter { position: absolute; left: 50%; top: 12%; width: min(560px, 86vw); height: 46vh; transform: translateX(-50%); display: flex; flex-direction: column; border: 8px solid #E5E7EB; border-bottom: 0; border-radius: 6px 6px 0 0; overflow: hidden }
.sc-shutter i { flex: 1; background: repeating-linear-gradient(90deg, #9CA3AF 0 8px, #6B7280 8px 10px); border-bottom: 2px solid #4B5563; transform: translateY(-110%); animation: shut .5s cubic-bezier(.6,0,.4,1) both }
.sc-shutter i:nth-child(1) { animation-delay: .52s } .sc-shutter i:nth-child(2) { animation-delay: .46s } .sc-shutter i:nth-child(3) { animation-delay: .4s } .sc-shutter i:nth-child(4) { animation-delay: .34s }
.sc-shutter i:nth-child(5) { animation-delay: .28s } .sc-shutter i:nth-child(6) { animation-delay: .22s } .sc-shutter i:nth-child(7) { animation-delay: .16s } .sc-shutter i:nth-child(8) { animation-delay: .1s }
@keyframes shut { to { transform: translateY(0) } }
.sc-cleantxt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18vh; animation: rise .5s 1s both }
.sc-cleantxt .sc-word { font-size: clamp(44px, 11vw, 90px); animation-delay: 1.1s }
.sc-cup { width: clamp(150px, 34vw, 230px); filter: drop-shadow(0 0 40px rgba(255,200,80,.7)); animation: cup 1.2s cubic-bezier(.2,1.3,.4,1) both }
@keyframes cup { from { transform: translateY(120px) scale(.4) rotate(-12deg); opacity: 0 } 70% { transform: translateY(-10px) scale(1.06) } }
.sc-trophy .sc-word { background: linear-gradient(180deg, #FFF6D5, #F2C14E 55%, #B8860B); -webkit-background-clip: text; background-clip: text; color: transparent; animation-delay: .7s }
.sc-roll { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; max-width: 640px; font: 700 18px var(--f-display); text-transform: uppercase; letter-spacing: .06em }
.sc-roll span { animation: rise .4s both } .sc-roll span:nth-child(n) { animation-delay: calc(1.2s + var(--i, 0) * .1s) }
.sc-roll span:nth-child(2) { --i: 1 } .sc-roll span:nth-child(3) { --i: 2 } .sc-roll span:nth-child(4) { --i: 3 } .sc-roll span:nth-child(5) { --i: 4 } .sc-roll span:nth-child(6) { --i: 5 } .sc-roll span:nth-child(7) { --i: 6 }
.sc-promo .sc-sub b { color: #FFD966 }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }
@media (max-width: 480px) { .pcard { width: 150px } .cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) } .sp-fields { grid-template-columns: 1fr } }

/* ---------- trasferta e richieste ---------- */
.loc.away { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 700 }
.awaybar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px }
.awaybar div { display: flex; flex-direction: column; min-width: 0; flex: 1 }
.awaybar span { color: var(--muted); font-size: 13px }
.awaybar.on { border-color: var(--accent); background: var(--accent-soft) }
.awaytag { color: var(--accent); font-weight: 700 }
.need.wait { background: #FEF3C7; color: #92400E }
.reqnote { font-size: 13px; font-weight: 700; color: var(--accent) }
.reqform { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r); padding: 12px }
.reqform textarea { width: 100%; min-height: 64px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; background: var(--bg); color: var(--ink) }
.reqs { display: flex; flex-direction: column; gap: 10px }
.req { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r); padding: 12px; min-width: 0 }
.req > img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none }
.reqname { font: 700 20px var(--f-display); display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.reqstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px }
.reqstats span { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; background: var(--bg); border-radius: 7px; padding: 5px 8px }
.reqstats b { font: 800 19px var(--f-display); color: var(--ink); letter-spacing: 0 }
.reqstats .warn b { color: var(--down) }
.badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--ok-soft); color: var(--ok) }
.reqmsg { margin: 0; font-style: italic; color: var(--ink); overflow-wrap: anywhere }
@media (prefers-color-scheme: dark) { .need.wait { background: #3B2A0B; color: #FCD34D } }


/* ---------- grafica generata con Gemini ---------- */
.brand .logo { width: 34px; height: 34px; border-radius: 9px; display: block; box-shadow: 0 2px 8px rgba(224,74,31,.35) }
.hero { background: linear-gradient(90deg, rgba(5,10,20,.96) 0%, rgba(5,10,20,.82) 42%, rgba(5,10,20,.15) 100%), url(img/hero.jpg) 70% 60% / cover no-repeat; color: #F1F4F8; min-height: 260px; padding: 28px 24px }
.hero p { color: #D5DCE6; opacity: 1 }
.hero-num { text-shadow: 0 0 50px rgba(224,74,31,.7) }
.welcome { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-radius: 16px; overflow: hidden; padding: 22px 20px; min-height: 150px; color: #F1F4F8;
  background: linear-gradient(90deg, rgba(5,10,20,.95) 0%, rgba(5,10,20,.7) 50%, rgba(5,10,20,.2) 100%), url(img/hero.jpg) 75% 62% / cover no-repeat }
.wl-text { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.wl-kicker { font: 700 13px var(--f-body); text-transform: uppercase; letter-spacing: .12em; color: #FF8A5B }
.welcome h1 { font: italic 800 clamp(30px, 6vw, 46px)/1 var(--f-display); text-transform: uppercase }
.welcome p { margin: 0; color: #C9D2DE; font-size: 14px }
.wl-photo { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid #E04A1F; box-shadow: 0 0 0 6px rgba(224,74,31,.2); flex: none }
.sc-cupimg { width: clamp(200px, 42vw, 320px); aspect-ratio: 1; mix-blend-mode: screen; animation: cup 1.2s cubic-bezier(.2,1.3,.4,1) both; -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 72%); mask-image: radial-gradient(circle, #000 60%, transparent 72%) }
@media (max-width: 480px) { .wl-photo { width: 58px; height: 58px } .hero { flex-direction: column; align-items: flex-start; background-position: 62% 60% } }


/* ---------- marchio viola dal logo ---------- */
:root { --brand: #5E038F; --brand-glow: rgba(160, 80, 220, .45) }
.brand .logo { box-shadow: 0 2px 10px var(--brand-glow) }
.hero, .welcome { box-shadow: inset 0 0 0 1px rgba(181, 123, 224, .25) }
.hero { background: radial-gradient(ellipse at 15% 0%, rgba(140, 40, 210, .45), transparent 55%), linear-gradient(90deg, rgba(26,2,44,.96) 0%, rgba(26,2,44,.8) 42%, rgba(5,10,20,.15) 100%), url(img/hero.jpg) 70% 60% / cover no-repeat }
.welcome { background: radial-gradient(ellipse at 10% 0%, rgba(140, 40, 210, .5), transparent 60%), linear-gradient(90deg, rgba(26,2,44,.95) 0%, rgba(26,2,44,.68) 50%, rgba(5,10,20,.2) 100%), url(img/hero.jpg) 75% 62% / cover no-repeat }
.hero-num { background: linear-gradient(180deg, #FFC93C, #F28C1B 60%, #D9481F); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 30px rgba(242, 140, 27, .5)) }
.wl-kicker { color: #FFB547 }
.wl-photo { border-color: #F28C1B; box-shadow: 0 0 0 6px rgba(160, 80, 220, .35) }


/* ---------- registrazione, account, pagine legali ---------- */
.auth { max-width: 640px; width: 100%; margin-inline: auto }
.auth .seg { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr }
.auth form { display: flex; flex-direction: column; gap: 16px }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; align-self: flex-start }
.seg button { border: 0; background: none; padding: 9px 16px; cursor: pointer; font-weight: 700 }
.seg button[aria-pressed=true] { background: var(--ink); color: var(--bg) }
.pwrow { display: flex; gap: 6px; align-items: center; text-transform: none; letter-spacing: 0 }
.pwrow input { flex: 1 }
.pwmeter { height: 5px; border-radius: 3px; background: var(--slot); overflow: hidden }
.pwmeter i { display: block; height: 100%; width: 0; background: var(--down); transition: width .2s }
.pwmeter i[data-level=ok] { background: #D99A1F } .pwmeter i[data-level=strong] { background: var(--ok) }
.consents { display: flex; flex-direction: column; gap: 10px }
.check.top { align-items: flex-start; line-height: 1.45 }
.check.top input { margin-top: 2px; flex: none }
.check a { color: var(--accent); font-weight: 700 }
.req, .opt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-left: 4px }
.req { color: var(--accent) } .opt { color: var(--muted) }
.linkbtn.danger { color: var(--down) }
.legal { max-width: 72ch; margin-inline: auto; display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; min-width: 0 }
.legal h1 { font-size: clamp(28px, 5vw, 38px); text-transform: uppercase }
.legal h2 { font-size: 21px; margin-top: 10px }
.legal p, .legal li { margin: 0; line-height: 1.6 }
.legal ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px }
.legaltable td, .legaltable th { white-space: normal; text-align: left !important }


/* ---------- accesso con Google ---------- */
.gwrap { display: flex; flex-direction: column; gap: 14px }
.gbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--line); background: #FFFFFF; color: #1F1F1F; font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: var(--shadow) }
.gbtn:hover { background: #F4F6F8 }
#gsi-btn { display: flex; justify-content: center; min-height: 44px }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line) }
.gprofile { display: flex; align-items: center; gap: 12px; background: var(--bg); border-radius: 12px; padding: 10px 12px }
.gprofile img { width: 48px; height: 48px; border-radius: 50% }
.gprofile div { display: flex; flex-direction: column; min-width: 0 }
.gprofile span { color: var(--muted); font-size: 13px; overflow-wrap: anywhere }


/* ---------- nome You On The Pitch ---------- */
.wordmark { letter-spacing: .03em }
.wordmark b { color: var(--accent); font-weight: 800 }
@media (max-width: 480px) { .brand { font-size: 20px; gap: 8px } .brand .logo { width: 30px; height: 30px } .loc span { max-width: 30vw } }