/* dreamcore — Copyright (C) 2026 Ashwin Goyal. GPL-3.0-or-later. See LICENSE. */

html, body { margin: 0; padding: 0; overflow: hidden; background: #000; height: 100%; }
canvas { display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; font-family: "VT323", monospace; }

#blackout {
  position: absolute; inset: 0; background: #000;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 3s ease; z-index: 10;
}
#blackout span {
  color: #cfe8f5; font-size: 28px; letter-spacing: 6px;
  text-shadow: 0 0 12px rgba(160, 210, 255, .8);
}

#caption {
  position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%);
  color: #fff; font-size: clamp(22px, 3.4vw, 40px); letter-spacing: 4px;
  text-shadow: 2px 2px 0 rgba(20, 40, 80, .55), 0 0 18px rgba(255,255,255,.5);
  white-space: pre-wrap; text-align: center; max-width: 80vw;
}

#toast {
  position: absolute; left: 50%; top: 10%; transform: translateX(-50%);
  color: #fff; font-size: clamp(20px, 2.6vw, 34px); letter-spacing: 8px;
  text-shadow: 2px 2px 0 rgba(20, 40, 80, .55), 0 0 16px rgba(255,255,255,.45);
  opacity: 0; transition: opacity 1.2s ease; white-space: nowrap;
}

#powerToast {
  position: absolute; left: 50%; top: 42%; transform: translateX(-50%);
  color: rgba(255, 246, 224, .78); font-size: clamp(19px, 2.4vw, 30px); letter-spacing: 6px;
  text-shadow: 0 0 24px rgba(255, 220, 160, .5);
  opacity: 0; transition: opacity 1.6s ease; white-space: pre; text-align: center;
  line-height: 1.7;
}

#depth {
  position: absolute; top: 3%; right: 3%; text-align: right;
  color: rgba(255,255,255,.85); font-size: 22px; letter-spacing: 2px;
  text-shadow: 1px 1px 0 rgba(20,40,80,.6), 0 0 10px rgba(255,255,255,.3);
}

/* Sits above the hint bar, which is centred and can run wide. Fades away like
   the hint does — a permanent list of keys on screen is a manual, not a dream.
   The settings panel keeps the full list if you need reminding. */
#powers {
  position: absolute; bottom: 9%; right: 3%; text-align: right;
  color: rgba(255,255,255,.72); font-size: 17px; letter-spacing: 2px; line-height: 1.5;
  text-shadow: 1px 1px 0 rgba(20,40,80,.6);
  opacity: 0; transition: opacity 2s ease;
}

#hint {
  position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%);
  color: rgba(255,255,255,.75); font-size: 18px; letter-spacing: 3px;
  text-shadow: 1px 1px 0 rgba(20,40,80,.5);
  transition: opacity 2s ease; white-space: nowrap;
}

#flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 5; }

/* SUNTURN: a warm ring closing in from the edges while you drag the sky */
#sunturnGlow {
  position: absolute; inset: 0; opacity: 0; z-index: 4;
  background: radial-gradient(ellipse at center,
    rgba(255, 190, 90, 0) 38%,
    rgba(255, 160, 70, .35) 74%,
    rgba(255, 110, 180, .55) 100%);
  mix-blend-mode: screen;
}

#err {
  position: absolute; left: 8px; top: 8px; color: #ff9c9c;
  font: 12px monospace; white-space: pre-wrap; max-width: 90vw; z-index: 20;
}


/* The biome name, whispered rather than announced. */
#toast {
  font-size: clamp(15px, 1.7vw, 21px); letter-spacing: 7px;
  color: rgba(255,255,255,.5); top: 8%;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
  transition: opacity 2.4s ease;
}

/* ================================================================ settings
   Deliberately plain. The world is the pretty part; this is a panel of switches
   and it should get out of the way. No glow, no accent colour, no animation. */

#settings {
  position: absolute; inset: 0; z-index: 30;
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 5, 8, .78);
  backdrop-filter: blur(4px);
}
#settings[hidden] { display: none; }

/* scanlines stay — that's the CRT, not decoration */
#settings::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
}

#settingsPanel {
  position: relative;
  width: min(680px, 92vw); max-height: 86vh;
  display: flex; flex-direction: column;
  background: rgba(12, 14, 18, .95);
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .82);
}

#settingsPanel header {
  padding: 16px 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
#settingsPanel h1 {
  margin: 0 0 12px; font-size: 26px; letter-spacing: 10px; font-weight: normal;
  color: rgba(255, 255, 255, .55);
}
#settingsPanel h1 span { display: none; }

#settingsTabs { display: flex; gap: 2px; }
#settingsTabs button {
  font-family: inherit; font-size: 19px; letter-spacing: 2px;
  background: transparent; color: rgba(255, 255, 255, .38);
  border: none; border-bottom: 1px solid transparent;
  padding: 6px 16px; cursor: pointer; margin-bottom: -1px;
}
#settingsTabs button:hover { color: rgba(255, 255, 255, .72); }
#settingsTabs button[aria-selected="true"] {
  color: rgba(255, 255, 255, .92);
  border-bottom-color: rgba(255, 255, 255, .75);
}

#settingsBody {
  padding: 18px 24px; overflow-y: auto; font-size: 19px; letter-spacing: 1px;
}
#settingsBody::-webkit-scrollbar { width: 8px; }
#settingsBody::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); }

#settingsPanel footer {
  padding: 10px 24px; font-size: 16px; letter-spacing: 2px;
  color: rgba(255, 255, 255, .3);
  border-top: 1px solid rgba(255, 255, 255, .12);
}

/* --- rows */
.set-row {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.set-row > label, .set-row > .set-name { flex: 1; }
.set-row .set-val {
  min-width: 52px; text-align: right; color: rgba(255, 255, 255, .5);
}
.set-group {
  margin: 18px 0 4px; font-size: 15px; letter-spacing: 4px;
  color: rgba(255, 255, 255, .3);
}
.set-group:first-child { margin-top: 0; }

.set-row input[type="range"] {
  flex: 0 0 280px; max-width: 45%;
  -webkit-appearance: none; appearance: none;
  height: 2px; background: rgba(255, 255, 255, .2); outline: none;
}
.set-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 10px; height: 18px; background: rgba(255, 255, 255, .8); cursor: pointer;
}
.set-row input[type="range"]::-moz-range-thumb {
  width: 10px; height: 18px; background: rgba(255, 255, 255, .8);
  cursor: pointer; border: none; border-radius: 0;
}

/* --- buttons */
.set-btn {
  font-family: inherit; font-size: 18px; letter-spacing: 1px;
  background: transparent; color: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 255, 255, .22);
  padding: 4px 14px; cursor: pointer; min-width: 106px;
}
.set-btn:hover {
  border-color: rgba(255, 255, 255, .5); color: #fff;
}
/* the rebind prompt: simple inversion, no pulse */
.set-btn.listening {
  background: rgba(255, 255, 255, .85); color: #12141a;
  border-color: rgba(255, 255, 255, .85);
}

.set-row.locked { opacity: .3; }
.set-row.locked .set-btn { pointer-events: none; }
.set-lock { font-size: 16px; color: rgba(255,255,255,.4); letter-spacing: 1px; }

.set-note {
  font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .45);
  letter-spacing: 1px;
}
.set-note a { color: rgba(255, 255, 255, .7); }
.set-note strong { color: rgba(255, 255, 255, .8); font-weight: normal; }
.set-credits { max-height: 180px; overflow-y: auto; margin-top: 8px; }
.set-credits div { padding: 2px 0; }

/* ================================================================ touch
   On a phone the screen is the controller, so nothing is drawn: no joystick,
   no pedals, no labels. The only visible affordance is a single glyph, because
   phones have no Esc key. */

html, body { overscroll-behavior: none; }
canvas { touch-action: none; }

#touchSettings {
  position: absolute; top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 21px; line-height: 1;
  background: transparent; border: none;
  color: rgba(255, 255, 255, .3);
  pointer-events: auto; cursor: pointer; z-index: 25;
  -webkit-tap-highlight-color: transparent;
}
#touchSettings[hidden] { display: none; }
#touchSettings:active { color: rgba(255, 255, 255, .75); }

/* Text-free HUD: the controls hint and the powers list are both instructions,
   and instructions are the opposite of a dream. Keep only the depth and the
   whispered biome name. */
.touch #hint,
.touch #powers { display: none; }

.touch #depth {
  top: max(3%, env(safe-area-inset-top));
  right: max(4%, env(safe-area-inset-right));
  font-size: 18px; color: rgba(255,255,255,.55);
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
}

.touch #caption { bottom: 22%; letter-spacing: 3px; }
.touch #toast { top: 11%; letter-spacing: 5px; }
.touch #powerToast { letter-spacing: 4px; }

/* Bigger hit targets and room for a thumb once the panel is open. */
@media (pointer: coarse) {
  #settingsPanel { width: min(680px, 96vw); max-height: 88vh; }
  #settingsBody { padding: 14px 18px; font-size: 20px; }
  .set-row { padding: 13px 0; }
  .set-btn { padding: 9px 16px; min-width: 116px; }
  .set-row input[type="range"] { flex: 0 0 46%; height: 4px; }
  .set-row input[type="range"]::-webkit-slider-thumb { width: 18px; height: 28px; }
  .set-row input[type="range"]::-moz-range-thumb { width: 18px; height: 28px; }
  #settingsTabs button { padding: 10px 14px; }
  #settingsPanel header { padding-top: max(16px, env(safe-area-inset-top)); }
}