:root{
  --ink:#1d2340; --ink2:#2e3766; --sky:#7ec8f0; --sky2:#bfe6ff; --sun:#ffd23f;
  --orange:#ff8c42; --green:#3fbf6a; --red:#ef476f; --paper:#fffaf0; --white:#fff;
  --muted:#6b7398; --hud-h:52px; --win-h:300px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --font-h:'Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --font:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);color:var(--ink);font-family:var(--font);
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
body{overflow:hidden;position:fixed;inset:0}
#app{position:absolute;inset:0;overflow:hidden}
button{font-family:var(--font-h);cursor:pointer;color:var(--ink)}
.hidden{display:none!important}

/* ---------- Screens ---------- */
.screen{position:absolute;inset:0;display:none;background:var(--sky)}
.screen.active{display:block}
.screen.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(#8fd3ff,#d9f1ff 60%,#eaf8ff)}
.bg-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.page{max-width:760px;margin:0 auto;padding:12px 16px calc(28px + var(--safe-b))}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--white);
  border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink);padding:10px 16px;
  font-size:17px;font-weight:800;line-height:1.1;transition:transform .06s,box-shadow .06s;min-height:46px}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn.primary{background:var(--orange);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn.green{background:var(--green);color:#fff}
.btn.big{font-size:22px;padding:14px 18px;min-height:60px}
.btn.small{font-size:14px;padding:6px 10px;min-height:36px;border-radius:12px}
.btn:disabled{opacity:.45;pointer-events:none}
.badge{background:var(--red);color:#fff;border-radius:999px;padding:1px 8px;font-size:14px;border:2px solid var(--ink)}
.badge:empty{display:none}
.ibtn{width:42px;height:42px;border-radius:50%;border:3px solid var(--ink);background:#fff;box-shadow:0 3px 0 var(--ink);
  font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0;flex:none}
.ibtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}

/* ---------- Header bar ---------- */
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:calc(8px + var(--safe-t)) 12px 8px;background:rgba(29,35,64,.92);color:#fff}
#scr-map .bar{position:absolute;left:0;right:0;background:linear-gradient(rgba(29,35,64,.9),rgba(29,35,64,0))}
.bar h2{margin:0;font-family:var(--font-h);font-size:22px;flex:1;text-align:center;letter-spacing:.5px}
.coins{display:flex;align-items:center;gap:6px;background:#fff;color:var(--ink);border:3px solid var(--ink);
  border-radius:999px;padding:2px 10px 2px 4px;font-weight:800;min-width:60px}
.coin{display:inline-block;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#ffc61a 60%,#e09a00);border:2px solid var(--ink)}

/* ---------- Menu ---------- */
.menu-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100%;padding:calc(20px + var(--safe-t)) 16px calc(20px + var(--safe-b));gap:10px}
.logo{font-family:var(--font-h);font-size:clamp(40px,11vw,72px);line-height:.9;margin:0;color:#fff;text-align:center;
  -webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink)}
.logo span{display:block;color:var(--sun)}
.tagline{margin:4px 0 6px;font-weight:800;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:999px;padding:4px 14px}
.stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.stat{background:rgba(255,255,255,.9);border:3px solid var(--ink);border-radius:14px;padding:4px 10px;font-weight:800;font-size:14px;text-align:center}
.stat b{display:block;font-family:var(--font-h);font-size:20px;line-height:1}
.menu-btns{display:flex;flex-direction:column;gap:12px;width:min(380px,100%)}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.row3 .btn{font-size:15px;padding:10px 6px}

/* ---------- Leg sheet (map) ---------- */
.sheet{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(10px + var(--safe-b));width:min(560px,calc(100% - 20px));
  background:var(--paper);border:3px solid var(--ink);border-radius:20px;box-shadow:0 6px 0 var(--ink);padding:12px 14px;z-index:4}
.sheet h3{margin:0 0 2px;font-family:var(--font-h);font-size:21px;line-height:1.1}
.sheet .sub{color:var(--muted);font-weight:800;font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip{border:2px solid var(--ink);border-radius:999px;padding:2px 9px;font-weight:800;font-size:13px;background:#fff}
.chip.new{background:var(--sun)}
.chip.done{background:#c9f2d6}
.sheet .acts{display:flex;gap:8px;margin-top:8px}
.sheet .acts .btn{flex:1}
.stars{color:#ffb400;font-size:20px;letter-spacing:2px;-webkit-text-stroke:1px var(--ink)}

/* ---------- Flight HUD ---------- */
#scr-flight{background:#000;touch-action:none}
#cockpit{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.fbar{position:absolute;top:0;left:0;right:0;height:calc(var(--hud-h) + var(--safe-t));padding:calc(6px + var(--safe-t)) 8px 6px;
  display:flex;align-items:center;gap:8px;z-index:6;background:linear-gradient(rgba(29,35,64,.85),rgba(29,35,64,.55));pointer-events:none}
.fbar > *{pointer-events:auto}
.fbar .ibtn{width:38px;height:38px;font-size:16px}
.fprog{flex:1;display:flex;align-items:center;gap:6px;color:#fff;font-weight:800;font-size:12px;min-width:0}
.track{flex:1;height:10px;background:rgba(255,255,255,.25);border-radius:6px;position:relative;border:2px solid rgba(255,255,255,.6)}
.track .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--sun);border-radius:4px}
.track .pl{position:absolute;top:50%;left:0;width:22px;height:22px;margin:-11px 0 0 -11px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M4 22 L34 16 Q39 16 38 20 L22 24 L16 34 L12 34 L14 25 L8 26 L6 30 L3 30 Z' fill='%23ff8c42' stroke='%231d2340' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ftxt{color:#fff;font-weight:800;font-size:12px;text-align:right;white-space:nowrap;min-width:54px}
.ibtn.info{background:#dfe6ff;color:var(--ink2);font-family:Georgia,serif;font-style:italic}
.ibtn.info:disabled{opacity:.5}
.ibtn.info.on{background:var(--sun);animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 3px 0 var(--ink),0 0 0 0 rgba(255,210,63,.9)}50%{box-shadow:0 3px 0 var(--ink),0 0 0 8px rgba(255,210,63,0)}}
.info-label{position:absolute;right:54px;top:calc(var(--hud-h) + var(--safe-t) + 2px);z-index:6;background:var(--sun);border:2px solid var(--ink);
  border-radius:10px;padding:2px 8px;font-weight:800;font-size:13px;max-width:60vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}

/* ---------- Copilot ---------- */
#copilot{position:absolute;left:8px;right:8px;top:calc(var(--hud-h) + var(--safe-t) + 6px);z-index:5;max-width:660px;margin:0 auto;
  display:flex;flex-direction:column;gap:8px;pointer-events:none}
#copilot > *{pointer-events:auto}
.co-row{display:flex;gap:8px;align-items:flex-start}
#co-avatar{width:56px;height:56px;flex:none;border-radius:50%;border:3px solid var(--ink);background:#bfe6ff;box-shadow:0 3px 0 var(--ink)}
.bubble{position:relative;flex:1;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:7px 11px 8px;box-shadow:0 4px 0 var(--ink);
  font-size:16px;line-height:1.35;font-weight:700;max-height:calc(var(--win-h) - 30px);overflow-y:auto}
.bubble:before{content:"";position:absolute;left:-12px;top:16px;border:8px solid transparent;border-right:10px solid var(--ink)}
.bubble .who{font-family:var(--font-h);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;line-height:1}
.bubble.atc{background:#e5ffe9}
.bubble.atc .who{color:#1d7a3a}
.bubble.me{background:#e3efff}
.bubble.me .who{color:#2c5fb5}
.bubble .vi{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.term{border-bottom:2px dotted var(--ink2);cursor:pointer;color:var(--ink2);font-weight:800}
.term.new{background:linear-gradient(transparent 15%,var(--sun) 15%,var(--sun) 90%,transparent 90%);border-bottom:none;padding:0 2px;border-radius:3px;animation:glow 1.4s infinite}
@keyframes glow{50%{background:linear-gradient(transparent 15%,#ffe98a 15%,#ffe98a 90%,transparent 90%)}}
.term.sel{outline:2px solid var(--orange);outline-offset:1px}
.co-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-left:64px}
.co-opts:empty{display:none}
.co-opts.one{grid-template-columns:1fr}
.co-opts .btn{font-size:15px;min-height:42px;padding:6px 8px;border-radius:13px;text-align:center}
.co-opts .btn.ok{background:var(--green);color:#fff}
.co-opts .btn.bad{background:var(--red);color:#fff;animation:shake .35s}
.co-opts .btn.next{grid-column:1/-1;background:var(--orange);color:#fff}
.tiles-wrap{grid-column:1/-1;display:flex;flex-direction:column;gap:6px}
.tiles-ans{min-height:44px;background:rgba(255,255,255,.92);border:3px dashed var(--ink);border-radius:12px;padding:5px;display:flex;flex-wrap:wrap;gap:5px}
.tiles-pool{display:flex;flex-wrap:wrap;gap:6px}
.tile{background:#fff;border:2px solid var(--ink);border-radius:10px;box-shadow:0 3px 0 var(--ink);padding:5px 9px;font-weight:800;font-size:15px;font-family:var(--font)}
.tile.used{visibility:hidden}
.tile.bad{background:var(--red);color:#fff;animation:shake .35s}
.tile.placed{background:#c9f2d6;box-shadow:none}
@keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
#flash{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;background:#fff;transition:opacity .25s}

/* ---------- Modals ---------- */
.modal{position:fixed;inset:0;z-index:50;background:rgba(14,18,40,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;gap:14px}
.card3d{width:min(380px,92vw);height:min(470px,64vh);perspective:1200px}
.card-inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d}
.card3d.flipped .card-inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--paper);border:4px solid var(--ink);
  border-radius:22px;box-shadow:0 8px 0 var(--ink);padding:16px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.face.back{transform:rotateY(180deg);background:#fff4e6}
.face .cat{align-self:flex-start;font-family:var(--font-h);font-size:13px;border:2px solid var(--ink);border-radius:999px;padding:1px 10px;background:var(--sky2)}
.face .word{font-family:var(--font-h);font-size:clamp(26px,8vw,36px);line-height:1.05;margin:4px 0 0}
.face .lang{font-weight:800;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:1px}
.face p{margin:0;font-size:16px;line-height:1.4;font-weight:600}
.face .ex{background:#fff;border:2px dashed var(--ink2);border-radius:12px;padding:8px 10px;font-style:italic}
.face .mast{margin-top:auto;display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px;color:var(--muted)}
.bar-m{flex:1;height:10px;border:2px solid var(--ink);border-radius:6px;background:#fff;overflow:hidden}
.bar-m i{display:block;height:100%;background:var(--green)}
.card-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.dialog{background:var(--paper);border:4px solid var(--ink);border-radius:22px;box-shadow:0 8px 0 var(--ink);padding:16px 18px;width:min(420px,94vw);max-height:86vh;overflow-y:auto}
.dialog h3{margin:0 0 8px;font-family:var(--font-h);font-size:24px}
.d-body{font-weight:700;line-height:1.4}
.d-btns{display:flex;flex-direction:column;gap:10px;margin-top:14px}

#toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translateX(-50%) translateY(140%);z-index:60;background:var(--ink);color:#fff;
  border:3px solid #fff;border-radius:14px;padding:8px 14px;font-weight:800;transition:transform .25s,opacity .25s;max-width:90vw;text-align:center;pointer-events:none;opacity:0;visibility:hidden}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}

/* ---------- Pages ---------- */
.card{background:var(--paper);border:3px solid var(--ink);border-radius:18px;box-shadow:0 5px 0 var(--ink);padding:12px 14px;margin:12px 0}
.card h3{margin:0 0 6px;font-family:var(--font-h);font-size:20px}
.card .hint{color:var(--muted);font-weight:700;font-size:14px}
label.fld{display:block;font-weight:800;margin:8px 0 4px;font-size:14px}
select,input[type=range]{width:100%}
select{appearance:none;-webkit-appearance:none;font:inherit;font-weight:800;padding:10px 12px;border:3px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 12px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;font-weight:800;border-bottom:2px dashed #d7d0bd}
.toggle:last-child{border-bottom:none}
.sw{position:relative;width:56px;height:32px;flex:none}
.sw input{opacity:0;width:0;height:0}
.sw span{position:absolute;inset:0;background:#cfd3e6;border:3px solid var(--ink);border-radius:999px;transition:.2s}
.sw span:before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border:2px solid var(--ink);border-radius:50%;transition:.2s}
.sw input:checked + span{background:var(--green)}
.sw input:checked + span:before{transform:translateX(24px)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.planes{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.pcard{background:#fff;border:3px solid var(--ink);border-radius:14px;padding:6px;text-align:center;font-weight:800;position:relative}
.pcard canvas{width:100%;height:auto;display:block}
.pcard.sel{background:#fff3c4;box-shadow:0 0 0 4px var(--orange)}
.pcard.locked{opacity:.55}
.pcard .pn{font-family:var(--font-h);font-size:16px}
.pcard .ps{font-size:12px;color:var(--muted)}
.upg{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:2px dashed #d7d0bd}
.upg:last-child{border-bottom:none}
.upg .nm{flex:1;font-weight:800}
.upg .nm small{display:block;color:var(--muted);font-weight:700}
.lvl{display:flex;gap:3px}
.lvl i{width:12px;height:12px;border:2px solid var(--ink);border-radius:3px;background:#fff}
.lvl i.on{background:var(--orange)}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:36px;height:36px;border-radius:50%;border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.swatch.sel{outline:3px solid var(--orange);outline-offset:2px}
.gl-cat h3{display:flex;justify-content:space-between;align-items:center}
.gl-item{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:2px dashed #e1dac6;cursor:pointer}
.gl-item:last-child{border-bottom:none}
.gl-item .w{flex:1;font-weight:800}
.gl-item .w small{display:block;color:var(--muted);font-weight:700}
.gl-item.locked{opacity:.4}
.mini-m{width:60px;height:8px;border:2px solid var(--ink);border-radius:5px;overflow:hidden;background:#fff}
.mini-m i{display:block;height:100%;background:var(--green)}
.result{text-align:center;padding-top:calc(24px + var(--safe-t))}
.result h1{font-family:var(--font-h);font-size:40px;margin:6px 0;color:#fff;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink)}
.result .big-stars{font-size:54px;color:#ffc61a;-webkit-text-stroke:2px var(--ink);letter-spacing:6px}
.result .big-stars .off{color:#e7e2d3}
.kv{display:flex;justify-content:space-between;font-weight:800;padding:5px 0;border-bottom:2px dashed #e1dac6}
.kv:last-child{border-bottom:none}
.result .btns{display:flex;flex-direction:column;gap:10px;max-width:380px;margin:16px auto 0}
.crash-art{width:200px;height:140px;margin:0 auto;display:block}

@media (min-width:700px){
  .bubble{font-size:18px}
  #co-avatar{width:72px;height:72px}
  .co-opts{margin-left:80px}
  .co-opts .btn{font-size:17px}
}
@media (max-height:460px){
  .bubble{font-size:14px;padding:5px 9px}
  #co-avatar{width:44px;height:44px}
  .co-opts{margin-left:52px;gap:6px}
  .co-opts .btn{min-height:36px;font-size:14px;padding:4px 6px}
  .tile{padding:3px 7px;font-size:13px}
  .menu-inner{justify-content:flex-start}
  .logo{font-size:40px}
}