/* ============================================================================
   RING — style.css, layered on ../engine/cabinet.css.

   THE REGISTER. RING is a Trading Floor cabinet, not a Midway one: no neon, no
   scanlines, no pixel type. 1987 paper trading — oil-black, bone, brass, and
   exactly one gold. Gold is reserved: on this cabinet the ONLY thing that ever
   glows is a house that would close a circle, and that glow is drawn on the
   canvas. Nothing in this stylesheet is allowed to compete with it, so the
   chrome tops out at brass and the "gold" variable appears only where a real
   book-out is being reported (the share polygon frame, the result headline).

   Everything structural — header, meta row, modals, toast, footer, ceremony,
   promo — comes from cabinet.css. This file re-tints it and adds the board
   overlay and the result panel.
   ========================================================================== */

:root {
  /* --- the palette, and it is only four colours ------------------------- */
  --oil:        #08090a;   /* the floor */
  --oil-2:      #0c0e10;   /* the desk */
  --bone:       #e8e2d2;
  --bone-dim:   #9d968a;
  --brass:      #c9a961;
  --brass-dark: #6b5730;
  --brass-deep: #2a2419;
  --gold:       #f0c04a;   /* reserved. see the note above. */
  --carbon:     #5f7d96;   /* carbon-copy blue, the bill's ruling */

  /* --- cabinet.css variables, re-pointed ------------------------------- */
  --bg:        var(--oil);
  --panel:     #101215;
  --line:      #1f2226;
  --ink:       var(--bone);
  --dim:       #7d7969;
  --ember:     var(--brass);
  --ember-hot: #e6cd8f;
  --socket:    var(--gold);
  --good:      #8fae7a;
  --bad:       #b8523a;
}

body {
  background:
    radial-gradient(130% 90% at 50% -18%, #14161a 0%, var(--oil) 62%),
    var(--oil);
  overscroll-behavior-y: none;
}

/* THE DISPLAY CUTOUT. index.html opts into viewport-fit=cover, which extends
   the layout viewport under the notch and the home indicator, and nothing was
   then inset — so on a notched phone the header's 44pt buttons sat under the
   status bar and the share toast sat under the home indicator. The insets go on
   the content boxes rather than on <body>, so the background still bleeds to
   the edges of the screen the way the cover was asked for. */
header > .head-inner,
main {
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}
header > .head-inner { padding-top: max(10px, env(safe-area-inset-top)); }
footer {
  padding-bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px));
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}

/* the header wordmark is brass, engraved, not glowing */
h1 {
  color: var(--brass);
  text-shadow: 0 1px 0 #000, 0 -1px 0 rgba(232,226,210,.14);
  font-size: 21px;
  letter-spacing: .38em;
}
h1 span { color: var(--bone); text-shadow: 0 1px 0 #000; }

/* Every control on this cabinet is at least 44pt. cabinet.css ships 32px
   icon buttons; a phone cabinet cannot. */
.icon-btn {
  width: 44px; height: 44px; border-radius: 9px;
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
  color: var(--bone-dim);
  background: linear-gradient(180deg, #16181b, #101215);
  border-color: #262a2f;
}
.icon-btn:hover, .icon-btn:focus-visible {
  color: var(--bone); border-color: var(--brass-dark); outline: none;
}
.icon-btn[aria-pressed="true"] { color: var(--brass-dark); }

/* ------------------------------------------------------------------- HUD */
.meta {
  gap: 8px; margin-bottom: 8px; min-height: 34px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#hud-banked {
  font-size: 26px; font-weight: 700; line-height: 1;
  color: var(--bone); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
#hud-banked-lbl {
  flex: 1; font-size: 9.5px; letter-spacing: .16em; color: var(--dim);
  text-transform: uppercase; line-height: 1.15; max-width: 78px;
}
.meta .chip {
  border-color: #262a2f; color: var(--bone-dim);
  font-size: 10px; letter-spacing: .1em; padding: 5px 9px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.meta .chip.hot { color: var(--brass); border-color: var(--brass-dark); }

/* ----------------------------------------------------------------- board */
#board-wrap {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
@media (min-width: 560px) { #board-wrap { width: 100%; } }

#board {
  width: 100%; display: block;
  border-radius: 10px;
  border: 1px solid #1c1f23;
  background: var(--oil);
  touch-action: none;               /* the flick is ours, not the browser's */
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 0 60px rgba(0,0,0,.75), 0 1px 0 rgba(232,226,210,.05);
}
#board:focus-visible { outline: 2px solid var(--brass-dark); outline-offset: 2px; }

/* ------------------------------------------------------- board overlays
   START / CONTINUE / RUN OVER. It sits on the board so the kill card drawn
   on the canvas above it stays visible while the decision is on screen. */
.overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 10px;
  border-radius: 10px;
  /* opaque from just under the kill card, which app.js keeps in the top third */
  background: linear-gradient(180deg, rgba(8,9,10,0) 0%, rgba(8,9,10,.72) 30%, rgba(8,9,10,.97) 40%);
  z-index: 5;
}
.overlay[hidden] { display: none; }
.overlay.center { align-items: center; background: rgba(8,9,10,.93); }
/* The decision card is a SOLID panel, not text floating on a gradient. The
   scrim behind it only reached 72% opacity where the card's own heading sat, so
   the kill card drawn on the canvas read straight through "CONTINUE?". app.js
   also measures this box and shrinks the kill card to fit above it. */
.ov-inner {
  width: 100%; max-width: 340px; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 12px 10px 8px;
  background: rgba(8,9,10,.96);
  border-radius: 12px;
  box-shadow: 0 -14px 30px rgba(8,9,10,.92);
}
.overlay.center .ov-inner { background: none; box-shadow: none; }
.ov-title {
  font-size: 17px; font-weight: 700; letter-spacing: .2em; color: var(--brass);
  text-shadow: 0 1px 0 #000;
  margin-bottom: 6px;
}
.ov-title.bad { color: var(--bad); }
.ov-sub {
  font-size: 11px; line-height: 1.55; color: var(--bone-dim);
  margin-bottom: 9px;
}
.ov-sub b { color: var(--bone); }
.ov-count {
  font-size: 30px; font-weight: 700; color: var(--brass);
  font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 8px;
}
.ov-count[hidden] { display: none; }
.ov-note {
  margin-top: 9px; font-size: 10.5px; line-height: 1.5; color: var(--dim);
}
.ov-note[hidden] { display: none; }
.overlay .primary { max-width: 300px; min-height: 52px; }
.overlay .ghost { margin-top: 8px; min-height: 44px; padding: 10px 18px; }
.overlay .primary[hidden], .overlay .ghost[hidden] { display: none; }

/* brass buttons, not the orange the daily cabinets use */
button.primary {
  background: linear-gradient(180deg, #dcbe78, #a5853f);
  border: 1px solid #5a4820;
  color: #1a1409;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .18em; min-height: 48px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 0 #000;
}
button.primary:hover { filter: brightness(1.07); }
button.ghost {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .1em; min-height: 44px;
}

/* ------------------------------------------------------------------ hint */
#hint {
  margin: 9px 0 4px; min-height: 0; font-size: 11.5px; letter-spacing: .04em;
  color: var(--dim); text-align: center;
}
#hint b { color: var(--gold); }
#hint.quiet { opacity: .55; }

/* --------------------------------------------------------------- result */
#result { margin-top: 14px; text-align: center; }
.res-head {
  margin: 0 0 10px; font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .28em; color: var(--brass);
}
#share-canvas {
  display: block; width: 100%; max-width: 340px; margin: 0 auto 12px;
  border: 1px solid #1f2226; border-radius: 10px; background: var(--oil);
}
#share-text {
  margin: 0 auto 14px; max-width: 340px; padding: 10px 12px;
  border: 1px solid #1f2226; border-radius: 8px; background: #0c0e10;
  font: 11.5px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--bone-dim); letter-spacing: .06em;
  white-space: pre-wrap; word-break: break-word; text-align: left;
}
.result-btns .primary { max-width: 240px; }

/* --------------------------------------------------------------- modals */
.modal-card h2 { color: var(--bone); }
.modal-card h3 { color: var(--brass); }
.modal-card p i { color: var(--bone-dim); font-style: italic; }
.help-actions { margin-top: 18px; }
.stat-grid div b { color: var(--brass); }

/* ------------------------------------------------------------- ceremony
   engine/ceremony.js ships the Midway's palette (orange button, cyan board
   headings). Re-tint it here so the game-over screen is the same room the
   cabinet is. Structure is untouched. */
.cere-inner { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cere-title { text-shadow: 0 0 6px rgba(201,169,97,.55), 0 0 22px rgba(201,169,97,.30); }
.cere-continue,
.cere-ini-ok {
  background: linear-gradient(180deg, #dcbe78, #a5853f);
  border: 1px solid #5a4820; color: #1a1409;
  min-height: 48px;
}
.cere-board-title { color: var(--brass); text-shadow: none; }
.cere-high { text-shadow: 0 0 8px rgba(240,192,74,.7); }
.cere-board { background: #0c0e10; }

/* ---------------------------------------------------------------- toast */
#toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px));
  z-index: 70; padding: 10px 16px; border-radius: 8px;
  background: #14171a; border: 1px solid var(--brass-dark);
  color: var(--bone);
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .1em; max-width: 88vw; text-align: center;
}
#toast[hidden] { display: none; }

/* --------------------------------------------------------------- narrow */
@media (max-width: 420px) {
  h1 { font-size: 18px; letter-spacing: .3em; }
  #hud-banked { font-size: 23px; }
  .ov-title { font-size: 15px; }
  main { padding: 10px 10px 12px; }
}
@media (max-height: 680px) {
  footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}