/* DAY 2 DAY BET — games (JetRush / SkyAce). Uses the primary site's tokens from /style.css */
.hg-wrap { padding: calc(var(--nav-h) + 20px) 12px calc(var(--bottom-h) + 24px); max-width: 720px; margin: 0 auto; }
.hg-title { display:flex; align-items:center; justify-content:space-between; margin: 4px 2px 10px; }
.hg-title h1 { font-family: var(--font2); font-size: 22px; letter-spacing: 1px; color: var(--white); display:flex; align-items:center; gap:8px; }
.hg-title h1 i { color: var(--yg); }
.hg-title small { color: var(--text2); font-size: 11px; }
.hg-pill { position:absolute; left:10px; top:10px; font-size:10px; font-weight:700; color:var(--text2); background:rgba(0,0,0,.45); padding:3px 9px; border-radius:50px; z-index:3; }
.hg-pill i { font-size:7px; color: var(--yg); margin-right:3px; vertical-align: middle; }
.hg-pill.off i { color:#e53e3e; }

.hg-hist { display:flex; gap:6px; overflow-x:auto; padding: 2px 0 8px; scrollbar-width:none; }
.hg-hist::-webkit-scrollbar { display:none; }
.hg-h { flex:0 0 auto; font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:50px; background:rgba(255,255,255,.06); }
.hg-h.lo { color:#63b3ed; } .hg-h.mid { color: var(--yg); } .hg-h.hi { color: var(--pink); background: var(--pink2); }
.hg-muted { color: var(--text2); font-size: 12px; }

.hg-stage { position:relative; height: 250px; border-radius: var(--radius); overflow:hidden; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.06); }
.hg-theme-plane   { background: radial-gradient(ellipse at 50% 100%, rgba(72,187,120,.20), rgba(10,20,16,.6) 70%); }
.hg-theme-jet     { background: radial-gradient(ellipse at 50% 0%, rgba(154,205,50,.12), rgba(0,0,0,.55) 70%); }
.hg-theme-avionix { background: radial-gradient(ellipse at 50% 0%, rgba(59,130,246,.18), rgba(4,8,20,.65) 70%); }
.hg-theme-retro   { background: radial-gradient(ellipse at 70% 20%, rgba(255,159,67,.20), rgba(42,19,48,.6) 70%); }
.hg-theme-astro   { background: radial-gradient(ellipse at 50% 0%, rgba(255,107,157,.20), rgba(42,10,28,.65) 70%); }
.hg-theme-matatu  { background: radial-gradient(ellipse at 20% 100%, rgba(34,211,238,.16), rgba(4,10,8,.6) 70%); }
.hg-theme-bomb    { background: radial-gradient(ellipse at 50% 100%, rgba(244,63,94,.16), rgba(13,15,36,.6) 70%); }
.hg-theme-safari  { background: radial-gradient(ellipse at 80% 20%, rgba(251,146,60,.16), rgba(14,8,2,.6) 70%); }
.hg-theme-alien   { background: radial-gradient(ellipse at 50% 0%, rgba(45,212,191,.16), rgba(3,14,12,.6) 70%); }
.hg-theme-gold    { background: radial-gradient(ellipse at 50% 0%, rgba(251,191,36,.16), rgba(8,6,2,.6) 70%); }

/* game quick-switch strip (top of every game page) */
.hg-switch { display:flex; gap:6px; overflow-x:auto; padding: 2px 0 8px; scrollbar-width:none; }
.hg-switch::-webkit-scrollbar { display:none; }
.hg-switch-item { flex:0 0 auto; display:flex; align-items:center; gap:5px; padding:6px 11px; border-radius:50px; background:rgba(255,255,255,.05); color:var(--text2); text-decoration:none; font-size:11px; font-weight:700; border:1px solid transparent; white-space:nowrap; }
.hg-switch-item i { font-size:12px; }
.hg-switch-item.active { border-color: var(--yg); color: var(--yg); background: var(--yg2); }
.hg-stage canvas { position:absolute; inset:0; }
.hg-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; text-align:center; z-index:2; }
.hg-mult { font-family: var(--font2); font-size: 58px; font-weight: 800; color:#fff; line-height:1; text-shadow: 0 4px 24px rgba(0,0,0,.6); transition: color .2s; }
.hg-mult.wait { font-size: 40px; color: var(--text2); }
.hg-mult.fly.mid { color: var(--yg); } .hg-mult.fly.hi { color: var(--pink); }
.hg-mult.crash { color: #e53e3e; animation: hgShake .35s; }
.hg-sub { font-size: 12px; color: var(--text2); margin-top: 6px; letter-spacing:.5px; pointer-events:auto; }
@keyframes hgShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

.hg-panels { display:grid; gap:10px; margin: 12px 0; }
@media (min-width: 560px) { .hg-panels { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.hg-panel { background: rgba(255,255,255,.04); border-radius: var(--radius); padding: 12px; }
.hg-row { display:flex; gap:10px; align-items:stretch; }
.hg-stepper { display:flex; align-items:center; background: rgba(0,0,0,.4); border-radius: 50px; padding: 2px; flex: 0 0 46%; }
.hg-stepper button { width:32px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,.08); color:#fff; font-size:18px; font-weight:800; cursor:pointer; }
.hg-stepper input { width:100%; min-width:0; text-align:center; background:transparent; border:none; outline:none; color:#fff; font-weight:800; font-size:16px; font-family: var(--font); }
.hg-stepper input::-webkit-outer-spin-button, .hg-stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.hg-main { flex:1; border:none; border-radius: 14px; background: var(--yg); color:#000; font-weight:800; font-size:15px; cursor:pointer; padding: 8px 6px; line-height:1.15; font-family: var(--font); }
.hg-main small { display:block; font-size:11px; font-weight:700; opacity:.75; }
.hg-main.cancel { background:#e53e3e; color:#fff; } .hg-main.cash { background:#ff9f1a; color:#000; animation: hgPulse 1s infinite; }
.hg-main.queued { background: var(--pink); color:#000; } .hg-main.next { background: rgba(154,205,50,.18); color: var(--yg); }
.hg-main.won { background:#2f855a; color:#fff; } .hg-main.lost { background:#742a2a; color:#fff; } .hg-main.dis { background:#333; color:#888; cursor:not-allowed; }
@keyframes hgPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(255,159,26,.5)} 50%{ box-shadow:0 0 0 8px rgba(255,159,26,0)} }
.hg-chips { display:flex; gap:6px; margin-top:8px; }
.hg-chips button { flex:1; padding:6px 0; border-radius:8px; border:none; background:rgba(255,255,255,.06); color:var(--text); font-size:12px; font-weight:700; cursor:pointer; }
.hg-chips button:active { background: var(--yg2); color: var(--yg); }
.hg-auto { display:flex; align-items:center; gap:6px; margin-top:8px; font-size:12px; color: var(--text2); }
.hg-auto input[type=checkbox] { accent-color: var(--yg); width:16px; height:16px; }
.hg-auto-val { width:64px; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:4px 6px; color:#fff; font-weight:700; text-align:center; }
.hg-panel input:disabled, .hg-panel button:disabled { opacity:.55; cursor:not-allowed; }

.hg-tabs { display:flex; gap:6px; margin: 4px 0 8px; }
.hg-tabs button { flex:1; padding:9px; border-radius:50px; border:1.5px solid rgba(255,255,255,.1); background:transparent; color:var(--text2); font-size:12.5px; font-weight:700; cursor:pointer; }
.hg-tabs button.on { background: var(--yg2); border-color: var(--yg); color: var(--yg); }
.hg-tabpane { display:none; } .hg-tabpane.on { display:block; }
.hg-tot { font-size:12px; color: var(--text2); margin: 0 2px 8px; } .hg-tot b { color:#fff; }
.hg-list { display:flex; flex-direction:column; gap:5px; }
.hg-li { display:grid; grid-template-columns: 1.1fr 1fr 1.2fr; align-items:center; gap:8px; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.04); font-size:12.5px; }
.hg-li .u { font-weight:700; color:#fff; } .hg-li span:last-child { text-align:right; font-weight:700; }
.hg-li .w { color: var(--yg); } .hg-li .l { color:#fc8181; } .hg-li .p { color: var(--text2); }
.hg-empty { text-align:center; color: var(--text2); padding: 26px 0; font-size:13px; }
.hg-note { font-size:12px; color: var(--text2); line-height:1.6; margin-bottom:10px; }
.hg-fair-h { font-size:11px; font-weight:700; color: var(--yg); margin: 8px 0 4px; }
#hgFair code { display:block; word-break:break-all; font-size:10.5px; background:rgba(0,0,0,.4); padding:8px 10px; border-radius:8px; color:#ddd; margin-bottom:8px; }
.hg-fr { display:grid; grid-template-columns: 1fr 1fr 1.4fr; padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.04); margin-bottom:5px; font-size:12px; }
.hg-fr span:last-child { text-align:right; }
.hg-demo-strip { display:flex; align-items:center; gap:10px; margin: 0 0 10px; padding: 7px 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); flex-wrap: wrap; }
.hg-demo-btn { display:inline-flex; align-items:center; gap:6px; padding: 6px 12px; border-radius: 50px; border: 1.5px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: var(--text2); font-size: 11.5px; font-weight: 800; cursor: pointer; letter-spacing:.4px; }
.hg-demo-btn.on { background: var(--pink2); border-color: var(--pink); color: var(--pink); }
.hg-demo-hint { font-size: 10.5px; color: var(--text2); flex: 1; min-width: 120px; }
#hgDemoReset { display:inline-flex; align-items:center; gap:5px; padding: 6px 12px; border-radius: 50px; border: 1.5px solid var(--yg); background: transparent; color: var(--yg); font-size: 10.5px; font-weight: 800; cursor: pointer; }
.hg-demo-btn:hover, #hgDemoReset:hover { filter: brightness(1.15); }
.hg-legal { font-size:10.5px; color: rgba(255,255,255,.35); text-align:center; margin-top:14px; line-height:1.5; }

/* hub tiles (dashboard + lobby) */
.hub-chips { display:flex; gap:8px; overflow-x:auto; padding: 2px 0 10px; scrollbar-width:none; }
.hub-chips::-webkit-scrollbar { display:none; }
.hub-chip { flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:8px 14px; border-radius:50px; background: rgba(255,255,255,.06); color: var(--text); font-size:13px; font-weight:700; text-decoration:none; border:1.5px solid transparent; }
.hub-chip i { color: var(--yg); } .hub-chip.on { border-color: var(--yg); color: var(--yg); background: var(--yg2); }
.hub-chip small { font-size:10px; color: var(--pink); font-weight:800; }
.hub-tiles { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-bottom: 14px; }
.hub-tile { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height: 128px; border-radius: var(--radius); padding: 12px; text-decoration:none; overflow:hidden; color:#fff; border:1px solid rgba(255,255,255,.07); }
.hub-tile .ico { position:absolute; top:10px; right:10px; font-size:30px; opacity:.9; }
.hub-tile b { font-family: var(--font2); font-size:17px; letter-spacing:.5px; line-height:1.05; }
.hub-tile span { font-size:10.5px; opacity:.75; margin-top:3px; }
.hub-tile.sports { background: linear-gradient(160deg, rgba(154,205,50,.35), rgba(0,0,0,.6)); } .hub-tile.sports .ico { color: var(--yg); }
.hub-tile.jet     { background: linear-gradient(160deg, rgba(49,130,206,.35), rgba(0,0,0,.6)); }   .hub-tile.jet .ico { color:#63b3ed; }
.hub-tile.sky     { background: linear-gradient(160deg, rgba(229,62,62,.38), rgba(0,0,0,.6)); }    .hub-tile.sky .ico { color:#fc8181; }
.hub-tile.avionix { background: linear-gradient(160deg, rgba(56,189,178,.38), rgba(0,0,0,.6)); }   .hub-tile.avionix .ico { color:#5eead4; }
.hub-tile.retro   { background: linear-gradient(160deg, rgba(255,159,67,.38), rgba(0,0,0,.6)); }   .hub-tile.retro .ico { color:#ff9f43; }
.hub-tile.astro   { background: linear-gradient(160deg, rgba(192,132,252,.38), rgba(0,0,0,.6)); }  .hub-tile.astro .ico { color:#c084fc; }
.hub-tile.matatu  { background: linear-gradient(160deg, rgba(34,211,238,.38), rgba(0,0,0,.6)); }   .hub-tile.matatu .ico { color:#22d3ee; }
.hub-tile.bomb    { background: linear-gradient(160deg, rgba(244,63,94,.38), rgba(0,0,0,.6)); }    .hub-tile.bomb .ico { color:#f43f5e; }
.hub-tile.safari  { background: linear-gradient(160deg, rgba(251,146,60,.38), rgba(0,0,0,.6)); }   .hub-tile.safari .ico { color:#fb923c; }
.hub-tile.alien   { background: linear-gradient(160deg, rgba(45,212,191,.38), rgba(0,0,0,.6)); }   .hub-tile.alien .ico { color:#2dd4bf; }
.hub-tile.gold    { background: linear-gradient(160deg, rgba(251,191,36,.38), rgba(0,0,0,.6)); }  .hub-tile.gold .ico { color:#fbbf24; }
.hub-tile .live { position:absolute; left:10px; top:10px; font-size:9px; font-weight:800; background: var(--pink); color:#000; padding:2px 7px; border-radius:50px; }
@media (max-width: 380px) { .hub-tiles { grid-template-columns: 1fr 1fr; } }
body.light-mode .hg-panel, body.light-mode .hg-li, body.light-mode .hg-fr { background: rgba(0,0,0,.05); }
body.light-mode .hg-li .u, body.light-mode .hg-tot b { color:#111; }

/* ---- light mode: game pages (stage stays dark so the canvas art stays readable) ---- */
body.light-mode .hg-stage { background-color: #0b0f14; border-color: rgba(0,0,0,.25); }
body.light-mode .hg-panel { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
body.light-mode .hg-stepper { background: #ececec; }
body.light-mode .hg-stepper button { background: rgba(0,0,0,.08); color: #111; }
body.light-mode .hg-stepper input { color: #111; }
body.light-mode .hg-chips button { background: rgba(0,0,0,.07); color: #222; }
body.light-mode .hg-auto-val { background: #ececec; color: #111; border-color: rgba(0,0,0,.15); }
body.light-mode .hg-tabs button { border-color: rgba(0,0,0,.14); color: #555; }
body.light-mode .hg-tabs button.on { background: var(--yg2); border-color: var(--yg); color: #4d7a00; }
body.light-mode .hg-li, body.light-mode .hg-fr { background: #fff; }
body.light-mode .hg-li .u { color: #111; }
body.light-mode .hg-li .w { color: #4d7a00; }
body.light-mode .hg-tot b { color: #111; }
body.light-mode #hgFair code { background: #ececec; color: #222; }
body.light-mode .hg-demo-btn { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.16); color: #555; }
body.light-mode .hg-demo-btn.on { background: var(--pink2); border-color: var(--pink); color: #c2185b; }
body.light-mode #hgDemoReset { color: #4d7a00; border-color: #7aa81f; }
body.light-mode .hg-legal { color: rgba(0,0,0,.5); }
body.light-mode .hg-title h1 { color: #111; }
body.light-mode .hg-title h1 i { color: #5f8f00; }
body.light-mode .hg-h.mid { color: #4d7a00; }
body.light-mode .hg-main.dis { background: #cfcfcf; color: #777; }
body.light-mode .hg-main.next { background: rgba(154,205,50,.25); color: #3f6600; }
body.light-mode #sfxBtn { background: rgba(0,0,0,.06) !important; border-color: rgba(0,0,0,.14) !important; }