/* Whisker Wood — cozy storybook UI */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream: #fff8e7;
  --cream-90: rgba(255, 248, 231, 0.94);
  --wood: #8a5a2b;
  --wood-dark: #5d3a1e;
  --leaf: #4a7a2a;
  --gold: #e8a93a;
  --ink: #3a2612;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;
  background: #1a2438;
  color: var(--ink);
  touch-action: none;
}

#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }

.hidden { display: none !important; }

/* ---------- shared ---------- */
.panel {
  background: var(--cream-90);
  border: 3px solid var(--wood);
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(58, 38, 18, 0.35), 0 8px 24px rgba(0, 0, 0, 0.25);
  padding: 8px 14px;
}

.screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(20, 30, 16, 0.15), rgba(10, 16, 8, 0.55));
}

.title-card, .select-card, .menu-card {
  background: var(--cream-90);
  border: 4px solid var(--wood);
  border-radius: 22px;
  box-shadow: 0 6px 0 rgba(58, 38, 18, 0.4), 0 16px 48px rgba(0, 0, 0, 0.45);
  padding: 30px 40px;
  text-align: center;
  max-width: min(92vw, 520px);
}

h1 { font-size: clamp(34px, 7vw, 54px); color: var(--leaf); text-shadow: 0 2px 0 #d8e8c0; margin-bottom: 4px; }
h2 { font-size: clamp(22px, 5vw, 32px); color: var(--leaf); margin-bottom: 14px; }
.tagline { font-size: 18px; color: var(--wood); margin-bottom: 22px; font-style: italic; }
.credits, .tip { font-size: 13px; color: #7a6a4a; margin-top: 16px; }

.big-btn {
  display: block; width: 100%;
  margin: 8px 0;
  padding: 13px 26px;
  font-family: inherit; font-size: 20px; font-weight: bold;
  color: var(--cream);
  background: linear-gradient(#6fae3f, #4a7a2a);
  border: 3px solid var(--wood-dark);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--wood-dark);
  cursor: pointer;
  transition: transform 0.06s, box-shadow 0.06s;
}
.big-btn:hover { transform: translateY(-1px); }
.big-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--wood-dark); }

.menu-btn {
  display: block; width: 100%;
  margin: 6px 0;
  padding: 10px 20px;
  font-family: inherit; font-size: 16px; font-weight: bold;
  color: var(--ink);
  background: linear-gradient(#f5ead0, #e8d8b0);
  border: 3px solid var(--wood);
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--wood);
  cursor: pointer;
}
.menu-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--wood); }
.menu-btn.danger { color: #a33; border-color: #a33; box-shadow: 0 3px 0 #a33; }

/* ---------- character select ---------- */
.select-row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.arrow-btn {
  font-size: 30px; padding: 12px 16px;
  background: linear-gradient(#f5ead0, #e8d8b0);
  border: 3px solid var(--wood); border-radius: 50%;
  color: var(--wood-dark); cursor: pointer;
  box-shadow: 0 3px 0 var(--wood);
}
.arrow-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--wood); }
.select-info { flex: 1; min-width: 220px; }
#animal-emoji { font-size: 58px; }
#animal-name { font-size: 28px; font-weight: bold; color: var(--leaf); }
#animal-desc { font-size: 15px; margin: 6px 0 10px; min-height: 40px; }
#animal-stats { display: flex; flex-direction: column; gap: 2px; max-width: 240px; margin: 0 auto; }
.stat-row { display: flex; justify-content: space-between; font-size: 14px; font-weight: bold; }
.stat-row .pips { color: var(--gold); letter-spacing: 2px; }
#animal-special { margin-top: 10px; font-size: 14px; font-weight: bold; color: #b3582a; min-height: 36px; }

/* ---------- HUD ---------- */
#player-badge {
  position: absolute; top: 12px; left: 12px;
  display: flex; align-items: center; gap: 10px;
}
#badge-emoji { font-size: 34px; }
#badge-name { font-weight: bold; font-size: 16px; }
#badge-level { font-size: 12px; color: var(--wood); font-weight: bold; }
#xp-bar { width: 130px; height: 8px; background: #d8c8a0; border-radius: 4px; margin-top: 3px; overflow: hidden; }
#xp-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #6fae3f, #a8d84f); transition: width 0.4s; }

#compass {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: min(280px, 40vw); overflow: hidden; text-align: center;
  font-weight: bold; color: var(--wood-dark); white-space: nowrap;
  padding: 6px 0;
}
#compass-inner { display: inline-block; }

#quest-panel {
  position: absolute; top: 12px; right: 12px;
  max-width: min(330px, 72vw);
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: bold;
}
#quest-arrow { display: inline-block; color: var(--gold); font-size: 19px; transition: transform 0.15s; }
#quest-dist { color: var(--wood); font-size: 12px; }

#clock {
  position: absolute; bottom: 14px; right: 14px;
  display: flex; align-items: center; gap: 8px;
  font-size: 22px;
}
#clock-dial { font-size: 20px; transition: transform 0.5s linear; }

#interact-prompt {
  position: absolute; bottom: 17vh; left: 50%; transform: translateX(-50%);
  font-size: 17px; font-weight: bold;
  animation: pulse 1.4s infinite;
}
@keyframes pulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.05); } }

#toast {
  position: absolute; top: 70px; left: 50%; transform: translateX(-50%);
  font-size: 16px; font-weight: bold;
  background: rgba(58, 38, 18, 0.88);
  color: var(--cream); border-color: var(--gold);
  max-width: 86vw; text-align: center;
}

#controls-hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: var(--wood-dark);
  opacity: 0.92; transition: opacity 1.5s;
}
#controls-hint.faded { opacity: 0; pointer-events: none; }

/* ---------- dialog ---------- */
#dialog {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: max(5vh, 30px);
  background: transparent;
}
.dialog-box {
  display: flex; align-items: flex-start; gap: 14px;
  width: min(640px, 92vw);
  padding: 16px 20px;
  cursor: pointer;
}
#dialog-emoji { font-size: 44px; }
.dialog-body { flex: 1; }
#dialog-name { font-weight: bold; color: var(--leaf); font-size: 15px; margin-bottom: 4px; }
#dialog-text { font-size: 17px; line-height: 1.45; min-height: 52px; }
#dialog-hint { align-self: flex-end; color: var(--gold); font-size: 18px; animation: pulse2 1s infinite; }
@keyframes pulse2 { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ---------- howto / finale ---------- */
.howto-list { list-style: none; text-align: left; font-size: 15px; line-height: 1.5; }
.howto-list li { margin: 7px 0; }
.finale-card h1 { font-size: 64px; }
.finale-card p { margin: 10px 0; font-size: 16px; }

/* ---------- touch controls ----------
   Layout is keyed off body.touch (set by JS on coarse-pointer devices), so it
   applies on phones in BOTH orientations — not just narrow viewports. */
#touch-controls { position: absolute; inset: 0; pointer-events: none; }
#joystick {
  position: absolute;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: calc(16px + env(safe-area-inset-left, 0px));
  width: 124px; height: 124px;
  border-radius: 50%;
  background: rgba(255, 248, 231, 0.22);
  border: 3px solid rgba(255, 248, 231, 0.5);
  pointer-events: auto;
  touch-action: none;
}
#joystick-knob {
  position: absolute; top: 50%; left: 50%;
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: var(--cream-90);
  border: 3px solid var(--wood);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
/* thumb-arc cluster: big jump in the corner, talk above it, special to its left */
#touch-buttons {
  position: absolute;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  width: 172px; height: 164px;
  pointer-events: none;
}
.touch-btn {
  position: absolute;
  width: 58px; height: 58px;
  border-radius: 50%;
  font-size: 22px;
  background: var(--cream-90);
  border: 3px solid var(--wood);
  box-shadow: 0 4px 0 var(--wood);
  touch-action: none;
  pointer-events: auto;
  opacity: 0.92;
}
#btn-jump { right: 0; bottom: 0; width: 78px; height: 78px; font-size: 30px; }
#btn-action { right: 12px; bottom: 94px; }
#btn-special { right: 94px; bottom: 6px; }
.touch-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--wood); }

/* while talking, the joystick and buttons get out of the dialog's way */
.dialog-open #touch-controls { display: none !important; }

/* ---------- touch HUD layout ---------- */
body.touch #compass { display: none; }
body.touch #controls-hint { display: none; }
body.touch #player-badge { transform: scale(0.82); transform-origin: top left; }
body.touch #clock {
  top: 10px; right: 10px; bottom: auto;
  padding: 5px 10px; font-size: 17px;
}
body.touch #clock-dial { font-size: 15px; }
body.touch #quest-panel {
  top: 76px; left: 10px; right: 10px;
  max-width: none;
  font-size: 13px; padding: 7px 12px;
}
body.touch #quest-text {
  flex: 1; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
body.touch #toast { top: 130px; font-size: 14px; max-width: 92vw; }
body.touch #interact-prompt {
  bottom: calc(212px + env(safe-area-inset-bottom, 0px));
  font-size: 15px;
  max-width: 86vw; text-align: center;
}
body.touch #dialog { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
body.touch .dialog-box { padding: 12px 14px; gap: 10px; }
body.touch #dialog-emoji { font-size: 34px; }
body.touch #dialog-text { font-size: 15px; min-height: 64px; }

/* landscape phones: shorter screens get a tighter fit */
@media (max-height: 520px) {
  body.touch #joystick { width: 106px; height: 106px; }
  body.touch #joystick-knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  body.touch #touch-buttons { width: 150px; height: 146px; }
  body.touch .touch-btn { width: 52px; height: 52px; font-size: 20px; }
  body.touch #btn-jump { width: 68px; height: 68px; font-size: 26px; }
  body.touch #btn-action { right: 10px; bottom: 82px; }
  body.touch #btn-special { right: 82px; bottom: 5px; }
  body.touch #quest-panel { top: 10px; left: 196px; right: 98px; padding: 5px 10px; font-size: 12px; }
  body.touch #toast { top: 58px; }
  body.touch #interact-prompt { bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }
  body.touch #player-badge { transform: scale(0.72); }
}

/* ---------- fade ---------- */
#fade {
  position: absolute; inset: 0;
  background: #0a0c08;
  opacity: 0; pointer-events: none;
  transition: opacity 0.38s;
}
#fade.show { opacity: 1; pointer-events: auto; }

/* narrow desktop windows still get a sane top bar */
@media (max-width: 640px) {
  #compass { display: none; }
}