@font-face{font-family:'Oxanium';src:url(fonts/oxanium.woff) format('woff');font-weight:200 800;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url(fonts/barlow-400.woff) format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url(fonts/barlow-500.woff) format('woff');font-weight:500;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url(fonts/barlow-600.woff) format('woff');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url(fonts/barlow-700.woff) format('woff');font-weight:700;font-display:swap}
@font-face{font-family:'Share Tech Mono';src:url(fonts/sharetechmono.woff) format('woff');font-weight:400;font-display:swap}

/* Layout : colonne téléphone. Barre de ressources + objectif en haut, trois vues empilées (Planète, Vaisseau, Exploration), barre d'onglets en bas. Univers unique sombre (espace), pas de thème clair. */
:root{
  --void:#05070d; --hull:#0f1522; --hull2:#172034; --plate:#212c43; --line:#2f3d5a;
  --ink:#e2e8f3; --dim:#8a96ae; --faint:#56627c;
  --amber:#f2a43a; --amber2:#ffd089; --cyan:#62d6e8; --red:#ff5b4e; --green:#7fdc95; --violet:#b892ff; --he:#ff8a5c; --steel:#c3cbd9;
  --f-disp:'Oxanium','Arial Narrow',system-ui,sans-serif;
  --f-body:'Barlow Semi Condensed','Arial Narrow',system-ui,sans-serif;
  --f-mono:'Share Tech Mono',ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--void);color:var(--ink);font:500 15px/1.35 var(--f-body);overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
button:focus-visible{outline:2px solid var(--amber2);outline-offset:2px}
button:disabled{cursor:default}
.ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px;flex:none}
#app{position:relative;height:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;overflow:hidden;overflow:clip;background:var(--void)}
@media (min-width:600px) and (min-height:560px){
 body{display:flex;align-items:center;justify-content:center;background:#020308}
 body::before{content:'';position:fixed;inset:-40px;background:var(--deskbg,none) center/cover no-repeat;filter:blur(24px) brightness(.62) saturate(1.3);z-index:-1}
 body::after{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at center,#05070d00 30%,#020308d9 100%);z-index:-1;pointer-events:none}
 #app{width:430px;max-width:430px;height:min(calc(100% - 48px),940px);margin:0;border-radius:30px;border:1px solid #ffffff22;box-shadow:0 0 0 9px #0b1120,0 0 0 10px #ffffff18,0 30px 90px #000c,0 0 120px #f2a43a14}
}
#bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}

/* barre ressources */
#top{position:relative;z-index:6;display:flex;align-items:center;gap:5px;padding:8px 12px 6px}
.res{flex:1;min-width:0;display:flex;align-items:center;gap:4px;padding:5px 6px;border-radius:6px;background:#0b1120cc;border:1px solid #ffffff12;font:15px var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.res .ic{width:15px;height:15px}
.res span{overflow:hidden;text-overflow:ellipsis}
.res.bump{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.08);border-color:var(--amber)}}
.r-m{color:var(--steel)}.r-c{color:var(--cyan)}.r-h{color:var(--he)}.r-x{color:var(--violet)}
#gear{width:32px;height:32px;display:grid;place-items:center;border-radius:7px;color:var(--dim);flex:none}
#gear .ic{width:20px;height:20px}

/* objectif */
#obj{position:relative;z-index:6;margin:0 12px 4px;display:flex;gap:9px;align-items:stretch;padding:6px 10px 6px 7px;border-radius:6px;background:#1a1408e6;border:1px solid #f2a43a3d;font-size:14px;line-height:1.25;text-align:left;width:calc(100% - 24px)}
#obj::before{content:'';width:5px;flex:none;border-radius:2px;background:repeating-linear-gradient(-45deg,var(--amber) 0 4px,transparent 4px 8px)}
#obj .ot{flex:1;min-width:0}
#obj b{font:700 10.5px var(--f-disp);letter-spacing:.14em;color:var(--amber);text-transform:uppercase;display:block;margin-bottom:1px}
#obj .rw{display:flex;gap:6px;align-items:center;font:12px var(--f-mono);color:var(--dim);white-space:nowrap}
#obj.done{animation:objdone .8s}
@keyframes objdone{30%{background:#3a2a0e;border-color:var(--amber)}}
#obj[hidden]{display:none!important}

main{position:relative;z-index:2;flex:1;min-height:0}
.view{position:absolute;inset:0;overflow:hidden}
.vhead{position:absolute;left:12px;right:12px;top:6px;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none}
.vhead>*{pointer-events:auto}
.vt b{display:block;font:800 20px var(--f-disp);letter-spacing:.06em}
.vt span{font-size:13px;color:var(--dim)}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:8px 14px;border-radius:8px;font:700 14px var(--f-disp);letter-spacing:.05em;text-transform:uppercase;background:var(--amber);color:#1b1205;box-shadow:inset 0 -3px 0 #0000002e,0 0 18px #f2a43a33}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:#2a3246;color:#6c7792;box-shadow:none}
.btn.ghost{background:#ffffff0a;color:var(--ink);border:1px solid #ffffff1c;box-shadow:none}
.btn.cyan{background:var(--cyan);color:#04161a;box-shadow:inset 0 -3px 0 #0000002e,0 0 18px #62d6e833}
.btn.red{background:#3a1512;color:#ffb3ab;border:1px solid #ff5b4e55;box-shadow:none}
.btn.sm{min-height:34px;padding:6px 10px;font-size:12px}
.btn.wide{width:100%}
.btn .ic{width:17px;height:17px}

/* nav */
nav{position:relative;z-index:6;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px 12px 8px;background:linear-gradient(#05070d00,#05070df2 30%)}
nav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 0 6px;border-radius:9px;font:700 11.5px var(--f-disp);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border:1px solid #ffffff10;background:#0b1120cc}
nav button .ic{width:22px;height:22px}
nav button.on{color:var(--amber2);background:#2a1d08;border-color:#f2a43a66}
nav button:disabled{opacity:.32}
nav button .dot{position:absolute;top:5px;right:calc(50% - 22px);width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber)}

/* planète */
#pc{position:absolute;inset:0;width:100%;height:100%}
#plots{position:absolute;inset:0}
.plot{position:absolute;width:78px;height:104px;margin-left:-39px;margin-top:-104px;transform-origin:50% 100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.plot .pad{width:52px;height:16px;border-radius:50%;border:2px dashed #ffffff55;margin-bottom:-2px;display:grid;place-items:center}
.plot .plus{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;margin-bottom:8px;background:#ffffff10;border:1px solid #ffffff30;color:var(--ink);font:700 20px var(--f-disp)}
.plot.hint .plus{background:var(--amber);color:#1b1205;border-color:var(--amber2);animation:hint 1.2s infinite}
.plot.hint .pad{border-color:var(--amber)}
@keyframes hint{50%{box-shadow:0 0 0 10px #f2a43a00,0 0 22px var(--amber)}}
.bd{width:74px;height:74px;filter:drop-shadow(0 5px 6px #000c)}
.plot .lv{position:absolute;bottom:-18px;font:12px var(--f-mono);color:var(--ink);background:#05070dcc;border:1px solid #ffffff22;border-radius:4px;padding:0 5px}
.bub{position:absolute;top:-8px;display:flex;align-items:center;gap:3px;padding:3px 8px 3px 5px;border-radius:14px;background:#0b1120f0;border:1.5px solid currentColor;font:14px var(--f-mono);animation:bob 1.8s ease-in-out infinite;box-shadow:0 0 14px #0009}
.bub .ic{width:15px;height:15px}
.bub.full{background:currentColor}
.bub.full span,.bub.full .ic{color:#05070d}
@keyframes bob{50%{transform:translateY(-4px)}}
.ring{position:absolute;top:2px;width:40px;height:40px}
.ring circle{fill:none;stroke-width:4}
.b-base{fill:#283044}.b-metal{fill:#8d98ad}.b-metal2{fill:#5b6880}.b-dark{fill:#1a2030}
.b-line{fill:none;stroke:#1a2030;stroke-width:2}.b-line2{fill:none;stroke:var(--amber);stroke-width:2}
.b-amb{fill:var(--amber2)}.b-glass{fill:#62d6e833;stroke:#9fd9ec;stroke-width:1.5}.b-puff{fill:#cfe7f2}.b-water{fill:#3d7fd6}.b-water2{fill:#8cc4ff}.b-leaf{fill:#4fae62}.b-leaf2{fill:none;stroke:#9be3a8;stroke-width:2}.b-cry{fill:#45b8cf}.b-cry2{fill:#b5f0f8}.b-he{fill:#d4704c}.b-he2{fill:#f1a07c}.b-cy{fill:var(--cyan)}
.blink{animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
#terra{position:absolute;left:12px;right:12px;top:58px;z-index:3;display:flex;flex-direction:column;gap:6px;padding:7px 10px;border-radius:8px;background:#0b1120d9;border:1px solid #ffffff14;text-align:left}
#terra .tr1{display:flex;justify-content:space-between;align-items:center;gap:8px}
#terra .tr1 b{font:700 11.5px var(--f-disp);letter-spacing:.08em;text-transform:uppercase;color:var(--green);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#terra .tp{display:inline-flex;align-items:center;gap:4px;font:13px var(--f-mono);color:var(--amber2)}
#terra .tp .ic{width:15px;height:15px}
#terra .tr2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#terra .g{display:flex;align-items:center;gap:5px}
#terra .g .ic{width:15px;height:15px}
#terra .g .bar{flex:1;height:6px}
#consbar{position:absolute;left:12px;right:12px;bottom:10px;z-index:3;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;background:#0b1120e6;border:1px solid #ffffff14;font-size:14px}
#consbar .bar{flex:1}
#consbar[hidden]{display:none!important}

/* barres */
.bar{position:relative;height:9px;border-radius:2px;background:#ffffff12;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--amber);border-radius:2px}
.bar.cy i{background:var(--cyan)}.bar.gr i{background:var(--green)}.bar.rd i{background:var(--red)}
.bar.seg::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(var(--sw) - 2px),#05070d calc(var(--sw) - 2px) var(--sw))}

/* vaisseau */
#v-ship{overflow-y:auto}
.shipwrap{padding:12px 12px 20px;display:flex;flex-direction:column;gap:14px}
#stage{position:relative;margin:0 auto}
#stage svg.hullsvg{position:absolute;inset:0;overflow:visible}
.cell{position:absolute;border-radius:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:600 10.5px var(--f-body);line-height:1.05;text-align:center;color:var(--ink);padding:3px;overflow:hidden}
.cell .ic{width:24px;height:24px}
.cell.free{border:1.5px dashed #ffffff3a;color:var(--dim);background:#ffffff06}
.cell.free b{font:700 20px var(--f-disp)}
.cell.dmg{background:repeating-linear-gradient(-45deg,#2b1d0c 0 7px,#171209 7px 14px);border:1.5px solid #f2a43a66;color:var(--amber2)}
.cell.void{border:1px dashed #62d6e833;color:#62d6e855}
.cell.void .ic{width:16px;height:16px}
.cell.mod{border:1px solid #ffffff22;box-shadow:inset 0 0 0 1px #00000055,inset 0 -10px 18px #00000044}
.cell .pips{display:flex;gap:2px}
.cell .pips i{width:7px;height:4px;border-radius:1px;background:#ffffff30}
.cell .pips i.on{background:currentColor}
.cell.hint{animation:hintc 1.2s infinite}
@keyframes hintc{50%{box-shadow:0 0 0 2px var(--amber),0 0 20px var(--amber)}}
.t-reac{background:#2d2610;color:#ffd36a}.t-pilot{background:#13263a;color:#8cc8ff}.t-eng{background:#2c1a12;color:#ffa36b}
.t-wpn{background:#2f1414;color:#ff8b7d}.t-shld{background:#0f2a30;color:var(--cyan)}.t-cargo{background:#1d2130;color:var(--steel)}
.t-mis{background:#2d1424;color:#ff8fc9}.t-drone{background:#152a1a;color:var(--green)}.t-bay{background:#24203a;color:#c3b4ff}
.panel{background:#0b1120e6;border:1px solid #ffffff14;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}
.prow{display:grid;grid-template-columns:72px 1fr auto;gap:10px;align-items:center;font-size:14px}
.prow>span{color:var(--dim);font-size:13px}
.prow>b{font:15px var(--f-mono);font-variant-numeric:tabular-nums}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat{padding:7px 9px;border-radius:7px;background:#ffffff07;display:flex;flex-direction:column}
.stat span{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.stat b{font:16px var(--f-mono)}
.tip{margin:0;font-size:13.5px;color:var(--dim);padding:0 4px}
.tip b{color:var(--amber2);font-weight:600}
.away{padding:10px 12px;border-radius:8px;background:#0f2a30cc;border:1px solid #62d6e844;font-size:14px;color:#bdeff7}

/* sheet */
#scrim{position:absolute;inset:0;z-index:19;background:#000a;opacity:0;pointer-events:none;transition:opacity .25s}
#scrim.on{opacity:1;pointer-events:auto}
#sheet{position:absolute;left:0;right:0;bottom:0;z-index:20;max-height:82%;display:flex;flex-direction:column;background:var(--hull);border-top:1px solid var(--line);border-radius:16px 16px 0 0;transform:translateY(calc(100% + 60px));visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s .28s;box-shadow:0 -12px 40px #000c}
#sheet.open{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.shx{position:absolute;top:8px;right:10px;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--dim);background:#ffffff0a;z-index:2}
.grab{width:42px;height:4px;border-radius:2px;background:#ffffff2a;margin:8px auto 0;flex:none}
#sheetc{overflow-y:auto;padding:6px 16px 18px;display:flex;flex-direction:column;gap:12px}
.sh-h{display:flex;align-items:center;gap:12px;padding-right:38px}
.sh-h .big{width:58px;height:58px;flex:none;border-radius:10px;display:grid;place-items:center}
.sh-h .big .ic{width:32px;height:32px}
.sh-h .big svg.bd{width:62px;height:62px}
.sh-h h3{margin:0;font:800 19px var(--f-disp);letter-spacing:.03em;text-wrap:balance}
.sh-h p{margin:2px 0 0;color:var(--dim);font-size:13px}
.desc{margin:0;color:#c5cddd;font-size:14.5px}
.kv{display:flex;flex-direction:column;gap:5px;padding:9px 11px;border-radius:8px;background:#ffffff07}
.kv div{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.kv div span{color:var(--dim)}
.kv div b{font:14.5px var(--f-mono);text-align:right}
.kv .up{color:var(--green)}
.costs{display:flex;flex-wrap:wrap;gap:6px}
.cost{display:inline-flex;align-items:center;gap:3px;padding:3px 7px;border-radius:5px;background:#ffffff0b;font:14px var(--f-mono)}
.cost .ic{width:14px;height:14px}
.cost.no{background:#ff5b4e22;color:#ff9a90}
.why{font-size:13px;color:#ffb27a}
.row{display:flex;gap:8px;align-items:center}
.row .btn{flex:1}
.list{display:flex;flex-direction:column;gap:8px}
.li{display:grid;grid-template-columns:46px 1fr;gap:10px;padding:10px;border-radius:9px;background:#ffffff07;border:1px solid #ffffff10;align-items:start}
.li .lic{width:46px;height:46px;border-radius:8px;display:grid;place-items:center}
.li .lic .ic{width:26px;height:26px}
.li .lic svg.bd{width:50px;height:50px}
.li h4{margin:0;font:700 15px var(--f-disp)}
.li p{margin:2px 0 6px;font-size:13px;color:var(--dim)}
.li .row{margin-top:6px}
.li.lock{opacity:.55}
.sep{height:1px;background:#ffffff12}

/* modal */
#modal{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:18px;background:#000b;backdrop-filter:blur(2px)}
.mbox{width:100%;max-width:400px;max-height:100%;overflow:auto;background:linear-gradient(#141c2d,#0d1320);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 60px #000;animation:pop .25s}
@keyframes pop{from{transform:scale(.94);opacity:0}}
.mbox h2{margin:0;font:800 21px var(--f-disp);letter-spacing:.03em;text-wrap:balance}
.mbox .eyebrow{font:700 11px var(--f-disp);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.mbox p{margin:0;font-size:15.5px;color:#cdd5e4;line-height:1.45}
.mbox .ch{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.mbox .btn{text-transform:none;font:700 15px var(--f-body);letter-spacing:0;justify-content:flex-start;text-align:left}
.loot{display:flex;flex-wrap:wrap;gap:8px}
.loot .cost{font-size:16px;padding:5px 9px}
.tog{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px;border-radius:8px;background:#ffffff08;font-size:15px}
.tog small{display:block;color:var(--dim);font-size:12.5px}
.sw{width:46px;height:26px;border-radius:13px;background:#2a3246;position:relative;flex:none;transition:background .2s}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#cfd6e3;transition:transform .2s}
.sw.on{background:var(--amber)}.sw.on::after{transform:translateX(20px)}

/* toast */
#toast{position:absolute;left:12px;right:12px;top:128px;z-index:40;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.tst{padding:8px 13px;border-radius:8px;background:#0b1120f2;border:1px solid #ffffff22;font-size:14px;box-shadow:0 6px 20px #000a;animation:tin .25s,tout .35s 2.4s forwards;display:flex;align-items:center;gap:6px}
.tst.ok{border-color:#7fdc9566;color:#c9f5d4}.tst.bad{border-color:#ff5b4e66;color:#ffc2bb}.tst.amb{border-color:#f2a43a77;color:var(--amber2)}
@keyframes tin{from{transform:translateY(-8px);opacity:0}}
@keyframes tout{to{opacity:0;transform:translateY(-6px)}}

/* exploration */
#v-expe{overflow-y:auto}
.exwrap{padding:12px 12px 20px;display:flex;flex-direction:column;gap:12px}
.req{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.req div{display:flex;align-items:center;gap:6px;font-size:13.5px;padding:6px 8px;border-radius:6px;background:#ffffff07}
.req .ok{color:var(--green)}.req .ko{color:#ff9a90}
.req .ic{width:15px;height:15px}
.sec{position:relative;padding:14px;border-radius:12px;border:1px solid #ffffff16;overflow:hidden;display:flex;flex-direction:column;gap:8px}
.sec::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.9}
.sec.s1::before{background:radial-gradient(120% 90% at 100% 0%,#4a3a22,transparent 60%),#0d1220}
.sec.s2::before{background:radial-gradient(120% 90% at 100% 0%,#203f5a,transparent 60%),#0d1220}
.sec.s3::before{background:radial-gradient(120% 90% at 100% 0%,#3b2058,transparent 60%),#0d1220}
.sec h3{margin:0;font:800 19px var(--f-disp)}
.sec p{margin:0;font-size:14px;color:#c0c9da}
.sec .meta{display:flex;flex-wrap:wrap;gap:6px;font:13px var(--f-mono);color:var(--dim)}
.sec .meta span{padding:2px 7px;border-radius:4px;background:#ffffff0c}
.sec.lock{opacity:.6}
.badge{position:absolute;top:12px;right:12px;font:700 10px var(--f-disp);letter-spacing:.14em;padding:3px 7px;border-radius:4px;background:#7fdc9522;color:var(--green);border:1px solid #7fdc9555}
.cbline{display:flex;align-items:center;gap:8px;font-size:13px}
.cbline .bar{flex:1;height:11px}
.cbline .num{font:13px var(--f-mono);min-width:44px;text-align:right}
.shp{display:flex;gap:3px}
.shp i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--cyan);display:block}
.shp i.on{background:var(--cyan)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:5px;background:#0b1120e6;border:1px solid #ffffff14;font:13px var(--f-mono)}
.chip .ic{width:14px;height:14px}
#shwrap{position:absolute;inset:0}
#shc{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.shtop{position:absolute;left:10px;right:10px;top:6px;display:flex;gap:8px;align-items:center;z-index:2;pointer-events:none}
.shtop>*{pointer-events:auto}
.shtop .col{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;pointer-events:none}
.shpb{width:40px;padding:0}
.shloot{position:absolute;left:10px;right:10px;top:56px;display:flex;gap:5px;z-index:2;pointer-events:none;flex-wrap:wrap}
.shbot{position:absolute;left:10px;right:10px;bottom:8px;display:flex;flex-direction:column;gap:7px;z-index:2;pointer-events:none}
.skills{display:flex;gap:8px;justify-content:flex-end}
.sk{pointer-events:auto;position:relative;width:66px;height:60px;border-radius:12px;background:#0b1120e0;border:1px solid #ffffff22;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font:700 10.5px var(--f-disp);letter-spacing:.04em;overflow:hidden;color:var(--dim)}
.sk .ic{width:21px;height:21px;position:relative}
.sk span,.sk small{position:relative}
.sk small{font:10px var(--f-mono);opacity:.8}
.sk .fill{position:absolute;left:0;right:0;bottom:0;height:0;background:#f2a43a24}
.sk.ready{border-color:var(--amber);color:var(--amber2)}
.ovl{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;padding:18px;background:#05070dc4}
/* splash */
#spl{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden}
#spl .lg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000;transition:opacity .7s;z-index:2}
#spl .lg img{width:min(60%,250px);height:auto;opacity:0;animation:spIn 1s ease .15s forwards}
#spl .tt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18% 20px 14%;background:radial-gradient(90% 60% at 50% 45%,#05070d00,#05070dcc)}
#spl h1{margin:0;text-align:center;font:800 clamp(38px,13vmin,58px)/.95 var(--f-disp);letter-spacing:.04em;color:var(--ink);text-shadow:0 0 30px #f2a43a55;opacity:0;animation:spIn 1.2s ease .2s forwards}
#spl h1 em{font-style:normal;color:var(--amber)}
#spl .sub{font:600 13px var(--f-disp);letter-spacing:.22em;text-transform:uppercase;color:var(--dim);text-align:center;margin-top:12px;opacity:0;animation:spIn 1.2s ease .6s forwards}
#spl .go{font:600 15px var(--f-disp);letter-spacing:.1em;color:var(--amber2);opacity:0;animation:spIn 1s ease 1.1s forwards,blinkS 2.2s ease-in-out 2.2s infinite}
#spl.out{opacity:0;transition:opacity .6s;pointer-events:none}
@keyframes spIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes blinkS{50%{opacity:.35}}
[hidden]{display:none!important}
.flame{animation:fl .11s infinite alternate;transform-box:fill-box;transform-origin:100% 50%}
@keyframes fl{to{transform:scaleX(.7);opacity:.75}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* v0.4 : ressources colons, hangar vertical, formes */
.r-p{color:var(--amber2)}
#hang{position:relative;margin:0 auto;touch-action:manipulation}
#hang svg.hsvg{position:absolute;inset:0;overflow:visible;pointer-events:none}
.hc{position:absolute;padding:0;border-radius:4px;display:block}
.hc>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hc .hi{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;pointer-events:none;font:600 9.5px var(--f-body);line-height:1;text-align:center}
.hc .hi .ic{width:20px;height:20px}
.hc .pips{display:flex;gap:1.5px}
.hc .pips i{width:5px;height:3px;border-radius:1px;background:#ffffff30}
.hc .pips i.on{background:currentColor}
.hc.void{outline:1px dashed #62d6e82e;outline-offset:-3px;color:#62d6e855}
.hc.dmg{background:repeating-linear-gradient(-45deg,#2b1d0c 0 6px,#171209 6px 12px);outline:1px solid #f2a43a55;outline-offset:-2px;color:var(--amber2)}
.hc.hint{animation:hintc 1.2s infinite}
.hc.sel{outline:2px solid var(--amber2);outline-offset:-1px}
.hc.tgt{outline:2px dashed var(--cyan);outline-offset:-2px}
.hc .dir{position:absolute;top:1px;left:50%;width:2px;height:9px;margin-left:-1px;background:currentColor;border-radius:1px;transform-origin:50% 100%;opacity:.9}
.movebar{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;background:#2a1d08;border:1px solid #f2a43a77;color:var(--amber2);font-size:14px}
.movebar .btn{margin-left:auto}
.shapes{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}
.shp-b{height:44px;border-radius:8px;background:#ffffff08;border:1px solid #ffffff16;display:grid;place-items:center;position:relative}
.shp-b svg{width:28px;height:28px}
.shp-b.on{border-color:var(--amber);background:#2a1d08}
.shp-b:disabled{opacity:.3}
.shp-b small{position:absolute;bottom:1px;right:3px;font:9px var(--f-mono);color:var(--dim)}
.cat{font:700 11px var(--f-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-top:4px}
.seg2{display:flex;gap:4px;padding:3px;border-radius:9px;background:#ffffff0a;border:1px solid #ffffff14}
.seg2 button{flex:1;padding:7px 6px;border-radius:7px;font:700 12px var(--f-disp);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.seg2 button.on{background:#2a1d08;color:var(--amber2)}
.warn{padding:9px 11px;border-radius:8px;background:#3a151244;border:1px solid #ff5b4e55;color:#ffc2bb;font-size:13.5px;display:flex;flex-direction:column;gap:3px}
.score{font:800 30px var(--f-disp);color:var(--amber2);letter-spacing:.04em}
.mult{position:absolute;right:12px;top:94px;z-index:2;font:800 20px var(--f-disp);color:var(--amber2);pointer-events:none;text-shadow:0 2px 0 #000}
.lvpick{display:flex;gap:6px}
.lvpick button{flex:1;height:38px;border-radius:7px;background:#ffffff08;border:1px solid #ffffff16;font:700 14px var(--f-mono)}
.lvpick button.on{border-color:var(--amber);color:var(--amber2);background:#2a1d08}
.b-xe{fill:#b892ff}.b-xe2{fill:#f0e2ff}

#toast{top:6px!important}
.tst{padding:7px 12px;font-size:13.5px}
.res.full{border-color:var(--amber);box-shadow:inset 0 0 0 1px #f2a43a55}
.cost.req{background:transparent;border:1px dashed #ffd08966}
.cost.req.no{border-color:#ff5b4e88}
.upb{position:absolute;z-index:2;width:18px;height:18px;border-radius:50%;background:var(--green);color:#06260f;display:grid;place-items:center;box-shadow:0 0 0 2px #05070d,0 0 10px #7fdc9599;pointer-events:none;animation:upb 1.6s ease-in-out infinite}
.upb .ic{width:12px;height:12px;stroke-width:3}
.plot .upb{top:34px;left:-2px}
.hc .upb{top:2px;right:2px;width:15px;height:15px}
.hc .upb .ic{width:10px;height:10px}
@keyframes upb{50%{transform:translateY(-2px)}}
.volr{display:grid;grid-template-columns:110px 1fr 50px;align-items:center;gap:10px;padding:10px;border-radius:8px;background:#ffffff08;font-size:15px}
.volr input{width:100%;accent-color:var(--amber)}
.volr output{font:13px var(--f-mono);color:var(--dim);text-align:right}
#spl h1{text-shadow:0 2px 0 #000,0 0 30px #f2a43a66}
#spl .go{text-shadow:0 2px 6px #000,0 0 2px #000}
/* noms, plans, réserve */
.nmrow{display:flex;align-items:center;gap:4px;min-width:0}
.vhead .vt{min-width:0;flex:0 1 auto}
.vt .nmrow b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.edb{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--dim);background:#ffffff08;border:1px solid #ffffff14}
.edb .ic{width:15px;height:15px}
.edb:hover,.edb:active{color:var(--amber2);border-color:#f2a43a66}
.shn{display:flex;align-items:center;gap:8px}
.shn-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.1}
.shn-t small{font:700 10.5px var(--f-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.shn-t b{font:800 19px var(--f-disp);letter-spacing:.05em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shn .btn{position:relative}
.nb{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--cyan);color:#04161a;font:700 11px var(--f-mono);display:grid;place-items:center}
.rn{display:flex;flex-direction:column;gap:4px;margin:4px 0 2px}
.rn input{width:100%;padding:11px 12px;border-radius:9px;background:#05070d;border:1px solid #f2a43a77;color:var(--txt,#fff);font:700 19px var(--f-disp);letter-spacing:.05em;outline:none}
.rn input:focus{border-color:var(--amber2);box-shadow:0 0 0 3px #f2a43a26}
.rn small{align-self:flex-end;font:12px var(--f-mono);color:var(--dim)}
.hc.gh{outline:1px dashed #62d6e855;outline-offset:-3px}
.hc.gh .hi{opacity:.55}
.hc.gh>svg{opacity:.7}
.resv{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--cyan);margin:2px 0 4px}
.resv .ic{width:14px;height:14px}
.plan{display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px;background:#ffffff06;border:1px solid #ffffff12}
.plan>div:last-child{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.plan h4{font:700 16px var(--f-disp);letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan p{font-size:13px;color:var(--dim)}
.plan .row{gap:6px}
.plan.lock{opacity:.55}
.plan svg.mini{flex:none;background:#05070d;border-radius:7px;border:1px solid #ffffff10}
.mini.ph{flex:none;width:64px;height:77px;border-radius:7px;border:1px dashed #ffffff22;display:grid;place-items:center;color:var(--dim)}
.pst{display:flex;gap:8px;flex-wrap:wrap;font:12px var(--f-mono)!important}
.tagx{font:700 10px var(--f-disp);letter-spacing:.1em;text-transform:uppercase;color:var(--violet,#b892ff);border:1px solid currentColor;border-radius:4px;padding:1px 4px;vertical-align:2px}
.li.rsv .loot{margin:0}
.li.rsv .loot .cost{font-size:13px;padding:3px 7px}
.plan h4,.plan p{margin:0}
#colAll{flex:none;white-space:nowrap}
#v-planet .vt>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rpick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:2px 0 8px;max-width:300px}
.lvc{height:38px;border-radius:8px;background:#0f2a30;border:1px solid #62d6e877;color:var(--cyan);font:700 16px var(--f-mono);display:flex;align-items:center;justify-content:center;gap:2px}
.lvc small{font:10px var(--f-mono);opacity:.8}
.lvc:active{background:#62d6e8;color:#04161a}
.lvc:disabled{opacity:.35}
input,textarea{user-select:text;-webkit-user-select:text}
#top{padding-top:calc(8px + env(safe-area-inset-top,0px))}
nav{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
#rot{display:none;position:fixed;inset:0;z-index:90;background:#05070df5;color:var(--amber2);flex-direction:column;align-items:center;justify-content:center;gap:14px;font:700 16px var(--f-disp);letter-spacing:.06em;text-align:center;padding:20px}
#rot svg{width:54px;height:54px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;animation:rot 2.4s ease-in-out infinite}
@keyframes rot{0%,30%{transform:rotate(-90deg)}60%,100%{transform:rotate(0)}}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){#rot{display:flex}}
ul.tips{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:5px;font-size:14.5px;color:#c5cddd}
#upd{position:absolute;left:12px;right:12px;bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;align-items:center;gap:8px;padding:9px 10px 9px 14px;border-radius:10px;background:#0f2a30f2;border:1px solid #62d6e877;color:var(--cyan);font-size:14px;box-shadow:0 10px 30px #000a}
#upd span{flex:1}
#upd .x{width:30px;height:30px;font-size:20px;color:var(--dim)}
.hc.far{opacity:.45}
.btn.red-t{color:#ff9a90;border-color:#ff5b4e55}
.recs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.recs>div{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:8px;background:#ffffff08;border:1px solid #ffffff12}
.recs span{font:700 10.5px var(--f-disp);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.recs b{font:800 20px var(--f-disp);color:var(--amber2)}
.recs small{font:12px var(--f-mono);color:var(--dim)}
/* 1.0.6 : zones tactiles d'au moins 44 px (pouce) sans changer la hauteur des barres */
.btn,.btn.sm{min-height:44px}
.shpb{width:44px}
#gear{width:44px;height:44px;margin:-6px -6px -6px 0}
.edb,.res{position:relative}
.res{overflow:visible}
.res:after{content:'';position:absolute;left:0;right:0;top:-9px;bottom:-6px}
.edb:after,.shx:after{content:'';position:absolute;inset:-7px}
.shx:after{inset:-5px}
.seg2 button{min-height:44px}
.volr input{height:44px;margin:0}
#sheetc details>summary{padding:12px 0}
#upd .x{width:44px;height:44px;margin:-7px -6px -7px 0}
/* 1.0.6 : focus clavier posé sur la fenêtre ou la feuille elle-même, sans cadre */
#sheet:focus,#mbox:focus{outline:none}
/* 1.0.7 : voile des fenêtres plus léger, le décor reste visible derrière (la fenêtre elle-même est opaque) */
#modal{background:#05070d8c}
html:not(.kbd) button:focus-visible{outline:none}
/* 1.0.7 : textes courants des panneaux à 15 px (comme le corps du jeu) au lieu de 13 */
.vt span,.sh-h p,.why,.li p,.tip,.req div,.warn,.tst,.plan p{font-size:15px}