/* Chicken Road — Vidigalbet edition.
   Layout and tokens mirror the reference cabinet: an operator bar above a
   fixed-aspect game screen with the bet / difficulty / action rail beneath. */

:root {
  --background:         oklch(19% .02 300);
  --foreground:         oklch(97% .01 95);
  --cabinet:            oklch(27% 0 0);
  --panel:              oklch(33% 0 0);
  --panel-muted:        oklch(42% 0 0);
  --panel-foreground:   oklch(97% 0 0);
  --accent:             oklch(80% .17 75);
  --accent-foreground:  oklch(25% .05 60);
  --primary:            oklch(78% .17 148);
  --primary-foreground: oklch(25% .06 150);
  --outline:            oklch(30% 0 0);
  --asphalt:            oklch(44% .005 60);
  --win:                oklch(45% .06 150);
  --win-foreground:     oklch(98% .01 95);
  --win-border:         oklch(72% .16 148);
  --danger:             oklch(58% .245 27);

  --radius:  .625rem;
  --ui:      'Baloo 2', ui-rounded, 'Segoe UI Rounded', system-ui, -apple-system, sans-serif;
  --shadow:  0 25px 50px -12px rgb(0 0 0 / .6);
  --aspect:  1464 / 639;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  overscroll-behavior: none;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--ui);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

button, input, output { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
a { text-decoration: none; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:where(button, a, input):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- page ---------- */

.stage {
  display: flex;
  height: 100dvh;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 6px;
}

/* ---------- operator bar ---------- */

.brandbar {
  margin-inline: auto;
  display: flex;
  width: 100%;
  max-width: 1500px;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 0 4px 6px;
}

.brandbar__logo { display: flex; min-width: 0; flex-shrink: 1; align-items: center; }
.brandbar__logo img { height: 24px; width: auto; max-width: 40vw; object-fit: contain; }
.brandbar__logo img[data-missing] { display: none; }

.brandbar__wordmark {
  display: none;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--foreground);
}
.brandbar__logo img[data-missing] + .brandbar__wordmark { display: block; }
.brandbar__wordmark::first-letter { color: var(--accent); }




/* ---------- cabinet ---------- */

.cabinet {
  position: relative;
  width: 100%;
  max-width: 1500px;
  /* The frame used to hold a fixed 1464/639 ratio, which at 1440x900 made the
     page 905px tall inside a 900px window — a scrollbar on a game that should
     simply fit. The cabinet now takes the leftover height at every size and the
     road fills whatever is left. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: var(--cabinet);
  box-shadow: var(--shadow);
}
.cabinet__head, .cabinet__foot { flex: 0 0 auto; }

.cabinet__head {
  display: flex; align-items: center; gap: 8px;
  background: var(--cabinet); padding: 8px;
}
.cabinet__logo { height: 20px; width: auto; flex-shrink: 0; object-fit: contain; }
.cabinet__logo[data-missing] { display: none; }
.cabinet__logofallback {
  display: none; font-size: 15px; font-weight: 800; letter-spacing: .02em;
  color: #fff; white-space: nowrap;
}
.cabinet__logo[data-missing] + .cabinet__logofallback { display: block; }

.cabinet__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.tool {
  display: flex; align-items: center; gap: 8px;
  border-radius: 12px; background: var(--panel);
  padding: 8px 10px; font-size: 14px; font-weight: 700;
  color: var(--panel-foreground); transition: background-color .15s;
}
.tool:hover { background: var(--panel-muted); }
.tool svg { width: 20px; height: 20px; flex-shrink: 0; }
.tool__label { display: none; white-space: nowrap; }
.tool--icon { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; }

.spinbank {
  display: flex; align-items: center; gap: 6px;
  border-radius: 12px; background: var(--panel);
  padding: 8px 12px; font-size: 14px; font-weight: 700;
  color: var(--panel-foreground);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.spinbank__icon {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 9999px;
  background: var(--accent); color: var(--accent-foreground);
}
.spinbank__icon svg { width: 12px; height: 12px; }
.spinbank__label { font-weight: 600; opacity: .6; font-size: .85em; }
.spinbank.bump { animation: bankBump .45s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes bankBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); background: var(--win); }
  100% { transform: scale(1); }
}

/* ---------- screen ---------- */

.screen { position: relative; width: 100%; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.screen__frame {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  container-type: size;   /* the promo scales against this box, not the viewport */
}
#game { display: block; width: 100%; height: 100%; }

.hud {
  position: absolute; top: 8px; left: 8px;
  display: flex; align-items: center; gap: 8px;
  border-radius: 9999px;
  background: rgb(0 0 0 / .45);
  backdrop-filter: blur(6px);
  padding: 5px 12px;
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.hud[hidden] { display: none; }
.hud__diff { color: var(--accent); }
.hud__lane { opacity: .72; }
.hud__prize { color: #fff; }
.hud__sep { width: 3px; height: 3px; border-radius: 50%; background: rgb(255 255 255 / .45); }
.hud__mult { color: var(--accent); }

/* ---------- three-loss promo ---------- */

.promo {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  background: rgb(10 5 18 / .82);
  backdrop-filter: blur(5px);
  padding: clamp(6px, 3cqh, 14px);
  overflow-y: auto;
  animation: promoIn .28s cubic-bezier(.2, 1.3, .4, 1);
}
.promo[hidden] { display: none; }
@keyframes promoIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

.promo__card {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(2px, 1.4cqh, 7px);
  width: min(440px, 100%);
  max-height: 100%;
  overflow-y: auto;
  border-radius: 20px;
  border: 1px solid rgb(255 255 255 / .12);
  background: linear-gradient(180deg, oklch(30% .02 300), oklch(21% .02 300));
  padding: clamp(10px, 5cqh, 20px) clamp(14px, 4cqw, 24px);
  text-align: center;
  box-shadow: var(--shadow);
}
.promo__logo { height: clamp(20px, 8cqh, 34px); width: auto; max-width: 70%; object-fit: contain; }
.promo__logo[data-missing] { display: none; }
.promo__wordmark {
  display: none; font-size: 20px; font-weight: 800; color: var(--foreground);
}
.promo__logo[data-missing] + .promo__wordmark { display: block; }
.promo__wordmark::first-letter { color: var(--accent); }

.promo__title {
  margin: clamp(2px, 1.5cqh, 6px) 0 0;
  font-size: clamp(15px, 6cqh, 22px);
  font-weight: 800; color: #fff; text-wrap: balance;
}
.promo__body {
  margin: 0; font-size: clamp(11px, 4cqh, 14px); font-weight: 600; line-height: 1.4;
  color: rgb(255 255 255 / .72); max-width: 34ch;
}
/* Bonus code: tap to copy, with the code itself the loudest thing in the row. */
.promo__code {
  display: flex; align-items: center; gap: 10px;
  width: 100%; margin: 0 0 10px;
  padding: 9px 12px; border-radius: 12px; cursor: pointer;
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border: 1px dashed color-mix(in oklab, var(--accent) 45%, transparent);
  color: var(--panel-foreground);
  font: inherit;
  transition: background .18s, border-color .18s;
}
.promo__code:hover { background: color-mix(in oklab, var(--accent) 18%, transparent); }
.promo__code[hidden] { display: none; }
.promo__code-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.promo__code-value {
  flex: 1; text-align: center;
  font-size: 17px; font-weight: 800; letter-spacing: .12em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.promo__code-copy {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 7px;
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  color: var(--accent);
}
.promo__code[data-copied="1"] .promo__code-copy { background: var(--win); color: var(--win-foreground); }
/* On open, the code pulses a couple of times so it is read before the button. */
.promo__code[data-attention="1"] { animation: codeAttention 1.3s ease-in-out 2; }
@keyframes codeAttention {
  0%, 100% { background: color-mix(in oklab, var(--accent) 10%, transparent);
             border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
  50%      { background: color-mix(in oklab, var(--accent) 26%, transparent);
             border-color: var(--accent); }
}
.promo__card:focus { outline: none; }
.promo__card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Top payout gets a gold treatment so the max win reads as an event. */
.promo[data-max="1"] .promo__card {
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent),
              0 0 70px color-mix(in oklab, var(--accent) 22%, transparent);
}
.promo[data-max="1"] .promo__title { color: var(--accent); }
.promo[data-max="1"] .promo__cta { animation: ctaPulse 1.5s ease-in-out infinite; }
@keyframes ctaPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
/* Popup blocked — say so rather than leaving them wondering. */
.promo[data-blocked="1"] .promo__body::after {
  content: ' Your browser blocked the new tab — use the button below.';
  color: var(--accent);
}

.promo__cta {
  margin-top: clamp(4px, 2cqh, 10px); display: flex; align-items: center; justify-content: center;
  width: 100%; height: clamp(38px, 14cqh, 52px); border-radius: 14px;
  flex: 0 0 auto;
  background: var(--accent); color: var(--accent-foreground);
  font-size: clamp(14px, 5.5cqh, 19px); font-weight: 800;
  transition: transform .15s, filter .15s;
}
.promo__cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.promo__dismiss {
  margin-top: 1px; padding: clamp(2px, 1.4cqh, 6px); font-size: clamp(10px, 3.6cqh, 13px);
  font-weight: 600; flex: 0 0 auto;
  color: rgb(255 255 255 / .5); transition: color .15s;
}
.promo__dismiss:hover { color: rgb(255 255 255 / .85); }

/* On a very short game frame (a phone held upright) the clamp floors cannot
   shrink any further, so the supporting line goes rather than the button. */
@container (max-height: 235px) {
  .promo__body { display: none; }
  .promo__logo { height: 17px; }
  .promo__title { font-size: 13px; }
  .promo__cta { height: 34px; font-size: 13px; margin-top: 2px; }
  .promo__card { padding: 8px 12px; gap: 2px; }
}

/* ---------- control rail ---------- */

.cabinet__foot { background: var(--cabinet); padding: 8px 8px 8px; }

.controls {
  display: grid; gap: 8px;
  border-radius: 16px; background: var(--panel); padding: 8px;
}

.ctl { display: grid; gap: 6px; min-width: 0; }



.ctl__labels {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; font-weight: 600;
  color: color-mix(in oklab, var(--panel-foreground) 80%, transparent);
}
.ctl__hint { display: none; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--panel-muted) 40%, transparent);
  padding: 2px;
}
.tab {
  min-height: 40px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-radius: 8px; padding: 6px 2px;
  font-size: 10px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em;
  color: color-mix(in oklab, var(--panel-foreground) 60%, transparent);
  transition: color .15s, background-color .15s;
}
.tab:hover { color: var(--panel-foreground); }
.tab[aria-selected="true"] { background: var(--panel-muted); color: var(--panel-foreground); }
.tab:disabled { opacity: .4; cursor: not-allowed; }

.actions { display: flex; gap: 8px; }
.actions > button[hidden] { display: none; }

.btn-play, .btn-go, .btn-collect {
  height: 48px; width: 100%;
  border-radius: 16px;
  font-weight: 800;
  transition: transform .15s, filter .15s;
}
.btn-play:hover, .btn-go:hover, .btn-collect:hover { transform: translateY(-2px); }
.btn-play:disabled, .btn-go:disabled, .btn-collect:disabled { transform: none; opacity: .4; cursor: not-allowed; }

.btn-play { background: var(--primary); color: var(--primary-foreground); font-size: 20px; }

.btn-go {
  display: grid; place-content: center; gap: 0;
  background: var(--primary); color: var(--primary-foreground);
}
.btn-go__main { font-size: 20px; font-weight: 800; line-height: 1.05; }
.btn-go__sub { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; opacity: .65; }

.btn-collect {
  display: grid; place-content: center;
  background: var(--win); color: var(--win-foreground);
  box-shadow: inset 0 0 0 2px var(--win-border);
  transition: background .2s, color .2s, box-shadow .2s, transform .1s;
}
/* Between checkpoints there is nothing collectable, so the button steps back
   and reports how far the next payout is instead of looking broken. */
.btn-collect[data-ready="0"] {
  background: var(--panel-muted);
  color: var(--panel-foreground);
  box-shadow: inset 0 0 0 1px var(--line);
  opacity: 1;
}
.btn-collect[data-ready="0"]:disabled { opacity: 1; }
.btn-collect[data-ready="1"] { animation: readyPulse 1.6s ease-in-out infinite; }
@keyframes readyPulse {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--win-border); }
  50% { box-shadow: inset 0 0 0 2px var(--win-border), 0 0 18px color-mix(in oklab, var(--win) 55%, transparent); }
}
.btn-collect__main { font-size: 14px; font-weight: 700; line-height: 1.05; opacity: .8; }
.btn-collect__sub { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- modals ---------- */

.modal {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: rgb(6 3 14 / .75);
  backdrop-filter: blur(6px);
  padding: 16px;
}
.modal[hidden] { display: none; }
.modal__card {
  position: relative;
  width: min(620px, 100%); max-height: 84dvh; overflow: auto;
  border-radius: 18px;
  border: 1px solid rgb(255 255 255 / .12);
  background: linear-gradient(180deg, oklch(30% .02 300), oklch(20% .02 300));
  padding: 22px 24px 24px;
  box-shadow: var(--shadow);
}
.modal__close {
  position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: rgb(255 255 255 / .07); color: var(--foreground);
  font-size: 19px; line-height: 1;
}
.modal__close:hover { background: rgb(255 255 255 / .16); }
.modal h2 { margin: 0 0 10px; font-size: 23px; font-weight: 800; color: var(--accent); }
.modal h3 { margin: 20px 0 8px; font-size: 15px; font-weight: 800; }
.modal p, .modal li { font-size: 14px; line-height: 1.55; color: rgb(255 255 255 / .82); font-weight: 600; }
.modal ol { margin: 0; padding-left: 20px; }
.modal ol li { margin-bottom: 7px; }
.note { font-size: 12.5px; color: rgb(255 255 255 / .5); margin-top: 14px; }

.menu { display: grid; gap: 8px; }
.menu__row {
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 12px; background: rgb(255 255 255 / .06);
  padding: 12px 14px; font-size: 14px; font-weight: 700;
}
.menu__row:hover { background: rgb(255 255 255 / .12); }
.menu__row b { color: var(--accent); }

.prizeline {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}
.prizeline b { color: var(--accent); }

.ladders { display: grid; gap: 12px; }
.ladder h4 {
  margin: 0 0 5px; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: rgb(255 255 255 / .5);
}
.ladder__rungs { display: flex; flex-wrap: wrap; gap: 4px; }
.rung {
  border-radius: 6px; background: rgb(255 255 255 / .07);
  padding: 3px 7px; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rung--band {
  display: flex; align-items: baseline; gap: 6px;
  padding: 5px 10px; font-size: 12px;
}
.rung--band b { color: var(--accent); font-size: 13px; }
.rung--payout {
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
}
.rung--payout b { color: var(--accent); font-size: 14px; }

.rung--band[data-prize="10"] b { color: #cfd6e6; }
.rung--band[data-prize="15"] b { color: #d7e4f5; }
.rung--band[data-prize="20"] b { color: #bfe1ff; }
.rung--band[data-prize="30"] b { color: var(--accent); }
.rung--band span { opacity: .6; font-weight: 600; }

/* ---------- sm: 640px ---------- */

@media (min-width: 640px) {
  .stage { padding: 12px; }
  .brandbar { gap: 12px; padding: 0 8px 12px; }
  .brandbar__logo img { height: 40px; max-width: none; }
  .brandbar__wordmark { font-size: 30px; }
}

/* ---------- phones ----------
   The cabinet used to keep its wide 1464/639 aspect ratio at every width, so on
   a 375x812 phone the road collapsed to ~158px and the stage centred it with
   roughly 200px of dead space above and below. On small screens the cabinet
   fills the viewport instead and the road takes whatever is left over. */
@media (max-width: 639px) {
  .stage {
    gap: 6px;
    padding: 4px calc(4px + env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) calc(4px + env(safe-area-inset-left));
  }

  /* Trim the furniture so the road keeps the space it just gained. */
  .brandbar { flex: 0 0 auto; padding-bottom: 2px; }
  .brandbar__logo img { height: 20px; }
  .cabinet__head { padding: 6px; gap: 6px; }
  .cabinet__foot { padding: 6px; }
  .controls { gap: 6px; padding: 6px; }
  .ctl__labels { font-size: 11px; }
  .hud { font-size: 11px; }

  /* Touch targets: the help and menu buttons were 36px, under the 44px that
     fingers reliably hit. */
  .tool { min-height: 44px; padding: 8px 12px; }
  .tool--icon { min-width: 44px; justify-content: center; }
  .tab { min-height: 44px; }
}

/* Short landscape phones: the road is the whole point, so shrink the rest. */
@media (max-height: 460px) and (orientation: landscape) {
  .brandbar { display: none; }
  .cabinet__head { padding: 4px 6px; }
  .cabinet__head .tool__label { display: none; }
  .btn-play, .btn-go, .btn-collect { height: 44px; }
  .tabs { grid-template-columns: repeat(4, 1fr); }
}

/* Touch handling: taps should act immediately and never select text or
   double-tap-zoom the board out from under the player. */
button, .tab, .btn-play, .btn-go, .btn-collect, .promo__cta, .promo__code, .tool {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
#game { touch-action: manipulation; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}