:root {
  --ui: 1;
  --ink: #f3ecff;
  --muted: #b9b0d8;
  --panel: rgba(16, 14, 38, 0.88);
  --panel-edge: rgba(201, 166, 255, 0.35);
  --gold: #e8b04a;
  --amber: #ffb547;
  --coral: #ff7a6b;
  --violet: #6650a8;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; background: #07060f; color: var(--ink);
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  overflow: hidden; -webkit-user-select: none; user-select: none;
  touch-action: none;
}
#stage {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 960px; height: 540px; overflow: hidden; background: #0b1530;
  container-type: size;
}
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Sizes inside the stage are expressed in cqh so the UI scales with the game. */
#hud { position: absolute; left: max(1.6cqh, env(safe-area-inset-left)); top: 1.6cqh; right: max(1.6cqh, env(safe-area-inset-right)); display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
#objective {
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 99px;
  padding: calc(0.8cqh * var(--ui)) calc(2cqh * var(--ui)); font-size: calc(2.7cqh * var(--ui));
  max-width: 70%; line-height: 1.25;
}
#objective:empty { display: none; }
#objective::before { content: '✦ '; color: var(--gold); }
#hudkeys { font-size: calc(2.1cqh * var(--ui)); color: var(--muted); opacity: 0.75; padding-top: 0.8cqh; }

#prompt {
  position: absolute; transform: translate(-50%, -100%);
  background: rgba(255, 245, 225, 0.94); color: #22183a; font-weight: 700;
  border-radius: 1.2cqh; padding: calc(0.5cqh * var(--ui)) calc(1.4cqh * var(--ui));
  font-size: calc(2.5cqh * var(--ui)); white-space: nowrap; pointer-events: none;
  box-shadow: 0 0.6cqh 2cqh rgba(0, 0, 0, 0.35);
}
#prompt b { display: inline-block; background: #22183a; color: #ffe2a8; border-radius: 0.6cqh; padding: 0 0.8cqh; margin-right: 0.8cqh; }

#toasts { position: absolute; right: 1.6cqh; top: 8.5cqh; width: 35%; display: flex; flex-direction: column; gap: 1cqh; align-items: flex-end; pointer-events: none; }
.toast {
  background: var(--panel); border: 1px solid var(--panel-edge); border-left: 0.5cqh solid var(--gold);
  border-radius: 1.2cqh; padding: calc(1cqh * var(--ui)) calc(1.6cqh * var(--ui));
  font-size: calc(2.4cqh * var(--ui)); line-height: 1.3; animation: tin 0.35s ease-out;
  transition: opacity 0.6s, transform 0.6s;
}
.toast .tt { font-family: 'Fredoka', sans-serif; color: var(--amber); font-size: 1.05em; }
.toast.souv { border-left-color: var(--coral); }
.toast.out { opacity: 0; transform: translateX(3cqh); }
@keyframes tin { from { opacity: 0; transform: translateX(3cqh); } }

#dialog {
  position: absolute; left: 1.6cqh; top: 8.5cqh; width: 60%;
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 2cqh;
  padding: calc(1.6cqh * var(--ui)) calc(2.6cqh * var(--ui)) calc(2cqh * var(--ui));
  min-height: 14cqh; cursor: pointer;
}
#dialog .who { font-family: 'Fredoka', sans-serif; font-size: calc(2.9cqh * var(--ui)); margin-bottom: 0.4cqh; }
#dialog .text { font-size: calc(3.1cqh * var(--ui)); line-height: 1.38; min-height: 2.6em; }
#dialog.thought .text { font-style: italic; color: #ffe2b8; }
#dialog.who-narr .text { color: #d8d2f0; }
#dialog .next { position: absolute; right: 2cqh; bottom: 1cqh; font-size: 2.2cqh; color: var(--gold); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: 0.2; } }

#choices {
  position: absolute; left: 1.6cqh; top: 8.5cqh; width: 60%;
  display: flex; flex-direction: column; gap: 1.2cqh;
}
#choices button, .menu-items button, .card-btn {
  font: inherit; font-size: calc(2.9cqh * var(--ui)); color: var(--ink); text-align: left;
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 1.6cqh;
  padding: calc(1.2cqh * var(--ui)) calc(2.2cqh * var(--ui)); cursor: pointer;
  transition: background 0.15s, transform 0.15s, border-color 0.15s;
}
#choices button.sel, .menu-items button.sel, #choices button:hover, .menu-items button:hover {
  background: rgba(102, 80, 168, 0.92); border-color: var(--amber); transform: translateX(0.8cqh);
}
#choices button .k { color: var(--amber); font-weight: 700; margin-right: 1cqh; }

#card {
  position: absolute; inset: 0; background: rgba(7, 6, 18, 0.93);
  display: flex; align-items: center; justify-content: center; animation: fin 0.6s ease-out;
}
@keyframes fin { from { opacity: 0; } }
.card-inner { width: 74%; max-height: 96%; overflow-y: auto; text-align: center; }
#cardArt { width: 100%; max-height: 44cqh; object-fit: contain; border-radius: 2cqh; display: block; margin: 0 auto 1.6cqh; }
.card-sub { color: var(--gold); font-size: calc(2.4cqh * var(--ui)); letter-spacing: 0.3em; text-transform: uppercase; }
.card-title { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: calc(5.4cqh * var(--ui)); margin: 0.6cqh 0 1.2cqh; color: #fff3dc; }
.card-text p { font-size: calc(3cqh * var(--ui)); line-height: 1.45; margin: 0 auto 1.2cqh; max-width: 92%; color: #e6def8; }
.card-text p.small { font-size: calc(2.4cqh * var(--ui)); color: var(--muted); }
.card-btn { text-align: center; margin-top: 1cqh; border-color: var(--amber); }

#menu { position: absolute; inset: 0; background: rgba(7, 6, 18, 0.6); display: flex; align-items: center; justify-content: center; }
#menu.title { background: transparent; align-items: flex-end; justify-content: flex-start; padding: 0 0 7cqh 7cqh; }
#menu .panel { background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 2.4cqh; padding: 3cqh 4cqh; width: 56%; max-height: 92%; overflow-y: auto; }
#menu.title .panel { background: transparent; border: none; width: 40%; padding: 0; }
#menu.wide .panel { width: 80%; }
.menu-title { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: calc(4cqh * var(--ui)); margin: 0 0 1.6cqh; color: #fff3dc; }
.menu-title:empty { display: none; }
.menu-content { font-size: calc(2.6cqh * var(--ui)); line-height: 1.45; color: #e2dbf6; margin-bottom: 1.6cqh; }
.menu-content:empty { display: none; }
.menu-content h3 { font-family: 'Fredoka', sans-serif; color: var(--amber); font-size: 1.1em; margin: 1.4cqh 0 0.6cqh; }
.menu-content table { width: 100%; border-collapse: collapse; }
.menu-content td { padding: 0.4cqh 1cqh 0.4cqh 0; vertical-align: top; }
.menu-content td:first-child { color: var(--amber); white-space: nowrap; }
.menu-content .sv { display: inline-block; margin: 0.3cqh 0.6cqh 0.3cqh 0; padding: 0.2cqh 1cqh; border-radius: 99px; background: rgba(255, 255, 255, 0.07); }
.menu-content .sv.on { background: rgba(232, 176, 74, 0.25); color: #ffe7b5; }
.menu-items { display: flex; flex-direction: column; gap: 1cqh; }
.menu-items button .val { float: right; color: var(--amber); }

#fade { position: absolute; inset: 0; background: #05040c; opacity: 0; pointer-events: none; transition: opacity 0.5s; z-index: 5; }
#card { z-index: 6; }
#menu { z-index: 7; }
#fade.on { opacity: 1; }

#touch { position: absolute; inset: 0; pointer-events: none; }
.tpad { position: absolute; display: flex; gap: 1.6cqh; pointer-events: auto; align-items: flex-end; }
.tpad.right {
  display: block; width: 48cqh; height: 44cqh;
  right: max(2cqh, env(safe-area-inset-right)); bottom: max(2cqh, env(safe-area-inset-bottom));
}
.tpad.right button { position: absolute; }
.tpad.right .b-jump { right: 0; bottom: 0; width: 22cqh; height: 22cqh; font-size: 9cqh; }
.tpad.right .b-act { right: 25cqh; bottom: 1cqh; width: 17cqh; height: 17cqh; font-size: 7cqh; }
.tpad.right .b-meow { right: 24cqh; bottom: 22cqh; width: 13cqh; height: 13cqh; font-size: 3.2cqh; }
.tpad.right .b-sniff { right: 4cqh; bottom: 25cqh; width: 13cqh; height: 13cqh; font-size: 5cqh; }
.tpad.top { right: max(2cqh, env(safe-area-inset-right)); top: 1.4cqh; }
.tpad.top button { width: 11cqh; height: 11cqh; font-size: 3.6cqh; }
#joyzone {
  position: absolute; left: 0; bottom: 0; width: 46%; height: 64%;
  pointer-events: auto; touch-action: none;
}
#joybase {
  position: absolute; left: max(17cqh, calc(env(safe-area-inset-left) + 15cqh)); top: 62%;
  width: 26cqh; height: 26cqh; margin: -13cqh 0 0 -13cqh; border-radius: 50%;
  background: rgba(20, 16, 44, 0.35); border: 2px solid rgba(255, 255, 255, 0.22);
  opacity: 0.6; transition: opacity 0.15s; pointer-events: none;
}
#joybase.active { opacity: 1; transition: none; }
#joyknob {
  position: absolute; left: 50%; top: 50%; width: 12cqh; height: 12cqh; margin: -6cqh 0 0 -6cqh;
  border-radius: 50%; background: rgba(232, 176, 74, 0.75); box-shadow: 0 0 3cqh rgba(255, 190, 110, 0.45);
}
body.touching #hudkeys { display: none; }
body.touching #toasts { top: 14cqh; }
.tpad button {
  width: 13cqh; height: 13cqh; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(20, 16, 44, 0.5); color: #fff; font: 700 4cqh 'Nunito', sans-serif; touch-action: none;
}
.tpad button.small { width: 9.5cqh; height: 9.5cqh; font-size: 2.6cqh; }
.tpad button.on { background: rgba(102, 80, 168, 0.8); }
#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate { display: flex; position: fixed; inset: 0; z-index: 20; background: #07060f; color: #f3ecff; align-items: center; justify-content: center; text-align: center; padding: 24px; font-size: 20px; line-height: 1.5; }
}

body.contrast { --panel: #000; --panel-edge: #fff; --muted: #e0e0e0; }
body.contrast #dialog .text, body.contrast .toast, body.contrast #objective { color: #fff; }
body.contrast #prompt { background: #fff; color: #000; }