:root {
  color-scheme: dark;
  --bg: #071015;
  --panel: rgba(9, 16, 19, .78);
  --panel-strong: rgba(0, 0, 0, .48);
  --line: rgba(255, 255, 255, .16);
  --text: #f7f2dd;
  --muted: #b7c5c0;
  --gold: #f2c94c;
  --cyan: #77d7da;
  --green: #78c477;
  --red: #dc6b5d;
  --blue: #367fa2;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: Tahoma, "Segoe UI", Arial, sans-serif;
  background: linear-gradient(180deg, #000308 0%, #032f38 50%, #0f1312 100%);
  color: var(--text);
}
button, input { font: inherit; }
button { cursor: pointer; }

.app {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 14px;
}

.client {
  width: min(100%, 1000px);
  min-height: 650px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(3, 10, 13, .62);
  box-shadow: 0 24px 80px rgba(0,0,0,.44);
  overflow: hidden;
}

.info-bar {
  height: 29px;
  display: grid;
  grid-template-columns: auto auto minmax(180px, 1fr) minmax(180px, 1fr) auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 2px 10px;
  background: linear-gradient(180deg, #021d26 0%, #286871 100%);
  border-bottom: 1px solid rgba(255,255,255,.2);
  font-size: 13px;
}

.profile-link,
.city-link,
.money,
.auth-action {
  border: 0;
  background: transparent;
  color: #fff;
  padding: 2px 0;
  text-decoration: underline;
}
.profile-link strong { color: var(--cyan); margin-left: 3px; }
.city-link { text-decoration: none; }
.money { color: var(--gold); white-space: nowrap; }
.auth-action { color: #ffffcc; white-space: nowrap; }
.round-time { color: var(--gold); font-variant-numeric: tabular-nums; min-width: 48px; text-align: center; }

.meter {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 5px;
  align-items: center;
  min-width: 0;
}
.meter span { color: #fff; font-size: 12px; white-space: nowrap; }
.meter i {
  height: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(90deg, var(--gold) var(--value), rgba(255,255,255,.12) var(--value));
}
.meter b { font-size: 11px; color: #fff; font-weight: 400; white-space: nowrap; }

.scene {
  position: relative;
  height: 430px;
  overflow: hidden;
  background: radial-gradient(circle at 30% 30%, rgba(89, 187, 190, .14), transparent 210px), rgba(0,0,0,.18);
}

.home-scene {
  height: 100%;
  position: relative;
  padding: 14px;
}
.home-jackpot, .home-links, .home-nav, .race-menu, .home-actions { position: absolute; z-index: 2; }
.home-jackpot { left: 16px; top: 10px; color: var(--gold); font-size: 16px; font-style: italic; }
.home-links { right: 10px; bottom: 18px; display: grid; gap: 5px; text-align: right; }
.link-button {
  border: 0;
  background: transparent;
  color: #ffffcc;
  text-decoration: underline;
  padding: 0;
  font-size: 12px;
}
.home-nav { left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 8px; }
.home-actions { right: 20px; top: 96px; display: grid; gap: 6px; }
.race-menu { right: 76px; top: 148px; display: flex; gap: 3px; }
.icon-button, .nav-button {
  width: 58px;
  height: 52px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  background: linear-gradient(180deg, rgba(65,111,120,.92), rgba(12,40,47,.92));
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 4px 10px rgba(0,0,0,.25);
  font-size: 22px;
}
.nav-button { width: 50px; height: 48px; font-size: 19px; }
.icon-button:hover, .nav-button:hover { border-color: var(--gold); color: var(--gold); }
.hero-mouse {
  position: absolute;
  left: 190px;
  top: 180px;
  width: 92px;
  image-rendering: auto;
  filter: drop-shadow(0 14px 12px rgba(0,0,0,.35));
}
.hero-pet {
  position: absolute;
  left: 286px;
  top: 202px;
  width: 54px;
  height: 42px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 35% 28%, #fff4bd 0 8px, #d79d4c 9px 100%);
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
}

.panel-screen {
  height: 100%;
  margin: 20px 50px;
  padding: 14px 18px;
  border-radius: 8px;
  background: rgba(0,0,0,.52);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
}
.panel-screen h1 {
  margin: 0;
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-style: italic;
  letter-spacing: 0;
}
.tabs { display: flex; justify-content: center; gap: 0; flex-wrap: wrap; }
.tabs button {
  min-height: 28px;
  border: 1px solid var(--line);
  background: #1d3b43;
  color: #fff;
  padding: 4px 10px;
}
.tabs button.selected { background: #4c7f88; color: var(--gold); }
.grid-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; overflow: auto; padding-right: 4px; }
.item-card, .row-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  padding: 9px;
  min-height: 76px;
}
.item-card strong, .row-card strong { color: var(--gold); display: block; margin-bottom: 4px; }
.item-card p, .row-card p { margin: 0; color: var(--muted); font-size: 12px; }
.panel-footer { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.game-button {
  min-height: 31px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #416f78, #102c34);
  color: #fff;
  padding: 5px 14px;
}

.game-wrap { height: 100%; position: relative; background: #071015; }
.game-hud {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  display: flex;
  gap: 8px;
}
.game-hud span, .game-hud button {
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 8px;
  background: rgba(0,0,0,.48);
  color: #fff;
  padding: 6px 9px;
}
canvas { display: block; width: 100%; height: 100%; outline: none; }
canvas:focus-visible { box-shadow: inset 0 0 0 3px rgba(242,201,76,.48); }

.chat-shell {
  height: 250px;
  display: grid;
  grid-template-columns: 210px 1fr 150px;
  gap: 4px;
  padding: 4px;
  background: rgba(68,78,79,.5);
  border-top: 1px solid rgba(255,255,255,.18);
}
.online, .finish-panel, .chat-main {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.24);
}
.online { padding: 4px; overflow: auto; }
.online-title { color: var(--gold); font-size: 12px; margin-bottom: 5px; text-align: center; }
.user {
  width: 100%;
  display: block;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  text-align: left;
  padding: 5px 6px;
  font-size: 12px;
}
.user:hover, .user.active { background: rgba(119,215,218,.16); }
.chat-main { display: grid; grid-template-rows: 25px 1fr 28px; }
.room-tabs { display: flex; align-items: end; gap: 2px; padding-left: 4px; }
.room-tabs button {
  min-height: 22px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: #1d3b43;
  color: #fff;
  padding: 2px 10px;
  font-size: 12px;
}
.room-tabs button.selected { background: #4c7f88; color: var(--gold); }
.chat-log { overflow: auto; padding: 7px 8px; color: #fff; font-size: 13px; line-height: 1.35; background: rgba(0,0,0,.22); }
.chat-log p { margin: 0 0 5px; }
.chat-log b { color: var(--cyan); }
.chat-log .system { color: var(--gold); font-style: italic; }
.chat-form { display: grid; grid-template-columns: 1fr 28px auto; gap: 4px; padding: 3px; }
.chat-form input {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,.9);
  color: #152023;
  padding: 4px 7px;
}
.chat-form button {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #24464f;
  color: #fff;
  padding: 2px 8px;
}
.finish-panel { padding: 5px; color: var(--muted); font-size: 12px; overflow: auto; }
.finish-panel p { margin: 0 0 5px; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.56);
  padding: 16px;
}
.modal {
  width: min(100%, 440px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101a1f;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
  padding: 18px;
  position: relative;
}
.modal h2 { margin: 0 34px 12px 0; color: var(--gold); }
.modal p { color: var(--muted); }
.modal-close {
  position: absolute;
  right: 10px;
  top: 8px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 28px;
}

@media (max-width: 720px) {
  .app { padding: 4px; place-items: start center; }
  .client { min-height: 0; }
  .info-bar { height: auto; grid-template-columns: 1fr 1fr; padding: 6px; }
  .scene { height: min(380px, 54vw); min-height: 300px; }
  .chat-shell { grid-template-columns: 110px 1fr; height: 250px; }
  .finish-panel { display: none; }
  .home-nav { width: 100%; justify-content: center; flex-wrap: wrap; }
  .panel-screen { margin: 10px; }
  .grid-list { grid-template-columns: 1fr 1fr; }
}

.auth-form { display: grid; gap: 10px; }
.auth-form label { display: grid; gap: 4px; color: var(--muted); font-size: 13px; }
.auth-form input { min-height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; background: rgba(255,255,255,.92); color: #152023; }
.auth-form .form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.auth-error { min-height: 18px; color: var(--red); font-size: 13px; }
.auth-note { color: var(--muted); font-size: 13px; }

.modal-backdrop[hidden] { display: none; }

/* Brighter home tribute, closer to the remembered Flash lobby. */
.tribute-home {
  overflow: hidden;
  background:
    linear-gradient(180deg, #efa650 0 36%, transparent 36%),
    linear-gradient(180deg, #62d0e9 36%, #bff4ff 70%, #71d84e 100%);
}
.tribute-home::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 7% 23%, rgba(139, 84, 58, .36) 0 5px, transparent 6px),
    radial-gradient(circle at 9% 19%, rgba(139, 84, 58, .32) 0 3px, transparent 4px),
    radial-gradient(circle at 11% 22%, rgba(139, 84, 58, .32) 0 3px, transparent 4px),
    radial-gradient(circle at 25% 18%, rgba(139, 84, 58, .28) 0 5px, transparent 6px),
    radial-gradient(circle at 72% 18%, rgba(139, 84, 58, .28) 0 5px, transparent 6px),
    radial-gradient(circle at 88% 24%, rgba(139, 84, 58, .28) 0 5px, transparent 6px);
  opacity: .95;
  pointer-events: none;
}
.paw-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 36%;
  border-bottom: 3px solid rgba(125, 74, 38, .32);
}
.brand-logo {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 4;
  width: 420px;
  text-align: center;
  filter: drop-shadow(0 4px 0 rgba(86, 40, 29, .45));
}
.brand-small {
  display: block;
  margin-bottom: -10px;
  color: #68255c;
  font-size: 38px;
  font-weight: 900;
  line-height: .85;
  text-transform: uppercase;
}
.brand-big {
  display: block;
  color: #f5d64c;
  -webkit-text-stroke: 2px #6d3b24;
  font-size: 96px;
  font-weight: 900;
  line-height: .85;
  letter-spacing: 0;
}
.run-plank {
  position: absolute;
  left: 50%;
  top: 188px;
  transform: translateX(-50%);
  z-index: 6;
  min-width: 230px;
  min-height: 64px;
  border: 3px solid #387718;
  border-radius: 12px;
  color: #fff;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 5px, transparent 5px 13px),
    linear-gradient(180deg, #82dc3e, #319318);
  box-shadow: inset 0 3px rgba(255,255,255,.35), 0 6px 0 #225f13, 0 13px 18px rgba(0,0,0,.2);
  font-size: 31px;
  font-weight: 900;
  text-shadow: 0 2px 0 #24600e;
}
.home-jackpot {
  z-index: 8;
  left: 22px;
  top: 18px;
  color: #fff2a6;
  text-shadow: 0 2px 0 rgba(94, 57, 24, .45);
}
.cloud {
  position: absolute;
  z-index: 2;
  width: 132px;
  height: 42px;
  border-radius: 999px;
  background: #fff;
  opacity: .9;
  box-shadow: 28px -18px 0 8px #fff, 68px -4px 0 14px #fff, 110px 4px 0 -2px #fff;
}
.cloud-left { left: -42px; top: 210px; }
.cloud-right { right: 60px; top: 210px; }
.hill {
  position: absolute;
  z-index: 1;
  left: 315px;
  right: 315px;
  bottom: -72px;
  height: 214px;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, #7feb50, #22bd32 58%, #16a926);
  box-shadow: inset 0 12px rgba(255,255,255,.18);
}
.forest {
  position: absolute;
  z-index: 3;
  bottom: 12px;
  width: 190px;
  height: 104px;
  background:
    linear-gradient(135deg, transparent 42%, #23b642 43% 58%, transparent 59%) 0 18px / 44px 55px repeat-x,
    linear-gradient(135deg, transparent 42%, #38d754 43% 58%, transparent 59%) 10px 0 / 48px 65px repeat-x;
}
.forest-left { left: 30px; }
.forest-right { right: 30px; }
.tribute-home .hero-mouse {
  z-index: 5;
  left: 50%;
  top: 278px;
  width: 88px;
  transform: translateX(-50%);
  filter: drop-shadow(0 9px 7px rgba(55, 90, 55, .32));
}
.tribute-home .hero-pet {
  z-index: 5;
  left: calc(50% + 74px);
  top: 302px;
}
.tribute-home .home-nav {
  z-index: 7;
  bottom: 18px;
  gap: 16px;
}
.tribute-home .nav-button {
  width: 76px;
  height: 76px;
  border-width: 3px;
  border-radius: 50%;
  font-size: 32px;
  background: linear-gradient(180deg, #778197, #31405f);
  box-shadow: inset 0 4px rgba(255,255,255,.28), 0 5px 0 rgba(45, 36, 65, .62), 0 9px 14px rgba(0,0,0,.25);
}
.tribute-home .nav-button.shop { background: linear-gradient(180deg, #ef5353, #9f2525); }
.tribute-home .nav-button.bag { background: linear-gradient(180deg, #ee50d2, #9e2e9c); }
.tribute-home .nav-button.top { background: linear-gradient(180deg, #846cff, #4f36b6); }
.tribute-home .nav-button.clan { background: linear-gradient(180deg, #20d3d0, #078b91); }
.tribute-home .nav-button.crown { background: linear-gradient(180deg, #36ce3d, #13812a); }
.tribute-home .nav-button.heart { background: linear-gradient(180deg, #8191a9, #41516a); }
.tribute-home .home-links {
  z-index: 9;
  right: 20px;
  bottom: 72px;
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
}
.tribute-home .link-button { color: #ffffff; font-weight: 700; }
.tribute-home .home-actions {
  z-index: 8;
  display: grid;
  right: 28px;
  top: 98px;
  gap: 7px;
}
.tribute-home .race-menu {
  position: static;
  display: flex;
  gap: 6px;
  transform: translateX(-74px);
}
.tribute-home .icon-button {
  width: 68px;
  height: 64px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.42);
  color: #fff;
  background: linear-gradient(180deg, #5a9bad, #164454);
  box-shadow: inset 0 3px rgba(255,255,255,.22), 0 4px 9px rgba(0,0,0,.25);
  font-size: 30px;
  font-weight: 900;
}
.tribute-home .icon-button:hover,
.tribute-home .nav-button:hover,
.run-plank:hover {
  filter: brightness(1.12);
}
.logo-mouse {
  position: absolute;
  top: 2px;
  width: 78px;
  height: 112px;
  border-radius: 45% 45% 42% 42%;
  background: #5b4131;
  border: 3px solid #513326;
  box-shadow: inset -10px -12px rgba(0,0,0,.12);
}
.logo-mouse::before,
.logo-mouse::after {
  content: "";
  position: absolute;
}
.logo-mouse::before {
  width: 25px;
  height: 25px;
  left: 20px;
  top: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 55% 54%, #fff 0 2px, transparent 3px),
    #111;
  box-shadow: 24px 0 0 #111;
}
.logo-mouse::after {
  left: -16px;
  right: -16px;
  top: -20px;
  height: 38px;
  background:
    radial-gradient(circle at 20px 25px, #ed9aa0 0 12px, #5b4131 13px 22px, transparent 23px),
    radial-gradient(circle at calc(100% - 20px) 25px, #ed9aa0 0 12px, #5b4131 13px 22px, transparent 23px);
}
.logo-mouse-left { left: -54px; }
.logo-mouse-right {
  right: -54px;
  background: #f6e7bd;
  border-color: #ab7a49;
}
.logo-mouse-right::before {
  background:
    radial-gradient(circle at 55% 54%, #fff 0 2px, transparent 3px),
    #222;
  box-shadow: 24px 0 0 #222;
}
.logo-mouse-right::after {
  background:
    radial-gradient(circle at 20px 25px, #ef9aa2 0 12px, #f6e7bd 13px 22px, transparent 23px),
    radial-gradient(circle at calc(100% - 20px) 25px, #ef9aa2 0 12px, #f6e7bd 13px 22px, transparent 23px);
}