/* ELIXIR: one token sheet. THE ROYAL LOOK (the original's own language): bright royal-blue panels with a thick navy outline, a
   light lip on top and a dark one below; chunky glossy buttons (yellow to play, blue to look, green to buy); every word in Lilita One,
   white with a navy outline and a drop under it; gold numbers for SOL, magenta only for elixir, blue for you and red for them. The
   duel itself is one opaque canvas in the middle column; nothing here moves for ever, nothing moves under the pointer. */
:root {
  --ol: #0b1c42; --ol2: #10285a;
  --bg0: #0d2a66; --bg1: #123579;
  --pn: #2560cc; --pn-t: #3d8cf2; --pn-b: #2259c2; --pn2: #1d4fae; --pn3: #17428f; --pn4: #113474;
  --rec: rgba(6, 22, 64, 0.42); --rec2: rgba(6, 22, 64, 0.6); --hair: rgba(255, 255, 255, 0.16); --lip: var(--ol);
  --rim: #ffd23f; --rim2: rgba(255, 255, 255, 0.22);
  --ink: #ffffff; --ink2: #dbeaff; --ink3: #a9c8f2; --ink4: #7d9fd6;
  --gold: #ffd23f; --gold-l: #ffe98c; --gold-d: #c87800; --gold-dd: #6b3c00;
  --elixir: #e04cff; --elixir-l: #f7b2ff; --elixir-d: #8e1fb8;
  --blue: #4aa3ff; --blue-l: #a9d4ff; --blue-d: #1b5ec9; --red: #ff5a4f; --red-l: #ffb3ad; --red-d: #b8261d; --green: #62dc3e; --green-l: #b8f79e;
  --f-d: 'Lilita One', 'Signika', system-ui, sans-serif; --f-t: 'Signika', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-m: 'Reddit Mono', ui-monospace, Menlo, monospace;
  --r1: 8px; --r2: 14px; --r3: 18px; --bar: 66px;
  /* the lettering: an outline all round and a drop under it (big and small) */
  --stroke: 2px 0 0 var(--ol), -2px 0 0 var(--ol), 0 2px 0 var(--ol), 0 -2px 0 var(--ol), 1.5px 1.5px 0 var(--ol), -1.5px 1.5px 0 var(--ol), 1.5px -1.5px 0 var(--ol), -1.5px -1.5px 0 var(--ol), 0 3.5px 0 var(--ol);
  --st1: 1.2px 0 0 var(--ol), -1.2px 0 0 var(--ol), 0 1.2px 0 var(--ol), 0 -1.2px 0 var(--ol), 1px 1px 0 var(--ol), -1px 1px 0 var(--ol), 1px -1px 0 var(--ol), -1px -1px 0 var(--ol), 0 2.2px 0 var(--ol);
  /* a panel: the bright blue body, its lips and its outline */
  --panel: linear-gradient(180deg, #4392f4 0%, #2d72dc 46%, #2563cf 100%);
  --panel-sh: inset 0 2px 0 rgba(255, 255, 255, 0.38), inset 0 -3px 0 rgba(0, 20, 70, 0.22), 0 4px 0 var(--ol), 0 10px 22px rgba(0, 10, 40, 0.32);
  --band: linear-gradient(180deg, #5eaaff 0%, #3d8cf0 50%, #3480e8 100%);
  --lattice: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 26px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 26px);
}
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(html, body) { margin: 0; height: 100%; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(input) { font: inherit; }
:where(a) { color: inherit; text-decoration: none; }
:where(h1, h2, h3, p, ol, ul) { margin: 0; }
html { background: var(--bg0); }
body {
  color: var(--ink); font: 600 15px/1.42 var(--f-t); overflow: hidden; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
  background: var(--lattice), radial-gradient(1200px 820px at 50% 42%, rgba(30, 90, 200, 0.12), rgba(9, 28, 72, 0.7) 80%), linear-gradient(180deg, rgba(22, 70, 170, 0.38) 0%, rgba(12, 40, 104, 0.6) 60%, rgba(8, 26, 70, 0.84) 100%), url(/art/ui/backdrop.webp) center 30% / cover no-repeat, #123a86;
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.is-hidden { display: none !important; }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 6px; font: 400 11.5px/1 var(--f-d); letter-spacing: 0.03em; color: var(--ink); text-shadow: none; background: rgba(6, 22, 64, 0.45); border: 1.5px solid rgba(11, 28, 66, 0.7); }
.lbl { font: 400 13px/1 var(--f-d); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink2); text-shadow: var(--st1); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--green); border: 2px solid var(--ol); }

/* ---------------------------------------------------------------- the game frame (landing.css lays the page out round it) */
.frame { position: relative; border-radius: 20px; overflow: hidden; background: #1d4fae; box-shadow: 0 0 0 3px var(--ol), 0 0 0 7px #f2c53d, 0 0 0 10px var(--ol), 0 26px 64px rgba(0, 8, 32, 0.55); }
.frame canvas { display: block; touch-action: none; }
.bubble { position: absolute; left: 50%; transform: translateX(-50%); padding: 8px 13px; border-radius: 12px; background: #fff; color: var(--ol); font: 400 16px/1 var(--f-d); letter-spacing: 0.02em; pointer-events: none; border: 2px solid var(--ol); box-shadow: 0 3px 0 var(--ol); white-space: nowrap; }
#bub-them { top: 9%; } #bub-me { bottom: 22%; }

/* forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font: 400 13px/1 var(--f-d); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink2); text-shadow: var(--st1); }
.field .sub { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ink3); font: 600 12px/1 var(--f-t); text-shadow: none; margin-left: 6px; }
.field input { height: 44px; padding: 0 13px; border-radius: 11px; border: 2.5px solid var(--ol); background: #eef5ff; color: #0f2552; font: 700 16px/1 var(--f-t); outline: none; box-shadow: inset 0 3px 0 rgba(11, 28, 66, 0.14); user-select: text; -webkit-user-select: text; }
.field input::placeholder { color: #7f95bd; }
.field input:focus { border-color: var(--ol); box-shadow: inset 0 3px 0 rgba(11, 28, 66, 0.14), 0 0 0 3px var(--gold); }
#in-addr, #m-addr { font: 600 13px/1 var(--f-m); }

/* ---------------------------------------------------------------- buttons: chunky, glossy, outlined */
.btn { --b-bg: linear-gradient(180deg, #ffe873 0%, #ffd53a 46%, #ffbe1c 54%, #ffaa10 100%); --b-low: #dd8400;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 13px; border: 2.5px solid var(--ol);
  background: var(--b-bg); box-shadow: inset 0 2.5px 0 rgba(255, 255, 255, 0.6), inset 0 -4px 0 var(--b-low), 0 3.5px 0 var(--ol), 0 7px 14px rgba(0, 10, 40, 0.28);
  font: 400 22px/1 var(--f-d); letter-spacing: 0.02em; color: #fff; text-shadow: var(--stroke); white-space: nowrap; transition: transform 0.06s, filter 0.12s; }
.btn > span { padding-bottom: 1px; }
.btn:active { transform: translateY(2px); box-shadow: inset 0 2.5px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 var(--b-low), 0 1.5px 0 var(--ol); }
.btn:hover { filter: brightness(1.06); }
.btn.gold { --b-bg: linear-gradient(180deg, #ffe873 0%, #ffd53a 46%, #ffbe1c 54%, #ffaa10 100%); --b-low: #dd8400; }
.btn.blue { --b-bg: linear-gradient(180deg, #8dd0ff 0%, #5aafff 46%, #3e94f6 54%, #2f80ea 100%); --b-low: #1c62c9; }
.btn.green { --b-bg: linear-gradient(180deg, #b6f77a 0%, #7fe04a 46%, #5ccc2c 54%, #46b81e 100%); --b-low: #2e8f12; }
.btn.ghost { --b-bg: linear-gradient(180deg, #7ea7e6 0%, #5c86cc 46%, #4f78c0 54%, #4670b6 100%); --b-low: #34599a; font-size: 17px; }
.btn.small { height: 36px; padding: 0 13px; border-radius: 11px; font-size: 16px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 0 var(--b-low), 0 3px 0 var(--ol); }
.btn.big { height: 60px; font-size: 31px; }
.btn kbd { color: rgba(255, 255, 255, 0.92); background: rgba(11, 28, 66, 0.22); border-color: rgba(11, 28, 66, 0.35); }
.btn:disabled { --b-bg: linear-gradient(180deg, #d2d9e4 0%, #aeb8c9 48%, #9ea9bd 52%, #919db3 100%); --b-low: #74829b; cursor: default; transform: none; filter: none; }
.acct-line { font-size: 13px; color: var(--ink3); text-align: center; }
.acct-line .lnk { font-size: 13px; padding: 2px 3px; color: var(--ink2); }

/* lists in the game (boards, lobbies) */
.tabs { display: flex; gap: 5px; }
.tab { font: 400 14px/1 var(--f-d); letter-spacing: 0.02em; color: var(--ink2); text-shadow: var(--st1); padding: 8px 11px 9px; border-radius: 10px; background: var(--rec); border: 2px solid rgba(11, 28, 66, 0.55); }
.tab.is-on { color: #fff; background: linear-gradient(180deg, #ffe873, #ffbe1c 60%, #ffaa10); border-color: var(--ol); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 2px 0 var(--ol); }
.rows { display: flex; flex-direction: column; gap: 6px; }
.empty { color: var(--ink2); font-size: 13.5px; padding: 4px 2px; text-shadow: 0 1px 0 rgba(0, 10, 40, 0.45); }
.duel-only { display: none; }
.kb { display: inline-flex; align-items: center; }

/* in a duel: the emotes, not the lobby and the feed */
body.is-duel #p-lobby, body.is-duel #p-feed { display: none; }
body.is-duel .duel-only { display: block; }
body.is-home .duel-only, body.is-watch .duel-only { display: none; }

/* ---------------------------------------------------------------- sheets: the original's popups (a title band, a blue body) */
.veil { position: fixed; inset: 0; background: rgba(4, 14, 40, 0.62); z-index: 30; }
.sheet { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 31; width: min(450px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; padding: 22px 22px 20px; border-radius: var(--r3);
  background: linear-gradient(180deg, #2f6fda 0%, #2560cc 40%, #1f55bb 100%); border: 3px solid var(--ol); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 6px 0 var(--ol), 0 30px 80px rgba(0, 8, 30, 0.6);
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; scrollbar-width: thin; scrollbar-color: #0f3070 transparent; }
.sheet.wide { width: min(780px, calc(100vw - 24px)); }
.sh-title { font: 400 30px/1.05 var(--f-d); letter-spacing: 0.02em; text-shadow: var(--stroke); padding-bottom: 3px; }
.sheet > .sh-title:first-child { align-self: stretch; margin: -22px -22px 4px; padding: 14px 16px 13px; background: var(--band); border-bottom: 3px solid var(--ol); border-radius: 15px 15px 0 0; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45); }
.sh-big { font: 400 62px/1 var(--f-d); letter-spacing: 0.02em; text-shadow: var(--stroke), 0 6px 0 var(--ol); padding-bottom: 6px; }
.sh-big.win { color: var(--gold); } .sh-big.loss { color: #ff8f86; } .sh-big.draw { color: var(--ink2); } .sh-big.gold { color: var(--gold); font-size: 52px; }
.sh-kicker { font: 400 15px/1 var(--f-d); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); text-shadow: var(--st1); }
.sh-sub { color: var(--ink); font-size: 15px; text-shadow: 0 1px 0 rgba(0, 10, 40, 0.5); }
.sh-note { color: var(--ink2); font-size: 13.5px; min-height: 18px; text-shadow: 0 1px 0 rgba(0, 10, 40, 0.5); }
.sh-err { color: #ffd0cc; font-size: 13.5px; min-height: 18px; text-shadow: 0 1px 0 rgba(0, 10, 40, 0.5); }
.sh-foot { color: var(--ink3); font-size: 12px; }
.sh-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.sh-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.sheet .field { width: 100%; text-align: left; }
.crowns { display: flex; gap: 10px; justify-content: center; }
.crowns canvas { width: 60px; height: 51px; }
.end-run { width: 100%; padding: 12px 14px; border-radius: var(--r2); background: var(--rec); border: 2px solid rgba(11, 28, 66, 0.5); box-shadow: inset 0 2px 4px rgba(0, 10, 40, 0.28); display: flex; flex-direction: column; gap: 8px; }
.end-run:empty { display: none; }
.end-run .er { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14.5px; color: var(--ink); }
.end-run .er b { font: 400 17px/1.15 var(--f-d); color: #fff; text-shadow: var(--st1); font-variant-numeric: tabular-nums; }
.end-run .er b.g { color: var(--gold); font-size: 23px; text-shadow: var(--stroke); }
.steps { display: flex; gap: 6px; padding: 0; list-style: none; }
.steps li { padding: 8px 12px; border-radius: 10px; background: var(--rec); border: 2px solid rgba(11, 28, 66, 0.5); color: var(--ink3); font: 400 13.5px/1 var(--f-d); letter-spacing: 0.02em; }
.steps li.is-on { color: #fff; text-shadow: var(--st1); border-color: var(--ol); background: linear-gradient(180deg, #ffe873, #ffbe1c 60%, #ffaa10); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55); }
.spin { width: 60px; height: 60px; border-radius: 50%; border: 6px solid rgba(6, 22, 64, 0.45); border-top-color: var(--gold); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.how { text-align: left; display: flex; flex-direction: column; gap: 9px; padding: 0; list-style: none; counter-reset: how; color: var(--ink); font-size: 14.5px; }
.how li { position: relative; padding: 10px 12px 10px 46px; border-radius: 12px; background: var(--rec); text-shadow: 0 1px 0 rgba(0, 10, 40, 0.45); }
.how li::before { counter-increment: how; content: counter(how); position: absolute; left: 11px; top: 9px; width: 25px; height: 25px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font: 400 15px/1 var(--f-d); color: #fff; text-shadow: var(--st1); border: 2px solid var(--ol); background: linear-gradient(180deg, #ffe873, #ffb81a); }
.how b { color: var(--gold-l); font-weight: 700; }
.prof { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.prof div { padding: 10px 8px; border-radius: 12px; background: var(--rec); border: 2px solid rgba(11, 28, 66, 0.45); display: flex; flex-direction: column; gap: 6px; }
.prof b { font: 400 20px/1 var(--f-d); color: #fff; text-shadow: var(--st1); }
.prof span { font: 400 11.5px/1 var(--f-d); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink3); }

.toast { position: fixed; left: 50%; top: calc(var(--bar) + 14px); transform: translateX(-50%); z-index: 40; padding: 12px 18px; border-radius: 13px; background: linear-gradient(180deg, #17408f, #0f2f70); border: 2.5px solid var(--ol); color: #fff; font: 400 16px/1.25 var(--f-d); letter-spacing: 0.01em; text-shadow: var(--st1); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 4px 0 var(--ol), 0 12px 30px rgba(0, 8, 30, 0.5); max-width: calc(100vw - 24px); text-align: center; }
.toast.err { background: linear-gradient(180deg, #e2453b, #b8261d); }
.banner { position: fixed; left: 50%; top: calc(var(--bar) + 12px); transform: translateX(-50%); z-index: 25; padding: 9px 15px; border-radius: 12px; background: rgba(8, 26, 70, 0.92); border: 2.5px solid var(--ol); font: 400 15px/1.2 var(--f-d); color: #fff; text-shadow: var(--st1); }

/* ---------------------------------------------------------------- narrower desktops: no right column */
@media (max-width: 1240px) {
  .stage { grid-template-columns: minmax(280px, 380px) auto; }
  .col-r { display: none; }
}
/* ---------------------------------------------------------------- phones: the game fills the screen */
@media (max-width: 900px), (pointer: coarse) and (orientation: portrait) {
  .frame { border-radius: 0; box-shadow: none; }
  body.is-duel .emote-fab { display: flex; }
  .sh-big { font-size: 48px; }
  .sheet { padding: 18px 16px 16px; }
  .sheet > .sh-title:first-child { margin: -18px -16px 4px; }
}
/* the emote button in the duel frame (phones: the desktop has the emote panel) */
.emote-fab { display: none; position: absolute; left: 10px; top: 52%; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(180deg, #8dd0ff, #3e94f6); border: 2.5px solid var(--ol); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 3px 0 var(--ol); align-items: center; justify-content: center; }
.emote-fab canvas { width: 36px; height: 36px; }
.emote-pop { position: absolute; left: 66px; top: calc(52% - 70px); display: grid; grid-template-columns: repeat(4, 50px); gap: 6px; padding: 8px; border-radius: 15px; background: linear-gradient(180deg, #2f6fda, #1f55bb); border: 3px solid var(--ol); box-shadow: 0 4px 0 var(--ol); }
.emote-pop button { width: 50px; height: 50px; border-radius: 12px; background: var(--rec); display: flex; align-items: center; justify-content: center; }
.emote-pop button:disabled { opacity: 0.35; }
.emote-pop canvas { width: 40px; height: 40px; }
#b-edone { font-size: 15px; color: var(--ink2); }