/* fit.css — v4: every game screen fits the phone's visible height (no vertical page scroll).
   Panels and pop-ups are fitted by fitAll() in js/ui.js; this file makes the farm exactly one screen tall. */

/* the farm: HUD, day bar, map, dialog in one screen; the map takes what's left (js/farm.js fitCanvas) */
#root:has(> .farmview){height:100vh;height:100dvh;box-sizing:border-box;overflow:hidden;
  padding-block:calc(6px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-bottom,0px))}
body.has-tabs #root:has(> .farmview){height:calc(100dvh - 64px - env(safe-area-inset-bottom,0px));padding-bottom:6px}
body:has(#root > .farmview){overflow:hidden;overscroll-behavior:none}
.farmview{height:100%;display:flex;flex-direction:column}
.farmview > .hud,.farmview > .hud2,.farmview > .dialog,.farmview > .hint{flex:none}
.farmview .stagebox{flex:1 1 auto;min-height:0;display:flex;justify-content:center;align-items:center}
.farmview .stage{flex:none;max-width:100%}
.farmview .dialog{margin-top:8px}
/* the walking hint only when there is room for it (the intro dialog already explains it) */
@media (max-height:800px){.farmview > .hint{display:none}}

/* panels: less dead space at the bottom (the fitter scales the rest) */
.panel .wrap{padding-block:calc(8px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-bottom,0px))}
.panel{overscroll-behavior:contain}
.panel:not(.scrolly){overflow-y:hidden}
.celebrate.scrolly{overflow-y:auto;place-items:start center}

/* avatar builder: one option group at a time */
.avb-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.avb-tabs button{font-size:14px;font-weight:700;padding:6px 4px;border:2px solid var(--ink);border-radius:8px;background:var(--paper);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.avb-tabs button.on{background:var(--gold)}
.avb-rows .avb-row{min-height:76px;align-content:center}

/* the browser's default 8px body margin made every screen 16px too tall */
body{margin:0}

/* Kenali with 5+ words: three cards per row */
.cards:has(> .card:nth-child(5)) .card{flex:1 1 calc(33.3% - 10px);min-width:92px;min-height:96px;padding:6px}
.cards:has(> .card:nth-child(5)) .card .w{font-size:32px;line-height:1.35}
.cards:has(> .card:nth-child(5)) .card .m{font-size:14px;line-height:1.2}
.cards:has(> .card:nth-child(5)) .card .e{font-size:20px}

/* onboarding: a smaller title and tighter builder so name + character fit one screen */
#root:has(#nm) .title{padding-top:0}
#root:has(#nm) .title h1{font-size:34px}
#root:has(#nm) .title p{margin:0 0 8px}
.avb-rows .avb-row{min-height:46px}
.avb-tabs{margin-bottom:4px}

/* reading practice: Pak Ustaz thinks while the reading is checked; everything else is locked */
.ustaz-think{display:flex;gap:12px;align-items:center;background:#FFF6D6;border:3px solid var(--ink);border-radius:12px;padding:10px 12px;margin:8px 0}
.ustaz-think[hidden]{display:none}
.ustaz-think .portrait{flex:none;width:64px;height:64px;border:3px solid var(--ink);border-radius:10px;image-rendering:pixelated;animation:ustaz-nod 1.6s ease-in-out infinite}
.ustaz-think b{color:var(--red)}
.ustaz-think p{margin:2px 0 0;font-weight:700}
.ustaz-think .dots i{font-style:normal;animation:ustaz-dot 1.2s infinite;opacity:.2}
.ustaz-think .dots i:nth-child(2){animation-delay:.2s}.ustaz-think .dots i:nth-child(3){animation-delay:.4s}
@keyframes ustaz-dot{0%,100%{opacity:.2}40%{opacity:1}}
@keyframes ustaz-nod{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg) translateY(1px)}}
@media (prefers-reduced-motion:reduce){.ustaz-think .portrait,.ustaz-think .dots i{animation:none;opacity:1}}
.ayahbig.locked{pointer-events:none}
.practice.thinking .ayahbig,.practice.thinking .acc{opacity:.45}
.ptop button[disabled]{opacity:.45;pointer-events:none}

/* "Yang Ustaz dengar": what the model heard for each red word, and the letter to fix */
.heard{background:#FFF1EC;border:2px dashed #C0392B;border-radius:10px;padding:6px 10px;margin:6px 0}
.heard[hidden]{display:none}
.heard .hhead{font-size:13px;font-weight:700;color:#8A3B2A}
.heard .hrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;padding:2px 0}
.heard .hrow + .hrow{border-top:1px solid #F3C9BC}
.heard .w{font-size:28px;line-height:1.5}
.heard .heardw{color:#B03A2E}
.heard .arrow{font-size:18px;color:#8A3B2A}
.heard .tag{font-size:14px;font-weight:700;color:#8A3B2A}
.heard .tips{flex-basis:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.heard .tip{background:#fff;border:2px solid #C0392B;border-radius:999px;padding:0 10px;font-size:14px;font-weight:700}
.heard .tip b{font-size:22px;color:#B03A2E;padding:0 2px}
.ustaz-think.listening{background:#EAF7E4}
.ustaz-think.listening .portrait{animation:none}

/* Level Petani page */
.xpways,.lvlist{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:15px}
.xpways b{color:var(--ok)}
.lvlist li{padding:4px 8px;border-radius:8px;background:#F1EAD6;color:#8A7A5A}
.lvlist li.got{background:#E4F7D8;color:var(--ink)}
.lvlist li.cur{outline:3px solid var(--gold)}