/* Boyz N The Hood runner skin — visuals only, gameplay stays untouched. */
:root {
  --bg: #0b0d0a;
  --surface: #171b15;
  --surface-2: #22281e;
  --border: rgba(200,255,0,.3);
  --border-bright: rgba(200,255,0,.72);
  --cyan: #c8ff00;
  --blue: #9ed900;
  --text: #f4f1e8;
  --text-2: rgba(244,241,232,.7);
  --text-3: rgba(244,241,232,.4);
  --paper: #f4f1e8;
  --ink: #090b08;
  --danger: #f04438;
}

html, body { background: var(--bg); color: var(--text); }

.screen {
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
}
.screen-content {
  max-height:calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
  overflow-y:auto;
  scrollbar-width:none;
}
.screen-content::-webkit-scrollbar { display:none; }

.screen {
  background:
    linear-gradient(rgba(11,13,10,.84), rgba(11,13,10,.92)),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(200,255,0,.05) 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(200,255,0,.05) 28px);
  backdrop-filter: blur(10px) saturate(.7);
}

.screen-content { border-radius: 8px; }
.dashboard-panel {
  max-width: 350px;
  border: 2px solid var(--border-bright) !important;
  border-radius: 8px !important;
  background: rgba(17,21,15,.97) !important;
  box-shadow: 7px 7px 0 rgba(200,255,0,.2), 9px 9px 0 var(--ink) !important;
}
.dashboard-panel::before { height: 5px; background: var(--cyan); }
.dashboard-panel::after {
  content: 'RH // HOOD RUNNER';
  position: absolute;
  top: 10px;
  right: 12px;
  color: rgba(200,255,0,.26);
  font: 800 7px/1 monospace;
  letter-spacing: 1.3px;
}
.alert-panel {
  border-color: rgba(240,68,56,.62) !important;
  box-shadow: 7px 7px 0 rgba(240,68,56,.18), 9px 9px 0 var(--ink) !important;
}
.alert-panel::before { background: var(--danger) !important; }

.panel-status { margin-bottom: 1px; }
.status-dot.green { background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.status-text { color: rgba(244,241,232,.42); }

.game-title {
  color: var(--paper);
  font-family: 'Bangers', Impact, sans-serif;
  font-size: 32px;
  line-height: .9;
  letter-spacing: 2.2px;
  transform: rotate(-1deg);
  -webkit-text-stroke: 1px var(--ink);
  text-shadow: 3px 3px 0 var(--ink);
}
.title-accent {
  color: var(--cyan) !important;
  font-family: 'Bangers', Impact, sans-serif;
  font-size: 42px !important;
  letter-spacing: 3px;
  -webkit-text-fill-color: var(--cyan) !important;
  text-shadow: 3px 3px 0 var(--ink), 5px 5px 0 rgba(244,241,232,.22);
}

.char-label { color: rgba(244,241,232,.45); }
.char-preview-row { gap: 7px; }
.char-arrow {
  border: 2px solid var(--ink);
  border-radius: 4px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 2px 2px 0 var(--cyan);
}
.char-arrow:active { color: var(--ink); background: var(--cyan); }
.char-showcase {
  width: 220px;
  min-width: 0;
  padding: 7px 11px;
  border: 2px solid rgba(200,255,0,.42);
  border-radius: 5px;
  background: #20251d;
  box-shadow: 4px 4px 0 rgba(9,11,8,.8);
}
.char-portrait {
  width: 68px;
  height: 68px;
  overflow: hidden;
  flex-shrink: 0;
  border: 3px solid var(--ink);
  border-radius: 5px;
  box-shadow: 2px 2px 0 var(--cyan);
  animation: portraitFloat 3.5s ease-in-out infinite;
}
#start-character {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  filter: none;
  object-position: 50% 39%;
  transform: scale(1.72);
  transform-origin: 50% 40%;
  box-shadow: none;
  animation: none !important;
  margin: 0;
  display: block;
}
@keyframes portraitFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.char-name { color: var(--paper); font-family: 'Bangers', Impact, sans-serif; font-size: 20px; letter-spacing: 1px; }
.char-desc { color: var(--text-3); text-transform: uppercase; font-size: 8px; letter-spacing: .7px; }
.char-badge, .char-badge.badge-new {
  color: var(--ink);
  background: var(--cyan);
  border-radius: 2px;
  animation: none;
}
.char-dot { border-radius: 1px; background: rgba(244,241,232,.18); }
.char-dot.active { width: 18px; border-radius: 1px; background: var(--cyan); box-shadow: 0 0 8px rgba(200,255,0,.4); }

.welcome-user { color: var(--cyan); }
.best-score-card {
  border: 1px dashed rgba(200,255,0,.42) !important;
  border-radius: 4px !important;
  background: rgba(200,255,0,.045) !important;
}
.bsc-sub, .text-cyan { color: var(--cyan) !important; }
.bsc-icon { filter: grayscale(1) brightness(1.8); }

.console-tips {
  padding: 12px 13px;
  border: 1px solid rgba(244,241,232,.14);
  border-radius: 4px;
  background: rgba(0,0,0,.25);
}
.tip-key {
  color: var(--ink);
  border: 0;
  border-radius: 2px;
  background: var(--cyan);
  font-weight: 900;
}
.tip-action { color: rgba(244,241,232,.55); }

.btn-play {
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--cyan);
  box-shadow: 4px 4px 0 var(--paper);
  font-family: 'Bangers', Impact, sans-serif;
  font-size: 20px;
  letter-spacing: 1.5px;
}
.btn-secondary {
  color: rgba(244,241,232,.65);
  border: 1px solid rgba(244,241,232,.18);
  border-radius: 4px;
  background: #20251d;
}

/* In-game HUD */
#hud { padding: 14px 16px; background: linear-gradient(180deg, rgba(9,11,8,.82), transparent); }
.back-btn {
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--paper);
  box-shadow: 2px 2px 0 var(--cyan);
}
.score-label { color: rgba(244,241,232,.52); }
.score-value, #score-value { color: var(--cyan); font-family: 'Bangers', Impact, sans-serif; font-size: 28px; letter-spacing: 1px; }
#hud-speed { top: 62px; height: 5px; border-radius: 0; background: rgba(9,11,8,.4); }
#speed-bar { border-radius: 0; background: linear-gradient(90deg, var(--cyan), #ffef62, var(--danger)); }
#sound-toggle {
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--paper);
  box-shadow: 2px 2px 0 var(--cyan);
}

/* Results */
.gameover-hologram { width: 104px; height: 92px; }
.gameover-runner-img {
  width: 94px;
  height: 82px;
  border: 3px solid var(--ink);
  border-radius: 5px;
  object-position: 8% 42%;
  box-shadow: 3px 3px 0 var(--danger);
  filter: saturate(.72) contrast(1.1);
}
.holo-ring { display: none; }
.gameover-title {
  color: var(--danger);
  font-family: 'Bangers', Impact, sans-serif;
  font-size: 31px;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 var(--ink);
}
.receipt-report {
  border: 1px solid rgba(200,255,0,.34);
  border-radius: 4px;
  background: linear-gradient(145deg, #171b15, #10130f);
  color: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(9,11,8,.8), 4px 4px 0 rgba(200,255,0,.12);
}
.receipt-header {
  color: var(--lime);
  border-color: rgba(200,255,0,.25);
}
.receipt-label { color: rgba(244,241,232,.62); }
.receipt-value, .receipt-footer .receipt-label { color: var(--paper); }
.receipt-line.border-dashed { border-color: rgba(244,241,232,.16); }
.text-gold { color: #ffef62 !important; }

@media (max-height: 700px) {
  .dashboard-panel { padding: 24px 17px 16px !important; gap: 10px !important; }
  .title-accent { font-size: 34px !important; }
  .best-score-card { display: none !important; }
  .console-tips { padding: 9px 11px; gap: 5px; }
}

@media (max-height: 560px) {
  .game-title { font-size: 24px; }
  .title-accent { display: inline; font-size: 27px !important; }
  .char-label-row, .char-dots, .welcome-user { display: none; }
  .console-tips { display: none; }
}

@media (max-width: 350px) {
  .char-preview-row { gap: 4px; }
  .char-arrow { width: 24px; height: 24px; }
  .char-showcase { width: 190px; padding: 6px 8px; gap: 8px; }
  .char-portrait { width: 58px; height: 58px; }
  .char-name { font-size: 17px; }
  .char-badge { font-size: 6px; }
}