/* ============================================================
   Onyx Pocket — Game Boy-style player shell
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --gb-body-1: #d9d6c8;
  --gb-body-2: #c3bfae;
  --gb-body-3: #adaa99;
  --gb-edge-dark: #8f8c7d;
  --gb-edge-light: #efece1;
  --gb-screen-1: #6c6f63;
  --gb-screen-2: #4a4d44;
  --gb-screen-3: #34372f;
  --gb-lcd-bezel: #20221c;
  --gb-accent: #8c2f66;     /* maroon stripe / buttons */
  --gb-accent-2: #2f3b7a;   /* indigo lines */
  --gb-btn: #9a2a55;
  --gb-btn-dark: #6e1c3c;
  --gb-dpad: #2b2b30;
  --gb-dpad-light: #44444c;
  --gb-pill: #3b3b45;
  --gb-text: #4a4636;
  --ui-gold: #ffcd75;
  --ui-blue: #94b0c2;
  --ui-dim: #566c86;
  --ui-red: #b13e53;
  --font: 'Press Start 2P', 'Courier New', monospace;
}


html, body {
  width: 100%; height: 100%; overflow: hidden;
  font-family: var(--font);
  background:
    radial-gradient(ellipse at 50% 0%, #20202e 0%, #0b0b13 60%, #060609 100%);
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--gb-text);
}

html {
  background:black;
}

#game-container {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5vmin;
}

/* Reset native button styling; specific buttons styled below. */
button { font-family: var(--font); cursor: pointer; border: none; background: none; color: inherit; }

/* ---------- Handheld sizing wrapper (container query root) ---------- */
#gb-shell {
  container-type: inline-size;
  width: min(96vw, 54vh, 470px);
}

/* ---------- Device body ---------- */
#gb-device {
  width: 100%;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 4cqw 4cqw 5cqw;
  gap: 2cqw;
  border-radius: 4cqw 4cqw 14cqw 4cqw; /* iconic asymmetric bottom-right */
  background:
    linear-gradient(150deg, var(--gb-body-1) 0%, var(--gb-body-2) 55%, var(--gb-body-3) 100%);
  box-shadow:
    inset 0 0 0 0.6cqw rgba(255,255,255,0.35),
    inset 0 -2cqw 4cqw rgba(0,0,0,0.18),
    inset 0 2cqw 3cqw rgba(255,255,255,0.4),
    0 3cqw 6cqw rgba(0,0,0,0.55),
    0 0.6cqw 0 var(--gb-edge-dark);
  position: relative;
}
/* subtle moulding seam near the top */
#gb-device::before {
  content: ""; position: absolute; left: 3cqw; right: 3cqw;
  top: 27cqw; height: 0.5cqw; border-radius: 1cqw;
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(255,255,255,0.25));
  pointer-events: none; display: none;
}

/* ---------- Top rail ---------- */
.gb-toprail {
  display: flex; align-items: center; justify-content: space-between;
  height: 6cqw; padding: 0 1cqw;
}
.gb-power { display: flex; align-items: center; gap: 1.5cqw; }
.gb-power-nub {
  width: 7cqw; height: 2.6cqw; border-radius: 1.3cqw;
  background: linear-gradient(180deg, #e9e6da, #b4b1a2);
  box-shadow: inset 0 0.4cqw 0.4cqw rgba(255,255,255,0.6), inset 0 -0.4cqw 0.5cqw rgba(0,0,0,0.3), 0 0.3cqw 0.3cqw rgba(0,0,0,0.25);
}
.gb-power-label { font-size: 1.9cqw; color: rgba(74,70,54,0.7); letter-spacing: 0.05em; }
.gb-vents { display: flex; gap: 1.4cqw; }
.gb-vents span {
  width: 1cqw; height: 5cqw; border-radius: 1cqw;
  background: linear-gradient(180deg, rgba(0,0,0,0.16), rgba(255,255,255,0.25));
}

/* ---------- Screen housing ---------- */
.gb-screen-housing {
  border-radius: 3cqw 3cqw 8cqw 3cqw;
  padding: 3.4cqw 4cqw 4cqw;
  background: linear-gradient(160deg, var(--gb-screen-1), var(--gb-screen-2) 60%, var(--gb-screen-3));
  box-shadow:
    inset 0 0.5cqw 1.5cqw rgba(0,0,0,0.5),
    inset 0 -0.4cqw 1cqw rgba(255,255,255,0.08),
    0 0.4cqw 0.6cqw rgba(255,255,255,0.25);
  position: relative;
}
/* maroon + indigo lines along the top of the screen housing (DMG homage) */
.gb-screen-housing::before {
  content: ""; position: absolute; left: 4cqw; right: 4cqw; top: 1.4cqw; height: 1.2cqw;
  background:
    linear-gradient(90deg, var(--gb-accent) 0 50%, transparent 50%) 0 0 / 2.2cqw 0.5cqw repeat-x,
    linear-gradient(180deg, var(--gb-accent), var(--gb-accent-2));
  border-radius: 1cqw; opacity: 0.85; pointer-events: none;
}
.gb-screen-caption {
  display: flex; align-items: center; justify-content: center; gap: 2cqw;
  margin-bottom: 1.6cqw;
}
.gb-led {
  width: 2.4cqw; height: 2.4cqw; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a8a, #c11 70%);
  box-shadow: 0 0 1.6cqw rgba(220,30,30,0.8), inset 0 0 0.4cqw rgba(255,255,255,0.5);
}
.gb-caption-text { font-size: 1.9cqw; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; }

/* The LCD itself — fixed aspect ratio, the true game viewport */
#gb-screen {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 10 / 9;
  background: #05060a;
  border-radius: 1.2cqw;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 0.6cqw var(--gb-lcd-bezel),
    inset 0 0 3cqw rgba(0,0,0,0.9);
}

#game-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  display: block;
}

#cafe-chat {
  position: absolute;
  left: 3%; right: 3%; bottom: 3%;
  z-index: 8;
  display: flex; flex-direction: column;
  max-height: 44%;
  background: rgba(10,12,24,0.9);
  border: 0.35cqw solid var(--ui-gold);
  border-radius: 0.8cqw;
  padding: 1.5cqw 1.7cqw 1.3cqw;
  pointer-events: auto;
}
#cafe-chat.hidden { display: none; }
#cafe-chat-log {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 10cqw;
  max-height: 26cqh;
  font-family: var(--font);
  font-size: clamp(5px, 2.35cqw, 9px);
  line-height: 1.55;
  color: #f4f4f4;
  text-align: left;
  margin-bottom: 1.3cqw;
  -webkit-overflow-scrolling: touch;
}
.cafe-chat-row { margin-bottom: 0.7cqw; word-break: break-word; }
.cafe-chat-who { color: var(--ui-gold); }
.cafe-chat-row.self .cafe-chat-who { color: #73eff7; }
.cafe-chat-row.system { color: var(--ui-dim); }
#cafe-chat-form { display: flex; align-items: stretch; gap: 1cqw; }
#cafe-chat-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font);
  font-size: clamp(6px, 2.7cqw, 10px);
  background: rgba(10,10,18,0.85);
  color: var(--ui-gold);
  border: 0.3cqw solid var(--ui-dim);
  padding: 0.55em 0.6em;
  border-radius: 0.5cqw;
  pointer-events: auto;
  -webkit-user-select: text; user-select: text;
  touch-action: manipulation;
}
#cafe-chat-input:focus {
  outline: none;
  border-color: var(--ui-gold);
}
#cafe-chat-send {
  padding: 0.45em 0.75em;
  font-family: var(--font);
  font-size: clamp(6px, 2.5cqw, 9px);
  background: transparent;
  color: var(--ui-gold);
  border: 0.3cqw solid var(--ui-gold);
  border-radius: 0.5cqw;
  letter-spacing: 0.06em;
  pointer-events: auto;
}
#cafe-chat-send:hover, #cafe-chat-send:active {
  background: var(--ui-gold); color: #1a1c2c;
}

/* ---------- Wordmark ---------- */
.gb-brand {
  display: flex; align-items: baseline; justify-content: center; gap: 1cqw;
  margin: 0.5cqw 0 0.2cqw;
}
.gb-brand-main {
  font-size: 5cqw; color: #3a3550; letter-spacing: 0.04em;
  text-shadow: 0 0.4cqw 0 rgba(255,255,255,0.4);
}
.gb-brand-sub {
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  font-size: 3.7cqw; color: #5a5470; font-weight: 700;
}
.gb-brand-tm { font-size: 1.6cqw; color: #5a5470; align-self: flex-start; }

/* ============================================================
   CONTROLS
   ============================================================ */
.gb-controls {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1cqw 3cqw 0; margin-top: 0.5cqw;
}

/* ---------- D-pad ---------- */
.dpad { position: relative; width: 28cqw; height: 28cqw; flex: 0 0 auto; }
.dbtn {
  position: absolute;
  background: linear-gradient(160deg, var(--gb-dpad-light), var(--gb-dpad) 60%, #18181c);
  color: rgba(255,255,255,0.85);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0.6cqw 0.8cqw rgba(0,0,0,0.45), inset 0 0.4cqw 0.4cqw rgba(255,255,255,0.12);
  transition: filter 0.05s, box-shadow 0.05s;
}
.dbtn-up    { top: 0;    left: 9.75cqw; width: 8.5cqw; height: 10cqw; border-radius: 2cqw 2cqw 0 0; }
.dbtn-down  { bottom: 0; left: 9.75cqw; width: 8.5cqw; height: 10cqw; border-radius: 0 0 2cqw 2cqw; }
.dbtn-left  { left: 0;   top: 9.75cqw;  width: 10cqw; height: 8.5cqw; border-radius: 2cqw 0 0 2cqw; }
.dbtn-right { right: 0;  top: 9.75cqw;  width: 10cqw; height: 8.5cqw; border-radius: 0 2cqw 2cqw 0; }
.dpad-hub {
  position: absolute; left: 9.75cqw; top: 9.75cqw; width: 8.5cqw; height: 8.5cqw;
  background: var(--gb-dpad);
  box-shadow: inset 0 0 1.4cqw rgba(0,0,0,0.6);
}
.dpad-hub::after {
  content: ""; position: absolute; inset: 2.2cqw; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.12), rgba(0,0,0,0.35));
}
.dbtn .dlabel { font-size: 3.6cqw; }
.dbtn .darrow { font-size: 3cqw; display: none; }
.dbtn-up .dlabel, .dbtn-down .dlabel { margin-top: -0.8cqw; }

.dbtn.pressed, .dbtn:active {
  filter: brightness(1.35);
  box-shadow: inset 0 0.6cqw 1cqw rgba(0,0,0,0.6);
}

/* ---------- A / B ---------- */
.ab-cluster { display: flex; flex-direction: column; align-items: center; gap: 1.5cqw; flex: 0 0 auto; }
.ab-pair { display: flex; align-items: flex-end; gap: 4.5cqw; }
.round-btn {
  width: 13cqw; height: 13cqw; border-radius: 50%;
  font-size: 4cqw; color: rgba(255,255,255,0.92);
  background: radial-gradient(circle at 38% 32%, #c0426f, var(--gb-btn) 55%, var(--gb-btn-dark));
  box-shadow:
    0 0.8cqw 1.2cqw rgba(0,0,0,0.5),
    inset 0 0.5cqw 0.6cqw rgba(255,255,255,0.35),
    inset 0 -0.6cqw 0.8cqw rgba(0,0,0,0.4);
  transition: transform 0.05s, filter 0.05s, box-shadow 0.05s;
  text-shadow: 0 0.3cqw 0.3cqw rgba(0,0,0,0.4);
}
#btn-a { transform: translateY(-6cqw); }
.round-btn.pressed, .round-btn:active {
  filter: brightness(1.15);
  box-shadow: 0 0.2cqw 0.4cqw rgba(0,0,0,0.5), inset 0 0.8cqw 1.2cqw rgba(0,0,0,0.5);
}
#btn-a.pressed, #btn-a:active { transform: translateY(-6cqw) scale(0.94); }
#btn-b.pressed, #btn-b:active { transform: scale(0.94); }
.ab-hints { display: flex; gap: 3.5cqw; }

/* ---------- Start / Select ---------- */
.gb-startsel {
  display: flex; align-items: center; justify-content: center; gap: 6cqw;
  margin-top: 0.5cqw;
}
.ss-item { display: flex; flex-direction: column; align-items: center; gap: 2.5cqw; }
.pill-btn {
  width: 14cqw; height: 4.4cqw; border-radius: 3cqw;
  transform: rotate(-25deg);
  background: linear-gradient(180deg, #4a4a55, var(--gb-pill) 60%, #25252c);
  box-shadow: 0 0.6cqw 0.8cqw rgba(0,0,0,0.45), inset 0 0.4cqw 0.4cqw rgba(255,255,255,0.18);
  transition: filter 0.05s, box-shadow 0.05s;
}
.pill-btn.pressed, .pill-btn:active { filter: brightness(1.3); box-shadow: inset 0 0.5cqw 0.8cqw rgba(0,0,0,0.6); }
.ss-label { font-size: 2.1cqw; color: rgba(74,70,54,0.85); letter-spacing: 0.08em; }

/* ---------- Speaker grille ---------- */
.gb-speaker {
  display: flex; gap: 2cqw; justify-content: flex-end; align-items: center;
  transform: rotate(-25deg); transform-origin: right center;
  margin: 1.5cqw 4cqw 0 auto; width: max-content;
}
.gb-speaker span {
  width: 1.4cqw; height: 11cqw; border-radius: 1cqw;
  background: linear-gradient(90deg, rgba(0,0,0,0.18), rgba(255,255,255,0.18));
  box-shadow: inset 0 0 0.5cqw rgba(0,0,0,0.3);
}

/* ---------- Keyboard hint chips (desktop only) ---------- */
.kbd {
  font-size: 2.1cqw; color: rgba(74,70,54,0.7);
  border: 0.3cqw solid rgba(74,70,54,0.25); border-radius: 1cqw;
  padding: 0.4cqw 1cqw; letter-spacing: 0.04em; white-space: nowrap;
}

/* On desktop (hover-capable): keyboard helpers stay hidden until you hover the
   relevant button — WASD letters on each D-pad key, and the B/A hint chips. */
@media (hover: hover) {
  .dbtn .dlabel { opacity: 0; transition: opacity 0.15s ease; }
  .dbtn:hover .dlabel { opacity: 1; }
  .ab-hints { opacity: 0; transition: opacity 0.15s ease; }
  .ab-cluster:hover .ab-hints { opacity: 1; }
  .ss-kbd { opacity: 0; transition: opacity 0.15s ease; }
  .ss-item:hover .ss-kbd { opacity: 1; }
}

/* On touch devices: show D-pad arrows instead of WASD letters, hide kbd hints */
@media (hover: none) and (pointer: coarse) {
  .dbtn .dlabel { display: none; }
  .dbtn .darrow { display: inline; }
  .kbd { display: none; }
  .ab-hints { display: none; }

  /* ----------------------------------------------------------------
     The phone IS the device: the creme body fills the whole screen
     edge-to-edge. We keep a tiny screen bezel, the dot-matrix caption,
     and the "Onyx Pocket" wordmark, but drop the rest of the chrome
     (top rail, speaker) for a clean look.
     ---------------------------------------------------------------- */
  #game-container { padding: 0; align-items: stretch; }
  #gb-shell { width: 100vw; }

  #gb-device {
    min-height: 100vh;
    min-height: 100dvh;                                 /* creme fills the screen */
    padding: 4cqw 4cqw 6cqw;
    gap: 2cqw;
    border-radius: 0;                                   /* fill the phone */
    box-shadow: inset 0 0 0 0.6cqw rgba(255,255,255,0.3);
    /* keep the default creme body gradient */
  }
  #gb-device::before,
  .gb-toprail,
  .gb-speaker,
  .gb-screen-housing::before { display: none; }

  /* Small bezel; keep the default dark housing + dot-matrix caption */
  .gb-screen-housing { padding: 3cqw 3.5cqw 3.5cqw; }

  /* Keep the "Onyx Pocket" wordmark, a touch larger for the wide layout */
  .gb-brand { margin: 2cqw 0 1cqw; }
  .gb-brand-main { font-size: 6cqw; }
  .gb-brand-sub { font-size: 4.4cqw; }
  .gb-brand-tm { font-size: 1.9cqw; }

  /* Roomier, thumb-friendly controls */
  .gb-controls { padding: 4cqw 6cqw 0; margin-top: 0; }
  .gb-startsel { margin-top: 4cqw; }
}

/* ============================================================
   ON-SCREEN OVERLAYS (scaled to the LCD via container queries)
   ============================================================ */
#title-screen, .overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; z-index: 10;
  transition: opacity 0.5s ease;
  padding: 4cqw;
}
#title-screen {
  background: radial-gradient(ellipse at center, rgba(10,10,18,0.86) 0%, rgba(10,10,18,0.98) 100%);
  overflow-y: auto;
}
#title-screen.hidden, .overlay.hidden { opacity: 0; pointer-events: none; }

/* Optional title background art (behind the Begin Journey button) */
.title-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.title-bg.hidden { display: none; }
/* Title buttons live in the bottom quadrant of the LCD, on one horizontal row */
#title-screen .title-content {
  position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%);
  z-index: 2;
}

/* Boot splash / loading screen — sits above everything, then fades out */
#loading-screen {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: #05060a;
  transition: opacity 0.6s ease;
}
#loading-screen.hidden { opacity: 0; pointer-events: none; }
#loading-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Intro exposition — full-screen crossfading images shown before gameplay */
#cutscene-fade {
  position: absolute; inset: 0; z-index: 35;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s ease;
}
#cutscene-fade.show { opacity: 1; pointer-events: auto; }
#cutscene-fade.hidden { opacity: 0; pointer-events: none; }

#intro-screen {
  position: absolute; inset: 0; z-index: 30;
  background: #05060a; overflow: hidden;
  transition: opacity 0.4s ease;
}
#intro-screen.hidden { opacity: 0; pointer-events: none; }
.intro-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.7s ease;
  will-change: opacity;
}
.intro-layer.show { opacity: 1; }
.intro-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  background: #05060a;
  opacity: 0; transition: opacity 0.4s ease;
}
.intro-video.show { opacity: 1; }
#intro-skip {
  position: absolute; bottom: 3cqh; right: 3cqw; z-index: 2;
  padding: 0.6em 1.1em; font-family: var(--font);
  font-size: clamp(6px, 2.8cqw, 12px);
  background: rgba(10,10,18,0.55); color: var(--ui-gold);
  border: 0.35cqw solid var(--ui-gold); border-radius: 0.6cqw;
  letter-spacing: 0.08em; cursor: pointer; transition: all 0.18s;
}
#intro-skip:hover, #intro-skip:active { background: var(--ui-gold); color: #1a1c2c; }

.title-content { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 2cqw; max-width: 100%; }
.title-content button { white-space: nowrap; }

#title-screen h1 {
  font-size: clamp(12px, 9cqw, 40px); color: var(--ui-gold);
  text-shadow: 0 0 6cqw rgba(255,205,117,0.45), 0 0.4cqw 0 #a66b00;
  letter-spacing: 0.1em; line-height: 1.25;
}
.subtitle { color: var(--ui-blue); font-size: clamp(7px, 3.6cqw, 15px); font-style: italic; margin-bottom: 1cqw; }

.hint { font-size: clamp(6px, 2.8cqw, 12px); color: var(--ui-dim); line-height: 1.5; }
.hint code { color: var(--ui-blue); font-family: inherit; }

/* Overlay (UI) buttons — distinct from the physical controls */
#title-screen button, .overlay button {
  padding: 0.85em 1.6em; font-family: var(--font);
  font-size: clamp(7px, 3.4cqw, 14px);
  background: transparent; color: var(--ui-gold);
  border: 0.4cqw solid var(--ui-gold);
  letter-spacing: 0.08em; transition: all 0.18s; line-height: 1.3;
  border-radius: 0.6cqw;
}
#title-screen button:hover, #title-screen button:active,
.overlay button:hover, .overlay button:active { background: var(--ui-gold); color: #1a1c2c; }

/* Keyboard / gamepad menu highlight (Up/Down to move, A to select) */
#title-screen button.menu-active, .overlay button.menu-active {
  background: var(--ui-gold); color: #1a1c2c;
  box-shadow: 0 0 0 0.3cqw rgba(255,205,117,0.55), 0 0 3cqw rgba(255,205,117,0.6);
}
.danger-btn.menu-active {
  background: var(--ui-red) !important; color: #1a1c2c !important;
  box-shadow: 0 0 0 0.3cqw rgba(177,62,83,0.55), 0 0 3cqw rgba(177,62,83,0.6);
}

#continue-btn { margin: 0; }
#continue-btn.hidden { display: none; }

.title-tools { margin-top: 2cqw; }
.secondary-btn {
  padding: 0.7em 1.2em !important; font-size: clamp(6px, 2.6cqw, 11px) !important;
  color: var(--ui-blue) !important; border-color: var(--ui-dim) !important;
}
.secondary-btn:hover, .secondary-btn:active { background: var(--ui-blue) !important; color: #1a1c2c !important; border-color: var(--ui-blue) !important; }
#loaded-game-label:not(:empty) { color: var(--ui-gold); margin-top: 0.4cqw; }

#death-screen { background: radial-gradient(ellipse at center, rgba(60,10,10,0.9) 0%, rgba(10,5,5,0.98) 100%); }
#death-screen h2 { color: var(--ui-red); font-size: clamp(11px, 7cqw, 32px); margin-bottom: 4cqw; text-shadow: 0 0 4cqw rgba(177,62,83,0.5); }

#victory-screen { background: radial-gradient(ellipse at center, rgba(40,50,20,0.9) 0%, rgba(10,10,18,0.98) 100%); }
#victory-screen h2 { color: var(--ui-gold); font-size: clamp(11px, 7cqw, 32px); margin-bottom: 2cqw; text-shadow: 0 0 5cqw rgba(255,205,117,0.5); }
#victory-screen p { color: var(--ui-blue); font-size: clamp(6px, 3cqw, 13px); margin-bottom: 2cqw; max-width: 90%; line-height: 1.6; }

#pause-screen { background: radial-gradient(ellipse at center, rgba(10,10,18,0.92) 0%, rgba(10,10,18,0.98) 100%); }
#pause-screen h2 { color: var(--ui-blue); font-size: clamp(11px, 7cqw, 32px); margin-bottom: 4cqw; }
#pause-screen button { display: block; margin: 0 auto 2cqw auto; min-width: 60%; }

#cafe-room-screen {
  z-index: 26;
  background: radial-gradient(ellipse at center, rgba(10,10,18,0.94) 0%, rgba(10,10,18,0.98) 100%);
  overflow-y: auto;
  justify-content: flex-start;
  padding-top: 5cqw;
}
#cafe-room-screen h2 { color: var(--ui-gold); font-size: clamp(7px, 3.2cqw, 14px); margin-bottom: 2cqw; white-space: nowrap; }
#cafe-room-screen button { display: block; margin: 0 auto 1.6cqw auto; min-width: 70%; }
.cafe-status { color: var(--ui-blue); font-size: clamp(6px, 2.8cqw, 11px); margin-bottom: 1cqw; line-height: 1.4; }
.cafe-code {
  font-size: clamp(14px, 8cqw, 28px);
  color: var(--ui-gold);
  letter-spacing: 0.28em;
  margin: 1.5cqw 0 1cqw;
  text-shadow: 0 0 4cqw rgba(255,205,117,0.45);
}
.cafe-edit-btn {
  min-width: 78% !important;
  text-align: left !important;
  padding: 0.95em 1em !important;
  font-size: clamp(7px, 3.2cqw, 12px) !important;
  color: var(--ui-blue) !important;
  border-color: var(--ui-dim) !important;
}
.cafe-edit-btn .cafe-edit-val { color: var(--ui-gold); }

#name-screen {
  z-index: 28;
  background: radial-gradient(ellipse at center, rgba(10,10,18,0.96) 0%, rgba(10,10,18,0.99) 100%);
  justify-content: center;
  padding: 3cqw 2.5cqw 2.5cqw;
  overflow: hidden;
}
#name-screen h2 {
  color: var(--ui-gold);
  font-size: clamp(7px, 3.8cqw, 14px);
  line-height: 1.4;
  margin: 0 1cqw 2cqw;
  flex: 0 0 auto;
  text-shadow: 0 0 4cqw rgba(255,205,117,0.4);
}
#name-screen-input {
  min-height: 1.45em;
  width: 92%;
  margin: 0 auto 2cqw;
  padding: 0.35em 0.3em;
  font-family: inherit;
  font-size: clamp(9px, 4.4cqw, 16px);
  color: var(--ui-gold);
  letter-spacing: 0.12em;
  background: none;
  border: none;
  border-bottom: 0.35cqw solid var(--ui-gold);
  border-radius: 0;
  outline: none;
  text-align: center;
  flex: 0 0 auto;
}
#name-screen-input::placeholder {
  color: var(--ui-dim);
  letter-spacing: 0.06em;
  opacity: 1;
}
#name-screen-input.code-mode { text-transform: uppercase; }
.name-screen-actions {
  width: 92%;
  margin-top: 2cqw;
  flex: 0 0 auto;
  display: flex;
  gap: 2cqw;
  justify-content: center;
}
.name-screen-actions button {
  display: block;
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0.7em 0.6em !important;
}
#name-screen-cancel.hidden { display: none !important; }

@media (pointer: coarse) {
  #cafe-chat-input { font-size: 16px; }
  #name-screen-input { font-size: 16px; } /* prevents iOS zoom-on-focus */
}

#confirm-reset-screen { background: radial-gradient(ellipse at center, rgba(60,10,10,0.92) 0%, rgba(10,5,5,0.98) 100%); z-index: 25; }
#confirm-reset-screen h2 { color: var(--ui-red); font-size: clamp(10px, 5.5cqw, 26px); margin-bottom: 2cqw; text-shadow: 0 0 4cqw rgba(177,62,83,0.5); }
#confirm-reset-screen p { color: var(--ui-blue); font-size: clamp(6px, 3cqw, 13px); margin-bottom: 4cqw; }
#confirm-reset-screen button { margin: 0 1cqw 2cqw 1cqw; }

.danger-btn { color: var(--ui-red) !important; border-color: var(--ui-red) !important; }
.danger-btn:hover, .danger-btn:active { background: var(--ui-red) !important; color: #1a1c2c !important; }

/* The old hamburger is replaced by the Start button */
#menu-btn { display: none !important; }