:root { color-scheme: dark; --ink:#f0efdd; --muted:#a1aea7; --amber:#ecc183; --orange:#e7a464; --line:#8ca89a33; --panel:#172326; --mono:Consolas,'Courier New',monospace; font-family:'Segoe UI',Arial,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:#111c20; color:var(--ink); overflow:hidden; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button,input,select { font:inherit; }
button { color:inherit; cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.45; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible { outline:2px solid var(--amber); outline-offset:4px; }
[hidden] { display:none!important; }
button { border:0; }
#game-shell { width:100%; height:100vh; height:100dvh; min-height:320px; position:relative; overflow:hidden; }
#world { width:100%; height:100%; display:block; outline:none; touch-action:none; }
body.playing #world { cursor:none; }
.screen-grain { position:absolute; inset:0; pointer-events:none; opacity:.07; background:repeating-linear-gradient(0deg,transparent,transparent 3px,#0c161b 3px,#0c161b 4px); }
.eyebrow { font:600 12px var(--mono); letter-spacing:.17em; text-transform:uppercase; color:var(--muted); }
.muted { color:var(--muted); }
.status-dot { display:inline-block; width:6px; height:6px; background:#b1c895; box-shadow:0 0 12px #b1c85d55; border-radius:50%; }
.topbar { position:absolute; top:0; left:0; right:0; height:90px; padding:0 4.2%; display:flex; align-items:center; gap:24px; z-index:5; }
.wordmark { font-size:29px; font-weight:900; letter-spacing:-3px; }
.wordmark span { color:var(--amber); }
.topbar-sector { display:flex; align-items:center; gap:11px; font:11px var(--mono); letter-spacing:.14em; }
.topbar-actions { display:flex; gap:20px; align-items:center; margin-left:auto; }
.text-button,.icon-button { background:none; padding:6px; font:700 13px var(--mono); }
.text-button span { opacity:.4; }
.icon-button { font-size:23px; }
.menu-screen { position:absolute; inset:0; display:flex; align-items:center; padding:90px 10% 85px; background:linear-gradient(90deg,#0e1b20f5 0%,#0e1b20d4 29%,#0e1b2080 60%,#0e1b2033 100%); }
.menu-main { position:relative; z-index:1; width:570px; max-width:60%; }
.menu-main .eyebrow { display:flex; align-items:center; gap:13px; color:var(--amber); }
.small-line { display:inline-block; width:25px; height:1px; background:var(--amber); }
.edition { color:#728680; margin-left:10px; }
h1 { position:relative; margin:21px 0 22px; font-family:Impact,'Arial Narrow','Segoe UI',sans-serif; font-size:clamp(85px,10.3vw,155px); line-height:.83; font-weight:900; letter-spacing:.015em; }
h1 span { color:var(--amber); }
h1 b { color:#bc7251; font-weight:inherit; }
.menu-tagline { font-size:20px; font-weight:500; margin:27px 0 10px; }
.menu-intro { color:var(--muted); font-size:15px; line-height:1.6; max-width:350px; }
.primary-button { background:var(--amber); color:#1c2929; min-height:52px; padding:16px 24px; font-weight:800; font-size:14px; letter-spacing:.05em; display:flex; justify-content:center; align-items:center; gap:14px; border:1px solid var(--amber); transition:background .15s,transform .15s; }
.primary-button:hover { background:#fbd8a3; transform:translateY(-1px); }
.play-button { margin-top:31px; width:280px; height:62px; justify-content:flex-start; letter-spacing:.14em; }
.play-button>span:last-child { margin-left:auto; font-size:23px; font-weight:400; }
.play-icon { font-size:14px; }
.menu-links { display:flex; gap:15px; margin:21px 0 30px; align-items:center; font-size:14px; }
.menu-links button { padding:4px 0; background:none; color:#c2cdc4; }
.menu-links button:hover { color:var(--amber); }
.menu-links>span { color:#566a67; }
.best-record { font:12px var(--mono); color:var(--muted); display:flex; gap:16px; align-items:center; }
.best-record strong { color:var(--amber); font-weight:500; }
.menu-footer { position:absolute; bottom:25px; left:4.2%; right:4.2%; display:flex; justify-content:space-between; font:11px var(--mono); letter-spacing:.06em; color:#a9b6ac; }
.menu-footer a:hover { color:var(--amber); }
.mission-card { margin-left:auto; margin-top:100px; width:255px; padding:25px; background:#132024bd; border:1px solid #9db29e35; backdrop-filter:blur(4px); transform:rotate(2deg); }
.mission-top { display:flex; justify-content:space-between; align-items:center; }
.mission-grid { display:grid; grid-template-columns:1fr 1fr; gap:65px; font:17px var(--mono); color:#aec1a64d; margin:25px 0; }
.mission-grid span:nth-child(even) { text-align:right; }
.mission-card h2 { font-size:28px; margin:8px 0 13px; font-weight:600; }
.mission-card p { color:#b1c0b4; font-size:14px; line-height:1.6; }
.mission-divider { border-top:1px solid var(--line); margin:20px 0; }
.mission-note { font-size:13px!important; }
.mission-coordinate { color:#91a18f; font:11px var(--mono); margin-top:20px; }
.mission-coordinate span { color:var(--amber); padding:0 8px; }
.loading-screen { position:absolute; inset:0; z-index:30; background:#111c20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; }
.loading-logo { font-family:Impact,'Arial Narrow',sans-serif; font-size:clamp(50px,10vw,94px); letter-spacing:.02em; }
.loading-logo span { color:var(--amber); }
.loading-screen p { font:11px var(--mono); color:var(--muted); letter-spacing:.07em; }
.loading-track { width:260px; height:3px; background:#3e4b47; overflow:hidden; }
.loading-track span { display:block; width:35%; height:100%; background:var(--amber); animation:load 1s ease-in-out infinite; }
@keyframes load { from { transform:translateX(-100%); } to { transform:translateX(390%); } }
.hud-top { position:absolute; top:25px; left:30px; right:30px; display:flex; align-items:flex-start; gap:27px; pointer-events:none; }
.wave-block { display:grid; grid-template-columns:auto auto; gap:2px 12px; align-items:center; }
.wave-block>.eyebrow { grid-column:1; color:#bdc9b8; }
.wave-block strong { grid-column:1; grid-row:2; font:700 43px var(--mono); line-height:1.05; }
#wave-status { grid-column:2; grid-row:2; color:#b8c7b5; font:12px var(--mono); max-width:120px; }
.hud-money { margin-left:auto; text-align:right; display:flex; flex-direction:column; gap:5px; }
.hud-money strong { color:var(--amber); font:700 27px var(--mono); }
.hud-money small { font-size:20px; }
.hud-actions { display:flex; gap:8px; pointer-events:auto; }
.hud-button { background:#132124dd; border:1px solid #a4b49344; padding:12px; min-height:45px; font-size:14px; display:flex; align-items:center; gap:12px; }
.hud-button:hover { background:#344840; }
kbd { display:inline-flex; min-width:22px; height:22px; padding:2px 4px; align-items:center; justify-content:center; border:1px solid #b9c3a94d; border-radius:2px; color:#d0d5be; font:11px var(--mono); }
.hud-bottom { position:absolute; left:30px; right:30px; bottom:25px; display:flex; align-items:flex-end; gap:35px; pointer-events:none; }
.vitals { width:220px; padding:14px; background:#102024c9; border-left:2px solid #becaa2; }
.vital-heading { display:flex; justify-content:space-between; font:11px var(--mono); gap:10px; }
.vital-heading strong { color:#e7e9ce; font-weight:400; }
.health-track { height:6px; background:#a977633d; margin-top:9px; }
.health-track span { display:block; height:100%; background:#b9c991; width:100%; transition:width .1s; }
.vitals.critical .health-track span { background:#e68566; }
.stamina-track { height:2px; margin-top:6px; background:#89978640; }
.stamina-track span { display:block; height:100%; width:100%; background:#7bbfae; }
.armor-status { font:10px var(--mono); color:#97cabc; display:block; min-height:10px; margin-top:7px; }
.gear { display:flex; gap:8px; pointer-events:auto; }
.gear-button { display:flex; align-items:center; gap:9px; min-height:46px; padding:11px; background:#112125b8; border:1px solid #81927c40; }
.gear-button>span:first-child { color:var(--amber); font-size:20px; }
.ammo-panel { margin-left:auto; text-align:right; padding:10px 0 10px 20px; text-shadow:0 2px 10px #071516; }
#weapon-name { font:12px var(--mono); text-transform:uppercase; color:var(--amber); }
.ammo-panel>div { margin:5px 0; display:flex; align-items:baseline; justify-content:flex-end; gap:9px; }
#ammo-count { font:700 48px var(--mono); line-height:1; }
#ammo-reserve { font:17px var(--mono); color:#b3c3b8; }
#reload-button { background:none; display:inline-flex; gap:7px; align-items:center; color:#b5c1ae; font-size:12px; pointer-events:auto; }
.wave-banner { position:absolute; top:19%; left:50%; transform:translateX(-50%); text-align:center; pointer-events:none; width:min(600px,90%); text-shadow:0 3px 20px #000; }
.wave-banner p { font:12px var(--mono); letter-spacing:.16em; color:var(--amber); }
.wave-banner strong { display:block; font-size:clamp(25px,4vw,45px); font-weight:800; letter-spacing:.045em; }
.wave-banner>span { display:block; margin-top:10px; color:#d1d9ba; font:14px var(--mono); }
.interaction { position:absolute; bottom:150px; left:50%; transform:translateX(-50%); padding:12px 18px; background:#142423f2; border:1px solid #d9b97c77; font-size:14px; text-align:center; display:flex; align-items:center; gap:10px; }
.next-wave { position:absolute; top:100px; left:30px; color:var(--amber); font:12px var(--mono); background:#172422bd; border:1px solid #c5af7455; padding:9px 12px; }
.active-buffs { position:absolute; top:150px; left:30px; display:flex; flex-direction:column; gap:8px; font:12px var(--mono); color:var(--amber); }
.active-buffs span { background:#171e27d9; border-left:2px solid #c497d6; padding:9px 12px; }
.overlay { position:absolute; inset:0; z-index:15; background:#071319bc; backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:25px; }
.panel { width:min(840px,100%); max-height:calc(100dvh - 50px); overflow:auto; background:#172326f5; border:1px solid #94ac9240; box-shadow:0 30px 100px #0007; padding:32px; outline:none; }
.panel.compact { max-width:440px; }
.panel-top { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:24px; }
.panel h2 { font-size:32px; line-height:1.1; margin:7px 0 0; font-weight:650; }
.panel h3 { font-size:14px; font-weight:500; color:var(--amber); margin:24px 0 14px; letter-spacing:.06em; }
.panel p { color:var(--muted); line-height:1.65; font-size:15px; }
.close-button { width:38px; height:38px; flex-shrink:0; color:var(--muted); border:1px solid var(--line); background:none; font-size:24px; }
.close-button:hover { background:#435748; color:#fff; }
.stack { display:flex; flex-direction:column; gap:10px; margin-top:23px; }
.secondary-button { background:transparent; border:1px solid #a2b09a4d; min-height:48px; padding:12px 18px; font-size:14px; }
.secondary-button:hover { border-color:var(--amber); color:var(--amber); }
.shop-balance { color:var(--amber); font:24px var(--mono); margin-top:10px; }
.shop-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.shop-tabs button { font-size:14px; background:none; padding:12px 19px; color:var(--muted); border-bottom:2px solid transparent; }
.shop-tabs button.active { color:var(--amber); border-color:var(--amber); }
.shop-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.shop-item { padding:18px; border:1px solid #839c8433; background:#8caa8b05; display:grid; grid-template-columns:1fr auto; gap:10px; }
.shop-item h3 { font-size:16px; font-weight:650; margin:0; color:#e5e6cf; letter-spacing:0; }
.shop-item p { font-size:13px; margin:5px 0 12px; grid-column:1/-1; min-height:36px; }
.shop-item .item-symbol { color:#bdbb98; font:24px var(--mono); grid-column:2; grid-row:1; }
.shop-item button { grid-column:1/-1; border:1px solid #cfb78866; min-height:38px; background:#d3b0790c; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 11px; font-size:13px; color:var(--amber); }
.shop-item button:hover:not(:disabled) { background:#c1ae7233; }
.shop-item .owned-item { border-color:#82bcb166; color:#a6d1bc; }
.shop-note { font:12px var(--mono)!important; margin-bottom:0; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:13px 0; border-bottom:1px solid var(--line); font-size:14px; }
select { background:#233332; color:var(--ink); border:1px solid #76958366; padding:8px; max-width:50%; }
input[type=range] { accent-color:var(--amber); width:145px; }
input[type=checkbox] { accent-color:var(--amber); width:19px; height:19px; }
.bindings-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 30px; }
.binding-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid #8fa28c1a; font-size:13px; }
.binding-row button { background:#93a58f12; border:1px solid #a5b79c55; min-width:53px; min-height:32px; padding:6px; font:12px var(--mono); color:var(--amber); }
.binding-row button.listening { background:#dcc591; color:#1a2724; }
.help-list { display:grid; gap:16px; counter-reset:help; }
.help-list p { margin:0; padding-left:40px; position:relative; }
.help-list p::before { counter-increment:help; content:'0' counter(help); position:absolute; left:0; top:2px; font:13px var(--mono); color:var(--amber); }
.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:25px 0; }
.result-grid div { display:flex; flex-direction:column; gap:8px; }
.result-grid strong { font:29px var(--mono); }
.result-grid span { font:10px var(--mono); color:var(--muted); letter-spacing:.1em; }
.toast { position:absolute; z-index:25; bottom:130px; left:50%; transform:translateX(-50%); background:#243831f2; border:1px solid #d5bf8580; box-shadow:0 6px 30px #0005; color:#eddfb3; padding:13px 20px; font-size:14px; text-align:center; max-width:90%; }
.touch-controls { display:none; }
@media (pointer:coarse) {
  .touch-controls { display:block; position:absolute; inset:0; pointer-events:none; }
  .touch-pad { position:absolute; bottom:140px; left:25px; width:110px; height:110px; border:1px solid #c6d0ad50; border-radius:50%; background:#c2d1a40a; display:flex; align-items:center; justify-content:center; pointer-events:auto; touch-action:none; }
  .touch-pad span { display:block; width:44px; height:44px; border:1px solid #d4d9b444; border-radius:50%; background:#d4d9b41a; text-align:center; font-size:30px; color:#bdc6b6; line-height:40px; }
  .aim-pad { left:auto; right:25px; }
  .touch-controls>button { position:absolute; pointer-events:auto; touch-action:none; bottom:140px; background:#233734dd; border:1px solid #c5c89e66; width:40px; height:40px; border-radius:50%; }
  #touch-interact { right:150px; bottom:195px; }
  #touch-weapon { right:150px; }
  #touch-sprint { left:150px; }
  .gear-button kbd,#reload-button kbd,.hud-button kbd { display:none; }
  .interaction { bottom:270px; }
}
@media (max-width:900px) {
  .menu-screen { padding-left:8%; padding-right:6%; }
  .mission-card { width:210px; padding:20px; }
  .mission-grid { gap:45px; }
  .menu-main { max-width:65%; }
}
@media (max-width:650px) {
  .topbar { height:67px; padding:0 22px; gap:14px; }
  .topbar-sector { font-size:9px; letter-spacing:0; }
  .topbar-actions { gap:7px; }
  .mission-card { display:none; }
  .menu-main { max-width:100%; width:auto; }
  .menu-screen { padding:82px 8% 62px; }
  h1 { font-size:clamp(82px,22vw,135px); margin:18px 0; }
  .menu-tagline { font-size:18px; margin-top:22px; }
  .menu-intro { font-size:14px; }
  .play-button { margin-top:22px; height:54px; width:255px; }
  .menu-links { margin-bottom:23px; }
  .menu-footer { font-size:9px; left:8%; right:8%; }
  .menu-footer>span { max-width:145px; text-align:right; }
  .hud-top { top:17px; left:16px; right:16px; gap:10px; }
  .wave-block { gap:2px 6px; }
  .wave-block strong { font-size:32px; }
  #wave-status { font-size:10px; max-width:80px; }
  .hud-money strong { font-size:21px; }
  .hud-top .eyebrow { font-size:9px; }
  .hud-button { padding:9px; font-size:12px; }
  .hud-bottom { left:16px; right:16px; bottom:22px; gap:10px; }
  .vitals { width:150px; padding:10px; }
  .gear { position:absolute; bottom:93px; left:0; }
  .gear-button { padding:7px 10px; min-height:36px; }
  #ammo-count { font-size:38px; }
  #weapon-name { font-size:10px; }
  .ammo-panel { padding:10px 0; }
  .overlay { padding:12px; }
  .panel { padding:22px; max-height:calc(100dvh - 24px); }
  .panel h2 { font-size:27px; }
  .shop-grid { grid-template-columns:1fr; }
  .shop-item p { min-height:0; }
  .bindings-grid { grid-template-columns:1fr; }
  .next-wave { left:16px; top:86px; }
  .active-buffs { left:16px; top:135px; font-size:10px; }
  .toast { bottom:125px; font-size:13px; width:max-content; max-width:85%; }
}
@media (max-height:620px) and (min-width:651px) {
  .topbar { height:60px; }
  .menu-screen { padding-top:67px; padding-bottom:50px; }
  h1 { font-size:82px; margin:12px 0; }
  .menu-tagline { margin:16px 0 6px; font-size:18px; }
  .menu-intro { margin:5px 0; }
  .play-button { margin-top:17px; height:48px; min-height:48px; }
  .menu-links { margin:12px 0; }
  .mission-card { margin-top:40px; }
  .mission-grid { margin:13px 0; gap:25px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Préparation et lisibilité du combat. */
.menu-screen { gap:5%; padding-left:8%; padding-right:8%; overflow-y:auto; }
.menu-main { width:510px; max-width:48%; flex-shrink:0; }
.mission-card { width:410px; max-width:48%; margin-top:0; padding:24px; transform:none; background:#142329ed; box-shadow:0 24px 80px #0005; border-top:2px solid #b8c398; }
.mission-card h2 { font-size:25px; margin:12px 0 7px; }
.mission-card p { font-size:13px; margin:8px 0 14px; line-height:1.5; }
.map-options { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:17px 0 12px; }
.map-options button { min-height:51px; border:1px solid #8ca89a44; background:#213239; color:#b9c8bd; font-size:11px; padding:8px 3px; }
.map-options button span { display:block; font:16px var(--mono); color:#9cb7aa; margin-bottom:5px; }
.map-options button[aria-pressed=true] { border-color:var(--amber); background:#e6b67812; color:var(--amber); }
.map-options button[aria-pressed=true] span { color:var(--amber); }
#sector-preview { display:block; width:100%; height:auto; border:1px solid #8ca89a22; background:#0b171d; }
.deployment-row { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding:10px 0; font-size:12px; }
.deployment-row select { max-width:68%; font-size:12px; }
.mission-card .mission-objective { margin:10px 0 0; border-left:2px solid var(--amber); padding:4px 0 4px 11px; color:#e0d7b7; font-size:12px; }
.mission-card #difficulty-hint { font-size:11px!important; color:#9fb0a8; min-height:30px; margin:4px 0; }
.weapon-art { width:180px; max-width:100%; height:62px; object-fit:contain; grid-column:1/-1; margin:auto; filter:drop-shadow(0 7px 7px #0008); }
.shop-item { position:relative; background:linear-gradient(130deg,#8caa8b0a,transparent); }
.shop-item h3 { grid-column:1/-1; }
.shop-item h3 small { color:var(--amber); }
.shop-item p { margin-bottom:3px; }
.weapon-stats { display:grid; grid-template-columns:repeat(4,1fr); grid-column:1/-1; padding:10px 0; border-top:1px solid var(--line); gap:8px; }
.weapon-stats span { display:flex; flex-direction:column; gap:5px; font-size:10px; color:var(--muted); }
.weapon-stats b { font:13px var(--mono); color:var(--ink); }
.repair-track { display:block; height:3px; background:#a8b89233; margin-top:8px; }
.repair-track i { display:block; height:3px; background:var(--amber); }
.mission-status { position:absolute; top:105px; left:50%; transform:translateX(-50%); color:#bfccb9; text-shadow:0 2px 7px #000; background:#12232baf; border:1px solid #8ca89a22; padding:7px 13px; font:10px var(--mono); letter-spacing:.03em; text-align:center; pointer-events:none; max-width:60%; }
.mission-status.extraction-active { color:#c4e9c4; border-color:#9fcda277; font-size:12px; }
.weapon-belt { position:absolute; bottom:25px; left:50%; transform:translateX(-50%); display:flex; gap:4px; max-width:50%; overflow-x:auto; }
.weapon-belt button { flex:0 0 56px; height:38px; position:relative; background:#13252bcc; border:1px solid #adc1a344; padding:3px; }
.weapon-belt button[aria-pressed=true] { border-color:var(--amber); background:#544b32c7; }
.weapon-belt img { width:100%; height:100%; object-fit:contain; }
.weapon-belt kbd { position:absolute; left:1px; top:1px; min-width:11px; height:12px; font-size:8px; padding:0; background:#13252b; }
.boss-status { position:absolute; top:151px; left:50%; transform:translateX(-50%); width:min(350px,50%); text-align:center; color:#e7b197; font:10px var(--mono); pointer-events:none; text-shadow:0 2px 7px #000; }
.boss-status>div { height:5px; margin-top:7px; background:#361e1cdf; border:1px solid #c1837055; }
.boss-status i { display:block; height:100%; background:#d88f73; }
.wave-banner { top:25%; }
.touch-controls #touch-sprint[aria-pressed=true] { background:#bdab70; color:#15272a; }
@media (max-width:1100px) and (min-width:701px) {
  .menu-screen { padding-left:5%; padding-right:5%; gap:4%; }
  .mission-card { padding:18px; }
  .menu-main { max-width:47%; }
  h1 { font-size:110px; }
  .menu-main .eyebrow { font-size:10px; gap:7px; }
}
@media (max-height:760px) and (min-width:701px) {
  .menu-screen { align-items:flex-start; padding-top:85px; padding-bottom:60px; }
  .menu-main { padding-top:25px; }
  h1 { font-size:100px; }
  #sector-preview { max-height:110px; object-fit:contain; }
  .mission-card { padding:16px; }
  .mission-card h2 { margin-top:8px; }
  .menu-footer { position:fixed; background:#101e24f0; padding:10px; bottom:0; left:0; right:0; }
}
@media (max-width:700px) {
  .menu-screen { display:flex; flex-direction:column; align-items:stretch; gap:24px; padding:83px 7% 65px; }
  .menu-main { max-width:none; width:100%; }
  .menu-main h1 { font-size:85px; margin:14px 0; }
  .menu-tagline { font-size:17px; margin:14px 0 5px; }
  .menu-intro { margin:6px 0; }
  .menu-main>.eyebrow { font-size:10px; }
  .play-button { width:100%; margin-top:18px; height:50px; }
  .menu-links { margin:14px 0; }
  .mission-card { display:block; max-width:none; width:100%; margin:0; padding:18px; }
  #sector-preview { max-height:125px; object-fit:contain; }
  .menu-footer { position:fixed; bottom:0; left:0; right:0; background:#101e2af5; padding:12px 7%; z-index:3; }
  .topbar { background:#101e2af5; height:65px; }
  .topbar-sector { display:none; }
  .weapon-belt { bottom:115px; left:16px; transform:none; max-width:calc(100% - 32px); }
  .weapon-belt button { flex-basis:41px; height:30px; }
  .gear { bottom:65px; }
  .mission-status { top:123px; max-width:90%; width:max-content; font-size:9px; padding:5px 9px; }
  .boss-status { top:155px; width:70%; }
  .interaction { max-width:92%; width:max-content; font-size:12px; bottom:170px; padding:10px; }
  .active-buffs { top:188px; }
  .wave-banner { top:31%; }
  .hud-actions .hud-button { min-height:42px; }
}
@media (pointer:coarse) {
  .weapon-belt { bottom:115px; }
  .interaction { bottom:265px; }
  .touch-controls>button { width:44px; height:44px; }
  .touch-pad { bottom:157px; }
  .gear-button { min-height:42px; }
}
@media (max-height:500px) and (min-width:701px) {
  .hud-top { top:12px; }
  .hud-bottom { bottom:10px; }
  .mission-status { top:72px; font-size:9px; }
  .boss-status { top:103px; }
  .weapon-belt { bottom:12px; }
  .wave-banner { top:33%; }
  .touch-pad { bottom:94px; width:85px; height:85px; }
  .touch-controls>button { bottom:100px; }
  #touch-interact { bottom:150px; }
  .interaction { bottom:190px; }
}

/* Spécialités : préparation et commande utilisable au clavier comme au toucher. */
.menu-screen { align-items:flex-start; }
.menu-main h1 { font-size:clamp(78px,8vw,116px); margin:18px 0; }
.menu-tagline { margin-top:18px; }
.class-picker { --class-color:var(--amber); border:0; padding:0; margin:22px 0 0; max-width:440px; min-width:0; }
.class-picker legend { font:12px var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:10px; }
.class-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.class-options button { display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 6px; min-height:46px; background:#14262c; border:1px solid #91a99d44; font-size:14px; }
.class-options button>span { font:24px var(--mono); color:var(--class-color); line-height:1; }
.class-options button[aria-pressed=true] { color:var(--class-color); border-color:var(--class-color); background:#2a3b3e; box-shadow:inset 0 -2px var(--class-color); }
.class-passive { font-size:13px; line-height:1.5; color:#c1cdc4; margin:12px 0 8px; }
.class-skill { border-left:2px solid var(--class-color); padding-left:12px; margin:0; min-height:65px; }
.class-skill strong { display:block; color:var(--class-color); font:600 12px var(--mono); letter-spacing:.08em; margin-bottom:5px; }
.class-skill span { display:block; font-size:14px; line-height:1.5; color:#c4cec6; }
.menu-main .play-button { margin-top:22px; }
.menu-footer { position:fixed; bottom:0; left:0; right:0; padding:12px 4.2%; background:#101e24f2; z-index:3; }
.ability-button { --class-color:var(--amber); position:absolute; left:30px; bottom:144px; width:210px; padding:11px 13px 14px; background:#10222bf2; border:1px solid var(--class-color); text-align:left; pointer-events:auto; touch-action:manipulation; color:var(--ink); }
.ability-button>span:first-child { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
.ability-button>strong { display:block; font:600 14px var(--mono); color:var(--class-color); }
.ability-state { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; font:12px var(--mono); }
.ability-button:disabled { opacity:.8; }
.ability-button.is-active { background:#283e43; box-shadow:0 0 18px #b7d7c11c; }
.ability-track { position:absolute; bottom:0; left:0; right:0; height:3px; background:#81958a33; }
.ability-track i { display:block; height:100%; width:100%; background:var(--class-color); }
@media (max-width:700px) {
  .class-picker { max-width:none; margin-top:18px; }
  .menu-main h1 { font-size:85px; }
  .ability-button { left:auto; right:16px; bottom:157px; width:174px; padding:8px 10px 11px; }
  .ability-button>strong { font-size:12px; }
  .ability-button>span:first-child { display:none; }
  .ability-state { margin-top:5px; }
}
@media (pointer:coarse) {
  .ability-button { left:50%; right:auto; transform:translateX(-50%); bottom:166px; width:156px; }
  .ability-button kbd { display:none; }
  .ability-button>span:first-child { display:none; }
  .ability-button>strong { font-size:12px; }
  .ability-state { justify-content:center; }
}
@media (pointer:coarse) and (max-width:520px) {
  .ability-button { bottom:287px; }
}
@media (max-height:500px) and (min-width:701px) {
  .ability-button { bottom:126px; width:168px; padding:7px 10px 10px; }
  .ability-button>span:first-child { display:none; }
  .ability-button>strong { font-size:12px; }
}

/* Interface radio compacte : laisse le centre du combat libre. */
.toast { top:108px; right:28px; left:auto; bottom:auto; transform:none; width:300px; max-width:32vw; padding:0; background:none; border:0; box-shadow:none; text-align:left; pointer-events:none; display:grid; gap:8px; }
.notice { --notice-accent:#99b2c1; display:flex; align-items:flex-start; gap:11px; padding:13px 14px; border:1px solid #6a83904d; border-left:3px solid var(--notice-accent); border-radius:3px; background:linear-gradient(110deg,#14212bf5,#101a22ed); box-shadow:0 8px 25px #0004; animation:notice-in .18s ease-out; }
.notice-success { --notice-accent:#8ac9b3; }
.notice-danger { --notice-accent:#e9a17b; }
.notice-icon { flex:0 0 21px; display:grid; place-items:center; height:21px; border:1px solid var(--notice-accent); border-radius:50%; color:var(--notice-accent); font:700 13px var(--mono); }
.notice strong { display:block; font:600 12px var(--mono); letter-spacing:.08em; color:var(--notice-accent); margin:2px 0 6px; }
.notice p { margin:0; color:#d5dfe2; font-size:14px; line-height:1.45; }
.notice-count { margin-left:auto; color:var(--notice-accent); font:12px var(--mono); white-space:nowrap; }
@keyframes notice-in { from { opacity:0; transform:translateX(8px); } to { opacity:1; transform:translateX(0); } }
.wave-banner { top:109px; left:30px; transform:none; width:270px; max-width:28%; padding:13px 16px; text-align:left; text-shadow:none; background:#101c25e8; border-left:2px solid #d8bc89; border-bottom:1px solid #6c819333; }
.wave-banner p { font-size:11px; margin:0 0 7px; letter-spacing:.12em; }
.wave-banner p:empty { display:none; }
.wave-banner strong { font:600 21px var(--mono); letter-spacing:.03em; }
.wave-banner>span { margin-top:6px; font-size:13px; line-height:1.45; color:#b4c2ca; }
.active-buffs { top:232px; }
.active-buffs span { background:#14212bed; border-color:#8297bb; padding:6px 10px; }
.shop-item { background:linear-gradient(135deg,#25344180,#13212d); border-color:#768c9d40; border-radius:4px; gap:12px; }
.shop-item h3 { font-size:17px; color:#e1e5e4; }
.weapon-art { width:100%; height:128px; padding:8px; background:radial-gradient(ellipse,#51627155,transparent 70%); }
.weapon-stats span { font-size:12px; }
.weapon-stats b { font-size:14px; }
.shop-item p { font-size:14px; color:#acbbc4; }
.shop-item button { min-height:44px; font-size:14px; }
.weapon-belt { gap:5px; }
.weapon-belt button { flex-basis:65px; height:44px; border-radius:3px; background:#14222bea; }
.weapon-belt img { padding:3px; }
.sector-locked { opacity:.7!important; background:repeating-linear-gradient(135deg,#121d25,#121d25 9px,#17232b 9px,#17232b 10px)!important; }
.sector-locked span { color:#71828c!important; }
.mission-card { border-top-color:#a0b4bd; }
.mission-card .mission-objective { font-size:14px; }
.mission-card #difficulty-hint { font-size:13px!important; min-height:40px; }
.map-options button { font-size:13px; }
.deployment-row,.deployment-row select { font-size:14px; }
.interaction { background:#111e29f2; border:1px solid #76899b66; box-shadow:0 8px 28px #0005; border-radius:4px; }
@media (max-width:700px) {
  .toast { top:188px; right:12px; width:235px; max-width:58%; }
  .notice { padding:9px 10px; gap:8px; }
  .notice p { font-size:13px; }
  .notice strong { font-size:11px; }
  .notice:nth-child(n+2) { display:none; }
  .wave-banner { left:16px; top:188px; max-width:36%; padding:10px; }
  .wave-banner strong { font-size:16px; }
  .wave-banner>span { font-size:12px; }
  .active-buffs { top:302px; max-width:44%; }
  .weapon-belt button { flex-basis:43px; height:34px; }
}
@media (max-height:500px) and (min-width:701px) {
  .toast { top:90px; max-width:29%; }
  .notice:nth-child(n+2) { display:none; }
  .wave-banner { top:89px; left:30%; width:250px; max-width:34%; padding:7px 12px; }
  .wave-banner strong { font-size:16px; }
  .wave-banner>span { font-size:12px; }
  .active-buffs { top:154px; }
}
@media (prefers-reduced-motion:reduce) { .notice { animation:none; } }

/* Signal noir : objectifs lisibles en périphérie, choix d'atout entre les combats. */
.promotion-panel { max-width:1000px; }
.promotion-intro { color:#bfcdd2; max-width:650px; line-height:1.6; }
.perk-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:28px 0 22px; }
.perk-card { display:flex; flex-direction:column; align-items:flex-start; text-align:left; min-height:300px; padding:25px 22px 18px; color:#e3e8e5; border:1px solid #748c9855; border-top:3px solid var(--perk-color); border-radius:5px; background:linear-gradient(155deg,#30414c,#15232d 65%); transition:background .15s,border-color .15s; }
.perk-card:hover,.perk-card:focus-visible { background:linear-gradient(155deg,#3d5560,#1c3039); border-color:var(--perk-color); outline:2px solid var(--perk-color); outline-offset:3px; }
.perk-icon { display:grid; place-items:center; width:53px; height:53px; margin-bottom:27px; border:1px solid var(--perk-color); color:var(--perk-color); border-radius:50%; font:30px var(--mono); }
.perk-card .eyebrow { font-size:10px; color:var(--perk-color); letter-spacing:.08em; }
.perk-card strong { margin:10px 0 13px; font-size:22px; line-height:1.2; }
.perk-description { color:#b8c9ce; font-size:15px; line-height:1.55; }
.perk-select { margin-top:auto; padding-top:24px; color:var(--perk-color); font:12px var(--mono); }
.acquired-perks { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.acquired-perks span { color:#b9d7ca; border:1px solid #749b8c55; padding:7px 9px; font-size:12px; }
.field-status { position:absolute; top:318px; left:30px; width:228px; padding:12px 14px; background:#101e27df; border-left:2px solid #80bebc; pointer-events:none; color:#a4c9c6; }
.field-status strong { display:block; font:11px var(--mono); letter-spacing:.05em; }
.field-status>span { display:block; margin-top:6px; font-size:12px; line-height:1.45; color:#b2c0c9; }
.field-status>div,.streak-status>div { height:3px; background:#354d5366; margin-top:9px; }
.field-status i,.streak-status i { display:block; height:100%; width:0; background:#83c8c2; transition:width .08s linear; }
.field-status.contested { border-color:#e89b7f; }
.field-status.contested i { background:#e89b7f; }
.event-status { position:absolute; top:77px; left:50%; transform:translateX(-50%); padding:5px 12px; border:1px solid #ddaf6755; background:#2c281cee; color:#e7c386; font:10px var(--mono); letter-spacing:.08em; pointer-events:none; white-space:nowrap; }
.streak-status { position:absolute; right:30px; bottom:290px; color:#ebc896; text-align:right; pointer-events:none; }
.streak-status strong { font:600 17px var(--mono); }
.streak-status i { background:#e9bd7d; float:right; }
.next-wave { top:86px; z-index:2; }
.wave-banner { top:132px; }
.run-detail { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 22px; }
.run-detail>div { display:flex; flex-direction:column; gap:6px; padding:11px; background:#1c303b99; }
.run-detail span { font:10px var(--mono); color:#9cbbc0; }
.run-detail strong { color:#e4ce9e; font:21px var(--mono); }
@media (max-width:700px) {
  .perk-grid { grid-template-columns:1fr; gap:12px; margin:18px 0; }
  .perk-card { min-height:0; padding:16px 18px; display:grid; grid-template-columns:46px 1fr; column-gap:15px; }
  .perk-icon { grid-column:1; grid-row:1 / 5; width:42px; height:42px; font-size:24px; margin:2px 0; }
  .perk-card .eyebrow,.perk-card strong,.perk-description,.perk-select { grid-column:2; }
  .perk-card strong { font-size:18px; margin:5px 0 7px; }
  .perk-description { font-size:13px; }
  .perk-select { padding-top:12px; }
  .field-status { top:150px; left:16px; width:calc(100% - 32px); padding:6px 10px; border-left-width:2px; }
  .field-status strong { font-size:10px; }
  .field-status>span { font-size:11px; margin-top:3px; }
  .field-status>div { margin-top:5px; height:2px; }
  .boss-status { top:224px; width:65%; }
  .event-status { top:97px; font-size:9px; }
  .toast,.wave-banner { top:254px; }
  .active-buffs { top:360px; }
  .streak-status { right:16px; bottom:240px; }
  .streak-status strong { font-size:12px; }
}
@media (max-height:650px) and (min-width:701px) {
  .field-status { top:auto; bottom:242px; width:210px; padding:7px 10px; }
  .field-status>span { display:none; }
  .streak-status { bottom:266px; }
  .event-status { top:49px; }
}
@media (max-height:500px) and (min-width:701px) {
  .field-status { bottom:220px; }
  .wave-banner { top:110px; }
  .perk-card { min-height:230px; padding:15px; }
  .perk-icon { margin-bottom:12px; width:38px; height:38px; }
}
@media (prefers-reduced-motion:reduce) { .perk-card,.field-status i,.streak-status i { transition:none; } }

.squad-button { color:#a8dbe9; gap:7px; }
.menu-links { flex-wrap:wrap; gap:12px; }
.career-summary { display:grid; grid-template-columns:1fr auto; gap:10px; width:min(100%,380px); padding:12px 14px; margin:0 0 16px; border:1px solid #bfa57845; background:#15262cd9; color:#dfc797; text-align:left; font:11px var(--mono); }
.career-track { display:block; height:4px; background:#56657355; overflow:hidden; }
.career-track i { display:block; height:100%; background:#d7bb82; }
.career-summary .career-track { grid-column:1/-1; }
.career-heading { display:flex; align-items:center; gap:25px; padding:24px; background:linear-gradient(120deg,#25363d,#15232c); border:1px solid #afc2c233; margin:18px 0 25px; }
.career-heading>div>strong { display:block; font:64px var(--mono); color:#e8ce98; line-height:1.1; }
.career-heading>section { flex:1; min-width:0; }
.career-heading h3 { margin:0 0 15px; }
.career-heading p { margin-bottom:0; font:11px var(--mono); }
.contract-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:15px 0 28px; }
.contract-card { border:1px solid #9caeb533; border-top:2px solid #d1b87e; background:#14232cd9; padding:18px; display:flex; flex-direction:column; }
.contract-card h4 { margin:12px 0 0; font-size:16px; color:#e1e9e9; }
.contract-card p { font-size:13px; line-height:1.6; flex:1; }
.contract-card.is-complete { border-color:#83c8ac70; }
.contract-card.is-complete .career-track i { background:#83c8ac; }
.contract-footer { display:flex; justify-content:space-between; gap:8px; margin-top:12px; font:10px var(--mono); color:#b2c1c6; }
.contract-footer strong { color:#e0c795; }
.mastery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.mastery-card { display:flex; align-items:center; gap:12px; min-width:0; padding:14px; border:1px solid #a3b5bc25; background:#12212ace; }
.mastery-card img { width:40%; height:80px; object-fit:contain; }
.mastery-card>div { flex:1; min-width:0; }
.mastery-card h4 { margin:8px 0 12px; font-size:12px; line-height:1.5; }
.mastery-card>div>span:last-child { display:block; margin-top:7px; font:10px var(--mono); color:#a9bfc4; }
.mastery-medal { display:inline-block; padding:4px 6px; border:1px solid currentColor; color:#899da8; font:9px var(--mono); text-transform:uppercase; }
.mastery-medal.tier-1 { color:#c69c73; }.mastery-medal.tier-2 { color:#c2d4e1; }.mastery-medal.tier-3 { color:#ebc977; }
.run-xp { color:#e2c38b!important; padding:10px 0; border-top:1px solid #a5b5b333; font:12px var(--mono); }
#contract-tracker { display:block; width:100%; margin-top:10px; padding:9px 0 0; border-top:1px solid #8ab3b22d; color:#d8c397; background:none; text-align:left; font:10px var(--mono); line-height:1.5; pointer-events:auto; }
@media(max-width:700px) {
  .contract-grid,.mastery-grid { grid-template-columns:1fr; }
  .contract-card { padding:14px; }.contract-card p { margin:8px 0 12px; }
  .career-heading { padding:18px; gap:18px; }.career-heading>div>strong { font-size:48px; }
  #contract-tracker { margin-top:5px; padding-top:5px; font-size:9px; }
  .field-status>span { display:none; }
}
@media(max-height:600px) { #contract-tracker { margin-top:5px; padding-top:5px; } }
.squad-button>span { font-size:18px; }
.squad-button strong { font:600 12px var(--mono); }
.squad-roster { display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin:15px 0; padding:12px 14px; border:1px solid #77a7bd44; background:#112630a8; }
.squad-roster>strong { flex:0 0 100%; color:#9bcedd; font:12px var(--mono); letter-spacing:.06em; }
.squad-roster>p { margin:0; color:#a9bec7; font-size:13px; line-height:1.5; }
.squad-roster>span { flex:1 1 140px; position:relative; display:flex; gap:10px; justify-content:space-between; padding:8px 8px 11px; background:#213741; color:#cae2e9; font:11px var(--mono); }
.squad-roster>span>span { color:#a7bac3; }
.squad-roster i { position:absolute; left:8px; right:8px; bottom:4px; height:3px; background:linear-gradient(to right,#8ccee0 var(--hp),#3b5059 var(--hp)); }
@media (max-width:700px) { .hud-actions { gap:5px; } .squad-button { padding:7px 8px; } .squad-button strong { font-size:10px; } }