/* Vinnies Läsäventyr v2 – style.css */
:root{
  --bg:#0f1b3d; --card:#ffffff; --ink:#1b2340; --muted:#5a6280;
  --gold:#ffcc33; --green:#3ad17a; --red:#ff5c5c; --yellow:#fff1a8; --blue:#4da3ff;
  --radius:22px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{
  font-family:'Lexend',system-ui,sans-serif; color:var(--ink);
  background:radial-gradient(1200px 600px at 50% -10%, #2d4a9a 0%, var(--bg) 60%);
  -webkit-tap-highlight-color:transparent;
}
button{font-family:inherit;cursor:pointer;border:none}
button:disabled{opacity:.45;cursor:not-allowed}

/* ===== Layout ===== */
#app{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:1000px;margin:0 auto;padding:8px 10px 4px}
#stage{flex:1;min-height:0;position:relative}
#game{position:absolute;inset:0}
#game canvas{border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.45)}
#foot{color:#9aa6d4;font-size:12px;text-align:center;padding:4px 0 2px}
#rotate{display:none;color:#dfe6ff;font-size:14px;text-align:center;padding:4px 0 6px}
.judge{opacity:.85}

/* ===== HUD ===== */
#hud{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius);padding:6px 12px;color:#fff;margin-bottom:8px;flex-wrap:wrap;min-height:56px}
.hud-l{display:flex;align-items:center;gap:10px}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--gold);display:grid;place-items:center;font-size:24px}
.name{font-family:'Fredoka',sans-serif;font-size:18px;white-space:nowrap}
.lvl{background:var(--gold);color:#3a2a00;border-radius:999px;padding:1px 9px;font-weight:800;font-size:12px;margin-left:4px;font-family:'Lexend',sans-serif}
.xpbar{width:120px;height:10px;background:rgba(0,0,0,.35);border-radius:999px;overflow:hidden;margin-top:3px}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#9ff0c0);transition:width .6s}
.hud-m{display:flex;align-items:center;gap:10px;flex:1;flex-wrap:wrap}
.hearts{letter-spacing:1px;font-size:16px;white-space:nowrap}
.coins{font-weight:800}
.chip{display:inline-block;border-radius:999px;padding:3px 10px;font-weight:700;font-size:13px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.3);white-space:nowrap}
.gear{display:flex;gap:4px}
.gslot{width:28px;height:28px;border-radius:8px;border:2px solid;display:grid;place-items:center;font-size:15px;background:rgba(0,0,0,.2)}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav button{background:rgba(255,255,255,.15);color:#fff;border-radius:999px;padding:7px 14px;font-weight:600;font-size:15px;min-height:48px;min-width:48px}
.nav button:hover{background:rgba(255,255,255,.28)}

/* ===== Lager ===== */
.layer{position:fixed;inset:0;display:none;padding:14px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.layer.show{display:block}
#screen{z-index:40;background:radial-gradient(1200px 600px at 50% -10%, #2d4a9a 0%, var(--bg) 60%)}
#panel{z-index:50;background:rgba(10,15,40,.72)}
#pop{z-index:60;background:rgba(10,15,40,.6)}
#pop.show{display:grid;place-items:center}
#toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:#fff;color:var(--ink);padding:11px 18px;border-radius:999px;font-weight:700;box-shadow:0 8px 30px rgba(0,0,0,.4);animation:pop .3s}

/* ===== Kort & knappar ===== */
.card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:0 12px 40px rgba(0,0,0,.35);max-width:820px;margin:0 auto}
h1{font-family:'Fredoka',sans-serif;font-size:46px;margin:10px 0 6px;color:#fff;text-align:center;text-shadow:0 4px 0 rgba(0,0,0,.3)}
h2{font-family:'Fredoka',sans-serif;font-size:26px;margin:0 0 10px}
h3{font-family:'Fredoka',sans-serif;margin:14px 0 8px;font-size:19px}
.sub{color:#dfe6ff;text-align:center;margin:0 0 20px;font-size:18px}
.muted{color:var(--muted)}
.center{text-align:center}
.gap{height:12px}
.big{display:block;width:100%;padding:18px;border-radius:18px;font-size:23px;font-weight:800;color:#fff;
  background:linear-gradient(180deg,var(--green),#22b562);box-shadow:0 6px 0 #178a49;transition:transform .08s}
.big:active{transform:translateY(4px);box-shadow:0 2px 0 #178a49}
.big.gold{background:linear-gradient(180deg,#ffd957,#f2b400);box-shadow:0 6px 0 #b98700;color:#3a2a00}
.big.blue{background:linear-gradient(180deg,#5db0ff,#2a86f0);box-shadow:0 6px 0 #1a5fb0}
.small{padding:10px 14px;font-size:15px;border-radius:14px;font-weight:700;color:#fff;background:#5a6280;min-height:48px;min-width:48px}
.small.green{background:#22b562}.small.blue{background:#2a86f0}
.small.ghost{background:#e7ebf8;color:var(--muted)}
.small.armed{background:var(--red);color:#fff;animation:shake .4s}
.link{background:none;color:#1a5fb0;font-weight:600;font-size:15px;text-decoration:underline;padding:12px 14px;min-height:48px}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.row>*{flex:1}
.hint{background:#f2f5ff;border-radius:14px;padding:10px 14px;color:var(--muted);font-size:16px;margin:10px 0}
.hint.warn{background:#fff3d6;color:#7a5200}
.good{color:#178a49;font-weight:700}
.bad{color:#c22;font-weight:700}
.meh{color:var(--muted)}

/* ===== Startskärm ===== */
.start{max-width:560px;margin:4vh auto 0}
.start-card{text-align:center}
.start-hero{font-size:76px;margin:6px 0 16px;display:flex;justify-content:center;gap:4px}
.bob{display:inline-block;animation:bob 1.2s ease-in-out infinite}
.bob2{display:inline-block;animation:bob 1.2s ease-in-out .3s infinite}
.reset-row{margin:16px 0 0}
@keyframes bob{50%{transform:translateY(-10px)}}

/* ===== Strid ===== */
.battle{padding:16px 18px;display:flex;flex-direction:column;max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px)}
/* v2.2: stridsrutan fyller alltid skärmhöjden exakt, så att textytan (som tar resten) har en fast
   höjd som sidindelningen kan mäta mot. Ingen sidscroll och ingen scroll i texten. */
.battle:not(.picking){height:calc(100vh - 28px);height:calc(100dvh - 28px)}
#panel:has(> .battle:not(.picking)){overflow:hidden}
.battle>*{flex:none}
.battle.picking{max-height:none}
.battle.picking .pwrap{display:none}
.b-top{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
.foe{flex:1.4;min-width:250px;display:flex;flex-direction:row-reverse;align-items:center;gap:14px;border-radius:18px;padding:10px 14px;
  background:linear-gradient(225deg,var(--c),#1b2340);color:#fff;text-align:right}
.foe-emoji{font-size:74px;line-height:1;position:relative;filter:drop-shadow(0 5px 0 rgba(0,0,0,.25));text-align:center}
.foe-emoji .crown{display:block;font-size:28px;margin-bottom:-8px}
.foe-emoji .fx{position:absolute;right:-22px;top:-6px;font-size:44px;animation:fx .7s forwards}
.foe-info b{font-family:'Fredoka',sans-serif;font-size:22px;display:block}
.type{display:inline-block;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:700;color:#fff;margin-top:4px;border:2px solid rgba(255,255,255,.6)}
.big-hearts{font-size:22px;margin-top:6px}
.foe.hit .foe-emoji{animation:hit .5s}
.foe.dodge .foe-emoji{animation:dodge .5s}
@keyframes hit{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px) rotate(-8deg)}40%{transform:translateX(10px) rotate(8deg)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
@keyframes dodge{0%,100%{transform:translateX(0)}50%{transform:translateX(40px) rotate(12deg)}}
@keyframes fx{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}
.me-box{flex:1;min-width:200px;background:#f2f5ff;border-radius:18px;padding:10px 14px;display:flex;flex-direction:column;gap:4px}
.me-box b{font-family:'Fredoka',sans-serif;font-size:18px}
.me-head{display:flex;align-items:center;gap:10px}
/* Vinnie i striden: 🧒 med vapen och sköld bredvid sig */
.hero{position:relative;display:inline-flex;align-items:flex-end;line-height:1;flex:none}
.hero-e{font-size:56px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.18))}
.hero-gear{display:flex;flex-direction:column;gap:2px;margin-left:-6px;font-size:24px}
.hero-gear .g-w{transform:rotate(-20deg)}
.hero-gear .t-Guld{filter:drop-shadow(0 0 4px #f2b400)}
.hero-gear .t-Järn{filter:drop-shadow(0 0 2px #8d99ae)}
.shieldinfo{font-size:14px;color:var(--muted);font-weight:600}
.magicrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.magicrow .small{padding:7px 12px;font-size:14px}
.b-hint{margin:10px 0 0;font-size:16px;background:#fffaf0;border-radius:12px;padding:8px 12px}
.b-label{margin-top:8px;font-size:13px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.b-label #battleJudge{text-transform:none;letter-spacing:0;font-weight:400}
.b-hint small{color:var(--muted);font-size:14px}
.battle .b-hint small{display:none} /* (som i v2.1: bossregeln står i popuper och här bara i tipset) */
.b-bottom{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:8px}
.b-bottom .snd{font-size:20px;padding:8px 10px}
/* Sidindikator: "● ○ ○ Sida 1 av 3" */
.pageind{flex:1;display:flex;align-items:center;gap:10px;font-family:'Fredoka',sans-serif;font-size:18px;font-weight:600;color:var(--ink);min-width:0}
.pageind .dots{display:inline-flex;gap:6px}
.pageind .dots i{width:14px;height:14px;border-radius:50%;background:#dfe4f4;display:inline-block}
.pageind .dots i.past{background:var(--green)}
.pageind .dots i.cur{background:var(--gold);box-shadow:0 0 0 3px #f2b400 inset}
.thinking.attack{color:#c2410c;animation:none}
.thinking.attack small{display:block;font-size:13px;color:var(--muted);font-weight:600}

/* ===== Attackanimation (lager ovanpå striden, under popups) ===== */
#fxl,.fxl-guard{position:fixed;inset:0;z-index:55;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
/* Efter att en popup stängts: osynlig yta i 350 ms som fångar ett andra tryck (dubbeltryck) */
.tap-guard{position:fixed;inset:0;z-index:70;background:transparent;touch-action:none;-webkit-tap-highlight-color:transparent}
/* Efter combon / under fallet: osynlig skipp-yta som bara fångar tryck */
#fxl.idle,.fxl-guard{cursor:default}
#fxl .fx-skip{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(27,35,64,.85);color:#fff;border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px;pointer-events:none}
.fx-el{position:fixed;transform:translate(-50%,-50%);pointer-events:none;line-height:1;will-change:transform,opacity}
.fx-swing{font-size:58px;transform-origin:20% 80%}
.fx-proj{font-size:42px;filter:drop-shadow(0 0 8px rgba(255,255,255,.9))}
.fx-proj.big{font-size:76px;filter:drop-shadow(0 0 14px #ffe066)}
.fx-boom{font-size:64px}
.fx-boom.big{font-size:100px}
.fx-puff{font-size:44px;opacity:.9}
.fx-label{font-family:'Fredoka',sans-serif;font-weight:700;font-size:26px;color:#fff;white-space:nowrap;
  -webkit-text-stroke:1.5px #1b2340;text-shadow:0 3px 0 #1b2340,0 0 12px rgba(0,0,0,.35)}
.fx-label.super{font-size:32px;color:#ffe066}
.fx-label.good{color:#9ff0c0}
.fx-label.meh{font-size:20px;color:#dfe6ff}
.fx-label.miss{color:#dfe6ff}
.fx-label.fx-dmg{color:#ff5c5c;font-size:30px}

/* Lästexten – Lexend, 36 px på surfplatta/desktop (38 px på breda skärmar). Den rullar aldrig:
   texten delas i sidor av hela meningar som får plats (ui.js: layoutPassage). */
.pwrap{position:relative;flex:1 1 0 !important;min-height:0;display:flex;flex-direction:column;margin-top:6px}
.passage{font-family:'Lexend',sans-serif;font-size:36px;line-height:1.6;letter-spacing:.02em;word-spacing:.12em;padding:8px 8px;font-weight:600;
  flex:1 1 0;min-height:0;overflow:hidden;position:relative;border-radius:14px;outline:none;background:#fbfcff;box-shadow:inset 0 0 0 2px #eef1fb}
/* Nödfall (bara om en enda mening är högre än hela textytan, t.ex. på en mycket liten telefon) */
.passage.overflow{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@media (min-width:1100px) and (min-height:800px){.passage{font-size:38px}}
.passage .w{display:inline-block;padding:0 4px;border-radius:10px;transition:background .25s}
.passage .w.bad{background:#ffd6d6;color:#b31212;text-decoration:underline wavy #ff5c5c;animation:shake .4s}
.passage .s.focus .w{background:var(--yellow)}
.passage .s.focus .w.bad{background:#ffd6d6}
.passage .s.dim{opacity:.28}
.passage .s.done .w{color:#178a49}
/* Meningen som ska läsas om: gul, inramad och med en pil framför */
.passage .s.focus{background:var(--yellow);border-radius:12px;box-shadow:0 0 0 3px #f2b400;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:2px 0}
.passage .s.focus .arrow{display:inline-block;margin-right:4px;animation:nudge 1s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(6px)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* Kontroller (v2.2): en hjälprad på EN rad + en knapprad, samma höjd i alla lägen */
.ctl.stick{margin-top:8px}
.hint.one{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 8px;padding:8px 14px}
.hint.good-hint{background:#e6f9ee;color:#178a49;font-weight:700}
.ctlrow{display:flex;align-items:center;justify-content:center;gap:12px}
.ctlrow .mic{margin:0}
.ctlrow.testbox{border:2px dashed #c9d2f0;border-radius:16px;padding:6px;margin:0}
.ctlrow.testbox textarea{flex:1;min-width:0;height:56px;min-height:48px;resize:none;font-size:18px}
.ctlrow.testbox .small{flex:none}
.big.next{width:auto;min-width:260px;padding:12px 34px;font-size:28px;font-family:'Fredoka',sans-serif;background:linear-gradient(180deg,#ffd957,#f2b400);box-shadow:0 6px 0 #b98700;color:#3a2a00}
.big.next:active{box-shadow:0 2px 0 #b98700}
.ctl .thinking{padding:12px}
.microw{display:flex;justify-content:center}
.mic{width:92px;height:92px;border-radius:50%;margin:6px auto 10px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;color:#fff;
  background:linear-gradient(180deg,#ff7b7b,#e94444);box-shadow:0 8px 0 #a82b2b}
.mic .mic-i{font-size:32px;line-height:1}
.mic .mic-t{font-family:'Fredoka',sans-serif;font-size:20px;font-weight:700;line-height:1.1;text-shadow:0 1px 0 rgba(0,0,0,.3)}
.mic.on{animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 8px 0 #a82b2b,0 0 0 0 rgba(255,92,92,.6)}100%{box-shadow:0 8px 0 #a82b2b,0 0 0 30px rgba(255,92,92,0)}}
.transcript{font-size:16px;color:var(--muted);min-height:22px;text-align:center}
.thinking{text-align:center;font-size:20px;font-weight:700;color:#2a86f0;padding:16px;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.5}}
.testbox{border:2px dashed #c9d2f0;border-radius:16px;padding:12px;margin-top:10px}
.testbox h3{margin:0 0 6px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-family:'Lexend',sans-serif}
.testbox p{margin:0 0 8px;color:var(--muted);font-size:14px}
.testbox textarea{width:100%;font-family:inherit;font-size:18px;padding:10px;border-radius:12px;border:2px solid #dde3f5;resize:vertical;min-height:60px}

/* Magival */
.picker h3{margin-top:6px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:8px 0 12px}
.mcard{background:#f6f7fd;border:3px solid var(--c,#ccd);border-radius:16px;padding:10px;text-align:left;display:flex;flex-direction:column;gap:2px;color:var(--ink);font-size:13px}
.mcard .me{font-size:34px}
.mcard b{font-family:'Fredoka',sans-serif;font-size:18px}
.mcard.active{background:#fffbe6;box-shadow:0 0 0 4px var(--gold)}
.mcard.locked{border-color:#dde;opacity:.6}
.eq{color:#178a49;font-weight:800;font-size:13px}

/* ===== Ark (ryggsäck, samling, butik) ===== */
.sheet{position:relative}
.sheet-head{display:flex;justify-content:space-between;align-items:center}
.x{width:48px;height:48px;border-radius:50%;background:#e7ebf8;color:var(--ink);font-size:20px;font-weight:800}
.tabs{display:flex;gap:8px;margin-bottom:10px}
.tabs button{flex:1;padding:10px;min-height:48px;border-radius:14px;background:#e7ebf8;color:var(--ink);font-weight:700;font-size:16px}
.tabs button.active{background:var(--ink);color:#fff}
.stats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.stats span{background:#f2f5ff;border-radius:999px;padding:5px 12px;font-weight:700;font-size:14px}
.slot h3 small{font-family:'Lexend',sans-serif;font-size:13px;color:var(--muted);font-weight:400}
.icard{display:flex;align-items:center;gap:12px;border:3px solid var(--t);border-radius:16px;padding:8px 12px;margin-bottom:8px;background:#fbfbff;flex-wrap:wrap}
.icard.on{background:#fffbe6;box-shadow:0 0 0 3px var(--gold)}
.icard .ie{font-size:36px;width:52px;height:52px;display:grid;place-items:center;border-radius:12px;background:var(--t)}
.icard .it{flex:1;min-width:160px}
.icard .it b{font-family:'Fredoka',sans-serif;font-size:18px}
.icard .it small{display:block;color:var(--muted);font-size:14px}
.tier{font-size:11px;font-weight:800;background:var(--t);color:#fff;border-radius:999px;padding:1px 8px;vertical-align:middle}
.need{font-size:12px;color:var(--muted)}
.empty{color:var(--muted);font-size:14px;margin:4px 0 8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.mon{border-radius:18px;padding:14px 10px;text-align:center;color:#fff}
.mon .e{font-size:48px;display:block;filter:drop-shadow(0 4px 0 rgba(0,0,0,.25))}
.mon b{font-family:'Fredoka',sans-serif;font-size:17px;display:block;margin-top:6px}
.mon small{display:block;opacity:.9;font-size:12px}
.mon.unknown{background:#2a3350!important}
.mon.unknown .e{filter:brightness(0) opacity(.5)}
.mon.seen{opacity:.75}
.tag{display:inline-block;background:rgba(0,0,0,.25);border-radius:999px;padding:2px 8px;font-size:11px;margin-top:4px}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:26px;background:#e7ebf8;border:3px solid #ccd3ea}
.badge.on{background:#fff6cc;border-color:var(--gold);box-shadow:0 3px 0 #b98700}

/* ===== Popups ===== */
.pop{background:#fff;border-radius:26px;padding:24px;max-width:500px;width:100%;text-align:center;animation:pop .35s cubic-bezier(.2,1.4,.4,1);box-shadow:0 20px 60px rgba(0,0,0,.45)}
.pop.boss{background:linear-gradient(180deg,#fff9e0,#fff)}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.pop .huge{font-size:80px;line-height:1.1;margin:4px 0 8px}
.pop h2{font-size:30px}
.pop p{font-size:19px;margin:6px 0 10px}
.pop .psub{font-size:15px;color:var(--muted)}
.popbtns{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.rewards{margin:6px 0}
.reward{display:inline-block;background:var(--yellow);border-radius:14px;padding:6px 12px;font-weight:800;margin:3px}
.parent{display:flex;gap:14px;align-items:center;text-align:left;background:#f2f5ff;border-radius:18px;padding:14px}
.parent .face{font-size:58px}
.parent b{font-family:'Fredoka',sans-serif;font-size:18px;display:block}
.parent span{font-size:20px}

.confetti{position:fixed;top:-10px;font-size:22px;animation:fall linear forwards;pointer-events:none;z-index:90}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

/* ===== Mobil ===== */
@media (max-width:640px), (max-height:500px){
  .passage{font-size:26px;line-height:1.55;padding:6px 4px}
  .battle{max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px)}
  .battle:not(.picking){height:calc(100vh - 12px);height:calc(100dvh - 12px)}
  .hero-e{font-size:34px}
  .hero-gear{font-size:15px;margin-left:-4px}
  .me-head{gap:6px}
  .fx-swing{font-size:42px}
  .fx-proj{font-size:32px}.fx-proj.big{font-size:56px}
  .fx-boom{font-size:48px}.fx-boom.big{font-size:72px}
  .fx-label{font-size:20px}.fx-label.super{font-size:24px}.fx-label.meh{font-size:15px}.fx-label.fx-dmg{font-size:24px}
  .passage .w{padding:0 3px}
  h1{font-size:34px}
  .start-hero{font-size:56px}
  /* HUD: en kompakt rad – XP-mätare och utrustningsrutor döljs (finns i Ryggsäcken) */
  #hud{gap:6px;padding:4px 8px;min-height:0}
  .xpbar,.gear{display:none}
  .name{font-size:15px}
  .avatar{width:34px;height:34px;font-size:20px}
  .hud-l{gap:4px}
  .hud-m{gap:6px}
  .nav button{padding:6px 8px;font-size:13px}
  .nav{gap:4px}
  .nav .snd{padding:6px 4px}
  .layer{padding:6px}
  /* Strid: kompakt topp så att lästexten och Läs!-knappen syns utan att scrolla */
  .battle{padding:10px}
  .b-top{gap:6px;flex-wrap:nowrap}
  .foe{min-width:0;flex:1.3;padding:6px 8px;gap:8px}
  .foe-emoji{font-size:40px}
  .foe-emoji .crown{font-size:18px;margin-bottom:-4px}
  .foe-info b{font-size:16px}
  .type{font-size:11px;padding:1px 6px}
  .big-hearts{font-size:16px;margin-top:2px}
  .me-box{min-width:0;flex:1;padding:6px 8px;gap:2px}
  .me-box b{font-size:15px}
  .me-box .hearts{font-size:13px;white-space:normal}
  .shieldinfo{font-size:12px}
  .magicrow .chip{display:none}
  .magicrow .small{padding:6px 8px;font-size:13px;width:100%}
  .b-hint{font-size:14px;padding:6px 8px;margin-top:6px}
  .b-hint small{font-size:12px}
  .b-label{font-size:11px;margin-top:6px}
  .hint{font-size:14px;padding:6px 10px;margin:6px 0}
  /* Kontrollerna (v2.2): hjälprad + knapprad, alltid synliga under textytan */
  .hint.one{font-size:14px;padding:6px 10px;margin:0 0 6px}
  .ctl.stick{margin-top:6px}
  .ctlrow{gap:8px}
  .ctlrow .link{font-size:14px;padding:8px 10px;max-width:170px;text-align:left}
  .mic{width:80px;height:80px}
  .mic .mic-i{font-size:28px}
  .mic .mic-t{font-size:17px}
  .ctlrow.testbox textarea{height:52px;font-size:17px;padding:8px}
  .ctlrow.testbox .small{padding:8px 10px}
  .big.next{min-width:200px;font-size:24px;padding:10px 24px}
  .pageind{font-size:15px;gap:6px}
  .pageind .dots i{width:11px;height:11px}
  .b-bottom .snd{font-size:17px;padding:6px 8px}
  .row{margin-top:6px}
  .b-bottom{margin-top:6px}
  .pop{padding:18px}
  .pop .huge{font-size:60px}
  .pop h2{font-size:24px}
  .pop p{font-size:17px}
}
/* Surfplatta liggande (t.ex. 1024×768, 1180×820): lite lägre topp så att lästexten får fler rader.
   Lästypsnittet är fortfarande 36 px. */
@media (min-width:641px) and (min-height:501px) and (max-height:860px){
  .battle{padding:12px 16px}
  .b-top{gap:10px}
  .me-box{padding:8px 12px;gap:2px}
  .hero-e{font-size:46px}
  .foe{padding:8px 12px}
  .foe-emoji{font-size:58px}
  .foe-emoji .crown{font-size:22px;margin-bottom:-6px}
  .big-hearts{font-size:20px;margin-top:2px}
  .b-hint{margin-top:8px;padding:6px 12px;font-size:15px}
  .b-hint small{display:none}
  .b-label{margin-top:6px}
}
@media (orientation:portrait) and (max-width:640px){
  #rotate{display:block}
}

/* Låg höjd (mobil i liggande läge): ge lästexten mer plats */
@media (max-height:500px){
  .b-hint{display:none}
  .battle{padding:6px 10px}
  /* Kompakt topp: Vinnie och fienden på en låg rad */
  .b-top{gap:6px}
  .me-box{flex-direction:row;align-items:center;justify-content:space-between;padding:4px 8px}
  .me-box .shieldinfo{display:none}
  .magicrow{margin-top:0}
  .magicrow .small{width:auto;padding:6px 10px}
  .hero-e{font-size:28px}
  .foe{padding:4px 8px}
  .foe-emoji{font-size:34px}
  .foe-emoji .crown{font-size:14px;margin-bottom:-4px}
  .foe-info b{font-size:14px}
  .big-hearts{font-size:14px}
  .b-label{margin-top:4px}
  /* Kontrollerna på en rad: hjälpraden bredvid knapparna */
  .ctl.stick{display:flex;align-items:center;gap:8px;margin-top:4px}
  .ctl.stick>.hint.one{flex:1 1 35%;min-width:0;margin:0;font-size:13px}
  .ctl.stick>.ctlrow{flex:1 1 65%}
  .mic{width:64px;height:64px}
  .mic .mic-i{font-size:22px}
  .mic .mic-t{font-size:14px}
  .ctlrow.testbox textarea{height:48px}
  .big.next{min-width:0;font-size:20px;padding:8px 18px}
  .b-bottom{margin-top:2px}
}
/* Telefon i liggande läge (höjd ≤ 420 px, t.ex. 844×390, 740×360, 667×375): lästypsnitt 26 px
   med tätare radavstånd och lägre topp, så att minst en hel mening alltid får plats utan rullning. */
@media (max-height:420px){
  .passage{font-size:26px;line-height:1.38;padding:4px 4px;letter-spacing:.01em;word-spacing:.08em}
  .passage .w{padding:0 2px}
  .passage .s.focus{padding:1px 0}
  .battle{padding:4px 8px}
  .b-top{gap:4px}
  .me-box{padding:2px 8px}
  .foe{padding:2px 8px}
  .foe-emoji{font-size:30px}
  .b-label{margin-top:2px;font-size:10px}
  .pwrap{margin-top:3px}
  .ctl.stick{margin-top:3px}
  .b-bottom{margin-top:2px}
}
@media (max-height:370px){
  .passage{line-height:1.3}
  .b-label{margin-top:0;line-height:1.2}
}
/* Minskad rörelse: inga snurr, skakningar eller loopande animationer – bara enkla toningar
   och förflyttningar. (Attackanimationen och fallet i ui.js tar bort rotation/skalning själva.) */
@media (prefers-reduced-motion: reduce){
  .bob,.bob2,.mic.on,.passage .s.focus .arrow,.thinking{animation:none}
  .passage .w.bad,.small.armed{animation:none}
  .foe.hit .foe-emoji,.foe.dodge .foe-emoji{animation:none}
  .pop,.toast{animation:fadein .15s ease-out}
  .foe-emoji .fx{animation:fadeout .7s forwards}
  .confetti{animation-name:fall-calm}
}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes fadeout{from{opacity:1}to{opacity:0}}
@keyframes fall-calm{to{transform:translateY(110vh)}}

/* ===== v2.3: mikrofon, "Chrome hörde", PIN, onboarding ===== */
/* Lyssna-indikatorn: pulserande mikrofon + "Jag lyssnar…" */
.hint.listening{background:#ffecec;color:#8a2020}
.hint.listening .ear{display:inline-block;animation:earpulse 1s ease-in-out infinite}
@keyframes earpulse{50%{transform:scale(1.35)}}
/* Vad Chrome hörde – liten grå rad bredvid sidindikatorn (ändrar aldrig höjden på raden) */
.heard{flex:1 1 0;min-width:0;font-size:12px;color:#8a92ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.heard:empty{display:none}
/* PIN-skärmen */
.pin-card{max-width:420px}
.pin-dots{display:flex;justify-content:center;gap:16px;margin:6px 0 10px;min-height:28px}
.pin-dots i{width:26px;height:26px;border-radius:50%;border:4px solid #c9d2f0;background:#fff;transition:background .15s}
.pin-dots i.on{background:var(--gold);border-color:#f2b400}
.pin-msg{font-family:'Fredoka',sans-serif;font-size:20px;font-weight:600;color:var(--muted);margin-bottom:12px;min-height:26px}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:330px;margin:0 auto}
.pin-key{min-height:72px;border-radius:20px;font-family:'Fredoka',sans-serif;font-size:34px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,#6fb6ff,#3a8ee8);box-shadow:0 6px 0 #2565b0;transition:transform .08s}
.pin-key:active{transform:translateY(4px);box-shadow:0 2px 0 #2565b0}
.pin-key.del{background:linear-gradient(180deg,#e7ebf8,#cfd6ec);color:var(--muted);box-shadow:0 6px 0 #a9b2cf}
.pin-card.wrong{animation:shake .4s 2}
@media (max-height:520px){
  .pin-screen h1{font-size:30px;margin:2px 0}
  .pin-screen .sub{margin-bottom:8px;font-size:15px}
  .pin-key{min-height:52px;font-size:26px}
  .pin-pad{gap:8px}
}
/* Mikrofon-onboarding ("Hej robot, nu är jag redo!") */
.onb-btn{line-height:1.25;padding:18px 22px;margin-bottom:12px}
.onb-btn b{font-size:1.1em}
.onb-btn.on{background:linear-gradient(180deg,#ff7b7b,#e94444);box-shadow:0 6px 0 #a82b2b;animation:pulse 1.2s infinite}
.onboard .hint small{display:block;margin-top:6px;font-size:14px;line-height:1.35}
@media (prefers-reduced-motion: reduce){
  .hint.listening .ear,.onb-btn.on{animation:none}
  .pin-card.wrong{animation:none;outline:4px solid var(--red);outline-offset:-4px}
}

/* ===== v2.3b: föräldrainställningar ===== */
/* ⚙️ – litet och diskret i startskärmens hörn; långt tryck/5 tryck (se ui.js). Ingen textmarkering/meny vid långt tryck. */
.start{position:relative}
.gear{position:absolute;top:-2px;right:0;z-index:2;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);
  font-size:22px;line-height:44px;padding:0;opacity:.55;color:#fff;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.gear:focus-visible{opacity:1;outline:3px solid var(--gold)}
/* v2.3b-final: HUD:ens utrustningsrutor heter också .gear och döljs på låga skärmar (≤500 px hög,
   t.ex. en 8-tumsplatta i liggande läge med Chromes adressfält). ID-regeln håller ⚙️ synlig. */
#parentGear{display:flex}
.nocode{margin:12px 0 0;font-size:13px;color:#8a92ad}
.settings-card{text-align:left;max-width:520px;margin:0 auto}
.set-row{display:block;margin:10px 0 4px}
.set-row b{display:block;font-size:17px;color:var(--ink)}
.set-row small{display:block;font-size:13px;color:var(--muted);line-height:1.35}
.set-inline{display:flex;gap:8px;align-items:center}
.set-inline input{flex:1;min-width:0;font:inherit;font-size:18px;padding:10px 12px;border:2px solid #c9d2f0;border-radius:12px;min-height:48px;color:var(--ink);background:#fff}
.set-inline input:disabled{background:#eef1f8}
.set-info{font-size:13px;color:var(--muted);margin:12px 0 4px;word-break:break-all}
.set-result{min-height:22px;font-size:15px;font-weight:700;margin:6px 0}
.set-result.ok{color:#178a49}
.set-result.bad{color:#c22}
.set-btns{display:flex;gap:10px;flex-wrap:wrap}
.set-btns .big{flex:1 1 180px}
.settings-screen .reset-row{text-align:center}
@media (max-height:520px){ .settings-screen h1{font-size:28px;margin:2px 0} .settings-screen .sub{font-size:14px;margin-bottom:6px} }