/* Hallmark · route: custom (bespoke, shared system with ddrabik.eu) · structure: app shell → join / lobby grid / game stage / final boards
 * idea: "zimowa skocznia za biurowcem: ptaki na nartach" · 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; }
}