:root {
  --bg: #06101f;
  --card: rgba(16, 34, 58, .74);
  --line: rgba(255, 255, 255, .09);
  --text: #effbf4;
  --muted: #92a8b8;
  --gold: #ffd166;
  --lime: #a3e635;
  --green: #22c55e;
  --cyan: #22d3ee;
  --grad: linear-gradient(135deg, #e7ff9e, #4ade80 45%, #10b981);
  --title: linear-gradient(135deg, #ffffff, #b7f7c8 40%, #34d399 70%, #22d3ee);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  color: var(--text);
  color-scheme: dark;
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); }
body {
  background:
    radial-gradient(500px 420px at 0% -6%, rgba(255, 250, 225, .18), transparent 70%),
    radial-gradient(500px 420px at 100% -6%, rgba(255, 250, 225, .18), transparent 70%),
    radial-gradient(900px 520px at 50% 118%, rgba(34, 197, 94, .3), transparent 65%),
    radial-gradient(700px 500px at 50% 40%, rgba(16, 44, 80, .55), transparent 70%),
    var(--bg);
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
input { font: inherit; }
a { color: var(--cyan); }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
h2 { margin: 0; }

/* screens */
.screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; gap: 12px;
  width: 100%; max-width: 560px; margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.985);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.screen.active { opacity: 1; visibility: visible; transform: none; }
.screen.center { justify-content: center; align-items: center; }

.logo { text-align: center; line-height: .86; filter: drop-shadow(0 8px 26px rgba(52, 211, 153, .35)); }
.logo span { display: block; font-weight: 900; letter-spacing: .72em; margin-left: .72em; font-size: 15px; color: #d9f99d; }
.logo b {
  display: block; font-size: 54px; font-weight: 900; font-style: italic; letter-spacing: -.03em; padding: 0 .12em;
  background: var(--title); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.spinner.ball { width: auto; height: auto; border: 0; font-size: 46px; line-height: 1; animation: roll 1.1s cubic-bezier(.5, .1, .5, .9) infinite; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5)); }
@keyframes roll { 0% { transform: translateX(-18px) rotate(0); } 50% { transform: translateX(18px) rotate(360deg); } 100% { transform: translateX(-18px) rotate(720deg); } }

/* buttons & inputs */
.btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px 16px; border-radius: 16px; font-weight: 800; font-size: 16px;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--line);
  transition: transform .08s, background .15s, opacity .15s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn small { font-weight: 600; font-size: 12px; opacity: .75; margin-top: 2px; }
.btn.primary { background: var(--grad); color: #052e16; border: 0; box-shadow: 0 8px 26px rgba(34, 197, 94, .35), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn.big { padding: 17px 20px; font-size: 18px; border-radius: 20px; }
.btn.ghost { background: transparent; }
.btn.danger { background: rgba(255, 77, 94, .14); border-color: rgba(255, 77, 94, .35); color: #ff9aa5; }
.icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); font-size: 20px; }
.icon-spacer { width: 44px; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
input[type=text], input:not([type]) {
  width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(0, 0, 0, .28); color: var(--text); font-size: 17px; font-weight: 700; outline: none;
  user-select: text; -webkit-user-select: text;
}
input:not([type]):focus { border-color: var(--lime); }

.card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.card p { margin: 0; text-align: center; }
.avatars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.avb { aspect-ratio: 1; border-radius: 14px; font-size: 26px; background: rgba(255, 255, 255, .05); border: 2px solid transparent; transition: transform .1s; }
.avb.on { border-color: var(--lime); background: rgba(163, 230, 53, .14); transform: scale(1.06); }
.card .avatars { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.card .avb { font-size: 19px; border-radius: 10px; }
/* flags: the team you play for */
.fl { font-style: normal; margin-right: 5px; }
.flag-pick { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.flag-pick canvas { flex: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.flag-pick .btn { flex: 1; align-items: flex-start; padding: 10px 14px; }
.flags { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.flagb { display: grid; justify-items: center; gap: 4px; padding: 8px 2px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 2px solid transparent; }
.flagb small { font-size: 10.5px; font-weight: 800; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flagb.on { border-color: var(--lime); background: rgba(163, 230, 53, .12); }
.flagb.on small { color: var(--text); }
/* badges: Premium star, player level */
.sup { font-style: normal; font-size: .8em; margin-left: 4px; filter: drop-shadow(0 0 6px rgba(255, 209, 102, .7)); }
.lv { display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; margin-left: 5px; padding: 0 .35em; border-radius: 99px; vertical-align: .1em;
  font: 900 .62em/1 system-ui, sans-serif; font-style: normal; color: #052e16; background: linear-gradient(135deg, #d9f99d, #4ade80); }

/* shop */
.gold-pill { position: relative; display: flex; align-items: center; gap: 5px; height: 44px; padding: 0 12px 0 9px; border-radius: 14px; font-weight: 900; font-size: 15px;
  background: linear-gradient(145deg, rgba(255, 209, 102, .22), rgba(255, 138, 61, .12)); border: 1px solid rgba(255, 209, 102, .45); font-variant-numeric: tabular-nums; }
.gold-pill span { font-size: 18px; }
.gold-pill .dot, .dbtn .dot, .tabs .dot { position: absolute; top: 6px; right: 6px; }
.bal { float: right; font-size: 16px; padding: 4px 12px; border-radius: 99px; background: rgba(255, 209, 102, .14); color: var(--gold); }
.tabs { display: flex; gap: 6px; margin: 4px 0 12px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, .25); }
.tabs button { position: relative; flex: 1; padding: 9px 4px; border-radius: 10px; font-size: 13px; font-weight: 800; color: var(--muted); }
.tabs button.on { color: var(--text); background: rgba(255, 255, 255, .1); }
.discsets { display: grid; gap: 8px; }
.sk { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.sk.on { border-color: var(--lime); background: rgba(163, 230, 53, .1); }
.sk.locked canvas { filter: grayscale(.7) brightness(.75); }
.sk canvas { flex: none; }
.sk-info { flex: 1; min-width: 0; display: grid; gap: 3px; }
.sk-name { display: flex; align-items: center; gap: 6px; }
.sk-name .tag { font-size: 10px; }
.stat { display: flex; align-items: center; gap: 6px; }
.stat small { width: 38px; font-size: 10px; font-weight: 800; color: var(--muted); }
.segs { display: flex; gap: 2px; }
.segs i { width: 9px; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, .1); }
.segs i.f { background: linear-gradient(#e7ff9e, #22c55e); }
.segs i.n { background: rgba(34, 211, 238, .55); }
.sk-act { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.sk-act .btn.small { padding: 7px 10px; }
.inuse { font-size: 12px; font-weight: 800; color: var(--lime); text-align: center; }
.btn.primary.poor { filter: saturate(.35) brightness(.8); }
.free-gold { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, rgba(74, 222, 128, .14), rgba(34, 211, 238, .08)); border: 1px solid rgba(74, 222, 128, .3); }
.free-gold > span { font-size: 28px; }
.free-gold div { flex: 1; display: grid; }
.free-gold small, .rankcard small, .level small, .done-card small { color: var(--muted); font-size: 12px; }
.premium { padding: 14px; border-radius: 18px; background: linear-gradient(160deg, rgba(255, 209, 102, .14), rgba(16, 185, 129, .14)); border: 1px solid rgba(255, 209, 102, .35); }
.premium h3 { margin: 0 !important; color: var(--text) !important; font-size: 20px !important; text-transform: none !important; letter-spacing: 0 !important; }
.btn.wide, .btn.small.wide { width: 100%; }
a.btn { text-decoration: none; color: inherit; }
a.btn.primary { color: #052e16; }
.shop-btn { padding: 12px; font-size: 14px; }
.gp-btn { padding: 11px; font-size: 14px; background: rgba(52, 199, 120, .12); border-color: rgba(52, 199, 120, .45); }
.rewards .dbl { flex-basis: 100%; margin-top: 4px; animation: bob .7s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-3px); } }

/* home */
.menu .row .btn { padding: 12px 6px; font-size: 15px; white-space: nowrap; }
.row3 .btn { font-size: 14px; }
.dbtn { position: relative; }
.menu .row .btn small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* profile, ranks, daily */
.level { display: grid; gap: 6px; margin-bottom: 10px; }
.level > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.xpbar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.xpbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #a3e635, #22d3ee); }
.rankcard { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.rankcard span { font-size: 30px; }
.rankcard div { display: grid; }
.lb { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lb li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.lb li.mine { background: rgba(163, 230, 53, .14); box-shadow: inset 0 0 0 1px rgba(163, 230, 53, .4); }
.lb .pos { width: 26px; text-align: center; font-weight: 900; color: var(--muted); }
.lb .av { font-size: 20px; }
.lb .nm { flex: 1; min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.dtiles div { display: grid; justify-items: center; gap: 2px; padding: 12px 4px; border-radius: 16px; background: rgba(255, 255, 255, .05); text-align: center; }
.dtiles span { font-size: 26px; }
.dtiles b { font-size: 14px; }
.dtiles small { color: var(--muted); font-size: 11px; }
.done-card { display: grid; gap: 4px; padding: 14px; border-radius: 16px; text-align: center; font-weight: 700; background: rgba(74, 222, 128, .1); border: 1px solid rgba(74, 222, 128, .3); }
.searching { display: grid; justify-items: center; gap: 10px; margin: 18px 0 8px; text-align: center; }
.searching b { font-size: 28px; font-variant-numeric: tabular-nums; }
.rewards { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 12px; }
.rewards:empty { display: none; }
.rewards span { padding: 6px 12px; border-radius: 99px; font-weight: 800; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); }
.rewards .up { color: #4ade80; }
.rewards .down { color: #ff8a8a; }
.share-shot { width: 100%; margin-top: 4px; background: linear-gradient(135deg, rgba(16, 185, 129, .3), rgba(34, 211, 238, .2)); border-color: rgba(52, 211, 153, .45); }
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 2px solid transparent; color: var(--muted); }
.theme i { width: 46px; height: 46px; border-radius: 10px; border: 5px solid var(--f); background: repeating-linear-gradient(180deg, var(--a) 0 8px, var(--b) 8px 16px); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), 0 0 12px -2px var(--l); }
.theme small { font-size: 11px; font-weight: 800; text-align: center; }
.theme.on { border-color: var(--lime); color: var(--text); background: rgba(163, 230, 53, .12); }
.theme:disabled { opacity: .5; }
.forms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.form { display: grid; justify-items: center; gap: 4px; padding: 6px 4px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 2px solid transparent; color: var(--muted); }
.form svg { width: 100%; height: auto; border-radius: 8px; }
.form small { font-size: 10px; font-weight: 800; text-align: center; line-height: 1.2; }
.form.on { border-color: var(--lime); color: var(--text); background: rgba(163, 230, 53, .12); }
.form-desc { min-height: 3.4em; margin: -4px 0 14px; text-align: center; font-size: 13px; color: var(--muted); }
.form-desc b { display: block; color: var(--text); font-size: 14px; }
.fchip { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 14px; padding: 8px 12px; border-radius: 16px; text-align: left;
  background: var(--card); border: 1px solid var(--line); color: var(--text); }
.fchip svg { width: 46px; height: auto; flex: none; border-radius: 6px; }
.fchip span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.fchip small { font-size: 11px; font-weight: 700; color: var(--muted); }
.fchip b { font-size: 15px; font-weight: 900; }
.fchip i { font-style: normal; font-size: 24px; line-height: 1; color: var(--lime); }
#l-form .fchip { margin: 10px 0 4px; }
.slot .nm small.fm { display: block; font-size: 11px; font-weight: 700; color: var(--muted); }
.sheet h3 small { text-transform: none; letter-spacing: 0; font-weight: 600; }
.news { padding-left: 0; list-style: none; display: grid; gap: 10px; margin: 0 0 6px; line-height: 1.4; }
.news li { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.linkbtn { color: var(--cyan); text-decoration: underline; font-size: inherit; }

/* replay */
#s-replay { align-items: stretch; }
#s-replay h2 { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#s-replay p { margin: 0; }
.replay-wrap { flex: 1; min-height: 0; display: grid; place-items: center; }
#r-pitch { display: block; border-radius: 18px; box-shadow: 0 22px 60px rgba(0, 0, 0, .65); }

/* home */
#s-home { align-items: center; }
.topbar { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbar h2 { font-size: 18px; }
.me { display: flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 800; max-width: 70%; }
#h-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me .lv { flex: none; margin-left: -4px; }
.me .av { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #17345a; font-size: 21px; }
.demo-wrap { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; pointer-events: none; perspective: 1100px; }
/* sized by app.js fitDemo; absolute, so the canvas never pushes the menu around */
.demo-wrap { position: relative; }
#h-demo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotateX(32deg); transform-origin: 50% 50%;
  border-radius: 18px; filter: drop-shadow(0 34px 30px rgba(0, 0, 0, .55));
}
.menu { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; }
.join { display: flex; gap: 10px; }
.join input { flex: 1; min-width: 0; text-align: center; letter-spacing: .4em; font-size: 20px; font-weight: 900; text-transform: uppercase; }
.join .btn { flex: none; width: 42%; }

.top-icons { display: flex; gap: 8px; flex: none; }
.topbar .me { min-width: 0; flex-shrink: 1; } /* the name gives way to the gold count, never the buttons */
.row-btn { flex-direction: row; gap: 8px; flex-wrap: wrap; }
.pill { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: rgba(74, 222, 128, .16); color: #4ade80; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #ff4d5e; box-shadow: 0 0 8px #ff4d5e; }
.center { text-align: center; }

/* modes */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.modes.four { grid-template-columns: repeat(4, 1fr); }
.mode-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 2px; border-radius: 14px;
  font-size: 12px; font-weight: 800; color: var(--muted); background: var(--card); border: 1px solid var(--line); transition: transform .1s;
}
.mode-btn span { font-size: 22px; line-height: 1.2; }
.mode-btn.on { color: var(--text); border-color: var(--lime); background: rgba(163, 230, 53, .14); box-shadow: 0 0 16px rgba(163, 230, 53, .22); }
.mode-btn:active { transform: scale(.96); }
.mode-btn:disabled:not(.on) { opacity: .4; }
.mode-desc { text-align: center; margin: 0; min-height: 2.8em; line-height: 1.4; }

/* lobby */
.code-card { text-align: center; padding: 18px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.code { font-size: 58px; font-weight: 900; letter-spacing: .2em; margin: 2px 0 12px; padding-left: .2em; background: var(--title); -webkit-background-clip: text; background-clip: text; color: transparent; cursor: pointer; }
.slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.slot { display: flex; align-items: center; gap: 10px; padding: 9px 12px; min-height: 60px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.slot.empty { opacity: .5; border-style: dashed; }
.slot .av { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #17345a; font-size: 24px; }
.slot .nm { flex: 1; min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot i:not(.lv):not(.fl) { color: var(--muted); font-style: normal; font-weight: 600; } /* "(you)"; badges keep their own look */
.tag { font-size: 11px; font-weight: 900; padding: 3px 8px; border-radius: 99px; background: rgba(163, 230, 53, .16); color: var(--lime); white-space: nowrap; }
.tag.bot { background: rgba(34, 211, 238, .15); color: var(--cyan); }
.tag.off { background: rgba(255, 255, 255, .08); color: var(--muted); }
.x { width: 34px; height: 34px; flex: none; border-radius: 10px; background: rgba(255, 255, 255, .07); }
.addf { width: 32px; height: 32px; flex: none; border-radius: 10px; font-size: 14px; background: rgba(34, 211, 238, .14); color: var(--cyan); }
#s-lobby { overflow-y: auto; }
#l-host { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
#l-bots .btn { padding: 12px 6px; font-size: 13px; }
.wait { text-align: center; margin-top: auto; }

/* match: the scoreboard */
#s-game { gap: 8px; padding-left: 8px; padding-right: 8px; }
.g-top { display: flex; gap: 6px; align-items: stretch; }
#g-score { flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 6px; }
.tm {
  --t: 0;
  position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: visible;
  padding: 5px 8px 7px 5px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); transition: box-shadow .2s, border-color .2s, opacity .2s;
}
.tm.r { flex-direction: row-reverse; padding: 5px 5px 7px 8px; text-align: right; }
.tm.turn { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime), 0 0 22px -4px var(--lime); }
.tm.off { opacity: .45; }
.tm .av { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #17345a; font-size: 19px; }
.tm .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tm .info b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm .info span { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm .tbar { position: absolute; left: 10px; right: 10px; bottom: 3px; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.tm.turn .tbar::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--t)); background: linear-gradient(90deg, #22c55e, #a3e635); }
.tm.r.turn .tbar::after { transform-origin: right; }
.sc { flex: none; display: grid; justify-items: center; align-content: center; padding: 2px 10px; border-radius: 14px; background: #04101e; border: 1px solid rgba(163, 230, 53, .3); box-shadow: inset 0 0 18px rgba(34, 197, 94, .15); }
.sc .nums { display: flex; align-items: baseline; gap: 6px; font-weight: 900; font-size: 26px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.sc .nums i { font-style: normal; font-size: 18px; color: var(--muted); }
.sc small { font-size: 9.5px; font-weight: 800; color: var(--lime); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.side-pill { grid-column: 1 / -1; height: 48px; display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); font-weight: 700; font-size: 13px; color: var(--muted); }
.bubble { position: absolute; left: 50%; top: 100%; z-index: 5; font-size: 34px; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); animation: bubble 2.6s ease forwards; }
@keyframes bubble {
  0% { transform: translate(-50%, -10px) scale(.2); opacity: 0; }
  15% { transform: translate(-50%, 8px) scale(1.25); opacity: 1; }
  25% { transform: translate(-50%, 6px) scale(1); }
  80% { opacity: 1; }
  100% { transform: translate(-50%, 34px); opacity: 0; }
}

.pitch-wrap { flex: 1; min-height: 0; display: grid; place-items: center; touch-action: none; } /* the whole area takes a pull */
.pitch-box { position: relative; }
#pitch { display: block; border-radius: 18px; touch-action: none; box-shadow: 0 22px 60px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .05); }
#g-banner {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; pointer-events: none; opacity: 0;
  font-size: clamp(30px, 10vw, 52px); font-weight: 900; font-style: italic; text-align: center;
  color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .7), 0 0 30px rgba(163, 230, 53, .5);
}
#g-banner small { display: block; font-size: .36em; font-style: normal; letter-spacing: .04em; }
#g-banner.goal { font-size: clamp(56px, 20vw, 104px); letter-spacing: -.02em; }
#g-banner.goal b { text-shadow: none; background: linear-gradient(180deg, #ffffff, #d9f99d 45%, #22c55e); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 22px rgba(34, 197, 94, .8)); }
#g-banner.goal.them b { background: linear-gradient(180deg, #ffffff, #fecaca 45%, #f43f5e); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 6px 22px rgba(244, 63, 94, .7)); }
#g-banner.goal.show { animation: goal 2.2s cubic-bezier(.2, .9, .3, 1.1) forwards; }
@keyframes goal {
  0% { opacity: 0; transform: scale(3) rotate(-8deg); }
  12% { opacity: 1; transform: scale(.92) rotate(-4deg); }
  20%, 78% { opacity: 1; transform: scale(1) rotate(-4deg); }
  100% { opacity: 0; transform: scale(1.12) rotate(-4deg) translateY(-24px); }
}
#g-banner.power { color: #ffe39a; text-shadow: 0 4px 24px rgba(0, 0, 0, .7), 0 0 40px rgba(192, 132, 252, .9); }
#g-banner.replay { font-size: clamp(26px, 8vw, 42px); color: #e0f2fe; text-shadow: 0 4px 24px rgba(0, 0, 0, .7), 0 0 40px rgba(34, 211, 238, .9); }
#g-banner.show { animation: banner 1.4s ease forwards; }
@keyframes banner {
  0% { opacity: 0; transform: scale(2.2); }
  15%, 70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.92) translateY(-20px); }
}

.g-controls { position: relative; display: flex; flex-direction: column; gap: 6px; }
#g-status { text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); min-height: 18px; }
#g-status.hurry { color: #ff8a8a; animation: pulse .5s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .55; } }
.g-bottom { display: flex; gap: 8px; align-items: center; }
#g-powers { flex: 1; display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 8px; }
#g-clock {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 5px 14px; border-radius: 99px;
  font-weight: 900; font-variant-numeric: tabular-nums; background: #04101e; border: 1px solid rgba(163, 230, 53, .35); box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
#g-clock.low { color: #ff8a8a; border-color: rgba(255, 77, 94, .5); animation: pulse .5s ease-in-out infinite alternate; }
.pw-btn {
  height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 16px; background: var(--card); border: 1px solid var(--line); transition: transform .15s, box-shadow .15s, background .15s;
}
.pw-btn span { font-size: 22px; line-height: 1; }
.pw-btn small { font-size: 10px; font-weight: 800; color: var(--muted); }
.pw-btn.empty { border-style: dashed; opacity: .3; }
.pw-btn:disabled { opacity: .5; }
.pw-btn.armed { background: linear-gradient(135deg, rgba(168, 85, 247, .5), rgba(34, 211, 238, .35)); border-color: #c084fc; box-shadow: 0 0 22px rgba(192, 132, 252, .65); transform: translateY(-3px); }
.pw-btn.armed small { color: #fff; }
#g-emote { width: 48px; height: 48px; font-size: 24px; border-radius: 16px; }
#g-emotes {
  position: absolute; right: 0; bottom: 56px; z-index: 10; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding: 8px; border-radius: 18px; background: rgba(8, 20, 38, .97); border: 1px solid var(--line); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); animation: tin .15s ease;
}
#g-emotes button { width: 50px; height: 50px; border-radius: 12px; font-size: 28px; }
#g-emotes button:active { background: rgba(255, 255, 255, .1); }

/* friends */
.myid { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.myid b { color: var(--lime); font-size: 18px; }
.addrow { margin-bottom: 4px; }
.addrow input { letter-spacing: normal; font-size: 16px; font-weight: 700; text-transform: none; text-align: left; }
.addrow .btn { width: auto; flex: none; padding: 0 22px; }
ul.fl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
ul.fl li { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
ul.fl .ic { padding: 7px 9px; }
ul.fl .av { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #17345a; font-size: 20px; }
ul.fl .nm { flex: 1; min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.fl .nm small { display: block; font-weight: 600; font-size: 12px; color: var(--muted); }
.btn.small { flex: none; padding: 8px 12px; font-size: 13px; border-radius: 12px; }

/* toasts */
#toasts { position: fixed; z-index: 50; top: calc(max(12px, env(safe-area-inset-top)) + 62px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.toast { padding: 9px 16px; border-radius: 999px; background: rgba(6, 18, 34, .94); border: 1px solid var(--line); font-weight: 700; font-size: 14px; text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); animation: tin .25s ease; transition: opacity .4s, transform .4s; }
.toast.bad { border-color: rgba(255, 77, 94, .5); color: #ffb3bb; }
.toast.out { opacity: 0; transform: translateY(-8px); }
@keyframes tin { from { opacity: 0; transform: translateY(-10px) scale(.95); } }
#net { position: fixed; z-index: 60; bottom: calc(env(safe-area-inset-bottom) + 14px); left: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: 99px; background: #4a1d24; color: #ffc2c8; font-weight: 800; font-size: 13px; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }

/* modals */
.modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; padding: 10px; background: rgba(2, 8, 16, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .2s ease; }
.modal.flagpick { z-index: 45; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 26px;
  background: linear-gradient(180deg, #12304f, #0a1a2f); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 -10px 60px rgba(0, 0, 0, .5);
  animation: up .3s cubic-bezier(.2, .9, .3, 1.15);
}
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 600px) { .modal { align-items: center; } }
.sheet h2 { font-size: 22px; margin-bottom: 12px; }
.sheet h3 { margin: 18px 0 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.sheet p { line-height: 1.45; }
.sheet > .btn { width: 100%; margin-top: 14px; }
.actions { display: flex; gap: 10px; margin-top: 16px; }
.actions > * { flex: 1; }
.actions.col { flex-direction: column; }
.actions p { margin: 0; align-self: center; text-align: center; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 13px; font-weight: 800; color: var(--muted); }
.sheet .avatars { margin-bottom: 12px; }
.toggles { display: flex; gap: 10px; margin: 14px 0; }
.tg { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); font-weight: 800; }
.tg input { order: 2; flex: none; appearance: none; -webkit-appearance: none; position: relative; width: 42px; height: 24px; margin: 0; border-radius: 99px; background: rgba(255, 255, 255, .15); transition: background .2s; }
.tg input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s; }
.tg input:checked { background: var(--green); }
.tg input:checked::after { left: 21px; }
.links { text-align: center; }
.over-title { text-align: center; font-size: 30px !important; font-style: italic; background: var(--title); -webkit-background-clip: text; background-clip: text; color: transparent; }
.over-title i { font-style: normal; color: #fff; -webkit-text-fill-color: #fff; } /* emoji drawn as themselves, not as gradient-filled shapes */
.final { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; padding: 12px; border-radius: 18px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.rs { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 4px; text-align: center; }
.rs .av { font-size: 30px; }
.rs b { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs { display: flex; align-items: baseline; gap: 8px; font-size: 44px; font-weight: 900; font-variant-numeric: tabular-nums; }
.fs i { font-style: normal; font-size: 28px; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tiles div { padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); text-align: center; }
.tiles b { display: block; font-size: 28px; font-weight: 900; background: var(--title); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tiles small { color: var(--muted); font-weight: 700; }
.hist { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.hist li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.hist .medal { font-size: 20px; width: 28px; text-align: center; }
.hist .opp { font-weight: 700; font-size: 14px; }
.hist small { color: var(--muted); }
.help { padding-left: 20px; margin: 0; display: grid; gap: 8px; line-height: 1.4; }
.powers-help { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.powers-help li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.powers-help span { font-size: 28px; }
.powers-help b, .powers-help small { display: block; }
.powers-help small { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .screen { transition: none; }
  .rewards .dbl { animation: none; }
  #h-demo { transform: translate(-50%, -50%); }
  .spinner.ball { animation-duration: 3s; }
}

/* ===================================================================
   YouTube Playables layout.
   The game must be playable at every aspect ratio from 9:32 to 32:9 and must keep its state when
   the window is resized, so nothing here is tied to "portrait phone". The pitch always fits inside
   its box by both width and height; in a landscape window the controls move alongside it instead
   of under it, and in a very wide one the whole screen is capped and centred.
   =================================================================== */

html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

.screen { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }

/* The pitch must never be stretched, at any aspect ratio from 9:32 to 32:9.
   A canvas is a replaced element, so leaving width/height auto and capping both sides lets the
   browser scale it down from its own backing-buffer ratio to fit — the same way an <img> behaves.
   Setting an explicit height here instead would make the box definite on both axes and squash the
   pitch on a very tall screen. */
#pitch, #h-demo {
  display: block;
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  margin: 0 auto;
  touch-action: none;
}
.pitch-wrap { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
/* The box needs a definite height or the canvas's own `max-height: 100%` resolves against nothing
   and the pitch grows taller than the window. The box is definite; the canvas inside it still
   sizes itself from its intrinsic ratio. */
.pitch-box { position: relative; height: 100%; max-width: 100%; display: flex; align-items: center; justify-content: center; }
.demo-wrap { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; }

/* Landscape and wider: the match screen becomes a row — score and controls beside the pitch.
   The 560px cap on .screen is right for a portrait phone, but in a row it IS the whole row: two
   side columns at their maximum width add up to all of it and squeeze the pitch to nothing. Lift
   the cap here and cap the row instead, and let the pitch take what is left. */
@media (min-aspect-ratio: 1/1) {
  #s-game, #s-home { max-width: min(1400px, 100%); }
  #s-game { flex-direction: row; align-items: stretch; gap: 12px; }
  #s-game .g-top {
    flex: 0 1 clamp(110px, 15vw, 230px); order: 1; min-width: 0;
    flex-direction: column; justify-content: flex-start; gap: 12px; padding-top: 12px;
  }
  #s-game .pitch-wrap { order: 2; flex: 1 1 auto; min-width: 0; }
  #s-game .g-controls {
    flex: 0 1 clamp(110px, 15vw, 230px); order: 3; min-width: 0;
    display: flex; flex-direction: column; justify-content: center; gap: 12px;
  }
  #s-game #g-score { flex-direction: column; gap: 10px; width: 100%; }
  #s-home { flex-direction: row; align-items: center; gap: 20px; }
  #s-home .topbar { position: absolute; top: 0; left: 0; right: 0; }
  #s-home .demo-wrap { order: 1; flex: 1 1 50%; height: 100%; padding: 56px 0 16px; }
  #s-home .logo { display: none; }
  #s-home .menu { order: 2; flex: 1 1 50%; max-width: 420px; padding-top: 48px; }
}

/* Very wide (up to 32:9): keep the three columns together in the middle rather than letting them
   drift to opposite edges of a letterbox strip. */
@media (min-aspect-ratio: 2/1) {
  #s-game, #s-home { justify-content: center; }
  #s-game .g-top, #s-game .g-controls { flex: 0 1 clamp(130px, 12vw, 220px); }
  #s-home .menu { margin: auto; }
}

/* Very tall (down to 9:32): plenty of height, so let the menu breathe and cap the demo. */
@media (max-aspect-ratio: 1/2) {
  #s-home .demo-wrap { max-height: 38vh; }
  .menu { gap: 14px; }
}

/* Short and wide: the home demo is the first thing to go. */
@media (max-height: 420px) and (min-aspect-ratio: 1/1) {
  #s-home .demo-wrap { display: none; }
  #s-home .menu { flex: 1 1 100%; max-width: 560px; margin: auto; }
  .ladder { max-height: 30vh; }
  .sheet { max-height: calc(100vh - 20px); }
}

/* Playables chrome sits at the top-right of the frame; keep our own icons clear of it. */
.topbar { padding-top: max(8px, env(safe-area-inset-top)); }
#s-game .g-top { padding-top: max(8px, env(safe-area-inset-top)); }

/* Keyboard focus has to be visible: Playables games are played on desktop too. */
:where(button, [tabindex], input, select):focus-visible {
  outline: 3px solid #ffd166; outline-offset: 2px; border-radius: 10px;
}

/* The season ladder in the results and home screens. */
.ladder { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; max-height: 42vh; overflow: auto; }
.ladder li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.05); font-size: 14px; }
.ladder li.done { background: rgba(61,255,143,.12); }
.ladder li.now { background: rgba(255,209,102,.18); outline: 1px solid rgba(255,209,102,.5); }
.ladder li b { flex: 1 1 auto; font-weight: 600; }
.ladder li small { opacity: .7; }