/* AFTERTAPE enhancement layer: HUD polish, FX canvas, Trader's Journal. */

/* ---------- FX canvas (over the game canvas, under the HUD) ---------- */
.enh-fx {
  position: fixed;
  pointer-events: none;
  image-rendering: auto;
  z-index: 1;
}

/* ---------- HUD polish ---------- */
.hud-mission__card,
.hud-player,
.sol-widget,
.hud-mission__list {
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
}
.hud-player__bal span {
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(139, 99, 255, 0.35);
}
.hud-player__lvl {
  transition: box-shadow 0.3s;
}
.hud-player:hover .hud-player__lvl {
  box-shadow: inset 0 0 0 1px #8a63ff, 0 0 20px #8b5cff80;
}
.sol-widget .btn--withdraw {
  transition: transform 0.12s, filter 0.2s;
}
.sol-widget .btn--withdraw:hover {
  filter: brightness(1.12);
}
.sol-widget .btn--withdraw:active {
  transform: translateY(1px);
}

/* Bottom key hints: larger, higher contrast, easier to read. */
.hud-hints {
  font-size: 10.5px;
  color: #e4defa;
  gap: 18px;
  bottom: 16px;
  padding: 7px 12px;
  background: linear-gradient(90deg, rgba(8, 7, 20, 0.78), rgba(8, 7, 20, 0));
}
.hud-hints .keycap {
  min-width: 21px;
  height: 21px;
  font-size: 9.5px;
}

.hud-prompt {
  box-shadow: inset 0 0 0 1px var(--magenta, #ff36ad), 0 0 24px rgba(255, 54, 173, 0.28), 0 0 20px #0009;
}

.keycap {
  transition: transform 0.08s;
}

.hud-sound:hover {
  box-shadow: inset 0 0 0 1px #6a45c9, 0 0 14px rgba(139, 92, 255, 0.4);
}

/* Toasts: a touch more presence. */
.toast {
  backdrop-filter: blur(6px);
}
.toast--level,
.toast--mission {
  box-shadow: inset 0 0 0 1px #8b63ff, 0 0 34px rgba(139, 99, 255, 0.35), 0 10px 30px #00000080;
}

/* Focus rings for keyboard players. */
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--cyan, #5ee7ff);
  outline-offset: 2px;
}

/* ---------- Journal button ---------- */
.enh-journal-btn {
  position: fixed;
  left: 16px;
  bottom: 52px;
  z-index: 11;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 0;
  background: rgba(13, 12, 34, 0.85);
  box-shadow: inset 0 0 0 1px #2d2750;
  color: #e4defa;
  font-family: var(--f-pixel, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: box-shadow 0.2s, color 0.2s;
}
.enh-journal-btn span {
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  background: #1c1840;
  box-shadow: inset 0 0 0 1px #3b3470, inset 0 -2px #00000080;
  font-size: 9.5px;
}
.enh-journal-btn:hover,
.enh-journal-btn.is-on {
  color: #fff;
  box-shadow: inset 0 0 0 1px #8a63ff, 0 0 16px rgba(139, 99, 255, 0.35);
}

/* ---------- Journal panel ---------- */
.enh-journal {
  position: fixed;
  z-index: 45;
  top: 50%;
  left: 50%;
  width: min(560px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #14102c, #0a0818);
  box-shadow: inset 0 0 0 1px #3a2f78, 0 20px 60px #000c, 0 0 40px rgba(139, 99, 255, 0.18);
  color: var(--text, #f8f5ff);
  font-family: var(--f-body, Inter, Arial, sans-serif);
  animation: enh-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.enh-journal[hidden] {
  display: none;
}
.enh-journal header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #2a2350;
}
.enh-journal header small {
  font-family: var(--f-pixel, monospace);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #b9a8ff;
}
.enh-journal h2 {
  margin: 2px 0 0;
  font-family: var(--f-pixel, monospace);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.06em;
}
.enh-journal__count {
  margin-left: auto;
  font-family: var(--f-mono, monospace);
  font-size: 13px;
  color: var(--gold, #ffc94d);
}
.enh-journal__close {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: #9189a8;
  font-size: 22px;
  cursor: pointer;
}
.enh-journal__close:hover {
  color: #fff;
}
.enh-journal__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 16px;
}
.enh-stat {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px #261f4a;
}
.enh-stat small {
  display: block;
  font-family: var(--f-pixel, monospace);
  font-size: 8px;
  letter-spacing: 0.12em;
  color: #9189a8;
  text-transform: uppercase;
}
.enh-stat b {
  display: block;
  margin-top: 3px;
  font-family: var(--f-mono, monospace);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.enh-stat--pos b {
  color: var(--green, #3ddc84);
}
.enh-stat--neg b {
  color: var(--red, #ff5d6c);
}
.enh-journal__list {
  list-style: none;
  margin: 0;
  padding: 4px 16px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.enh-ach {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px #221c44;
  opacity: 0.7;
}
.enh-ach.is-done {
  opacity: 1;
  box-shadow: inset 0 0 0 1px #6a5a1f, 0 0 18px rgba(255, 201, 77, 0.1);
  background: linear-gradient(90deg, rgba(255, 201, 77, 0.08), transparent 70%);
}
.enh-ach__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: #19153a;
  box-shadow: inset 0 0 0 1px #2f2860;
  font-size: 15px;
  color: #9189a8;
}
.enh-ach.is-done .enh-ach__icon {
  color: #3a2000;
  background: linear-gradient(#ffd56b, #d68a1a);
  box-shadow: none;
}
.enh-ach__body b {
  display: block;
  font-size: 13px;
  font-weight: 600;
}
.enh-ach__body small {
  color: #9189a8;
  font-size: 11.5px;
}
.enh-ach__bar {
  display: block;
  height: 3px;
  margin-top: 5px;
  background: #1c1840;
}
.enh-ach__bar u {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6a45c9, #ff36ad);
}
.enh-ach__state {
  font-family: var(--f-mono, monospace);
  font-size: 11px;
  color: #9189a8;
}
.enh-ach.is-done .enh-ach__state {
  color: var(--gold, #ffc94d);
}
.enh-journal footer {
  padding: 8px 16px 12px;
  border-top: 1px solid #2a2350;
  font-size: 11px;
  color: #7d7699;
}
.enh-journal kbd {
  padding: 1px 5px;
  background: #1c1840;
  box-shadow: inset 0 0 0 1px #3b3470;
  font-family: var(--f-pixel, monospace);
  font-size: 9px;
}

/* ---------- Achievement toast ---------- */
.enh-toasts {
  position: fixed;
  z-index: 60;
  right: 16px;
  bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.enh-toast {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 10px;
  min-width: 280px;
  max-width: 360px;
  padding: 10px 14px 10px 10px;
  background: rgba(12, 10, 30, 0.96);
  box-shadow: inset 0 0 0 1px #ffc94d99, 0 0 30px rgba(255, 190, 70, 0.25), 0 10px 30px #00000080;
  animation: enh-slide 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.enh-toast.is-out {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.4s, transform 0.4s;
}
.enh-toast__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #3a2000;
  background: linear-gradient(#ffd56b, #d68a1a);
  font-size: 15px;
}
.enh-toast__body b {
  display: block;
  font-family: var(--f-pixel, monospace);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--gold, #ffc94d);
}
.enh-toast__body span {
  font-size: 13px;
  color: #e4defa;
}

@keyframes enh-pop {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.97); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes enh-slide {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 700px) {
  .enh-journal__stats { grid-template-columns: repeat(2, 1fr); }
  .enh-journal-btn { bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .enh-journal, .enh-toast { animation: none; }
}

/* ---------- Part 2: audio control, trade reactions, card button ---------- */
.enh-audio {
  position: fixed;
  right: 56px;
  bottom: 12px;
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 8px 0 0;
  background: rgba(13, 12, 34, 0.85);
  box-shadow: inset 0 0 0 1px #2d2750;
}
.enh-audio__btn {
  width: 30px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #e4defa;
  font-size: 15px;
  cursor: pointer;
}
.enh-audio__btn:hover {
  color: #fff;
}
.enh-audio__btn.is-off {
  color: #6d6590;
}
.enh-audio__vol {
  width: 72px;
  height: 4px;
  accent-color: #8b63ff;
  cursor: pointer;
}

.enh-particles {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 55;
}
.enh-hit {
  position: fixed;
  inset: 0;
  z-index: 54;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 40, 70, 0) 35%, rgba(255, 40, 70, 0.4) 100%);
  animation: enh-hit 0.85s ease-out forwards;
}
@keyframes enh-hit {
  0% { opacity: 0; }
  12% { opacity: 1; }
  100% { opacity: 0; }
}
.enh-shake {
  animation: enh-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes enh-shake {
  10%, 90% { transform: translate(-1px, 0); }
  20%, 80% { transform: translate(2px, 1px); }
  30%, 50%, 70% { transform: translate(-3px, -1px); }
  40%, 60% { transform: translate(3px, 1px); }
}

.enh-journal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.enh-journal__card {
  flex: none;
  padding: 7px 12px;
  border: 0;
  background: linear-gradient(#ff4fb8, #c91f86);
  color: #fff;
  font-family: var(--f-pixel, monospace);
  font-size: 9px;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: inset 0 -2px #00000059;
}
.enh-journal__card:hover {
  filter: brightness(1.1);
}

@media (max-width: 700px) {
  .enh-audio__vol { display: none; }
  .enh-audio { right: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .enh-hit, .enh-shake { animation: none; }
}

/* ---------- Landing: socials, progress, reveal ---------- */
.enh-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.enh-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  min-width: 32px;
  justify-content: center;
  padding: 0 8px;
  color: #e4defa;
  background: rgba(20, 16, 44, 0.7);
  box-shadow: inset 0 0 0 1px #2d2750;
  transition: color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.enh-social a:hover {
  color: #fff;
  box-shadow: inset 0 0 0 1px #ff36ad, 0 0 16px rgba(255, 54, 173, 0.35);
  transform: translateY(-1px);
}
.enh-social a:focus-visible {
  outline: 2px solid var(--cyan, #5ee7ff);
  outline-offset: 2px;
}
.enh-social--labels a {
  padding: 0 14px;
  font-family: var(--f-pixel, monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
}
.lnav .enh-social {
  margin-left: auto;
  margin-right: 14px;
}
.lfoot .enh-social {
  margin: 10px 0;
}
.enh-social--final {
  margin-top: 8px;
}
.enh-social__label {
  margin: 18px 0 0;
  font-family: var(--f-pixel, monospace);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #b9a8ff;
}

.enh-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 70;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, #6a45c9, #ff36ad, #ffc94d);
  box-shadow: 0 0 10px rgba(255, 54, 173, 0.6);
  pointer-events: none;
}

.lnav__links a {
  transition: color 0.15s;
}
.lnav__links a.is-active {
  color: #fff;
  text-shadow: 0 0 12px rgba(255, 54, 173, 0.7);
}

.enh-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.enh-reveal.enh-in {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  .lnav .enh-social { margin-right: 8px; }
  .lnav .enh-social a { height: 30px; min-width: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .enh-reveal { opacity: 1; transform: none; transition: none; }
  .enh-progress { display: none; }
}

/* Centre the socials where the page is centred. */
.lfoot {
  flex-wrap: wrap;
}
.lfoot .enh-social {
  display: flex;
  justify-content: center;
  flex-basis: 100%;
  width: 100%;
  order: 1;
}
.lfoot p {
  order: 2;
}
.lsec--final .enh-social__label,
.lsec--final .enh-social--final {
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}
.lsec--final .enh-social--final {
  margin-bottom: 28px;
}

.enh-final-socials {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 8px auto 28px;
}
.enh-final-socials .enh-social__label {
  margin: 10px 0 12px;
  padding-left: 0.2em; /* offsets the trailing letter-spacing so it centres optically */
}
.enh-final-socials .enh-social--final {
  margin: 0;
}

/* ---------- Tools: FX settings and photo mode ---------- */
.enh-tools {
  position: fixed;
  left: 16px;
  bottom: 88px;
  z-index: 11;
  display: flex;
  gap: 8px;
}
.enh-tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px 0 6px;
  border: 0;
  background: rgba(13, 12, 34, 0.85);
  box-shadow: inset 0 0 0 1px #2d2750;
  color: #e4defa;
  font-family: var(--f-pixel, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: box-shadow 0.2s, color 0.2s;
}
.enh-tool[data-act="fx"], .enh-tool[data-act="help"] {
  padding: 0 12px;
}
.enh-tool span {
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  background: #1c1840;
  box-shadow: inset 0 0 0 1px #3b3470, inset 0 -2px #00000080;
  font-size: 9.5px;
}
.enh-tool:hover {
  color: #fff;
  box-shadow: inset 0 0 0 1px #8a63ff, 0 0 16px rgba(139, 99, 255, 0.35);
}

.enh-fxpanel {
  position: fixed;
  left: 16px;
  bottom: 130px;
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 220px;
  padding: 12px 14px;
  background: rgba(13, 12, 34, 0.96);
  box-shadow: inset 0 0 0 1px #3a2f78, 0 10px 30px #000a;
  color: #e4defa;
  font-size: 13px;
}
.enh-fxpanel[hidden] { display: none; }
.enh-fxpanel b {
  font-family: var(--f-pixel, monospace);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #b9a8ff;
}
.enh-fxpanel label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.enh-fxpanel input {
  accent-color: #ff36ad;
  width: 15px;
  height: 15px;
}
.enh-fxpanel small {
  color: #7d7699;
  font-size: 11px;
}

/* Photo mode: hide the interface, keep the room. */
.enh-photo .hud,
.enh-photo .toasts,
.enh-photo .enh-journal-btn,
.enh-photo .enh-journal,
.enh-photo .enh-audio,
.enh-photo .enh-tools,
.enh-photo .enh-fxpanel,
.enh-photo .enh-toasts,
.enh-photo .enh-progress {
  display: none !important;
}
.enh-photobar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 80;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(10, 8, 24, 0.92);
  box-shadow: inset 0 0 0 1px #3a2f78, 0 10px 40px #000b;
}
.enh-photobar[hidden] { display: none; }
.enh-photobar__filters {
  display: flex;
  gap: 4px;
}
.enh-photobar button {
  border: 0;
  padding: 8px 12px;
  background: #1c1840;
  box-shadow: inset 0 0 0 1px #2f2860;
  color: #cfc9ef;
  font-family: var(--f-pixel, monospace);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.enh-photobar button:hover { color: #fff; }
.enh-photobar button.is-on {
  color: #fff;
  background: #3a1d6b;
  box-shadow: inset 0 0 0 1px #8a63ff;
}
.enh-photobar .enh-photobar__save {
  background: linear-gradient(#ff4fb8, #c91f86);
  color: #fff;
  box-shadow: inset 0 -2px #00000059;
}
.enh-shutter {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #fff;
  pointer-events: none;
  animation: enh-shutter 0.4s ease-out forwards;
}
@keyframes enh-shutter {
  from { opacity: 0.85; }
  to { opacity: 0; }
}
@media (max-width: 700px) {
  .enh-photobar { flex-wrap: wrap; justify-content: center; width: calc(100vw - 24px); }
  .enh-tools { bottom: 92px; }
}

/* ---------- Rumor radio ---------- */
.enh-radio {
  position: fixed;
  top: 112px;
  left: 50%;
  z-index: 30;
  width: min(430px, calc(100vw - 24px));
  transform: translateX(-50%);
  padding: 12px 14px 14px;
  background: rgba(10, 8, 24, 0.95);
  box-shadow: inset 0 0 0 1px #3a2f78, 0 10px 36px #000b, 0 0 28px rgba(139, 99, 255, 0.2);
  color: #e4defa;
  animation: enh-radio-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.enh-radio[hidden] { display: none; }
.enh-radio.is-right { box-shadow: inset 0 0 0 1px #3ddc84, 0 10px 36px #000b, 0 0 28px rgba(61, 220, 132, 0.25); }
.enh-radio.is-wrong { box-shadow: inset 0 0 0 1px #ff5d6c, 0 10px 36px #000b, 0 0 28px rgba(255, 93, 108, 0.25); }
.enh-radio header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-pixel, monospace);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #b9a8ff;
}
.enh-radio__dot {
  width: 7px;
  height: 7px;
  background: #ff36ad;
  box-shadow: 0 0 8px #ff36ad;
  animation: rd-pulse-dot 1.4s ease-in-out infinite;
}
.enh-radio__timer {
  margin-left: auto;
  font-family: var(--f-mono, monospace);
  color: #9189a8;
}
.enh-radio__text {
  margin: 8px 0 10px;
  font-size: 14px;
  line-height: 1.4;
}
.enh-radio__actions { display: flex; gap: 8px; }
.enh-radio__actions[hidden] { display: none; }
.enh-radio__actions button {
  flex: 1;
  padding: 9px 10px;
  border: 0;
  background: #1c1840;
  box-shadow: inset 0 0 0 1px #2f2860;
  color: #e4defa;
  font-family: var(--f-pixel, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.enh-radio__actions button:hover { color: #fff; box-shadow: inset 0 0 0 1px #8a63ff; }
.enh-radio__actions button[data-ans="believe"] {
  background: linear-gradient(#6a45c9, #4b2da0);
  color: #fff;
}
.enh-radio__result {
  margin: 4px 0 0;
  font-size: 13px;
  color: #e4defa;
}
.enh-radio__result[hidden] { display: none; }
@keyframes enh-radio-in {
  from { opacity: 0; transform: translate(-50%, -12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Weekly challenges (inside the journal) ---------- */
.enh-week {
  margin: 0 16px 6px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 0 0 1px #261f4a;
}
.enh-week__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-pixel, monospace);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: #b9a8ff;
}
.enh-week__head span { color: var(--gold, #ffc94d); font-family: var(--f-mono, monospace); }
.enh-week__head em { margin-left: auto; font-style: normal; color: #5ee7ff; }
.enh-week__list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.enh-week__list li {
  display: grid;
  grid-template-columns: 1fr 90px 44px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #cfc9ef;
}
.enh-week__list li.is-done { color: var(--gold, #ffc94d); }
.enh-week__list i { display: block; height: 4px; background: #1c1840; }
.enh-week__list u { display: block; height: 100%; background: linear-gradient(90deg, #6a45c9, #ff36ad); }
.enh-week__list li.is-done u { background: var(--gold, #ffc94d); }
.enh-week__list small { text-align: right; font-family: var(--f-mono, monospace); font-size: 10.5px; color: #9189a8; }

/* ---------- Tour ---------- */
.enh-tour {
  position: fixed;
  left: 50%;
  bottom: 120px;
  z-index: 50;
  width: min(420px, calc(100vw - 24px));
  transform: translateX(-50%);
  padding: 14px 16px 14px;
  background: rgba(10, 8, 24, 0.97);
  box-shadow: inset 0 0 0 1px #8a63ff, 0 10px 40px #000c, 0 0 34px rgba(139, 99, 255, 0.3);
  color: #e4defa;
  animation: enh-radio-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.enh-tour[hidden] { display: none; }
.enh-tour__step { font-family: var(--f-pixel, monospace); font-size: 9px; letter-spacing: 0.16em; color: #b9a8ff; }
.enh-tour h3 { margin: 6px 0 4px; font-family: var(--f-pixel, monospace); font-size: 16px; font-weight: 400; letter-spacing: 0.04em; color: #fff; }
.enh-tour p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; }
.enh-tour__dots { display: flex; gap: 5px; margin-bottom: 10px; }
.enh-tour__dots i { width: 14px; height: 4px; background: #28224d; }
.enh-tour__dots i.is-on { background: #ff36ad; }
.enh-tour__actions { display: flex; gap: 8px; }
.enh-tour__actions button {
  padding: 8px 12px;
  border: 0;
  background: #1c1840;
  box-shadow: inset 0 0 0 1px #2f2860;
  color: #cfc9ef;
  font-family: var(--f-pixel, monospace);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.enh-tour__actions button:disabled { opacity: 0.4; cursor: default; }
.enh-tour__actions button[data-t="skip"] { margin-right: auto; background: transparent; box-shadow: none; color: #7d7699; }
.enh-tour__actions .is-primary { background: linear-gradient(#ff4fb8, #c91f86); color: #fff; box-shadow: inset 0 -2px #00000059; }

@media (prefers-reduced-motion: reduce) {
  .enh-radio, .enh-tour { animation: none; }
}

/* ---------- Phones and narrow windows ---------- */
@media (max-width: 700px) {
  /* The game's own HUD: stop the mission card and the balance card overlapping. */
  .hud-mission {
    width: auto !important;
    right: 16px;
  }
  .hud__right {
    width: min(230px, calc(100vw - 32px)) !important;
    top: 132px !important;
  }
  .hud__right .sol-widget__usd {
    display: none;
  }

  /* Our controls: one row in the free band above the game's own buttons. */
  .enh-journal-btn {
    bottom: 132px;
    left: 16px;
  }
  .enh-tools {
    bottom: 132px;
    left: 140px;
  }
  .enh-audio {
    bottom: 132px;
    right: 16px;
  }
  .enh-fxpanel {
    bottom: 178px;
  }
  .enh-radio {
    top: auto;
    bottom: 184px;
  }
  .enh-tour {
    bottom: 184px;
  }
  .enh-photobar {
    bottom: 12px;
  }
  .enh-toasts {
    bottom: 184px;
    left: 12px;
    right: 12px;
  }
  .enh-toast {
    min-width: 0;
    max-width: none;
  }
  .enh-journal__stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .enh-week__list li {
    grid-template-columns: 1fr 56px 40px;
  }
  .enh-tool {
    height: 38px;
  }
  .enh-journal-btn {
    height: 38px;
  }
}

/* Landing: never let the ticker (or anything else) widen the page on phones. */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}
.landing {
  overflow-x: clip;
}
.hero-ticker {
  overflow: hidden;
  max-width: 100vw;
}
@media (max-width: 700px) {
  .lnav .enh-social {
    margin-right: 8px;
  }
}

/* Landing on phones: fit the hero and the nav into the screen. */
@media (max-width: 560px) {
  .hero .logo--xl {
    font-size: clamp(26px, 9.2vw, 56px) !important;
    max-width: 100%;
  }
  .hero__tag,
  .hero__copy,
  .hero__loader {
    max-width: 100%;
  }
  .hero__ctas {
    flex-wrap: wrap;
    gap: 10px;
  }
  .hero__ctas .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
  .lnav {
    padding: 12px 12px !important;
    gap: 10px !important;
  }
  .lnav__brand span {
    display: none;
  }
  .lnav .enh-social {
    margin-left: auto;
    margin-right: 0;
  }
  .lnav .btn {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 10px;
    white-space: nowrap;
  }
  .hero__kicker {
    max-width: calc(100% - 8px);
    font-size: 10px;
  }
}

/* Keyboard hints make no sense on touch screens and collide with the sound button. */
@media (max-width: 700px) {
  .hud-hints {
    display: none !important;
  }
  .hud__right .sol-widget__state {
    display: none;
  }
}

/* ================= Touch controls ================= */
.enh-touch[hidden] { display: none; }
.enh-touch {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  z-index: 35;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.enh-touch * { touch-action: none; }
.enh-stick {
  position: fixed;
  left: 20px;
  bottom: 24px;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  pointer-events: auto;
  background: radial-gradient(circle, rgba(106, 69, 201, 0.22), rgba(13, 12, 34, 0.55));
  box-shadow: inset 0 0 0 2px rgba(138, 99, 255, 0.55), 0 0 24px rgba(139, 99, 255, 0.2);
}
.enh-stick::before,
.enh-stick::after {
  content: '';
  position: absolute;
  background: rgba(185, 168, 255, 0.28);
}
.enh-stick::before { left: 50%; top: 14px; bottom: 14px; width: 2px; transform: translateX(-50%); }
.enh-stick::after { top: 50%; left: 14px; right: 14px; height: 2px; transform: translateY(-50%); }
.enh-stick__knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(#8a63ff, #4b2da0);
  box-shadow: inset 0 -3px #00000059, 0 4px 14px #0008;
  z-index: 1;
}
.enh-pad {
  position: fixed;
  right: 12px;
  bottom: 20px;
  width: 190px;
  height: 130px;
  pointer-events: none;
}
.enh-pad__btn {
  position: absolute;
  pointer-events: auto;
  display: grid;
  place-items: center;
  align-content: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-family: var(--f-pixel, monospace);
  letter-spacing: 0.08em;
  background: rgba(20, 16, 44, 0.82);
  box-shadow: inset 0 0 0 2px rgba(138, 99, 255, 0.6), 0 6px 18px #0008;
}
.enh-pad__btn small { font-size: 7px; letter-spacing: 0.12em; color: #b9a8ff; margin-top: 2px; }
.enh-pad__btn--e { right: 0; bottom: 8px; width: 82px; height: 82px; font-size: 24px;
  background: linear-gradient(#ff4fb8, #c91f86); box-shadow: inset 0 -4px #00000059, 0 6px 18px #0008; }
.enh-pad__btn--e small { color: #ffd6ee; }
.enh-pad__btn--p { right: 94px; bottom: 0; width: 58px; height: 58px; font-size: 17px; }
.enh-pad__btn--c { right: 62px; bottom: 66px; width: 58px; height: 58px; font-size: 17px; }
.enh-pad__btn.is-down { transform: scale(0.92); filter: brightness(1.3); }
.enh-touch.has-prompt .enh-pad__btn--e { animation: enh-prompt 1.1s ease-in-out infinite; }
@keyframes enh-prompt {
  50% { box-shadow: inset 0 -4px #00000059, 0 0 0 5px rgba(255, 79, 184, 0.35), 0 6px 18px #0008; }
}

.enh-rotate {
  position: fixed;
  left: 50%;
  bottom: 274px;
  transform: translateX(-50%);
  z-index: 36;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  max-width: calc(100vw - 24px);
  background: rgba(10, 8, 24, 0.95);
  box-shadow: inset 0 0 0 1px #8a63ff, 0 6px 24px #000a;
  color: #e4defa;
  font-size: 12.5px;
}
.enh-rotate[hidden] { display: none; }
.enh-rotate button { width: 26px; height: 26px; border: 0; background: transparent; color: #9189a8; font-size: 18px; }

/* ---------- Portrait phones: re-stack the bottom area ---------- */
@media (max-width: 700px) {
  .hud-prompt { bottom: 172px !important; }
  .enh-journal-btn { bottom: 228px; }
  .enh-tools { bottom: 228px; }
  .enh-audio { bottom: 228px; }
  .enh-fxpanel { bottom: 274px; }
  .enh-radio { bottom: 274px; }
  .enh-tour { bottom: 274px; }
  .enh-toasts { bottom: 274px; }
  .hud-sound { display: none; }
}

/* ---------- Landscape phones: compact HUD, icons only ---------- */
@media (max-height: 520px) {
  .hud-mission { width: 250px !important; top: 8px !important; left: 8px !important; }
  .hud-mission__card { padding: 7px 10px 8px; }
  .hud-mission__text small { display: none; }
  .hud-mission__toggle { display: none; }
  .hud__right { width: 190px !important; top: 8px !important; right: 8px !important; gap: 5px; }
  .hud-player { padding: 5px 8px; }
  .hud__right .sol-widget { padding: 6px 10px 7px; }
  .hud__right .sol-widget__usd,
  .hud__right .sol-widget__state { display: none; }
  .hud__right .sol-widget__value .mono { font-size: 17px; }
  .hud-hints { display: none !important; }
  .hud-prompt { bottom: 12px !important; font-size: 11px; }
  .hud-sound { display: none; }

  .enh-journal-btn,
  .enh-tool[data-act="photo"] { font-size: 0; }
  .enh-journal-btn span,
  .enh-tool[data-act="photo"] span { font-size: 10px; }
  .enh-journal-btn { top: 8px; bottom: auto; left: calc(50% - 94px); height: 34px; padding: 0 6px; }
  .enh-tools { top: 8px; bottom: auto; left: calc(50% - 42px); }
  .enh-tool { height: 34px; }
  .enh-audio { bottom: 12px; left: 140px; right: auto; }
  .enh-fxpanel { top: 50px; bottom: auto; left: calc(50% - 94px); }
  .enh-radio { top: 52px; bottom: auto; }
  .enh-tour { bottom: 12px; }
  .enh-toasts { bottom: 12px; }

  .enh-stick { width: 104px; height: 104px; left: 16px; bottom: 14px; }
  .enh-stick__knob { width: 46px; height: 46px; }
  .enh-pad { right: 10px; bottom: 10px; width: 170px; height: 116px; }
  .enh-pad__btn--e { width: 72px; height: 72px; }
  .enh-pad__btn--p { right: 82px; width: 52px; height: 52px; }
  .enh-pad__btn--c { right: 54px; bottom: 58px; width: 52px; height: 52px; }
}

/* ---------- Leaderboard ---------- */
.enh-board {
  position: fixed;
  z-index: 46;
  top: 50%;
  left: 50%;
  width: min(560px, calc(100vw - 24px));
  max-height: min(660px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #14102c, #0a0818);
  box-shadow: inset 0 0 0 1px #3a2f78, 0 20px 60px #000c, 0 0 40px rgba(139, 99, 255, 0.18);
  color: var(--text, #f8f5ff);
  animation: enh-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.enh-board[hidden] { display: none; }
.enh-board header {
  display: flex;
  align-items: center;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #2a2350;
}
.enh-board header small { font-family: var(--f-pixel, monospace); font-size: 9px; letter-spacing: 0.16em; color: #b9a8ff; }
.enh-board h2 { margin: 2px 0 0; font-family: var(--f-pixel, monospace); font-size: 18px; font-weight: 400; letter-spacing: 0.06em; }
.enh-board__close { margin-left: auto; width: 30px; height: 30px; border: 0; background: transparent; color: #9189a8; font-size: 22px; cursor: pointer; }
.enh-board__close:hover { color: #fff; }
.enh-board__status { margin: 8px 16px 0; min-height: 16px; font-size: 12px; color: #9189a8; }
.enh-board__body { padding: 8px 16px 12px; overflow-y: auto; }
.enh-board footer { padding: 8px 16px 12px; border-top: 1px solid #2a2350; font-size: 11px; color: #7d7699; }
.enh-board__join { margin-bottom: 12px; padding: 10px 12px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px #261f4a; font-size: 13px; color: #cfc9ef; }
.enh-board__join p { margin: 0 0 8px; }
.enh-board__consent { font-size: 12px; color: #9189a8; }
.enh-board__form { display: flex; gap: 8px; }
.enh-board__form input {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  border: 0;
  background: #14102d;
  box-shadow: inset 0 0 0 1px #3a2f78;
  color: #fff;
  font: inherit;
}
.enh-board__form input:focus { outline: 2px solid #5ee7ff; outline-offset: 1px; }
.enh-board__join-btn {
  padding: 0 14px;
  border: 0;
  background: linear-gradient(#ff4fb8, #c91f86);
  color: #fff;
  font-family: var(--f-pixel, monospace);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: inset 0 -2px #00000059;
}
.enh-board__join-btn:disabled { opacity: 0.5; cursor: wait; }
.enh-board__ghost { padding: 7px 12px; border: 0; background: #1c1840; box-shadow: inset 0 0 0 1px #2f2860; color: #cfc9ef; font-family: var(--f-pixel, monospace); font-size: 9px; letter-spacing: 0.12em; cursor: pointer; }
.enh-board__msg { margin: 8px 0 0 !important; min-height: 16px; font-size: 12px; color: #ff8a97; }
.enh-board__row {
  display: grid;
  grid-template-columns: 34px 1fr 44px 92px 64px;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.enh-board__row--head { font-family: var(--f-pixel, monospace); font-size: 8.5px; letter-spacing: 0.14em; color: #7d7699; }
.enh-board__row:nth-child(2) .enh-board__rank { color: var(--gold, #ffc94d); }
.enh-board__row.is-me { background: rgba(255, 54, 173, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 54, 173, 0.45); }
.enh-board__rank { font-family: var(--f-mono, monospace); color: #9189a8; }
.enh-board__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enh-board__row .mono { font-family: var(--f-mono, monospace); text-align: right; font-variant-numeric: tabular-nums; }
.enh-board__empty { padding: 18px 8px; color: #9189a8; font-size: 13px; }
.enh-board-open .enh-journal { display: none !important; }
@media (max-width: 520px) {
  .enh-board__row { grid-template-columns: 28px 1fr 36px 76px; }
  .enh-board__row > :nth-child(5) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .enh-board { animation: none; } }

/* Narrow portrait: one row of icon buttons that always fits. */
@media (max-width: 480px) {
  .enh-journal-btn,
  .enh-tool[data-act="photo"],
  .enh-tool[data-act="board"] { font-size: 0; }
  .enh-journal-btn span,
  .enh-tool[data-act="photo"] span,
  .enh-tool[data-act="board"] span { font-size: 10px; }
  .enh-journal-btn { height: 38px; padding: 0 6px; }
  .enh-tools { left: 66px; gap: 6px; }
  .enh-audio { right: 12px; }
  .enh-audio__vol { display: none; }
}

/* ---------- Daily puzzle: Spot the Rug ---------- */
.enh-puzzle {
  position: fixed;
  z-index: 47;
  top: 50%;
  left: 50%;
  width: min(860px, calc(100vw - 24px));
  max-height: min(680px, calc(100vh - 32px));
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #14102c, #0a0818);
  box-shadow: inset 0 0 0 1px #3a2f78, 0 20px 60px #000c, 0 0 40px rgba(139, 99, 255, 0.18);
  color: var(--text, #f8f5ff);
  animation: enh-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.enh-puzzle[hidden] { display: none; }
.enh-puzzle header { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; border-bottom: 1px solid #2a2350; }
.enh-puzzle header small { font-family: var(--f-pixel, monospace); font-size: 9px; letter-spacing: 0.16em; color: #b9a8ff; }
.enh-puzzle h2 { margin: 2px 0 0; font-family: var(--f-pixel, monospace); font-size: 18px; font-weight: 400; letter-spacing: 0.06em; }
.enh-puzzle__streak { margin-left: auto; font-family: var(--f-mono, monospace); font-size: 12px; color: var(--gold, #ffc94d); }
.enh-puzzle__close { width: 30px; height: 30px; border: 0; background: transparent; color: #9189a8; font-size: 22px; cursor: pointer; }
.enh-puzzle__close:hover { color: #fff; }
.enh-puzzle__intro { margin: 10px 16px 0; font-size: 13px; color: #9189a8; }
.enh-puzzle__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px 16px; overflow-y: auto; }
.enh-token {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px #261f4a;
}
.enh-token.is-rug { box-shadow: inset 0 0 0 1px #ff5d6c, 0 0 22px rgba(255, 93, 108, 0.2); }
.enh-token.is-safe { box-shadow: inset 0 0 0 1px #2a5a45; }
.enh-token.is-picked::after { content: 'YOUR PICK'; align-self: flex-start; font-family: var(--f-pixel, monospace); font-size: 8px; letter-spacing: 0.14em; color: #5ee7ff; }
.enh-token__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.enh-token__top b { font-family: var(--f-pixel, monospace); font-size: 16px; font-weight: 400; color: #fff; }
.enh-token__top span { font-family: var(--f-mono, monospace); font-size: 10.5px; color: #9189a8; }
.enh-token__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.enh-token__rows li { display: flex; flex-direction: column; gap: 1px; padding: 5px 7px; background: rgba(0, 0, 0, 0.18); }
.enh-token__rows li.is-flag { background: rgba(255, 93, 108, 0.14); box-shadow: inset 2px 0 #ff5d6c; }
.enh-token__rows small { font-family: var(--f-pixel, monospace); font-size: 7.5px; letter-spacing: 0.14em; color: #7d7699; }
.enh-token__rows span { font-size: 12.5px; color: #e4defa; }
.enh-token__note { background: transparent !important; box-shadow: inset 0 0 0 1px #2d2750; }
.enh-token__pick {
  margin-top: auto;
  padding: 10px;
  border: 0;
  background: linear-gradient(#ff4fb8, #c91f86);
  color: #fff;
  font-family: var(--f-pixel, monospace);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: inset 0 -2px #00000059;
}
.enh-token__pick:disabled { background: #1c1840; color: #9189a8; box-shadow: none; cursor: default; }
.enh-token.is-rug .enh-token__pick:disabled { color: #ff8a97; }
.enh-puzzle__banner { margin: 0 16px 10px; padding: 12px 14px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px #3a2f78; font-size: 13px; }
.enh-puzzle__banner[hidden] { display: none; }
.enh-puzzle__banner.is-right { box-shadow: inset 0 0 0 1px #3ddc84; }
.enh-puzzle__banner.is-wrong { box-shadow: inset 0 0 0 1px #ff5d6c; }
.enh-puzzle__why { margin: 8px 0 6px; padding-left: 18px; color: #cfc9ef; }
.enh-puzzle__why li { margin: 3px 0; }
.enh-puzzle__next { margin: 6px 0 8px; color: #9189a8; font-size: 12px; }
.enh-puzzle__share, .enh-photobar__share {
  padding: 8px 12px;
  border: 0;
  background: #1c1840;
  box-shadow: inset 0 0 0 1px #8a63ff;
  color: #fff;
  font-family: var(--f-pixel, monospace);
  font-size: 9px;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.enh-puzzle footer { padding: 8px 16px 12px; border-top: 1px solid #2a2350; font-size: 11px; color: #7d7699; }
@media (max-width: 700px) {
  .enh-puzzle__cards { grid-template-columns: 1fr; }
}

/* Extra tool buttons, journal share, backup row */
.enh-journal__btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.enh-journal__card--share { background: #1c1840; box-shadow: inset 0 0 0 1px #8a63ff; }
.enh-fxpanel__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.enh-fxpanel__btns button { padding: 7px 9px; border: 0; background: #1c1840; box-shadow: inset 0 0 0 1px #2f2860; color: #cfc9ef; font-family: var(--f-pixel, monospace); font-size: 8.5px; letter-spacing: 0.1em; cursor: pointer; }
.enh-fxpanel__btns button:hover { color: #fff; box-shadow: inset 0 0 0 1px #8a63ff; }
.enh-fxpanel__msg { margin: 6px 0 0; min-height: 14px; font-size: 11px; color: #9189a8; }
.enh-fxpanel { max-height: calc(100vh - 160px); overflow-y: auto; }
@media (max-width: 480px) {
  .enh-tool[data-act="puzzle"] { font-size: 0; }
  .enh-tool[data-act="puzzle"] span { font-size: 10px; }
  .enh-fxpanel { width: min(260px, calc(100vw - 32px)); }
}
@media (max-height: 520px) {
  .enh-tool[data-act="puzzle"] { font-size: 0; }
  .enh-tool[data-act="puzzle"] span { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .enh-puzzle { animation: none; } }

.enh-puzzle { overflow-y: auto; }
.enh-puzzle__cards { overflow: visible; }