:root {
  --bg: #14161a;
  --panel: #1f2329;
  --border: #3a414b;
  --text: #e6e8ea;
  --muted: #98a1ab;
  --accent: #ffb000;
  --danger: #ff4d4d;
  --ok: #5ad17a;
  font-family: 'Courier New', Courier, monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

#app {
  max-width: 48rem;
  margin: 0 auto;
  padding: 3rem 1rem 2rem;
}

.screen {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--panel);
  border: 2px solid var(--border);
  padding: 1.5rem;
  max-width: 28rem;
  margin: 0 auto;
}

/* The manual is a fixed full-window layout: tabs on top, the page scrolling inside its own area,
   and the signal buttons docked at the bottom, so nothing needs the whole page to scroll. */
.screen.manual-screen {
  position: fixed;
  inset: 0;
  z-index: 5;
  max-width: none;
  margin: 0;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: var(--bg);
  overflow: hidden;
}

.manual-screen > * {
  width: 100%;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

.manual-header {
  position: relative;
  z-index: 11; /* above the results backdrop */
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.manual-header h2 {
  font-size: 1.1rem;
}

.manual-header .manual-clock {
  flex: 1;
  text-align: center;
}

.manual-menu {
  display: flex;
  gap: 0.4rem;
}

.manual-menu button {
  padding: 0.35rem 0.6rem;
  font-size: 0.75rem;
}

.manual-message,
.manual-outcome {
  margin: 0 auto;
  flex-shrink: 0;
}

[hidden] {
  display: none !important;
}

h1,
h2 {
  margin: 0;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tagline {
  margin: 0 0 0.5rem;
  color: var(--muted);
}

label {
  color: var(--muted);
  font-size: 0.85rem;
  text-transform: uppercase;
}

input {
  padding: 0.75rem;
  background: var(--bg);
  border: 2px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}

input:hover:not(:disabled) {
  border-color: #5a6372;
}

input:focus {
  border-color: var(--accent);
}

input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

input:focus-visible,
button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

button {
  padding: 0.75rem 1rem;
  background: var(--accent);
  border: 2px solid #000;
  color: #000;
  font: inherit;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
}

button.secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.divider {
  margin: 0.5rem 0;
  color: var(--muted);
  text-align: center;
}

.room-code {
  font-size: 1.75rem;
  letter-spacing: 0.3em;
  color: var(--accent);
}

.player-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.player-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.player-list .offline {
  color: var(--muted);
}

.tag {
  color: var(--muted);
  font-size: 0.85rem;
}

.tag.ready {
  color: var(--ok);
}

.hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.role-label {
  margin: 0;
  font-size: 1.75rem;
  color: var(--accent);
  text-transform: uppercase;
}

.notice {
  margin: 1rem 0 0;
  padding: 0.75rem;
  border: 2px solid var(--accent);
  color: var(--accent);
}

/* A validation message shown inside the label of its field, with the field's border turned red. */
.field-error {
  margin-left: 0.5rem;
  color: var(--danger);
  font-weight: bold;
  text-transform: none;
}

.field-error:empty {
  display: none;
}

input[aria-invalid='true'],
input[aria-invalid='true']:hover,
input[aria-invalid='true']:focus {
  border-color: var(--danger);
}

input[aria-invalid='true']:focus-visible {
  outline-color: var(--danger);
}

.error {
  margin: 1rem 0 0;
  padding: 0.75rem;
  border: 2px solid var(--danger);
  color: var(--danger);
}

/* Settings and the connection status sit together in the top right corner. */
.topbar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.status {
  padding: 0.25rem 0.75rem;
  background: var(--panel);
  border-bottom-left-radius: 0;
  color: var(--muted);
  font-size: 0.8rem;
  z-index: 20;
}

.status[data-state='online'] {
  color: var(--ok);
}

.status[data-state='offline'] {
  color: var(--danger);
}

#game-root {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 10;
}

/* ---- The manual: a printed page seen from the reader's seat ---- */

.book {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  min-height: 0; /* lets the page inside shrink and scroll instead of growing the screen */
}

.book-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
  background: #e8e1cc;
  color: #1d1b16;
  border: 3px solid #5a5340;
  box-shadow: 4px 4px 0 #000;
}

.manual-keys {
  flex-shrink: 0;
  font-size: 0.75rem;
}

@media (max-height: 560px) {
  .manual-keys {
    display: none;
  }
}

.book-page h3 {
  margin: 0 0 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.manual-intro {
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.manual-tabs,
.manual-chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.manual-tabs button,
.manual-chips button {
  flex: 1;
  min-width: 5rem;
  padding: 0.55rem 0.5rem;
  background: #2b2d31;
  color: #cfd2d6;
  border: 2px solid #44474d;
  text-transform: none;
}

.manual-tabs button.active {
  background: #e8e1cc;
  color: #1d1b16;
  border-color: #e8e1cc;
  font-weight: bold;
}

.manual-chips button {
  flex: 0 1 auto;
  padding: 0.35rem 0.8rem;
  font-size: 0.9rem;
}

.manual-chips button.active {
  background: #ffb000;
  color: #1d1b16;
  border-color: #ffb000;
  font-weight: bold;
}

.book-page > div > div + div {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 2px dashed #5a5340;
}

.manual-table {
  width: 100%;
  border-collapse: collapse;
}

.manual-table th,
.manual-table td {
  padding: 0.5rem;
  border: 1px solid #5a5340;
  text-align: left;
  vertical-align: middle;
}

.manual-table th {
  background: #d3caab;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.otherwise-row td:first-child {
  font-weight: bold;
}

.matrix-rank {
  text-align: center;
  font-weight: bold;
}

.matrix-symbol {
  white-space: nowrap;
}

.matrix-name {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  color: #5a5340;
}

.glyph {
  display: inline-grid;
  grid-template-columns: repeat(7, 5px);
  grid-auto-rows: 5px;
  vertical-align: middle;
}

.glyph i.on {
  background: #1d1b16;
}

.flowchart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.flow-start {
  padding: 0.25rem 1rem;
  border: 2px solid #1d1b16;
  border-radius: 1rem;
  font-weight: bold;
}

.flow-node {
  width: 100%;
  max-width: 30rem;
  padding: 0.75rem;
  border: 2px solid #1d1b16;
  background: #f1ebd9;
}

.flow-node p {
  margin: 0 0 0.25rem;
}

.flow-yes {
  font-weight: bold;
}

.flow-no {
  font-size: 0.85rem;
  color: #5a5340;
}

.flow-end {
  background: #d3caab;
  font-weight: bold;
}

.flow-arrow {
  width: 2px;
  height: 1.25rem;
  background: #1d1b16;
  position: relative;
}

.flow-arrow::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: -5px;
  border: 6px solid transparent;
  border-top-color: #1d1b16;
  border-bottom: 0;
}

.game-controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  z-index: 11;
}

.game-role {
  color: var(--accent);
  font-weight: bold;
  text-transform: uppercase;
}

.game-message {
  flex: 1;
  min-width: 0;
  color: var(--danger);
  font-size: 0.85rem;
}

.game-controls button {
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
}

/* ---- The result banner the Mute sees (they have no bomb on screen) ---- */

.outcome-banner {
  padding: 1.25rem;
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  text-transform: uppercase;
  border: 4px solid;
}

.outcome-banner.exploded {
  background: #3a0d0d;
  color: #ff5a4a;
  border-color: #ff5a4a;
  animation: outcome-shake 0.5s 2;
}

.outcome-banner.defused {
  background: #0d2e16;
  color: #5ad96f;
  border-color: #5ad96f;
}

@keyframes outcome-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .outcome-banner.exploded { animation: none; }
}

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

.voice-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--muted);
}

.voice-status:empty {
  display: none;
}

.voice-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.voice-dot {
  width: 0.7rem;
  height: 0.7rem;
  background: #888;
  border: 2px solid #000;
}

.voice-link[data-state='connected'] .voice-dot { background: #5ad96f; }
.voice-link[data-state='connecting'] .voice-dot,
.voice-link[data-state='reconnecting'] .voice-dot { background: #ffb000; animation: voice-blink 0.8s steps(2) infinite; }
.voice-link[data-state='no-mic'] .voice-dot,
.voice-link[data-state='peer-offline'] .voice-dot { background: #ff5a4a; }

.voice-problem {
  color: #ff8a7a;
}

.voice-status button {
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
}

.voice-status.compact {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  font-size: 0.7rem;
  max-height: 60px;
  overflow: hidden;
}

@keyframes voice-blink {
  50% { opacity: 0.3; }
}

/* ---- The Mute's signal panel ---- */

.signal-dock {
  flex-shrink: 0;
  padding: 0.5rem;
  background: var(--panel);
  border: 2px solid var(--border);
}

.signal-dock-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.signal-dock h3 {
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--muted);
}

.signal-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.signal-main,
.signal-points {
  display: grid;
  gap: 0.35rem;
}

.signal-main {
  grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr));
}

.signal-points {
  grid-template-columns: auto repeat(6, minmax(2.2rem, 1fr));
  align-items: center;
}

.signal-points-label {
  padding-right: 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--muted);
}

.signal-button {
  padding: 0.55rem 0.35rem;
  font-size: 0.8rem;
}

.signal-button.signal-warning {
  background: #ff5a4a;
}

.signal-button.signal-pointer {
  background: transparent;
  color: var(--text);
  border-color: var(--accent);
  font-size: 1rem;
}

.signal-last {
  min-height: 1.2rem;
  margin: 0;
  font-weight: bold;
  color: var(--accent);
}

.signal-last.just-sent {
  animation: signal-pop 0.6s ease-out;
}

@keyframes signal-pop {
  0% { transform: scale(1.25); color: #fff; }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .signal-last.just-sent,
  .voice-link .voice-dot { animation: none !important; }
}

/* ---- The clock the Mute reads, and the results panel ---- */

.manual-clock {
  margin: 0;
  font-size: 2.2rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--text);
}

.manual-clock[data-urgency='danger'] { color: #ff5a4a; }
.manual-clock[data-urgency='critical'] { color: #ff5a4a; animation: voice-blink 0.5s steps(2) infinite; }

.results-panel {
  padding: 1rem;
  background: #14161a;
  border: 4px solid var(--accent);
  text-align: center;
}

.results-panel h3 {
  margin: 0 0 0.25rem;
  font-size: 1.4rem;
  text-transform: uppercase;
}

.results-panel p {
  margin: 0.25rem 0;
}

.results-panel button {
  margin-top: 0.5rem;
}

.results-panel[data-outcome='defused'] { border-color: #5ad96f; }
.results-panel[data-outcome='defused'] h3 { color: #5ad96f; }
.results-panel[data-outcome='exploded'] { border-color: #ff5a4a; }
.results-panel[data-outcome='exploded'] h3 { color: #ff5a4a; }


@media (prefers-reduced-motion: reduce) {
  .manual-clock[data-urgency='critical'] { animation: none; }
}

.copy-code {
  margin-left: 0.5rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  vertical-align: middle;
}

#copy-status:empty {
  display: none;
}


.manual-clock {
  font-size: 1.6rem;
}

/* ---- Pixel art drawn into the page ---- */

.px {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: inline-block;
  vertical-align: middle;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

/* ---- Landing page ---- */

.screen.landing {
  max-width: 56rem;
  gap: 1.5rem;
  padding: 0;
  background: transparent;
  border: 0;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 1rem 0;
  text-align: center;
}

.hero-title,
.hero-sub {
  margin: 0;
  line-height: 0;
  letter-spacing: normal;
}

.hero-sub {
  margin-top: 0.25rem;
}

.hero .tagline {
  margin: 0.5rem 0 0;
  font-size: 1.05rem;
}

/* The big bomb. The canvas is drawn at a whole number scale; on a very small screen the page shrinks it. */
.hero-bomb-big {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
  max-width: 100%;
}

.hero-bomb-big canvas {
  display: block;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 12px 0 rgba(0, 0, 0, 0.55));
}

@keyframes lamp-blink {
  50% { opacity: 0.25; }
}

/* The two ways in: big buttons under the bomb that open the host/join form. */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: 1rem;
}

.cta {
  flex: 1 1 14rem;
  max-width: 18rem;
  padding: 1rem 1.25rem;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  box-shadow: 4px 4px 0 #000;
}

.cta-join {
  background: #3ec6e8;
}

.play-dialog {
  width: min(94vw, 44rem);
  max-height: 92vh;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  color: var(--text);
}

.play-dialog::backdrop {
  background: rgba(0, 0, 0, 0.78);
}

.play-dialog[open] {
  animation: pop-in 0.2s steps(4) both;
}

.play-dialog .landing-card {
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 8px 8px 0 #000;
}

.play-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}

.play-head h2 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.play-close {
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
}

.play-dialog .error {
  margin: 0;
}

.landing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  background: var(--panel);
  border: 2px solid var(--border);
  box-shadow: 6px 6px 0 #000;
}

/* A hazard stripe along the top edge, like the edge of a bomb panel. */
.landing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: repeating-linear-gradient(135deg, var(--accent) 0 10px, #14161a 10px 20px);
  background-size: 28.28px 10px; /* one stripe period across, so sliding it sideways loops cleanly */
  animation: stripes 1.6s steps(8) infinite;
}

@keyframes stripes {
  to { background-position-x: 28.28px; }
}

.landing-card > label:first-child {
  margin-top: 0.5rem;
}

.landing-card #player-name {
  font-size: 1.15rem;
}

.landing-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-top: 0.5rem;
}

@media (min-width: 40rem) {
  .landing-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.action {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  background: #181b20;
  border: 2px solid var(--border);
}

.action {
  position: relative;
  border-top-width: 5px;
}

.action-host {
  border-color: var(--accent);
  background: #1d1c18;
}

.action-join {
  border-top-color: #3ec6e8;
}

.action-tag {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.action-host .action-tag { color: var(--accent); }
.action-join .action-tag { color: #3ec6e8; }

.action h3 {
  margin: 0;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.action p {
  margin: 0;
  flex: 1;
  color: var(--muted);
  font-size: 0.9rem;
}

.code-input {
  text-align: center;
  text-transform: uppercase;
  font-size: 1.6rem;
  letter-spacing: 0.5em;
  padding-left: 0.5em; /* balances the trailing letter spacing so the code looks centred */
}

.action-join h3 { color: #3ec6e8; }

.code-input[data-complete='true'] {
  border-color: var(--ok);
}

.code-input::placeholder {
  font-size: 1rem;
  letter-spacing: 0.3em;
  color: var(--border);
}

.role-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .role-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem 0.75rem;
  text-align: center;
  background: var(--panel);
  border: 2px solid var(--border);
  border-top-width: 6px;
}

.role-card[data-role='blind'] { border-top-color: #3ec6e8; }
.role-card[data-role='mute'] { border-top-color: #c1a8ff; }
.role-card[data-role='deaf'] { border-top-color: #ffb000; }

.role-card h3 {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.role-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.how-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .how-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.how-steps li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 1rem;
  background: #181b20;
  border-left: 4px solid var(--accent);
}

.how-steps strong {
  color: var(--accent);
  text-transform: uppercase;
}

.how-steps span {
  color: var(--muted);
  font-size: 0.9rem;
}

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

.screen.lobby {
  max-width: 46rem;
}

.lobby-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.lobby-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

@media (min-width: 44rem) {
  .lobby-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.code-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  background: #0b0d10;
  border: 2px dashed var(--accent);
}

.code-label {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.code-card .room-code {
  flex: 1;
  font-size: 2.5rem;
  line-height: 1;
  text-shadow: 3px 3px 0 #000;
}

.seats {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: #181b20;
  border: 2px solid var(--border);
}

.seat.empty {
  border-style: dashed;
  color: var(--muted);
}

.seat.offline {
  opacity: 0.7;
}

.seat-avatar {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  background: #0b0d10;
  border: 2px solid var(--border);
}

.seat.empty .seat-avatar {
  border-style: dashed;
  color: var(--border);
  font-size: 1.4rem;
}

.seat-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.seat-name {
  overflow: hidden;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seat-tags {
  color: var(--muted);
  font-size: 0.8rem;
}

.seat-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.lamp {
  width: 0.9rem;
  height: 0.9rem;
  background: #5c1414;
  border: 2px solid #000;
}

.seat.ready .lamp {
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
}

.seat.ready .seat-status {
  color: var(--ok);
}

.seat.offline .lamp {
  background: #3a414b;
}

.lobby-rule {
  text-align: center;
  font-size: 0.8rem;
}

/* ---- Lobby closed ---- */

.screen.closed {
  border-color: var(--accent);
  text-align: center;
}

.screen.closed #closed-message {
  margin: 0;
  font-size: 1.1rem;
}

/* ---- Reduced motion (the player's setting) ---- */

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  animation: none !important;
  transition: none !important;
}

.results-run {
  color: var(--muted);
  font-size: 0.85rem;
}

.results-record {
  color: var(--accent);
  font-weight: bold;
}

.personal-record {
  margin-top: 0.25rem;
  text-align: center;
}

/* ---- Settings ---- */

.settings-button {
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  background: var(--panel);
  color: var(--text);
  border: 2px solid var(--border);
}

.floating-settings {
  border-top: 0;
  border-right: 0;
}

/* The bomb screen and the manual have the button in their own header. */
body[data-screen='bomb'] .floating-settings,
body[data-screen='manual'] .floating-settings {
  display: none;
}

.link-button {
  margin-top: 0.25rem;
  padding: 0.3rem 0.5rem;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: underline;
}

.settings-dialog {
  width: min(92vw, 28rem);
  max-height: 90vh;
  padding: 0;
  overflow-y: auto;
  background: var(--panel);
  color: var(--text);
  border: 3px solid var(--accent);
  box-shadow: 8px 8px 0 #000;
  font-family: inherit;
}

.settings-dialog::backdrop {
  background: rgba(0, 0, 0, 0.75);
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}

.settings-form h2 {
  font-size: 1.2rem;
}

.settings-form fieldset {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0.75rem;
  border: 2px solid var(--border);
}

.settings-form legend {
  padding: 0 0.4rem;
  color: var(--accent);
  text-transform: uppercase;
  font-size: 0.85rem;
}

.setting-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-transform: none;
  color: var(--text);
  font-size: 0.9rem;
}

.setting-row input[type='range'] {
  width: 100%;
  padding: 0;
  accent-color: var(--accent);
}

.setting-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.25rem; /* a comfortable touch target */
  text-transform: none;
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
}

.setting-check input {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  accent-color: var(--accent);
}

.settings-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

/* ---- Transitions ---- */

@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: none; }
}

/* Stepped, so the motion looks like pixels moving rather than a smooth glide. */
.screen.enter {
  animation: screen-in 0.25s steps(5) both;
}

#game-root.enter {
  animation: fade-in 0.3s steps(6) both;
}

.results-panel {
  animation: pop-in 0.25s steps(4) both;
}

@media (prefers-reduced-motion: reduce) {
  .screen.enter,
  #game-root.enter,
  .results-panel {
    animation: none;
  }
}

/* ---- Phones and small windows ---- */

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

button,
input,
select {
  touch-action: manipulation; /* no double-tap zoom delay on buttons */
}

#game-root {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: none; /* the canvas handles its own touches */
}

.game-controls {
  padding-top: env(safe-area-inset-top);
}

.screen.manual-screen {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  padding-left: max(0.75rem, env(safe-area-inset-left));
  padding-right: max(0.75rem, env(safe-area-inset-right));
}

.game-controls button,
.manual-menu button {
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  #app {
    padding: 2.5rem 0.6rem 1.5rem;
  }

  .screen {
    padding: 1rem;
  }

  .game-controls {
    gap: 0.35rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .game-role {
    font-size: 0.7rem;
  }

  .game-controls button {
    padding: 0.25rem 0.35rem;
    font-size: 0.6rem;
  }

  .game-message {
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .manual-header h2 {
    display: none;
  }

  .manual-header .manual-clock,
  .manual-clock {
    font-size: 1.2rem;
  }

  .manual-menu button {
    padding: 0.3rem 0.4rem;
    font-size: 0.65rem;
  }

  .book-page {
    padding: 0.75rem;
  }

  .code-card .room-code {
    font-size: 2rem;
  }
}

/* A short window (a phone on its side): give the manual and its dock every pixel. */
@media (max-height: 520px) {
  .manual-header h2,
  .signal-dock h3 {
    display: none;
  }

  .signal-button {
    padding: 0.35rem 0.25rem;
  }
}

/* ---- Results over the manual: a dark backdrop hides the manual, so only the final message shows ---- */

.results-backdrop,
.manual-screen > .results-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10; /* under the controls bars, so Settings and Leave stay reachable */
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.82);
}

.results-restart {
  color: var(--accent);
  font-weight: bold;
}

.results-backdrop .results-panel {
  width: min(92vw, 30rem);
}

/* ---- Landing: buttons, record tiles, role abilities ---- */

.landing button {
  transition: transform 0.08s steps(2), filter 0.08s steps(2);
}

.landing button:hover:not(:disabled) {
  filter: brightness(1.12);
}

.landing button:active:not(:disabled) {
  transform: translate(2px, 2px);
}

.landing button[aria-busy='true'] {
  animation: lamp-blink 0.8s steps(1) infinite;
}

#create-room {
  padding: 1rem;
  font-size: 1.05rem;
  box-shadow: 4px 4px 0 #000;
}

.join-button {
  background: #3ec6e8;
}

.record-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 0.25rem 0 0;
}

.record-tiles div {
  padding: 0.5rem;
  text-align: center;
  background: #0b0d10;
  border: 2px solid var(--border);
}

.record-tiles dt {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.record-tiles dd {
  margin: 0.15rem 0 0;
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: bold;
}

@media (max-width: 30rem) {
  .record-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

.role-card {
  position: relative;
  transition: transform 0.12s steps(2), border-color 0.12s steps(2);
}

.role-card:hover {
  transform: translateY(-3px);
  border-color: #5a6372;
}

.role-card[data-role='blind']:hover { border-top-color: #3ec6e8; }
.role-card p { flex: 1; }

.abilities {
  display: flex;
  gap: 0.4rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.abilities li {
  padding: 0.15rem 0.45rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid var(--border);
}

.abilities .yes {
  color: var(--ok);
  border-color: var(--ok);
}

.abilities .no {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--danger);
  text-decoration-thickness: 2px;
}

/* A little pulse on the connection light. */
.status::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.45rem;
  background: currentColor;
}

.status[data-state='online']::before {
  animation: lamp-blink 2s steps(1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .landing-card::before,
  .play-dialog[open],
  .landing button,
  .role-card,
  .status::before {
    animation: none !important;
    transition: none !important;
  }

  .role-card:hover { transform: none; }
}

/* On the bomb and manual screens the connection chip would sit on top of the controls bar, so it
   only shows there when something is wrong. */
body[data-screen='bomb'] .status[data-state='online'],
body[data-screen='manual'] .status[data-state='online'] {
  display: none;
}

/* ---- Landing page on narrow screens: nothing may be wider than the window ---- */

.screen.landing,
.screen.landing > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.abilities {
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 30rem) {
  .landing-card {
    padding: 1.25rem 0.9rem 1rem;
  }

  .action {
    padding: 0.8rem;
  }

  .hero .tagline {
    font-size: 0.95rem;
  }
}

/* A text field is as wide as its box and no wider. Without this the browser gives it room for about
   20 characters, and the room code (with its wide letter spacing) pushed the page sideways on phones. */
.landing input[type='text'],
.landing .code-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

/* ---- How to play ---- */

.help-dialog {
  width: min(94vw, 44rem);
}

.help-heading {
  margin: 1rem 0 0.5rem;
  color: var(--accent);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.help-body details {
  border-top: 2px solid var(--border);
  padding: 0.6rem 0;
}

.help-body summary {
  cursor: pointer;
  font-weight: bold;
}

.help-body details p {
  margin: 0.5rem 0 0;
  color: var(--muted);
}

/* The logo badge above the title. It is a pixel art canvas, so it stays crisp and is never stretched. */
.hero-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 0.25rem;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.55));
}

.hero-logo canvas {
  display: block;
  max-width: 100%;
  image-rendering: pixelated;
}