/* Due Maglie — night match under floodlights */
:root {
  --ground: #050d09;
  --ground-2: #0a1a12;
  --pitch: #0d2519;
  --pitch-2: #0b2016;
  --chalk: #f1f5ef;
  --chalk-2: #d7e0d8;
  --muted: #a3b5a8;
  --line: rgba(241, 245, 239, .16);
  --line-2: rgba(241, 245, 239, .3);
  --panel: rgba(12, 30, 21, .78);
  --panel-2: rgba(18, 42, 30, .9);
  --bronzo-1: #e6b48a; --bronzo-2: #b0713f; --bronzo-3: #6e3f1c;
  --argento-1: #f4f5f6; --argento-2: #b9bec4; --argento-3: #6e747b;
  --oro-1: #fff1b8; --oro-2: #e0b43a; --oro-3: #8a6412;
  --warn: #f0c49a;
  --prim: #8fe0a8; --prim-2: #1d5a34;
  --display: "Big Shoulders Display", "Barlow Condensed", "Oswald", "Helvetica Neue", sans-serif;
  --body: "Barlow", "Segoe UI", "Helvetica Neue", sans-serif;
  --r: 12px;
  --tabbar-h: 64px;
  --head-h: 56px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--chalk);
  font: 400 16px/1.45 var(--body);
  background-color: var(--ground);
  background-image:
    radial-gradient(90% 55% at 0% -8%, rgba(226, 244, 230, .16), transparent 62%),
    radial-gradient(90% 55% at 100% -8%, rgba(226, 244, 230, .14), transparent 62%),
    radial-gradient(120% 70% at 50% 120%, rgba(0, 0, 0, .7), transparent 60%),
    repeating-linear-gradient(180deg, #0b1d14 0 72px, #09180f 72px 144px);
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}
img { max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--chalk); }
:focus-visible { outline: 3px solid var(--oro-1); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--chalk); color: #07110c; padding: 8px 12px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 8px; }
.muted { color: var(--muted); }
.ico { width: 20px; height: 20px; flex: none; }
[hidden] { display: none !important; }

/* ---------- header / tabs ---------- */
.top {
  position: sticky; top: 0; z-index: 30;
  background: rgba(5, 13, 9, .97);
  border-bottom: 1px solid var(--line);
}
.top-in { max-width: 1120px; margin: 0 auto; height: var(--head-h); padding: 0 16px; display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 32px; height: 32px; color: var(--oro-2); }
.brand-name { font: 800 26px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.top-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid transparent; background: transparent; }
.icon-btn:hover { background: rgba(241, 245, 239, .08); }
.icon-btn .ico { width: 22px; height: 22px; }
.lang-btn { min-width: 44px; height: 36px; border-radius: 99px; border: 1px solid var(--line-2); background: transparent; font-weight: 700; letter-spacing: .08em; font-size: 14px; }
.lang-btn:hover { background: rgba(241, 245, 239, .08); }

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(5, 13, 9, .98); border-top: 1px solid var(--line);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase;
  position: relative;
}
.tab .ico { width: 24px; height: 24px; }
.tab[aria-current="page"] { color: var(--chalk); }
.tab[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--oro-1), var(--oro-2)); }
body.no-tabs .tabs { display: none; }
body.no-tabs { padding-bottom: 0; }

.demo-banner {
  max-width: 1120px; margin: 10px auto 0; padding: 8px 14px; font-size: 14px;
  border: 1px dashed var(--argento-2); border-radius: 10px; color: var(--chalk-2);
  width: calc(100% - 32px);
}
.demo-banner strong { color: var(--argento-1); text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; margin-right: 4px; }

.main { max-width: 1120px; margin: 0 auto; padding: 16px 16px 32px; }
.foot { max-width: 1120px; margin: 0 auto; padding: 8px 16px 24px; color: var(--muted); font-size: 13px; text-align: center; }

/* ---------- typography ---------- */
.h1 { font: 800 40px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 4px 0 6px; }
.h2 { font: 800 26px/1.05 var(--display); text-transform: uppercase; margin: 0; }
.h3 { font: 800 21px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 24px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-1); }
.lead { color: var(--chalk-2); font-size: 17px; }
.sec-head { margin-bottom: 14px; }
.sec-count { margin: 0 0 8px; color: var(--chalk-2); font-weight: 600; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 18px; border-radius: 99px; border: 1px solid transparent;
  font-weight: 700; font-size: 16px; letter-spacing: .02em; text-decoration: none; line-height: 1.1;
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; }
.btn-chalk { background: var(--chalk); color: #07110c; }
.btn-chalk:hover:not(:disabled) { background: #fff; }
.btn-ghost { background: transparent; color: var(--chalk); border-color: var(--line-2); }
.btn-ghost:hover:not(:disabled) { background: rgba(241, 245, 239, .08); }
.btn-gold { color: #231803; background: linear-gradient(170deg, var(--oro-1), var(--oro-2) 60%, #c2932a); box-shadow: 0 6px 24px rgba(224, 180, 58, .22), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn-gold:hover:not(:disabled) { box-shadow: 0 8px 30px rgba(224, 180, 58, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn-lg { min-height: 56px; font-size: 18px; padding: 12px 26px; }
.btn-sm { min-height: 40px; font-size: 14.5px; padding: 8px 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.link { background: none; border: 0; padding: 0; text-decoration: underline; font-weight: 700; color: var(--oro-1); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 40px; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line-2);
  background: rgba(241, 245, 239, .04); font-weight: 600; font-size: 14.5px;
}
.chip:hover { background: rgba(241, 245, 239, .1); }
.chip[aria-pressed="true"] { background: var(--chalk); color: #07110c; border-color: var(--chalk); }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; color: var(--chalk-2); background: rgba(241, 245, 239, .05); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }

/* ---------- skeleton ---------- */
.skel { background: linear-gradient(100deg, rgba(241, 245, 239, .05) 30%, rgba(241, 245, 239, .12) 50%, rgba(241, 245, 239, .05) 70%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; border-radius: 10px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skel-line { height: 18px; margin: 8px 0; }
.w40 { width: 40%; height: 34px; } .w60 { width: 60%; }
.skel-board .skel { aspect-ratio: 1; }
.skel-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.skel-card { aspect-ratio: 300 / 470; border-radius: 16px 16px 16px 48px; }
.skel-pitch { aspect-ratio: 68 / 100; }
.skel-table { height: 240px; }
.boot-msg { text-align: center; color: var(--chalk-2); }
#view-boot { text-align: center; }

/* ---------- registration ---------- */
.reg { max-width: 460px; margin: 6vh auto 0; text-align: left; }
.reg-mark { width: 64px; height: 64px; color: var(--oro-2); }
.reg-title { font: 800 46px/.95 var(--display); text-transform: uppercase; margin: 6px 0 10px; }
.reg-form { display: grid; gap: 6px; margin: 18px 0 24px; }
.label { font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--chalk-2); }
input[type="text"], input[type="search"], input[type="password"], input[type="email"] {
  width: 100%; min-height: 52px; padding: 10px 14px; font-size: 18px; border-radius: 12px;
  border: 1.5px solid var(--line-2); background: rgba(3, 9, 6, .7); color: var(--chalk);
}
input::placeholder { color: #8fa295; }
input:focus-visible { outline: 3px solid var(--oro-1); outline-offset: 1px; border-color: transparent; }
.hint { margin: 0; font-size: 14px; color: var(--muted); min-height: 1.4em; }
.hint.is-err, .err { color: var(--warn); font-weight: 600; }
.err { margin: 0; min-height: 1.4em; font-size: 15px; }
.reg-form .btn { margin-top: 8px; }

/* ---------- auth / account ---------- */
.auth-tabs { margin: 18px 0 0; }
.auth-tabs[hidden] { display: none; }
.auth-pane .reg-form { margin-top: 14px; }
.auth-pane .label { margin-top: 8px; }
.auth-pane .h2 { margin: 6px 0 2px; outline: none; }
.auth-note { min-height: 0; }
.forgot-link { justify-self: center; margin-top: 10px; min-height: 44px; font-size: 15px; }
.auth-pane .link { justify-self: start; min-height: 44px; }
.forgot-msg { margin: 6px 0 0; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 56px; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: transparent; color: var(--chalk-2);
}
.pw-toggle:hover { color: var(--chalk); background: rgba(241, 245, 239, .08); }
.pw-toggle[aria-pressed="true"] { color: var(--oro-1); }
.acct-btn { position: relative; }
.acct-dot { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--oro-2); box-shadow: 0 0 0 2px var(--ground); }

.protect { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 16px; border-color: rgba(224, 180, 58, .45); background: linear-gradient(160deg, rgba(58, 44, 10, .55), var(--panel) 60%); }
.protect-ico { width: 40px; height: 40px; flex: none; color: var(--oro-2); margin-top: 2px; }
.protect-h { font: 800 22px/1.05 var(--display); text-transform: uppercase; margin: 0 0 4px; color: var(--oro-1); }
.protect p { margin: 0 0 12px; color: var(--chalk-2); font-size: 15.5px; }

.dlg-account { width: min(480px, calc(100vw - 24px)); }
.dlg-account .h2 { outline: none; }
.acct-info { margin: 0 0 12px; display: grid; gap: 10px; }
.acct-info div { display: grid; gap: 2px; }
.acct-info dt { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.acct-info dd { margin: 0; font-weight: 600; font-size: 17px; overflow-wrap: anywhere; }
.acct-ok { display: inline-flex; align-items: center; gap: 6px; }
.acct-ok .ico { color: var(--oro-1); }
.acct-warn { color: var(--warn); }
.acct-note { margin: 0 0 12px; }
.acct-note .ico, .dlg-account .note .ico { color: var(--oro-1); }
.acct-sec { border-top: 1px solid var(--line); padding: 4px 0; }
.acct-sec summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-weight: 700; font-size: 16px; }
.acct-sec summary::marker { color: var(--oro-2); }
.acct-form { display: grid; gap: 6px; padding: 0 0 12px; }
.acct-h { font: 800 19px/1.1 var(--display); text-transform: uppercase; margin: 12px 0 2px; }
.acct-form .btn { justify-self: start; margin-top: 4px; }
.acct-foot { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; display: flex; justify-content: flex-end; }
.acct-logout-note { margin-top: 10px; }

.nudge {
  position: fixed; z-index: 150; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom, 0px));
  width: min(460px, calc(100vw - 24px));
  display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: start;
  padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(170deg, #13301f, #0b1d13); border: 1px solid rgba(224, 180, 58, .5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  animation: nudge-in .35s ease-out both;
}
@keyframes nudge-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.nudge-ico { color: var(--oro-1); margin-top: 2px; }
.nudge-text { margin: 0; font-size: 15px; line-height: 1.35; color: var(--chalk); }
.nudge-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
body.has-nudge .toast { bottom: calc(var(--tabbar-h) + 150px + env(safe-area-inset-bottom, 0px)); }

/* ---------- rules ---------- */
.howto summary { cursor: pointer; font: 800 21px/1.2 var(--display); text-transform: uppercase; letter-spacing: .02em; padding: 4px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
.howto summary::-webkit-details-marker { display: none; }
.howto summary::before { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s; margin-right: 4px; }
.howto[open] summary::before { transform: rotate(45deg); }
.rules { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.rules li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
.rules strong { display: block; font-size: 16px; }
.rules p { margin: 2px 0 0; color: var(--chalk-2); font-size: 15px; }
.rule-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-2); font: 800 17px/1 var(--display); }

/* ---------- today ---------- */
.oggi-layout { display: grid; gap: 20px; }
.today-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.grid-no { font: 800 44px/1 var(--display); text-transform: uppercase; margin: 0; }
.today-date { margin: 0; color: var(--muted); font-weight: 600; text-transform: capitalize; }

.playbar {
  position: sticky; top: calc(var(--head-h) + 6px); z-index: 20;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 16px;
  padding: 10px 14px 12px; margin-bottom: 12px; border-radius: 14px;
  background: rgba(5, 13, 9, .94); border: 1px solid var(--line-2);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
}
.clock-wrap { display: flex; align-items: center; gap: 8px; }
.clock-wrap .ico { width: 26px; height: 26px; color: var(--muted); }
.clock { font: 800 52px/.9 var(--display); font-variant-numeric: tabular-nums; letter-spacing: .01em; min-width: 3.1ch; }
.playbar.is-low .clock { color: var(--warn); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.guess-wrap { justify-self: end; text-align: right; }
.pips { display: flex; gap: 5px; justify-content: flex-end; }
.pip { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line-2); }
.pip.on { background: var(--chalk); border-color: var(--chalk); }
.guess-n { font-size: 14px; font-weight: 600; color: var(--chalk-2); }
.clock-track { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: rgba(241, 245, 239, .12); overflow: hidden; }
.clock-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--chalk), var(--oro-1)); transform-origin: left; transition: transform .2s linear; }
.playbar.is-low .clock-track span { background: var(--warn); }

.board-wrap { position: relative; }
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.board > * { min-width: 0; }
.corner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font: 800 18px/1 var(--display); aspect-ratio: 1; }
.corner .ico { width: 38px; height: 38px; color: var(--oro-2); }
.hd {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  aspect-ratio: 1; padding: 8px 7px 7px; border-radius: 10px; overflow: hidden;
  background-color: #0c1f15; background-size: cover; background-position: center;
  border: 1px solid var(--line);
  container-type: inline-size;
}
.hd-kit { position: absolute; left: 0; right: 0; top: 0; height: 7px; background: linear-gradient(90deg, var(--k1, #555) 0 33.3%, var(--k2, #999) 33.3% 66.6%, var(--k1, #555) 66.6%); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .35); }
.hd-row .hd-kit { right: auto; bottom: 0; width: 7px; height: auto; background: linear-gradient(180deg, var(--k1, #555) 0 33.3%, var(--k2, #999) 33.3% 66.6%, var(--k1, #555) 66.6%); }
.hd-row { padding-left: 13px; }
.hd-name { font: 800 17px/.95 var(--display); font-size: min(17px, calc(100cqw / (var(--L, 6) * .6))); text-transform: uppercase; letter-spacing: .01em; hyphens: manual; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.hd-sub { font-size: 11.5px; line-height: 1.15; color: var(--chalk-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 2px rgba(0, 0, 0, .9); }
.hd-hidden { background: repeating-linear-gradient(135deg, rgba(241, 245, 239, .04) 0 8px, transparent 8px 16px), #0b1c13; align-items: center; justify-content: center; }
.hd-hidden .hd-kit { background: rgba(241, 245, 239, .15); }
.hd-hidden .hd-name { font-size: 30px; color: var(--muted); }

.cell {
  position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  border: 1.5px solid var(--line-2); background: rgba(241, 245, 239, .035);
  display: grid; place-items: center; padding: 0;
  container-type: inline-size;
}
.cell.is-open { color: var(--chalk-2); transition: background-color .15s, border-color .15s; }
.cell.is-open .ico { width: 28px; height: 28px; opacity: .8; }
.cell.is-open:hover { background: rgba(241, 245, 239, .1); border-color: var(--chalk); }
.cell.is-cover { background: repeating-linear-gradient(135deg, rgba(241, 245, 239, .03) 0 8px, transparent 8px 16px); border-style: dashed; }
.board.is-locked .cell.is-open { pointer-events: none; opacity: .5; }
.cell.shake { animation: shake .4s; border-color: var(--warn); }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.cell.is-filled { border-width: 2px; background: #0b1a12; place-items: end stretch; animation: pop .45s ease-out; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cell.is-filled.tier-bronzo { border-color: var(--bronzo-2); }
.cell.is-filled.tier-argento { border-color: var(--argento-2); }
.cell.is-filled.tier-oro { border-color: var(--oro-2); }
.cell-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.cell.is-filled::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(3, 8, 5, .92) 88%); }
.cell-name { position: relative; z-index: 1; padding: 0 4px 5px; font: 800 15px/.95 var(--display); font-size: min(15px, calc(92cqw / (var(--L, 6) * .62))); text-transform: uppercase; text-align: center; }
.cell-rt { position: absolute; z-index: 1; top: 4px; left: 4px; font: 800 15px/1 var(--display); padding: 3px 5px; border-radius: 6px; color: #1b1308; }
.tier-bronzo .cell-rt { background: var(--bronzo-1); }
.tier-argento .cell-rt { background: var(--argento-1); }
.tier-oro .cell-rt { background: var(--oro-1); }
.cell-rar { position: absolute; z-index: 1; top: 4px; right: 4px; font-size: 11.5px; font-weight: 700; background: rgba(3, 8, 5, .85); padding: 2px 5px; border-radius: 6px; }
.cell.is-missed { border-style: dashed; }
.cell-miss { font-size: 12px; text-align: center; color: var(--muted); padding: 4px; line-height: 1.15; }

.start-cover {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 20px; text-align: center; border-radius: 14px;
  background: radial-gradient(80% 60% at 50% 45%, rgba(5, 13, 9, .72), rgba(5, 13, 9, .9));
}
.btn-start { max-width: 100%; white-space: normal; }
.start-lead { margin: 0; max-width: 30ch; color: var(--chalk-2); font-size: 15px; }

/* end */
.end-score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; }
.end-num { font: 800 76px/.85 var(--display); background: linear-gradient(175deg, var(--oro-1), var(--oro-2) 60%, #c79a2e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.end-unit { font: 800 22px/1 var(--display); text-transform: uppercase; }
.end-sub { margin: 4px 0 12px; color: var(--chalk-2); }
.share-pre { font: 600 15px/1.35 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; background: rgba(3, 8, 5, .7); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; white-space: pre-wrap; }
.next-grid { font-variant-numeric: tabular-nums; margin: 10px 0 0; font-size: 14.5px; }
.end-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.end-cell { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(3, 8, 5, .45); display: grid; gap: 3px; font-size: 14.5px; }
.end-cell.ok { border-color: rgba(224, 180, 58, .35); }
.end-pair { font-weight: 700; }
.end-yours b { font-weight: 700; }
.end-yours.is-miss { color: var(--muted); }
.end-ex { color: var(--chalk-2); font-size: 14px; }
.pairkit { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: 0; background: linear-gradient(90deg, var(--k1) 0 33.3%, var(--k2) 33.3% 66.6%, var(--k1) 66.6%); box-shadow: 0 0 0 1px rgba(241, 245, 239, .35); }
.x { color: var(--muted); font-weight: 400; margin: 0 2px; }

/* ---------- dialogs ---------- */
.dlg {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 16px;
  border: 1px solid var(--line-2); border-radius: 18px; color: var(--chalk);
  background: linear-gradient(180deg, #0e2419, #08150e);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.dlg::backdrop { background: rgba(2, 6, 4, .78); backdrop-filter: blur(2px); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dlg-search { margin-top: 8vh; }
.search-title { font-size: 24px; }
.search-clock { margin: -4px 0 10px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.results { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.res { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(241, 245, 239, .04); text-align: left; }
.res:hover:not(:disabled), .res:focus-visible { background: rgba(241, 245, 239, .12); border-color: var(--chalk-2); }
.res:disabled { opacity: .5; }
.res-name { font-weight: 600; }
.res-born { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 14.5px; }

.dlg-reveal { background: transparent; border: 0; box-shadow: none; text-align: center; overflow: visible; width: min(340px, calc(100vw - 32px)); }
.dlg-reveal::backdrop { background: radial-gradient(circle at 50% 40%, rgba(8, 20, 13, .7), rgba(2, 6, 4, .92)); }
.reveal-label { margin-bottom: 10px; }
.reveal-card { display: flex; justify-content: center; margin-bottom: 14px; }
.reveal-card .pc-wrap { width: min(300px, 78vw); }
.reveal-flare { position: absolute; left: 50%; top: 45%; width: 520px; height: 520px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 241, 184, .35), rgba(255, 241, 184, 0) 60%); pointer-events: none; animation: flare 1.1s ease-out both; }
@keyframes flare { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 40% { opacity: 1; } to { opacity: .6; transform: translate(-50%, -50%) scale(1); } }
.is-reveal .pc-flip { animation: reveal .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes reveal {
  0% { transform: perspective(900px) rotateY(-180deg) scale(.55); opacity: 0; filter: brightness(2); }
  55% { opacity: 1; }
  100% { transform: perspective(900px) rotateY(0) scale(1); filter: brightness(1); }
}

.dlg-card { width: min(380px, calc(100vw - 24px)); text-align: center; }
.cardview-card { display: flex; justify-content: center; margin-bottom: 14px; }
.cardview-card .pc-wrap { width: min(300px, 80vw); }
.dlg-card .btn-row { justify-content: center; }

.dlg-pick { width: min(560px, calc(100vw - 16px)); }
.opt-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.opt { width: 100%; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 10px; min-height: 56px; padding: 6px 12px 6px 6px; text-align: left; border-radius: 12px; border: 1px solid var(--line); background: rgba(241, 245, 239, .04); }
.opt:hover:not(:disabled), .opt:focus-visible { background: rgba(241, 245, 239, .1); border-color: var(--chalk-2); }
.opt:disabled { opacity: .45; }
.opt.is-cur { border-color: var(--oro-2); }
.opt-rt { display: grid; place-items: center; height: 44px; border-radius: 9px; font: 800 24px/1 var(--display); color: #1b1308; }
.opt.tier-bronzo .opt-rt { background: linear-gradient(165deg, var(--bronzo-1), var(--bronzo-2)); }
.opt.tier-argento .opt-rt { background: linear-gradient(165deg, var(--argento-1), var(--argento-2)); }
.opt.tier-oro .opt-rt { background: linear-gradient(165deg, var(--oro-1), var(--oro-2)); }
.opt-main { display: grid; min-width: 0; }
.opt-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-meta { font-size: 13.5px; color: var(--chalk-2); }
.opt-chem { color: var(--oro-1); }
.opt-pen { color: var(--warn); }
.opt-val { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--chalk-2); }
.opt-val.is-over { color: var(--warn); }
#btn-unslot { margin-top: 10px; }
.pad { padding: 12px 0; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom, 0px)); z-index: 200;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: min(92vw, 460px); padding: 10px 16px; border-radius: 12px;
  background: var(--chalk); color: #07110c; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.warn { background: var(--warn); color: #2a1506; }

/* =====================================================================
   PLAYER CARD — "B · Livelli metallo"   (300 × 470, scales with cqw)
   ===================================================================== */
.pc-wrap { container-type: inline-size; position: relative; width: 100%; max-width: 300px; aspect-ratio: 300 / 470; perspective: 1400px; }
.pc-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.pc-wrap.flipped .pc-flip { transform: rotateY(180deg); }
.pc {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  padding: 4cqw 4.5cqw 0; color: #1b1308;
  border-radius: 5.333cqw 5.333cqw 5.333cqw 16cqw;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 1.5cqw 6cqw rgba(0, 0, 0, .55), inset 0 0 0 .6cqw rgba(255, 255, 255, .28), inset 0 0 0 1.2cqw rgba(0, 0, 0, .12);
}
.pc::before { /* brushed metal */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(95deg, rgba(255, 255, 255, .07) 0 .35cqw, rgba(0, 0, 0, .03) .35cqw .9cqw);
  mix-blend-mode: overlay;
}
.pc > * { position: relative; z-index: 1; }
.pc.tier-bronzo { background: linear-gradient(162deg, var(--bronzo-1) 0%, var(--bronzo-2) 50%, var(--bronzo-3) 100%); }
.pc.tier-argento { background: linear-gradient(162deg, var(--argento-1) 0%, var(--argento-2) 50%, var(--argento-3) 100%); }
.pc.tier-oro { background: linear-gradient(162deg, var(--oro-1) 0%, var(--oro-2) 50%, var(--oro-3) 100%); }
.pc-front.tier-oro::after { /* sheen */
  content: ""; position: absolute; inset: -20%; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .5) 48%, rgba(255, 248, 220, .15) 52%, transparent 60%);
  transform: translateX(-70%); animation: sheen 5.5s ease-in-out infinite; mix-blend-mode: soft-light;
}
@keyframes sheen { 0%, 55% { transform: translateX(-70%); } 85%, 100% { transform: translateX(70%); } }
.pc-top { display: flex; justify-content: space-between; align-items: flex-start; height: 17%; flex: none; }
.pc-rt { display: flex; flex-direction: column; align-items: center; }
.pc-rating { font: 800 22cqw/.82 var(--display); letter-spacing: -.01em; }
.pc-pos { font: 700 4.6cqw/1 var(--body); letter-spacing: .12em; margin-top: .8cqw; }
.pc-chip { margin-top: 1cqw; font: 700 3.8cqw/1 var(--body); letter-spacing: .14em; text-transform: uppercase; padding: 1.6cqw 3cqw; border-radius: 99px; background: rgba(20, 13, 5, .86); }
.tier-bronzo .pc-chip { color: var(--bronzo-1); }
.tier-argento .pc-chip { color: var(--argento-1); }
.tier-oro .pc-chip { color: var(--oro-1); }
.pc-photo {
  position: relative; flex: none; height: 41%; margin: 0 -4.5cqw; overflow: hidden;
  background: radial-gradient(70% 70% at 50% 35%, rgba(255, 255, 255, .22), rgba(0, 0, 0, .18));
}
.pc-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.pc-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(12, 9, 5, .55)); }
.pc-sil { display: block; width: 62%; height: 100%; margin: 0 auto; color: rgba(20, 13, 5, .38); }
.pc-copies { position: absolute; z-index: 2; right: 3cqw; top: 2cqw; font: 800 6cqw/1 var(--display); color: #fff; background: rgba(12, 9, 5, .78); padding: 1.2cqw 2.4cqw; border-radius: 99px; }
.pc-body {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  margin: 0 -4.5cqw; padding: 1.6cqw 5.5cqw 3.4cqw;
  background: linear-gradient(180deg, rgba(12, 9, 5, .8), rgba(8, 6, 3, .92));
  border-top: .7cqw solid rgba(255, 255, 255, .45);
  color: #fbf6ec;
}
.pc-first { font: 600 4.3cqw/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; color: #e9e1d2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-name { font-family: var(--display); font-weight: 800; line-height: 1.08; padding-top: .4cqw; text-transform: uppercase; letter-spacing: .005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -1cqw; }
.tier-bronzo .pc-name { color: #ffd9b8; }
.tier-argento .pc-name { color: #ffffff; }
.tier-oro .pc-name { color: var(--oro-1); }
.pc-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 2.2cqw 0 1.8cqw; border-top: .35cqw solid rgba(255, 255, 255, .22); border-bottom: .35cqw solid rgba(255, 255, 255, .22); }
.pc-stats div { padding: 1.4cqw 0; text-align: center; }
.pc-stats div + div { border-left: .35cqw solid rgba(255, 255, 255, .22); }
.pc-stats dt { font: 700 3.1cqw/1 var(--body); letter-spacing: .14em; color: #d8cfbf; }
.pc-stats dd { margin: .8cqw 0 0; font: 800 7cqw/1 var(--display); }
.pc-pair { font: 700 4.3cqw/1.15 var(--body); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-x { opacity: .75; font-weight: 400; }
.pc-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 2cqw; padding-left: 9cqw; }
.pc-credit { font: 500 2.9cqw/1.2 var(--body); color: #d9d0c1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-rar { flex: none; font: 800 5cqw/1 var(--display); padding: 1cqw 2.2cqw; border-radius: 99px; background: rgba(255, 255, 255, .12); border: .35cqw solid rgba(255, 255, 255, .35); }
.pc-back { transform: rotateY(180deg); padding: 6cqw; }
.pc-back-in { flex: 1; display: flex; flex-direction: column; gap: 1.2cqw; padding: 5cqw; border-radius: 3cqw 3cqw 3cqw 12cqw; background: rgba(10, 8, 4, .86); color: #f5efe3; font-size: 4.2cqw; text-align: left; overflow: hidden; }
.pc-back-name { font: 800 9cqw/1 var(--display); text-transform: uppercase; }
.pc-back-meta { color: #ddd3c2; }
.pc-back-h { margin-top: 2cqw; font: 700 3.2cqw/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #cfc4b0; }
.pc-back-clubs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1cqw 3cqw; font-weight: 600; }
.pc-back-credit { font-size: 3.8cqw; }
.pc-back-src { margin-top: auto; font-size: 3.2cqw; color: #cfc4b0; }

.pc-src { position: absolute; z-index: 2; left: 3cqw; bottom: 2.4cqw; font: 700 3.3cqw/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: #fbf6ec; background: rgba(12, 9, 5, .72); padding: 1.2cqw 2.2cqw; border-radius: 99px; border: .3cqw solid rgba(255, 255, 255, .3); }

/* Primavera (invented youths): pitch-stripe photo box, green badge, no credit line */
.pc-photo.is-prim { background: repeating-linear-gradient(90deg, rgba(29, 90, 52, .55) 0 12cqw, rgba(20, 70, 40, .55) 12cqw 24cqw); }
.pc-photo.is-prim .pc-sil { color: rgba(8, 26, 15, .55); }
.pc-src.pc-prim { color: #0b2016; background: var(--prim); border-color: rgba(255, 255, 255, .55); }
.pc-prim-sub { color: var(--prim); letter-spacing: .06em; text-transform: uppercase; font-size: 3.8cqw; }
.prim-sec { margin-top: 28px; padding-top: 18px; border-top: 1px dashed var(--line-2); }
.prim-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.prim-head .h2 { font-size: 22px; color: var(--prim); }
.prim-n { font-size: 14px; color: var(--muted); }
.album-grid.prim-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.opt-prim { display: inline-block; margin-left: 4px; font: 700 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: #0b2016; background: var(--prim); padding: 3px 5px; border-radius: 99px; vertical-align: 2px; }
.slot-prim { position: absolute; top: -7px; left: -5px; font: 800 9.5px/1 var(--body); letter-spacing: .06em; color: #0b2016; background: var(--prim); border-radius: 99px; padding: 3px 4px; box-shadow: 0 0 0 2px #0b2016; }

/* ---------- welcome (starter pack) ---------- */
.welcome-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.welcome .lead { max-width: 60ch; margin: 4px 0 18px; }
.welcome-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
.welcome-cards .pc-wrap { max-width: none; }
.deal { transform: none; }
.welcome-cards.stacked .deal { transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0deg)) scale(.7); transition: none; }
.welcome-cards.dealt .deal { transition: transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 70ms + 150ms); }
.welcome-actions { position: sticky; bottom: 12px; margin-top: 20px; justify-content: center; }
.welcome-actions .btn { box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.welcome-actions .btn-ghost { background: rgba(5, 13, 9, .92); }

/* ---------- album ---------- */
.meter { height: 6px; border-radius: 6px; background: rgba(241, 245, 239, .12); overflow: hidden; }
.meter span { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, var(--bronzo-2), var(--argento-2), var(--oro-2)); }
.filters { margin-bottom: 10px; }
.album-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin-top: 16px; }
.album-item { position: relative; }
.album-item .pc-wrap { max-width: none; }
.album-hit { position: absolute; inset: 0; z-index: 5; background: transparent; border: 0; border-radius: 16px 16px 16px 48px; }
.album-hit:focus-visible { outline-offset: 3px; }
.empty { text-align: center; padding: 40px 16px; color: var(--chalk-2); }
.empty .ico { width: 56px; height: 56px; color: var(--argento-2); }
.empty p { max-width: 36ch; margin: 12px auto 18px; }

/* ---------- team ---------- */
.team-body { display: grid; gap: 14px; }
.team-top { display: flex; flex-wrap: wrap; gap: 10px; }
.capbox { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.cap-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cap-label { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 14px; color: var(--chalk-2); }
.cap-val { font: 800 30px/1 var(--display); font-variant-numeric: tabular-nums; }
.cap-val b { font-weight: 800; }
.cap-bar { margin-top: 8px; height: 10px; border-radius: 10px; background: rgba(241, 245, 239, .12); overflow: hidden; }
.cap-bar span { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, var(--argento-2), var(--oro-2)); transition: transform .3s ease; }
.capbox.is-over { border-color: var(--warn); }
.capbox.is-over .cap-bar span { background: var(--warn); }
.capbox.is-over .cap-val { color: var(--warn); }
.cap-warn { margin: 8px 0 0; color: var(--warn); font-weight: 700; }
.team-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.team-stats > div { display: grid; }
.ts-n { font: 800 32px/1 var(--display); }
.ts-l { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.ts-l i { font-style: normal; text-transform: none; letter-spacing: 0; }

.pitch {
  position: relative; width: 100%; aspect-ratio: 68 / 100; border-radius: 14px; overflow: hidden;
  background: repeating-linear-gradient(180deg, #11321f 0 10%, #0e2b1a 10% 20%);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .55);
}
.pitch-lines { position: absolute; inset: 4%; border: 2px solid rgba(241, 245, 239, .55); border-radius: 2px; }
.pitch-lines i { position: absolute; display: block; border: 2px solid rgba(241, 245, 239, .5); }
.pl-half { left: -2px; right: -2px; top: 50%; height: 0; border-width: 2px 0 0 !important; }
.pl-circle { left: 50%; top: 50%; width: 30%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.pl-box { left: 22%; right: 22%; height: 15%; }
.pl-box-top { top: -2px; border-top: 0 !important; }
.pl-box-bot { bottom: -2px; border-bottom: 0 !important; }
.chem-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.chem-svg line { stroke: var(--oro-1); stroke-width: 2.5; stroke-opacity: .5; vector-effect: non-scaling-stroke; stroke-dasharray: 5 4; }
.chem-svg line.on { stroke-opacity: 1; stroke-width: 4; stroke-dasharray: none; filter: drop-shadow(0 0 4px rgba(255, 241, 184, .9)); }
.slot {
  position: absolute; transform: translate(-50%, -50%); width: 20%; min-width: 62px; max-width: 96px;
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 3px 4px;
  border-radius: 10px 10px 10px 18px; border: 0; color: #1b1308;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.slot.tier-bronzo { background: linear-gradient(162deg, var(--bronzo-1), var(--bronzo-2)); }
.slot.tier-argento { background: linear-gradient(162deg, var(--argento-1), var(--argento-2)); }
.slot.tier-oro { background: linear-gradient(162deg, var(--oro-1), var(--oro-2)); }
.slot-rt { font: 800 22px/.9 var(--display); }
.slot-name { max-width: 100%; font: 800 12.5px/1.05 var(--display); text-transform: uppercase; background: rgba(12, 9, 5, .85); color: #fbf6ec; padding: 2px 4px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-role { font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.slot.pen-off .slot-role, .slot.pen-unk .slot-role { background: #2a1506; color: var(--warn); padding: 0 4px; border-radius: 4px; }
.slot-chem { position: absolute; top: -8px; right: -6px; font: 800 13px/1 var(--display); background: var(--oro-1); color: #231803; border-radius: 99px; padding: 3px 5px; box-shadow: 0 0 0 2px #0b2016; }
.slot.is-empty { background: rgba(5, 13, 9, .6); border: 2px dashed rgba(241, 245, 239, .6); color: var(--chalk); min-height: 58px; justify-content: center; box-shadow: none; }
.slot.is-empty .ico { width: 20px; height: 20px; }
.slot:hover { filter: brightness(1.08); }
.chem-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.chem-list li { padding: 8px 10px; border-left: 3px solid var(--oro-2); background: rgba(3, 8, 5, .4); border-radius: 0 8px 8px 0; }
.chem-list li.muted { border-left-color: var(--line-2); }
.team-side { display: grid; gap: 12px; align-content: start; }
.team-side .h3 { margin-bottom: 0; }
.save-row { position: sticky; bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom, 0px)); z-index: 10; display: flex; justify-content: center; }
.save-row .btn { box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }

/* ---------- matches ---------- */
.partite-layout { display: grid; gap: 20px; }
.play-panel { display: grid; gap: 6px; justify-items: start; }
.play-panel p { margin: 0; }
.match-stage { margin-top: 14px; display: grid; gap: 12px; }
.scoreboard { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "h a" "s s" "c c" "t t"; align-items: start; gap: 6px 12px; padding: 14px; border-radius: 14px; background: #030805; border: 1px solid var(--line-2); }
.scoreboard.goal { animation: goalflash 1s ease-out; }
@keyframes goalflash { 0% { box-shadow: 0 0 0 0 rgba(255, 241, 184, .9); background: #2a2208; } 100% { box-shadow: 0 0 0 16px rgba(255, 241, 184, 0); background: #030805; } }
.sb-team { display: grid; min-width: 0; grid-area: h; }
.sb-away { text-align: right; grid-area: a; }
.sb-name { font: 800 19px/1.05 var(--display); text-transform: uppercase; overflow-wrap: break-word; }
.sb-meta { font-size: 12.5px; color: var(--muted); }
.sb-score { grid-area: s; justify-self: center; font: 800 58px/1 var(--display); font-variant-numeric: tabular-nums; display: flex; gap: 10px; }
.sb-dash { color: var(--muted); }
.sb-clock { grid-area: c; text-align: center; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--oro-1); font-variant-numeric: tabular-nums; }
.sb-track { grid-area: t; height: 4px; background: rgba(241, 245, 239, .12); border-radius: 4px; overflow: hidden; }
.sb-track span { display: block; height: 100%; background: var(--chalk); transform-origin: left; transform: scaleX(0); }
.match-result { margin: 0; font: 800 28px/1 var(--display); text-transform: uppercase; }
.mr-win { color: var(--oro-1); } .mr-draw { color: var(--argento-1); } .mr-loss { color: var(--bronzo-1); }
#btn-skip { justify-self: start; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 360px; overflow: auto; }
.ev { display: grid; grid-template-columns: 38px 22px 1fr; gap: 8px; align-items: start; padding: 8px 10px; border-radius: 10px; background: rgba(3, 8, 5, .5); font-size: 15px; animation: evin .35s ease-out; }
@keyframes evin { from { opacity: 0; transform: translateY(-6px); } }
.ev-min { font: 800 18px/1.1 var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.ev .ico { width: 20px; height: 20px; margin-top: 1px; }
.ev-goal { background: rgba(224, 180, 58, .14); border: 1px solid rgba(224, 180, 58, .4); font-weight: 700; }
.ev-goal .ico { color: var(--oro-1); }
.ev-card .ico { color: #f2d34d; }
.ev-save .ico, .ev-chance .ico { color: var(--argento-1); }
.ev-away { border-right: 3px solid var(--bronzo-2); }
.ev-home { border-left: 3px solid var(--argento-2); }
.recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rec { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(3, 8, 5, .45); border: 1px solid var(--line); }
.rec-badge { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; font: 800 18px/1 var(--display); color: #1b1308; }
.rec-win .rec-badge { background: var(--oro-2); } .rec-draw .rec-badge { background: var(--argento-2); } .rec-loss .rec-badge { background: var(--bronzo-1); }
.rec-main { min-width: 0; overflow-wrap: anywhere; }
.rec-when { display: block; font-size: 13px; }
.rec-pts { font-weight: 700; font-size: 14px; }
.boards { align-self: start; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 12px 0; border-radius: 99px; background: rgba(3, 8, 5, .6); border: 1px solid var(--line); }
.seg [role=tab] { min-height: 42px; border: 0; border-radius: 99px; background: transparent; color: var(--chalk-2); font-weight: 700; font-size: 14.5px; }
.seg [aria-selected=true] { background: var(--chalk); color: #07110c; }
.board-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.board-table th { text-align: left; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--line-2); }
.board-table td { padding: 8px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.board-table td:first-child { width: 36px; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.board-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.board-table tr.is-me td { background: rgba(224, 180, 58, .14); color: var(--oro-1); font-weight: 700; }
.me-line { font-weight: 700; color: var(--oro-1); }

/* ---------- desktop ---------- */
@media (min-width: 880px) {
  body { padding-bottom: 0; }
  .toast { bottom: 24px; }
  .tabs { position: static; display: flex; height: auto; padding: 0; background: none; border: 0; backdrop-filter: none; gap: 4px; margin-right: 12px; }
  .tab { flex-direction: row; gap: 8px; height: 40px; padding: 0 14px; border-radius: 99px; font-size: 14px; }
  .tab .ico { width: 20px; height: 20px; }
  .tab:hover { background: rgba(241, 245, 239, .07); color: var(--chalk); }
  .tab[aria-current="page"] { background: rgba(241, 245, 239, .1); }
  .tab[aria-current="page"]::before { top: auto; bottom: -9px; left: 22%; right: 22%; border-radius: 3px 3px 0 0; }
  body.no-tabs .tabs { display: none; }
  .top-in { --head-h: 64px; height: 64px; }
  :root { --head-h: 64px; }
  .oggi-layout { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); align-items: start; gap: 32px; }
  .hd-name { font-size: min(22px, calc(100cqw / (var(--L, 6) * .6))); }
  .hd-sub { font-size: 13px; }
  .cell-name { font-size: min(19px, calc(92cqw / (var(--L, 6) * .62))); }
  .album-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px 16px; }
  .album-grid.prim-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 12px; }
  .team-body { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); align-items: start; column-gap: 28px; }
  .team-body > .note, .team-body > .team-top, .team-body > .capbox { grid-column: 1 / -1; }
  .team-side .h3 { margin-top: 0; }
  .save-row { margin-top: 16px; }
  .save-row { position: static; justify-content: flex-start; }
  .partite-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 32px; align-items: start; }
  .skel-cards { grid-template-columns: repeat(4, 1fr); }
  .nudge { bottom: 20px; left: auto; right: 24px; transform: none; animation-name: nudge-in-d; }
  @keyframes nudge-in-d { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  body.has-nudge .toast { bottom: 24px; }
  .welcome-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 440px) {
  .top-in { gap: 8px; }
  .brand-name { font-size: 23px; white-space: nowrap; }
  .top-actions { gap: 0; }
  .protect { gap: 10px; }
  .protect-ico { width: 30px; height: 30px; }
}
@media (max-width: 380px) {
  .hd-name { font-size: min(15px, calc(100cqw / (var(--L, 6) * .6))); }
  .hd-sub { font-size: 10.5px; }
  .clock { font-size: 46px; }
  .brand-name { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .pc-front.tier-oro::after { display: none; }
}
.dlg-account .note { flex-wrap: nowrap; align-items: flex-start; }
.dlg-account .note .ico { margin-top: 2px; }

/* ---------- how to play: illustrated 6-step example ---------- */
.hw { margin: 8px 0 4px; }
.hw-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.hw-track:focus-visible { outline: 3px solid var(--oro-1); outline-offset: 3px; border-radius: 14px; }
.hw-step { min-width: 0; }
.hw-fig { margin: 0; height: 100%; display: grid; grid-template-rows: auto 1fr; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.hw-art { background: radial-gradient(120% 90% at 50% 0%, rgba(226, 244, 230, .08), transparent 70%), repeating-linear-gradient(180deg, rgba(255, 255, 255, .02) 0 18px, transparent 18px 36px); padding: 10px 10px 4px; border-bottom: 1px solid var(--line); }
.hw-svg { display: block; width: 100%; height: auto; aspect-ratio: 240 / 170; overflow: visible; font-family: var(--body); }
.hw-fig figcaption { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px 12px 12px; }
.hw-fig strong { display: block; font: 800 18px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.hw-fig p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.4; color: var(--chalk-2); }
.hw-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 800 16px/1 var(--display); color: #231803; background: linear-gradient(170deg, var(--oro-1), var(--oro-2)); }
.hw-dots { display: none; }
.howto-more { margin-top: 10px; }
.howto-more > summary { cursor: pointer; font-weight: 700; color: var(--chalk-2); min-height: 44px; display: flex; align-items: center; }
.hw-actions { justify-content: flex-end; margin-top: 12px; }
.howto .hw-host { margin-top: 6px; }

/* svg parts (colours from the site tokens) */
.hw-svg text { fill: var(--chalk); font-size: 11px; }
.hw-tile, .hw-corner { fill: rgba(241, 245, 239, .06); stroke: var(--line-2); stroke-width: 1; }
.hw-head .hw-lab { font: 800 10.5px/1 var(--display); letter-spacing: .04em; fill: var(--muted); }
.hw-head.is-on .hw-tile { fill: rgba(224, 180, 58, .16); stroke: var(--oro-2); stroke-width: 1.5; }
.hw-head.is-on .hw-lab { fill: var(--oro-1); }
.hw-band { fill: rgba(224, 180, 58, .08); }
.hw-cell { fill: rgba(3, 9, 6, .55); stroke: var(--line); stroke-dasharray: 3 3; }
.hw-glow { fill: rgba(255, 241, 184, .2); stroke: var(--oro-1); stroke-width: 2; stroke-dasharray: none; filter: drop-shadow(0 0 5px rgba(255, 220, 120, .8)); animation: hw-pulse 1.6s ease-in-out infinite; }
@keyframes hw-pulse { 50% { fill: rgba(255, 241, 184, .38); } }
.hw-filled { fill: rgba(125, 200, 140, .22); stroke: #8fd6a0; stroke-width: 2; }
.hw-check { stroke: #b9f0c6; }
.hw-bubble path { fill: var(--chalk); }
.hw-bubble text { fill: #07110c; font-weight: 700; font-size: 12px; }
.hw-pill rect { fill: rgba(125, 200, 140, .16); stroke: #8fd6a0; }
.hw-pill text { font-weight: 700; font-size: 11.5px; }
.hw-card-pop { transform-box: fill-box; transform-origin: 50% 80%; animation: hw-pop .7s cubic-bezier(.2, .9, .3, 1.3) both .2s; }
@keyframes hw-pop { from { opacity: 0; transform: translate(-30px, 30px) scale(.4); } to { opacity: 1; transform: none; } }
.hw-card { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.hw-card-in { fill: rgba(40, 28, 4, .22); stroke: rgba(255, 255, 255, .35); }
.hw-svg .hw-rt { font: 800 19px/1 var(--display); fill: #231803; }
.hw-svg .hw-role { font-size: 8px; font-weight: 700; fill: #3a2a06; letter-spacing: .08em; }
.hw-sil { fill: rgba(35, 24, 3, .55); }
.hw-card-foot { fill: rgba(35, 24, 3, .78); }
.hw-svg .hw-cname { font: 800 11px/1 var(--display); fill: var(--oro-1); letter-spacing: .06em; }
.hw-sep { stroke: var(--line-2); stroke-dasharray: 3 4; }
.hw-svg .hw-name { font-weight: 700; font-size: 12.5px; }
.hw-bar-bg { fill: rgba(241, 245, 239, .07); }
.hw-common .hw-bar { fill: var(--argento-2); }
.hw-rare .hw-bar { fill: var(--oro-2); }
.hw-svg .hw-pct { font: 800 14px/1 var(--display); }
.hw-svg .hw-small { font-size: 10px; fill: var(--muted); }
.hw-svg .hw-strong { fill: var(--chalk-2); font-weight: 700; }
.hw-svg .hw-pts { font: 800 17px/1 var(--display); }
.hw-common .hw-pts { fill: var(--argento-1); }
.hw-rare .hw-pts { fill: var(--oro-1); }
.hw-ring-bg { fill: none; stroke: rgba(241, 245, 239, .1); stroke-width: 9; }
.hw-ring { fill: none; stroke: var(--oro-2); stroke-width: 9; stroke-linecap: round; animation: hw-tick 6s linear infinite; }
@keyframes hw-tick { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 289; } }
.hw-ring-knob { stroke: var(--chalk-2); stroke-width: 3; stroke-linecap: round; }
.hw-svg .hw-clock { font: 800 30px/1 var(--display); font-variant-numeric: tabular-nums; }
.hw-pip { fill: rgba(241, 245, 239, .12); stroke: var(--line-2); }
.hw-pip.on { fill: var(--chalk); stroke: none; }
.hw-pitch { fill: #0f2c1d; stroke: var(--line-2); }
.hw-line { fill: none; stroke: rgba(241, 245, 239, .22); }
.hw-dot { fill: var(--chalk-2); }
.hw-dot.is-on { fill: var(--oro-1); stroke: #231803; stroke-width: 1.5; }
.hw-chem { stroke: var(--oro-1); stroke-width: 2; stroke-dasharray: 4 3; fill: none; animation: hw-dash 1.2s linear infinite; }
@keyframes hw-dash { to { stroke-dashoffset: -14; } }
.hw-plus rect { fill: var(--oro-1); }
.hw-svg .hw-plus text { fill: #231803; font-weight: 800; font-size: 11px; }
.hw-cap { fill: var(--argento-2); }
.hw-svg .hw-capn { font: 800 13px/1 var(--display); fill: var(--chalk); }
.hw-shield { stroke-width: 2; }
.hw-home .hw-shield { fill: rgba(224, 180, 58, .18); stroke: var(--oro-2); }
.hw-away .hw-shield { fill: rgba(185, 190, 196, .14); stroke: var(--argento-2); }
.hw-svg .hw-ini { font: 800 22px/1 var(--display); }
.hw-board { fill: rgba(3, 8, 5, .8); stroke: var(--line-2); }
.hw-svg .hw-score { font: 800 30px/1 var(--display); fill: var(--oro-1); font-variant-numeric: tabular-nums; }

.dlg-help { width: min(560px, calc(100vw - 24px)); }
@media (min-width: 900px) {
  .dlg-help { width: min(1000px, calc(100vw - 48px)); }
  .dlg-help .hw-track { grid-template-columns: repeat(3, 1fr); }
}
/* phones: swipeable carousel with dots */
@media (max-width: 600px) {
  .hw-track {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; padding: 2px 2px 4px; -webkit-overflow-scrolling: touch;
  }
  .hw-track::-webkit-scrollbar { display: none; }
  .hw-step { flex: 0 0 88%; scroll-snap-align: start; }
  .hw-dots { display: flex; justify-content: center; gap: 2px; margin-top: 6px; }
  .hw-dot-btn { width: 28px; height: 28px; border: 0; background: transparent; display: grid; place-items: center; padding: 0; }
  .hw-dot-btn::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--line-2); transition: width .2s, background-color .2s; }
  .hw-dot-btn[aria-current="step"]::before { width: 20px; background: var(--oro-1); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 600px) { .hw-track { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  .hw-glow, .hw-ring, .hw-chem, .hw-card-pop { animation: none !important; }
  .hw-ring { stroke-dashoffset: 104; }
}
/* the carousel must never widen its grid column */
.oggi-main, .oggi-side, .hw-host, .hw { min-width: 0; max-width: 100%; }
.hw-track { max-width: 100%; }
/* how-to step 7: the prophet's envelope */
.hw-env-body { fill: #e9e2cf; stroke: #b9ad8c; }
.hw-env-fold, .hw-env-flap { fill: none; stroke: #9c8f6c; stroke-width: 1.5; stroke-linejoin: round; }
.hw-env:not(.is-open) .hw-env-flap { fill: #ddd4bd; }
.hw-wax { fill: #b0302b; stroke: #7d1d19; }
.hw-letter rect { fill: #fbf7ec; stroke: #b9ad8c; }
.hw-svg .hw-letter text { font: 800 11px/1 var(--display); fill: #231803; letter-spacing: .05em; }
.hw-letter { animation: hw-letter 2.4s ease-in-out infinite alternate; }
@keyframes hw-letter { from { transform: translateY(14px); } to { transform: none; } }
.hw-arrow { fill: none; stroke: var(--oro-1); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hw-row-m rect { fill: rgba(185, 190, 196, .12); stroke: var(--argento-3); }
.hw-row-e rect { fill: rgba(224, 180, 58, .14); stroke: var(--oro-2); }
.hw-svg .hw-stampt { font: 800 12px/1 var(--display); fill: var(--argento-1); text-anchor: middle; }
.hw-svg .hw-strongt { font-weight: 800; fill: var(--chalk); }
.hw-row-e .hw-strongt { fill: var(--oro-1); }
@media (prefers-reduced-motion: reduce) { .hw-letter { animation: none !important; } }

/* ---------- il profeta ---------- */
.pc-stamp {
  position: absolute; z-index: 3; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-14deg);
  font: 800 5.6cqw/1.05 var(--display); text-transform: uppercase; letter-spacing: .06em; text-align: center;
  color: rgba(150, 30, 26, .92); border: .7cqw solid rgba(150, 30, 26, .85); border-radius: 2cqw; padding: 1.4cqw 2.6cqw;
  background: rgba(255, 250, 240, .72); mix-blend-mode: normal; max-width: 86%; pointer-events: none;
}
.pc-seal { position: absolute; z-index: 3; right: 3cqw; bottom: 3cqw; width: 14cqw; height: 14cqw; color: var(--oro-2); filter: drop-shadow(0 .8cqw 1.4cqw rgba(0, 0, 0, .55)); }
.pc-seal svg { width: 100%; height: 100%; }
.cell-env { position: absolute; z-index: 2; top: 5%; right: 6%; width: 26%; max-width: 26px; aspect-ratio: 1; color: #e9e2cf; opacity: .95; pointer-events: none; }
.cell-env svg { width: 100%; height: 100%; display: block; }
.cell.is-open { position: relative; }
.cell-env.is-matched { color: var(--argento-1); opacity: 1; }
.cell-env.is-escaped { color: var(--oro-1); opacity: 1; }
.cell.is-filled .cell-env { top: auto; bottom: 30%; right: 5%; width: 24%; background: rgba(4, 12, 8, .75); border-radius: 50%; padding: 3%; }
.cell-prophet { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.15; }
.reveal-prophet { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -4px auto 14px; max-width: 320px; font-weight: 700; font-size: 15px; padding: 8px 12px; border-radius: 12px; }
.reveal-prophet .ico { width: 22px; height: 22px; }
.reveal-prophet.is-matched { background: rgba(185, 190, 196, .14); border: 1px solid var(--argento-3); color: var(--argento-1); }
.reveal-prophet.is-escaped { background: rgba(224, 180, 58, .16); border: 1px solid var(--oro-2); color: var(--oro-1); }
.reveal-prophet small { display: block; font-weight: 500; color: var(--chalk-2); font-size: 13px; }
.end-prophet { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; color: var(--chalk-2); margin-top: 2px; }
.end-prophet .ico { width: 18px; height: 18px; color: #e9e2cf; }
.end-prophet .tag { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; }
.end-prophet .tag.is-matched { background: rgba(185, 190, 196, .16); color: var(--argento-1); }
.end-prophet .tag.is-escaped { background: rgba(224, 180, 58, .18); color: var(--oro-1); }
.end-thought { display: block; font-size: 13px; color: var(--muted); }

/* =====================================================================
   IL CLUB — creator, Squadra card, leaderboard rows, match crests
   (approved "club creator" design: navy, cyan glow, skewed chips, clipped panels)
   ===================================================================== */
.club-page, .club-card, .club-board, .club-sheet, .dlg-uni, .uni-promo {
  --cl-cyan: #3cf2ff; --cl-ink: #eaf6ff; --cl-muted: #7f93b5; --cl-muted-2: #9fb2d4; --cl-navy: #05070d;
  --cl-off: rgba(14, 20, 38, .85); --cl-off-b: rgba(120, 170, 255, .25);
  --cl-on: linear-gradient(160deg, rgba(60, 242, 255, .28), rgba(10, 14, 28, .95) 70%);
  --cl-head: "Saira Condensed", var(--display);
  --cl-ui: "Rajdhani", var(--body);
}
.club-crest { display: block; flex: none; overflow: visible; }

/* ---------- creator page ---------- */
.club-view { padding: 0; }
.club-page {
  --club-glow: rgba(60, 242, 255, .35);
  margin: -16px -16px 0; padding: 14px 16px 32px;
  display: flex; flex-direction: column; gap: 28px;
  color: var(--cl-ink); font-family: var(--cl-ui); font-weight: 600;
  background:
    radial-gradient(90% 420px at 50% 60px, var(--club-glow) 0%, transparent 70%),
    linear-gradient(115deg, transparent 0 38%, rgba(60, 242, 255, .05) 38% 40%, transparent 40% 62%, rgba(123, 92, 255, .06) 62% 65%, transparent 65%),
    repeating-linear-gradient(0deg, rgba(120, 170, 255, .045) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(120, 170, 255, .045) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, #0a0f1f 0, #05070d 900px);
  background-color: var(--cl-navy);
  min-height: 100vh;
}
@media (min-width: 700px) {
  .club-page { max-width: 640px; margin: 0 auto; border: 1px solid rgba(120, 170, 255, .18); padding: 20px 24px 36px; }
}
.club-page :focus-visible { outline: 2px solid var(--cl-cyan); outline-offset: 3px; }
.club-unskew { display: inline-flex; align-items: center; justify-content: center; gap: 8px; transform: skewX(12deg); }
.club-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px 0 6px; margin-bottom: -18px;
  border: 0; background: transparent; color: var(--cl-muted-2); font: 700 15px/1 var(--cl-ui); letter-spacing: .08em; text-transform: uppercase;
}
.club-back:hover { color: var(--cl-ink); }
.club-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.club-head-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.club-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--cl-cyan); }
.club-h1 { margin: 0; font: italic 800 38px/.95 var(--cl-head); text-transform: uppercase; }
.club-random {
  min-height: 46px; padding: 0 14px; flex: none; transform: skewX(-12deg);
  border: 1px solid var(--cl-cyan); background: rgba(60, 242, 255, .12); box-shadow: 0 0 16px rgba(60, 242, 255, .35);
  color: var(--cl-ink); font: 700 15px/1 var(--cl-ui); letter-spacing: .06em; text-transform: uppercase;
}
.club-random:hover { background: rgba(60, 242, 255, .22); }

.club-hero {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 16px 20px;
  clip-path: polygon(0 0, 92% 0, 100% 7%, 100% 100%, 8% 100%, 0 93%);
  background: linear-gradient(160deg, rgba(60, 242, 255, .16) 0%, rgba(20, 28, 52, .92) 30%, rgba(10, 14, 28, .96) 70%, rgba(123, 92, 255, .22) 100%);
}
.club-hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 8px); pointer-events: none; }
.club-hero > * { position: relative; }
.club-hero-art { display: flex; align-items: flex-end; gap: 4px; }
.club-hero-crest { display: flex; flex-direction: column; align-items: center; }
.club-hero-floor { width: 116px; height: 14px; margin-top: -4px; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 242, 255, .7), transparent); }
.club-hero-shirt { transform: rotate(6deg); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .7)); flex: none; }
.club-hero-name { margin: 0; font: italic 800 32px/1 var(--cl-head); text-transform: uppercase; text-align: center; text-shadow: 0 0 18px rgba(60, 242, 255, .35); overflow-wrap: anywhere; }
.club-stats { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.club-stat { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; background: rgba(5, 7, 13, .6); border-top: 2px solid var(--cl-cyan); min-width: 0; }
.club-stat-l { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cl-muted); }
.club-stat-v { font: 800 20px/1.2 var(--cl-head); }
.club-stat-sp { font-size: 15px; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.club-stat-sw { display: flex; gap: 3px; margin-top: 5px; }
.club-stat-sw span { width: 16px; height: 16px; transform: skewX(-14deg); border: 1px solid rgba(255, 255, 255, .4); }
.club-combos { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--cl-muted); text-align: center; }

.club-sec { display: flex; flex-direction: column; gap: 12px; }
.club-sec-head { display: flex; align-items: center; gap: 10px; }
.club-sec-n { font: italic 800 30px/1 var(--cl-head); color: var(--cl-cyan); text-shadow: 0 0 14px rgba(60, 242, 255, .6); }
.club-sec-t { margin: 0; font: italic 800 22px/1.1 var(--cl-head); text-transform: uppercase; }
.club-sec-line { flex-grow: 1; height: 1px; background: linear-gradient(90deg, rgba(60, 242, 255, .6), transparent); }
.club-label { margin: 0; font: 700 11px/1.3 var(--cl-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--cl-muted); }

.club-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 6px; }
.club-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.club-chip {
  min-height: 44px; padding: 0 14px; transform: skewX(-12deg);
  border: 1px solid var(--cl-off-b); background: var(--cl-off); color: var(--cl-ink);
  font: 700 15px/1 var(--cl-ui, "Rajdhani", sans-serif); letter-spacing: .04em; text-transform: uppercase;
}
.club-chip:hover { border-color: rgba(60, 242, 255, .6); }
.club-chip[aria-pressed="true"] { border-color: var(--cl-cyan); background: var(--cl-on); box-shadow: 0 0 0 1px var(--cl-cyan), 0 0 18px rgba(60, 242, 255, .55); }
.club-prefixes .club-chip[aria-pressed="true"] { background: var(--cl-cyan); color: #03050b; }
.club-grid3 .club-chip { min-height: 46px; padding: 0 6px; }
.club-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); flex: none; }

.club-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.club-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.club-field-city { grid-column: span 2; }
.club-page .club-input {
  width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid rgba(120, 170, 255, .35); border-radius: 0;
  background: rgba(10, 14, 28, .9); color: var(--cl-ink); font: 600 19px/1 var(--cl-ui);
}
.club-page .club-input:focus, .club-page .club-input:focus-visible { outline: none; border-color: var(--cl-cyan); box-shadow: 0 0 0 1px var(--cl-cyan), 0 0 18px rgba(60, 242, 255, .45); }
.club-page .club-input[aria-invalid="true"] { border-color: #ff7a8a; }
.club-hint { margin: -4px 0 0; font-size: 13px; color: var(--cl-muted); }
.club-err { margin: 0; min-height: 0; font-size: 15px; font-weight: 700; color: #ffb3bd; }
.club-err:empty { display: none; }

.club-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.club-tile {
  height: 104px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0;
  clip-path: polygon(0 0, 82% 0, 100% 16%, 100% 100%, 18% 100%, 0 84%);
  border: 0; background: var(--cl-off); box-shadow: inset 0 0 0 1px rgba(120, 170, 255, .2);
}
.club-tile:hover { box-shadow: inset 0 0 0 1px rgba(60, 242, 255, .6); }
.club-tile[aria-pressed="true"] { background: var(--cl-on); box-shadow: inset 0 0 0 2px var(--cl-cyan), inset 0 0 22px rgba(60, 242, 255, .45); }
.club-page .club-tile:focus-visible, .club-page .club-sponsor:focus-visible { outline: 3px solid #fff; outline-offset: -7px; }
.club-tile-l { font: 700 11px/1.1 var(--cl-ui); color: var(--cl-muted-2); max-width: 100%; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.club-pals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.club-pal {
  height: 60px; padding: 0 2px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid var(--cl-off-b); background: var(--cl-off);
}
.club-pal:hover { border-color: rgba(60, 242, 255, .6); }
.club-pal[aria-pressed="true"] { border-color: var(--cl-cyan); background: var(--cl-on); box-shadow: 0 0 0 1px var(--cl-cyan), 0 0 18px rgba(60, 242, 255, .55); }
.club-pal-sw { display: flex; gap: 2px; transform: skewX(-14deg); }
.club-pal-sw span { width: 20px; height: 20px; border: 1px solid rgba(255, 255, 255, .35); }
.club-pal-l { font: 700 10.5px/1.1 var(--cl-ui); letter-spacing: -.01em; color: var(--cl-muted-2); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.club-sponsors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.club-sponsor {
  min-height: 80px; min-width: 0; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  clip-path: polygon(0 0, 90% 0, 100% 18%, 100% 100%, 10% 100%, 0 82%); border: 0;
}
.club-sponsor[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--cl-cyan), inset 0 0 18px rgba(60, 242, 255, .5); }
.club-sp-row { display: flex; align-items: center; gap: 6px; max-width: 100%; }
.club-sp-row svg { flex: none; }
.club-sp-word { font-weight: 800; line-height: 1; white-space: nowrap; }
.club-sp-sub { font: 700 11px/1.1 var(--cl-ui); letter-spacing: .16em; text-transform: uppercase; opacity: .8; }

.club-btn-main {
  min-height: 58px; border: 0; padding: 0 18px;
  clip-path: polygon(0 0, 94% 0, 100% 30%, 100% 100%, 6% 100%, 0 70%);
  background: linear-gradient(90deg, #3cf2ff 0%, #6f7bff 55%, #b44dff 100%); box-shadow: 0 0 30px rgba(60, 242, 255, .45);
  color: #03050b; font: italic 800 24px/1 "Saira Condensed", var(--display); letter-spacing: .06em; text-transform: uppercase;
}
.club-btn-main:disabled { opacity: .6; }
.club-page .club-btn-main:focus-visible, .club-sheet .club-btn-main:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.club-loading { padding: 40px 0; }
.club-skel-hero { height: 360px; }

/* ---------- Squadra: "Il tuo club" card ---------- */
.club-card-host { margin-bottom: 16px; }
.club-card {
  --club-glow: rgba(60, 242, 255, .35);
  display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; min-height: 96px;
  clip-path: polygon(0 0, 95% 0, 100% 16%, 100% 100%, 5% 100%, 0 84%);
  background: radial-gradient(120% 140% at 0% 50%, var(--club-glow), transparent 60%), linear-gradient(160deg, rgba(60, 242, 255, .14), rgba(20, 28, 52, .95) 35%, rgba(10, 14, 28, .97) 75%, rgba(123, 92, 255, .22));
  color: var(--cl-ink); font-family: var(--cl-ui); font-weight: 600;
}
.club-card.is-loading { background: rgba(10, 14, 28, .7); }
.club-card-skel { width: 100%; height: 72px; }
.club-card-crest { flex: none; display: flex; }
.club-card-main { flex: 1; min-width: 0; }
.club-card-eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--cl-cyan); }
.club-card-name { margin: 2px 0 6px; font: italic 800 24px/1 var(--cl-head); text-transform: uppercase; overflow-wrap: break-word; }
.club-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.club-card-sp { margin: 0; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 8px; transform: skewX(-12deg); font-size: 13px; font-weight: 700; }
.club-card-sp > * { transform: skewX(12deg); }
.club-card-sp svg { flex: none; }
.club-card-sp span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.club-card-edit { flex: none; margin-right: 4px; border-color: var(--cl-cyan); background: rgba(60, 242, 255, .12); box-shadow: 0 0 14px rgba(60, 242, 255, .3); }
.club-card-edit:focus-visible { outline: 2px solid var(--cl-cyan); outline-offset: 3px; }

/* ---------- leaderboards (Classifica look) ---------- */
.club-board { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.club-row {
  display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 6px 14px 6px 6px;
  clip-path: polygon(0 0, 96% 0, 100% 22%, 100% 100%, 4% 100%, 0 78%);
  background: linear-gradient(100deg, rgba(30, 42, 76, .9), rgba(12, 17, 32, .92)); box-shadow: inset 0 0 0 1px rgba(120, 170, 255, .14);
  color: var(--cl-ink); font-family: var(--cl-ui); font-weight: 600;
}
.club-row.is-me { background: linear-gradient(100deg, rgba(60, 242, 255, .3), rgba(14, 20, 38, .95) 55%); box-shadow: inset 0 0 0 1px var(--cl-cyan); }
.club-pos {
  width: 34px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; transform: skewX(-14deg);
  background: rgba(120, 170, 255, .15); color: var(--cl-ink); font: italic 800 20px/1 var(--cl-head);
}
.club-row.is-gold .club-pos { background: linear-gradient(160deg, #fff6c4, #e0b43a 50%, #8a6412); color: #1a1406; }
.club-row.is-silver .club-pos { background: linear-gradient(160deg, #ffffff, #b9bec4 50%, #6e747b); color: #15181c; }
.club-row.is-bronze .club-pos { background: linear-gradient(160deg, #f0c49a, #b0713f 50%, #6e3f1c); color: #1c0f05; }
.club-row-crest { flex: none; display: flex; }
.club-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.club-row-team { font: italic 800 18px/1.05 var(--cl-head); text-transform: uppercase; overflow-wrap: break-word; }
.club-row-sub { font-size: 13px; line-height: 1.2; font-weight: 600; color: #8ea3c7; overflow-wrap: anywhere; }
.club-row-pts { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.club-row-pts b { font: 800 26px/1 var(--cl-head); font-variant-numeric: tabular-nums; }
.club-row.is-me .club-row-pts b { color: var(--cl-cyan); text-shadow: 0 0 14px rgba(60, 242, 255, .8); }
.club-row-pts small { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--cl-muted); white-space: nowrap; }

/* ---------- match: crests on the scoreboard and in the history ---------- */
.club-sb-crest { display: flex; margin-bottom: 4px; }
.scoreboard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.scoreboard .sb-meta { overflow-wrap: anywhere; }
.partite-layout > * { min-width: 0; }
.scoreboard .sb-name { font-size: 18px; }
.sb-away .club-sb-crest { justify-content: flex-end; }
.club-sb-crest:empty { display: none; }
.rec.club-rec { grid-template-columns: 32px 34px minmax(0, 1fr) auto; }
.club-rec-crest { display: flex; }
.club-rec-team { font-weight: 700; }
.club-rec-nick { color: var(--muted); font-size: 13.5px; }

/* ---------- first-session sheet ---------- */
.club-sheet {
  position: fixed; z-index: 150; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom, 0px));
  width: min(460px, calc(100vw - 24px));
  display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center;
  padding: 14px; color: var(--cl-ink); font-family: var(--cl-ui); font-weight: 600;
  clip-path: polygon(0 0, 94% 0, 100% 14%, 100% 100%, 6% 100%, 0 86%);
  background: linear-gradient(160deg, rgba(60, 242, 255, .2), #0d1428 40%, #070a14);
  box-shadow: inset 0 0 0 1px rgba(60, 242, 255, .6);
  animation: nudge-in .35s ease-out both;
}
.club-sheet-crest { display: flex; }
.club-sheet-h { margin: 0; font: italic 800 22px/1 var(--cl-head); text-transform: uppercase; color: var(--cl-cyan); }
.club-sheet-name { margin: 2px 0 2px; font: italic 800 17px/1.1 var(--cl-head); text-transform: uppercase; }
.club-sheet-text { margin: 0; font-size: 14px; line-height: 1.25; color: var(--cl-muted-2); }
.club-sheet-actions { grid-column: 1 / -1; display: flex; gap: 12px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.club-btn-sm { min-height: 46px; font-size: 17px; padding: 0 14px; }
.club-sheet .club-chip:focus-visible { outline: 2px solid var(--cl-cyan); outline-offset: 3px; }
@media (min-width: 880px) {
  .club-sheet { bottom: 20px; left: auto; right: 24px; transform: none; animation-name: nudge-in-d; }
}
@media (max-width: 360px) {
  .club-tiles { gap: 6px; }
  .club-hero-shirt { width: 124px; height: 124px; }
}

/* ---------- "soluzioni a mezzanotte": sealed end screen + yesterday's solutions ---------- */
.end-sealed { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(224, 180, 58, .45); background: rgba(224, 180, 58, .07); }
.end-sealed > .ico { flex: 0 0 auto; width: 28px; height: 28px; color: var(--oro-1); margin-top: 2px; }
.end-sealed p { margin: 0; display: grid; gap: 3px; min-width: 0; }
.end-sealed b { font-weight: 700; }
.end-sealed-sub { font-size: 14px; color: var(--chalk-2); }
.end-sealed .next-grid { margin: 2px 0 0; font-weight: 700; color: var(--oro-1); }
#end-panel:not(:empty) { margin-bottom: 16px; }
.yday { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 14px; }
.yday-ico .ico { width: 30px; height: 30px; color: #e9e2cf; display: block; }
.yday-txt { flex: 1 1 160px; min-width: 0; }
.yday-title { font: 800 20px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.yday-sub { margin: 2px 0 0; font-size: 14px; color: var(--chalk-2); }
.dlg-sol .sol-sub { margin: -4px 0 0; font-size: 14.5px; }
.dlg-sol .sol-list { margin-top: 12px; }

/* =====================================================================
   LA MAGLIA UNICA — list, rights, market, attack dialog (club console look)
   ===================================================================== */
.uni-view { padding: 0; }
@media (min-width: 700px) { .club-page.uni-page { max-width: 1080px; } }
.uni-head { display: flex; flex-direction: column; gap: 4px; }
.uni-lead { margin: 6px 0 0; max-width: 62ch; font-size: 15.5px; line-height: 1.4; color: var(--cl-muted-2); font-weight: 600; }
.uni-rights {
  display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px;
  clip-path: polygon(0 0, 94% 0, 100% 14%, 100% 100%, 6% 100%, 0 86%);
  background: linear-gradient(160deg, rgba(60, 242, 255, .18) 0%, rgba(20, 28, 52, .94) 35%, rgba(10, 14, 28, .97) 75%, rgba(123, 92, 255, .24) 100%);
}
.uni-rights-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.uni-rights-t { margin: 0; font: italic 800 22px/1 var(--cl-head); text-transform: uppercase; }
.uni-rights-n { margin-left: auto; font: italic 800 34px/1 var(--cl-head); color: var(--cl-cyan); text-shadow: 0 0 14px rgba(60, 242, 255, .7); font-variant-numeric: tabular-nums; }
.uni-pips { display: inline-flex; gap: 5px; }
.uni-pip { width: 22px; height: 12px; transform: skewX(-18deg); background: rgba(120, 170, 255, .16); box-shadow: inset 0 0 0 1px rgba(120, 170, 255, .35); }
.uni-pip.is-on { background: linear-gradient(90deg, #3cf2ff, #6f7bff); box-shadow: 0 0 10px rgba(60, 242, 255, .7); }
.uni-rights-how { margin: 0; font-size: 14.5px; line-height: 1.35; color: var(--cl-muted-2); }
.uni-rights-att { margin: 0; font: 700 12px/1.2 var(--cl-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--cl-cyan); }
.uni-rights-att.is-used { color: var(--cl-muted); }
.uni-pend { margin-top: 2px; padding: 8px 10px; border-left: 3px solid var(--oro-2); background: rgba(224, 180, 58, .08); }
.uni-pend-h { margin: 0 0 4px; display: flex; align-items: center; gap: 6px; font: 700 12px/1.2 var(--cl-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--oro-1); }
.uni-pend-h .ico { width: 16px; height: 16px; }
.uni-pend ul { margin: 0; padding: 0 0 0 4px; list-style: none; font-size: 14.5px; }
.uni-count { margin: -4px 0 0; font: 700 13px/1 var(--cl-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--cl-muted); }
.uni-filters small { font-size: 12px; opacity: .75; }
.uni-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
@media (min-width: 620px) { .uni-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .uni-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 14px; } }
.uni-item {
  min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 12px;
  clip-path: polygon(0 0, 88% 0, 100% 7%, 100% 100%, 12% 100%, 0 93%);
  background: linear-gradient(170deg, rgba(30, 42, 76, .92), rgba(10, 14, 28, .96)); box-shadow: inset 0 0 0 1px rgba(120, 170, 255, .16);
}
.uni-item.is-mine { background: linear-gradient(170deg, rgba(60, 242, 255, .28), rgba(12, 18, 34, .96) 55%); box-shadow: inset 0 0 0 2px var(--cl-cyan), inset 0 0 26px rgba(60, 242, 255, .35); }
.uni-item.is-free .uni-card { filter: saturate(.75) brightness(.9); }
.uni-card .pc-wrap { max-width: none; }
.uni-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.uni-pname { margin: 0; font: italic 800 17px/1.05 var(--cl-head); text-transform: uppercase; overflow-wrap: anywhere; }
.uni-holder, .uni-mk-who { display: flex; align-items: center; gap: 7px; min-width: 0; }
.uni-crest { flex: none; display: flex; }
.uni-pmain { display: flex; flex-direction: column; min-width: 0; }
.uni-cname { font: italic 800 14px/1.05 var(--cl-head); text-transform: uppercase; overflow-wrap: anywhere; }
.uni-nick { font-size: 13px; line-height: 1.2; color: #9fb2d4; overflow-wrap: anywhere; }
.uni-flag { margin-right: 4px; font-size: 14px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.uni-days { margin: 0; font-size: 12.5px; line-height: 1.3; color: var(--cl-muted-2); }
.uni-def { display: block; color: var(--cl-muted); }
.uni-free { margin: 0; font: italic 800 16px/1 var(--cl-head); text-transform: uppercase; color: var(--oro-1); letter-spacing: .04em; }
.uni-btn {
  align-self: flex-start; margin-top: 4px; min-height: 44px; min-width: 104px; padding: 0 16px; transform: skewX(-12deg);
  border: 1px solid var(--cl-cyan); background: linear-gradient(90deg, rgba(60, 242, 255, .3), rgba(111, 123, 255, .3)); box-shadow: 0 0 16px rgba(60, 242, 255, .4);
  color: var(--cl-ink); font: italic 800 18px/1 var(--cl-head); letter-spacing: .06em; text-transform: uppercase;
}
.uni-btn:hover:not(:disabled) { background: linear-gradient(90deg, rgba(60, 242, 255, .5), rgba(111, 123, 255, .5)); }
.uni-btn:disabled { border-color: rgba(120, 170, 255, .3); background: rgba(14, 20, 38, .85); box-shadow: none; color: var(--cl-muted); opacity: 1; }
.uni-why { margin: 0; font-size: 12px; line-height: 1.25; color: var(--cl-muted); }
.uni-tag { margin: 4px 0 0; align-self: flex-start; padding: 5px 10px; transform: skewX(-12deg); background: var(--cl-cyan); color: #03050b; font: 800 13px/1 var(--cl-ui); letter-spacing: .12em; text-transform: uppercase; }
.uni-empty { margin: 0; color: var(--cl-muted-2); }
.uni-market { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.uni-mk {
  display: flex; flex-direction: column; gap: 5px; padding: 9px 14px 10px;
  clip-path: polygon(0 0, 97% 0, 100% 22%, 100% 100%, 3% 100%, 0 78%);
  background: linear-gradient(100deg, rgba(30, 42, 76, .9), rgba(12, 17, 32, .92)); box-shadow: inset 0 0 0 1px rgba(120, 170, 255, .14);
}
.uni-mk-p { font: italic 800 17px/1 var(--cl-head); text-transform: uppercase; color: var(--oro-1); }
.uni-mk-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.uni-mk-row > .uni-mk-who { flex: 1 1 130px; }
.uni-mk-who.is-none { color: var(--cl-muted); font-weight: 700; flex: 0 0 auto; }
.uni-mk-arrow { flex: none; color: var(--cl-cyan); }
.uni-mk-sub { font-size: 12.5px; color: var(--cl-muted-2); }
.uni-mk-match .uni-mk-sub { color: #b9f0ff; }

/* card: holographic frame + ribbon for the one-in-the-world jersey */
.pc-wrap.is-unica::before {
  content: ""; position: absolute; inset: -2.4cqw; z-index: 0; pointer-events: none;
  border-radius: 7cqw 7cqw 7cqw 18cqw;
  background: conic-gradient(from 210deg, #fff1b8, #3cf2ff, #b44dff, #ff6fd8, #fff1b8, #6f7bff, #fff1b8);
  filter: saturate(1.2) drop-shadow(0 0 3cqw rgba(60, 242, 255, .45));
}
.pc-wrap.is-unica .pc-flip { z-index: 1; }
.pc-wrap.is-unica .pc-front::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 20%, rgba(60, 242, 255, .22) 35%, rgba(255, 111, 216, .2) 45%, rgba(255, 241, 184, .28) 55%, transparent 70%);
  background-size: 250% 100%; mix-blend-mode: color-dodge; animation: uni-holo 4.5s ease-in-out infinite; transform: none;
}
@keyframes uni-holo { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.pc-unica {
  position: absolute; z-index: 4; left: 50%; top: 2cqw; transform: translateX(-50%);
  padding: 1.4cqw 4cqw; font: italic 800 6.4cqw/1 "Saira Condensed", var(--display); letter-spacing: .14em; color: #1a1406;
  background: linear-gradient(100deg, #fff6c4, #e0b43a 45%, #fff1b8 60%, #b8872a); clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .5);
}
.album-item.is-unica-held { padding: 1.6%; }

/* album header link, partite promo, reveal line */
.album-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.uni-link {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; transform: skewX(-10deg);
  border: 1px solid #3cf2ff; background: linear-gradient(90deg, rgba(60, 242, 255, .16), rgba(180, 77, 255, .16)); box-shadow: 0 0 14px rgba(60, 242, 255, .3);
  color: #eaf6ff; font: italic 800 17px/1 "Saira Condensed", var(--display); letter-spacing: .05em; text-transform: uppercase;
}
.uni-link > * { transform: skewX(10deg); }
.uni-link-ico { color: #fff1b8; }
.uni-link-n { font: 700 12px/1 "Rajdhani", var(--body); letter-spacing: .06em; color: #3cf2ff; }
.uni-promo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 16px; padding: 14px;
  clip-path: polygon(0 0, 95% 0, 100% 16%, 100% 100%, 5% 100%, 0 84%);
  background: linear-gradient(160deg, rgba(60, 242, 255, .18), rgba(20, 28, 52, .95) 40%, rgba(10, 14, 28, .97) 80%, rgba(123, 92, 255, .22));
  color: var(--cl-ink); font-family: var(--cl-ui); font-weight: 600;
}
.uni-promo-t { flex: 1 1 220px; min-width: 0; }
.uni-promo-h { margin: 0 0 3px; font: italic 800 22px/1 var(--cl-head); text-transform: uppercase; color: var(--cl-cyan); }
.uni-promo-t p { margin: 0; font-size: 14px; line-height: 1.3; color: var(--cl-muted-2); }
.uni-promo-btn { flex: 0 1 auto; }
.uni-promo .club-btn-main:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.reveal-unique { display: flex; flex-direction: column; gap: 3px; margin: -6px auto 14px; max-width: 320px; padding: 8px 12px; font-size: 14px; font-weight: 700; line-height: 1.3; color: #eaf6ff; background: linear-gradient(100deg, rgba(60, 242, 255, .16), rgba(123, 92, 255, .18)); border: 1px solid rgba(60, 242, 255, .6); clip-path: polygon(0 0, 96% 0, 100% 20%, 100% 100%, 4% 100%, 0 80%); }

/* attack dialog */
.dlg-uni { width: min(520px, calc(100vw - 24px)); border-radius: 0; border: 0; color: var(--cl-ink); font-family: var(--cl-ui); font-weight: 600;
  clip-path: polygon(0 0, 95% 0, 100% 5%, 100% 100%, 5% 100%, 0 95%);
  background: radial-gradient(90% 300px at 50% 0, rgba(60, 242, 255, .22), transparent 70%), linear-gradient(180deg, #0a0f1f, #05070d); box-shadow: inset 0 0 0 1px rgba(60, 242, 255, .5); }
.dlg-uni::backdrop { background: rgba(2, 4, 10, .82); }
.dlg-uni :focus-visible { outline: 2px solid var(--cl-cyan); outline-offset: 3px; }
.uni-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.uni-dlg-h { margin: 0; font: italic 800 26px/1 var(--cl-head); text-transform: uppercase; }
.uni-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin: 14px 0 10px; }
.uni-vs-side { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.uni-vs-side b { font: italic 800 16px/1.05 var(--cl-head); text-transform: uppercase; overflow-wrap: anywhere; }
.uni-vs-side small { font-size: 13px; color: var(--cl-muted-2); overflow-wrap: anywhere; }
.uni-vs-x { font: italic 800 30px/1 var(--cl-head); color: var(--cl-cyan); text-shadow: 0 0 14px rgba(60, 242, 255, .8); }
.uni-dlg-text { margin: 0 0 8px; font-size: 15px; line-height: 1.4; color: var(--cl-muted-2); }
.uni-dlg-cost { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 700 13px/1 var(--cl-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--cl-cyan); }
.uni-dlg-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.uni-dlg-actions .club-btn-main { flex: 1 1 200px; }
.uni-outcome { margin: 10px 0; padding: 10px 12px; font: italic 800 22px/1.1 var(--cl-head); text-transform: uppercase; text-align: center; }
.uni-outcome.is-won { color: #1a1406; background: linear-gradient(100deg, #fff6c4, #e0b43a 50%, #fff1b8); box-shadow: 0 0 24px rgba(224, 180, 58, .5); }
.uni-outcome.is-lost, .uni-outcome.is-draw { color: var(--cl-ink); background: rgba(120, 170, 255, .12); box-shadow: inset 0 0 0 1px rgba(120, 170, 255, .3); }
.uni-sb { background: rgba(3, 5, 12, .9); border-color: rgba(60, 242, 255, .4); }
.dlg-uni { overflow-y: auto; overscroll-behavior: contain; }
.uni-sb { padding: 10px 12px; gap: 4px 10px; }
.uni-sb .sb-score { font-size: 42px; }
.uni-sb .sb-name { font-size: 16px; }
.uni-sb .sb-meta { font-size: 12px; overflow-wrap: normal; }
.uni-feed { margin-top: 10px; max-height: min(30vh, 260px); }
.uni-feed .ev { font-size: 14px; padding: 6px 10px; }
.uni-feed .ev { background: rgba(14, 20, 38, .7); }
@media (prefers-reduced-motion: reduce) { .pc-wrap.is-unica .pc-front::after { animation: none; } }

/* header: at 390px in Spanish ("Dos Camisetas") the language button overflowed by 2px -> the brand may shrink, never the buttons */
.brand { min-width: 0; }
.brand-mark { flex: none; }
.brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-actions { flex: none; }
@media (max-width: 420px) {
  .top-in { gap: 8px; }
  .top-actions { gap: 2px; }
  .brand-name { font-size: 24px; }
}
/* how-to step 8: la maglia unica */
.hw-uni-frame { fill: #3cf2ff; stroke: #b44dff; stroke-width: 2; filter: drop-shadow(0 0 6px rgba(60, 242, 255, .7)); }
.hw-uni-holo { fill: rgba(60, 242, 255, .12); stroke: rgba(255, 255, 255, .45); }
.hw-uni-badge rect { fill: #fff1b8; stroke: #8a6412; }
.hw-svg .hw-uni-badge text { font: italic 800 11px/1 "Saira Condensed", var(--display); fill: #1a1406; letter-spacing: .12em; }
.hw-uni-crown { fill: var(--oro-2); stroke: #8a6412; stroke-width: 1; }
.hw-uni-holder rect:first-child { fill: rgba(60, 242, 255, .12); stroke: #3cf2ff; }
.hw-uni-me { fill: var(--oro-2); }
.hw-uni-him { fill: var(--argento-2); }