/* Hallmark · route: custom (bespoke) · structure: one-scene puzzle → reveal room · idea: "zamknięte drzwi z trzema zamkami: klucz, domofon, pukanie"
 * paper: oklch(94% 0.014 80) · accent: oklch(43% 0.085 245) door + oklch(78% 0.12 82) brass · display: Bricolage Grotesque · body: Instrument Sans
 * axes: light / grotesk-display / cool-blue + brass · enrichment: Tier A CSS art (door) · gates: all-pass · studied: no
 * pre-emit critique: P5 H4 E4 S5 R4 V5
 */

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

html,
body { overflow-x: clip; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--color-wall);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
}

button,
input { font: inherit; color: inherit; }

button { cursor: pointer; }

[hidden] { display: none !important; }

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

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--color-focus-halo);
}

/* ---- hall -------------------------------------------------------------- */

.hall {
  --door-w: min(64vw, 16.5rem, 29svh);
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-sm) var(--space-md);
  overflow: clip;
}

.scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-md);
  width: 100%;
}

@media (min-width: 46rem) {
  .scene {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }
  .doorway { grid-column: 2; }
  .intercom { grid-column: 3; justify-self: start; margin-left: var(--space-lg); }
}

.doorway {
  position: relative;
  display: grid;
  justify-items: center;
}

/* floor starts where the door ends */
.doorway::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--door-w) * 2.1 + 0.75rem);
  left: -100vw;
  right: -100vw;
  height: 100vh;
  background: linear-gradient(to bottom, var(--color-floor), var(--color-floor-2));
}

/* ---- door -------------------------------------------------------------- */

.door {
  position: relative;
  width: calc(var(--door-w) + 1.5rem);
  height: calc(var(--door-w) * 2.1 + 0.75rem);
  padding: 0.75rem 0.75rem 0;
  background: var(--color-frame);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  box-shadow: inset 0 0 0 1px var(--color-frame-shade), 0 1px 0 var(--color-frame-shade);
  perspective: 1400px;
}

.behind {
  position: absolute;
  inset: 0.75rem 0.75rem 0;
  background: var(--color-panel);
  z-index: 0;
}

.door-leaf {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: var(--color-door);
  border-radius: 2px 2px 0 0;
  box-shadow: inset 0 0 0 1px var(--color-door-2);
  transform-origin: left center;
  transition: transform var(--dur-door) var(--ease-in-out);
}

/* upper raised panel */
.door-leaf::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 6%;
  height: 55%;
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px var(--color-door-2), inset 2px 2px 0 3px var(--color-door-3);
  pointer-events: none;
}

.door.is-open .door-leaf { transform: rotateY(-78deg); }

.door-leaf.is-knocked { animation: knock 160ms var(--ease-out); }

@keyframes knock {
  0% { transform: translateX(0); }
  35% { transform: translateX(-2px); }
  70% { transform: translateX(1px); }
  100% { transform: translateX(0); }
}

.plate {
  position: absolute;
  top: 9%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.2em 0.7em;
  background: var(--color-brass);
  color: var(--color-brass-ink);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--color-brass-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--door-w) * 0.075);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* deadbolts on the lock edge */
.locks {
  position: absolute;
  right: 4%;
  top: 30%;
  display: grid;
  gap: calc(var(--door-w) * 0.035);
}

.bolt {
  display: block;
  width: calc(var(--door-w) * 0.05);
  height: calc(var(--door-w) * 0.05);
  border-radius: 50%;
  background: var(--color-lock);
  box-shadow: inset 0 0 0 2px var(--color-brass);
  transition: background-color var(--dur-base) var(--ease-out);
}

.bolt.is-open { background: var(--color-ok); }

/* sticky note — flips */
.note {
  position: absolute;
  top: 21%;
  left: 17%;
  width: 46%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  /* own perspective: the note flips in its own 3D space, never through the door plane */
  transform: perspective(40rem) rotate(-4deg) rotateY(0deg);
  transform-style: preserve-3d;
  transition: transform 420ms var(--ease-out);
}

.note[aria-pressed="true"] { transform: perspective(40rem) rotate(-4deg) rotateY(180deg); }
.note:hover:not([aria-pressed="true"]) { transform: perspective(40rem) rotate(-2deg) translateY(-2px) rotateY(0deg); }
.note:active:not([aria-pressed="true"]) { transform: perspective(40rem) rotate(-4deg) scale(0.98) rotateY(0deg); }

.note-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0.5em;
  background: var(--color-note);
  color: var(--color-note-ink);
  font-size: calc(var(--door-w) * 0.058);
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 6px 10px -6px var(--color-shadow);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.note-back {
  transform: rotateY(180deg);
  background: var(--color-note-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--door-w) * 0.11);
}

.sign {
  position: absolute;
  top: 63.5%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.15em 0.6em;
  background: var(--color-frame);
  color: var(--color-ink-2);
  border-radius: 2px;
  font-size: calc(var(--door-w) * 0.05);
  font-weight: 600;
  white-space: nowrap;
}

.handle {
  position: absolute;
  right: 9%;
  top: 47%;
  width: 17%;
  height: calc(var(--door-w) * 0.045);
  background: var(--color-brass);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 -2px 0 var(--color-brass-2), 0 3px 6px -3px var(--color-shadow);
  transform-origin: right center;
}

.handle::after {
  content: "";
  position: absolute;
  right: -4%;
  top: 50%;
  width: calc(var(--door-w) * 0.09);
  height: calc(var(--door-w) * 0.09);
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--color-brass);
  box-shadow: inset 0 0 0 2px var(--color-brass-2);
}

.keyhole {
  position: absolute;
  right: calc(9% - 0.9rem);
  top: 51.5%;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.keyhole::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.9rem;
  height: 1.35rem;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  background: var(--color-brass);
  box-shadow: inset 0 0 0 1px var(--color-brass-2);
}

.keyhole::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.3rem;
  height: 0.7rem;
  transform: translate(-50%, -40%);
  border-radius: 0.2rem 0.2rem 0 0;
  background: var(--color-panel);
}

.keyhole:hover::before { background: var(--color-note-2); }
.keyhole:active::before { transform: translate(-50%, -50%) scale(0.94); }
.keyhole.is-turned::after { transform: translate(-50%, -40%) rotate(90deg); transition: transform var(--dur-base) var(--ease-out); }

/* lower panel = knock target */
.knock-zone {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 70%;
  bottom: 5%;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--color-door-2), inset 2px 2px 0 3px var(--color-door-3);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.knock-zone:hover { background: var(--color-door-3); }
.knock-zone:active { background: var(--color-door-2); }

.door-leaf button:disabled { cursor: default; }

/* ---- mat & key --------------------------------------------------------- */

.mat-area {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--door-w) * 1.15);
  height: 3rem;
  margin-top: 0.4rem;
}

.mat {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 4px;
  background: var(--color-mat);
  box-shadow: inset 0 0 0 3px var(--color-mat-2), 0 4px 8px -6px var(--color-shadow);
  color: var(--color-mat-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: transform 520ms var(--ease-out);
}

.mat:hover { transform: rotate(-1deg); }
.mat:active { transform: scale(0.99); }
.mat[aria-expanded="true"] { transform: translateX(62%) rotate(6deg); }

.key {
  position: absolute;
  z-index: 1;
  width: 3.25rem;
  height: 2.75rem;
  padding: 0 0.25rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  transition: transform var(--dur-base) var(--ease-out);
}

.key svg { width: 100%; fill: var(--color-brass); stroke: var(--color-brass-2); stroke-width: 1; }
.key .key-hole { fill: var(--color-floor); }
.key:hover { transform: translateY(-2px) rotate(-6deg); }
.key:active { transform: scale(0.95); }

body.has-key .keyhole::before { background: var(--color-note); }

/* ---- intercom ---------------------------------------------------------- */

.intercom {
  display: grid;
  gap: var(--space-2xs);
  width: min(100%, 12.5rem);
  padding: var(--space-xs);
  background: var(--color-panel);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 20px -14px var(--color-shadow);
  color: var(--color-panel-ink);
}

.intercom-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-panel-ink);
}

.intercom-screen {
  display: block;
  padding: 0.35rem 0.5rem;
  min-height: 2.25rem;
  background: var(--color-screen);
  color: var(--color-screen-ink);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1.5rem;
  overflow-wrap: anywhere;
}

.intercom-input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.6rem;
  background: var(--color-panel-2);
  color: var(--color-panel-ink);
  border: 1px solid var(--color-panel-2);
  border-radius: var(--radius-sm);
}

.intercom-input::placeholder { color: var(--color-muted); }
.intercom-input:hover { border-color: var(--color-muted); }
.intercom-input[aria-invalid="true"] { border-color: var(--color-lock); }
.intercom-input:disabled { opacity: 0.6; cursor: not-allowed; }

.intercom-btn {
  min-height: 2.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-brass);
  color: var(--color-brass-ink);
  font-weight: 600;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.intercom-btn:hover { background: var(--color-note); }
.intercom-btn:active { transform: translateY(1px); }
.intercom-btn:disabled { background: var(--color-ok); color: var(--color-screen-ink); cursor: default; transform: none; }

.intercom.is-wrong { animation: buzz 260ms var(--ease-out); }

@keyframes buzz {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}

/* ---- status ------------------------------------------------------------ */

.status {
  display: grid;
  justify-items: center;
  gap: var(--space-2xs);
  max-width: 30rem;
  text-align: center;
}

.checklist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs) var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

.checklist li { display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; }

.dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--color-lock);
  transition: background-color var(--dur-base) var(--ease-out);
}

.checklist li.is-open { color: var(--color-ink); }
.checklist li.is-open .dot { background: var(--color-ok); }

.say {
  margin: 0;
  min-height: 3em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.25;
  color: var(--color-ink);
  text-wrap: balance;
}

.hint-btn {
  min-height: 2.75rem;
  padding: 0 var(--space-xs);
  border: 0;
  background: none;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

.hint-btn:hover { color: var(--color-ink); }
.hint-btn:active { transform: translateY(1px); }
.hint-btn:disabled { opacity: 0.5; cursor: default; text-decoration: none; }

/* ---- room -------------------------------------------------------------- */

.room {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: safe center;
  padding: var(--space-lg) var(--space-sm);
  overflow-y: auto;
  background: var(--color-panel);
  color: var(--color-panel-ink);
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
}

.room.is-shown { opacity: 1; }
.room:focus { outline: none; }

.room-inner {
  display: grid;
  gap: var(--space-md);
  width: min(100%, 34rem);
}

.room h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-brass);
  overflow-wrap: anywhere;
  min-width: 0;
}

.room p { margin: 0; }


.tally {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: 0;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-panel-2);
  border-bottom: 1px solid var(--color-panel-2);
}

.tally dt { font-size: var(--text-xs); color: var(--color-panel-muted); letter-spacing: 0.04em; }
.tally dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
}

.best { color: var(--color-panel-ink); min-height: 1.5em; }

/* ---- game: estymacja --------------------------------------------------- */

.game {
  display: grid;
  gap: var(--space-xs);
}

.game h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-panel-ink);
  text-wrap: balance;
}

.game-intro { color: var(--color-panel-muted); text-wrap: pretty; }

.game-card {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background: var(--color-panel-2);
  border-radius: var(--radius-md);
}

.g-round {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-panel-muted);
}

.g-task {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.25;
  min-height: 2.5em;
  overflow-wrap: anywhere;
}

.g-target { color: var(--color-panel-muted); }
.g-target b { color: var(--color-note); font-weight: 600; }

.g-count {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-panel-ink);
}

.g-count[data-state="good"] { color: var(--color-ok); }
.g-count[data-state="meh"] { color: var(--color-brass); }
.g-count[data-state="bad"] { color: var(--color-lock); }

.g-track {
  position: relative;
  height: 0.75rem;
  margin: var(--space-2xs) 0;
  background: var(--color-panel);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.g-fill {
  position: absolute;
  inset: 0;
  background: var(--color-brass);
  transform-origin: left center;
  transform: scaleX(0);
}

.g-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  background: var(--color-note);
  box-shadow: 0 0 0 1px var(--color-panel);
}

.g-say { min-height: 3em; color: var(--color-panel-ink); text-wrap: pretty; }

.g-btn { width: 100%; min-height: 3.25rem; font-size: var(--text-lg); touch-action: manipulation; user-select: none; }
.g-btn[data-state="running"] { background: var(--color-note); }
.g-btn[data-state="running"]:hover { background: var(--color-note-2); }
.room-next { color: var(--color-panel-ink); }

.room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.btn:active { transform: translateY(1px); }
.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.btn-primary { background: var(--color-brass); color: var(--color-brass-ink); }
.btn-primary:hover { background: var(--color-note); }

.btn-quiet { background: transparent; color: var(--color-panel-ink); border-color: var(--color-panel-2); }
.btn-quiet:hover { background: var(--color-panel-2); }

.noscript {
  position: fixed;
  inset: auto var(--space-sm) var(--space-sm);
  margin: 0;
  padding: var(--space-xs);
  background: var(--color-panel);
  color: var(--color-panel-ink);
  border-radius: var(--radius-sm);
}

.noscript a { color: var(--color-brass); }

/* ---- small screens ----------------------------------------------------- */

@media (max-width: 26rem) {
  .hall { --door-w: min(60vw, 27svh); gap: var(--space-sm); }
  .say { font-size: var(--text-base); }
  .tally dd { font-size: var(--text-lg); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  .door-leaf,
  .note,
  .mat,
  .key { transition-duration: 1ms; }
  .door.is-open .door-leaf { transform: none; opacity: 0; transition: opacity 150ms linear; }
  .room { transition-duration: 150ms; }
}