/* Space Survival — interface « HUD de vaisseau » : panneaux bleu nuit translucides, encre blanc cassé,
   action cyan, alertes/bâtiments orange sécurité, récompenses ambre. Coins chanfreinés (var(--cut)), bordures 1 px,
   coin-brackets sur les cartes importantes, lignes de balayage discrètes sur les grands panneaux, barres segmentées.
   Tout ce qui flotte sur la scène 3D (étiquettes, monnaies) est sombre à bordure cyan pour rester lisible sur le régolithe.
   Aucun backdrop-filter (coûteux sur mobile). */
:root{
  color-scheme:dark;
  --bg1:#0a1220; --bg2:#101a2c; --glass:rgba(10,18,32,.86); --glass2:rgba(16,26,44,.92); --line:rgba(79,216,255,.38); --line2:rgba(79,216,255,.6);
  --ink:#e9f2ff; --ink2:#8fb0cc; --ink3:#5f7f9c; --dark:rgba(8,14,26,.88); --dark2:rgba(8,14,26,.94); --onv:#06203a;
  --v1:#4fd8ff; --v2:#2aa7e8; --v3:#1769c9; --vsoft:rgba(79,216,255,.1); --vline:rgba(79,216,255,.35);
  --gold1:#ffc24a; --gold2:#ff9f1a; --mint:#39d98a; --mint2:#6ff0b0; --coral:#ff5c6c; --sky:#4aa8ff; --ember:#ff8a2e; --ember2:#ffb067;
  --r0:#8f9bb8; --r1:#4d8ff0; --r2:#9a6cf0; --r3:#f0a52c;
  --shadow:0 8px 24px rgba(0,0,0,.38),0 1px 2px rgba(0,0,0,.3);
  --cs:10px;
  --cut:polygon(0 0,calc(100% - var(--cs)) 0,100% var(--cs),100% 100%,var(--cs) 100%,0 calc(100% - var(--cs)));
  --diag:linear-gradient(45deg,transparent calc(50% - 1px),var(--lc,var(--line)) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px));
  --scan:repeating-linear-gradient(0deg,rgba(79,216,255,.04) 0 1px,transparent 1px 3px);
  --seg:repeating-linear-gradient(90deg,transparent 0 9px,var(--bg1) 9px 11px);
  --display:'Rajdhani','Avenir Next Condensed','Segoe UI',system-ui,sans-serif;
  --body:'Exo 2','Segoe UI',system-ui,sans-serif;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#070d18;color:var(--ink);font-family:var(--body);font-weight:600;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
button:focus-visible{outline:2px solid var(--v1);outline-offset:2px}
svg{display:block}
.num{font-variant-numeric:tabular-nums}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}

/* panneaux chanfreinés : le chanfrein (haut droit, bas gauche) est dessiné par clip-path, sa bordure par deux petits dégradés */
.card,.li,.tnode,.tile,.quest,.pbox,#story .sbox .spanel,.evbanner,.hero,.btn{clip-path:var(--cut);background:var(--diag) 0 100%/calc(var(--cs) + 1px) calc(var(--cs) + 1px) no-repeat,var(--diag) 100% 0/calc(var(--cs) + 1px) calc(var(--cs) + 1px) no-repeat,var(--pbg,var(--glass))}
/* coin-brackets (haut gauche, bas droit) sur les cartes importantes */
.card,.pbox,#story .sbox,.evbanner{position:relative}
.card::before,.card::after,.pbox::before,.pbox::after,#story .sbox::before,#story .sbox::after,.evbanner::before,.evbanner::after{content:'';position:absolute;width:14px;height:14px;pointer-events:none;z-index:1}
.card::before,.pbox::before,#story .sbox::before,.evbanner::before{left:0;top:0;border-top:2px solid var(--bc,var(--v1));border-left:2px solid var(--bc,var(--v1))}
.card::after,.pbox::after,#story .sbox::after,.evbanner::after{right:0;bottom:0;border-bottom:2px solid var(--bc,var(--v1));border-right:2px solid var(--bc,var(--v1))}

/* ------------------------------------------------ étiquettes 3D (sombre, bordure cyan) */
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.lbl{position:absolute;left:0;top:0;will-change:transform;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.lv{font-family:var(--display);font-weight:700;font-size:13px;line-height:1;min-width:24px;text-align:center;padding:4px 7px;border-radius:4px;background:var(--dark2);color:var(--ink);border:1px solid var(--line2);box-shadow:0 3px 10px rgba(0,0,0,.35)}
.lv .ln{font-weight:600;font-size:12px;margin-right:6px;opacity:.95;white-space:nowrap;letter-spacing:.02em}
.lv.hover{transform:scale(1.12);box-shadow:0 0 0 2px rgba(79,216,255,.7),0 3px 10px rgba(0,0,0,.35)}
.lv{display:inline-flex;align-items:center;white-space:nowrap}
.lv.up{background:var(--mint);color:#032416;border-color:var(--mint2)}
.lv.up::after{content:'';display:inline-block;margin-left:4px;border:4px solid transparent;border-bottom:6px solid #032416;border-top:0;vertical-align:1px}
.sign{pointer-events:auto;min-height:40px;justify-content:center;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 12px 7px;border-radius:6px;background:var(--dark);border:1.5px dashed rgba(79,216,255,.6);color:var(--ink);font-size:11px;font-weight:600;text-align:center;line-height:1.2;max-width:128px;}
.sign b{font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:.02em}
.sign.lock{border-style:solid;border-color:rgba(143,176,204,.3);color:rgba(233,242,255,.6)}
.sign.new{border-style:solid;border-color:var(--v1);background:var(--v1);color:var(--onv);box-shadow:0 0 0 4px rgba(79,216,255,.3);animation:pulse 1.5s ease-in-out infinite}
.bub{pointer-events:auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#17304f,#0a1220 70%);border:1.5px solid var(--line2);box-shadow:0 5px 14px rgba(0,0,0,.4),0 0 12px rgba(79,216,255,.25);animation:bob 1.8s ease-in-out infinite}
.bub svg{width:28px;height:28px}
.tmr{display:flex;align-items:center;gap:5px;padding:4px 9px 4px 5px;border-radius:4px;background:var(--dark2);border:1px solid var(--vline);font-family:var(--display);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);}
.tmr svg{width:16px;height:16px}
.build{pointer-events:auto;display:flex;align-items:center;gap:7px;padding:5px;border-radius:6px;background:var(--dark2);border:1px solid var(--line2);box-shadow:0 6px 16px rgba(0,0,0,.4);}
.build .bi{width:34px;height:34px;border-radius:4px;display:grid;place-items:center;background:var(--ember);flex:none}
.build .bi svg{width:19px;height:19px;animation:hammer 1s ease-in-out infinite;transform-origin:30% 80%}
.build .bi .gl *{fill:#1a0a00}
.build .bc{display:grid;gap:4px}
.build .bc > b{font-family:var(--display);font-weight:700;font-size:17px;line-height:1;color:var(--ink);letter-spacing:.02em}
.build .bc i{display:block;position:relative;width:80px;height:5px;border-radius:1px;background:rgba(79,216,255,.15);overflow:hidden}
.build .bc i b{display:block;height:100%;background:var(--v1);transition:width .9s linear}
.build .bc i::after{content:'';position:absolute;inset:0;background:var(--seg);pointer-events:none}
.build button{height:38px;min-width:40px;padding:0 11px;border-radius:4px;display:flex;align-items:center;gap:3px;background:var(--v1);font-family:var(--display);font-weight:700;font-size:13px;color:var(--onv)}
.build button svg{width:15px;height:15px}
.build button .gl *{fill:var(--onv)}
.build.free button{background:var(--mint);animation:pulse 1.2s infinite}
#labels{--ls:1}
.site{font-family:var(--display);font-weight:700;font-size:calc(11px * var(--ls));letter-spacing:.02em;padding:3px 8px;border-radius:3px;background:rgba(8,14,26,.8);color:var(--ink);border:1px solid rgba(255,92,108,.7);white-space:nowrap;}
.site.node{border-color:rgba(95,224,184,.7)} .site.ruin{border-color:rgba(255,194,74,.7)} .site.boss{border-color:var(--v1);font-size:calc(13px * var(--ls))}
.site small{font-family:var(--body);font-weight:600;font-size:calc(9.5px * var(--ls));opacity:.75;margin-left:4px}
/* carte du Monde : interface allégée (plus de colonne gauche ni de files de chantier) */
#h-queues{display:grid;gap:6px;justify-items:end}
body.world .side.l,body.world #h-queues,body.world #h-weather{display:none!important}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(79,216,255,0)}}
@keyframes hammer{50%{transform:rotate(-28deg)}}
#frost{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity 1.5s;box-shadow:inset 0 0 160px 60px rgba(96,60,150,.85);background:radial-gradient(ellipse at center,transparent 50%,rgba(120,80,170,.4))}
#frost.blizzard{animation:ion 2.6s steps(1) infinite}
@keyframes ion{0%,100%{filter:brightness(1)}7%{filter:brightness(1.6)}9%{filter:brightness(1)}53%{filter:brightness(1.4)}55%{filter:brightness(1)}}
#frost.cold{opacity:.4} #frost.blizzard{opacity:.6}

/* ------------------------------------------------ démarrage */
#boot{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:18px;background:linear-gradient(rgba(79,216,255,.035) 1px,transparent 1px) 0 0/100% 32px,linear-gradient(90deg,rgba(79,216,255,.035) 1px,transparent 1px) 0 0/32px 100%,radial-gradient(circle at 50% 30%,#1a3356,#0b1730 55%,#050a16);transition:opacity .6s;z-index:50}
#boot::before{content:'';position:absolute;inset:0;background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff 60%,transparent),radial-gradient(1px 1px at 72% 28%,#dff5ff 60%,transparent),radial-gradient(1.6px 1.6px at 36% 64%,#fff 60%,transparent),radial-gradient(1px 1px at 86% 74%,#cfe6ff 60%,transparent),radial-gradient(1.3px 1.3px at 58% 86%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 88%,#fff 60%,transparent),radial-gradient(1.4px 1.4px at 48% 12%,#fff 60%,transparent),radial-gradient(1px 1px at 92% 44%,#fff 60%,transparent);opacity:.9;pointer-events:none}
#boot > *{position:relative}
#boot.off{opacity:0;pointer-events:none}
.boot-title{font-family:var(--display);font-weight:700;font-size:46px;line-height:.9;letter-spacing:.06em;text-transform:uppercase;text-align:center;background:linear-gradient(135deg,#dffaff,#4fd8ff 55%,#2aa7e8);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(79,216,255,.35))}
.boot-title small{display:block;font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.38em;text-transform:uppercase;color:#8fb0cc;-webkit-text-fill-color:#8fb0cc;margin-top:12px}
.boot-bar{position:relative;width:240px;height:8px;border-radius:1px;background:rgba(79,216,255,.12);border:1px solid rgba(79,216,255,.3);overflow:hidden}
.boot-bar b{display:block;height:100%;width:0;background:var(--v1);transition:width .25s}
.boot-bar::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 10px,#0b1730 10px 12px);pointer-events:none}
.boot-txt{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#8fb0cc}

/* ------------------------------------------------ HUD */
#hud{position:fixed;inset:0;pointer-events:none}
#hud > *{pointer-events:auto}
.top{position:absolute;left:0;right:0;top:0;padding:calc(var(--st) + 8px) 10px 0;display:grid;gap:6px;pointer-events:none}
.top > *{pointer-events:auto}
.prow{display:flex;align-items:center;gap:8px}
.avatar{position:relative;width:46px;height:46px;flex:none;border-radius:50%;background:radial-gradient(circle at 50% 40%,#17304f,#0a1220 70%);border:2px solid var(--v1);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.4),0 0 12px rgba(79,216,255,.3)}
.avatar svg{width:28px;height:28px}
.avatar .al{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);font-family:var(--display);font-weight:700;font-size:11px;color:var(--onv);background:var(--v1);border-radius:3px;padding:1px 6px;line-height:1.3}
.pname{display:grid;line-height:1.15;min-width:0;padding:4px 12px 4px 10px;border-radius:5px;background:var(--dark);border:1px solid var(--vline);color:var(--ink)}
.pname b{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pname span{display:flex;align-items:center;gap:3px;font-family:var(--display);font-size:12px;color:var(--gold1);font-weight:600}
.pname svg{width:13px;height:13px}
.gems{margin-left:auto;display:flex;align-items:center;gap:6px;height:38px;padding:0 4px 0 6px;border-radius:5px;background:var(--dark);border:1px solid var(--vline);color:var(--ink);font-family:var(--display);font-weight:700;font-size:15px}
.gems svg{width:21px;height:21px}
.gems .plus{width:26px;height:26px;border-radius:3px;background:var(--gold1);display:grid;place-items:center;font-size:18px;line-height:1;color:#3a2200}
.rrow{display:flex;gap:4px}
.rp{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:3px;height:32px;padding:0 8px 0 3px;border-radius:5px;background:var(--dark);border:1px solid rgba(79,216,255,.25);color:var(--ink);font-family:var(--display);font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.rp svg{width:22px;height:22px;flex:none}
.rp.low{border-color:var(--coral);box-shadow:inset 0 0 0 1px var(--coral);color:#ffb8c0}
.rp.bump{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.1);background:rgba(57,217,138,.6)}}

.side{position:absolute;display:grid;gap:10px;top:calc(var(--st) + 104px)}
.side.l{left:10px}
.side.r{right:10px;justify-items:end;gap:6px}
.ev{position:relative;width:50px;height:50px;border-radius:8px;display:grid;place-items:center;background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow)}
.ev svg{width:28px;height:28px}
.ev .cap{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.03em;white-space:nowrap;background:var(--dark2);border:1px solid var(--vline);color:var(--ink);padding:1px 6px;border-radius:3px}
.dot{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:4px;background:var(--ember);color:#1a0a00;font-family:var(--display);font-size:11.5px;font-weight:700;display:grid;place-items:center;padding:0 4px;box-shadow:0 2px 6px rgba(255,138,46,.5)}
.dot.ok{background:var(--mint);color:#032416;box-shadow:0 2px 6px rgba(57,217,138,.5)}
.weather{display:flex;align-items:center;gap:7px;min-height:42px;padding:5px 12px 5px 6px;border-radius:5px;background:var(--dark);border:1px solid var(--vline);color:var(--ink);font-family:var(--display);font-weight:700;font-size:15px}
.weather svg{width:24px;height:24px}
.weather small{display:block;font-family:var(--body);font-weight:600;font-size:10px;opacity:.8;line-height:1}
.weather.cold{border-color:#b8a48c} .weather.bz{border-color:var(--coral);box-shadow:inset 0 0 0 1px var(--coral);animation:pulse 1.2s infinite}
.q{display:flex;align-items:center;gap:7px;min-width:120px;max-width:47vw;min-height:42px;padding:4px 10px 4px 5px;border-radius:6px;background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);font-size:10.5px;font-weight:600;color:var(--ink2)}
.q .qi{width:28px;height:28px;border-radius:4px;display:grid;place-items:center;background:var(--vsoft);border:1px solid var(--vline);flex:none}
.q .qi svg{width:18px;height:18px}
.q .qt{display:grid;line-height:1.15;flex:1;min-width:0;text-align:left}
.q .qn{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q .qt b{font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.q.idle{background:var(--glass2);border-style:dashed;border-color:rgba(79,216,255,.4)} .q.idle .qt b{color:var(--v1)}
.q.free{border-color:var(--mint2);box-shadow:inset 0 0 0 1px var(--mint2),var(--shadow)} .q.free .qt b{color:var(--mint2)}

.quest{--cs:8px;position:absolute;left:10px;bottom:calc(var(--sb) + 92px);width:min(300px,calc(100% - 110px));display:flex;align-items:center;gap:9px;padding:8px;border:1px solid var(--line);text-align:left}
.quest .qic{width:38px;height:38px;border-radius:4px;flex:none;display:grid;place-items:center;background:var(--vsoft);border:1px solid var(--vline)}
.quest .qic svg{width:24px;height:24px}
.quest .qx{flex:1;min-width:0}
.quest .qch,.quest .qtt{display:block}
.quest .qch{font-family:var(--display);font-size:10px;color:var(--v1);font-weight:600;text-transform:uppercase;letter-spacing:.14em}
.quest .qtt{font-size:12.5px;line-height:1.2;font-weight:600;color:var(--ink)}
.quest .qbar{display:block;position:relative;height:5px;border-radius:1px;background:rgba(79,216,255,.14);margin-top:5px;overflow:hidden}
.quest .qbar b{display:block;height:100%;background:var(--v1)}
.quest .qbar::after{content:'';position:absolute;inset:0;background:var(--seg);pointer-events:none}
.quest .go{flex:none;padding:8px 10px;border-radius:4px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--onv);background:var(--v1);box-shadow:0 0 14px rgba(79,216,255,.35)}
.quest.done .go{background:var(--gold1);color:#3a2200;box-shadow:0 0 14px rgba(255,194,74,.45);animation:pulse 1.2s infinite}

.nav{position:absolute;left:0;right:0;bottom:0;padding:0 10px calc(var(--sb) + 10px);display:flex;align-items:flex-end;gap:8px;pointer-events:none}
.nav > *{pointer-events:auto}
.nav .navbar{display:flex;gap:2px;padding:5px;border-radius:8px;background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow)}
.nav .nb{position:relative;width:62px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 0 4px;border-radius:5px;font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2)}
.nav .nb svg{width:28px;height:28px}
.nav .nb:active{background:var(--vsoft)}
.nav .nb .dot{right:8px;top:2px}
.nav .world{margin-left:auto;width:76px;height:76px;flex:none;display:grid;place-items:center;align-content:center;gap:0;background:var(--ember);clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#1a0a00}
.nav .world svg{width:34px;height:34px}
.nav .world .gl *{fill:#1a0a00}
.nav .world.home{background:var(--v1);color:var(--onv)}
.nav .world.home .gl *{fill:var(--onv)}

/* ------------------------------------------------ anneau d'actions */
#ring{position:fixed;inset:0;pointer-events:none}
#ring .ring{position:absolute;left:0;top:0;pointer-events:none}
#ring .rb{position:absolute;pointer-events:auto;width:66px;min-height:78px;display:flex;flex-direction:column;align-items:center;gap:3px;transform:translate(-50%,-50%);opacity:0;transition:opacity .12s}
#ring .rb.in{opacity:1}
#ring .rb span{transform:scale(.5);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
#ring .rb.in span{transform:scale(1)}
#ring .rb span{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#17304f,#0a1220 70%);border:1.5px solid var(--line2);box-shadow:0 8px 18px rgba(0,0,0,.4)}
#ring .rb span svg{width:28px;height:28px}
#ring .rb.hot span{background:var(--v1);border-color:#dffaff;box-shadow:0 8px 20px rgba(0,0,0,.4),0 0 16px rgba(79,216,255,.5)}
#ring .rb.hot span .gl *{fill:var(--onv)}
#ring .rb.go span{background:var(--mint);border-color:var(--mint2)}
#ring .rb.go span .gl *{fill:#032416}
#ring .rb.off span{filter:grayscale(1);opacity:.7}
#ring .rb em{font-style:normal;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--ink);background:var(--dark2);border:1px solid var(--vline);padding:1px 7px;border-radius:3px;white-space:nowrap}
#ring .rtitle{position:absolute;transform:translate(-50%,0);pointer-events:none;font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;color:var(--ink);padding:4px 12px;border-radius:4px;background:var(--dark2);border:1px solid var(--line)}

/* ------------------------------------------------ écrans plein cadre (bleu nuit + grille technique) */
#screens > .scr{position:fixed;inset:0;display:flex;flex-direction:column;background:linear-gradient(rgba(79,216,255,.035) 1px,transparent 1px) 0 0/100% 28px,linear-gradient(90deg,rgba(79,216,255,.035) 1px,transparent 1px) 0 0/28px 100%,radial-gradient(120% 50% at 50% 0%,rgba(23,105,201,.35),transparent 60%),linear-gradient(#0d1727,#070d18);animation:scrIn .24s cubic-bezier(.2,.9,.3,1);touch-action:pan-y}
@keyframes scrIn{from{transform:translateY(16px);opacity:0}}
.sh{flex:none;display:flex;align-items:center;gap:10px;padding:calc(var(--st) + 10px) 12px 10px;border-bottom:1px solid rgba(79,216,255,.18)}
.sh .bk{width:44px;height:44px;flex:none;border-radius:6px;display:grid;place-items:center;background:var(--glass2);border:1px solid var(--line)}
.sh .bk svg{width:20px;height:20px}
.sh h1{flex:1;min-width:0;margin:0;font-family:var(--display);font-weight:700;font-size:clamp(17px,5.2vw,22px);line-height:1.1;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sh .mini{display:flex;gap:4px}
.sh .mini .rp{flex:none;height:26px;font-size:12px}
.sb{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:10px 14px calc(var(--sb) + 28px);-webkit-overflow-scrolling:touch;user-select:text;-webkit-user-select:text}
.tabs{display:flex;gap:0;padding:0;margin-bottom:12px;border-bottom:1px solid var(--vline)}
.tabs button{flex:1;min-width:0;min-height:42px;padding:9px 3px;border-radius:0;font-family:var(--display);font-weight:600;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2);position:relative}
.tabs button.on{color:var(--v1);background:linear-gradient(transparent,rgba(79,216,255,.12));box-shadow:inset 0 -2px 0 var(--v1)}
.tabs .dot{top:2px;right:6px}
.card{--pbg:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);padding:14px}
.card + .card,.card + .list,.list + .card,.card + .btns{margin-top:12px}
.card h3,.sb h3{margin:0 0 10px;font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:8px}
.card h3::before,.sb h3::before{content:'';width:3px;height:14px;background:var(--v1);flex:none}
.card h3::after,.sb h3::after{content:'';flex:1;height:1px;min-width:12px;background:linear-gradient(90deg,var(--vline),transparent)}
.sb h3{margin:18px 4px 10px}
.muted{color:var(--ink2);font-size:12.5px;font-weight:600}
p.txt{margin:6px 2px;line-height:1.5;color:var(--ink2);font-size:14px;max-width:62ch}
.hero{--pbg:radial-gradient(circle at 50% 78%,rgba(79,216,255,.18),transparent 55%),radial-gradient(circle at 50% 70%,var(--sg,rgba(79,216,255,.3)),transparent 70%),linear-gradient(160deg,#16305a,#0c1a33 60%,#08111f);position:relative;height:230px;overflow:hidden;border:1px solid var(--line)}
.hero canvas{display:block;width:100%!important;height:100%!important}
.hero .htag{position:absolute;left:10px;top:10px;display:flex;gap:6px;flex-wrap:wrap}
.hero .hlv{position:absolute;right:16px;top:10px;font-family:var(--display);font-weight:700;font-size:15px;padding:5px 12px;border-radius:4px;background:var(--dark2);border:1px solid var(--line);color:var(--ink)}
.lvarrow{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:700;font-size:22px;margin:14px 0 6px}
.lvarrow span{padding:5px 16px;border-radius:4px;background:var(--glass2);border:1px solid var(--vline);color:var(--ink2)}
.lvarrow span.nx{color:var(--onv);background:var(--v1);border-color:var(--v1)}
.lvarrow svg{width:24px;height:24px}
.rows{display:grid;gap:6px}
.row{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:4px;background:rgba(79,216,255,.06);border-left:2px solid var(--vline);font-size:13.5px;color:var(--ink)}
.row .ri{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:4px;background:var(--vsoft)}
.row .ri svg{width:22px;height:22px}
.row .rt{flex:1;min-width:0;line-height:1.25;font-weight:600;overflow-wrap:anywhere}
.row .rt small{display:block;color:var(--ink3);font-size:11.5px;font-weight:600}
.row .rv{font-family:var(--display);font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;text-align:right}
.row .rv .gain{color:var(--mint2)}
.row.bad{border-left-color:var(--coral);box-shadow:inset 0 0 0 1px rgba(255,92,108,.35)} .row.bad .rv{color:var(--coral)}
.chk{width:24px;height:24px;border-radius:4px;display:grid;place-items:center;background:var(--mint);color:#032416;font-size:13px;font-weight:800;flex:none}
.chk.no{background:var(--coral);color:#2a0308}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.btns > *{flex:1 1 0;min-width:min(120px,100%)}
/* boutons : principal = cyan plein à texte sombre ; blue/ghost = sombre à bordure et texte cyan */
.btn{--cs:8px;--pbg:var(--v1);--lc:var(--v1);position:relative;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:9px 18px;font-family:var(--display);font-weight:700;font-size:16.5px;letter-spacing:.05em;text-transform:uppercase;line-height:1.05;text-align:center;color:var(--onv);border:1px solid var(--lc);transition:transform .08s,filter .15s}
.btn:active{transform:translateY(2px) scale(.98)}
.btn svg{width:21px;height:21px;flex:none}
.btn .gl *{fill:var(--onv)}
.btn small{display:block;font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:0;text-transform:none;opacity:.85}
.btn .col{display:grid;justify-items:start}
.btn.blue{--pbg:var(--glass2);--lc:var(--line2);color:var(--v1)}
.btn.blue .gl *{fill:url(#gv)}
.btn.green{--pbg:var(--mint);--lc:var(--mint2);color:#032416}
.btn.green .gl *{fill:#032416}
.btn.gem{--pbg:var(--sky);--lc:#8fd3ff;color:#031a33}
.btn.gem .gl *{fill:#031a33}
.btn.gold{--pbg:var(--gold1);--lc:#ffd98a;color:#3a2200}
.btn.gold .gl *{fill:#3a2200}
.btn.ghost{--pbg:rgba(10,18,32,.5);--lc:var(--vline);color:var(--ink2)}
.btn.ghost .gl *{fill:url(#gv)}
.btn.red{--pbg:var(--coral);--lc:#ff9aa5;color:#2a0308}
.btn.red .gl *{fill:#2a0308}
.btn.sm{min-height:40px;padding:6px 14px;font-size:13.5px;flex:none}
.btn[disabled],.btn.dis{filter:grayscale(.9);opacity:.5;cursor:not-allowed}
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:3px;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.03em;background:var(--dark2);border:1px solid var(--vline);color:var(--ink)}
.pill i{width:10px;height:10px;border-radius:2px;display:block}
.bar{position:relative;height:8px;border-radius:1px;background:rgba(79,216,255,.12);border:1px solid rgba(79,216,255,.2);overflow:hidden}
.bar b{display:block;height:100%;background:var(--v1);transition:width .3s}
.bar::after{content:'';position:absolute;inset:0;background:var(--seg);pointer-events:none}
.bar.xp b{background:var(--mint)} .bar.hp b{background:var(--mint)} .bar.foe b{background:var(--coral)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
/* cartes de collection : sombres, teinte de rareté en bas, bande de rareté en haut */
.lcard{position:relative;border-radius:6px;padding:22px 6px 8px;text-align:center;background:linear-gradient(180deg,rgba(16,26,44,.95) 0%,rgba(16,26,44,.95) 50%,color-mix(in srgb,var(--rc,#8f9bb8) 32%,#101a2c));border:1px solid color-mix(in srgb,var(--rc,#8f9bb8) 55%,transparent);box-shadow:var(--shadow);overflow:hidden;color:var(--ink)}
.lcard::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--rc,#8f9bb8)}
.lcard img{width:100%;aspect-ratio:1;display:block}
.lcard .nm{font-family:var(--display);font-size:13.5px;font-weight:700;letter-spacing:.02em;line-height:1.1;color:var(--ink)}
.lcard .lvl{position:absolute;top:8px;left:8px;font-family:var(--display);font-weight:700;font-size:11.5px;color:var(--ink2)}
.lcard .el{position:absolute;top:7px;right:7px;width:18px;height:18px;border-radius:3px;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.lcard .stars{font-size:11px;color:var(--gold1);letter-spacing:-1px;min-height:13px}
.lcard .tag{font-family:var(--display);font-size:10px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.12em;margin-top:2px}
.lcard.sel{border-color:var(--v1);box-shadow:0 0 0 2px rgba(79,216,255,.4),0 0 16px rgba(79,216,255,.3)}
.lcard.dim{opacity:.55;filter:grayscale(.6)}
.lcard .dot{top:4px;right:4px}
.slots3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.slot{aspect-ratio:.8;border-radius:6px;border:1.5px dashed var(--vline);display:grid;place-items:center;text-align:center;color:var(--ink3);font-size:12px;font-weight:600;position:relative;background:rgba(10,18,32,.5);max-width:100%}
.slot.full{border:1px solid color-mix(in srgb,var(--rc,#8f9bb8) 55%,transparent);background:linear-gradient(180deg,rgba(16,26,44,.95) 50%,color-mix(in srgb,var(--rc,#8f9bb8) 32%,#101a2c));box-shadow:var(--shadow)}
.slot img{width:92%}
.slot .nm{font-size:12px;color:var(--ink);font-weight:600}
/* cases d'objets : sombre, bordure cyan, quantité en haut à droite */
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.it{position:relative;border-radius:5px;padding:8px 4px 6px;text-align:center;background:linear-gradient(180deg,#1b2f4e,#0e1a2e);border:1px solid rgba(79,216,255,.3);color:var(--ink);font-size:10.5px;font-weight:600;line-height:1.1;overflow:hidden}
.it::after{content:'';position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(transparent,rgba(255,194,74,.22));pointer-events:none}
.it .ic{width:44px;height:44px;margin:0 auto 4px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.it .ic svg,.it .ic img{width:44px;height:44px}
.it .qty{position:absolute;right:6px;top:5px;font-family:var(--display);font-weight:700;font-size:12.5px;z-index:1;color:var(--v1)}
.list{display:grid;gap:8px}
.li{--pbg:var(--glass);display:flex;align-items:center;gap:11px;padding:9px;border:1px solid var(--line);text-align:left;width:100%;color:var(--ink)}
.li .lic{width:50px;height:50px;border-radius:5px;flex:none;display:grid;place-items:center;background:var(--vsoft);border:1px solid var(--vline);font-family:var(--display);font-weight:700;color:var(--v1)}
.li .lic svg,.li .lic img{width:40px;height:40px}
.li .lt{flex:1;min-width:0}
.li .lt b{display:block;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.02em;overflow-wrap:anywhere}
.li .lt span{display:block;font-size:12px;color:var(--ink2);font-weight:600;line-height:1.3}
.li.done{opacity:.6}
.li.lock{opacity:.5}
.costs{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.cost{display:inline-flex;align-items:center;gap:3px;padding:3px 10px 3px 3px;border-radius:4px;background:var(--dark2);border:1px solid rgba(79,216,255,.25);font-family:var(--display);font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--ink)}
.cost svg{width:20px;height:20px}
.cost.short{color:var(--coral);border-color:rgba(255,92,108,.6)}
.stepper{display:flex;align-items:center;gap:8px}
.stepper input[type=range]{flex:1;accent-color:var(--v1);height:28px}
.stepper button{width:44px;height:44px;flex:none;border-radius:5px;background:var(--glass2);border:1px solid var(--line2);font-family:var(--display);font-weight:700;font-size:22px;color:var(--v1)}
.stepper output{font-family:var(--display);font-weight:700;font-size:19px;min-width:52px;text-align:center;color:var(--ink)}
.tree{display:grid;gap:8px}
.tnode{--pbg:var(--glass);display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);text-align:left;width:100%;color:var(--ink)}
.tnode .tl{font-family:var(--display);font-weight:700;font-size:13px;min-width:44px;text-align:center;padding:6px 4px;border-radius:4px;background:var(--vsoft);border:1px solid var(--vline);color:var(--v1)}
.tnode.max .tl{background:var(--gold1);border-color:var(--gold1);color:#3a2200} .tnode.lock{opacity:.55} .tnode.run{border-color:var(--mint2);box-shadow:inset 0 0 0 1px var(--mint2)}
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin-top:10px}
.vs .side2{border-radius:5px;padding:10px;background:var(--glass2);border:1px solid var(--vline);text-align:center}
.vs .side2 b{display:block;font-family:var(--display);font-weight:700;font-size:23px;font-variant-numeric:tabular-nums;color:var(--ink)}
.vs .mid{font-family:var(--display);font-weight:700;font-size:18px;color:var(--v1)}
.verdict{margin-top:10px;padding:9px 12px;border-radius:4px;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.04em;text-align:center;background:var(--glass2)!important;border:1px solid var(--line)}
.tbl{width:100%;border-collapse:collapse;font-size:13px;color:var(--ink)}
.tbl td,.tbl th{padding:8px 6px;text-align:left;border-bottom:1px solid rgba(79,216,255,.14)}
.tbl th{font-family:var(--display);color:var(--ink3);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em}
.tbl td.n{text-align:right;font-family:var(--display);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.tbl tr.me td{color:var(--v1);font-weight:700}
.chest-row{display:flex;justify-content:space-between;gap:4px;position:relative;margin:18px 4px 8px}
.chest-row .track{position:absolute;left:14px;right:14px;top:22px;height:6px;border-radius:1px;background:rgba(79,216,255,.12);overflow:hidden}
.chest-row .track b{display:block;height:100%;background:var(--v1)}
.chest-row .track::after{content:'';position:absolute;inset:0;background:var(--seg);pointer-events:none}
.chest{position:relative;z-index:1;width:54px;display:grid;justify-items:center;gap:3px;font-family:var(--display);font-weight:700;font-size:12.5px;color:var(--ink2)}
.chest .cb{width:50px;height:50px;border-radius:6px;display:grid;place-items:center;background:var(--glass2);border:1px solid var(--line)}
.chest .cb svg{width:34px;height:34px}
.chest.ready .cb{background:var(--gold1);border-color:var(--gold1);animation:pulse 1.2s infinite}
.chest.got .cb{opacity:.45}
.cal{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cal .day{border-radius:5px;padding:8px 4px;text-align:center;background:var(--glass2);border:1px solid var(--vline);font-size:10.5px;font-weight:600;color:var(--ink2)}
.cal .day b{display:block;font-family:var(--display);font-weight:700;font-size:13.5px;margin-bottom:4px;color:var(--ink)}
.cal .day.today{background:var(--gold1);border-color:var(--gold1);color:#3a2200} .cal .day.today b{color:#3a2200}
.cal .day.got{opacity:.5}
.cal .day .ic svg{width:30px;height:30px;margin:0 auto}
/* menu mosaïque : tuiles sombres chanfreinées, accent cyan, tuile .accent orange */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(96px,auto);gap:10px}
.tile{--pbg:var(--glass);position:relative;min-width:0;padding:10px 11px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);color:var(--ink);overflow:hidden}
.tile.w2{grid-column:span 2} .tile.h2{grid-row:span 2}
.tile .tic{width:44px;height:44px;border-radius:5px;display:grid;place-items:center;background:var(--vsoft);border:1px solid var(--vline)}
.tile .tic svg{width:26px;height:26px}
.tile.w2{padding-right:70px}
.tile.w2 .tic{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:52px;height:52px}
.tile.w2 .tic svg{width:30px;height:30px}
.tile .tn{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.03em;line-height:1.1;overflow-wrap:anywhere;hyphens:auto}
.tile .ts{font-size:10.5px;color:var(--ink3);font-weight:600;overflow-wrap:anywhere}
.tile .tbig{font-family:var(--display);font-weight:700;font-size:28px;color:var(--v1);line-height:1}
.tile.lock{--pbg:rgba(10,18,32,.55);--lc:rgba(143,176,204,.3);color:rgba(233,242,255,.6);border-style:dashed;border-color:rgba(143,176,204,.3)}
.tile.lock .tic{background:rgba(143,176,204,.08);border-color:rgba(143,176,204,.25)}
.tile.lock .ts{color:rgba(233,242,255,.5)}
.tile .dot{top:8px;right:8px}
.tile.accent{--pbg:var(--ember);--lc:var(--ember2);color:#1a0a00;border-color:var(--ember2)}
.tile.accent .tic{background:rgba(26,10,0,.18);border-color:rgba(26,10,0,.25)} .tile.accent .gl *{fill:#1a0a00}
.tile.accent .ts{color:rgba(26,10,0,.75)} .tile.accent .tbig{color:#1a0a00}
.tile.gold{--pbg:var(--gold1);--lc:#ffd98a;color:#3a2200;border-color:#ffd98a}
.tile.gold .tic{background:rgba(58,34,0,.16);border-color:rgba(58,34,0,.25)} .tile.gold .gl *{fill:#3a2200}
.tile.gold .ts{color:rgba(58,34,0,.7)}
.evbanner{--pbg:repeating-linear-gradient(135deg,rgba(79,216,255,.08) 0 2px,transparent 2px 10px) 100% 0/120px 100% no-repeat,linear-gradient(135deg,rgba(23,105,201,.6),rgba(10,18,32,.95) 65%);padding:16px;color:var(--ink);border:1px solid var(--line2);overflow:hidden}
.evbanner h2{margin:0;font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:.05em;text-transform:uppercase}
.evbanner p{margin:4px 0 0;font-size:13px;color:var(--ink2);max-width:40ch}
.evbanner .evt{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:3px;background:var(--v1);color:var(--onv);font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.04em}
.stages{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0}
.stages .st{width:78px;border-radius:5px;background:var(--glass2);border:1px solid var(--vline);padding:4px;text-align:center;font-size:10.5px;font-weight:600;color:var(--ink2)}
.stages .st img{width:100%}
.stages .st.on{border-color:var(--v1);box-shadow:0 0 0 1px var(--v1),0 0 14px rgba(79,216,255,.3)}
.stages .st.lock img{filter:brightness(0) invert(.5)}
.stages .ar{font-size:18px;color:var(--v1);font-weight:700}

/* ------------------------------------------------ fenêtres */
#popups > .pop{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:rgba(3,8,16,.62);animation:fade .15s}
@keyframes fade{from{opacity:0}}
.pbox{--cs:12px;--pbg:var(--scan),linear-gradient(rgba(16,28,48,.97),rgba(9,16,30,.98));width:min(400px,100%);max-height:86%;overflow-y:auto;border:1px solid var(--line2);box-shadow:0 20px 50px rgba(0,0,0,.5);padding:18px;animation:popIn .24s cubic-bezier(.3,1.5,.5,1);touch-action:pan-y;color:var(--ink)}
@keyframes popIn{from{transform:scale(.88);opacity:0}}
.pbox h2{margin:0 44px 12px 2px;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:.05em;text-transform:uppercase;line-height:1.1}
.pbox .px{position:absolute;top:12px;right:14px;width:42px;height:42px;border-radius:4px;background:var(--glass2);border:1px solid var(--line2);display:grid;place-items:center;font-family:var(--display);font-size:22px;line-height:1;color:var(--v1);font-weight:700}
.pbox .card{--pbg:rgba(79,216,255,.05);box-shadow:none}
.reward{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:10px 0}
.reward .it{width:86px}
.big{font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:.04em;text-transform:uppercase;text-align:center;margin:6px 0;color:var(--ink)}
.big.win{background:linear-gradient(135deg,#ffe3a1,var(--gold1) 50%,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}
.big.lose{color:var(--coral)}
.dmg{position:absolute;font-family:var(--display);font-weight:700;font-size:23px;color:#fff;text-shadow:0 2px 0 #b01d2e,0 0 8px rgba(0,0,0,.35);animation:dmg .9s ease-out forwards;pointer-events:none}
.dmg.p{color:#fff4d6;text-shadow:0 2px 0 #b44d12}
.dmg.sk{color:#fff;font-size:15px;text-shadow:0 2px 0 var(--v3)}
@keyframes dmg{to{transform:translateY(-44px);opacity:0}}

/* ------------------------------------------------ toasts, doigt, envols */
#toasts{position:fixed;left:0;right:0;top:calc(var(--st) + 120px);display:grid;justify-items:center;gap:6px;pointer-events:none;padding:0 16px;z-index:40}
.toast{max-width:420px;padding:10px 16px;border-radius:5px;background:var(--dark2);border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:600;text-align:center;animation:tin .25s ease-out;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.toast.good{border-color:var(--mint2)} .toast.warn{border-color:var(--coral)} .toast.gold{border-color:var(--gold1);color:var(--gold1)} .toast.cold{border-color:#9fe8ff}
@keyframes tin{from{transform:translateY(-10px);opacity:0}}
#finger{position:fixed;left:0;top:0;width:54px;height:54px;pointer-events:none;z-index:45;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
#finger svg{width:54px;height:54px;animation:tap 1s ease-in-out infinite}
#finger::before{content:'';position:absolute;left:-14px;top:-14px;width:44px;height:44px;border-radius:50%;border:3px solid var(--v1);animation:ripple 1s ease-out infinite}
@keyframes tap{50%{transform:translate(4px,6px) scale(.92)}}
@keyframes ripple{from{transform:scale(.5);opacity:1}to{transform:scale(1.4);opacity:0}}
#fly{position:fixed;inset:0;pointer-events:none;z-index:44}
#fly .f{position:absolute;left:0;top:0;width:30px;height:30px;will-change:transform}
#fly .f svg{width:30px;height:30px}
#fly .pf{position:absolute;display:flex;align-items:center;gap:3px;padding:3px 9px 3px 4px;border-radius:4px;background:var(--dark);border:1px solid var(--vline);font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--ink);white-space:nowrap;animation:pf 2s ease-out forwards;pointer-events:none}
#fly .pf svg{width:19px;height:19px}
@keyframes pf{0%{opacity:0;transform:translate(-50%,6px) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-50px)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media (min-width:420px){.bento{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:700px){.quest{width:330px}.bento{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* retour visuel immédiat à l'appui (le toucher est validé au relâchement) */
[data-a].pressed{filter:brightness(1.15)}
.btn.pressed,.tile.pressed,.ev.pressed,.nb.pressed,.q.pressed,.li.pressed,.lcard.pressed,.it.pressed,.chest.pressed,.world.pressed,.bub.pressed,.sign.pressed{transform:scale(.95)}
#ring .rb.pressed span{transform:scale(.9)}
.btn,.tile,.ev,.nb,.q,.li,.lcard,.it,.world{transition:transform .08s ease-out,filter .08s}
/* en-têtes d'écran : le titre passe avant les pastilles de ressources */
.sh h1{min-width:96px}
.sh .mini{flex-shrink:1;min-width:0;overflow:hidden}
@media (max-width:420px){.sh .mini .rp:nth-child(n+3){display:none}}
@media (max-width:360px){.sh .mini .rp:nth-child(n+2){display:none}}
#ring .rtitle{max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis}
/* ordre d'empilement explicite : 3D < étiquettes < HUD < anneau < écrans < fenêtres */
#vig{position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse 85% 75% at 50% 45%,transparent 55%,rgba(6,12,30,.45) 100%)}
#labels{z-index:1} #frost{z-index:2} #hud{z-index:3} #ring{z-index:4} #screens{position:relative;z-index:5} #popups{position:relative;z-index:6}

/* Tous les calques plein écran suivent la hauteur réelle mesurée (--app-h), pas la hauteur annoncée par le navigateur */
html,body{height:var(--app-h,100%);background:#070d18}
#gl{top:0;left:0;right:auto;bottom:auto;width:100vw;height:var(--app-h,100%)}
#labels,#vig,#frost,#hud,#ring,#fly{top:0;bottom:auto;height:var(--app-h,100%)}
#screens > .scr,#popups > .pop,#boot{top:0;bottom:auto;height:var(--app-h,100%)}

/* ------------------------------------------------ prologue */
body.pro .side.l,body.pro #h-quest{display:none}
body.pro[data-pch="1"] .nav,body.pro[data-pch="2"] .nav{display:none}
body.pro[data-pch="3"] .nav .navbar,body.pro[data-pch="4"] .nav .navbar{visibility:hidden}
body.pro[data-pstep="0"] .side.r,body.pro[data-pstep="1"] .side.r,body.pro[data-pstep="2"] .side.r,body.pro[data-pstep="3"] .side.r,body.pro[data-pstep="4"] .side.r,body.pro[data-pstep="5"] .side.r{visibility:hidden}
body.pro[data-pstep="0"] .top,body.pro[data-pstep="1"] .top,body.pro[data-pstep="2"] .top{visibility:hidden}
#chapter{position:fixed;inset:0;z-index:31;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 40%,rgba(20,40,80,.75),rgba(4,8,20,.94) 70%);animation:fade .6s}
#chapter .cbox{display:grid;justify-items:center;gap:10px;text-align:center;color:#fff;animation:popIn .7s cubic-bezier(.2,.9,.3,1)}
#chapter small{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:#7fdcff}
#chapter b{font-family:var(--display);font-weight:700;font-size:clamp(34px,10vw,52px);line-height:1;letter-spacing:.04em;text-transform:uppercase;background:linear-gradient(135deg,#fff,#9fe8ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(79,216,255,.45))}
#chapter span{font-size:15px;font-weight:600;color:#bfe3f7;max-width:34ch}
#chapter i{margin-top:28px;font-style:normal;font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#7fdcff;animation:bob 1.6s ease-in-out infinite}
/* dialogues : humains (Maya, Officiers) = bordure orange ; IRIS = bordure cyan */
#story{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;padding:0 12px calc(var(--sb) + 18px);background:linear-gradient(transparent 55%,rgba(4,8,20,.55))}
#story .sbox{--cs:12px;clip-path:none;background:none;border:0;--pbg:var(--scan),linear-gradient(160deg,rgba(16,28,48,.97),rgba(9,16,30,.98));--lc:rgba(255,138,46,.75);--bc:var(--ember);width:min(560px,100%);margin:0 auto;padding:22px 18px 14px 18px;border:1px solid rgba(255,138,46,.75);box-shadow:0 18px 40px rgba(0,0,0,.5);animation:popIn .25s cubic-bezier(.3,1.5,.5,1);color:var(--ink)}
#story .sbox .spanel{position:absolute;inset:0;z-index:0;border:1px solid rgba(255,138,46,.75)}
#story .sbox.ai .spanel{border-color:var(--line2)}
#story .sface,#story .sname,#story .stext,#story .snext{position:relative;z-index:1}
#story .sface{position:absolute;left:14px;top:-58px;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#2a4a72,#0b1730);border:2px solid var(--ember);box-shadow:0 8px 20px rgba(0,0,0,.5),0 0 18px rgba(255,138,46,.35);overflow:hidden}
#story .sface img{width:100%;height:100%;object-fit:cover}
#story .sname{margin-left:98px;margin-top:-12px;font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#story .sname small{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.1em;color:#1a0a00;background:var(--ember);padding:2px 8px;border-radius:3px}
#story .stext{margin:14px 2px 10px;font-size:16px;line-height:1.5;font-weight:600;color:var(--ink);min-height:48px}
#story .snext{text-align:right;font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ember2);animation:bob 1.6s ease-in-out infinite}
#story .sbox.ai{--lc:var(--line2);--bc:var(--v1);border-color:var(--line2)}
#story .sbox.ai .stext{color:#e8f6ff;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.02em}
#story .sbox.ai .sname{color:#7fdcff} #story .sbox.ai .sname small{background:var(--v1);color:var(--onv)}
#story .sbox.ai .sface{background:radial-gradient(circle at 50% 40%,#2a5f8f,#0b1730);border-color:#7fdcff;box-shadow:0 0 24px rgba(79,216,255,.5)}
#story .sbox.ai .snext{color:#7fdcff}
#goal{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--st) + 150px);z-index:6;display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:6px;background:var(--dark2);border:1px solid var(--gold1);box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 16px rgba(255,194,74,.2);max-width:calc(100vw - 24px);pointer-events:auto;cursor:pointer;animation:popIn .3s}
#goal .gi{width:34px;height:34px;border-radius:4px;display:grid;place-items:center;background:var(--gold1);flex:none}
#goal .gi svg{width:20px;height:20px}
#goal .gi .gl *{fill:#3a2200}
#goal small{display:block;font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold1)}
#goal b{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.02em;color:var(--ink)}
.flash{position:fixed;inset:0;z-index:40;pointer-events:none;background:radial-gradient(circle at 50% 45%,rgba(200,245,255,.95),rgba(79,216,255,.45) 40%,transparent 70%);animation:flash 1.6s ease-out forwards}
@keyframes flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}

/* le bandeau d'objectif s'efface quand un écran ou une fenêtre est ouvert */
body:has(#screens .scr) #goal,body:has(#popups .pop) #goal{display:none}

/* ------------------------------------------------ Alliances (guildes) */
.gemb{display:inline-grid;place-items:center;flex:none;border-radius:22%;color:#fff;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--gc) 70%,#fff),var(--gc));box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),0 4px 10px color-mix(in srgb,var(--gc) 40%,transparent)}
.gemb svg{width:64%;height:64%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.gtabs{overflow-x:auto;scrollbar-width:none}.gtabs button{font-size:12.5px;padding:9px 6px;white-space:nowrap}
.gintro .txt{margin:0}
.gsearch{display:flex;gap:8px;margin:10px 0}
.gsearch input,.gsend input,.gform input,.gform textarea{flex:1;min-width:0;font:inherit;font-weight:600;color:var(--ink);padding:11px 14px;border-radius:5px;border:1px solid var(--vline);background:rgba(8,14,26,.8);-webkit-user-select:text;user-select:text;touch-action:auto}
.gsearch input::placeholder,.gsend input::placeholder,.gform input::placeholder,.gform textarea::placeholder{color:var(--ink3)}
.gsearch input:focus,.gsend input:focus,.gform input:focus,.gform textarea:focus{outline:none;border-color:var(--v1);box-shadow:0 0 0 1px var(--v1)}
.gli .lt span{white-space:normal}
.gform{display:grid;gap:10px;margin:8px 0}.gform label{display:grid;gap:5px;font-size:13px;color:var(--ink2)}.gform textarea{resize:none}
.gchk{display:flex!important;align-items:center;gap:8px}.gchk input{width:20px;height:20px;flex:none;accent-color:var(--v1)}
.gembs{display:flex;flex-wrap:wrap;gap:8px}.gpick{padding:4px;border-radius:6px;border:2px solid transparent}.gpick.on{border-color:var(--v1)}
.gcol{width:34px;height:34px;border-radius:50%;border:2px solid rgba(233,242,255,.6);box-shadow:var(--shadow)}.gcol.on{outline:2px solid var(--v1);outline-offset:2px}
.ghead{display:flex;gap:14px;align-items:center}.ghead h2{margin:0;font-family:var(--display);letter-spacing:.03em}.ghead h2 small{color:var(--ink3);font-size:.7em}.ghead p{margin:4px 0 8px}
.gstats{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--ink2)}.gstats span{display:flex;align-items:center;gap:4px}.gstats svg{width:18px;height:18px}
.grk{flex:none;font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.04em;padding:3px 7px;border-radius:3px;background:var(--vsoft);border:1px solid var(--vline);color:var(--v1)}
.grk.r5{background:var(--gold1);border-color:var(--gold1);color:#3a2200}.grk.r4{background:var(--v1);border-color:var(--v1);color:var(--onv)}
.gmem .lt b{display:flex;align-items:center;gap:5px}.gon{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 6px var(--mint2)}
.ghrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:9px;margin-bottom:9px}
.gh{display:grid;gap:4px;padding:11px;border-radius:6px;background:var(--glass);border:1px solid var(--line);text-align:left;color:var(--ink)}
.gh b{font-family:var(--display);font-size:14.5px;letter-spacing:.02em;line-height:1.15}.gh small{font-size:11.5px;color:var(--ink2);line-height:1.2}.ghl{font-size:12px;color:var(--v1)}
.gh .ghs{font-size:11.5px;color:var(--ink3);display:flex;align-items:center;gap:4px}.gh .ghs svg{width:14px;height:14px}.gh .ghs.ok{color:var(--mint2)}
.gh.lock{opacity:.55}.gh.rec{border-color:var(--gold1);box-shadow:0 0 0 1px rgba(255,194,74,.35)}.gh.live{border-color:var(--v1);background:linear-gradient(160deg,rgba(79,216,255,.12),var(--glass))}
.goffers{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.goffers .btn{flex-direction:column;gap:2px;min-height:62px}.goffers small{font-size:11px;opacity:.85}
.gchat{height:calc(var(--app-h,100vh) - 250px);min-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding:4px 2px 10px;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.gmsg{align-self:flex-start;max-width:82%;padding:8px 12px;border-radius:8px 8px 8px 2px;background:var(--glass);border:1px solid var(--vline)}
.gmsg.me{align-self:flex-end;border-radius:8px 8px 2px 8px;background:rgba(23,105,201,.55);border-color:var(--line2);color:var(--ink)}
.gmsg b{display:flex;align-items:center;gap:5px;font-family:var(--display);font-size:12.5px;letter-spacing:.03em;color:var(--v1)}.gmsg p{margin:2px 0;font-weight:500;word-break:break-word;-webkit-user-select:text;user-select:text}.gmsg small{font-size:10.5px;opacity:.6}
.gsys{align-self:center;font-size:12px;color:var(--ink2);background:rgba(8,14,26,.7);border:1px solid rgba(79,216,255,.2);padding:4px 12px;border-radius:4px;text-align:center}
.gday{align-self:center;font-size:11px;color:var(--ink3);margin-top:4px}
.gsend{display:flex;gap:8px;position:sticky;bottom:0;padding-top:6px}
.gshop{position:relative}.gshop small{font-size:10.5px;color:var(--ink3)}.gshop[disabled]{opacity:.5}

#netlost{position:fixed;left:50%;top:calc(var(--st) + 64px);transform:translateX(-50%);z-index:60;display:grid;gap:2px;text-align:center;padding:10px 18px;border-radius:6px;background:var(--dark2);border:1px solid var(--coral);color:var(--ink);font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.45);pointer-events:none}
#netlost b{font-family:var(--display);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
#netlost span{font-weight:500;opacity:.75;font-size:12px}
.site.city{background:rgba(8,14,26,.85)}.site.city.me{background:var(--gold1);border-color:var(--gold1);color:#3a2200}.site.sanct{background:linear-gradient(135deg,#3fa0f0,#1769c9);border-color:#8fd3ff}
.gcode{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:.14em;text-align:center;padding:14px;border-radius:5px;background:var(--vsoft);border:1px dashed var(--line2);color:var(--v1);margin:8px 0;-webkit-user-select:text;user-select:text}
.btn.apple{--pbg:#000;--lc:#444;color:#fff}

/* ------------------------------------------------ boutique */
.soon{background:var(--vsoft);border:1px solid var(--vline);padding:8px 12px;border-radius:5px}
.pack{position:relative;display:grid;gap:8px}.pack h3{margin:0}.pack .txt{margin:0}.pack .buy{justify-self:stretch}
.ptag{position:absolute;top:11px;right:14px;padding:3px 10px;border-radius:3px;background:var(--ember);color:#1a0a00;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-family:var(--display);z-index:2}
.pks{display:flex;flex-wrap:wrap;gap:6px}.pk{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;background:var(--vsoft);border:1px solid rgba(79,216,255,.2);font-size:12.5px}.pk svg{width:20px;height:20px}
.pack.builder,.pack.march,.pack.arbiter{--pbg:linear-gradient(160deg,rgba(23,105,201,.3),var(--glass) 60%)}.pack.welcome{--pbg:linear-gradient(160deg,rgba(255,194,74,.18),var(--glass) 60%);--bc:var(--gold1);border-color:rgba(255,194,74,.5)}
.gemgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gemc{position:relative;display:grid;justify-items:center;gap:4px;text-align:center}.gemc .gic svg{width:46px;height:46px}.gemc b{font-family:var(--display);font-weight:700;font-size:23px}.gemc .x2{color:var(--ember2)}.gemc .btn{width:100%}
.vipc{text-align:center}.viplv{font-family:var(--display);font-weight:700;font-size:42px;background:linear-gradient(135deg,#ffe3a1,var(--gold1) 50%,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}
.season{display:grid;gap:6px;margin:10px 0}.shead,.srow{display:grid;grid-template-columns:36px 1fr 1fr;gap:6px;align-items:stretch}.shead{font-family:var(--display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);text-align:center}
.sn{display:grid;place-items:center;font-family:var(--display);font-weight:700;color:var(--v1)}
.stier{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;padding:6px;border-radius:5px;background:var(--glass);border:1px solid var(--vline);min-height:48px}.stier.prem{background:linear-gradient(160deg,rgba(255,194,74,.16),var(--glass));border-color:rgba(255,194,74,.4)}
.stier.ready{border-color:var(--mint);box-shadow:0 0 0 1px rgba(57,217,138,.4)}.stier.got{opacity:.45}.stier[disabled]:not(.got){opacity:.75}
.skins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.skin{display:grid;justify-items:center;gap:6px;text-align:center}.swatch{width:56px;height:56px;border-radius:50%;border:2px solid rgba(233,242,255,.5);box-shadow:inset 0 -4px 0 rgba(0,0,0,.2),var(--shadow)}
.shiny{background:linear-gradient(90deg,#ff7ac8,#3fa0f0,#2fd8f0,#7cc75a,#ffb428);-webkit-background-clip:text;background-clip:text;color:transparent}
.vs .side2 .pw{display:flex;align-items:center;justify-content:center;gap:3px;font-size:11px;color:var(--ink3);font-weight:600}.vs .side2 .pw svg{width:13px;height:13px}
.meutes .fams{display:grid;gap:8px;margin:8px 0}.fam{display:flex;gap:10px;align-items:center;padding:8px;border-radius:5px;background:var(--vsoft);border:1px solid rgba(79,216,255,.2)}.fam .fi svg{width:38px;height:38px}
.fam .ft{display:grid;gap:1px}.fam .ft b{font-family:var(--display);font-weight:700;letter-spacing:.02em}.fam .ft small{font-size:12px;color:var(--ink2)}.fam .ft em{font-style:normal;font-size:12px;color:var(--mint2);font-weight:600}
.muted a{color:var(--v1);font-weight:600;text-decoration:none}.gnote{margin:8px 2px 0;font-size:12.5px}

#tpbar{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 200px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:6px;background:var(--dark);border:1px solid var(--line);color:var(--ink);font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.02em;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.45);pointer-events:auto;animation:pulse 1.6s infinite}
#tpbar .btn{min-height:34px}
#homedir{position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;background:var(--dark);border:2px solid var(--gold1);display:grid;place-items:center;pointer-events:auto;box-shadow:0 6px 18px rgba(0,0,0,.5)}
#homedir span svg{width:26px;height:26px}
#homedir i{position:absolute;inset:-14px;display:flex;justify-content:center;pointer-events:none}
#homedir i svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.bub.harvest{position:relative;width:50px;height:50px;background:radial-gradient(circle at 50% 40%,#17304f,#0a1220 70%);animation:bob 1.8s ease-in-out infinite}
.bub.harvest::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(#4fd8ff var(--k),rgba(79,216,255,.18) 0);-webkit-mask:radial-gradient(circle,transparent 62%,#000 64%);mask:radial-gradient(circle,transparent 62%,#000 64%)}
.bub.harvest.full::before{background:conic-gradient(#ffc24a 100%,transparent 0)}
.bub.harvest.full{border-color:var(--gold1);animation:bob 1.8s ease-in-out infinite,harvestGlow 1.2s ease-in-out infinite}
@keyframes harvestGlow{50%{box-shadow:0 0 0 6px rgba(255,194,74,.35),0 5px 14px rgba(0,0,0,.4)}}
.bub.harvest small{position:absolute;top:-15px;left:50%;transform:translateX(-50%);padding:1px 7px;border-radius:3px;background:var(--dark);border:1px solid var(--vline);color:var(--ink);font:700 10.5px/1.5 var(--display);white-space:nowrap}
.gain{position:fixed;left:0;top:0;pointer-events:none;z-index:7;font:700 23px/1 var(--display);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 14px rgba(255,194,74,.8);white-space:nowrap}