* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #070518;
  overflow: hidden;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  color: #dfe6ff;
  -webkit-user-select: none;
  user-select: none;
}

#wrap { position: relative; width: 100vw; height: 100vh; }
#game { width: 100%; height: 100%; display: block; touch-action: none; }

.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud-left { position: absolute; top: 16px; left: 16px; display: flex; flex-direction: column; gap: 10px; }
#hud-right { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }

.panel {
  background: rgba(10, 8, 40, 0.72);
  border: 1px solid rgba(120, 140, 255, 0.35);
  border-radius: 8px;
  padding: 8px 14px;
  min-width: 110px;
  backdrop-filter: blur(3px);
}
.label { font-size: 11px; letter-spacing: 3px; color: #8fa0e8; }
.big { font-size: 26px; font-weight: bold; color: #fff; text-shadow: 0 0 8px rgba(120,160,255,.7); }
.big.dim { color: #556; text-shadow: none; }
.small { font-size: 12px; color: #aab6ee; margin-top: 2px; }

.meter {
  width: 130px; height: 12px; margin-top: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(120,140,255,.4);
  border-radius: 6px; overflow: hidden;
}
#goal-fill, #speed-fill, #magic-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #3f7fe8, #43e5c5);
}
#goal-fill { transition: width .3s; }
#magic-fill { background: linear-gradient(90deg, #a04fd8, #e05fd0); transition: width .3s; }

.key-hint { color: #5c689e; letter-spacing: 1px; }
.count { font-size: 22px; font-weight: bold; color: #fff; }
.count.dim { color: #556; }
.small.dim { color: #556; }

.pips { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; max-width: 140px; align-items: baseline; }
.pip {
  width: 14px; height: 14px; border-radius: 50%;
  background: #43e5c5; box-shadow: 0 0 6px #43e5c5;
}
.pip.off { background: #23274a; box-shadow: none; }

#next { display: block; margin-top: 4px; }

#menu-btn {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  pointer-events: auto;
  font-family: inherit; font-size: 12px; letter-spacing: 2px; font-weight: bold;
  color: #aab6ee; background: rgba(10, 8, 40, 0.72);
  border: 1px solid rgba(120, 140, 255, 0.35); border-radius: 8px;
  padding: 7px 16px; cursor: pointer;
  backdrop-filter: blur(3px);
}
#menu-btn:hover { color: #fff; border-color: #43e5c5; box-shadow: 0 0 10px rgba(67,229,197,.35); }
body.touch #menu-btn { display: none; } /* touch UI has its own pause button */

#msg {
  position: absolute; left: 50%; top: 14%;
  transform: translateX(-50%);
  font-size: 34px; font-weight: bold; letter-spacing: 4px;
  color: #fff; text-shadow: 0 0 18px #6f8fff, 0 2px 0 #000;
  opacity: 0; transition: opacity .25s;
  text-align: center; white-space: nowrap;
}
#msg.show { opacity: 1; }

/* ---------- Overlays / menus ---------- */
.overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(13,10,46,0.88) 0%, rgba(7,5,24,0.96) 100%);
  gap: 18px; z-index: 10;
}
.overlay h1 {
  font-size: clamp(44px, 9vw, 84px); letter-spacing: 10px; color: #fff;
  text-shadow: 0 0 24px #4f6fff, 0 0 60px #4f6fff;
}
.overlay h1 span { color: #43e5c5; text-shadow: 0 0 24px #43e5c5; }
.overlay h2 { font-size: 34px; letter-spacing: 8px; text-shadow: 0 0 18px #4f6fff; }
.tagline { color: #8fa0e8; font-size: 15px; }

.menu-items { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.overlay button {
  font-family: inherit; font-size: 20px; letter-spacing: 6px; font-weight: bold;
  color: #dfe6ff; background: rgba(30, 34, 80, 0.6);
  border: 2px solid rgba(120,140,255,.5); border-radius: 10px;
  padding: 12px 46px; cursor: pointer; transition: all .15s;
}
.overlay button:hover, .overlay button.sel {
  background: rgba(70, 90, 200, 0.55);
  border-color: #43e5c5; color: #fff;
  box-shadow: 0 0 18px rgba(67,229,197,.45);
  transform: scale(1.04);
}
.hint { color: #6f7bb8; font-size: 13px; margin-top: 16px; }

#puzzle-grid {
  display: grid; grid-template-columns: repeat(6, 64px); gap: 10px;
  max-height: 60vh; overflow-y: auto; padding: 6px;
}
#puzzle-grid button {
  padding: 0; width: 64px; height: 64px; font-size: 20px; letter-spacing: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
#puzzle-grid button .stars { font-size: 10px; color: #ffd75e; letter-spacing: 1px; }
#puzzle-grid button.locked { opacity: .35; cursor: default; }
#puzzle-grid button.locked:hover { transform: none; box-shadow: none; background: rgba(30,34,80,.6); border-color: rgba(120,140,255,.5); }

#fable-grid {
  display: grid; grid-template-columns: repeat(4, 128px); gap: 10px;
  max-height: 56vh; overflow-y: auto; padding: 6px;
}
#fable-grid button {
  padding: 8px 4px; font-size: 13px; letter-spacing: 1px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border-color: var(--hue, rgba(120,140,255,.5));
}
#fable-grid button .fname { font-size: 13px; }
#fable-grid button .stars { font-size: 11px; color: var(--hue, #ffd75e); letter-spacing: 1px; }
#fable-grid button.locked { opacity: .3; cursor: default; }
#fable-grid button.locked:hover { transform: none; box-shadow: none; background: rgba(30,34,80,.6); }

@media (max-width: 700px) {
  #fable-grid { grid-template-columns: repeat(3, 104px); }
  #fable-grid button { font-size: 11px; }
}

.help-text { max-width: 620px; line-height: 1.55; font-size: 15px; padding: 0 22px; }
.help-text p { margin-bottom: 10px; }
.help-text b { color: #43e5c5; }
.help-text .pad { color: #8fa0e8; font-size: 13px; }

button.back { margin-top: 8px; font-size: 15px; padding: 8px 30px; }
.overlay button.minor { font-size: 14px; padding: 8px 30px; opacity: 0.75; }

#save-menu textarea {
  width: min(560px, 86vw); height: 74px;
  background: rgba(10, 8, 40, 0.8);
  border: 1px solid rgba(120, 140, 255, 0.4);
  border-radius: 8px;
  color: #aab6ee; font-family: monospace; font-size: 11px;
  padding: 8px; resize: none;
}
#save-menu button { font-size: 14px; padding: 8px 26px; }
#save-status { min-height: 18px; color: #43e5c5; }

@media (max-width: 700px) {
  #hud-left .panel, #hud-right .panel { min-width: 80px; padding: 5px 9px; }
  .big { font-size: 19px; }
  #msg { font-size: 24px; }
  #puzzle-grid { grid-template-columns: repeat(4, 60px); }
}

/* ---------- touch controls ---------- */
#touch-controls { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#touch-controls button {
  pointer-events: auto;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
  font-family: inherit; font-weight: bold; color: #dfe6ff;
  background: rgba(24, 28, 66, 0.55);
  border: 2px solid rgba(120, 140, 255, 0.45);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
#touch-controls button.pressed { background: rgba(90, 110, 230, 0.65); border-color: #43e5c5; }
#touch-controls button span { font-size: 9px; letter-spacing: 1px; color: #8fa0e8; margin-top: 1px; }

#tc-stick {
  position: absolute; left: 14px; bottom: 18px;
  width: 168px; height: 168px;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  border-radius: 50%;
  background: rgba(24, 28, 66, 0.55);
  border: 2px solid rgba(120, 140, 255, 0.45);
  backdrop-filter: blur(2px);
}
/* tick ring: the step/glide boundary (GLIDE in touchui.js) */
#tc-stick::before {
  content: '';
  position: absolute; inset: 27%; /* = GLIDE boundary: 0.55 * (r-14px) travel */
  border-radius: 50%;
  border: 1px dashed rgba(120, 140, 255, 0.35);
  pointer-events: none;
}
#tc-stick.active { border-color: #43e5c5; }
#tc-knob {
  position: absolute; left: 50%; top: 50%;
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: rgba(90, 110, 230, 0.55);
  border: 2px solid rgba(160, 175, 255, 0.7);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  transition: transform 90ms ease-out;
  pointer-events: none;
}
#tc-stick.active #tc-knob {
  transition: none;
  background: rgba(90, 110, 230, 0.8);
  border-color: #43e5c5;
}

#tc-actions { position: absolute; right: 14px; bottom: 18px; width: 175px; height: 190px; }
#tc-drop {
  position: absolute; right: 0; bottom: 0;
  width: 92px; height: 92px; font-size: 26px;
  border-color: rgba(67, 229, 197, 0.7) !important;
}
#tc-grab {
  position: absolute; right: 96px; bottom: 34px;
  width: 74px; height: 74px; font-size: 20px;
}
#tc-grab.on { background: rgba(67, 229, 197, 0.4); border-color: #43e5c5; box-shadow: 0 0 14px rgba(67,229,197,.6); }
#tc-magic, #tc-reset {
  position: absolute; right: 22px; bottom: 104px;
  width: 60px; height: 60px; font-size: 18px;
}
#tc-magic.charged { border-color: #e05fd0; box-shadow: 0 0 14px rgba(224,95,208,.65); color: #ffd7f7; }
#tc-pause {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 44px; font-size: 13px;
  border-radius: 12px !important;
}

/* touch devices: compact HUD that hugs the top corners */
body.touch #hud-left { top: 8px; left: 8px; gap: 5px; flex-direction: row; flex-wrap: wrap; max-width: 46vw; }
body.touch #hud-right { top: 8px; right: 8px; gap: 5px; align-items: flex-end; max-width: 46vw; }
body.touch .panel { min-width: 0; padding: 4px 8px; }
body.touch .label { font-size: 9px; letter-spacing: 2px; }
body.touch .big { font-size: 16px; }
body.touch .meter { width: 90px; height: 9px; }
body.touch #next { width: 64px; height: 86px; }
body.touch #combo-panel, body.touch #magic-panel .meter { display: none; }
body.touch #msg { top: 20%; font-size: 20px; white-space: normal; max-width: 90vw; }
body.touch .overlay button { padding: 12px 30px; }
body.touch .hint { display: none; }
body.touch .key-hint { display: none; }

@media (orientation: landscape) {
  body.touch #tc-stick { bottom: 50%; transform: translateY(50%); }
  body.touch #tc-actions { bottom: 50%; transform: translateY(50%); }
}