/* Neon look in the style of the logo (branding/logo-source.jpg): deep navy, electric blue glow,
   chrome lettering. Loaded right after style.css and overrides it. */
:root {
  --bg: #050a18;
  --card: #0b1530;
  --card2: #11204a;
  --line: #1c3672;
  --text: #eaf2ff;
  --muted: #8ea3cc;
  --green: #3a9bff; /* the accent: neon blue */
  --gold: #ffd257;  /* money stays gold */
  --red: #ff4d7a;
  --blue: #2f7bff;
  --cyan: #4fd2ff;
  --glow: rgba(47, 123, 255, .45);
  /* game canvas (client.js reads these) */
  --arena-bg: #040917;
  --arena-grid: rgba(64, 140, 255, .085);
  --arena-edge: #ff3d9a;
  --arena-out: rgba(255, 61, 154, .07);
  --me: #4fd2ff;
  --skin-classic: #4fb4ff, #1f4fd6; /* the default snake is blue like the logo */
}
html, body { background: var(--bg); }
.screen {
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(47, 123, 255, .28), transparent 62%),
    radial-gradient(700px 400px at 100% 40%, rgba(160, 60, 255, .10), transparent 60%),
    rgba(4, 9, 23, .86);
}

/* header: the logo picture + chrome / neon lettering */
.logo { font-family: 'Russo One', Rubik, sans-serif; font-weight: 400; letter-spacing: .5px; color: transparent; text-shadow: none;
  background: linear-gradient(180deg, #fff 0%, #d6deea 42%, #7c8aa3 52%, #cbd5e4 64%, #f4f7fb 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 8px rgba(47, 123, 255, .65)); }
.logo span { margin-left: 7px; color: transparent; text-shadow: none; background: linear-gradient(180deg, #bfe6ff, #4fb4ff 55%, #1f6bff); -webkit-background-clip: text; background-clip: text; }
.logo img { width: 38px; height: 38px; margin: -4px 4px -4px -4px; border-radius: 0; box-shadow: none; filter: drop-shadow(0 0 6px rgba(47, 123, 255, .8)); }

/* cards and lines get a soft blue rim */
.card, .room, .skin, .feed, .prof-btn, .adm-btn, .sd {
  background: linear-gradient(180deg, rgba(17, 32, 74, .92), rgba(9, 18, 42, .92));
  border-color: rgba(58, 155, 255, .28);
  box-shadow: inset 0 1px 0 rgba(140, 200, 255, .08);
}
.hero { border: 1px solid rgba(58, 155, 255, .45); box-shadow: 0 0 24px rgba(47, 123, 255, .25); }
.label { color: #9fb6e0; }
.big, .hud-value, .room.paid .t { text-shadow: 0 0 14px rgba(255, 210, 87, .35); }

/* buttons */
.btn { background: var(--card2); border: 1px solid rgba(58, 155, 255, .22); }
.btn.ghost { background: rgba(10, 20, 48, .6); border-color: rgba(58, 155, 255, .4); }
.btn.green { background: linear-gradient(180deg, #4fb4ff, #1f6bff); color: #fff; border: 0; box-shadow: 0 6px 22px var(--glow); text-shadow: 0 1px 2px rgba(0, 20, 80, .5); }
.btn.gold { background: linear-gradient(180deg, #ffe08a, #f5b62a); color: #2a1a00; border: 0; box-shadow: 0 6px 20px rgba(255, 196, 61, .3); }
.play { font-family: 'Russo One', Rubik, sans-serif; font-weight: 400; letter-spacing: 3px; color: #fff; text-shadow: 0 0 12px rgba(160, 220, 255, .9);
  background: linear-gradient(180deg, #4fb4ff 0%, #2f7bff 55%, #1747d6 100%); border: 1px solid #8fd0ff;
  box-shadow: 0 0 0 3px rgba(47, 123, 255, .25), 0 10px 34px rgba(47, 123, 255, .55); }
.chips button { border: 1px solid rgba(58, 155, 255, .2); }
.chips button.on, .adm-tabs button.on { background: linear-gradient(180deg, #4fb4ff, #1f6bff); color: #fff; border-color: #4fb4ff; box-shadow: 0 0 12px var(--glow); }
.room.sel, .skin.sel { border-color: #4fb4ff; box-shadow: 0 0 0 3px rgba(47, 123, 255, .22), 0 0 22px rgba(47, 123, 255, .35); }
.ava { color: #fff; background: linear-gradient(135deg, #4fd2ff, #1f6bff); box-shadow: 0 0 10px var(--glow); }
.bar i { background: linear-gradient(90deg, #4fd2ff, #2f7bff); box-shadow: 0 0 8px var(--glow); }
.input { background: #060d22; border-color: rgba(58, 155, 255, .35); }
.input:focus { outline: none; border-color: #4fb4ff; box-shadow: 0 0 0 3px rgba(47, 123, 255, .25); }
.pos, .line b.pos, .skin .p.own { color: #3dff9a; } /* profit stays green */

/* sheets, toast */
.modal { background: rgba(2, 5, 14, .72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.sheet { background: linear-gradient(180deg, #0f1d44, #081230); border-top: 1px solid rgba(79, 180, 255, .5); box-shadow: 0 -10px 40px rgba(47, 123, 255, .25); }
.sheet h2 { font-family: 'Russo One', Rubik, sans-serif; font-weight: 400; letter-spacing: .3px; }
.toast { background: #0f1d44; border-color: rgba(79, 180, 255, .5); box-shadow: 0 6px 24px rgba(0, 0, 0, .5), 0 0 16px rgba(47, 123, 255, .3); }

/* in-game HUD */
.hud-tr, .invite { background: rgba(6, 14, 36, .62); border: 1px solid rgba(58, 155, 255, .3); }
#lb li.me { color: var(--cyan); }
.boost { background: rgba(47, 123, 255, .22); border-color: #4fb4ff; box-shadow: 0 0 18px var(--glow); }
.boost.on { background: rgba(47, 123, 255, .6); }
.cashout { background: linear-gradient(180deg, #ffe08a, #f5b62a); box-shadow: 0 6px 22px rgba(255, 196, 61, .35); }
#minimap { filter: drop-shadow(0 0 6px rgba(47, 123, 255, .5)); }

/* the shop collection row under the achievements: the same gap above it as below it (the next h3) */
.achs + .kv { margin-top: 20px; }
/* short values in key–value rows stay on one line ("0 ₽", "0/6") and the label wraps instead;
   a long value takes up to 60% of the row and wraps inside it */
.kv div > b { flex: 0 0 auto; max-width: 60%; text-align: right; }

/* coin choice in the deposit / withdrawal windows */
.coins.pick button { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); color: #b9c4d0; cursor: pointer; }
.coins.pick button.on { border-color: var(--accent, #4fb4ff); background: rgba(79, 180, 255, 0.18); color: #fff; }
.coin-hint { min-height: 1.2em; margin: -4px 0 10px; font-size: 13px; }
/* admin: coin checkboxes */
.coin-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.coin-pick label { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }

/* quick emotes: a small button above ⚡, the row opens to its left */
.hud-btn.emote { right: 26px; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 88px); width: 52px; height: 52px; border-radius: 50%; font-size: 24px; background: rgba(10, 18, 48, .7); border: 1px solid var(--line); }
@media (hover: hover) and (pointer: fine) { .hud-btn.emote { bottom: max(18px, env(safe-area-inset-bottom)); } }
.emote-row { position: absolute; pointer-events: auto; right: 86px; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 88px); display: flex; gap: 6px; padding: 6px; border-radius: 16px; background: rgba(10, 18, 48, .85); border: 1px solid var(--line); }
@media (hover: hover) and (pointer: fine) { .emote-row { bottom: max(18px, env(safe-area-inset-bottom)); } }
.emote-row button { font-size: 24px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.emote-row button:active { background: rgba(79, 180, 255, .25); }
/* first-game hints */
/* first-game hints: a small card on the left under the minimap — off the snake and the leaderboard */
.tut-hint { position: absolute; left: 12px; top: calc(env(safe-area-inset-top, 0px) + 230px); max-width: min(220px, calc(100% - 120px)); padding: 9px 11px; border-radius: 12px; background: rgba(10, 18, 48, .82); border: 1px solid rgba(79, 180, 255, .6); color: #eaf2ff; font-size: 13px; line-height: 1.3; text-align: left; pointer-events: auto; }
.tut-hint small { display: block; margin-top: 4px; color: #8fa6cf; font-size: 11px; }
/* the player's ping under the kill counter */
.hud-ping { font-size: 12px; font-weight: 700; margin-top: 2px; color: #7ee2a8; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.hud-ping.mid { color: #ffd257; }
.hud-ping.bad { color: #ff6b81; }

/* profile: history behind three buttons */
.hist-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hist-btns .btn { padding: 12px 6px; font-size: 13px; line-height: 1.25; }
.hist-btns small { display: block; color: var(--muted); font-weight: 600; margin-top: 2px; }
.hist-list { max-height: 60vh; overflow-y: auto; }