:root {
  color-scheme: dark;
  color: #fff0d5;
  background: #120c10;
  font-family: "Instrument Sans", system-ui, sans-serif;
  --muted: #d4bcab;
  --accent: #ffc482;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
a { text-decoration: none; color: inherit; }
button { color: inherit; font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }

.arcade { position: relative; width: 100%; height: 100svh; min-height: 270px; overflow: hidden; isolation: isolate; }
.room, .room canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.room canvas { cursor: grab; touch-action: none; }
.room canvas.is-target { cursor: pointer; }
.room canvas.is-dragging { cursor: grabbing; }
.room canvas.is-playing-hockey { cursor: crosshair; }
.arcade::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  inset: 0;
  background: linear-gradient(180deg, #10090cd1 0, transparent 16%, transparent 85%, #10090c9c 100%);
}

.edge-nav, .edge-controls {
  position: absolute;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  left: 0;
  right: 0;
  padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
  pointer-events: none;
}
.edge-nav a, .edge-controls a, .edge-controls button { pointer-events: auto; }
.edge-nav { top: 0; padding-top: max(18px, env(safe-area-inset-top)); }
.room-link {
  font: 900 clamp(.85rem, 2.6vw, 1.15rem)/1.1 "Arial Black", system-ui, sans-serif;
  letter-spacing: .035em;
  text-shadow: 0 2px 15px #080408;
  white-space: nowrap;
}
.edge-nav nav, .cabinet-keys, .move-buttons, .action-buttons { display: flex; align-items: center; gap: 5px; }
.edge-nav nav { padding: 4px; background: #10090cc7; border: 1px solid #f1c1a22f; border-radius: 7px; }
.edge-nav nav a { padding: .55rem .74rem; border-radius: 3px; font-weight: 650; font-size: .82rem; }
.edge-nav nav a:hover, .edge-nav nav a[aria-current] { color: #180f10; background: #ffe6c5; }

.cabinet-navigation {
  position: absolute;
  z-index: 2;
  top: 50%;
  inset-inline: max(12px, calc(50% - 58svh));
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}
.cabinet-navigation a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #f1c1a282;
  border-radius: 50%;
  background: #130b10ed;
  box-shadow: 0 4px 18px #0c0609a8;
  font-size: 2rem;
  line-height: 1;
  pointer-events: auto;
}
.cabinet-navigation span { transform: translateY(-2px); }
.cabinet-navigation a:hover { color: #180f10; background: #ffe6c5; }

.edge-controls { bottom: 0; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.room-controls { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.audio-controls { display: flex; gap: 5px; }
.look-help { margin-left: auto; color: var(--muted); text-shadow: 0 2px 6px #000; font: .73rem/1.4 ui-monospace, monospace; }
.edge-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: .45rem .64rem;
  border: 1px solid #f1c1a252;
  border-radius: 4px;
  background: #130b10df;
  font-weight: 650;
  font-size: .76rem;
  white-space: nowrap;
}
.edge-button:hover, .edge-button[aria-pressed="true"] { background: #ffe6c5; color: #180f10; }
.sound-toggle { gap: 7px; }
.sound-toggle::before { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; }
.sound-toggle[aria-pressed="true"]::before { background: currentColor; }
.sound-toggle[aria-pressed="true"]:not(:hover) { color: var(--accent); background: #130b10df; }
.game-controls { display: flex; margin-left: auto; gap: 10px; }
.action-buttons { margin-left: auto; }
.cabinet-keys { margin-left: auto; }
.move-buttons button { min-width: 38px; }
.loading { position: absolute; bottom: 32px; left: 50%; margin: 0; transform: translateX(-50%); color: var(--muted); font: .8rem ui-monospace, monospace; }
.flat-screen {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(840px, calc(100vw - 32px), calc((100svh - 150px) * 1.7778));
  height: auto;
  transform: translate(-50%, -50%);
  border: 1px solid #987352;
  border-radius: 10px;
  box-shadow: 0 20px 85px #000b;
  cursor: pointer;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.noscript { position: absolute; z-index: 3; inset: 22% 10% auto; }

@media (max-width: 680px) {
  .cabinet-navigation { top: 69%; inset-inline: 10px; }
  .cabinet-navigation a { width: 44px; height: 44px; }
}

@media (max-width: 520px) {
  .edge-nav, .edge-controls { padding-inline: 10px; }
  .edge-nav { padding-top: max(10px, env(safe-area-inset-top)); }
  .room-link { white-space: normal; }
  .edge-controls { padding-bottom: max(10px, env(safe-area-inset-bottom)); gap: 5px; flex-wrap: wrap; }
  .edge-nav nav { flex-shrink: 0; gap: 0; padding: 2px; }
  .edge-nav nav a { font-size: .76rem; padding: .46rem .56rem; }
  .edge-button { padding: .35rem .48rem; min-height: 37px; }
  .move-buttons button { min-width: 35px; }
  .game-controls { width: 100%; justify-content: space-between; gap: 4px; flex-wrap: wrap; }
  .look-help { font-size: .68rem; }
}

@media (max-width: 335px) {
  .edge-nav { gap: 8px; }
  .room-link { font-size: .7rem; }
  .edge-nav nav a { padding-inline: .45rem; }
  .move-buttons, .action-buttons { gap: 3px; }
  .edge-button { font-size: .68rem; }
}