/* styles/game.css  Skyline: a tower in a pixel city at dusk. Single dark theme. */

:root {
  --night: #1d1340;
  --tower: #2b2540;
  --tower-edge: #3b3456;
  --ink: #14101f;
  --lit: #ffcf6b;
  --dim: #3a3558;
  --dim-lit: #54465f;
  --warm: #7a5a32;
  --amber: #ffa63d;
  --paper: #f2ead8;
  --key: #463f66;
  --key-edge: #0d0a16;

  --gutter: 16px;
  --win-w: clamp(44px, 12.5vw, 58px);
  --win-h: 58px;
  --win-gap: 4px;

  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-letters: ui-monospace, "Courier New", monospace;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--paper);
  font-family: var(--font-ui);
  /* Dusk sky fallback; the city canvas (drawn later) sits on top of it. */
  background-color: var(--night);
  background-image: linear-gradient(to bottom,
    #1d1340 0%, #26174d 30%, #3f1f5d 55%, #6e2f66 75%, #a8476a 90%, #d76f5e 100%);
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
}

/* The scene is the part of the viewport above the dock (keyboard / end panel). main.js sets
   --dock-h from the dock's measured height; the strip behind the dock is plain pavement. */
#city {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - var(--dock-h, 0px));
  display: block;
  z-index: 0;
  pointer-events: none;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

body::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--dock-h, 0px);
  background: #17112a;
  z-index: 0;
  pointer-events: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- page grid: header / tower (fills, scrolls) / toast / dock ---------- */

.app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: 100%;
  max-width: 560px;
  height: 100vh;
  height: 100dvh;
  min-height: 460px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- header ---------- */

.top {
  padding: 10px 0 6px;
  border-bottom: 2px solid rgba(20, 16, 31, 0.6);
}

.top-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.title {
  margin: 0;
  font-family: var(--font-letters);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.22em;
  color: var(--lit);
  text-shadow: 2px 2px 0 var(--ink);
}

.date {
  margin: 0;
  font-family: var(--font-letters);
  font-size: 0.85rem;
  opacity: 0.85;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 4px 0 0;
  font-size: 0.9rem;
}

/* ---------- stage: the scrolling tower region ---------- */

.stage {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* The street painted on the canvas is the bottom 14% of the scene (viewport minus dock); the
     stage ends 34px (the toast row) above the scene's bottom, so this padding stands the tower on it. */
  padding: 0 0 max(0px, calc((100vh - var(--dock-h, 0px)) * 0.14 - 34px));
  padding-bottom: max(0px, calc((100dvh - var(--dock-h, 0px)) * 0.14 - 34px));
  scrollbar-width: thin;
  scrollbar-color: var(--dim) transparent;
}

.loading {
  margin: auto;
  font-family: var(--font-letters);
  opacity: 0.8;
}

/* The tower stands on the painted street at the bottom of the stage; board.js sizes the windows
   so it fits. Only when it cannot fit at the minimum window height does the stage scroll. */
.tower-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto auto 0;
  padding: 4px 0 0;
}

.antenna {
  position: relative;
  width: 6px;
  height: 12px;
  background: var(--ink);
}

.antenna::after {
  content: "";
  position: absolute;
  top: -6px;
  left: -2px;
  width: 10px;
  height: 8px;
  background: #e2475b;
  box-shadow: 0 0 8px #e2475b;
}

.tower {
  position: relative;
  padding: 6px;
  background: var(--tower);
  border: 4px solid var(--ink);
  border-bottom: 0;
  box-shadow: inset 4px 4px 0 var(--tower-edge), inset -4px 0 0 #221d33;
  transition: box-shadow 0.4s ease;
}

.floors {
  display: flex;
  flex-direction: column;
  gap: var(--win-gap);
}

.row {
  display: grid;
  grid-template-columns: repeat(4, var(--win-w));
  gap: var(--win-gap);
}

/* ---------- windows ---------- */

.win {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--win-h);
  background: var(--dim);
  border: 3px solid var(--ink);
  font-family: var(--font-letters);
  font-weight: 700;
  font-size: calc(min(var(--win-w), var(--win-h) * 1.1) * 0.5);
  line-height: 1;
  color: var(--paper);
  /* a window mullion */
  background-image: linear-gradient(to bottom, transparent 46%, rgba(20, 16, 31, 0.35) 46%, rgba(20, 16, 31, 0.35) 54%, transparent 54%);
}

/* end (top, target) and start (bottom): dim lit windows */
.row-end .win,
.row-start .win {
  background-color: var(--dim-lit);
  color: var(--lit);
  box-shadow: inset 0 0 0 2px rgba(255, 207, 107, 0.25);
}

/* Fallback for a tower too tall to fit: the goal row stays pinned to the top of the scrolling stage. */
.row-end {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--tower);
}

.row-empty .win { color: transparent; }

.row-active .win { border-color: rgba(242, 234, 216, 0.55); }
.row-active .w-blank { border-style: dashed; }
.row-active .w-typed { background-color: #4d4775; }

/* accepted guesses: the row is lit warm */
.row-guess .win { background-image: none; }
.w-absent { background-color: var(--warm); color: var(--paper); }
.w-present {
  background-color: var(--warm);
  color: var(--paper);
  box-shadow: inset 0 0 0 3px var(--amber);
}
.w-correct {
  background-color: var(--lit);
  color: var(--ink);
  box-shadow: 0 0 10px rgba(255, 207, 107, 0.75);
}

/* win: the whole tower and the goal row glow gold */
.app[data-status="won"] .tower {
  box-shadow: inset 4px 4px 0 var(--tower-edge), 0 0 28px rgba(255, 207, 107, 0.55);
}
.app[data-status="won"] .row-end .win {
  background-color: var(--lit);
  color: var(--ink);
  box-shadow: 0 0 14px rgba(255, 207, 107, 0.9);
}
.app[data-status="lost"] .row-empty .win { opacity: 0.6; }

/* rejected guess */
.shake { animation: shake 0.36s ease-in-out; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ---------- toast line (reserved height so nothing jumps or overlaps) ---------- */

.toast {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 4px 0;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  color: var(--lit);
  text-shadow: 1px 1px 0 var(--ink);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.toast.show { opacity: 1; }

/* ---------- dock: keyboard or end panel ---------- */

.dock {
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

.keyboard {
  --key-gap: 3px;
  margin: 0 -8px; /* keys use the gutter: 8px from the screen edge on phones */
  --key-unit: calc((100% - 9 * var(--key-gap)) / 10);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.kb-row {
  display: flex;
  justify-content: center;
  gap: var(--key-gap);
}

.key {
  flex: 0 1 var(--key-unit);
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  border-bottom: 4px solid var(--key-edge);
  background: var(--key);
  color: var(--paper);
  font-family: var(--font-letters);
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.key-wide {
  flex-basis: calc(var(--key-unit) * 1.5);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.key:active { transform: translateY(2px); border-bottom-width: 2px; }
.key:disabled { opacity: 0.5; cursor: default; }

.key:focus-visible,
.btn:focus-visible,
.share-fallback:focus-visible {
  outline: 3px solid var(--lit);
  outline-offset: 2px;
}

/* ---------- panels ---------- */

.panel {
  padding: 14px 16px;
  background: rgba(20, 16, 31, 0.92);
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--dim);
  text-align: center;
}

.panel p { margin: 0 0 12px; line-height: 1.4; }

.panel-title {
  margin: 0 0 8px;
  font-family: var(--font-letters);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lit);
}

.retry-panel { margin: auto 0; }

.btn {
  min-height: 48px;
  min-width: 120px;
  padding: 0 24px;
  border: 0;
  border-bottom: 4px solid #a8792b;
  border-radius: 4px;
  background: var(--lit);
  color: var(--ink);
  font-family: var(--font-letters);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.btn:active { transform: translateY(2px); border-bottom-width: 2px; }

.share-fallback {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  padding: 8px 10px;
  border: 2px solid var(--dim);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-letters);
  font-size: 0.8rem;
}

.share-status { margin: 10px 0 0 !important; min-height: 1.2em; font-size: 0.9rem; }

/* ---------- desktop ---------- */

@media (min-width: 720px) {
  :root { --win-w: 58px; }
  .top { padding-top: 18px; }
  .title { font-size: 1.9rem; }
  .dock { padding-bottom: 20px; }
  .key { min-height: 54px; }
}

/* short screens: give the tower more room */
@media (max-height: 600px) {
  .top { padding-top: 6px; }
  .key { min-height: 44px; }
  .keyboard { gap: 5px; }
}

/* ---------- reduced motion: no shake, flicker or smooth scroll ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- shared-result page (/s/) ---------- */

.share-page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px var(--gutter) 32px;
  text-align: center;
}

.share-tower { padding: 12px; background: var(--tower); border: 4px solid var(--ink); }
.share-summary, .share-note { margin: 0; line-height: 1.4; }
.share-play { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }