/* Hallmark · route: custom (bespoke, shared system with ddrabik.eu) · structure: app shell → join / lobby grid / tall tower stage + live board / final board
 * idea: "ptaki skaczą po belkach drapacza chmur, niebo ciemnieje z wysokością" · paper: oklch(94% 0.014 80) · accent: oklch(43% 0.085 245) + brass
 * display: Bricolage Grotesque · body: Instrument Sans · axes: light / grotesk-display / cool-blue + brass · enrichment: Tier A canvas art
 * pre-emit critique: P4 H4 E4 S5 R4 V4
 */

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

html,
body { overflow-x: clip; }

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; }

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

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

.bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-frame-shade);
  background: var(--color-frame);
}

.mark {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}

.mark:hover { color: var(--color-door); }
.bar-title { color: var(--color-ink-2); font-size: var(--text-sm); white-space: nowrap; }

.room-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.25rem;
  max-width: 50vw;
  padding: 0 var(--space-xs);
  border: 1px solid var(--color-frame-shade);
  border-radius: var(--radius-pill);
  background: var(--color-wall);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}

.room-chip > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.room-chip-action { color: var(--color-muted); font-weight: 500; }
.room-chip:hover { background: var(--color-wall-2); }
.room-chip:active { transform: translateY(1px); }

.conn { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.room-chip[hidden] + .conn { margin-left: auto; }
.conn-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--color-brass); }
.conn[data-state="open"] .conn-dot { background: var(--color-ok); }
.conn[data-state="closed"] .conn-dot { background: var(--color-lock); }

@media (max-width: 34rem) {
  .bar-title, .conn-label { display: none; }
}

main { padding: var(--space-md) var(--space-sm) var(--space-xl); }

.screen { width: min(100%, 72rem); margin: 0 auto; }

/* ---- shared controls --------------------------------------------------- */

.card {
  background: var(--color-frame);
  border: 1px solid var(--color-frame-shade);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

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

.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--color-brass); color: var(--color-brass-ink); }
.btn-primary:hover:not(:disabled) { background: var(--color-note); }

.field-label { display: block; margin: var(--space-sm) 0 var(--space-3xs); font-weight: 600; font-size: var(--text-sm); }

.text-input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 var(--space-xs);
  border: 1px solid var(--color-frame-shade);
  border-radius: var(--radius-sm);
  background: var(--color-wall);
}

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

.hint { margin: var(--space-3xs) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.field-error { margin: var(--space-xs) 0 0; color: var(--color-danger); font-size: var(--text-sm); font-weight: 600; }

/* ---- join -------------------------------------------------------------- */

.join { width: min(100%, 28rem); margin: var(--space-xl) auto 0; display: grid; }
.join h1 { font-size: var(--text-2xl); }
.join .lead { margin: var(--space-xs) 0 var(--space-2xs); color: var(--color-ink-2); text-wrap: pretty; }
.join .btn { margin-top: var(--space-md); }

/* ---- lobby ------------------------------------------------------------- */

.lobby {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 56rem) {
  .lobby { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
}

.lobby h2 { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.lobby h3 { font-size: var(--text-lg); margin: var(--space-md) 0 var(--space-2xs); }
.lobby-side h3:first-child { margin-top: 0; }

.birds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bird-card {
  display: grid;
  justify-items: start;
  gap: var(--space-3xs);
  width: 100%;
  height: 100%;
  padding: var(--space-sm);
  border: 2px solid var(--color-frame-shade);
  border-radius: var(--radius-md);
  background: var(--color-frame);
  text-align: left;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.bird-card canvas { align-self: center; justify-self: center; margin-bottom: var(--space-2xs); }
.bird-card b { font-family: var(--font-display); font-size: var(--text-lg); }
.bird-blurb { font-size: var(--text-sm); color: var(--color-ink-2); }
.bird-owner { margin-top: var(--space-2xs); font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); }
.bird-card:hover:not(:disabled) { border-color: var(--color-brass); transform: translateY(-2px); }
.bird-card:active:not(:disabled) { transform: translateY(0); }
.bird-card[aria-pressed="true"] { border-color: var(--color-door); background: var(--color-wall); }
.bird-card[aria-pressed="true"] .bird-owner { color: var(--color-door); }
.bird-card:disabled { opacity: 0.55; cursor: not-allowed; }

.people, .hills { margin: 0; padding-left: 1.2rem; font-size: var(--text-sm); }
.people { list-style: none; padding: 0; display: grid; gap: var(--space-3xs); }
.people li { padding: var(--space-2xs) var(--space-xs); background: var(--color-frame); border-radius: var(--radius-sm); }
.people li.is-offline { color: var(--color-muted); }
.hills li { margin: var(--space-3xs) 0; }

.lobby-cta { margin-top: var(--space-md); display: grid; gap: var(--space-2xs); }
.lobby-cta .btn { width: 100%; }

.howto { margin-top: var(--space-md); font-size: var(--text-sm); }
.howto summary { cursor: pointer; font-weight: 600; min-height: 2.75rem; display: flex; align-items: center; }
.howto ol { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--space-2xs); }

/* ---- game -------------------------------------------------------------- */

.game-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.game-head h2 { font-size: var(--text-xl); }
.game-sub { margin: var(--space-3xs) 0 0; color: var(--color-ink-2); font-size: var(--text-sm); }

.wind {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-frame);
  border: 1px solid var(--color-frame-shade);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.wind-label { font-size: var(--text-xs); color: var(--color-muted); }
.wind-arrow { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--color-door); line-height: 1; }
.wind-value { font-weight: 600; font-size: var(--text-sm); }

.stage {
  position: relative;
  height: clamp(16rem, 56svh, 32rem);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--color-frame-shade);
  background: var(--color-sky);
}

.stage canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; cursor: pointer; }

.stage-hud {
  position: absolute;
  top: var(--space-2xs);
  left: var(--space-2xs);
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-3xs) var(--space-xs);
  background: var(--color-frame);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  pointer-events: none;
}

.hud-k { color: var(--color-muted); font-size: var(--text-xs); }
.stage-hud b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

.gauge {
  position: absolute;
  top: var(--space-2xs);
  right: var(--space-2xs);
  width: min(40%, 14rem);
  height: 0.9rem;
  background: var(--color-frame);
  border: 1px solid var(--color-frame-shade);
  border-radius: var(--radius-pill);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}

.gauge.is-on { opacity: 1; }
/* zone = 30° ± 8° on a 0–60° scale */
.gauge-zone { position: absolute; top: 2px; bottom: 2px; left: 36.67%; width: 26.67%; background: var(--color-screen); border-radius: var(--radius-pill); }
.gauge.is-good .gauge-zone { background: var(--color-ok); }
.gauge-mark { position: absolute; top: -3px; bottom: -3px; width: 4px; margin-left: -2px; background: var(--color-ink); border-radius: 2px; }

.stage-msg {
  position: absolute;
  left: var(--space-2xs);
  right: var(--space-2xs);
  bottom: var(--space-2xs);
  margin: 0;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-frame);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1.3;
  pointer-events: none;
}

.stage-msg:empty { display: none; }
.stage.is-cue .stage-msg { background: var(--color-note); }

.controls {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.controls .btn { flex-direction: column; min-height: 3.5rem; padding: var(--space-2xs); touch-action: none; user-select: none; -webkit-user-select: none; gap: 0; }
.controls small { font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); }
.btn-pad { background: var(--color-frame); border-color: var(--color-frame-shade); font-size: var(--text-lg); }
.btn-pad:hover { background: var(--color-wall-2); }
.btn-pad:active { background: var(--color-frame-shade); }
.btn-act { font-size: var(--text-lg); }
.controls.is-idle { opacity: 0.45; }

.round-board { margin-top: var(--space-md); }
.round-board h3 { font-size: var(--text-lg); margin-bottom: var(--space-2xs); }

.board { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3xs); }

.board li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-3xs) var(--space-xs);
  background: var(--color-frame);
  border-radius: var(--radius-sm);
}

.board li.is-me { box-shadow: inset 3px 0 0 var(--color-door); }
.board-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-val { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--text-sm); text-align: right; }

@media (max-width: 30rem) {
  .board li { grid-template-columns: auto minmax(0, 1fr); }
  .board-val { grid-column: 2; text-align: left; }
}

/* ---- final ------------------------------------------------------------- */

.final h2 { font-size: var(--text-2xl); margin-bottom: var(--space-md); }
.final h3 { font-size: var(--text-lg); margin-bottom: var(--space-2xs); }
.final-cols { display: grid; gap: var(--space-lg); }
@media (min-width: 52rem) { .final-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.board-final li:first-child { background: var(--color-note); }
.final-cta { margin-top: var(--space-lg); display: grid; justify-items: start; gap: var(--space-2xs); }

@media (prefers-reduced-motion: reduce) {
  .btn, .bird-card, .gauge { transition-duration: 1ms; }
}


/* ---- tower game layout ------------------------------------------------- */

.howto ul { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--space-2xs); }

.game {
  display: grid;
  gap: var(--space-md);
  justify-content: center;
}

@media (min-width: 52rem) {
  .game { grid-template-columns: minmax(0, 30rem) 18rem; align-items: start; }
}

.tower-wrap { width: min(100%, 30rem); margin: 0 auto; }

.game .stage {
  height: clamp(26rem, 76svh, 52rem);
  background: var(--color-sky);
}

.stage canvas { cursor: default; }

.stage-hud { flex-wrap: wrap; right: var(--space-2xs); }
.hud-combo { display: inline-flex; align-items: center; gap: 0.35em; }
.combo-bar { display: inline-block; width: 3rem; height: 0.4rem; background: var(--color-wall-2); border-radius: var(--radius-pill); overflow: hidden; }
.combo-bar span { display: block; height: 100%; background: var(--color-brass); transform-origin: left center; transform: scaleX(0); }

.stage-msg { bottom: auto; top: 3.4rem; text-align: center; }

.watch {
  position: absolute;
  left: var(--space-2xs);
  right: var(--space-2xs);
  bottom: var(--space-2xs);
  margin: 0;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-panel);
  color: var(--color-panel-ink);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
}

.controls { grid-template-columns: 1fr 1.4fr 1fr; }

.game-side h3 { font-size: var(--text-lg); margin-bottom: var(--space-2xs); }
.board li.is-down .board-name { color: var(--color-muted); text-decoration: line-through; }

.final { width: min(100%, 40rem); margin: 0 auto; }
.final .board-val { white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  .controls { display: none; }
}