/* ============================================================
   Word Jungle — styles
   Canvas draws the world; every piece of *reading* text is DOM
   so it stays crisp, large and selectable.
   ============================================================ */

@font-face{font-family:'Andika';src:url('../fonts/andika-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Andika';src:url('../fonts/andika-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'PressStart';src:url('../fonts/pressstart-400.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --read: 'Andika', 'Comic Sans MS', 'Trebuchet MS', system-ui, sans-serif;
  --pixel: 'PressStart', 'Andika', monospace;
  --leaf:#3f8f3f; --leaf-d:#22521f; --bark:#6b4423; --sky:#1c3a24;
  --sun:#ffd257; --banana:#ffcf3f; --wood:#c08b4a; --wood-d:#8a5f2e;
  --panel:#fff8e8; --ink:#3a2a1a; --ink-soft:#6d5741;
  --good:#3fae5a; --soft:#e88f3c; --gem:#59b7e0;
  --tap: 56px;
  --pad-b: env(safe-area-inset-bottom, 0px);
  --read-space: 0px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#0d1a12;
  -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%}
body{font-family:var(--read); color:var(--ink); overscroll-behavior:none}
.hidden{display:none !important}
button{font-family:var(--read); cursor:pointer; border:0; background:none; color:inherit}

#stage{position:fixed; inset:0; overflow:hidden}
#game{position:absolute; inset:0; width:100%; height:100%; display:block;
  image-rendering:pixelated; image-rendering:crisp-edges; touch-action:none}
#fx{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}

/* ---------------- HUD ---------------- */
#hud{position:absolute; top:0; left:0; right:0; display:flex; align-items:flex-start;
  justify-content:space-between; padding:8px 10px; gap:8px; pointer-events:none;
  padding-top:calc(8px + env(safe-area-inset-top,0px))}
#hud .hud-left{display:flex; gap:8px}
.chip{display:flex; align-items:center; gap:7px; background:rgba(28,45,30,.82);
  border:2px solid rgba(255,255,255,.28); border-radius:14px; padding:7px 14px 7px 10px;
  color:#fff; font-weight:700; font-size:19px; box-shadow:0 2px 0 rgba(0,0,0,.35)}
.chip .ico{font-size:21px; line-height:1}
.chip.pulse{animation:pop .45s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.hud-mid{flex:1; text-align:center}
#areaName{display:inline-block; color:#fff; font-family:var(--pixel); font-size:14px;
  letter-spacing:.5px; background:rgba(28,45,30,.72); padding:8px 14px; border-radius:12px;
  border:2px solid rgba(255,255,255,.2); opacity:0; transition:opacity .5s}
#areaName.show{opacity:1}
.iconbtn{pointer-events:auto; width:44px; height:44px; border-radius:12px; color:#fff; font-size:22px;
  background:rgba(28,45,30,.82); border:2px solid rgba(255,255,255,.28); box-shadow:0 2px 0 rgba(0,0,0,.35)}
.iconbtn:active{transform:translateY(2px); box-shadow:none}

/* ---------------- Touch controls ---------------- */
#touch{position:absolute; inset:0; pointer-events:none}
#stick{position:absolute; left:18px; bottom:calc(18px + var(--pad-b)); width:132px; height:132px;
  border-radius:50%; background:rgba(255,255,255,.10); border:3px solid rgba(255,255,255,.22);
  pointer-events:auto; touch-action:none}
#stickNub{position:absolute; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px;
  border-radius:50%; background:rgba(255,255,255,.55); border:3px solid rgba(255,255,255,.8)}
#btnA{position:absolute; right:22px; bottom:calc(32px + var(--pad-b)); width:88px; height:88px;
  border-radius:50%; background:rgba(255,207,63,.9); border:4px solid #fff; color:#5a3d10;
  font-size:26px; font-weight:700; pointer-events:auto; touch-action:none;
  box-shadow:0 4px 0 rgba(0,0,0,.35)}
#btnA:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.35)}

/* ---------------- Dialog ---------------- */
#dialog{position:absolute; left:0; right:0; bottom:0; padding:12px;
  padding-bottom:calc(12px + var(--pad-b)); z-index:20}
.dbox{position:relative; display:flex; gap:12px; max-width:820px; margin:0 auto;
  background:var(--panel); border:4px solid var(--wood-d); border-radius:18px; padding:14px 16px;
  box-shadow:0 8px 0 rgba(0,0,0,.35), 0 0 0 4px rgba(255,255,255,.35) inset}
.dportrait{flex:0 0 auto; width:56px; height:56px; background:#e7d7b6; border:3px solid var(--wood-d);
  border-radius:12px; display:grid; place-items:center; overflow:hidden}
#dportrait{width:48px; height:48px; image-rendering:pixelated}
.dmain{flex:1; min-width:0}
.dname{font-family:var(--pixel); font-size:14px; color:var(--soft); margin-bottom:8px}
.dtext{font-size:21px; line-height:1.55; color:var(--ink); min-height:2.6em; word-spacing:.12em}
.dnext{text-align:center; color:#fff; font-size:18px; animation:bob 1s infinite; margin-top:2px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.speakbtn{position:absolute; top:-16px; right:10px; width:46px; height:46px; border-radius:50%;
  background:var(--gem); border:3px solid #fff; font-size:21px; line-height:1;
  display:inline-grid; place-items:center; padding:0; box-shadow:0 3px 0 rgba(0,0,0,.3)}
.speakbtn:active{transform:translateY(2px)}
.speakbtn.speaking{animation:pop .6s infinite}
.dchoices{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.dchoices button{background:var(--wood); border:3px solid var(--wood-d); border-radius:12px;
  padding:10px 16px; font-size:18px; font-weight:700; color:#fff; min-height:var(--tap);
  box-shadow:0 4px 0 var(--wood-d)}
.dchoices button:active{transform:translateY(3px); box-shadow:0 1px 0 var(--wood-d)}

/* reading text helper (font/spacing toggles apply here) */
.read{letter-spacing:var(--read-space)}
body.dyslexic{--read:'Andika', sans-serif; --read-space:.055em}

/* ---------------- Panels (mini-games, menus, screens) ---------------- */
#panelHost{position:absolute; inset:0; z-index:30; display:grid; place-items:center;
  background:rgba(10,22,14,.72); backdrop-filter:blur(2px); padding:10px;
  padding-bottom:calc(10px + var(--pad-b)); overflow:auto}
.panel{width:min(760px, 100%); max-height:100%; overflow:auto; background:var(--panel);
  border:5px solid var(--wood-d); border-radius:22px; padding:18px;
  box-shadow:0 10px 0 rgba(0,0,0,.4), 0 0 0 4px rgba(255,255,255,.4) inset;
  animation:rise .28s cubic-bezier(.2,1.3,.5,1)}
@keyframes rise{from{transform:translateY(26px) scale(.96); opacity:0}to{transform:none; opacity:1}}
.panel.wide{width:min(940px,100%)}
.ptitle{font-family:var(--pixel); font-size:16px; color:var(--soft); text-align:center; margin:2px 0 6px}
.psub{text-align:center; font-size:21px; color:var(--ink-soft); margin:0 0 14px}
.prompt{display:flex; align-items:center; justify-content:center; gap:12px; margin:6px 0 16px}
.prompt .big{font-size:clamp(32px,7vw,48px); font-weight:700}
.pic{font-size:clamp(46px,12vw,74px); text-align:center; line-height:1.1; margin:4px 0 8px}

/* Answer blocks: chunky Minecraft-ish word blocks */
.blocks{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
.wblock{position:relative; min-height:var(--tap); min-width:96px; padding:17px 24px;
  font-size:clamp(27px,5.6vw,36px); font-weight:700; color:#fff; border-radius:12px;
  background:linear-gradient(#8fbf5a,#6fa03f); border:3px solid #4d7a2a;
  box-shadow:0 5px 0 #3f6621; letter-spacing:var(--read-space); transition:transform .1s}
.wblock:active{transform:translateY(4px); box-shadow:0 1px 0 #3f6621}
.wblock.right{background:linear-gradient(#7fd48f,#3fae5a); border-color:#2b7f41;
  box-shadow:0 5px 0 #236634; animation:pop .4s ease}
.wblock.wrong{background:linear-gradient(#d8d2c4,#b8b1a2); border-color:#918a7c;
  box-shadow:0 3px 0 #7d766a; color:#5e584d; opacity:.75}
.hintme{outline:4px dashed var(--sun); outline-offset:3px; animation:pop .5s ease}
.wblock:disabled{cursor:default}
/* long answers (meanings, comprehension options) get a calmer, wider block */
.wblock.long{font-size:clamp(20px,4vw,24px); font-weight:400; line-height:1.5;
  flex:1 1 100%; max-width:560px; text-align:left; padding:16px 20px}
hr{border:0; border-top:2px dotted #ded0b0; margin:18px 0}
select.namein{appearance:auto}

/* slot row (spelling / sentence building) */
.slots{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:10px 0 18px; min-height:72px}
.slot{min-width:64px; min-height:70px; padding:8px 12px; border-radius:10px; border:3px dashed #b09a72;
  background:#efe2c6; display:grid; place-items:center; font-size:32px; font-weight:700; color:var(--ink)}
.slot.filled{border-style:solid; border-color:var(--wood-d); background:var(--wood); color:#fff}
.slot.ok{border-color:#2b7f41; background:linear-gradient(#7fd48f,#3fae5a); color:#fff}
.tiles{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.tile{min-width:64px; min-height:var(--tap); padding:12px 18px; font-size:32px; font-weight:700; color:#fff;
  border-radius:10px; background:linear-gradient(#c69a5e,#a8763c); border:3px solid #7d5527;
  box-shadow:0 5px 0 #63421d}
.tile:active{transform:translateY(4px); box-shadow:0 1px 0 #63421d}
.tile.used{visibility:hidden}

/* story passage */
.story{font-size:clamp(22px,3.8vw,27px); line-height:1.75; background:#fffdf6; border:3px solid #e0cfa8;
  border-radius:14px; padding:18px 20px; margin:0 0 14px; letter-spacing:var(--read-space)}
.story w{display:inline-block; padding:0 1px; border-radius:4px; transition:background .12s}
.story w.on{background:var(--sun)}
.qtext{font-size:clamp(23px,4.6vw,29px); font-weight:700; text-align:center; margin:6px 0 14px}

/* feedback line */
.feedback{min-height:34px; text-align:center; font-size:22px; font-weight:700; margin-top:14px; color:var(--good)}
.feedback.soft{color:var(--soft)}
.prow{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px}
.btn{min-height:var(--tap); padding:13px 24px; font-size:21px; font-weight:700; color:#fff; border-radius:14px;
  background:linear-gradient(#5fb0e8,#3d8fd0); border:3px solid #2c6ea6; box-shadow:0 5px 0 #24587f}
.btn:active{transform:translateY(4px); box-shadow:0 1px 0 #24587f}
.btn.go{background:linear-gradient(#7fd48f,#3fae5a); border-color:#2b7f41; box-shadow:0 5px 0 #236634}
.btn.go:active{box-shadow:0 1px 0 #236634}
.btn.ghost{background:#efe2c6; color:var(--ink); border-color:#b09a72; box-shadow:0 5px 0 #b09a72}
.btn.ghost:active{box-shadow:0 1px 0 #b09a72}
.btn.small{min-height:46px; padding:9px 16px; font-size:17px}
.progdots{display:flex; gap:7px; justify-content:center; margin-bottom:12px}
.progdots i{width:12px; height:12px; border-radius:50%; background:#ded0b0; display:block}
.progdots i.done{background:var(--good)}
.progdots i.now{background:var(--sun); transform:scale(1.3)}

/* ---------------- Title screen ---------------- */
#panelHost.title{background:linear-gradient(#0e2a18,#1c3a24 60%,#2c4a2a)}
.titlewrap{text-align:center; color:#fff}
.gtitle{font-family:var(--pixel); font-size:clamp(20px,6vw,40px); color:var(--banana);
  text-shadow:0 4px 0 #7a4a12, 0 8px 14px rgba(0,0,0,.5); line-height:1.5; margin:0}
.gsub{font-size:clamp(15px,3.4vw,20px); opacity:.9; margin:12px 0 22px}
.namein{font-family:var(--read); font-size:26px; padding:13px 16px; border-radius:12px;
  border:3px solid var(--wood-d); background:var(--panel); width:min(320px,80vw); text-align:center}

/* ---------------- Library / shop / journal grids ---------------- */
.shelfwrap{background:linear-gradient(#8a5f2e,#6b4423); border-radius:14px; padding:12px; margin-bottom:14px}
.shelf{display:flex; gap:3px; align-items:flex-end; height:52px; border-bottom:7px solid #4e3018;
  margin-bottom:8px; padding:0 6px}
.shelf b{display:block; width:11px; border-radius:2px 2px 0 0; box-shadow:inset -2px 0 0 rgba(0,0,0,.25)}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.card{background:#fffdf6; border:3px solid #e0cfa8; border-radius:14px; padding:14px; text-align:center}
.card.locked{opacity:.55; filter:grayscale(.7)}
.card .emo{font-size:40px}
.card .cname{font-weight:700; font-size:19px; margin:7px 0 4px}
.card .cdesc{font-size:16.5px; color:var(--ink-soft); line-height:1.45}
.card .price{margin-top:8px; font-weight:700; color:var(--soft)}
.card.owned{border-color:var(--good); box-shadow:0 0 0 3px rgba(63,174,90,.25)}
.gems{display:flex; flex-wrap:wrap; gap:8px}
.gem{padding:9px 14px; border-radius:10px; font-weight:700; font-size:19px; color:#fff; border:2px solid rgba(0,0,0,.2)}
.tabs{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:14px}
.tabs .btn{min-height:46px; padding:9px 16px; font-size:18px}
.tabs .btn:not(.on){background:#efe2c6; color:var(--ink); border-color:#b09a72; box-shadow:0 4px 0 #b09a72}
.statrow{display:flex; justify-content:space-between; padding:10px 4px; border-bottom:2px dotted #ded0b0; font-size:18px}
.bar{height:12px; background:#e6dcc4; border-radius:6px; overflow:hidden; margin-top:5px}
.bar i{display:block; height:100%; background:linear-gradient(90deg,#7fd48f,#3fae5a)}
textarea.words{width:100%; min-height:120px; font-family:var(--read); font-size:18px; padding:10px;
  border-radius:10px; border:3px solid #b09a72; background:#fffdf6}

/* ---------------- toasts & rewards ---------------- */
#toasts{position:absolute; left:0; right:0; top:64px; z-index:40; display:flex; flex-direction:column;
  align-items:center; gap:8px; pointer-events:none}
.toast{background:rgba(28,45,30,.92); color:#fff; border:3px solid var(--sun); border-radius:14px;
  padding:10px 18px; font-size:18px; font-weight:700; animation:toastin .35s ease}
@keyframes toastin{from{transform:translateY(-14px); opacity:0}to{transform:none; opacity:1}}
.reward{text-align:center}
.reward .emo{font-size:80px; animation:bob 1.4s infinite}
.reward h2{font-family:var(--pixel); font-size:15px; color:var(--soft); margin:8px 0}

@media (max-width:520px){
  .dtext{font-size:19px}
  .panel{padding:14px; border-radius:18px}
}
@media (min-height:520px) and (pointer:coarse){ #hud{padding-top:calc(10px + env(safe-area-inset-top,0px))} }