/* Hidden Worlds — HUD, hub and win screens. The world itself is canvas-drawn. */

:root {
  --ink: #241d3f;
  --ink-soft: #5b5280;
  --cream: #fdf7ef;
  --panel: rgba(253, 247, 239, 0.94);
  --shadow: 0 10px 30px rgba(30, 20, 60, 0.28);
  --pink: #ff8fb8;
  --grape: #7b5cf0;
  --mint: #3fd0a8;
  --sun: #ffc861;
  --radius: 18px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #2b2350;
  color: var(--ink);
  font-family: "Baloo 2", "Nunito", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  user-select: none;
  -webkit-user-select: none;
}

#app { position: fixed; inset: 0; }

#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.hidden { display: none !important; }

/* ---------- buttons ---------- */

.pill {
  font: inherit;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 11px 20px;
  cursor: pointer;
  color: var(--ink);
  background: var(--panel);
  box-shadow: var(--shadow);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.12s ease, filter 0.12s ease;
  white-space: nowrap;
}
.pill:hover { filter: brightness(1.04); }
.pill:active { transform: scale(0.94); }
.pill-primary { background: linear-gradient(160deg, var(--grape), #a17ffb); color: #fff; }
.pill-quiet { background: rgba(255, 255, 255, 0.82); }
.pill-ghost { background: rgba(253, 247, 239, 0.88); backdrop-filter: blur(6px); }
.pill.on { background: linear-gradient(160deg, var(--sun), #ffd98e); }

/* ---------- in-level HUD ---------- */

#hud {
  position: absolute;
  top: calc(10px + var(--safe-t));
  left: 10px;
  right: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
  z-index: 4;
}
#hud > * { pointer-events: auto; }

#hud-title {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 7px 18px;
  box-shadow: var(--shadow);
  text-align: center;
  flex: 0 1 auto;
  min-width: 0;
}
#hud-title h1 { margin: 0; font-size: 1.05rem; letter-spacing: 0.01em; }
#hud-title p { margin: 0; font-size: 0.8rem; color: var(--ink-soft); font-weight: 700; }

#hud-right { margin-left: auto; display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; }
#mechanic-controls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#btn-timer { opacity: 0.55; font-variant-numeric: tabular-nums; }
#btn-timer.showing { opacity: 1; }
#btn-timer:not(.showing) #timer-text { display: none; }

/* ---------- checklist tray ---------- */

/* Compact by default: one short row. The handle opens it into the full grid,
   and the engine lets the camera pan the map out from under whichever height
   the tray currently has, so nothing can hide behind it. */
#checklist {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(8px + var(--safe-b));
  z-index: 4;
  padding: 8px;
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.tray-handle {
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 15px;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--panel);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.tray-handle:active { transform: translateX(-50%) scale(0.94); }
.tray-caret { display: inline-block; font-size: 0.66rem; color: var(--ink-soft); transition: transform 0.22s ease; }
#checklist.expanded .tray-caret { transform: rotate(180deg); }

.tray-items {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  /* the tray owns horizontal drags; the canvas underneath gets everything else */
  touch-action: pan-x;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

#checklist.expanded .tray-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  align-content: start;
  gap: 8px;
  max-height: min(40vh, 320px);
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
}

/* Fade the edge the list continues past, so it's visible that there is more. */
.tray-items.more-start { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px); mask-image: linear-gradient(to right, transparent 0, #000 26px); }
.tray-items.more-end { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 26px); mask-image: linear-gradient(to left, transparent 0, #000 26px); }
.tray-items.more-start.more-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
#checklist.expanded .tray-items.more-start { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
#checklist.expanded .tray-items.more-end { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 22px); mask-image: linear-gradient(to top, transparent 0, #000 22px); }
#checklist.expanded .tray-items.more-start.more-end {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}

.chip {
  flex: 0 0 auto;
  border: none;
  font: inherit;
  cursor: pointer;
  background: rgba(123, 92, 240, 0.1);
  border-radius: 14px;
  padding: 5px 11px 5px 5px;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 200px;
  transition: transform 0.18s cubic-bezier(0.2, 1.6, 0.4, 1), background 0.2s, opacity 0.2s;
}
.chip:active { transform: scale(0.95); }
.chip canvas { width: 32px; height: 32px; display: block; flex: 0 0 auto; }
.chip .chip-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.chip .chip-label {
  font-weight: 800;
  font-size: 0.83rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 148px;
}
.chip .chip-note { font-size: 0.7rem; color: var(--ink-soft); font-weight: 700; }
/* compact rows stay one line tall — the note and long riddles wait for expand */
#checklist:not(.expanded) .chip .chip-note { display: none; }
.chip.unfound canvas { filter: grayscale(1) brightness(0.35) opacity(0.4); }
.chip.found { background: rgba(63, 208, 168, 0.22); }
.chip.found .chip-label { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-soft); }
.chip.next { background: linear-gradient(160deg, var(--sun), #ffe0a0); box-shadow: 0 0 0 3px rgba(255, 200, 97, 0.55); }
.chip.next .chip-label { color: #4b3208; }
.chip.next::after { content: "next"; font-size: 0.62rem; font-weight: 800; color: #7a5410; letter-spacing: 0.06em; text-transform: uppercase; margin-left: 2px; }
.chip.pop { animation: chip-pop 0.55s cubic-bezier(0.2, 1.7, 0.4, 1); }
@keyframes chip-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.22) rotate(-3deg); }
  100% { transform: scale(1); }
}

/* Expanded: a fixed-width cell per chip, so wrap long names and riddles
   instead of clipping them. */
#checklist.expanded .chip { width: 100%; max-width: none; min-width: 0; }
#checklist.expanded .chip .chip-label,
#checklist.expanded .chip.riddle .chip-label {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
#checklist.expanded .chip.riddle .chip-label { font-size: 0.78rem; }

/* Clue chips carry a whole sentence and no picture, so they get the full width
   of their cell and wrap instead of clipping. */
#checklist.expanded .tray-items:has(.chip.clue) { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.chip.clue { align-items: flex-start; }
.chip.clue .chip-label { white-space: normal; overflow-wrap: anywhere; max-width: 100%; font-size: 0.84rem; }
.chip.clue .chip-note { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6rem; opacity: 0.7; }

#hint-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(var(--tray-h, 76px) + 14px + var(--safe-b));
  transform: translateX(-50%);
  z-index: 5;
  max-width: min(420px, 88vw);
  text-align: center;
  padding: 12px 20px;
  border-radius: var(--radius);
  background: rgba(36, 29, 63, 0.93);
  color: var(--cream);
  font-weight: 700;
  box-shadow: var(--shadow);
  animation: bubble-in 0.28s cubic-bezier(0.2, 1.5, 0.4, 1);
}
@keyframes bubble-in { from { opacity: 0; transform: translate(-50%, 12px) scale(0.9); } }

/* ---------- screens (hub + win) ---------- */

.screen {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
  overflow-y: auto;
  animation: fade-in 0.3s ease;
}
@keyframes fade-in { from { opacity: 0; } }

#hub {
  background:
    radial-gradient(1100px 700px at 15% -10%, #5b47b8 0%, transparent 60%),
    radial-gradient(900px 700px at 100% 10%, #3b7fd4 0%, transparent 55%),
    linear-gradient(170deg, #2b2350 0%, #1d1a3c 100%);
}
.hub-inner { width: min(980px, 100%); margin: auto; }
.hub-head { text-align: center; margin-bottom: 22px; }
.game-title {
  margin: 0;
  font-size: clamp(2.3rem, 8vw, 3.6rem);
  color: var(--cream);
  letter-spacing: -0.01em;
  text-shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
}
.game-title span { color: var(--sun); }
.game-sub { margin: 6px 0 0; color: #c3bbe6; font-weight: 700; }

.level-list { display: flex; flex-direction: column; gap: 8px; }

.level-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 18px 2px 10px;
}
.section-head h2 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--cream);
  letter-spacing: 0.01em;
}
.section-head .section-count {
  font-size: 0.78rem;
  font-weight: 800;
  color: #b9afe0;
  background: rgba(255, 255, 255, 0.1);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
/* a hairline that runs to the end of the row, so the group reads as a group */
.section-head::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, rgba(255,255,255,0.16), rgba(255,255,255,0));
}

.level-card {
  position: relative;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  color: #fff;
  box-shadow: var(--shadow);
  transition: transform 0.16s cubic-bezier(0.2, 1.5, 0.4, 1), box-shadow 0.16s;
  min-height: 156px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.level-card:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 16px 34px rgba(20, 12, 45, 0.42); }
.level-card:active { transform: scale(0.97); }
.level-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.level-card .card-body {
  position: relative;
  padding: 12px 14px 13px;
  background: linear-gradient(to top, rgba(24, 18, 45, 0.9) 30%, rgba(24, 18, 45, 0));
}
.level-card h3 { margin: 0; font-size: 1.08rem; }
.level-card p { margin: 2px 0 0; font-size: 0.78rem; opacity: 0.82; font-weight: 700; }
.level-card .badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: var(--sun);
  color: #4b3208;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  display: flex;
  gap: 5px;
  align-items: center;
}
.level-card .num {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 2;
  font-size: 0.78rem;
  font-weight: 800;
  opacity: 0.8;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.hub-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  color: #c3bbe6;
  font-weight: 700;
  flex-wrap: wrap;
}
#hub-progress { margin: 0; }

#loading {
  z-index: 7;
  background:
    radial-gradient(1100px 700px at 20% -10%, #5b47b8 0%, transparent 60%),
    linear-gradient(170deg, #2b2350 0%, #1d1a3c 100%);
}
.loading-card { text-align: center; color: var(--cream); width: min(360px, 82vw); }
.loading-emoji { font-size: 3.6rem; animation: bob 1.6s ease-in-out infinite; }
.loading-card h2 { margin: 8px 0 18px; font-size: 1.5rem; }
.loading-card p { margin: 12px 0 0; font-size: 0.86rem; color: #c3bbe6; font-weight: 700; }
.loading-track {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.loading-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sun), var(--mint));
  transition: width 0.18s ease-out;
}
#loading.fading { animation: fade-out 0.22s ease forwards; }
@keyframes fade-out { to { opacity: 0; } }

#win { background: rgba(28, 22, 55, 0.72); backdrop-filter: blur(7px); }
.win-card {
  background: var(--cream);
  border-radius: 28px;
  padding: 30px 34px;
  text-align: center;
  box-shadow: var(--shadow);
  max-width: 400px;
  width: 100%;
  animation: win-in 0.5s cubic-bezier(0.2, 1.5, 0.4, 1);
}
@keyframes win-in { from { transform: scale(0.8) translateY(20px); opacity: 0; } }
.win-emoji { font-size: 3.4rem; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-9px) rotate(4deg); } }
.win-card h2 { margin: 4px 0 2px; font-size: 1.8rem; }
.win-card > p { margin: 0; color: var(--ink-soft); font-weight: 700; }
.win-stats { display: flex; justify-content: center; gap: 26px; margin: 18px 0 20px; }
.win-stats div { display: flex; flex-direction: column; gap: 2px; }
.win-stats dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 800; }
.win-stats dd { margin: 0; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.win-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  #hud-title { padding: 6px 12px; }
  #hud-title h1 { font-size: 0.95rem; }
  .chip { max-width: 168px; padding: 4px 10px 4px 4px; }
  .chip canvas { width: 30px; height: 30px; }
  .chip .chip-label { font-size: 0.8rem; max-width: 118px; }
  .level-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .section-head { margin: 12px 2px 8px; }
  .section-head h2 { font-size: 1rem; }
  .level-card { min-height: 128px; }
}