/* Layout: full-bleed playfield; HUD panels float in the corners. Three in-game themes (cream, light, dark) set on body[data-game-theme]. */
:root {
  --bg: #f9f9f9;
  --ink: #29261f;
  --ink-soft: #77716a;
  --glass: rgba(250, 249, 245, 0.84);
  --paper: #faf9f5;
  --field: #ffffff;
  --line: rgba(40, 36, 28, 0.14);
  --hover: rgba(40, 36, 28, 0.05);
  --scrim: rgba(40, 36, 28, 0.25);
  --sheen: rgba(255, 255, 255, 0.5);
  --you: #2f6fdb;
  --alert: #c2341d;
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
body.no-outline .hud, body.no-outline .chip { border-color: transparent; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
body[data-font="ubuntu"] { --font-display: "Ubuntu", "Segoe UI", system-ui, sans-serif; }
body[data-font="inter"] { --font-display: "Inter", "Segoe UI", system-ui, sans-serif; }
body[data-font="unbounded"] { --font-display: "Unbounded", "Segoe UI", system-ui, sans-serif; }
body[data-game-theme="light"] {
  --bg: #eceef1; --ink: #1d2126; --ink-soft: #66707a; --glass: rgba(247, 248, 250, 0.86); --paper: #f7f8fa; --field: #ffffff;
  --line: rgba(20, 30, 40, 0.15); --hover: rgba(20, 30, 40, 0.05); --scrim: rgba(20, 30, 40, 0.25); --sheen: rgba(255, 255, 255, 0.6); color-scheme: light;
}
body[data-game-theme="dark"] {
  --bg: #000000; --ink: #ecebe6; --ink-soft: #8f8f8c; --glass: rgba(18, 18, 20, 0.74); --paper: #141416; --field: #1c1c1f;
  --line: rgba(255, 255, 255, 0.14); --hover: rgba(255, 255, 255, 0.06); --scrim: rgba(0, 0, 0, 0.5); --sheen: rgba(255, 255, 255, 0.07); --you: #6b9cf5; --alert: #ff6b52; color-scheme: dark;
}
html, body { height: 100%; min-height: 100vh; overscroll-behavior: none; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* iPhones enlarge paragraphs in landscape otherwise */ /* no pull-to-refresh mid-game */
[hidden] { display: none !important; }
#crash { position: fixed; z-index: 9; left: 16px; right: 16px; top: 16px; padding: 14px 16px; border-radius: 10px; background: #fff3f0; color: #7a1d0f; border: 1px solid #e8b4a8; font: 13px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; }
body { background: var(--bg); color: var(--ink); overflow: hidden; font-family: var(--font-display); }
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
.hud { pointer-events: none; background: linear-gradient(160deg, var(--sheen), transparent 55%), var(--glass); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; box-shadow: inset 0 1px 0 var(--sheen), 0 6px 24px rgba(0,0,0,.12); }
.label { font-family: var(--font-data); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

.tl { position: fixed; z-index: 2; top: calc(16px + env(safe-area-inset-top, 0px)); left: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.score { display: grid; gap: 2px; min-width: 150px; }
.label.strong { color: var(--ink); }
.row.soft, .row.soft b { color: var(--ink-soft); }
.tl-level { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 8px; }
.tl-level .lv { font-weight: 800; font-size: 12px; background: var(--you); color: #fff; border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.tl-level .bar { height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.tl-level .bar i { display: block; height: 100%; width: 0; background: var(--you); border-radius: inherit; transition: width .3s; }
.big { font-size: 33px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.row { display: flex; gap: 14px; margin-top: 6px; font-family: var(--font-data); font-size: 12px; font-variant-numeric: tabular-nums; }
.row b { font-weight: 700; }
.chip { display: inline-flex; align-items: center; gap: 8px; font: 800 13px var(--font-display); color: var(--ink); background: var(--glass); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 4px; cursor: pointer; }
.chip img { width: 24px; height: 24px; border-radius: 50%; display: block; }
.profile { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--hover); }
.profile .level { margin-top: 0; }
.coins { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-family: var(--font-data); font-size: 12px; font-variant-numeric: tabular-nums; }
.coins .label { font-size: 9px; }
.coin { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe9a3, #f2b31b 60%, #b9800a); box-shadow: inset 0 0 0 1.5px rgba(150,95,0,.45); }
.level { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 8px; margin-top: 8px; }
.level .lv { font-weight: 800; font-size: 13px; background: var(--you); color: #fff; border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.level .bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.level .bar i { display: block; height: 100%; width: 0; background: var(--you); border-radius: inherit; transition: width .3s; }
.level .xp { grid-column: 1 / -1; font-family: var(--font-data); font-size: 10px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
#dead .gain { margin: -4px 0 0; font-family: var(--font-data); font-size: 12px; color: var(--ink-soft); }
#dead .gain b { color: var(--you); }
.chip:hover { background: var(--paper); }
.chip:focus-visible, .skin:focus-visible, .ghost:focus-visible, #nick:focus-visible, .upload:focus-within { outline: 3px solid var(--you); outline-offset: 2px; }

.board-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.board-head button:not(.arrow-btn) { pointer-events: auto; font: 700 11px var(--font-data); letter-spacing: .06em; color: var(--ink-soft); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; cursor: pointer; }
.board-head button:hover { color: var(--ink); }
.board-head button:focus-visible { outline: 3px solid var(--you); outline-offset: 2px; }
.board { position: fixed; z-index: 2; top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px; width: 210px; display: grid; gap: 6px; }
.board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 14px; }
.board li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 6px; align-items: baseline; padding: 2px 4px; border-radius: 5px; }
.board li .rk { font-family: var(--font-data); font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.board li .rk:has(.mv) { display: flex; align-items: center; }
.board li .rk .mv { flex: none; width: 7px; height: 6px; margin: 0 auto; transform: translateX(3px); } /* Ultra, top 5: moved up or down, centred between the number and the name (half the 6px column gap) */
@media (max-width: 560px) { .board li .rk .mv { transform: translateX(2px); } } /* the narrower 4px gap there */
.board li .rk .mv.up { background: #34c759; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.board li .rk .mv.down { background: #ff453a; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.board li .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.board li .ms { font-family: var(--font-data); font-size: 12px; font-variant-numeric: tabular-nums; }
.board li .nm, .board li .ms { color: var(--ink-soft); }
.board li.me .nm, .board li.me .ms { color: var(--ink); font-weight: 800; }
.team-drop { pointer-events: auto; border-top: 1px solid var(--line); padding-top: 6px; }
.team-drop summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.team-drop summary::-webkit-details-marker { display: none; }
.team-drop summary b { font-family: var(--font-data); letter-spacing: .1em; color: #ff9a3c; }
.team-drop .td-count { margin-left: auto; font-family: var(--font-data); font-size: 11px; color: var(--ink-soft); }
.team-drop .td-chev { color: var(--ink-soft); transition: transform .15s; }
.team-drop[open] .td-chev { transform: rotate(180deg); }
.team-drop ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; font-size: 12px; }
.team-drop li { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-soft); }
.team-drop li.alive { color: #ff9a3c; }
.board li.mate .nm, .board li.mate .ms { color: #ff9a3c; font-weight: 700; }
.board li.gap { position: relative; margin-top: 13px; }

.mapbox { position: fixed; z-index: 2; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: 16px; padding: 8px; display: grid; gap: 6px; justify-items: center; }
#mini { display: block; width: 130px; height: 130px; border-radius: 4px; }
.plate { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.plate b { color: var(--ink); }

.hint { position: fixed; z-index: 2; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 16px; max-width: min(360px, calc(100vw - 400px)); font-size: 13px; line-height: 1.7; transition: opacity .6s; }
@media (max-width: 780px) { .hint { display: none; } }
.hint.gone { opacity: 0; }
kbd { font-family: var(--font-data); font-size: 11px; background: var(--paper); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; }

.combo { position: fixed; z-index: 3; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(6px); pointer-events: none; font-family: var(--font-data); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--paper); background: var(--ink); border-radius: 999px; padding: 6px 14px; opacity: 0; transition: opacity .15s, transform .15s; white-space: nowrap; }
.combo.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.combo.pop { background: var(--alert); }

#app { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
#app.rot { inset: auto; top: 0; left: 0; transform-origin: 0 0; transform: rotate(90deg) translateY(-100%); }
/* touch: Agar-mobile style diagonal pair; split in the corner, feed up and inward */
/* touch: two light buttons on one side, placed for the thumb: Split higher and nearest the edge, Feed lower and further in */
.touch { position: fixed; z-index: 3; right: 0; bottom: 0; width: 200px; height: 290px; display: none; pointer-events: none; }
.touch button { position: absolute; width: 92px; height: 92px; padding: 0; border-radius: 50%; pointer-events: auto;
  border: 2.5px solid rgba(120,120,130,.4); background: rgba(200,200,206,.32); color: rgba(110,110,120,.85);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: background .08s; }
.touch button svg { display: block; margin: auto; }
.touch .t-split { right: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(158px + env(safe-area-inset-bottom, 0px)); }
.touch .t-eject { right: calc(72px + env(safe-area-inset-right, 0px)); bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.touch button.down { background: rgba(170,170,178,.45); }
body[data-game-theme="dark"] .touch button { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: rgba(255,255,255,.55); }
body[data-game-theme="dark"] .touch button.down { background: rgba(255,255,255,.2); }
#app.btn-left .touch { right: auto; left: 0; }
#app.btn-left .touch .t-split { right: auto; left: calc(22px + env(safe-area-inset-left, 0px)); }
#app.btn-left .touch .t-eject { right: auto; left: calc(72px + env(safe-area-inset-left, 0px)); }
@media (pointer: coarse) {
  .touch { display: block; }
  .hint { display: none; }
  .combo { bottom: calc(196px + env(safe-area-inset-bottom, 0px)); }
  .mapbox { right: auto; left: 16px; }
  #app.btn-left .mapbox { left: auto; right: 16px; }
}
@media not (pointer: coarse) { body:not(.is-touch) .touch-only { display: none !important; } }
body.is-touch .touch { display: block; }
body.is-touch :is(.hint, .mapbox, .desk-only) { display: none !important; }
/* collapsed top bar */
.topbar { position: fixed; z-index: 2; top: calc(12px + env(safe-area-inset-top, 0px)); left: 16px; right: 16px; width: fit-content; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 14px; padding: 6px 8px; pointer-events: auto; }
.tb-btn { font: 700 12px var(--font-data); letter-spacing: .04em; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.tb-btn:focus-visible, #top-collapse:focus-visible { outline: 3px solid var(--you); outline-offset: 2px; }
.tb-stat { display: grid; line-height: 1.1; min-width: 0; }
.tb-profile { pointer-events: auto; display: inline-flex; align-items: center; font: 800 13px var(--font-display); color: var(--ink); background: transparent; border: 0; border-radius: 50%; padding: 2px; cursor: pointer; }
.tb-profile, .tb-profile:is(:hover, :active, :focus) { background: none !important; transform: none !important; }
.tb-profile:focus-visible { outline: 3px solid var(--you); outline-offset: 2px; }
.tb-profile .tb-z { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; color: #fff; background: #0a84ff; }
.tb-profile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-lv { font-weight: 800; font-size: 11px; background: var(--you); color: #fff; border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.ranktab { position: fixed; z-index: 2; top: calc(12px + env(safe-area-inset-top, 0px)); right: 16px; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; pointer-events: auto; }
.topbar { right: auto; }
@keyframes popIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
.pop-in { animation: popIn .16s cubic-bezier(.2,.8,.2,1); }
@keyframes popOut { to { opacity: 0; transform: translateY(-6px) scale(.96); } }
.pop-out { animation: popOut .14s cubic-bezier(.4,0,1,1) forwards; pointer-events: none !important; }
.mapbox.pop-in, .mapbox.pop-out { transform-origin: bottom right; }
.perf-tip.pop-in, .perf-tip.pop-out { transform-origin: top center; }
/* Ultra low: no animations or transitions anywhere */
body[data-perf="2"] *, body[data-perf="2"] *::after { animation: none !important; transition: none !important; }
#tl.pop-in, #topbar.pop-in { transform-origin: top left; }
#board-panel.pop-in, #ranktab.pop-in { transform-origin: top right; }
#board-panel.lb-lift { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .pop-in { animation: none; } }
.arrow-btn { pointer-events: auto; width: 26px; height: 26px; display: inline-grid; place-items: center; font: 700 12px var(--font-data); line-height: 1; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 50%; padding: 0; cursor: pointer; }
.arrow-btn:hover { color: var(--ink); }
.arrow-btn:focus-visible { outline: 3px solid var(--you); outline-offset: 2px; }
.score .board-head { margin-bottom: -2px; }
.tb-stat b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tb-stat b.dim, .tb-stat .dim { color: var(--ink-soft); }
.lb-icon { display: inline-grid; place-items: center; color: var(--ink-soft); }
.lb-icon svg { fill: currentColor; }
.tb-pos { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 1.6em; text-align: center; }

#notices { position: fixed; z-index: 3; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; max-width: min(420px, calc(100% - 32px)); pointer-events: none; }
#notices > * { position: static !important; inset: auto !important; margin: 0 !important; transform: none !important; max-width: 100%; }
#notices > :is(.combo, .coach, #toast):not(.show) { display: none; } /* only what's showing takes up room */
#notices > .hint.gone { display: none; }
#notices > .perf-tip { pointer-events: auto; }
#notices > .coach { font-size: 14px; padding: 8px 14px; }
#notices > #toast { text-align: center; width: auto; }
#notices > #toast .t1 { font-size: 20px; }
#toast { position: fixed; z-index: 3; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(.92); pointer-events: none; text-align: center; opacity: 0; transition: opacity .25s, transform .25s; width: min(90vw, 600px); }
#toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#toast .t1 { font-size: clamp(34px, 7vw, 64px); font-weight: 800; color: var(--alert); letter-spacing: -.03em; text-wrap: balance; }
#toast .t2 { font-family: var(--font-data); font-size: 13px; color: var(--ink); margin-top: 4px; }

.modal { position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; padding-inline: 16px; background: var(--scrim); grid-template-rows: minmax(0, 1fr); } /* one full-height row, so a card's max-height % resolves */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 24px 28px; width: min(100%, 360px); max-height: calc(100% - 32px); overflow-y: auto; display: grid; gap: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.card.wide { width: min(100%, 520px); }
.card h2 { margin: 0; font-size: 34px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
#dead dl { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#dead dt { font-family: var(--font-data); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
#dead dd { margin: 2px 0 0; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.primary { font: 800 16px var(--font-display); background: var(--you); color: #fff; border: 0; border-radius: 10px; padding: 12px; cursor: pointer; }
.primary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.ghost { font: 800 14px var(--font-display); background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; }
.small { margin: -6px 0 0; font-size: 12px; color: var(--ink-soft); text-align: center; }

.field { display: grid; gap: 6px; }
#nick { font: 500 18px var(--font-display); color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.skin-grid { display: grid; gap: 14px; }
.skin-sec h4 { margin: 0 0 6px; font-size: 14px; font-weight: 800; display: flex; align-items: baseline; gap: 8px; }
.skin-sec h4 span { font: 500 11px var(--font-data); color: var(--ink-soft); }
.skin-sec .row-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); grid-auto-rows: 108px; gap: 8px; }
.skin { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font: 500 12px var(--font-display); color: var(--ink); }
.skin img { width: 52px; height: 52px; border-radius: 50%; display: block; }
.skin:hover { background: var(--hover); }
.skin.locked img { opacity: .55; filter: saturate(.6); }
.skin .price { display: inline-flex; align-items: center; gap: 3px; font: 700 10px var(--font-data); color: var(--ink-soft); }
.skin .price .coin { width: 9px; height: 9px; }
.shop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.balance { display: inline-flex; align-items: center; gap: 5px; font: 700 13px var(--font-data); font-variant-numeric: tabular-nums; }
.buy-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--hover); font-size: 14px; }
.buy-bar .acts { display: flex; gap: 8px; }
.buy-bar .primary, .buy-bar .ghost { padding: 7px 14px; font-size: 14px; }
.buy-bar .primary[disabled] { opacity: .45; cursor: not-allowed; }
.skin[aria-pressed="true"] { border-color: var(--you); background: rgba(47,111,219,.1); font-weight: 800; }
.upload { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--ink-soft); border-radius: 10px; padding: 10px; font-weight: 800; font-size: 14px; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 560px) {
  .score { min-width: 0; padding: 8px 10px; }
  .big { font-size: 28px; }
  .row { gap: 10px; font-size: 11px; }
  .board { width: 150px; padding: 8px 10px; }
  .board ol { font-size: 12px; }
  .board li { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 4px; }
  .board { width: 172px; }
  .board-head .label { letter-spacing: .08em; }
  .board-head button { padding: 1px 6px; }
  .topbar { gap: 10px; }
  #mini { width: 84px; height: 84px; }
  .card { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { #toast, .hint, .combo { transition: none; } }

.board li.watch { background: var(--hover); }
.board li.watch .nm, .board li.watch .ms { color: var(--ink); font-weight: 800; }
body[data-ui="glass"] .board li.watch { background: var(--g-tray); }
.spec { position: fixed; z-index: 3; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(calc(100vw - 32px), 560px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; pointer-events: auto; background: var(--paper); }
.spec .who { min-width: 0; display: grid; gap: 2px; text-align: center; }
.spec .who b { font-size: 18px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spec .who span { font-family: var(--font-data); font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.spec .spec-arrow { width: 34px; height: 34px; }
.spec .actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.spec .actions .ghost, .spec .actions .primary { padding: 8px 14px; font-size: 14px; }
.spec .ghost[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
body.is-touch .spec .spec-keys { display: none; } /* keyboard hints: not on phones */
body.is-touch .spec { bottom: 12px !important; padding-block: 6px !important; row-gap: 4px; } /* the leaderboard's 12px from the top, mirrored */
body.is-touch .spec .actions .ghost, body.is-touch .spec .actions .primary { padding-block: 5px; }
.spec-keys { font-family: var(--font-data); font-size: 11px; color: var(--ink-soft); text-align: center; grid-column: 1 / -1; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.team-box { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.team-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.team-row > * { height: 34px; }
.team-row .ghost { padding: 0 12px; font-size: 13px; }
#team-code::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-weight: 500; }
.card { scrollbar-width: none; box-sizing: border-box; }
.card::-webkit-scrollbar { display: none; }
#team-code { box-sizing: border-box; font: 700 13px var(--font-data); letter-spacing: .06em; text-transform: uppercase; width: 10.5em; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; }
.team-now { display: flex; align-items: baseline; gap: 10px; flex-wrap: nowrap; white-space: nowrap; }
.team-now span { overflow: hidden; text-overflow: ellipsis; }
.team-now b { font: 800 18px var(--font-data); letter-spacing: .1em; color: #ff9a3c; }
.team-now span { font-size: 13px; color: var(--ink-soft); }
.home { gap: 12px; }
.home-dead { display: grid; gap: 2px; text-align: center; }
.home-dead b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.home-dead span { font-family: var(--font-data); font-size: 12px; color: var(--ink-soft); }
#preview { width: min(340px, 80vw); height: min(340px, 80vw); display: block; margin: -4px auto -14px; }
.name-row { display: grid; grid-template-columns: minmax(0, 1fr) 7.5em; gap: 8px; align-items: end; }
.name-row .field { min-width: 0; }
.home input { box-sizing: border-box; }
#nick { width: 100%; height: 42px; }
#clan-tag { height: 42px; }
#clan-tag { font: 700 16px var(--font-data); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; width: 100%; }
.primary.play { font-size: 18px; padding: 14px; }
.shop { display: grid; gap: 10px; }
.skin-sec.clip .row-grid { max-height: 108px; overflow: hidden; }
.skin-sec h4 .more { margin-left: auto; font: 700 11px var(--font-data); color: var(--ink-soft); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.settings { border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; }
.settings summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 0; cursor: pointer; font-weight: 800; }
.settings summary::-webkit-details-marker { display: none; }
.settings summary svg { color: var(--ink-soft); }
.settings[open] summary svg { transform: rotate(180deg); }
.settings-body { display: grid; gap: 14px; padding-bottom: 14px; }
.board .tagchip { display: inline-block; font: 700 9px var(--font-data); letter-spacing: .06em; padding: 0 5px; margin-right: 5px; border-radius: 4px; background: var(--line); color: var(--ink); vertical-align: 1px; }
.board li.mate .tagchip, .board li.me .tagchip { background: rgba(255,150,50,.18); color: #c25e00; box-shadow: inset 0 0 0 1px rgba(255,150,50,.45); }
body[data-game-theme="dark"] :is(.board li.mate .tagchip, .board li.me .tagchip) { color: #ffb066; }
.get-coins { margin-left: auto; font: 700 11px var(--font-data); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; cursor: pointer; pointer-events: auto; }
#coinpage, #ultrapage, #acctpage { z-index: 5; }
#arena-timer { pointer-events: none; } /* the arena reset countdown: plain orange numbers, bottom centre, for everyone in the arena */
#arena-timer b { font: 800 22px var(--font-data); color: #ff9a3c; font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
body.is-touch #arena-timer b { font-size: 18px; }
#notices > #arena-timer[hidden] { display: none; }
.up-level { display: grid; gap: 8px; padding: 12px 14px; background: #18181b; text-align: left; } /* Ultra page: how close the next level is */
.up-lv-head { display: flex; align-items: center; gap: 10px; }
.up-lv-head span { margin-left: auto; }
.up-badge { flex: none; width: 28px; height: 28px; } .up-badge.ultra { width: 62px; } /* Ultra: the gold Z badge beside the level, as on your cell */ /* drawn by the in-game badge code: the same circle, colour and font as on your cell */
.up-lv-head b { font: 800 15px var(--font-display); color: var(--ink); }
.up-lv-head span { font: 600 12px var(--font-data); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.up-bar { display: block; height: 6px; background: #26262a; overflow: hidden; }
.up-bar i { display: block; height: 100%; width: 0; background: var(--amber, #ffc21a); transition: width .3s; }
.up-level small { font-size: 12px; color: var(--ink-soft); }
.ap-head { display: flex; align-items: center; gap: 14px; }
.ap-head img { width: 56px; height: 56px; border-radius: 50%; flex: none; background: var(--hover); }
.ap-who { display: grid; gap: 2px; min-width: 0; }
.ap-who h2 { font-size: 22px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-who span { font-size: 13px; color: var(--ink-soft); }
#acctpage .cp-pack { box-sizing: border-box; height: 50px; padding-right: 9px !important; margin-bottom: 0; }
#acctpage .cp-pack .buy:disabled, #acctpage .cp-pack .buy.off { opacity: .45; pointer-events: none; }
.ap-note { margin: 0; text-align: left; }
.ap-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#acctpage #admin-chip { height: 42px !important; font-size: 16px !important; padding: 0 !important; }
body[data-build] #acctpage .ap-head img, #acctpage .ap-head img { border-radius: 50% !important; object-fit: cover; clip-path: circle(50%); }
body.is-vip .vip-teaser { display: none !important; }
body:not(.is-vip) .ultra-set { display: none !important; } /* Ultra-only settings */
.ultra-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 10px; font-weight: 800; letter-spacing: .3px; color: #2e2300; background: #ffc21a; vertical-align: 1px; }
#coinpage .card > .label { font-size: 16px; }
#coinpage :is(.cp-row, .cp-pack) { box-sizing: border-box; height: 50px; }
#coinpage .cp-pack { padding-right: 9px !important; }
#coinpage .cp-sec > .cp-pack { margin-bottom: 0; } /* rows straight in a section get the section's 8px gap, like the packs */
#coinpage .cp-pack .buy.short { opacity: .45; pointer-events: none; }
#coinpage .cp-pack .buy[data-boost] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: #26262a !important; color: #fff !important; } /* paid in coins: a coin and the price, not a blue cash button */
#coinpage .cp-pack .buy .coin { width: 13px; height: 13px; vertical-align: -2px; } #coinpage .cp-pack > span { flex: 1; } #coinpage .cp-pack .cp-bonus { margin: 0; vertical-align: 0; }
#coin-title { display: flex; align-items: center; gap: 10px; } #coin-title .coin { flex: none; } /* every row on the page the same height */
.cp-pack .buy { white-space: nowrap; } .cp-pack button.buy { border: 0; cursor: pointer; }
.sheet-done { height: 42px; padding: 0 !important; font-size: 16px !important; }
#lv { cursor: pointer; }
#lv::after { content: "Ultra" !important; text-transform: none !important; }
body:not(.is-vip) #lv::after { content: "Go Ultra" !important; }
body .profile #lv { display: inline-flex !important; align-items: center; gap: 8px; box-sizing: border-box; height: 34px; padding: 4px 4px 4px 10px !important; font: 900 13px var(--font-data) !important; letter-spacing: normal !important; text-transform: none !important; } /* the same box, type and pill as the coins next to it */
.big-coin { display: inline-block; width: 26px; height: 26px; vertical-align: -3px; }
.cp-sec { display: grid; gap: 8px; }
.cp-sec h4 { margin: 0; font-size: 14px; font-weight: 800; }
.cp-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.cp-row.muted { color: var(--ink-soft); }
.cp-pack { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.cp-pack b { font-size: 16px; }
.cp-bonus { margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: #e8f6ec; color: #17803d; font: 800 11px var(--font-data); font-style: normal; vertical-align: 2px; }
body[data-build="production2"] .cp-bonus { border-radius: 0; }
.cp-pack .buy { font: 800 14px var(--font-display); background: var(--you); color: #fff; border-radius: 8px; padding: 7px 14px; text-decoration: none; }
.cp-pack .buy.off { background: var(--line); color: var(--ink-soft); pointer-events: none; }
.seg { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.seg legend { padding: 0; margin-bottom: 6px; }
.seg .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-weight: 500; font-size: 14px; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 800; }
.seg label:has(input:focus-visible) { outline: 3px solid var(--you); outline-offset: 2px; }
.section-h { margin: 4px 0 0; font-size: 18px; font-weight: 800; }
/* ---------- Glass interface (Settings → Interface). Classic above stays untouched. ---------- */
body[data-ui="glass"] {
  --tone: 90 140 255;
  --g-fill: rgba(255,255,255,.46); --g-fill-2: rgba(255,255,255,.55); --g-stroke: #d6d9df; --g-edge: rgba(0,0,0,.06);
  --g-hi: rgba(255,255,255,.95); --g-shadow: 0 14px 44px rgba(20,24,40,.16), 0 2px 6px rgba(20,24,40,.08);
  --g-tray: rgba(118,118,128,.13); --g-thumb: #fff; --g-thumb-ink: #111; --g-scrim: rgba(255,255,255,.18);
  --you: #0a84ff;
}
body[data-ui="glass"][data-game-theme="dark"] {
  --g-fill: rgba(36,36,42,.42); --g-fill-2: rgba(255,255,255,.09); --g-stroke: #38383e; --g-edge: rgba(0,0,0,.45);
  --g-hi: rgba(255,255,255,.3); --g-shadow: 0 18px 56px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
  --g-tray: rgba(118,118,128,.22); --g-thumb: rgba(255,255,255,.94); --g-thumb-ink: #000; --g-scrim: rgba(0,0,0,.32);
}
body[data-ui="glass"][data-font="bricolage"] { --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif; }
body[data-ui="glass"] { -webkit-font-smoothing: antialiased; }

/* the material */
body[data-ui="glass"] .hud, body[data-ui="glass"] .card {
  background: var(--g-fill);
  -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
  border: 1px solid var(--g-stroke);
  box-shadow: var(--g-shadow);
}
body[data-ui="glass"] .hud { border-radius: 24px; }
body[data-ui="glass"] .label { font: 600 12px var(--font-display); letter-spacing: 0; text-transform: none; }
body[data-ui="glass"] .arrow-btn { background: var(--g-tray); border: 0; width: 28px; height: 28px; }

/* in game: a floating island at the top, capsules everywhere */
body[data-ui="glass"] .topbar { left: 0; right: 0; margin-inline: auto; border-radius: 999px; padding: 5px 20px 5px 5px; gap: 20px; }
body[data-ui="glass"] .tb-profile .tb-z { width: 34px; height: 34px; }
body[data-ui="glass"] .tb-profile .tb-z svg { width: 14px; height: 18px; }
body[data-ui="glass"] .tb-stat .label { font-size: 11px; }
body[data-ui="glass"] .tb-stat b, body[data-ui="glass"] .tb-pos { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
body[data-ui="glass"] .ranktab { border-radius: 999px; padding: 5px 6px 5px 14px; }
body[data-ui="glass"] .board { padding: 14px 14px 12px; border-radius: 26px; }
body[data-ui="glass"] .board li { padding: 4px 8px; border-radius: 10px; }
body[data-ui="glass"] .board li.me { background: var(--g-tray); }
body[data-ui="glass"] .board li .rk, body[data-ui="glass"] .board li .ms { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 600; }
body[data-ui="glass"] .board .tagchip { border-radius: 999px; font-family: var(--font-display); }
body[data-ui="glass"] .mapbox { border-radius: 26px; padding: 8px; }
body[data-ui="glass"] #mini { border-radius: 18px; }
body[data-ui="glass"] .hint { border-radius: 22px; }
body[data-ui="glass"] kbd { border: 0; border-radius: 6px; background: var(--g-tray); font-family: var(--font-display); font-weight: 600; }
body[data-ui="glass"] .combo { font-family: var(--font-display); text-transform: none; letter-spacing: 0; font-weight: 700; padding: 9px 18px;
  background: rgba(20,20,24,.6); color: #fff; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid #38383e; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
body[data-ui="glass"] .combo.pop { background: rgba(255,59,48,.75); }
body[data-ui="glass"] .spec { border-radius: 30px; }
body[data-ui="glass"] .spec .ghost[aria-pressed="true"] { background: var(--g-thumb); color: var(--g-thumb-ink); }

/* sheets */
body[data-ui="glass"] .modal { background: var(--g-scrim); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
body[data-ui="glass"] #skins { /* the world melts away behind a glow taken from your skin */
  background: radial-gradient(60% 50% at 20% 12%, rgb(var(--tone) / .5), transparent 70%), radial-gradient(55% 45% at 88% 90%, rgb(var(--tone) / .35), transparent 70%), var(--g-scrim);
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
}
body[data-ui="glass"] .card { border-radius: 36px; padding: 26px; gap: 16px; }
body[data-ui="glass"] .card.wide { width: min(100%, 460px); }
body[data-ui="glass"] .card h2 { font-weight: 700; letter-spacing: -.035em; font-size: 40px; }
body[data-ui="glass"] #dead dt { font: 600 12px var(--font-display); letter-spacing: 0; text-transform: none; }
body[data-ui="glass"] #dead dd { font-weight: 700; letter-spacing: -.02em; font-size: 26px; }
body[data-ui="glass"] .section-h { font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
@keyframes gRise { from { opacity: 0; transform: translateY(24px) scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
body[data-ui="glass"] .modal:not([hidden]) > .card { animation: gRise .6s cubic-bezier(.2,.9,.2,1); }

body[data-ui="glass"] .primary { border-radius: 999px; font-weight: 700; letter-spacing: -.01em; background: var(--you);
  box-shadow: 0 8px 24px rgba(10,132,255,.3); transition: transform .18s cubic-bezier(.3,1.6,.5,1), box-shadow .2s; }
body[data-ui="glass"] .primary:active { transform: scale(.97); }
body[data-ui="glass"] .primary.play { position: relative; overflow: hidden; font-size: 19px; height: 58px; padding: 0; color: #fff; text-shadow: none; } /* the same blue button as Done, just bigger */
body[data-ui="glass"] :is(.primary, .primary.play, .team-row .ghost.join, .cp-pack .buy) { background: var(--you); color: #fff; border: 0 !important; border-radius: 999px; box-shadow: 0 8px 24px rgba(10,132,255,.3); }
body[data-ui="glass"] .primary.play span { position: relative; z-index: 1; }
body[data-ui="glass"] .primary.play::after { display: none; /* plain, like Done */
  content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%); animation: gShine 4s cubic-bezier(.4,0,.2,1) infinite 1s;
}
@keyframes gShine { 0% { transform: translateX(-120%); } 35%, 100% { transform: translateX(120%); } }
body[data-ui="glass"] .ghost { border: 0; border-radius: 999px; background: var(--g-tray); font-weight: 600; }
body[data-ui="glass"] .ghost:hover { background: rgba(118,118,128,.28); }

/* Home */
body[data-ui="glass"] .profile { background: transparent; border: 0; padding: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
body[data-ui="glass"] .profile .level { grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; }
body[data-ui="glass"] .level .lv { font-size: 13px; font-weight: 700; padding: 4px 11px; background: var(--g-tray); color: var(--ink); }
body[data-ui="glass"] .level .bar { height: 5px; background: var(--g-tray); }
body[data-ui="glass"] .level .bar i { background: linear-gradient(90deg, rgb(var(--tone)), color-mix(in srgb, rgb(var(--tone)) 60%, white)); box-shadow: 0 0 10px rgb(var(--tone) / .6); }
body[data-ui="glass"] .level .xp { font: 500 11px var(--font-display); }
body[data-ui="glass"] .coins { margin: 0; gap: 6px; padding: 4px 4px 4px 10px; border-radius: 999px; background: var(--g-tray); font: 700 13px var(--font-display); }
body[data-ui="glass"] .coins .label { display: none; }
body[data-ui="glass"] .get-coins { border: 0; background: var(--g-thumb); color: var(--g-thumb-ink); font: 700 12px var(--font-display); padding: 4px 11px; }
body[data-ui="glass"] #preview { width: min(360px, 82vw); height: min(360px, 82vw); margin: -10px auto -22px; }
body[data-ui="glass"] .home-dead b { font-weight: 700; letter-spacing: -.03em; }
body[data-ui="glass"] .home-dead span { font-family: var(--font-display); }
body[data-ui="glass"] .name-row { grid-template-columns: minmax(0, 1fr) 6.5em; gap: 0; padding: 3px; border-radius: 999px; background: var(--g-tray); border: 1px solid transparent; transition: border-color .2s; }
body[data-ui="glass"] .name-row:focus-within { border-color: rgb(var(--tone)); }
body[data-ui="glass"] .name-row .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body[data-ui="glass"] #nick, body[data-ui="glass"] #clan-tag { height: 50px; border: 0; background: transparent; border-radius: 16px; outline: none; }
body[data-ui="glass"] #nick { font: 600 20px var(--font-display); letter-spacing: -.01em; padding: 0 12px; border-radius: 0; }
body[data-ui="glass"] #clan-tag { font: 700 15px var(--font-display); letter-spacing: .08em; text-align: center; border-radius: 0 999px 999px 0; }
body[data-ui="glass"] .name-row .tagf { border-left: 1px solid rgba(128,128,128,.25); }
body[data-ui="glass"] #nick:focus-visible { outline: none; }
body[data-ui="glass"] .team-box, body[data-ui="glass"] .settings { border: 0; border-radius: 28px; background: var(--g-tray); }
body[data-ui="glass"] .team-box { padding: 14px 18px 16px; }
body[data-ui="glass"] .settings { padding: 0 18px; }
body[data-ui="glass"] .settings summary { padding: 16px 0; }
body[data-ui="glass"] .profile .level .xp { padding-left: 4px; }
body[data-ui="glass"] .skin-sec h4 { align-items: center; }
body[data-ui="glass"] .buy-bar, body[data-ui="glass"] .cp-row, body[data-ui="glass"] .cp-pack { border-radius: 999px !important; padding-inline: 18px; }
body[data-ui="glass"] #skins { padding-block: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-bottom)); }
body[data-ui="glass"] #skins .card { max-height: 100%; padding-block: 30px; }
body[data-ui="glass"] .team-now b { font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; }
body[data-ui="glass"] .team-row .ghost { background: var(--g-thumb); color: var(--g-thumb-ink); }
body[data-ui="glass"] #team-code { border: 1px solid var(--g-stroke); border-radius: 999px; background: var(--g-fill); font: 600 14px var(--font-display); letter-spacing: .04em; padding: 0 14px; }
body[data-ui="glass"] .settings summary { font-weight: 600; }
body[data-ui="glass"] .seg .opts { display: inline-flex; width: fit-content; max-width: 100%; gap: 2px; padding: 2px; border-radius: 12px; background: var(--g-tray); }
body[data-ui="glass"] .seg label { border: 0; border-radius: 10px; padding: 6px 14px; font-weight: 500; font-size: 13px; transition: background .2s, color .2s, box-shadow .2s; }
body[data-ui="glass"] .seg label:has(input:checked) { background: var(--g-thumb); color: var(--g-thumb-ink); border-color: transparent; font-weight: 600; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }
body[data-ui="glass"] .skin { border: 0; border-radius: 22px; }
body[data-ui="glass"] .skin img { width: 56px; height: 56px; box-shadow: 0 6px 16px rgba(0,0,0,.18), 0 0 0 1px var(--g-stroke); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
body[data-ui="glass"] .skin:hover img { transform: scale(1.08); }
body[data-ui="glass"] .skin[aria-pressed="true"] { background: var(--g-tray); font-weight: 600; }
body[data-ui="glass"] .skin[aria-pressed="true"] img { box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 3.5px rgb(var(--tone)), 0 8px 20px rgb(var(--tone) / .35); }
body[data-ui="glass"] .skin .price, body[data-ui="glass"] .balance, body[data-ui="glass"] .skin-sec h4 span, body[data-ui="glass"] .skin-sec h4 .more { font-family: var(--font-display); }
body[data-ui="glass"] .skin-sec h4 .more { border: 0; background: var(--g-tray); font-weight: 600; }
body[data-ui="glass"] .buy-bar, body[data-ui="glass"] .cp-row, body[data-ui="glass"] .cp-pack { border: 0; border-radius: 18px; background: var(--g-tray); }
body[data-ui="glass"] .cp-pack .buy { border-radius: 999px; }
body[data-ui="glass"] .upload { border: 0; border-radius: 999px; background: var(--g-tray); font-weight: 600; }
@media (max-width: 560px) {
  body[data-ui="glass"] .topbar { left: 16px; right: auto; margin: 0; gap: 14px; padding-right: 14px; }
  body[data-ui="glass"] .card { padding: 20px; border-radius: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-ui="glass"] .modal:not([hidden]) > .card, body[data-ui="glass"] .primary.play::after { animation: none; }
}
/* record (both interfaces) */
.record { display: grid; gap: 8px; }
.record-h { margin: 0; font-size: 14px; font-weight: 800; }
.record-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rec { position: relative; display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.rec b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec span { font-size: 11px; color: var(--ink-soft); }
.rec i { position: absolute; top: 8px; right: 8px; font: 700 9px var(--font-data); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--you); border-radius: 999px; padding: 2px 6px; }
@media (max-width: 400px) { .record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#preview { cursor: pointer; transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
#preview:hover { transform: scale(1.035) rotate(-1deg); }
#preview:active { transform: scale(.98); }
body[data-build="production2"] #preview, body[data-build="production2"] #preview:is(:hover, :active) { transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { #preview, #preview:hover { transition: none; transform: none; } }
body[data-ui="glass"] .record-h { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
body[data-ui="glass"] .rec { border: 1.5px solid transparent; border-radius: 24px; background: var(--g-tray); padding: 12px 14px; }
body[data-ui="glass"] .rec b { font-weight: 700; }
body[data-ui="glass"] .rec.new { border-color: rgb(var(--tone)); }
body[data-ui="glass"] .rec i { font-family: var(--font-display); text-transform: none; letter-spacing: 0; font-size: 10px; background: rgb(var(--tone)); color: var(--tone-ink, #fff); }
/* glass: 1.5px solid borders, one focus style everywhere, pill settings */
body[data-ui="glass"] .hud, body[data-ui="glass"] .card, body[data-ui="glass"] .combo { border-width: 1.5px; }
body[data-ui="glass"] #team-code, body[data-ui="glass"] .name-row, body[data-ui="glass"] .primary.play { border-width: 1.5px; }
body[data-ui="glass"] .name-row:focus-within, body[data-ui="glass"] #team-code:focus { border-color: rgb(var(--tone)); outline: none; }
body[data-ui="glass"] #team-code:focus-visible { outline: none; }
body[data-ui="glass"] .seg .opts { border-radius: 999px; padding: 3px; }
body[data-ui="glass"] .seg label { border-radius: 999px; padding: 6px 15px; }
body[data-ui="glass"] .name-row .tagf { border-left: 0; position: relative; }
body[data-ui="glass"] .name-row .tagf::before { content: ""; position: absolute; left: 0; top: 30%; bottom: 30%; width: 1px; background: rgba(128,128,128,.3); }
body[data-ui="glass"] #skins { -webkit-backdrop-filter: blur(5px) saturate(140%); backdrop-filter: blur(5px) saturate(140%);
  background: radial-gradient(60% 50% at 20% 12%, rgb(var(--tone) / .3), transparent 70%), radial-gradient(55% 45% at 88% 90%, rgb(var(--tone) / .22), transparent 70%), var(--g-scrim); }
/* font cycle button beside the name, and the vertical font list */
.name-row { grid-template-columns: auto minmax(0, 1fr) 7.5em; }
.font-cycle { align-self: end; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
.font-cycle:hover { background: var(--hover); }
.font-cycle:focus-visible { outline: 3px solid var(--you); outline-offset: 2px; }
@keyframes fcPop { 0% { transform: scale(.6); opacity: .4; } 100% { transform: none; opacity: 1; } }
.aa { display: block; font: 700 15px/1 var(--font-display); letter-spacing: -.02em; }
.font-cycle.spin .aa { animation: fcPop .4s cubic-bezier(.3,1.6,.5,1); }
@media (prefers-reduced-motion: reduce) { .font-cycle.spin .aa { animation: none; } }
.seg .opts.vlist { flex-direction: column; align-items: stretch; }
.seg .opts.vlist label { font-size: 16px; padding: 8px 14px; }
body[data-ui="glass"] .name-row { grid-template-columns: auto minmax(0, 1fr) 6.5em; }
body[data-ui="glass"] .font-cycle { align-self: center; width: 44px; height: 44px; margin-left: 3px; border: 0; background: var(--g-fill); }
body[data-ui="glass"] .seg .opts.vlist { display: flex; width: 100%; border-radius: 24px; }
body[data-ui="glass"] .seg .opts.vlist label { font-size: 16px; padding: 9px 16px; }
/* accounts */
.acct-chip { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--font-display); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px 4px 8px; cursor: pointer; pointer-events: auto; justify-self: start; }
.acct-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft); }
.acct-chip.in .acct-dot { background: #34c759; }
body:not(.studio-on) .acct-z, body.studio-on .acct-dot, body.studio-on .profile > .zone-mini { display: none; }
body.studio-on .acct-chip { gap: 8px; }
body.studio-on[data-ui="glass"] .profile { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "acct coins . lv" "bar bar bar bar"; }
body.studio-on[data-ui="glass"] .profile .level .lv-wrap { justify-self: end; }
body.studio-on .profile .level .lv, body[data-build="production2"].studio-on .profile .level .lv { padding: 0 16px !important; }
body.studio-on #coins { margin-right: 8px; }
body.studio-on .profile .coins .coin { width: 17px; height: 17px; }
#account { z-index: 6; }
.card.acct { width: min(100%, 360px); } /* every popup the same width */
.acct-sub { margin: -4px 0 4px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.sso { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; border-radius: 999px; font: 700 15px var(--font-display); cursor: pointer; border: 1px solid var(--line); }
.sso svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); flex: none; }
.sso.apple { background: #000; color: #fff; border-color: #000; }
#acct-later, #admin-chip { height: 48px; border-radius: 999px; font-size: 15px; }
.sso.google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.sso.facebook { background: #1877f2; color: #fff; border-color: #1877f2; }
.sso:focus-visible, .acct-chip:focus-visible { outline: 3px solid var(--you); outline-offset: 2px; }
.acct-note { margin: 0; min-height: 1.2em; }
body[data-ui="glass"] .acct-chip { border: 0; background: var(--g-tray); }
body[data-ui="glass"] .profile { grid-template-columns: minmax(0, 1fr) auto auto; }
body[data-ui="glass"][data-game-theme="dark"] .sso.apple { background: #fff; color: #000; border-color: #fff; }
/* the slow-game prompt */
.perf-tip { position: fixed; z-index: 3; left: 0; right: 0; margin-inline: auto; width: fit-content; max-width: calc(100% - 32px); top: calc(68px + env(safe-area-inset-top, 0px)); display: flex; align-items: center; gap: 10px; pointer-events: auto; font-size: 14px; padding: 6px 6px 6px 16px; border-radius: 999px; }
.perf-tip .ghost { padding: 6px 12px; font-size: 13px; border-radius: 999px; }
/* low power: no blur, no shimmer */
body:is([data-perf="1"], [data-perf="2"]) :is(.hud, .touch button, .combo) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* in-game only: Home and popups look the same in every mode */
body:is([data-perf="1"], [data-perf="2"]) .hud { background: var(--paper) !important; }
/* settings pills: the font list gets the same inner padding as the others */
body[data-ui="glass"] .seg .opts.vlist { padding: 4px; gap: 4px; }
.seg .opts.vlist { gap: 6px; }
/* border width test */
body[data-ui="glass"][data-bw="2"] :is(.hud, .card, .combo, #team-code, .name-row, .primary.play, .rec) { border-width: 2px; }
/* Home: level and XP on one line with account and coins, the progress bar across the full width beneath */
body[data-ui="glass"] .profile { grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "z acct . lv coins" "bar bar bar bar bar"; row-gap: 12px; column-gap: 10px; }
body[data-ui="glass"] .profile > .zone-mini { grid-area: z; align-self: center; }
body:not([data-ui="glass"]) .profile > .zone-mini { display: none; }
body[data-ui="glass"] :is(.level .lv, .get-coins, .acct-chip, .coins) { white-space: nowrap; }
body[data-ui="glass"] .profile .level { display: contents; }
body[data-ui="glass"] .profile .level .lv-wrap { grid-area: lv; justify-self: start; }
body[data-ui="glass"] .profile .level .xp { grid-area: xp; align-self: center; justify-self: end; white-space: nowrap; }
body[data-ui="glass"] .profile .acct-chip { grid-area: acct; }
body.studio-on[data-ui="glass"] .profile :is(.acct-chip, .level .lv, .coins) { box-sizing: border-box; height: 34px; display: inline-flex; align-items: center; }
body.studio-on[data-ui="glass"] .profile .acct-chip { padding: 0 14px 0 11px; }
body.is-touch.studio-on[data-ui="glass"] .profile .acct-chip { padding: 0 11px; }
body:not(.is-touch)[data-ui="glass"] .profile .level .lv { padding: 0 18px; }
body.studio-on[data-ui="glass"] .profile .get-coins { height: 26px; display: inline-flex; align-items: center; }
body[data-ui="glass"] .profile .coins { grid-area: coins; }
body[data-ui="glass"] .profile .level .bar { grid-area: bar; height: 6px; }
@media (max-width: 460px) {
  body[data-ui="glass"] .profile { grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "z acct . lv coins" "bar bar bar bar bar"; row-gap: 10px; column-gap: 6px; }
  body[data-ui="glass"] .get-coins { padding: 4px 9px; }
  body[data-ui="glass"] .acct-chip { padding: 9px; }
  body[data-ui="glass"] .acct-chip #acct-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* just the dot on phones; still read out */
  body[data-ui="glass"] .coins { padding-left: 8px; gap: 5px; }
}
body:is([data-build="production"], [data-build="production2"]) .dev-only { display: none !important; }
.record-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--font-display); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 10px; cursor: pointer; }
.share-btn:focus-visible { outline: 3px solid var(--you); outline-offset: 2px; }
.share-note { margin: 0; text-align: left; word-break: break-all; user-select: all; }
body[data-ui="glass"] .share-btn { border: 0; background: var(--g-tray); }
@media (pointer: coarse), (hover: none) { .mapbox { display: none !important; } .desk-only { display: none !important; } }
body[data-ui="glass"] .font-cycle:hover { background: rgba(118,118,128,.28); }
/* one hover for the small pill buttons on Home */
:is(.team-row .ghost, .get-coins, .acct-chip, .share-btn):hover { background: var(--hover); }
body[data-ui="glass"] :is(.team-row .ghost, .get-coins, .acct-chip, .share-btn, .font-cycle):hover { background: rgba(118,118,128,.28); color: var(--ink); }
.team-row .ghost.join, body[data-ui="glass"] .team-row .ghost.join { background: var(--you); color: #fff; border-color: transparent; padding: 0 16px; }
.team-row .ghost.join:hover, body[data-ui="glass"] .team-row .ghost.join:hover { background: color-mix(in srgb, var(--you) 85%, black); color: #fff; }
/* Zone VIP */
.vip-card { display: grid; gap: 10px; padding: 16px; border-radius: 16px; color: #2a1d00; background: linear-gradient(135deg, #fff1b8, #f5c242 55%, #e0a21a); }
.vip-head { display: flex; align-items: center; gap: 8px; }
.vip-head h4 { margin: 0; font-size: 17px; font-weight: 800; }
.vip-badge, .skin .price.vip-tag { font: 800 10px var(--font-display); letter-spacing: .06em; color: #fff; background: #1a1205; border-radius: 999px; padding: 3px 8px; }
.vip-state { margin-left: auto; font-weight: 700; font-size: 13px; }
.vip-perks { margin: 0; padding: 0 0 0 18px; display: grid; gap: 4px; font-size: 14px; }
.vip-card .buy { justify-self: stretch; text-align: center; font: 800 15px var(--font-display); background: #1a1205; color: #fff; border-radius: 999px; padding: 11px; text-decoration: none; }
.vip-card .buy.off { opacity: .55; pointer-events: none; }
.vip-card .buy { margin-top: 6px; } /* 16px under the perks, like every other popup */
.vip-manage { text-align: center; font-size: 13px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
#lv::after { content: "ULTRA"; margin-left: 7px; font: 800 9px var(--font-display); letter-spacing: .06em; color: #2a1d00; background: linear-gradient(135deg, #f5c242, #e0a21a); border-radius: 999px; padding: 2px 6px; vertical-align: 1px; }
.skin .price.vip-tag { color: #2a1d00; background: linear-gradient(135deg, #f5c242, #e0a21a); padding: 1px 7px; }
.build-tag { margin: 4px 0 0; text-align: center; font: 500 11px var(--font-display); color: var(--ink-soft); opacity: .8; }
.vip-teaser { position: relative; z-index: 1; justify-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 0 0 -34px; padding: 5px 14px 5px 6px; border-radius: 999px; border: 1px solid rgba(224,162,26,.5); background: color-mix(in srgb, var(--paper) 80%, #f5c242); color: var(--ink); font: 600 12px var(--font-display); cursor: pointer; opacity: 0; visibility: hidden; }
.vip-teaser .vip-badge { color: #2a1d00; background: linear-gradient(135deg, #f5c242, #e0a21a); }
.vip-teaser.show { animation: vipIn .8s ease 4s forwards; }
@keyframes vipIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; visibility: visible; } }
.vip-teaser:hover { background: color-mix(in srgb, var(--paper) 65%, #f5c242); }
.vip-teaser:focus-visible { outline: 3px solid var(--you); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .vip-teaser.show { animation: none; opacity: 1; visibility: visible; } }
body[data-perf="2"] .vip-teaser.show { opacity: 1; visibility: visible; }
body[data-ui="glass"] #skins .card { background: var(--paper); } /* solid on every screen, phones included */
/* Zone mark: above the version, and stamped into every coin */
.zone-mark { display: block; margin: 10px auto 0; fill: var(--ink-soft); opacity: .45; }
.zone-mark:not(.big), .zone-mark:not(.big):hover { fill: var(--ink-soft) !important; opacity: .45 !important; filter: none !important; pointer-events: none; } /* just a mark: nothing happens on hover */
.build-tag { margin-top: 4px; }
.coin { position: relative; }
.coin::after { content: ""; position: absolute; inset: 22% 26%; background: rgba(140,90,0,.55);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 788 1000'%3E%3Cpath d='M394 0L788 106V225L232.2 781.8L394.5 825.4L620 764.8V685L788 730V894L394 1000L0 894V775L555.8 218.2L393.5 174.6L168 235.2V315L0 270V106Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 788 1000'%3E%3Cpath d='M394 0L788 106V225L232.2 781.8L394.5 825.4L620 764.8V685L788 730V894L394 1000L0 894V775L555.8 218.2L393.5 174.6L168 235.2V315L0 270V106Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.skin.buying { outline: 2px solid var(--you); outline-offset: -2px; background: var(--hover); }
.skin.buying.locked img { opacity: 1; filter: none; }
.skin .price.ask { color: #fff; background: var(--you); border-radius: 999px; padding: 2px 8px; font-size: 11px; }
.skin .price.ask .coin { width: 10px; height: 10px; }
.skin .price.ask.short { color: var(--ink); background: var(--line); }
body[data-ui="glass"] .skin.buying { outline-color: rgb(var(--tone)); background: var(--g-tray); }
body[data-ui="glass"] .skin .price.ask:not(.short) { background: rgb(var(--tone)); }
/* joystick: light touch, like the buttons */
.joy { position: fixed; z-index: 2; width: 124px; height: 124px; margin: -62px 0 0 -62px; border-radius: 50%; background: rgba(200,200,206,.22); border: 2px solid rgba(120,120,130,.25); pointer-events: none; }
.joy i { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(120,120,130,.35); }
body[data-game-theme="dark"] .joy { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
body[data-game-theme="dark"] .joy i { background: rgba(255,255,255,.16); }
/* first-game tips */
.coach { position: fixed; z-index: 4; left: 50%; top: 30%; transform: translate(-50%, -6px); pointer-events: none; font: 600 15px var(--font-display); color: #fff; background: rgba(20,20,24,.72); border-radius: 999px; padding: 10px 18px; opacity: 0; transition: opacity .35s, transform .35s; white-space: nowrap; }
.coach.show { opacity: 1; transform: translate(-50%, 0); }
/* touch screens in landscape: the score block sits top-left */
body.is-touch.landscape[data-ui="glass"] .topbar, body.is-touch.landscape .topbar { left: calc(16px + env(safe-area-inset-left, 0px)); right: auto; margin: 0; }
/* name filter note, legal links, age check */
.name-note { margin: -4px 0 0; text-align: left; color: var(--alert); }
.legal { margin: 8px 0 0; text-align: center; font: 500 12px var(--font-display); color: var(--ink-soft); }
.legal button { font: inherit; color: inherit; background: none; border: 0; padding: 2px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
#agegate, #legalpage { z-index: 7; }
.legal-doc { display: grid; gap: 4px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); text-align: left; }
.legal-doc .upd { margin: -6px 0 6px; font-size: 12px; }
.legal-doc h3 { margin: 10px 0 0; font-size: 14px; color: var(--ink); }
.legal-doc p, .legal-doc ul { margin: 0; }
.legal-doc ul { padding-left: 18px; }
.howto-open { width: 100%; }
.yt-link { display: inline-flex; align-items: center; color: inherit; vertical-align: middle; padding: 2px 4px; }
.yt-link:hover { color: #ff3b30; }
body[data-build="production2"] svg :is(path, line, polyline, rect, polygon) { stroke-linecap: square; stroke-linejoin: miter; }
#skins, #skins * { overflow-anchor: none; } /* opening Game settings never moves the page */
.wr { display: grid; gap: 8px; }
body[data-build] .wr-rec li i, .wr-rec li i { position: static !important; padding: 0 !important; background: none !important; color: var(--ink-soft) !important; font: 600 11px var(--font-data) !important; }
.wr-hint { margin: 6px 0 0; font-size: 12px; color: var(--ink-soft); }
.wr-rec em { font-style: normal; font-size: 12px; font-weight: 650; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-rec small { font-size: 10.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-rec.top > b { color: #ffc21a; }
.wr-rec ol { list-style: none; margin: 4px 0 0; padding: 4px 0 0; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.wr-rec li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; font-size: 11px; color: var(--ink-soft); }
.wr-rec li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.wr-rec li b { font: 700 11px var(--font-data); letter-spacing: 0; color: var(--ink-soft); }
.legal-doc kbd { display: inline-block; min-width: 1.4em; padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; font: 600 11px/1.6 var(--font-data); text-align: center; color: var(--ink); }
#howto { z-index: 8; }
.howto-card { gap: 14px; } /* the standard popup width, like Coins and Sign in */
.ht-head { display: flex; align-items: center; justify-content: space-between; }
.ht-head h2 { margin: 0; }
.ht-lead { margin: -6px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
.ht-rules { display: grid; grid-template-columns: 1fr; gap: 6px; }
.ht-rules div { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.ht-rules b { font-size: 14px; } .ht-rules span { font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.ht-sec { display: grid; gap: 10px; min-width: 0; }
.ht-sec h3 { margin: 0; font-size: 15px; }
.ht-lab-bar { display: grid; gap: 6px; }
.ht-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--hover); }
.ht-seg button { border: 0; background: none; padding: 7px 14px; border-radius: 999px; font: 650 13px var(--font-display); color: var(--ink-soft); cursor: pointer; }
.ht-seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
#ht-feed-btn { box-sizing: border-box; width: 100%; height: 36px; padding: 0 12px; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ht-lab { width: 100%; height: 180px; border-radius: 12px; border: 1px solid var(--line); touch-action: none; cursor: grab; display: block; }
.ht-lab:active { cursor: grabbing; }
.ht-msg { margin: 0; min-height: calc(1.45em * 3); font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.ht-controls { display: flex; flex-direction: column; gap: 14px; }
.ht-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ht-tile { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 12px 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: center; cursor: pointer; }
.ht-tile:hover { border-color: var(--ink-soft); }
.ht-tile .cap { display: grid; place-items: center; box-sizing: border-box; min-width: 42px; height: 42px; padding: 0 10px; border: 1px solid var(--line); border-bottom-width: 4px; border-radius: 6px; background: var(--hover); font: 700 14px var(--font-data); transition: transform .08s, border-bottom-width .08s; }
.ht-tile .cap, .ht-tile .cap.wide, .ht-tile .cap.ico { box-sizing: border-box; width: 52px; min-width: 0; max-width: 100%; height: 40px; padding: 0; font-size: 12px; white-space: nowrap; } /* every key the same size, inside its box */
.ht-tile .cap.ico { border-bottom-width: 1px; }
.ht-tile .cap.ico svg { width: 30px; height: 30px; }
.ht-tile b { font-size: 13px; font-weight: 650; }
.ht-tile small { margin-top: -3px; font-size: 11px; line-height: 1.3; color: var(--ink-soft); }
.ht-tile.on { border-color: #2f7bf6; }
.ht-tile.on .cap { background: #2f7bf6; border-color: #1d56b8; color: #fff; }
.ht-tile.down .cap { transform: translateY(3px); border-bottom-width: 1px; }
.ht-more ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
body[data-build="production2"] :is(.ht-rules div, .ht-lab, .ht-tile, .ht-tile .cap, .ht-seg, .ht-seg button) { border-radius: 0; }
#ht-title, #acct-title, #legal-title { font-size: 24px !important; } body.is-touch :is(#ht-title, #acct-title, #legal-title) { font-size: 20px !important; }
@media (max-width: 520px) { .ht-rules { grid-template-columns: 1fr; } }
.ad-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.ad-tile { display: grid; gap: 4px; align-content: start; padding: 8px; background: #18181b; }
.ad-tile svg { display: block; width: 100%; height: auto; }
.ad-tile b { font-size: 12.5px; color: var(--ink); margin-top: 2px; }
.ad-tile span { font-size: 11px; line-height: 1.35; color: var(--ink-soft); }
.ad-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.legal-contact { display: grid; place-items: center; box-sizing: border-box; height: 42px; padding: 0 !important; text-align: center; text-decoration: none; font-size: 16px; }
.legal-contact.off { opacity: .55; pointer-events: none; }
body.no-boost #play-boost { display: none !important; }
.st-series { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.st-series::-webkit-scrollbar { display: none; }
.st-sponsor { margin: 0 0 2px; text-align: center; font: 600 11px var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.st-sponsor a { color: inherit; }
.skin .spons { font: 600 9px var(--font-data); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.announce { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 10px; background: #ff9a3c; color: #1a1205; font: 700 13px var(--font-display); }
.announce span { flex: 1; }
.announce button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 2px 6px; }
body .ghost.admin-chip, body[data-build] .ghost.admin-chip { color: #1a1205 !important; background: #ffc21a !important; border-color: #ffc21a !important; }
.ad-reward { width: 100%; }
#adbox { z-index: 9; }
.adcard { text-align: center; }
.ad-slot { display: grid; place-items: center; gap: 6px; min-height: 180px; border: 1px dashed var(--line); border-radius: 10px; padding: 16px; color: var(--ink-soft); }
.ad-slot b { font-size: 18px; color: var(--ink); }
#admin { position: fixed; inset: 0; z-index: 10; background: var(--paper, #111); color: var(--ink); font-family: var(--font-display); }
.adm-shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: 100%; }
.adm-nav { display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; border-right: 1px solid var(--line); overflow-y: auto; }
.adm-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 14px; }
.adm-brand b { font-size: 20px; } .adm-brand span { font: 700 11px var(--font-data); letter-spacing: .1em; text-transform: uppercase; color: #ffc21a; }
.adm-nav button { text-align: left; background: none; border: 0; border-radius: 8px; padding: 9px 10px; color: var(--ink-soft); font: 600 14px var(--font-display); cursor: pointer; }
.adm-nav button:hover { color: var(--ink); background: var(--hover); }
.adm-nav button[aria-current="true"] { color: var(--ink); background: var(--hover); }
.adm-main { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.adm-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.adm-body { overflow-y: auto; padding: 22px 26px 40px; }
.adm-foot { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--line); }
.adm-foot span { flex: 1; font-size: 13px; color: var(--ink-soft); }
.adm-foot button { padding: 8px 16px; }
body .adm-foot button { box-sizing: border-box; height: 36px !important; min-height: 0 !important; margin: 0 !important; padding: 0 16px !important; font-size: 14px !important; line-height: 1 !important; align-self: center; } /* Publish, Discard and Close: one height, one line */
.adm-view { display: grid; gap: 16px; max-width: 1100px; }
.adm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.adm-head h2 { margin: 0; font-size: 22px; }
.adm-head button { padding: 8px 14px; }
.adm-note { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.adm-sec { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.adm-sec h3 { margin: 0; font-size: 14px; }
.adm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.adm-card { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.adm-card span { font-size: 12px; color: var(--ink-soft); } .adm-card b { font: 700 26px var(--font-data); } .adm-card small { font-size: 12px; color: var(--ink-soft); }
.adm-chart { display: grid; grid-template-columns: repeat(14, 1fr); gap: 2px; align-items: end; height: 170px; padding-top: 18px; }
.adm-bar { position: relative; display: grid; grid-template-rows: 1fr auto; height: 100%; cursor: default; }
.adm-bar i { align-self: end; display: block; min-height: 2px; background: var(--you, #2f7bf6); border-radius: 4px 4px 0 0; margin: 0 3px; }
.adm-bar:hover i { filter: brightness(1.2); }
.adm-bar em { position: absolute; left: 0; right: 0; top: -16px; text-align: center; font: 600 11px var(--font-data); font-style: normal; color: var(--ink); }
.adm-bar span { height: 16px; padding-top: 4px; font: 500 10px var(--font-data); color: var(--ink-soft); text-align: center; white-space: nowrap; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-table th { text-align: left; font-weight: 600; color: var(--ink-soft); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.adm-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); font-family: var(--font-data); }
.adm-f { display: grid; gap: 4px; font-size: 12px; color: var(--ink-soft); min-width: 0; }
.adm-f input, .adm-f select, .adm-row input { width: 100%; box-sizing: border-box; height: 38px; font: 500 14px var(--font-display); color: var(--ink); background: var(--hover); border: 1px solid var(--line); border-radius: 0; padding: 0 10px; line-height: 38px; -webkit-appearance: none; appearance: none; }
.adm-f select { background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.adm-f input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.7); }
.adm-f input[type="file"] { height: auto; line-height: normal; padding: 8px 0; border: 0; background: none; }
.adm-row { align-items: end; } .adm-row button, .adm-skin-x button, .adm-pack button, .adm-head button { height: 38px; padding-block: 0 !important; }
.adm-pack, .adm-skin-f, .adm-grid { align-items: start; }
.adm-f > span { min-height: 15px; } .adm-f > small { min-height: 0; }
.adm-f small { font-size: 11px; }
.adm-t { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; cursor: pointer; }
#admin input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 1px 0 0; border: 1.5px solid var(--ink-soft); border-radius: 0; background: transparent; cursor: pointer; }
#admin input[type="checkbox"]:checked { border-color: #fff; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center / 14px no-repeat; }
.adm-t span { display: grid; gap: 2px; } .adm-t small { color: var(--ink-soft); font-size: 12px; }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; }
.adm-row { display: flex; align-items: end; gap: 10px; }
.adm-row .adm-f { flex: 1; } .adm-row button { padding: 8px 14px; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-chip { font: 600 13px var(--font-display); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink-soft); cursor: pointer; }
.adm-chip.on { color: var(--ink); background: var(--hover); border-color: var(--ink-soft); }
.adm-skins { display: grid; gap: 8px; }
.adm-skin, .adm-add { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.adm-skin.off { opacity: .55; }
.adm-skin > img, .adm-pic { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--hover); }
.adm-add { grid-template-columns: 160px minmax(0, 1fr); }
.adm-add-pic { display: grid; gap: 8px; justify-items: center; font-size: 12px; color: var(--ink-soft); text-align: center; }
.adm-pic { width: 120px; height: 120px; }
.adm-add-pic input { max-width: 160px; font-size: 12px; }
.adm-skin-f { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; }
.adm-skin-x { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.adm-skin-x button { padding: 6px 14px; }
.adm-cats { display: grid; gap: 8px; }
.adm-cat { display: grid; grid-template-columns: auto minmax(140px, 260px) 110px 80px 90px; gap: 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.adm-cat-move { display: flex; gap: 4px; } .adm-cat-move button { padding: 4px 10px; }
.adm-count { font-size: 12px; color: var(--ink-soft); }
.adm-pack { display: grid; grid-template-columns: 110px 110px 90px minmax(160px, 1fr) auto; gap: 10px; align-items: end; }
.adm-pack button { padding: 7px 12px; }
.ghost.danger { color: #ff5a4f; border-color: rgba(255, 90, 79, .4); }
@media (max-width: 760px) {
  .adm-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .adm-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; }
  .adm-brand { display: none; } .adm-nav button { white-space: nowrap; }
  .adm-body { padding: 16px; }
  .adm-cat { grid-template-columns: auto 1fr; } .adm-pack { grid-template-columns: 1fr 1fr; } .adm-add { grid-template-columns: 1fr; }
}
.card.age { width: min(100%, 360px); text-align: center; }
.zone-mark.big { margin: 0 auto; opacity: .8; fill: var(--ink); }
body.child :is(#acct-chip, .vip-teaser, .vip-card, #cp-packs, #cp-note, #share-btn) { display: none !important; }
/* loading screen */
#splash { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: #000; }
#splash { grid-auto-flow: row; gap: 18px; align-content: center; }
#splash svg { fill: #f4f2ea; justify-self: center; }
#splash.done { display: none; }
@media (orientation: portrait) and (pointer: coarse) { #splash svg { transform: rotate(90deg); } } /* turned like the game, which plays landscape */
.build-tag button { font: inherit; color: inherit; background: none; border: 0; padding: 0 2px; cursor: pointer; text-decoration: none; }
.build-tag button:hover { color: var(--ink); }
.build-tag button:focus-visible { outline: 2px solid var(--you); outline-offset: 2px; border-radius: 4px; }
.lv-wrap { display: inline-flex; align-items: center; gap: 9px; }
.zone-mini { flex: none; fill: var(--ink); }
/* short screens (phones in landscape): slightly smaller buttons, sitting lower */
@media (max-height: 500px) {
  .touch { height: 230px; }
  .touch button { width: 80px; height: 80px; }
  .touch .t-split { bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
  .touch .t-eject { right: calc(66px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  #app.btn-left .touch .t-eject { left: calc(66px + env(safe-area-inset-left, 0px)); }
}
.build-tag .sep { display: inline-block; margin: 0 7px; opacity: .7; }
.vip-hero { position: relative; height: 92px; display: flex; justify-content: center; align-items: center; margin: -2px 0 2px; }
.vip-hero img { width: 62px; height: 62px; border-radius: 50%; margin: 0 -14px; box-shadow: 0 6px 18px rgba(80,50,0,.35), 0 0 0 2px rgba(255,248,220,.8); transform: rotate(-8deg); }
.vip-hero img:last-child { transform: rotate(8deg); }
.vip-hero img.front { position: relative; z-index: 1; width: 84px; height: 84px; transform: none; box-shadow: 0 10px 26px rgba(80,50,0,.45), 0 0 0 3px #fff3c4, 0 0 32px rgba(255,220,120,.9); animation: vipFloat 3.2s ease-in-out infinite; }
@keyframes vipFloat { 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .vip-hero img.front { animation: none; } }
/* Home columns: invisible in portrait and on desktop (the page reads top to bottom as before) */
.home-left, .home-center, .home-right { display: contents; }
/* landscape phones: Play, boost and Spectate live in their own box beside the card (moved there by placePlayBlock) */
body.play-side #skins.modal:not([hidden]) { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 14px; }
body.play-side #skins .card.home { width: min(calc(100% - 214px), 560px); }
body.play-side #skins > .home-center { display: flex; flex-direction: column; justify-content: center; gap: 10px; width: 200px; flex: none; padding: 14px; box-sizing: border-box;
  background: var(--paper); border: 1px solid var(--g-stroke, var(--line)); border-radius: 26px; }
body.play-side[data-build="production2"] #skins > .home-center { border-radius: 0; }
body.play-side #skins > .home-center > :is(#skins-done, #play-boost, #home-spec, #howto-btn) { height: 46px !important; min-height: 0 !important; padding-block: 0 !important; }
body.play-side #skins > .home-center > #play-boost { margin-bottom: 0 !important; } /* even 10px gaps between all four */
body.play-side .card.home > .home-dead { order: -1; text-align: left; justify-items: start; }
body.play-side .card.home > #ad-reward { order: -1; }
body.is-touch.landscape.studio-on .home-center > * { width: 100%; margin: 0; }
body.is-touch.landscape.studio-on .home-center .boost { height: 46px; font-size: 13px; gap: 6px; padding: 0 6px; white-space: nowrap; }
body.is-touch.landscape.studio-on .home-center .boost-cost { font-size: 13px; padding: 0; }
body.is-touch.landscape.studio-on .home-center :is(.primary.play, #exit-game) { height: 52px !important; font-size: 18px !important; }
body.is-touch.landscape.studio-on .home-center #home-spec, body.play-side #skins > .home-center #home-spec, body.is-touch.landscape.studio-on #skins .howto-open, body.play-side #skins > .home-center #howto-btn { height: 46px !important; font-size: 15px !important; }
.home .profile { order: -2; }
.home .home-dead { order: -1; }
/* phones sideways: three columns. Your cell and name on the left, Play in the middle with the live game showing
   through, and everything else in a panel on the right that scrolls by itself. */
@media (max-height: 560px) {
  body.is-touch.landscape:not(.studio-on) #skins { padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  body.is-touch.landscape:not(.studio-on)[data-ui="glass"] #skins { -webkit-backdrop-filter: blur(1.5px) saturate(125%); backdrop-filter: blur(1.5px) saturate(125%); background: rgba(0,0,0,.16); }
  body.is-touch.landscape:not(.studio-on) #skins .card.home {
    width: 100%; max-width: 1000px; height: 100%; max-height: 100%; padding: 0; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, .9fr) minmax(0, 1.1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px 14px;
    background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none;
  }
  body.is-touch.landscape:not(.studio-on) #skins .card.home > * { order: 0; }
  body.is-touch.landscape:not(.studio-on) .home .profile { grid-column: 1 / -1; padding: 8px 12px; border-radius: 999px; }
  body.is-touch.landscape:not(.studio-on)[data-ui="glass"] .home .profile { grid-template-areas: "z acct . lv coins" "bar bar bar bar bar"; row-gap: 6px; background: var(--g-fill); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid var(--g-stroke); border-radius: 22px; }
  body.is-touch.landscape:not(.studio-on) .home-left, body.is-touch.landscape:not(.studio-on) .home-right { display: flex; flex-direction: column; gap: 10px; min-height: 0; border-radius: 26px; padding: 12px; }
  body.is-touch.landscape:not(.studio-on)[data-ui="glass"] :is(.home-left, .home-right) { background: var(--g-fill); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--g-stroke); }
  body.is-touch.landscape:not(.studio-on) .home-left { align-items: stretch; justify-content: center; }
  body.is-touch.landscape:not(.studio-on) .home-left #preview { width: min(150px, 34vh); height: min(150px, 34vh); margin: 0 auto; }
  body.is-touch.landscape:not(.studio-on) .home-left .vip-teaser { margin: 0 auto -4px; }
  body.is-touch.landscape:not(.studio-on) .home-right { overflow-y: auto; scrollbar-width: none; }
  body.is-touch.landscape:not(.studio-on) .home-right::-webkit-scrollbar { display: none; }
  body.is-touch.landscape:not(.studio-on) .home-center { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
  body.is-touch.landscape:not(.studio-on) .home-center :is(.primary.play, #home-spec) { height: 64px; font-size: 21px; }
  body.is-touch.landscape:not(.studio-on) .home-center .home-dead { padding: 8px 12px; border-radius: 18px; background: rgba(0,0,0,.35); color: #fff; }
  body.is-touch.landscape:not(.studio-on) .home-center .home-dead span { color: rgba(255,255,255,.75); }
  body.is-touch.landscape:not(.studio-on) .home-right .zone-mark { margin-top: 2px; }
}
body.is-touch.home-open :is(.topbar, .ranktab, .board, .touch, .joy, .coach, .combo) { visibility: hidden; }
@media (max-height: 560px) {
  body.is-touch.landscape:not(.studio-on) .home-right .record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.is-touch.landscape:not(.studio-on) .home-left .name-row { grid-template-columns: auto minmax(0, 1fr) 4.4em; }
  body.is-touch.landscape:not(.studio-on) .home-left #nick { padding: 0 8px; font-size: 17px; }
  body.is-touch.landscape:not(.studio-on) .home-left #clan-tag { font-size: 13px; letter-spacing: .04em; }
}
body.is-touch .touch button::before { content: ""; position: absolute; inset: -16px; border-radius: 50%; }
body.is-touch .board .board-head { position: relative; } /* the rank tab is already fixed-positioned, so its ::before anchors to it */
body.is-touch .ranktab::before { content: ""; position: absolute; inset: -12px -12px -14px -14px; }
body.is-touch .board .arrow-btn::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; }
body.is-touch .board .arrow-btn { position: relative; }
body.is-touch .board .board-head { pointer-events: auto; padding: 6px 0; margin: -6px 0; }

@media (max-height: 560px) {
  body.is-touch.landscape:not(.studio-on)[data-ui="glass"] #skins { -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); background: rgba(0,0,0,.22); }
  body.is-touch.landscape:not(.studio-on) #skins .card.home { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "top top" "left right" "center right"; row-gap: 0; column-gap: 14px; }
  body.is-touch.landscape:not(.studio-on) .home .profile { grid-area: top; }
  body.is-touch.landscape:not(.studio-on)[data-ui="glass"] .home .profile { background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 6px 8px 10px; }
  body.is-touch.landscape:not(.studio-on) .home .profile > .zone-mini { overflow: visible; margin-left: 2px; }
  /* one panel in two parts: the top scrolls if the screen is short, Play always sits underneath */
  body.is-touch.landscape:not(.studio-on) .home-left { grid-area: left; justify-content: flex-start; gap: 8px; overflow-y: auto; scrollbar-width: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; padding-bottom: 6px; }
  body.is-touch.landscape:not(.studio-on) .home-left::-webkit-scrollbar { display: none; }
  body.is-touch.landscape:not(.studio-on) .home-center { grid-area: center; padding: 6px 12px 12px; justify-content: flex-end; border-radius: 0 0 26px 26px; }
  body.is-touch.landscape:not(.studio-on)[data-ui="glass"] .home-center { background: var(--g-fill); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--g-stroke); border-top: 0; }
  body.is-touch.landscape:not(.studio-on) .home-right { grid-row: 2 / 4; }
  body.is-touch.landscape:not(.studio-on) .home-center :is(.primary.play, #home-spec) { height: 58px; font-size: 20px; }
  body.is-touch.landscape:not(.studio-on) .home-center .home-dead { background: none; color: var(--ink); padding: 0; }
  body.is-touch.landscape:not(.studio-on) .home-center .home-dead span { color: var(--ink-soft); }
  body.is-touch.landscape:not(.studio-on) .home-right { grid-area: right; }
  body.is-touch.landscape:not(.studio-on) .home-left #preview { width: min(118px, 26vh); height: min(118px, 26vh); flex: none; }
  body.is-touch.landscape:not(.studio-on) .home-left .name-row { flex: none; }
}
@media (max-height: 420px) { body.is-touch.landscape:not(.studio-on) .home-left .vip-teaser { display: none; } } /* very short screens: the VIP card stays on the coins page */
/* landscape Home menu (only on phones held sideways; hidden everywhere else) */
.home-menu, .home-back { display: none; }
@media (max-height: 560px) {
  body.is-touch.landscape:not(.studio-on) #skins .card.home { grid-template-rows: auto minmax(0, 1fr) auto auto minmax(0, 1fr); grid-template-areas: "top top" ". right" "left right" "center right" ". right"; }
  body.is-touch.landscape:not(.studio-on) .home-right { grid-area: right; grid-row: 2 / 6; }
  body.is-touch.landscape:not(.studio-on) .home-left { grid-area: left; overflow: visible; padding: 14px 14px 6px; border-radius: 26px 26px 0 0; justify-content: center; }
  body.is-touch.landscape:not(.studio-on) .home-center { grid-area: center; padding: 6px 14px 14px; }
  body.is-touch.landscape:not(.studio-on) .home-left .vip-teaser { display: none; }
  /* the right panel's views */
  body.is-touch.landscape:not(.studio-on) .home-right[data-view="menu"] > :not(.home-menu) { display: none; }
  body.is-touch.landscape:not(.studio-on) .home-right[data-view="menu"] .home-menu { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; height: 100%; }
  body.is-touch.landscape:not(.studio-on) .home-right:not([data-view="menu"]) .home-back { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; font: 600 14px var(--font-display); color: var(--ink); background: var(--g-tray, var(--hover)); border: 0; border-radius: 999px; padding: 7px 14px 7px 10px; cursor: pointer; flex: none; }
  body.is-touch.landscape:not(.studio-on) .home-right[data-view="skins"] > [data-page]:not([data-page="skins"]),
  body.is-touch.landscape:not(.studio-on) .home-right[data-view="stats"] > [data-page]:not([data-page="stats"]),
  body.is-touch.landscape:not(.studio-on) .home-right[data-view="settings"] > [data-page]:not([data-page="settings"]) { display: none; }
  body.is-touch.landscape:not(.studio-on) .home-menu-avatar #preview { width: min(170px, 46vh); height: min(170px, 46vh); margin: 0; }
  body.is-touch.landscape:not(.studio-on) .home-menu-links { display: grid; gap: 10px; }
  body.is-touch.landscape .menu-link { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 16px; font: 600 16px var(--font-display); color: var(--ink); background: var(--g-tray, var(--hover)); border: 1px solid transparent; border-radius: 18px; cursor: pointer; text-align: left; }
  body.is-touch.landscape .menu-link:hover, body.is-touch.landscape .menu-link:focus-visible { border-color: var(--g-stroke, var(--line)); }
}
:is(.topbar, .ranktab, .board, .mapbox, .tl .hud, .hint, .spec) { box-shadow: none !important; }

@media (max-height: 560px) {
  body.is-touch.landscape:not(.studio-on) #skins .card.home { grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "top top" "left right" "center right"; }
  body.is-touch.landscape:not(.studio-on) .home-right { grid-row: 2 / 4; }
  body.is-touch.landscape:not(.studio-on) .home-left { justify-content: flex-end; }   /* name above the middle line... */
  body.is-touch.landscape:not(.studio-on) .home-center { justify-content: flex-start; } /* ...Play and Spectate below it: the stack sits centred */
  body.is-touch.landscape:not(.studio-on) .home-menu-avatar #preview { width: min(230px, 62vh); height: min(230px, 62vh); }
}
.team-now b, .team-now span { color: var(--ink) !important; }
/* touch buttons: lighter on the light themes; faded when they'd do nothing */
body:not([data-game-theme="dark"]) .touch button { background: rgba(255,255,255,.4); border-color: rgba(140,140,150,.28); color: rgba(120,120,130,.6); }
body:not([data-game-theme="dark"]) .touch button.down { background: rgba(255,255,255,.65); }
.touch button.off { opacity: .3; }
@media (max-height: 560px) {
  /* swapped sides: the cell menu on the left, name + Play on the right; the cell sits on the right of its panel */
  body.is-touch.landscape:not(.studio-on) #skins .card.home { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr); grid-template-areas: "top top" "right left" "right center"; }
  body.is-touch.landscape:not(.studio-on) .home-right[data-view="menu"] .home-menu { grid-template-columns: minmax(0, 1fr) auto; }
  body.is-touch.landscape:not(.studio-on) .home-menu-avatar { order: 2; }
  /* no seam between the name and Play, and a little more room between them */
  body.is-touch.landscape:not(.studio-on) .home-left { border-bottom: 0 !important; padding-bottom: 8px; }
  body.is-touch.landscape:not(.studio-on) .home-center { border-top: 0 !important; padding-top: 10px; }
  body.is-touch.landscape:not(.studio-on)[data-ui="glass"] :is(.home-left, .home-center) { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
:is(.hud, .card, .touch button, .chip, .combo, .perf-tip, .coach, .acct-chip, .get-coins) { box-shadow: none !important; }
body[data-ui="glass"] { --g-shadow: none; }
@media (max-height: 560px) {
  body.is-touch.landscape:not(.studio-on)[data-ui="glass"] #skins, body.is-touch.landscape:not(.studio-on) #skins { -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); background: rgba(0,0,0,.32); }
  body.is-touch.landscape:not(.studio-on) :is(.home-left, .home-center, .home-right),
  body.is-touch.landscape:not(.studio-on)[data-ui="glass"] :is(.home-left, .home-center, .home-right) { background: none !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
.home-stage { display: none; }
.touch button, body:not([data-game-theme="dark"]) .touch button { background: transparent; }
.touch button.down, body:not([data-game-theme="dark"]) .touch button.down { background: rgba(127,127,135,.14); }
@media (max-height: 560px) {
  body.is-touch.landscape:not(.studio-on)[data-ui="glass"] #skins, body.is-touch.landscape:not(.studio-on) #skins { background: rgba(6,6,10,.62); }
  body.is-touch.landscape:not(.studio-on) #skins .card.home { grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 1.25fr); grid-template-areas: "top top top" "right stage left" "right stage center"; column-gap: 16px; }
  body.is-touch.landscape:not(.studio-on) .home-stage { grid-area: stage; display: grid; place-items: center; }
  body.is-touch.landscape:not(.studio-on) .home-stage #preview { width: min(240px, 66vh); height: min(240px, 66vh); margin: 0; }
  body.is-touch.landscape:not(.studio-on) .home-left .name-row { grid-template-columns: auto minmax(0, 1fr) 3.9em; }
  body.is-touch.landscape:not(.studio-on) .home-menu-avatar { display: none; }
  body.is-touch.landscape:not(.studio-on) .home-right[data-view="menu"] .home-menu { grid-template-columns: 1fr; align-content: center; }
  body.is-touch.landscape:not(.studio-on) .home-right:not([data-view="menu"]) { grid-column: 1 / 3; } /* an open page uses the cell's space too */
  body.is-touch.landscape:not(.studio-on) .card.home:has(.home-right:not([data-view="menu"])) .home-stage { display: none; }
  /* light text on the dark backdrop */
  body.is-touch.landscape:not(.studio-on) #skins { --ink: #f2f2f4; --ink-soft: #a9a9b2; }
}
/* 1 */ body.spectating :is(.touch, .joy) { display: none !important; }
/* 2: the icon is the same colour as the ring */
.touch button { color: rgba(110,110,120,.55); border-color: rgba(110,110,120,.55); }
body:not([data-game-theme="dark"]) .touch button { color: rgba(110,110,120,.5); border-color: rgba(110,110,120,.5); }
body[data-game-theme="dark"] .touch button { color: rgba(214,214,214,.92); border: 1.5px solid var(--g-stroke, rgba(255,255,255,.2)); background: rgba(9,9,9,.18); }
body[data-game-theme="dark"][data-bw="2"] .touch button { border-width: 2px; }
.touch button .t-ico { position: absolute; inset: 8%; width: 84%; height: 84%; margin: 0; }
.touch .t-split, .touch .t-eject { left: auto !important; }
.touch .t-split { right: 62px !important; bottom: 100px !important; }
.touch .t-eject { right: 107px !important; bottom: 22px !important; } /* Feed just below and inside Split, as on Agar.io */
#app.btn-left .touch .t-split { right: auto !important; left: 62px !important; }
#app.btn-left .touch .t-eject { right: auto !important; left: 107px !important; }
.touch :is(.t-split, .t-eject) { width: 70px !important; height: 70px !important; } /* Agar.io-sized */
body[data-game-theme="dark"] .touch button:not(.off) { opacity: .62; color: #fff; }
body[data-game-theme="dark"] .touch button.down { opacity: .85; }
body[data-game-theme="dark"] .touch button.down { background: rgba(34,34,34,.92); }
body[data-game-theme="dark"] .touch button.off { opacity: 1; color: rgba(255,255,255,.22); border-color: rgba(255,255,255,.1); background: rgba(9,9,9,.6); }
body[data-game-theme="dark"] .joy { width: 140px; height: 140px; margin: -70px 0 0 -70px; border: 0; background: rgba(255,255,255,.12); }
body[data-game-theme="dark"] .joy i { width: 68px; height: 68px; margin: -34px 0 0 -34px; background: rgba(8,8,8,.82); }
/* 3: Share is just the word */
.share-btn, body[data-ui="glass"] .share-btn { background: none; border: 0; padding: 4px 2px; color: var(--ink-soft); }
.share-btn svg { display: none; }
.share-btn:hover, body[data-ui="glass"] .share-btn:hover { background: none; color: var(--ink); }
body[data-game-theme="dark"] .share-btn:hover { color: #fff; }
.share-btn:is(:hover, :active, :focus, :focus-visible) { background: none !important; box-shadow: none !important; }
/* 4 */ #team-code, body[data-ui="glass"] #team-code { border: 0; }
/* 5: no dark outline around buttons */
button:focus, button:focus-visible, .primary:focus-visible, .ghost:focus-visible { outline: none; }
/* 7: desktop Home in Full mode: a solid panel (like Standard), a light blur behind it in every mode */
body[data-ui="glass"]:not(.is-touch) #skins .card { background: var(--paper); }
body:not(.is-touch) #skins.modal { -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; }

/* ---- Desktop character studio: the shop is your own cell. Skins roll on and off it; name and tag are typed right on it. ---- */
.studio[hidden] { display: none !important; }
body.studio-on #skins .card.home .name-row, body.studio-on #skins .shop > :not(.upload, #upload-note) { display: none; }
body.studio-on:is([data-build="production"], [data-build="production2"]) #skins .shop { display: none; }
body.studio-on #skins .card.wide { width: min(100%, 540px); }
body.is-touch.studio-on .studio { --av: min(clamp(230px, 40vh, 340px), calc(100vw - 120px)); }
body.is-touch.landscape.studio-on .studio { --av: min(240px, 62vh); }
body.is-touch.studio-on .st-hint { display: none; }
body.is-touch .st-tools [data-tip]::after { display: none; }
body.studio-on .vip-teaser { margin: 0 auto 4px; }
.studio { --av: clamp(250px, 44vh, 372px); position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 2px 0 6px; user-select: none; -webkit-user-select: none; }
.st-series { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--g-tray, var(--hover)); isolation: isolate; }
.st-series button { position: relative; z-index: 1; min-width: 84px; padding: 7px 16px; border: 0; border-radius: 999px; background: none; color: var(--ink-soft); font: 650 13px var(--font-display); letter-spacing: -.005em; cursor: pointer; transition: color .25s; }
.st-series button[aria-selected="true"] { color: var(--ink); }
.st-series button:hover { color: var(--ink); }
.st-glide { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 999px; background: var(--g-thumb, var(--field)); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 3px 10px rgba(0,0,0,.1); transition: transform .5s cubic-bezier(.3,1.35,.45,1), width .5s cubic-bezier(.3,1.35,.45,1); }
body[data-game-theme="dark"] .st-glide { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.12); }
.st-stage { touch-action: none; position: relative; width: calc(100% + 2 * var(--cpx, 26px)); margin-inline: calc(-1 * var(--cpx, 26px)); overflow: hidden; height: var(--av); display: grid; place-items: center; touch-action: pan-y; }
.st-av { position: relative; width: var(--av); height: var(--av); }
body.studio-on #preview { position: absolute; top: 0; left: -100%; width: 300% !important; height: 100% !important; margin: 0 !important; cursor: grab; }
.studio .st-peek { display: none; }
body.studio-on #preview:active { cursor: grabbing; }
.st-peek { position: absolute; top: 50%; width: 100px; height: 100px; margin-top: -58px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; opacity: .6; transition: opacity .3s, transform .45s cubic-bezier(.3,1.4,.5,1); }
.st-peek img { width: 100%; height: 100%; border-radius: 50%; display: block; box-shadow: 0 0 0 1.5px rgba(var(--tone), .35); }
.st-peek-l { left: -10px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%); mask-image: linear-gradient(90deg, transparent 0, #000 45%); transform: scale(.92); }
.st-peek-r { right: -10px; -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 45%); mask-image: linear-gradient(270deg, transparent 0, #000 45%); transform: scale(.92); }
.st-peek:hover { opacity: .9; transform: scale(1); }
.st-peek.swap img { animation: stPeek .45s cubic-bezier(.3,1.4,.5,1); }
@keyframes stPeek { from { transform: scale(.6); opacity: 0; } }
.st-peek[hidden] { display: none; }
.st-nav { position: absolute; top: 50%; z-index: 2; width: 38px; height: 38px; margin-top: -27px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--ink); background: var(--g-fill, var(--field)); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: inset 0 0 0 1px var(--g-stroke, var(--line)); cursor: pointer; transition: transform .35s cubic-bezier(.3,1.6,.5,1), background .2s; }
.st-prev { left: 30px; } .st-next { right: 30px; }
.st-nav:hover { background: rgba(118,118,128,.28); transform: scale(1.08); }
.st-nav:active { transform: scale(.92); }
.st-nav.nudge-l { animation: stNudgeL .35s cubic-bezier(.3,1.6,.5,1); } .st-nav.nudge-r { animation: stNudgeR .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes stNudgeL { 40% { transform: translateX(-4px) scale(.94); } } @keyframes stNudgeR { 40% { transform: translateX(4px) scale(.94); } }
.st-tools { position: absolute; bottom: 6px; z-index: 2; display: flex; flex-direction: column; gap: 8px; }
.st-tools-l { left: 28px; } .st-tools-r { right: 28px; }
.st-tool, body.studio-on .st-tools .font-cycle { position: relative; width: 40px; height: 40px; margin: 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--ink); background: var(--g-tray, var(--hover)); cursor: pointer; transition: transform .35s cubic-bezier(.3,1.6,.5,1), background .2s, color .2s, box-shadow .2s; }
body.studio-on .st-tools .font-cycle .aa { font: 700 15px var(--font-display); letter-spacing: -.02em; }
.st-tool:hover, body.studio-on .st-tools .font-cycle:hover { background: rgba(118,118,128,.3); transform: scale(1.07); }
.st-tool:active, body.studio-on .st-tools .font-cycle:active { transform: scale(.9); }
.st-tool[aria-pressed="true"] { color: #fff; }
.st-tool .st-slash { opacity: 0; transition: opacity .2s; }
.st-tool[aria-pressed="false"] { color: var(--ink-soft); }
.st-tool .st-slash { display: none; }
.st-tool.spin svg { animation: fcPop .45s cubic-bezier(.3,1.6,.5,1); }
.st-tools [data-tip]::after { content: attr(data-tip); position: absolute; top: 50%; white-space: nowrap; padding: 5px 10px; border-radius: 8px; font: 600 12px var(--font-display); color: var(--paper); background: var(--ink); opacity: 0; pointer-events: none; transform: translateY(-50%) scale(.9); transition: opacity .15s, transform .2s cubic-bezier(.3,1.6,.5,1); }
.st-tools-l [data-tip]::after { left: calc(100% + 8px); transform-origin: left center; }
.st-tools-r [data-tip]::after { right: calc(100% + 8px); transform-origin: right center; }
.st-tools [data-tip]:hover::after { opacity: 1; transform: translateY(-50%) scale(1); transition-delay: .35s; }
.st-id { --dy: 0; position: absolute; left: 8%; right: 8%; top: 50%; display: flex; justify-content: center; align-items: center; gap: 6px; transform: translateY(calc(-50% + var(--dy) * var(--av))); pointer-events: none; }
.st-id > * { pointer-events: auto; }
body.studio-on #clan-tag { position: absolute; z-index: 1; left: calc(var(--tx, .5) * 100%); top: calc(var(--ty, .8) * 100%); transform: translate(-50%, -50%); box-sizing: border-box; width: calc(var(--tw, .1) * var(--av) + 8px) !important; height: calc(var(--th, .08) * var(--av)); margin: 0; padding: 0; border: 0; border-radius: 4px; outline: none; background: transparent; box-shadow: none; color: #ff9f0a; caret-color: #ff9f0a; text-align: center; letter-spacing: 0; text-transform: uppercase; font: var(--tag-w, 800) calc(var(--th, .08) * var(--av) * .5) var(--tag-font, -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif); }
body.studio-on #clan-tag::placeholder { color: rgba(255,159,10,.5); }
body.studio-on #st-av.no-tag #clan-tag:not(:focus) { visibility: hidden; }
body.studio-on #nick { flex: none; box-sizing: content-box; height: auto; margin: 0; padding: 2px 6px; border: 0; border-radius: 10px; outline: none; background: transparent; color: #fff; text-align: center; caret-color: rgb(var(--tone)); transition: background .2s, box-shadow .2s, width .25s cubic-bezier(.3,1.3,.5,1); }
body.studio-on #nick { min-width: 1ch; max-width: calc(var(--av) * .66); font-size: var(--nfs, 36px); line-height: 1.15; text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 1.5px 1.5px #000, -1.5px 1.5px #000, 1.5px -1.5px #000, -1.5px -1.5px #000; }
body.studio-on #nick::placeholder { color: rgba(255,255,255,.55); }
body.studio-on #nick:hover, body.studio-on #nick:focus { background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
body.studio-on #nick:focus { box-shadow: inset 0 0 0 1.5px rgba(var(--tone), .9), 0 0 0 4px rgba(var(--tone), .2); }
.st-cap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: calc(var(--av) * -0.1); position: relative; }
.st-row { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; max-width: 100%; }
.st-name { font: 800 24px/1.1 var(--font-display); letter-spacing: -.025em; color: var(--ink); }
.st-name.swap { animation: stName .4s cubic-bezier(.3,1.4,.5,1); }
@keyframes stName { from { opacity: 0; transform: translateY(6px); filter: blur(4px); } }
.st-scrub { position: relative; width: 112px; height: 3px; border-radius: 3px; background: var(--g-tray, var(--hover)); overflow: hidden; }
.st-scrub i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; background: rgb(var(--tone)); transition: transform .45s cubic-bezier(.3,1.3,.5,1), width .3s; }
.st-act { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; font: 650 14px var(--font-display); color: var(--ink); background: var(--g-tray, var(--hover)); cursor: pointer; transition: transform .35s cubic-bezier(.3,1.6,.5,1), background .2s, color .2s, box-shadow .2s; }
.st-act:not(:disabled):hover { transform: scale(1.04); }
.st-act:not(:disabled):active { transform: scale(.95); }
.st-act:disabled { cursor: default; }
.st-act > * { pointer-events: none; }
.st-act[hidden] { display: none; }
.studio.st-ultra .st-name { color: #ffc21a; }
.studio.st-ultra .st-scrub i, body[data-build="production2"] .studio.st-ultra .st-scrub i { background: #ffc21a; }
/* 4. Game settings: as tall as Spectate */
#skins details.settings > summary { box-sizing: border-box; min-height: 50px; padding-block: 0 !important; }
/* 5. a bigger coin on the coins page */
#coin-title .big-coin { width: 34px; height: 34px; vertical-align: -6px; }
/* 6. notched phones held sideways: keep the leaderboard and the buttons clear of the notch (not when the game itself is turned) */
#app:not(.rot) #board-panel.board, #app:not(.rot) #ranktab.ranktab { right: max(16px, env(safe-area-inset-right, 0px)) !important; }
#app:not(.rot) .touch .t-split { right: max(62px, calc(env(safe-area-inset-right, 0px) + 22px)) !important; }
#app:not(.rot) .touch .t-eject { right: calc(max(62px, calc(env(safe-area-inset-right, 0px) + 22px)) + 45px) !important; }
body.is-touch .st-stage { touch-action: auto; } /* phones: no swipe on the avatar, so the page scrolls smoothly over it */
body.landscape[data-ui="glass"] .acct-chip #acct-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
body.is-touch .desk-only { display: none !important; }
body:not(.is-touch):not(.home-open):not(.spectating) #stage { cursor: none; }
body.p2-pause #skins .card.home > .profile, body.p2-pause #skins .card.home > .home-stage, body.p2-pause .home-left, body.p2-pause .home-right > :not(.team-box),
body.p2-pause #home-dead, body.p2-pause #play-boost, body.p2-pause #home-spec, body.p2-pause #howto-btn, body.p2-pause #quick-play { display: none !important; } /* the pause menu is only Back to game, Exit game and Teams */
body.p2-pause #skins .card.wide { width: min(100%, 440px); }
body.is-touch.landscape.studio-on.p2-pause #skins .card.home { width: min(100%, 460px); }
#exit-game { height: 50px; font-size: 16px; }
body[data-ui="glass"] #exit-game { height: 58px; font-size: 19px; }
.pause-orient[hidden] { display: none !important; }
.pause-orient { display: grid; gap: 6px; }
.pause-orient .po-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; background: var(--g-tray, var(--hover)); }
.pause-orient button { height: 36px; border: 0; background: none; color: var(--ink-soft); font: 600 14px var(--font-display); cursor: pointer; }
.pause-orient button[aria-pressed="true"] { background: #3a3a3c; color: #fff; }
.boost { display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 16px var(--font-display); color: #1a1300; background: #ffc21a; transition: filter .15s, transform .18s cubic-bezier(.3,1.6,.5,1); }
.boost[hidden] { display: none; }
.boost-cost { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.14); font: 700 13px var(--font-data); }
.boost-cost .coin { width: 14px; height: 14px; }
.boost:active { transform: scale(.97); }
@media (hover: hover) { .boost:hover { filter: brightness(1.08); } }
@media (hover: hover) { :is(.primary, .team-row .ghost.join, .cp-pack .buy, .st-act.buy, .st-act.ask, .st-act.vip):not(:disabled):hover { filter: brightness(1.1); } }
:is(.primary, .team-row .ghost.join, .cp-pack .buy, .st-act) { transition: filter .15s, transform .18s cubic-bezier(.3,1.6,.5,1); }
.team-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.team-head .record-h { margin: 0; }
.team-sub { font-size: 12px; color: var(--ink-soft); }
body.studio-on .home-right > .team-box { order: 1; } body.studio-on:not(.play-side) :is(#home-spec, #howto-btn) { order: 2; } body.studio-on .home-right > .settings { order: 3; } body.studio-on .home-right > :is(.wr, .record) { order: 4; } /* World records, Your stats, then How to play */
body.studio-on .home-right > .zone-mark { order: 5; } body.studio-on .home-right > .build-tag { order: 6; }
body.studio-on .team-box { gap: 12px; padding: 16px 18px 18px; }
body.studio-on .team-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
body.studio-on .team-row > * { height: 42px; margin: 0; }
body.studio-on #team-code { order: 1; grid-column: 1; box-sizing: border-box; width: 100%; padding: 0 14px; border: 0; border-radius: 12px; background: var(--field); color: var(--ink); font: 600 15px var(--font-data); letter-spacing: .14em; text-transform: uppercase; }
body.studio-on #team-code::placeholder { letter-spacing: .02em; text-transform: none; font-family: var(--font-display); color: var(--ink-soft); }
body.studio-on .team-row:has(#team-join[hidden]) #team-code { grid-column: 1 / -1; }
body.studio-on #team-join { order: 2; grid-column: 2; padding: 0 18px; }
body.studio-on #team-create { order: 3; grid-column: 1 / -1; background: #fff !important; color: #111 !important; border-color: #fff !important; }
body.studio-on .team-now { box-sizing: border-box; height: 42px; padding: 0 14px; border-radius: 12px; background: var(--field); justify-content: space-between; align-items: center; }
body.studio-on .team-now b { font-size: 18px; letter-spacing: .16em; }
body.studio-on :is(#team-copy, #team-leave) { color: #fff !important; }
body.studio-on .team-now:not([hidden]) + .team-row { margin-top: -4px; } /* 8px, the same gap as field → Create */
body.studio-on .team-row:has(#team-copy:not([hidden])) { grid-template-columns: 1fr 1fr; }
body.studio-on #team-copy, body.studio-on #team-leave { grid-column: auto; }
body.spectating #topbar { display: none !important; }
body[data-build="production2"] .topbar { left: calc(16px + env(safe-area-inset-left, 0px)) !important; right: auto !important; margin: 0 !important; }
#skins #home-spec, #skins .howto-open { height: 50px; font-size: 18px; padding: 0; }
body[data-ui="glass"] #skins #home-spec, body[data-ui="glass"] #skins .howto-open { height: 50px; font-size: 17px; }
#skins details.settings > summary { font-size: 18px; } body[data-ui="glass"] #skins details.settings > summary { font-size: 17px; } /* the same size as Spectate */
body.is-touch.landscape.studio-on #skins details.settings > summary { font-size: 15px; } /* clicks land on the button itself, which survives the re-render */
.st-act .coin { width: 19px; height: 19px; margin-right: -1px; }
.st-act svg { width: 19px; height: 19px; }
.st-act .sep { opacity: .4; }
.st-act.on { color: rgb(var(--tone)); background: rgba(var(--tone), .12); }
.st-act.buy { color: var(--tone-ink, #fff); background: rgb(var(--tone)); box-shadow: 0 6px 20px rgba(var(--tone), .35); }
.st-act.ask { color: var(--tone-ink, #fff); background: rgb(var(--tone)); box-shadow: 0 0 0 4px rgba(var(--tone), .25), 0 6px 20px rgba(var(--tone), .4); animation: stAsk 1.4s ease-in-out infinite; }
@keyframes stAsk { 50% { box-shadow: 0 0 0 7px rgba(var(--tone), .12), 0 6px 20px rgba(var(--tone), .4); } }
.st-act.short { color: var(--alert); background: color-mix(in srgb, var(--alert) 12%, transparent); }
.st-act.lock { color: var(--ink-soft); }
.st-act .lvbar { width: 54px; height: 4px; border-radius: 4px; background: rgba(128,128,128,.25); overflow: hidden; }
.st-act .lvbar i { display: block; height: 100%; background: var(--ink-soft); border-radius: 4px; }
.st-act.vip { color: #2a1d00; background: linear-gradient(135deg, #f5c242, #ffe08a 50%, #e0a21a); box-shadow: 0 6px 22px rgba(224,162,26,.35); }
.st-act.cheer { animation: stCheer .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes stCheer { 30% { transform: scale(1.12); } }
.st-hint { margin: 0; font: 500 11px var(--font-display); color: var(--ink-soft); opacity: .8; transition: opacity .6s; }
.st-hint.gone { opacity: 0; }
.st-hint kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin: 0 1px; padding: 0 3px; border-radius: 5px; font: 600 10px var(--font-display); background: var(--g-tray, var(--hover)); color: var(--ink); }
.st-hint .dot { margin: 0 6px; }
@keyframes stIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
body.studio-on.home-open .studio > * { animation: stIn .6s cubic-bezier(.2,1.2,.4,1) backwards; }
body.studio-on.home-open .studio > .st-stage { animation-delay: .06s; }
body.studio-on.home-open .studio > .st-cap { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) { .studio *, .studio { animation: none !important; transition: none !important; } }

/* ===== Production II: calm and exact. Five colours (blue for buttons; white, black, light and dark grey; orange for levels,
   teams and in-game status), Inter for the interface, mono for numbers, Zalando for names, square corners, flat surfaces. ===== */
body[data-build="production2"] {
  --you: #0a84ff; --ink: #fff; --ink-soft: #98989f; --paper: #1c1c1e; --field: #1c1c1e; --line: rgba(255,255,255,.1); --hover: rgba(255,255,255,.06);
  --g-fill: rgba(28,28,30,.82); --g-fill-2: rgba(44,44,46,.9); --g-stroke: #2c2c2e; --g-tray: #2c2c2e; --g-thumb: #3a3a3c; --g-scrim: rgba(0,0,0,.55);
  --alert: #ff9f0a; --tone: 255 255 255; --tone-ink: #000; --amber: #e8770c;
  --font-display: "Inter", system-ui, sans-serif;
}
body[data-build="production2"] *:not(.coin, .coin *, .touch button, .joy, .joy i, .st-peek, .st-peek img, .skin img, .chip img, .acct-dot, .vip-hero img, #preview),
body[data-build="production2"] *:not(.touch button, .coin)::before, body[data-build="production2"] *:not(.coin)::after { border-radius: 0 !important; }
body[data-build="production2"] .card { border-radius: 0 !important; }
body[data-build="production2"] :is(#font-cycle, fieldset:has(#namefont-opts)) { display: none !important; }
body[data-build="production2"] .seg label, body[data-build="production2"] .seg label:has(input:checked) { font-weight: 500 !important; }
body[data-build="production2"] .rec i { color: #000 !important; background: var(--amber) !important; }
body[data-build="production2"] .rec.new { border-color: var(--amber) !important; }
body[data-play="gold"]:not([data-build="production2"]) #skins-done { background: #ffc21a !important; color: #1a1300 !important; }
body[data-play="gold"]:not([data-build="production2"]) #skins-done { box-shadow: 0 8px 24px rgba(255,194,26,.3) !important; }
body[data-build="production2"] .dev-only.p2-show { display: block !important; }
body[data-build="production2"] .p2-hide { display: none !important; }
body[data-build="production2"] .name-row { grid-template-columns: minmax(0, 1fr) 6.5em; }
body[data-build="production2"] *:not(#nick) { box-shadow: none !important; text-shadow: none !important; }
body[data-build="production2"] #skins { background: var(--g-scrim) !important; } /* no glow taken from the skin */
body[data-build="production2"] .card, body[data-build="production2"] .hud { border: 1px solid #2c2c2e; }
body[data-build="production2"] :is(.vip-hero, .vip-hero img) { animation: none !important; }
/* numbers in mono */
body[data-build="production2"] :is(.tb-stat b, .tb-pos, #coins, #shop-coins, .board li .ms, .board li .rk, .rec b, .record-grid b, .st-act, .lv, .tb-lv, #xptext) { font-family: var(--font-data) !important; font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* one pill: small, square, Inter caps */
body[data-build="production2"] :is(.vip-badge, .lv, .tb-lv, .board .tagchip, .rec i, .skin .price) { font: 700 10px/1.5 var(--font-data) !important; letter-spacing: .06em !important; text-transform: uppercase; padding: 1px 6px !important; }
body[data-build="production2"] :is(.lv, .tb-lv, .tl-level .lv, .level .lv) { color: #000 !important; background: var(--amber) !important; }
body[data-build="production2"] :is(.level .bar i, .tl-level .bar i, #xpbar) { background: var(--amber) !important; }
body[data-build="production2"] .vip-badge { color: #000 !important; background: var(--amber) !important; }
body[data-build="production2"] #lv::after { color: #000 !important; background: var(--amber) !important; font: 700 12px/18px var(--font-display) !important; letter-spacing: normal !important; padding: 4px 11px !important; margin-left: 0 !important; }
body[data-build="production2"] .board .tagchip, body[data-build="production2"] .board li:is(.me, .mate) .tagchip { color: #000 !important; background: var(--amber) !important; }
body[data-build="production2"] .board li.mate :is(.nm, .ms) { color: #ff9f0a; }
body[data-build="production2"] .vip-teaser { border-color: #2c2c2e; background: #1c1c1e; color: #fff; }
/* buttons: blue is the only button colour; everything else is grey */
body[data-build="production2"] :is(.primary, .primary.play, .team-row .ghost.join, .cp-pack .buy) { background: var(--you) !important; color: #fff !important; }
body[data-build="production2"] .ghost { background: #2c2c2e; color: #fff; }
body[data-build="production2"] .get-coins, body[data-build="production2"] .get-coins:hover { background: #fff !important; color: #000 !important; }
.st-act.buy, .st-act.ask, body[data-build="production2"] .st-act.buy, body[data-build="production2"] .st-act.ask { color: #000 !important; background: #fff !important; box-shadow: none; animation: none; }
.st-act.vip, body[data-build="production2"] .st-act.vip { color: #1a1300 !important; background: #ffc21a !important; box-shadow: none; animation: none; }
body[data-build="production2"] .st-act.on { color: #fff; background: #2c2c2e; }
body[data-build="production2"] .st-act.short { color: #ff9f0a; background: #2c2c2e; }
body[data-build="production2"] .st-glide { background: #3a3a3c !important; }
body[data-build="production2"] .st-scrub i { background: #fff; }
body[data-build="production2"] .st-peek img { box-shadow: none; }
body[data-build="production2"] :is(.st-nav, .st-tool, .st-tools .font-cycle) { background: #2c2c2e !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
body[data-build="production2"] .st-tool[aria-pressed="false"] { color: #636366; }
body[data-build="production2"] #clan-tag { color: #e8770c !important; }
body[data-build="production2"] .tb-profile .tb-z { background: #2c2c2e; }

/* ---- 1.01 ---- */
#play-boost { margin-bottom: 10px; }
#skins .card.home { --cpx: 26px; overflow-x: hidden; }
@media (max-width: 560px) { #skins .card.home { --cpx: 20px; } body[data-ui="glass"] #skins .card.home { padding-bottom: 18px; } }
.boost-cost { padding: 0; background: none; color: #1a1300; font: 800 16px var(--font-data); gap: 6px; }
body[data-build="production2"] .boost-cost { border-radius: 0; }
.boost-cost .coin { width: 19px; height: 19px; }
/* the leaderboard and its closed tab: the same top and side as the score block, even padding, the arrow in one spot */
#board-panel.board { top: calc(12px + env(safe-area-inset-top, 0px)) !important; padding: 10px !important; }
#board-panel .board-head .label { padding-left: 6px; }
#ranktab.ranktab { padding: 10px 10px 10px 14px !important; }
/* score block: just the Z, larger, no tile behind it */
.tb-profile .tb-z, body[data-ui="glass"] .tb-profile .tb-z { width: auto !important; height: auto !important; background: none !important; padding: 0 4px; }
.tb-profile .tb-z svg, body[data-ui="glass"] .tb-profile .tb-z svg { width: 17px !important; height: 22px !important; }
.tb-profile { position: relative; padding: 0 14px !important; margin-left: -7px; } /* the Z sits midway between the block's edge and the divider */
.tb-profile::after { content: ""; position: absolute; right: 0; top: -4px; bottom: -4px; width: 1px; background: var(--line); }
/* Ultra: the same gold as the boost button */
.vip-badge, body[data-build="production2"] .vip-badge, #lv::after, body[data-build="production2"] #lv::after { background: #ffc21a !important; color: #1a1300 !important; }
/* mobile Split/Feed: bright icons, see-through button */
body[data-game-theme="dark"] .touch button:not(.off) { opacity: 1; color: rgba(255,255,255,.95); border-color: rgba(255,255,255,.2); }
/* ---- UI standards (1.23): one pill design, one header box, hover on every button ---- */
/* segmented pills: Game settings options, the skin tabs, How to play's Small/Big cell */
body[data-build="production2"] :is(.seg .opts, .st-series, .ht-seg) { display: flex !important; width: 100%; max-width: 100%; box-sizing: border-box; gap: 3px !important; padding: 3px !important; border-radius: 0 !important; background: #18181b !important; border: 0 !important; }
body[data-build="production2"] .seg .opts.vlist { flex-direction: column; }
body[data-build="production2"] :is(.seg .opts label, .st-series button, .ht-seg button) { box-sizing: border-box; height: 30px; display: inline-flex; align-items: center; justify-content: center; min-width: 0; padding: 0 12px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #26262a !important; color: #c9c9cc !important; font: 600 13px var(--font-display) !important; cursor: pointer; }
body[data-build="production2"] :is(.seg .opts:not(.vlist) label, .st-series button, .ht-seg button) { flex: 1 1 0; }
body[data-build="production2"] .seg .opts.vlist label { justify-content: flex-start; height: 34px; }
body[data-build="production2"] :is(.seg .opts label:has(input:checked), .st-series button[aria-selected="true"], .ht-seg button[aria-pressed="true"]) { background: #fff !important; color: #000 !important; }
body[data-build="production2"] .st-glide { display: none !important; }
/* the three header boxes: one height, one thin border, so they read as a set */
body[data-build="production2"] :is(#acct-chip, .profile .coins, .profile #lv) { box-sizing: border-box; border: 1px solid #2a2a2f !important; }
body[data-build="production2"] .profile #lv { border-color: #e8770c !important; }
/* hover: a slight lift on everything you can press (mouse only, so phones never keep a stuck hover) */
body[data-build="production2"] :is(button, a.buy, a.primary, .vip-manage, .seg label) { transition: filter .12s ease, background-color .12s ease; }
@media (hover: hover) {
  body[data-build="production2"] :is(button, a.buy, a.primary, .seg label, #lv):not(:disabled):not(.off):not(.t-split):not(.t-eject):hover { filter: brightness(1.18); }
  body[data-build="production2"] :is(#team-create, .get-coins, .sso.google, .seg label:has(input:checked), .st-series button[aria-selected="true"], .ht-seg button[aria-pressed="true"]):hover { filter: brightness(.9) !important; } /* white buttons dim instead of brighten */
  body[data-build="production2"] .vip-manage:hover { color: var(--ink); }
}
/* quick play: your saved look, one tap */
.quick-play { box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 6px; border: 1px solid #2a2a2f; background: #18181b; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.quick-play img { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.quick-play .qp-who { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.quick-play .qp-who b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-play .qp-who small { font-size: 11px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-play .qp-go { flex: none; height: 32px; padding: 0 14px; display: grid; place-items: center; background: var(--you, #3b82f6); color: #fff; font-weight: 700; font-size: 14px; }
#save-look.saved svg path { fill: currentColor; }
body.play-side #skins > .home-center > #quick-play { height: 46px; }
/* header row: Sign in · Coins · Level always fits inside the card (Coins shrinks first), so no card is ever pushed wider */
body[data-build="production2"] #skins .card.home { grid-template-columns: minmax(0, 1fr); }
body[data-build="production2"].studio-on .profile { grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr) auto !important; }
body[data-build="production2"] .profile .coins { min-width: 0; overflow: hidden; }
body[data-build="production2"] .profile .coins #coins { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-build="production2"] .profile .coins :is(.coin, .get-coins) { flex: none; }
body.is-touch[data-build="production2"].studio-on .profile { column-gap: 6px; }
body.is-touch[data-build="production2"] #skins .card.home { padding-inline: 18px; }
body[data-build="production2"] #skins .card.home { padding-top: 26px; } body.is-touch[data-build="production2"] #skins .card.home { padding-top: 18px; } /* the top row sits as far from the top edge as from the sides */
/* ---- Darker Home and sheets (1.21): off-black card, one step lighter panels, lighter buttons.
   To go back to the lighter greys, delete this block. ---- */
body[data-build="production2"] :is(#skins, .modal) { --paper: #0d0d0f; --field: #0d0d0f; --g-tray: #18181b; --hover: #18181b; }
body[data-build="production2"] :is(#skins, .modal) .card { background: #0d0d0f !important; border-color: #232327 !important; }
body[data-build="production2"] :is(#skins, .modal) :is(.rec, .team-box, .profile .coins, #acct-chip, .st-series, details.settings, .cp-row, .cp-pack, .ht-rules div, .ht-tile) { background: #18181b !important; }
body[data-build="production2"] :is(#skins, .modal) .ghost:not(.admin-chip):not(#team-create) { background: #26262a; }
body[data-build="production2"] :is(#skins, .modal) :is(.st-nav, .st-tool, .st-tools .font-cycle) { background: #26262a !important; }
body.online .offline-only { display: none !important; } /* on the game server: no test switches; Ultra comes from your account */