/* ─── Wim — watercolour paper ─────────────────────────────────────────────── */
:root {
  --paper:     #f4ecd8;
  --paper-2:   #ebe0c6;
  --paper-3:   #e2d4b4;
  --ink:       #4a3a2a;
  --ink-soft:  #7a6650;
  --sage:      #6f8752;
  --sage-deep: #56693c;
  --rust:      #b5643a;
  --gold:      #e8c46a;
  --plum:      #7a5a86;
  --shadow:    rgba(60,44,28,.28);
  --radius:    18px;
  --font:      'Patrick Hand', 'Comic Sans MS', system-ui, sans-serif;
  --display:   'Caveat Brush', 'Patrick Hand', cursive;

  /* Shared jawn.games chrome, on paper */
  --jawn-chrome-font:     var(--font);
  --jawn-chrome-weight:   400;
  --jawn-chrome-font-size: 17px;
  --jawn-chrome-bg:       rgba(244,236,216,.92);
  --jawn-chrome-bg-hover: var(--paper-2);
  --jawn-chrome-fg:       var(--ink);
  --jawn-chrome-border:   1.5px solid rgba(74,58,42,.35);
  --jawn-chrome-border-hover: var(--ink-soft);
  --jawn-chrome-shadow:   0 2px 0 rgba(74,58,42,.18);
  --jawn-hub-bg:          var(--sage);
  --jawn-hub-bg-hover:    var(--sage-deep);
  --jawn-hub-fg:          #fbf6ea;
  --jawn-hub-border:      1.5px solid var(--sage-deep);
  --jawn-hub-shadow:      0 3px 0 rgba(58,72,36,.4);
}
/* The walk has its own HUD; the chrome row is for menus. */
#game-screen.active ~ #jawn-chrome { display:none; }

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
html,body {
  height:100%; overflow:hidden;
  background:#e9e0c9;
  font-family:var(--font); color:var(--ink);
  user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
#game-canvas { position:fixed; inset:0; display:block; touch-action:none; z-index:0; }

/* ─── Screens ───────────────────────────────────────────────────────────── */
.screen { display:none; position:absolute; inset:0; z-index:1; overflow-y:auto; scrollbar-width:none; }
.screen::-webkit-scrollbar { display:none; }
.screen.active { display:flex; flex-direction:column; }
#game-screen { overflow:hidden; touch-action:none; }

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  font-family:var(--font); font-size:21px; line-height:1;
  padding:13px 26px; min-width:210px;
  border-radius:999px; border:1.5px solid rgba(74,58,42,.35);
  background:rgba(244,236,216,.94); color:var(--ink);
  box-shadow:0 3px 0 rgba(74,58,42,.2);
  cursor:pointer; transition:transform .08s, background .15s, box-shadow .15s;
}
.btn:hover { background:var(--paper-2); }
.btn:active { transform:translateY(2px); box-shadow:0 1px 0 rgba(74,58,42,.2); }
.btn:disabled { opacity:.6; cursor:default; }
.btn-primary { background:var(--sage); color:#fbf6ea; border-color:var(--sage-deep); box-shadow:0 3px 0 rgba(58,72,36,.45); }
.btn-primary:hover { background:var(--sage-deep); }
.btn-ghost { background:rgba(244,236,216,.7); min-width:0; font-size:19px; padding:10px 20px; }
.btn:focus-visible, .choice:focus-visible, .chapter-item:focus-visible { outline:2px solid var(--rust); outline-offset:3px; }

/* ─── Title ─────────────────────────────────────────────────────────────── */
#title-screen { align-items:center; justify-content:flex-start; }
.title-inner {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 64px) 20px 20px;
}
.title-word {
  font-family:var(--display); font-weight:400; font-size:clamp(84px, 16vw, 150px); line-height:.9;
  color:#4f6440;
  text-shadow:0 2px 0 rgba(251,246,234,.8), 0 0 30px rgba(251,246,234,.9);
  letter-spacing:.02em;
}
.title-tag { font-size:22px; color:var(--ink); text-shadow:0 1px 0 rgba(251,246,234,.9), 0 0 14px rgba(251,246,234,1); }
.title-buttons { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:14px; }
.title-row { display:flex; gap:10px; }
.howto-card {
  margin:auto auto calc(env(safe-area-inset-bottom,0px) + 22px); max-width:520px; width:calc(100% - 32px);
  background:rgba(244,236,216,.9); border-radius:var(--radius); padding:8px 18px;
  box-shadow:0 4px 18px var(--shadow); font-size:17px; line-height:1.3;
}
.howto-card:not([open]) { width:auto; padding:8px 20px; }
.howto-card summary { cursor:pointer; list-style:none; text-align:center; font-size:19px; color:var(--sage-deep); }
.howto-card summary::-webkit-details-marker { display:none; }
.howto-card[open] summary { font-family:var(--display); font-size:26px; text-align:left; }
.howto-modal-card h2 { font-family:var(--display); font-weight:400; font-size:28px; color:var(--sage-deep); margin-bottom:4px; }
.howto-card ul, .howto-modal-card ul { padding-left:18px; margin-top:6px; }
.howto-card li, .howto-modal-card li { margin:3px 0; }
.build-tag { position:absolute; right:12px; bottom:calc(env(safe-area-inset-bottom,0px) + 8px); font-size:12px; color:rgba(74,58,42,.55); }

/* ─── HUD ───────────────────────────────────────────────────────────────── */
#hud {
  position:absolute; top:calc(env(safe-area-inset-top,0px) + 10px); left:12px; right:12px;
  display:flex; align-items:center; gap:10px; z-index:5; pointer-events:none;
}
#hud > * { pointer-events:auto; }
.leaves { display:flex; gap:2px; padding:6px 10px; border-radius:999px; background:rgba(244,236,216,.82); box-shadow:0 2px 0 rgba(74,58,42,.15); }
.leaves.bump { animation:bump .45s; }
@keyframes bump { 30% { transform:scale(1.12) rotate(-2deg); } }
.leaf { width:20px; height:20px; display:block; transition:opacity .4s, transform .4s; }
.leaf svg { width:100%; height:100%; }
.leaf path { fill:#7f9a55; stroke:#4f6a2e; stroke-width:1.4; }
.leaf .vein { fill:none; }
.leaf.spent { opacity:.28; transform:rotate(30deg) translateY(2px); }
.leaf.spent path { fill:#b6a27a; stroke:#8a7650; }
.hud-chapter { flex:1; text-align:center; font-size:17px; color:rgba(74,58,42,.7); text-shadow:0 0 8px rgba(251,246,234,.9); }
.hud-btn {
  width:40px; height:40px; border-radius:999px; font-size:13px; font-family:var(--font);
  background:rgba(244,236,216,.86); border:1.5px solid rgba(74,58,42,.3); color:var(--ink); cursor:pointer;
}

/* ─── Barks and thoughts ────────────────────────────────────────────────── */
#bark-layer { position:absolute; inset:0; pointer-events:none; z-index:4; overflow:hidden; }
.bark {
  position:absolute; left:0; top:0; max-width:min(300px, 70vw);
  padding:6px 12px; border-radius:14px; font-size:18px; line-height:1.15;
  background:rgba(251,246,234,.95); color:var(--ink);
  box-shadow:0 2px 0 rgba(74,58,42,.2); transition:opacity .2s;
}
.bark-wim { background:#eef2e2; }
.bark-think { background:rgba(90,70,110,.72); color:#fbf6ea; font-style:italic; box-shadow:none; }
.bark.muffled, .dialogue.muffled .dlg-text { filter:blur(1.6px); opacity:.6; }

/* ─── Bottom stack: choices, dialogue ───────────────────────────────────── */
#bottom {
  position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
  display:flex; flex-direction:column; align-items:center; gap:10px; z-index:6; pointer-events:none;
  padding:0 12px;
}
#bottom > * { pointer-events:auto; }
.dialogue {
  display:flex; align-items:center; gap:12px; width:min(680px, 100%);
  background:rgba(247,240,224,.97); border-radius:var(--radius); padding:10px 16px 10px 10px;
  box-shadow:0 5px 22px var(--shadow), inset 0 0 0 1.5px rgba(74,58,42,.18);
  cursor:pointer; animation:rise .22s ease-out;
}
@keyframes rise { from { transform:translateY(8px); opacity:0; } }
.dlg-face { width:78px; height:78px; flex:none; border-radius:50%; background:radial-gradient(circle at 50% 40%, #fff8e8, #e3d4b2); box-shadow:inset 0 0 0 2px rgba(74,58,42,.25); }
.dlg-body { flex:1; min-width:0; }
.dlg-name { font-size:16px; color:var(--rust); letter-spacing:.03em; }
.dlg-text { font-size:22px; line-height:1.18; min-height:1.2em; }
.dialogue.think { background:rgba(88,70,108,.93); color:#fbf6ea; }
.dialogue.think .dlg-name { color:#e8d4f0; font-style:italic; }
.dialogue.think .dlg-text { font-style:italic; }
.dialogue.think .dlg-face { opacity:.85; }
.dialogue.narr { background:rgba(40,34,30,.86); color:#f4ecd8; justify-content:center; text-align:center; padding:16px 22px; }
.dialogue.narr .dlg-text { font-size:23px; }
.dialogue.who-moss .dlg-name { color:#5a7a8a; }
.dialogue.who-nella .dlg-name { color:#c0582c; }
.dialogue.who-orra .dlg-name { color:#7a5a86; }
.dialogue.who-wim .dlg-name { color:var(--sage-deep); }
.dlg-next { align-self:flex-end; font-size:18px; opacity:0; transition:opacity .2s; }
.dlg-next.ready { opacity:.6; animation:nudge 1s infinite; }
@keyframes nudge { 50% { transform:translateX(3px); } }

.choices { display:flex; flex-direction:column; align-items:center; gap:8px; width:min(680px, 100%); animation:rise .25s ease-out; }
.choice-prompt {
  font-size:20px; font-style:italic; color:#fbf6ea; background:rgba(88,70,108,.82);
  padding:6px 16px; border-radius:999px; text-align:center;
}
.choice-list { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.choice {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font); font-size:20px; padding:10px 18px; border-radius:14px;
  background:rgba(251,246,234,.96); color:var(--ink); border:1.5px solid rgba(74,58,42,.35);
  box-shadow:0 3px 0 rgba(74,58,42,.22); cursor:pointer; transition:transform .08s, background .15s;
}
.choice:hover { background:#fff; }
.choice:active { transform:translateY(2px); }
.choice-key { font-size:13px; width:20px; height:20px; border-radius:50%; display:inline-grid; place-items:center; background:var(--paper-3); color:var(--ink-soft); }
.choice.later { opacity:0; transform:scale(.9); transition:opacity 1.2s, transform 1.2s; }
.choice.later.in { opacity:1; transform:none; }
.choice.glow { border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,196,106,.35), 0 3px 0 rgba(74,58,42,.22); }
.key-legend { font-size:14px; color:rgba(74,58,42,.6); text-shadow:0 0 6px rgba(251,246,234,.9); pointer-events:none !important; }

/* ─── Cards, toasts, hints ──────────────────────────────────────────────── */
.card {
  position:absolute; inset:0; z-index:7; display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none; opacity:0; transition:opacity .8s; text-align:center; padding:20px;
  background:radial-gradient(ellipse at center, rgba(244,236,216,.75) 0%, rgba(244,236,216,.2) 60%, rgba(244,236,216,0) 80%);
}
.card.in { opacity:1; }
.card-kicker { font-size:18px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }
.card-title { font-family:var(--display); font-size:clamp(52px, 10vw, 92px); line-height:1; color:#4f6440; text-shadow:0 2px 0 rgba(251,246,234,.8); }
.card-sub { font-size:22px; font-style:italic; margin-top:6px; }
#toast-layer { position:absolute; top:calc(env(safe-area-inset-top,0px) + 62px); left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:8px; z-index:8; pointer-events:none; padding:0 12px; }
.toast {
  max-width:420px; background:rgba(251,246,234,.96); border-radius:14px; padding:9px 14px; font-size:17px; line-height:1.25;
  box-shadow:0 4px 16px var(--shadow); opacity:0; transform:translateY(-8px); transition:opacity .4s, transform .4s; text-align:center;
}
.toast.in { opacity:1; transform:none; }
.toast b { color:var(--sage-deep); font-weight:400; font-size:19px; }
.toast-kick { display:block; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--rust); }
.toast-sub { display:block; font-size:15px; color:var(--ink-soft); font-style:italic; }
.hint {
  position:absolute; left:50%; top:calc(env(safe-area-inset-top,0px) + 62px); transform:translateX(-50%);
  z-index:6; background:rgba(40,34,30,.72); color:#f4ecd8; padding:7px 16px; border-radius:999px; font-size:18px;
  opacity:0; transition:opacity .4s; pointer-events:none; white-space:nowrap;
}
.hint.in { opacity:1; }
.hint b { color:var(--gold); font-weight:400; }

.still-meter { position:absolute; left:50%; top:30%; transform:translate(-50%,-50%); z-index:6; display:flex; flex-direction:column; align-items:center; gap:6px; opacity:0; transition:opacity .6s; pointer-events:none; }
.still-meter.in { opacity:1; }
.still-meter svg { width:64px; height:64px; transform:rotate(-90deg); }
.still-track { fill:none; stroke:rgba(251,246,234,.35); stroke-width:3; }
.still-ring { fill:none; stroke:var(--gold); stroke-width:3; stroke-linecap:round; stroke-dasharray:151; stroke-dashoffset:151; }
.still-text { font-size:20px; font-style:italic; color:#fbf6ea; text-shadow:0 1px 6px rgba(0,0,0,.5); }

/* ─── Touch controls ────────────────────────────────────────────────────── */
.touch-controls { display:none; position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom,0px) + 14px); padding:0 14px; justify-content:space-between; z-index:5; pointer-events:none; }
.touch-controls.show { display:flex; }
.touch-controls.locked .tc-side:first-child, .touch-controls.locked .tc-listen { opacity:.25; }
.tc-side { display:flex; gap:12px; pointer-events:auto; }
.tc-btn {
  width:68px; height:68px; border-radius:50%; font-size:24px; color:var(--ink); font-family:var(--font);
  background:rgba(244,236,216,.6); border:1.5px solid rgba(74,58,42,.3); box-shadow:0 3px 0 rgba(74,58,42,.18);
  touch-action:none; -webkit-user-select:none; user-select:none;
}
.tc-btn.down { background:rgba(244,236,216,.95); transform:translateY(2px); }
.tc-jump { width:76px; height:76px; font-size:28px; }
/* when touch controls are up, the talking sits above them */
#game-screen.touch #bottom { bottom:calc(env(safe-area-inset-bottom,0px) + 104px); }

/* ─── Overlay + paper screens ───────────────────────────────────────────── */
.overlay { display:none; position:fixed; inset:0; z-index:50; background:rgba(40,34,30,.45); align-items:center; justify-content:center; padding:20px; }
.overlay.active { display:flex; }
.panel, .paper {
  background:var(--paper); border-radius:22px; padding:22px 22px 18px; width:min(440px, 100%);
  display:flex; flex-direction:column; align-items:center; gap:10px; box-shadow:0 10px 40px var(--shadow);
}
.panel-title { font-family:var(--display); font-weight:400; font-size:40px; color:#4f6440; }
.paper-screen { align-items:center; justify-content:flex-start; padding:calc(env(safe-area-inset-top,0px) + 64px) 16px 30px; background:rgba(233,224,201,.55); }
.paper { width:min(560px, 100%); }
.chapter-list { display:flex; flex-direction:column; gap:8px; width:100%; }
.chapter-item {
  display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:2px; width:100%;
  background:rgba(251,246,234,.9); border:1.5px solid rgba(74,58,42,.25); border-radius:14px; padding:10px 14px;
  font-family:var(--font); color:var(--ink); cursor:pointer;
}
.chapter-item:disabled { opacity:.5; cursor:default; }
.chapter-item.done { border-color:var(--sage); }
.ci-kick { font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.ci-title { font-size:24px; }
.ci-sub { font-size:16px; font-style:italic; color:var(--ink-soft); }
.journal { gap:6px; }
.journal #journal-body { width:100%; display:flex; flex-direction:column; gap:12px; }
.j-entry h3, .j-shelf h3 { font-family:var(--display); font-weight:400; font-size:26px; color:var(--sage-deep); }
.j-entry p { font-size:19px; line-height:1.3; margin:2px 0; }
.j-shelf h3 span { font-family:var(--font); font-size:15px; color:var(--ink-soft); margin-left:6px; }
.j-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:8px; margin-top:6px; }
.j-item { display:flex; flex-direction:column; align-items:center; gap:2px; background:rgba(251,246,234,.8); border-radius:12px; padding:6px 4px; }
.j-item canvas { width:40px; height:40px; }
.j-item.missing { opacity:.4; }
.j-name { font-size:14px; text-align:center; line-height:1.1; }
.j-empty { font-size:19px; font-style:italic; color:var(--ink-soft); text-align:center; }
.end { gap:14px; text-align:center; }
.end-lines p { font-family:var(--display); font-size:clamp(30px, 6vw, 40px); line-height:1.2; color:#4f6440; }
.end-credit { font-size:16px; color:var(--ink-soft); }

/* How-to modal from the chrome row's ? */
.howto-modal { position:fixed; inset:0; z-index:140; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(40,34,30,.5); }
.howto-modal-card { background:var(--paper); border-radius:22px; padding:20px 22px; max-width:460px; width:100%; font-size:18px; line-height:1.3; display:flex; flex-direction:column; gap:8px; box-shadow:0 10px 40px var(--shadow); }
.howto-modal-card .btn { align-self:center; margin-top:6px; }

@media (max-width:520px) {
  .dlg-text { font-size:19px; }
  .dlg-face { width:60px; height:60px; }
  .choice { font-size:18px; padding:9px 14px; }
  .btn { font-size:19px; min-width:180px; }
  .tc-btn { width:60px; height:60px; }
  .tc-jump { width:68px; height:68px; }
}