/* Умнокрафт — интерфейс поверх 3D. Светлые «пергаментные» панели с толстой рамкой, крупные кнопки под детские пальцы. */
:root{
  --paper:#fff8e7;--paper2:#f3e7c9;--ink:#2b1d12;--line:#3b2a1a;--muted:#7a6a55;
  --green:#4caf50;--green-d:#2e7d32;--blue:#3f7fcf;--blue-d:#2a5aa0;--red:#e04b3b;--red-d:#a8321f;--gold:#f2c230;
  --ok:#2c7a34;--bad:#c42b2b;
  --font:"Nunito",system-ui,sans-serif;--display:"Russo One","Nunito",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#87ceeb;font-family:var(--font);color:var(--ink);font-size:18px}
button{font-family:inherit;cursor:pointer}
#app{position:fixed;inset:0}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden,[hidden]{display:none!important}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;z-index:5}
kbd{display:inline-block;padding:1px 7px;border:2px solid var(--line);border-bottom-width:4px;border-radius:6px;background:#fff;font:700 14px var(--font);margin:0 1px}

/* ---- кнопки ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border:3px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:700 18px var(--font);box-shadow:0 5px 0 var(--line);transition:transform .05s,box-shadow .05s;user-select:none;min-height:48px}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--line)}
.btn.green{background:var(--green);color:#fff}.btn.blue{background:var(--blue);color:#fff}.btn.red{background:var(--red);color:#fff}
.btn.ghost{background:transparent;box-shadow:none;border-color:transparent;text-decoration:underline;color:var(--muted)}
.btn.big{font-size:24px;padding:14px 34px;min-height:60px;border-radius:16px}
.btn[disabled]{opacity:.45;cursor:default;transform:none}
.link{background:none;border:0;color:#fff;text-decoration:underline;font:700 16px var(--font);padding:4px 6px}
.dot{color:#fff;opacity:.7}

/* ---- заставка ---- */
#s-title{background:linear-gradient(180deg,rgba(0,20,60,.15),rgba(0,20,60,.45));justify-content:space-between;padding:6vh 16px 20px}
.title-box{text-align:center;margin-top:4vh}
.logo{font-family:var(--display);font-size:clamp(44px,9vw,96px);line-height:1;letter-spacing:1px;text-shadow:0 4px 0 #1b3f6b,0 8px 0 rgba(0,0,0,.35);color:#fff}
.logo-a{color:#ffe36b}.logo-b{color:#9df07a}
.tagline{font-size:clamp(18px,2.6vw,26px);color:#fff;font-weight:700;text-shadow:0 2px 0 rgba(0,0,0,.5);margin:12px 0 28px}
.title-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.title-foot{margin-top:22px;display:flex;gap:6px;justify-content:center;align-items:center}
.howto{background:rgba(255,248,231,.92);border:3px solid var(--line);border-radius:14px;padding:10px 16px;max-width:760px;font-size:15px;line-height:1.5;display:grid;gap:4px}
@media (max-width:640px){.howto div:first-child{display:none}}
@media (min-width:641px){.howto div:last-child{display:none}}
@media (pointer:coarse){.howto div:first-child{display:none}.howto div:last-child{display:block}}

/* ---- карта мира ---- */
#s-map{background:radial-gradient(ellipse at 50% 30%,#5fb0e6,#2b6cb0 70%,#1b3f6b);justify-content:flex-start;overflow:auto;padding-top:20px}
.map-head{display:flex;align-items:baseline;gap:18px;color:#fff;width:100%;max-width:1040px;flex-wrap:wrap}
.map-head h1{font-family:var(--display);margin:0;font-size:34px;text-shadow:0 3px 0 rgba(0,0,0,.4)}
.map-stats{font-weight:700;opacity:.95}
.islands{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;width:100%;max-width:1040px;margin:18px 0}
.isl{position:relative;border:3px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:0 6px 0 var(--line);padding:14px 14px 14px;text-align:left;min-height:150px;display:flex;flex-direction:column;gap:6px}
.isl .num{position:absolute;top:-12px;left:-10px;width:34px;height:34px;border-radius:50%;background:var(--gold);border:3px solid var(--line);font:700 16px var(--display);display:flex;align-items:center;justify-content:center}
.isl .ico{font-size:34px;line-height:1}
.isl h3{margin:0;font-family:var(--display);font-size:19px}
.isl p{margin:0;color:var(--muted);font-size:15px;line-height:1.35}
.isl .prog{font-size:14px;color:var(--ok);font-weight:700}
.isl.locked{filter:grayscale(.7);opacity:.75}
.isl.soon .ico{opacity:.5}
.isl .lock{font-size:14px;color:var(--muted);font-weight:700}
.isl .go{margin-top:auto;align-self:flex-start}
.map-foot{display:flex;gap:12px;margin-bottom:20px}

/* ---- HUD ---- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:4}
.hud-top{display:flex;justify-content:space-between;align-items:flex-start;padding:max(10px,env(safe-area-inset-top)) 12px 0}
.hud-left,.hud-right{display:flex;flex-direction:column;gap:8px}
.hud-right{align-items:flex-end}
.hearts{display:flex;gap:3px;font-size:26px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.5))}
.hearts .h{transition:transform .2s}.hearts .h.off{opacity:.3;filter:grayscale(1)}
.chip{background:rgba(20,16,10,.62);color:#fff;border-radius:10px;padding:4px 10px;font-weight:800;font-size:17px;display:inline-flex;align-items:center;gap:6px;backdrop-filter:blur(4px)}
.chip img{width:22px;height:22px;image-rendering:pixelated;border-radius:4px}
.res{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:62vw}
.hud-btns{display:flex;gap:6px;pointer-events:auto}
.hbtn{width:46px;height:46px;border-radius:12px;border:3px solid var(--line);background:var(--paper);font-size:22px;box-shadow:0 4px 0 var(--line);pointer-events:auto}
.hbtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.quest-line{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 80px);left:12px;max-width:min(60vw,420px);background:rgba(255,248,231,.92);border:3px solid var(--line);border-radius:12px;padding:6px 12px;font-weight:700;font-size:15px;line-height:1.3;box-shadow:0 4px 0 var(--line)}
.quest-line:empty{display:none}
.prompt{position:absolute;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);pointer-events:auto}
.prompt .btn{font-size:20px;padding:12px 26px;animation:pop .25s}
@keyframes pop{from{transform:scale(.8)}to{transform:scale(1)}}
.joy{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:140px;height:140px;border-radius:50%;background:rgba(0,0,0,.25);border:3px solid rgba(255,255,255,.5);pointer-events:auto;display:none;touch-action:none}
.joy-knob{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:rgba(255,255,255,.85);border:3px solid var(--line)}
.jump{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:74px;height:74px;border-radius:50%;border:3px solid var(--line);background:rgba(255,248,231,.9);font:700 30px var(--font);box-shadow:0 5px 0 var(--line);pointer-events:auto;display:none}
@media (pointer:coarse){.joy,.jump{display:block}.prompt{bottom:max(110px,calc(env(safe-area-inset-bottom) + 100px))}}

/* ---- панели ---- */
.ov{position:absolute;inset:0;z-index:10;display:flex;align-items:flex-end;justify-content:center;padding:12px;pointer-events:none}
.ov.center{align-items:center}
.ov.dim{background:rgba(10,8,20,.45);pointer-events:auto}
#ov-inner{width:100%;max-width:720px;pointer-events:auto}
.panel{background:var(--paper);border:4px solid var(--line);border-radius:18px;box-shadow:0 8px 0 var(--line),0 18px 40px rgba(0,0,0,.35);padding:16px 18px;animation:up .2s ease-out;max-height:calc(100vh - 30px);overflow:auto}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.panel h2{font-family:var(--display);margin:0 0 8px;font-size:22px;display:flex;align-items:center;gap:10px}
.panel h2 .ico{font-size:28px}
.panel .flavor{margin:0 0 10px;color:var(--muted);font-weight:700;line-height:1.4}
.panel .actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
.dialog{display:flex;gap:14px;align-items:flex-start}
.dialog .face{width:64px;height:64px;border-radius:12px;border:3px solid var(--line);background:#dfe9f5;display:flex;align-items:center;justify-content:center;font-size:36px;flex:none}
.dialog .face img{width:100%;height:100%;image-rendering:pixelated;border-radius:9px}
.dialog .who{font-family:var(--display);font-size:16px;color:var(--muted);margin-bottom:4px}
.dialog .text{font-size:20px;line-height:1.4;font-weight:700;min-height:56px}
/* задача */
.expr{font-family:var(--display);font-size:clamp(34px,7vw,56px);text-align:center;letter-spacing:2px;margin:10px 0 6px;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.expr .slot{display:inline-flex;min-width:1.4em;height:1.3em;align-items:center;justify-content:center;border:4px dashed var(--blue);border-radius:14px;background:#fff;padding:0 .2em;color:var(--blue-d)}
.expr .slot.ok{border-style:solid;border-color:var(--ok);color:var(--ok);background:#e6f3e7}
.expr .slot.bad{border-color:var(--bad);color:var(--bad);background:#fbe9e9;animation:shake .35s}
.expr .done{color:var(--ok)}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.feedback{text-align:center;min-height:30px;font-weight:800;font-size:19px;margin:4px 0}
.feedback.ok{color:var(--ok)}.feedback.bad{color:var(--bad)}
.hintbox{background:#fff4dc;border:3px solid #e0b25a;border-radius:12px;padding:8px 12px;font-weight:700;line-height:1.4;margin:6px 0;font-size:17px}
.hintbox b{color:#8a5a0a}
.numpad{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-width:520px;margin:8px auto 0}
.key{height:58px;border:3px solid var(--line);border-radius:12px;background:#fff;font:800 26px var(--font);box-shadow:0 4px 0 var(--line)}
.key:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.key.ok{background:var(--green);color:#fff}.key.del{background:var(--paper2)}.key.hint{background:#ffe9a8;font-size:22px}
@media (max-width:520px){.numpad{grid-template-columns:repeat(4,1fr)}.key{height:52px;font-size:24px}}
.steps{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:4px}
.steps .st{padding:3px 12px;border-radius:999px;background:var(--paper2);border:2px solid var(--line);font-weight:800;font-size:16px}
.steps .st.cur{background:#fff;border-color:var(--blue)}.steps .st.done{background:#e6f3e7;border-color:var(--ok);color:var(--ok)}
/* доски */
.gap{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap}
.gap .bank{width:46px;height:46px;background:#6cbe45;border:3px solid var(--line);border-radius:8px;flex:none}
.gap .track{flex:1;min-width:160px;height:46px;border:3px dashed #8aa;border-radius:8px;background:#9fd3f0;display:flex;align-items:stretch;overflow:hidden;position:relative}
.gap .track .fill{display:flex;height:100%}
.gap .track .fill .pl{background:#c9955a;border-right:3px solid #7a5826;display:flex;align-items:center;justify-content:center;font:800 15px var(--font);color:#3b2a1a}
.gap .track .need{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-weight:900;color:#1b3f6b;background:rgba(255,255,255,.75);padding:2px 8px;border-radius:8px}
.planks{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:10px 0}
.plank{height:54px;border:3px solid var(--line);border-radius:10px;background:linear-gradient(#d4a061,#b48a4a);font:900 22px var(--font);color:#2b1d12;box-shadow:0 4px 0 var(--line);padding:0 14px;min-width:60px}
.plank.used{opacity:.35;transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.sumline{text-align:center;font:800 24px var(--display);margin:6px 0}
/* бой */
.battle{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.battle .side{background:#fff;border:3px solid var(--line);border-radius:12px;padding:8px 12px}
.battle .side h3{margin:0 0 6px;font-family:var(--display);font-size:17px}
.hpbar{height:22px;border:3px solid var(--line);border-radius:999px;background:#fbe9e9;overflow:hidden;position:relative}
.hpbar i{display:block;height:100%;background:linear-gradient(#ff6b5b,#e04b3b);transition:width .4s}
.hpnum{font:900 30px var(--display);color:var(--red-d);text-align:center}
.hpbig{font:900 44px var(--display);text-align:center;color:var(--red-d);line-height:1}
.attacks{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.atk{border:3px solid var(--line);border-radius:12px;background:#fff;padding:8px 14px;font:800 18px var(--font);box-shadow:0 4px 0 var(--line);display:flex;flex-direction:column;align-items:center;min-width:92px}
.atk b{font:900 28px var(--display);color:var(--blue-d)}
.atk.sel{background:#e3f0ff;border-color:var(--blue)}
.atk[disabled]{opacity:.4}
.battle-log{font-weight:800;text-align:center;font-size:18px;min-height:26px;margin-top:8px}
@media (max-width:560px){.battle{grid-template-columns:1fr}}
/* верстак, рюкзак */
.recipes{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:8px}
.rec{border:3px solid var(--line);border-radius:12px;background:#fff;padding:10px;display:flex;flex-direction:column;gap:6px}
.rec h4{margin:0;font-family:var(--display);font-size:16px}
.rec .need{font-size:15px;font-weight:700;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}
.rec .need span.no{color:var(--bad)}
.rec .have{font-size:14px;color:var(--ok);font-weight:800}
.rec .btn{padding:6px 12px;min-height:40px;font-size:16px;align-self:flex-start}
.inv{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.inv .it{border:3px solid var(--line);border-radius:12px;background:#fff;padding:6px 10px;font-weight:800;display:flex;gap:8px;align-items:center}
.inv .it img{width:28px;height:28px;image-rendering:pixelated}
/* база */
.base-pal{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.base-pal .pb{border:3px solid var(--line);border-radius:10px;background:#fff;padding:4px 8px;font-weight:800;display:flex;gap:6px;align-items:center;box-shadow:0 3px 0 var(--line)}
.base-pal .pb img{width:26px;height:26px;image-rendering:pixelated}
.base-pal .pb.sel{background:#e3f0ff;border-color:var(--blue)}
.base-bar{position:absolute;left:0;right:0;bottom:0;padding:10px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;background:rgba(255,248,231,.92);border-top:4px solid var(--line);pointer-events:auto}
/* родителям */
.ptable{width:100%;border-collapse:collapse;font-size:16px;margin:8px 0}
.ptable th,.ptable td{border-bottom:2px solid var(--paper2);padding:6px 8px;text-align:left}
.ptable th{font-family:var(--display);font-size:14px;color:var(--muted)}
.mist{font-size:15px;line-height:1.45;max-height:180px;overflow:auto;background:#fff;border:3px solid var(--paper2);border-radius:10px;padding:8px 12px}
.mist div b{color:var(--bad)}
.seg{display:inline-flex;border:3px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:0;background:#fff;padding:6px 12px;font:800 15px var(--font)}
.seg button.on{background:var(--blue);color:#fff}
/* тосты */
.toast{position:absolute;left:50%;top:18%;transform:translateX(-50%);background:var(--paper);border:4px solid var(--line);border-radius:16px;padding:12px 22px;font:800 22px var(--display);box-shadow:0 6px 0 var(--line);z-index:20;text-align:center;animation:pop .25s;max-width:90vw;pointer-events:none}
.toast.gold{background:#fff1b8}
.loading{position:absolute;inset:0;background:#87ceeb;display:flex;align-items:center;justify-content:center;z-index:30;font:800 22px var(--display);color:#1b3f6b}
.loading-box{display:flex;flex-direction:column;align-items:center;gap:16px}
.cube{width:48px;height:48px;background:#6cbe45;border:4px solid #2b1d12;animation:spin 1.1s infinite ease-in-out}
@keyframes spin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.7)}100%{transform:rotate(360deg) scale(1)}}
.fade{animation:fadeout .6s forwards}
@keyframes fadeout{to{opacity:0;visibility:hidden}}

/* низкие экраны (телефон боком) */
@media (max-height:460px){
  .panel{padding:8px 12px;border-radius:14px}
  .panel h2{font-size:17px;margin-bottom:2px}.panel h2 .ico{font-size:20px}
  .panel .flavor{font-size:14px;margin-bottom:4px}
  .expr{font-size:30px;margin:2px 0}.expr .slot{height:1.2em}
  .feedback{min-height:22px;font-size:15px;margin:2px 0}
  .numpad{gap:5px;grid-template-columns:repeat(7,1fr)}.key{height:40px;font-size:20px}.key.hint{font-size:15px}
  .numpad .key.hint{grid-column:span 1}
  .dialog .text{font-size:17px;min-height:40px}.dialog .face{width:48px;height:48px;font-size:28px}
  .battle .side{padding:6px 10px}.hpbig{font-size:30px}.atk{padding:4px 10px;min-width:76px;font-size:15px}.atk b{font-size:22px}
  .plank{height:42px;font-size:18px}.gap .bank,.gap .track{height:34px}
  .quest-line{font-size:13px;padding:4px 10px;top:calc(max(10px,env(safe-area-inset-top)) + 70px)}
  .hearts{font-size:20px}.chip{font-size:14px;padding:3px 8px}.hbtn{width:40px;height:40px;font-size:18px}
  .joy{width:110px;height:110px}.joy-knob{width:48px;height:48px;margin:-24px 0 0 -24px}.jump{width:60px;height:60px;font-size:24px}
}

/* ---- крестик закрытия ---- */
.panel{position:relative}
.closex{position:absolute;top:8px;right:8px;width:38px;height:38px;border-radius:10px;border:3px solid var(--line);background:#fff;font:900 18px var(--font);box-shadow:0 3px 0 var(--line);z-index:2}
.closex:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.panel h2{padding-right:44px}
/* ---- смекалка ---- */
.visual{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.vcube{font-size:40px;line-height:1;filter:drop-shadow(0 3px 0 rgba(0,0,0,.25))}
.vcube.q{animation:blink 1s infinite}
@keyframes blink{50%{opacity:.35}}
.qtext{font-weight:800;font-size:20px;text-align:center;line-height:1.4;margin:6px 0}
.qtext.big{font-family:var(--display);font-size:clamp(28px,6vw,44px)}
.choice-opts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.opt{border:3px solid var(--line);border-radius:14px;background:#fff;padding:10px 18px;font:800 20px var(--font);box-shadow:0 4px 0 var(--line);min-width:84px}
.opt.big{font-size:34px;min-width:96px;padding:8px 18px}
.opt.ok{background:var(--green);color:#fff}.opt.bad{background:#fbe9e9;border-color:var(--bad);opacity:.6}
.opt[disabled]{cursor:default}
/* ---- хотбар ---- */
.hotbar{position:absolute;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:6px;padding:6px;background:rgba(20,16,10,.55);border-radius:14px;pointer-events:auto;max-width:min(60vw,560px);overflow-x:auto;backdrop-filter:blur(4px)}
.hotbar:empty{display:none}
.slot{position:relative;width:50px;height:50px;border-radius:10px;border:3px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);flex:none;display:flex;align-items:center;justify-content:center;padding:0}
.slot img{width:34px;height:34px;image-rendering:pixelated}
.slot .hand{font-size:26px}
.slot b{position:absolute;right:2px;bottom:0;font:900 13px var(--font);color:#fff;text-shadow:0 1px 0 #000,0 0 3px #000}
.slot.sel{border-color:#fff;background:rgba(255,255,255,.35);box-shadow:0 0 0 2px var(--line)}
.prompt{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 74px)}
@media (pointer:coarse){.prompt{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 78px)}.hotbar{max-width:min(46vw,480px)}}
/* ---- мини-карта ---- */
.minimap{width:150px;height:150px;border:3px solid var(--line);border-radius:14px;background:#2f74d6;box-shadow:0 4px 0 var(--line);pointer-events:auto;display:none;image-rendering:pixelated;touch-action:none}
.minimap.open{display:block}
@media (min-width:900px) and (min-height:560px){.minimap{display:block}.minimap.open{display:none}}
/* ---- где / выбраться ---- */
.quest-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;pointer-events:auto}
.where{border:2px solid var(--line);border-radius:8px;background:#fff;font:800 13px var(--font);padding:3px 8px;box-shadow:0 2px 0 var(--line)}
.unstuck{position:absolute;left:50%;top:40%;transform:translateX(-50%);pointer-events:auto;background:#ffe9a8}
/* ---- рюкзак: где взять, достижения ---- */
details{margin-top:10px}summary{font-family:var(--display);font-size:16px;cursor:pointer}
.wherelist{display:grid;gap:4px;margin-top:6px;font-size:15px}
.achlist{display:grid;gap:6px;margin-top:6px}
.ach{display:flex;gap:10px;align-items:center;border:2px solid var(--paper2);border-radius:10px;padding:6px 10px;font-size:14px;opacity:.6}
.ach.done{opacity:1;border-color:var(--gold);background:#fff8dc}
.ach span{font-size:22px}
.battle .flee{margin-left:auto}
@media (max-height:460px){.slot{width:40px;height:40px}.slot img{width:26px;height:26px}.minimap{width:100px;height:100px}}
/* ---- внешность, аптечка, ошибки, день/ночь ---- */
.skinrow{display:flex;align-items:center;gap:12px;margin:8px 0;flex-wrap:wrap}
.skinrow b{min-width:90px}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:38px;height:38px;border-radius:10px;border:3px solid var(--line);box-shadow:0 3px 0 var(--line)}
.sw.sel{outline:4px solid var(--blue);outline-offset:2px}
.uses{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.uses .btn{font-size:15px;padding:6px 12px;min-height:40px}
.errbar{position:absolute;left:50%;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 80px);transform:translateX(-50%);background:#fff3f0;border:3px solid var(--bad);border-radius:12px;padding:8px 14px;font:700 14px var(--font);color:#7a1d12;z-index:40;max-width:90vw;box-shadow:0 4px 0 var(--bad);pointer-events:auto}
.errbar button{margin-left:10px;border:2px solid var(--bad);background:#fff;border-radius:8px;font:800 13px var(--font);padding:3px 8px}
.chip.time{background:rgba(255,255,255,.75);color:var(--ink)}
.chip.buff{background:rgba(224,75,59,.75)}
.boom{animation:boomflash .25s infinite}
@keyframes boomflash{50%{filter:brightness(2)}}
/* ---- кубики-подсказка, озвучка, прочее ---- */
.cubes{margin:6px 0}
.cubes-in{background:#fff;border:3px solid var(--paper2);border-radius:12px;padding:8px 10px}
.crow{display:flex;flex-wrap:wrap;gap:3px;margin:3px 0}
.cb{display:inline-block;width:22px;height:22px;border-radius:5px;border:2px solid rgba(0,0,0,.35);box-shadow:inset -3px -3px 0 rgba(0,0,0,.18)}
.cb.g{background:#6cbe45}.cb.b{background:#4a90e2}.cb.q{background:#f3e7c9;border-style:dashed}
.cb.x{opacity:.35;position:relative}.cb.x::after{content:'✕';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#c42b2b;font:900 16px var(--font)}
.cb.ten{margin-right:10px}
.cnote{font-size:15px;font-weight:700;color:var(--muted);margin-top:4px}
.btn.speak{padding:6px 10px;min-height:40px;font-size:18px;background:#fff}
.btn.speak.small{margin-left:auto;margin-right:40px;min-height:34px;padding:4px 8px;font-size:16px}
.step-dots{color:var(--muted);font-weight:800;align-self:center;margin-right:auto}
.expr.word{font-family:var(--font);font-size:clamp(18px,3vw,24px);letter-spacing:0;line-height:1.45;text-align:left;display:block}
.expr.word .slot{display:inline-flex;vertical-align:middle;font-family:var(--display);font-size:1.3em;margin-left:6px}
.loading .bar{width:220px;height:14px;border:3px solid #1b3f6b;border-radius:999px;background:#fff;overflow:hidden}
.loading .bar i{display:block;height:100%;width:0;background:#6cbe45;transition:width .15s}
.limit{position:absolute;inset:0;z-index:35;background:rgba(10,8,20,.75);display:flex;align-items:center;justify-content:center;padding:16px}
.hero-code{color:#fff;font:800 15px var(--font);opacity:.9;margin-top:10px;text-shadow:0 1px 0 rgba(0,0,0,.6)}
@media (max-height:460px){.cb{width:16px;height:16px}.expr.word{font-size:16px}}

/* ---- стройка от первого лица ---- */
.xhair{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);pointer-events:none;z-index:6}
.xhair i{position:absolute;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.xhair i:first-child{left:11px;top:0;width:4px;height:26px}.xhair i:last-child{top:11px;left:0;width:26px;height:4px}
.target-name{position:absolute;left:50%;top:calc(50% + 24px);transform:translateX(-50%);background:rgba(20,16,10,.6);color:#fff;border-radius:8px;padding:3px 10px;font:800 14px var(--font);pointer-events:none}
.fp-tools{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:calc(max(18px,env(safe-area-inset-bottom)) + 90px);display:flex;flex-direction:column;gap:8px;pointer-events:auto}
.fp-tools .btn{min-height:44px;font-size:16px;padding:8px 14px}
.fp-tools .btn.on{outline:4px solid var(--blue)}
.slot b.inf{color:#9df07a;font-size:15px}
.chip.obby{background:rgba(63,127,207,.85)}
.hbtn.on{background:#e3f0ff;border-color:var(--blue)}
@media (max-height:460px){.fp-tools{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 70px)}}

/* выход из игры на сайт (добавлено с сайта умныйшкольник.рф 01.11.2026) */
.exit-sheet{position:fixed;inset:0;z-index:36;background:rgba(10,8,20,.6);display:flex;align-items:center;justify-content:center;padding:16px;pointer-events:auto}
.exit-box{background:var(--paper);border:4px solid var(--line);border-radius:18px;padding:22px 20px;max-width:380px;width:100%;text-align:center;font:700 17px var(--font);color:var(--ink);box-shadow:0 10px 0 var(--line)}
.exit-box h2{font:400 26px var(--display);margin:0 0 8px}
.exit-box p{margin:0 0 8px;color:var(--muted);font-weight:600;font-size:15px}
.exit-box .btn{display:flex;width:100%;margin-top:10px;text-decoration:none;color:var(--ink)}
.exit-box .btn.green{color:#fff}
@media (max-width:600px){.hud-btns{flex-wrap:wrap;justify-content:flex-end;max-width:218px}}