/* doors.css - Doors: a Mastermind-style 4-distinct-digit guessing
   puzzle behind a vault door. Reuses tokens from styles.css and
   game-shell.css's shell/bar/pause chrome, same as every other game.
   No joystick -- entirely a tap-driven numeric keypad, same
   control-free posture as Letters/Numbers/Sliders. */

/* Per explicit follow-up instruction ("the whole screen can be on the
   door with the gameplay in the left 3/4 of the door, and the lock on
   the door on the right side above the door handle"): the canvas is
   now the FULL-SCREEN background (a single door spanning the whole
   stage, with the padlock+handle drawn on its right edge -- see
   doors.js's drawScene()), and everything else layers on top of it as
   `.doors-content`, confined to the left 3/4 so the right quarter
   stays clear for the lock/handle. (The zoom-lock `touch-action` that
   used to be set here directly now comes from the shared `.game-shell`
   rule in game-shell.css, applied site-wide.) */
.doors-stage {
  position: relative;
  height: 100%;
  padding: 0;
}

.doors-content {
  position: relative;
  z-index: 1;
  width: 75%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 6px;
  /* A translucent "engraved panel" backing so the gameplay stays
     legible over the door texture regardless of how busy it gets. */
  background: rgba(8, 6, 4, .55);
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.doors-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .doors-stats {
    padding: 0 0 0 var(--gs-bar-left-clear);
    gap: 10px;
  }
  /* Same real-bug precedent as Numbers'/Slither's own mobile stat-row
     fix -- with the shell's left button clearance eating into this
     narrow strip, showing every stat wraps to a second row and eats
     space better spent on the history below. (No right-side clearance
     needed here -- the content panel is already only 75% wide, well
     clear of the shell's own close button.) */
  .doors-stats .doors-stat-compact-hide {
    display: none;
  }
}

.doors-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  min-width: 56px;
}

.doors-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--muted);
}

.doors-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* The full-screen door background -- sits BEHIND .doors-content (see
   that rule's own comment), filling the entire stage rather than a
   small header box. */
.doors-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #1a1410, #100d0a);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Per explicit instruction ("use 'RIGHT PLACE', 'WRONG PLACE', 'NOT
   USED' labels that can be small" / "in two lines each at the top",
   later clarified that these are column headers over three aggregate
   NUMBERS per guess row, not a color key -- see doors.js's header
   comment on why per-digit colors were removed). Shares the exact same
   grid columns as `.doors-history-row` below so the numbers in every
   row line up under their header. */
.doors-history-header {
  display: grid;
  grid-template-columns: 20px 120px repeat(3, 1fr);
  gap: 6px;
  flex: 0 0 auto;
  padding: 0 8px 2px;
}

.doors-history-header-spacer {
  grid-column: span 2;
}

.doors-history-header-col {
  font-size: 9px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-align: center;
}

/* Tinted to match the colored backing on the row stats below them (see
   `.doors-stat-right` etc.) so each header visually pairs with its own
   column. */
.doors-header-right   { color: #22c55e; }
.doors-header-wrong   { color: #f59e0b; }
.doors-header-notused { color: #fca5a5; }

.doors-toast {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(52, 211, 153, .5);
  color: #06170f;
  font-weight: 700;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 3;
  white-space: nowrap;
}

.doors-toast[hidden] { display: none; }

.doors-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}

/* Per-guess countdown -- per explicit instruction ("90 seconds per
   guess on second level ... use the line going to red like before"),
   the exact same bright-line + numeric-readout + slow-red-flash
   pattern as Letters'/Numbers' own per-question timers. Hidden
   entirely on level 1 (no time limit) -- see doors.js's
   updateTimerBar(). */
.doors-timer-wrap {
  flex: 0 0 auto;
  position: relative;
  height: 14px;
}

.doors-timer-wrap[hidden] { display: none; }

.doors-timer-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.doors-timer-fill {
  height: 100%;
  width: 100%;
  background: #34d399;
  transition: width .2s linear;
}

.doors-timer-fill.is-urgent {
  animation: doors-timer-flash 1.6s ease-in-out infinite;
}

@keyframes doors-timer-flash {
  0%, 100% { background: #f87171; opacity: 1; }
  50% { background: #f87171; opacity: .35; }
}

.doors-timer-text {
  position: absolute;
  right: 0;
  top: -3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* The scrollable guess log -- this is the part that actually grows
   turn over turn, so it (not the canvas) gets the flexible remaining
   space. Per explicit instruction ("have the previous ones at the top
   of the page down"): guesses list in normal reading order, oldest at
   the top, with each new one appended at the bottom -- doors.js scrolls
   the list to the bottom on every new row so it's visible without the
   player having to scroll manually. Per a later explicit follow-up
   instruction ("don't show a scroll bar but allow scrolling back to
   the 1st entry, but go back down to show as many as possible and the
   newest one whenever a submission is entered"): every guess row now
   stays in the DOM all level (doors.js no longer trims old ones), so
   real touch/wheel scrolling can still reach all the way back to
   guess #1 -- only the scrollbar's own visible track/thumb is hidden
   (`scrollbar-width`/`::-webkit-scrollbar` below), not the scrolling
   itself. */
.doors-history {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 2px;
  scroll-behavior: smooth;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* legacy Edge/IE */
}

.doors-history::-webkit-scrollbar {
  display: none; /* Chrome/Safari/newer Edge */
}

/* Per explicit instruction ("have each row as a panel in the door that
   opens when that guess can be entered") -- styled to match the door's
   own wood tones (see doors.js's drawScene()) rather than a generic
   dark list row, and animates in with a quick "panel swinging open"
   reveal the moment it's created. Grid columns match
   `.doors-history-header` above so each row's three stats line up
   under their column label. */
.doors-history-row {
  display: grid;
  grid-template-columns: 20px 120px repeat(3, 1fr);
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  background: linear-gradient(to bottom, #46331f, #362719);
  border: 2px solid #5b3a24;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .45);
  flex: 0 0 auto;
  animation: doors-panel-open .4s ease-out;
  transform-origin: center top;
}

@keyframes doors-panel-open {
  from { transform: scaleY(.2); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

.doors-history-digits {
  position: relative;
  display: flex;
  gap: 4px;
  overflow: hidden;
  border-radius: 6px;
}

/* Neutral, uncolored -- per explicit instruction, the player is NEVER
   told which specific digit is right/wrong/unused, only the aggregate
   counts (see `.doors-history-stat` below and doors.js's own header
   comment). A brief color-coded version of this tile existed and was
   explicitly reverted; don't reintroduce a per-digit color here. */
.doors-history-digit {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #1b2430;
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* The neon "alien scan line" that sweeps across a guess's digits the
   moment it's submitted, per explicit instruction -- the digit tiles
   reveal their color (see doors.js's staggered reveal) as it passes,
   rather than appearing all at once. */
.doors-scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #7ee7ff, transparent);
  box-shadow: 0 0 10px 3px rgba(126, 231, 255, .95);
  animation: doors-scan-sweep 1.1s linear forwards;
  pointer-events: none;
}

@keyframes doors-scan-sweep {
  from { left: -5px; }
  to   { left: 100%; }
}

/* The three aggregate stats (right / wrong / not-used), one per grid
   column, aligned under `.doors-history-header-col` above --
   `display: contents` lets these spans occupy the row's own grid
   columns directly rather than being boxed inside their own wrapper. */
.doors-history-stats {
  display: contents;
}

.doors-history-stat {
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-radius: 6px;
  padding: 3px 0;
}

/* Per explicit follow-up instruction ("those colours you had go behind
   the stats") -- the green/orange/light-red palette from the earlier,
   reverted per-digit coloring now backs the three AGGREGATE stat
   numbers instead (see doors.js's own header comment on why this is
   still consistent with "never reveal which digit"). */
.doors-stat-right    { background: #22c55e; color: #052e12; }
.doors-stat-wrong    { background: #f59e0b; color: #2b1500; }
.doors-stat-notused  { background: #fca5a5; color: #450a0a; }

.doors-history-turn {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* The terminal-result panel -- see doors.js's addVerdictPanel(). Only
   ever has one child (the verdict text), so it overrides the row grid
   above with a simple centered flex layout instead of five columns. */
.doors-verdict-row {
  display: flex;
  justify-content: center;
}

.doors-verdict-text {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .06em;
}

.doors-verdict-text.is-granted { color: #22c55e; }
.doors-verdict-text.is-denied  { color: #f87171; }

/* -- Answer + keypad ------------------------------------------------- */

.doors-builder {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
}

.doors-answer-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.doors-answer-box {
  display: flex;
  gap: 8px;
}

.doors-answer-slot {
  width: 40px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.doors-answer-slot:not(:empty) {
  border-style: solid;
  border-color: var(--accent);
}

/* Reduced from 50x46px per explicit follow-up instruction ("reduce the
   number pad") -- frees up more vertical room for the scrollable guess
   history above it. */
.doors-keypad {
  display: grid;
  grid-template-columns: repeat(6, 40px);
  gap: 5px;
}

.doors-key {
  width: 40px;
  height: 36px;
  border-radius: 9px;
  background: #1b2430;
  border: 2px solid var(--border);
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: transform .1s ease, background .15s ease;
}

.doors-key:active {
  transform: scale(0.94);
}

.doors-key:disabled {
  opacity: .35;
  cursor: default;
}

.doors-key-primary {
  background: var(--accent);
  color: #06170f;
  border-color: var(--accent);
}

/* -- Overlays (start/solved) -- same pattern as every other game. */

.doors-overlay {
  position: absolute;
  inset: 0;
  z-index: 2; /* above both the door canvas (0) and .doors-content (1) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 13, 16, .72);
  border-radius: var(--radius);
}

.doors-overlay[hidden] { display: none; }

.doors-overlay-card {
  text-align: center;
  padding: 24px;
  max-width: 340px;
}

.doors-overlay-title {
  font-family: Georgia, serif;
  font-size: 26px;
  color: var(--text);
  margin-bottom: 8px;
}

.doors-overlay-text {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 18px;
}