/* Robinhood Chain palette: Black / White / Robin Neon (#CCFF00).
   Source: https://docs.robinhood.com/chain/brand-guidelines/
   Neutral surface shades are specific to 5x5. Player colors and treasure gold
   remain semantic game colors; the protocol retains its own identity. */
:root {
  --rh-black: #000000;
  --rh-white: #ffffff;
  --rh-neon: #ccff00;
  --surface: #10130e;
  --surface-raised: #191f14;
  --surface-selected: #27351a;
  --text-primary: #f6f8f1;
  --text-secondary: #aab69e;
  --border: #303a26;
  --paper: var(--rh-black);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: #262d20;
  --panel: #10150c;
  color-scheme: dark;
}

body { background: var(--rh-black); color: var(--text-primary); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline-color: var(--rh-neon);
}
::selection { background: var(--rh-neon); color: var(--rh-black); }
.header { background: var(--rh-black); border-color: var(--line); }
.brand, .brand-caption { color: var(--rh-white); }
.brand-mark i, .nav-dot { background: var(--rh-neon); }
.nav-link { color: var(--text-secondary); }
.nav-link:hover { color: var(--rh-white); background: var(--surface-raised); }
.nav-link.active { color: var(--rh-neon); background: #1b250d; }
.network-label { color: #dce6d2; font-weight: 500; }
.network-dot { width: 7px; height: 7px; background: var(--rh-neon); border-radius: 50%; }
.wallet-button { background: var(--rh-neon); color: var(--rh-black); }
.wallet-button:hover { background: #ddff57; box-shadow: 0 0 18px #ccff001a; }
.eyebrow { color: #bbc9a8; }
.tiny-cross, h1 > span { color: var(--rh-neon); }
.eyebrow-line { background: #435333; }
.intro p { color: var(--text-secondary); }
.preview-stamp { background: #101809; border-color: #3a4c22; }
.preview-stamp strong { color: #cfebaa; }
.preview-stamp div > span, .stamp-code { color: #a2b68b; }
.status-dot { background: var(--rh-neon); }

/* Dark frame around a warm sand playing field. */
.arena { border-color: #35402a; box-shadow: 0 12px 45px #00000080; }
.play-area { background: #11170c; }
.board-topline { background: #141a0f; border-color: #2d3723; }
.board-name { color: #dee9d0; }
.board-name > .icon, .board-name > span { color: #98ad7f; }
.stage-badge { color: var(--rh-neon); background: #263610; border-color: #465d27; }
.stage-badge > span { background: var(--rh-neon); }
.board-scene {
  background-color: #1a2113;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='650' height='620' viewBox='0 0 650 620'%3E%3Cg stroke='%23ccff00' stroke-width='1' fill='none' opacity='.07'%3E%3Cpath d='M-40 430C50 360-30 310 60 300s130 140 230 20 140-100 180-200S630 60 700-80M-40 446C50 376-15 326 70 316s124 140 220 20 149-100 187-200S642 75 718-68M-40 462C60 392-5 342 80 332s116 143 210 20 158-96 194-200S650 93 730-56M-40 478C70 408 5 358 90 348s105 150 200 20 170-91 204-200S670 110 740-44M-40 494C90 426 15 374 100 364s95 157 190 20 180-84 214-200S690 130 760-32M-40 510C110 444 25 390 110 380s84 164 180 20 190-77 224-200S710 150 780-20M450 690c-150-180-40-190 50-220s60-130 220-160M470 700c-150-180-40-190 50-220s60-130 220-160M490 710c-150-180-40-190 50-220s60-130 220-160'/%3E%3C/g%3E%3C/svg%3E");
}
.compass { color: #a9be8a; }
.terrain-label { color: #829569; }
.col-coordinates > span, .row-coordinates > span { color: #b4c59d; }
.board {
  background: #444a2f;
  border-color: #65704c;
  box-shadow: 0 5px 0 #252c1b, 0 12px 24px #0006, inset 0 2px 5px #0e160b55;
}
.board-legend { color: #b6c5a0; }
.board-legend .legend-cross.blue { color: #75b1ff; }
.board-legend .legend-cross.red { color: #ff957e; }
.board-legend .gold-icon { color: #f1ca68; fill: #f1ca681a; }
.players { background: #151b10; border-color: #303b25; }
.player-details strong { color: #edf4e2; }
.player-details strong > span, .player-details > span { color: #a3b58d; }
.player-score { color: var(--rh-white); }
.player-score > small, .versus { color: #a3b58d; }
.blue-avatar { color: #85bcff; background: #182e48; border-color: #324d6b; }
.red-avatar { color: #ffae98; background: #3c241c; border-color: #624333; }
.round-progress { background: #10170b; border-color: #2b3720; }
.progress-step { color: #9cac89; }
.progress-step:before { background: #35412b; }
.progress-step.done:before { background: #698145; }
.progress-step.active { color: var(--rh-neon); }
.progress-step.active:before { background: var(--rh-neon); }
.board-scene.is-waiting .board { animation-name: robin-board-wait; }
@keyframes robin-board-wait { 50% { box-shadow: 0 5px 0 #252c1b, 0 0 22px #ccff002b; } }

/* Controls and actions. */
.control-panel { background: var(--panel); color: var(--text-primary); }
.control-panel:after { background: none; }
.panel-top, .panel-number { color: #acbb96; }
.panel-heading p { color: #afbea0; }
.mode-switch { background: #080c06; border-color: #38492b; }
.mode-button { color: #b7c6a4; }
.mode-button:hover { background: #24321a; }
.mode-button.selected { background: #344d1a; color: #ecffce; }
.mode-button > span { background: #19260d; color: #d2ebaa; }
.mode-button#mode-gold.selected { background: #4b3c19; color: #ffe3a0; }
.mode-button#mode-gold .icon { color: #f4cf72; }
.choice-slot { color: #a4b78c; border-color: #455739; }
.choice-slot.filled { color: #dceeca; background: #20351a; border-color: #526e3e; }
.choice-slot.gold { color: #ffe49b; background: #4d3c17; border-color: #a38439; }
.selection-helpers button { color: #b2c39b; }
.selection-helpers button:hover { color: var(--rh-neon); }
.panel-divider { background: #34412a; }
.stake-label > span { color: #adc493; border-color: #485e35; }
.stake-input { background: #080c05; border-color: #486136; }
.stake-input input { color: var(--rh-white); }
.stake-input input:read-only { color: #d4edac; }
.stake-input > span:last-child, .eth-icon { color: #bbcea3; }
.stake-presets > button { color: #b9cfa0; background: #151f0e; border-color: #3f5630; }
.stake-presets > button:hover, .stake-presets > button.selected { color: var(--rh-neon); background: #2b4116; border-color: #607f32; }
.pot-summary > div > span, .pot-summary small { color: #b3c39d; }
.winner-amount > span > i { color: var(--rh-neon); border-color: #53662b; }
.pot-summary .winner-amount > strong, .winner-amount small { color: var(--rh-neon); }
.start-button, .primary-dialog-button, .room-join, .lobby-create {
  background: var(--rh-neon); color: var(--rh-black); border-color: #ccff00;
  box-shadow: 0 3px 0 #77940d;
}
.start-button:hover:not(:disabled), .primary-dialog-button:hover:not(:disabled), .room-join:hover:not(:disabled), .lobby-create:hover:not(:disabled) {
  background: #deff59; color: #000; border-color: #deff59;
}
.start-button:disabled, .primary-dialog-button:disabled, .tie-dialog .primary-dialog-button:disabled, .room-join:disabled, .lobby-create:disabled {
  background: #27371a; color: #acbd93; border-color: #415432; box-shadow: none;
}
.action-note { color: #a5b892; }
.panel-footer { color: #a8bf90; border-color: #344329; }
.panel-footer .status-dot { background: var(--rh-neon); }
.footer-slash { color: #9eaf8e; }
.panel-footer > button { color: #c2d5a8; border-color: #5d7645; }
.signal-orbit { border-color: #617d34; }
.signal-orbit > .icon { color: var(--rh-neon); }
.signal-orbit > i:first-of-type { border-color: #3c5227; }
.signal-orbit > i:last-of-type { border-top-color: var(--rh-neon); }
.signal-orbit > i:last-of-type:after { background: var(--rh-neon); box-shadow: 0 0 9px #ccff0060; }
.waiting-controls > p, .result-controls > p { color: #b5c9a0; }
.waiting-ticks > i { background: #688342; animation-name: robin-tick; }
@keyframes robin-tick { 50% { background: #ccff00; transform: scaleY(1.5); } }
.result-seal { background: radial-gradient(ellipse,#ccff001a,transparent 70%); }
.ticket-result { background: #453a172b; border-color: #887139; }
.ticket-result strong, .ticket-result > .icon { color: #f2d181; }
.ticket-result span { color: #d4c49b; }
.simulate-player { background: #1c2a12; color: #d0e5b5; border-color: #6c8549; }
.simulate-player > span { color: #b5cb98; }
.simulate-player:hover { background: #2d411c; }

/* Lobby, jackpot, balance and footnotes use the same neutral scale. */
.game-tab { color: #aebb9e; }
.game-tab.active { color: var(--rh-neon); background: #1b270e; border-color: #3b5023; }
.game-tab:hover { color: #def7b2; background: #1b2513; }
.game-tab > span { color: #d1f19f; background: #2b3b19; }
.lobby-preview-label { color: #acbe93; }
.lobby-preview-label > .status-dot { background: var(--rh-neon); }
.lobby { background: #0d1209; border-color: #303c25; }
.lobby-heading .eyebrow { color: #b4c79a; }
.lobby-heading h2 { color: var(--rh-white); }
.lobby-heading p, .lobby-toolbar { color: #a8bb90; }
.lobby-toolbar { border-color: #334229; }
.lobby-toolbar select, .preview-settings select { color: #e6efd8; background: #182310; border-color: #4a6135; }
.room-card { background: #171e11; border-color: #35462a; }
.room-avatar { background: #293b1b; color: #c8e6a0; border-color: #526a34; }
.room-info strong { color: var(--rh-white); }
.room-info small, .room-stake > small, .room-payout > small { color: #adc193; }
.room-preview { color: #c0d9a1; border-color: #455d32; }
.room-stake strong { color: #eef6e3; }
.room-payout strong { color: var(--rh-neon); }
.room-stake strong small, .room-payout strong small { color: #b2c69a; }
.room-status { color: #ceeea4; background: #253919; border-color: #45692a; }
.room-status .status-dot { background: var(--rh-neon); }
.lobby-empty { color: #bdd89c; }
.lobby-empty h3 { color: #f1f8e6; }
.lobby-footnote, .lobby-empty p { color: #aec197; }
.join-banner { background: #1d2c12; border-color: #4b6a2f; }
.join-banner strong { color: #d5f5a7; }
.join-banner span, .join-banner button { color: #b4cc98; }
.jackpot-card { background-color: #17210d; background-image: radial-gradient(ellipse at 12% 45%,#ccff0014,transparent 60%); border-color: #3a4b26; }
.jackpot-card:hover { background-color: #203010; border-color: #668531; }
.jackpot-copy > .eyebrow { color: #d3ed9f; }
.jackpot-copy > .eyebrow > span { color: #c1d994; border-color: #627c35; }
.jackpot-copy h3 { color: #f2f9e5; }
.jackpot-copy p { color: #b5c696; }
.jackpot-card-arrow { color: var(--rh-neon); border-color: #536c30; }
.jackpot-card:hover .jackpot-card-arrow { background: #324b17; }
.orbit-star { color: #dfbf62; }
.balance-card { background: #11180c; border-color: #34432a; }
.balance-top > span:first-child, .balance-badge { color: #b4c89b; }
.balance-badge { border-color: #455e30; }
.balance-main > strong { color: var(--rh-white); }
.balance-main small, .balance-card p { color: #aebf98; }
.balance-main button { color: var(--rh-neon); border-color: #5c7a33; }
.balance-main button:hover:not(:disabled) { background: #2a3d15; }
.footer, .footer i, .footer button { color: #9cac87; }
.preview-settings { background: #11190b; border-color: #35442a; }
.preview-settings strong { color: #eff7e3; }
.preview-settings p, .preview-settings label { color: #b1c499; }
.secondary-button { color: #d3e9b5; border-color: #536e36; background: #1a2711; }
.secondary-button:hover { background: #2c421b; color: #e6ffbd; }

/* Dialogs and the wheel. The two sector labels counter-rotate in app.js. */
.dialog { background: #0f150b; color: var(--text-primary); border-color: #495b34; box-shadow: 0 25px 100px #000c; }
.dialog::backdrop { background: #000b; }
.dialog-eyebrow { color: #b0c594; }
.dialog h2 { color: var(--rh-white); }
.dialog-description, .rule-list p, .rules-technical, .wallet-fineprint { color: #b4c6a0; }
.dialog-close { color: #d4e8b8; }
.dialog-close:hover { background: #2d401c; }
.rule-list > div > span { background: #233416; border-color: #536c33; color: var(--rh-neon); }
.rules-note { background: #3a321625; color: #e2d5a6; border-color: #6d6033; }
.wallet-modal-divider { color: #a5bb8b; }
.wallet-modal-divider:before { background: #3d522a; }
.wallet-modal-divider > span { background: #0f150b; }
.demo-wallet { color: #e2f3cd; border-color: #627d40; }
.demo-wallet:hover { background: #213117; }
.demo-wallet-icon { background: #30491d; color: var(--rh-neon); }
.demo-wallet small { color: #b6ce9a; }
.wallet-feedback { color: #ffb89c; }
.connected-status { color: #d9f3b3; }
.connected-status .status-dot { background: var(--rh-neon); }
#connected-address { color: #dcedbe; background: #1b2b10; border-color: #617f36; }
.jackpot-stats { background: #1c2812; border-color: #455a2b; }
.jackpot-stats > div + div { border-color: #455a2b; }
.jackpot-stats span { color: #b4c79a; }
.jackpot-stats strong { color: var(--rh-neon); }
.jackpot-explanation p, .epoch-strip { color: #b2c797; }
.jackpot-explanation > .icon { color: #e6c873; }
.epoch-strip { border-color: #3d5129; }
.epoch-strip b { color: var(--rh-neon); }
.wheel-frame { filter: drop-shadow(0 9px 18px #0007); }
.tie-wheel { background: conic-gradient(from 0deg,#215da9 0deg 180deg,#b5483e 180deg 360deg); border-color: #4c6232; box-shadow: inset 0 0 0 1px #ccff0033,0 0 0 1px #607b39; }
.wheel-hub { background: #10150b; color: var(--rh-neon); border-color: #617d35; }
.wheel-pointer { background: var(--rh-neon); }
.wheel-side { color: var(--rh-white); }
.wheel-result { color: #d4f69b; }
.toast { color: #e3f9c6; background: #20320f; border-color: #719d36; box-shadow: 0 8px 30px #0008; }

@media (prefers-reduced-motion: reduce) {
  .signal-orbit > i:last-of-type { border-color: #8db525; }
  .waiting-ticks > i { background: #aacd41; }
}

/* Signed-in nickname chip in the header */
.account-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 15px; border-radius: 999px;
  border: 1px solid #486136; background: #131a0d; color: #e3f9c6;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap; cursor: pointer; transition: border-color .15s, background .15s;
}
.account-chip:hover { border-color: var(--rh-neon); background: #1a250e; }
.account-chip .status-dot { background: var(--rh-neon); box-shadow: 0 0 8px #ccff0070; }
.account-chip .icon.small { color: #ccff00; opacity: .85; }
@media (max-width: 620px) { .account-chip { display: none; } }

/* Nickname dialog */
.nickname-dialog { width: min(100% - 32px, 420px); }
.nickname-dialog .nickname-input { margin-top: 18px; }
.nickname-dialog .nickname-input input {
  width: 100%; box-sizing: border-box; min-height: 52px; padding: 0 16px;
  font: inherit; font-size: 17px; font-weight: 600; letter-spacing: .01em;
  color: var(--rh-white); background: #080c05; border: 1px solid #486136;
  border-radius: 12px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.nickname-dialog .nickname-input input::placeholder { color: #6f8358; font-weight: 500; }
.nickname-dialog .nickname-input input:focus { border-color: var(--rh-neon); box-shadow: 0 0 0 3px #ccff0026; }
.nickname-dialog .input-error { margin: 10px 0 0; color: #ff9d7a; font-size: 13px; }
.nickname-dialog #nickname-submit { margin-top: 18px; width: 100%; justify-content: center; }
.nickname-dialog .dialog-description b { color: #d4edac; font-weight: 700; }