/* Structure, puis habillage : source unique des styles de l’interface. */

  :root{
    --ink:#e8eef4; --dim:#9fb0c0; --panel:#111a26f2; --line:#2a3a4c;
    --warm:#ffb35c; --cold:#7ec8e8; --danger:#e86a5a; --ok:#8fd08a;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ height:100%; overflow:hidden; background:#0b1018; color:var(--ink);
    font-family:'Segoe UI', system-ui, sans-serif; }
  canvas#c3d{ position:fixed; inset:0; display:block; }
  h1,h2{ font-family:Georgia, 'Times New Roman', serif; letter-spacing:0.04em; }
  button{ font:inherit; cursor:pointer; background:#1d2c3e; color:var(--ink);
    border:1px solid var(--line); border-radius:8px; padding:10px 22px; transition:background .15s; }
  button:hover{ background:#2a3d54; }
  button.primary{ background:#3a5a7a; border-color:#4a6a8a; font-weight:600; }
  button.primary:hover{ background:#48699a; }
  select{ font:inherit; color:var(--ink); background:#162436; border:1px solid var(--line);
    border-radius:6px; padding:5px 8px; }

  /* ---------- HUD ---------- */
  #hud{ display:none; position:fixed; inset:0; pointer-events:none; z-index:5; }
  /* Les données physiologiques vivent désormais sur la montre 3D du joueur.
     Les anciens nœuds restent dans le DOM pour l'accessibilité et les tests,
     mais ne flottent plus en permanence au-dessus du monde. */
  #topbar,#gauges,#placeStatus{ display:none!important; }
  #topbar{ position:absolute; top:14px; left:50%; transform:translateX(-50%);
    display:flex; gap:18px; background:var(--panel); border:1px solid var(--line);
    border-radius:12px; padding:8px 20px; font-size:15px; align-items:center; }
  #topbar span{ white-space:nowrap; }
  #gCompass{ min-width:30px; text-align:center; color:var(--warm); font-weight:700; }
  #gTemp{ font-weight:700; color:var(--cold); }
  #gWeather.blizz{ color:var(--danger); font-weight:700; animation:blink 1s infinite; }
  @keyframes blink{ 50%{ opacity:0.4; } }
  #bleedTag{ display:none; color:var(--danger); font-weight:700; }
  #waypointGuide{ display:none; position:absolute; top:62px; left:50%; transform:translateX(-50%);
    max-width:min(460px,calc(100% - 32px)); padding:6px 12px; background:rgba(8,15,25,.7);
    border:1px solid rgba(255,179,92,.35); border-radius:9px; color:#f3c98f; font-size:13px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 3px #000; }
  #waypointGuide.arrived{ color:var(--ok); border-color:rgba(143,208,138,.42); }
  #placeStatus{ position:absolute; top:14px; left:16px; max-width:280px; padding:7px 11px;
    border:1px solid rgba(110,145,175,.3); border-radius:9px; background:rgba(8,15,25,.72);
    color:#c9d8e5; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    text-shadow:0 1px 3px #000; }
  #saveStatus{ position:absolute; left:18px; bottom:190px; padding:5px 9px;
    border-radius:7px; background:rgba(8,15,25,.7); color:var(--dim); font-size:12px;
    opacity:0; transform:translateY(4px); transition:opacity .25s,transform .25s; }
  #saveStatus.show{ opacity:1; transform:translateY(0); }
  #watchHint{ position:absolute; left:16px; bottom:16px; padding:6px 10px;
    border:1px solid rgba(116,161,179,.26); border-radius:7px;
    background:rgba(5,12,17,.48); color:rgba(210,232,236,.72);
    font:600 11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
    letter-spacing:.08em; text-transform:uppercase; text-shadow:0 1px 3px #000;
    transition:opacity .22s,transform .22s; }
  #watchHint.raised{ opacity:0; transform:translateY(5px); }

  #gauges{ position:absolute; left:16px; bottom:16px; display:flex; flex-direction:column; gap:7px;
    padding:10px 12px; background:rgba(8,15,25,.48); border:1px solid rgba(110,145,175,.22);
    border-radius:11px; backdrop-filter:blur(4px); text-shadow:0 1px 3px #000; }
  #conditionStatus{ width:264px; padding-top:2px; color:var(--dim); font-size:11.5px;
    line-height:1.35; }
  #conditionStatus.safe{ color:var(--ok); }
  #conditionStatus.warn{ color:var(--warm); }
  #conditionStatus.danger{ color:#ff8f80; font-weight:650; }
  .gauge{ display:flex; align-items:center; gap:8px; }
  .gauge .ico{ width:24px; text-align:center; filter:drop-shadow(0 1px 2px #000); }
  .gauge .gaugeName{ width:58px; color:var(--dim); font-size:12px; }
  .gauge .track{ width:140px; height:11px; background:#0a121cd9; border:1px solid var(--line);
    border-radius:6px; overflow:hidden; }
  .gauge .gaugeValue{ width:34px; text-align:right; color:var(--ink); font-size:12px; font-variant-numeric:tabular-nums; }
  .gauge .fill{ height:100%; border-radius:5px; transition:width .3s; }
  #barWarm{ background:linear-gradient(90deg,#5a90c8,var(--warm)); }
  #barHunger{ background:#c88a4a; } #barThirst{ background:#5aa0d8; }
  #barFatigue{ background:#9a8ac8; } #barHealth{ background:#d05a5a; }
  .track.low{ animation:blink .9s infinite; border-color:var(--danger); }

  #quest{ position:absolute; top:14px; right:16px; max-width:290px; background:var(--panel);
    border:1px solid var(--line); border-radius:12px; padding:10px 14px; font-size:13.5px;
    line-height:1.5; color:var(--dim); }

  #crosshair{ position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2px;
    background:#ffffffaa; border-radius:50%; box-shadow:0 0 4px #000; }
  #prompt{ display:none; position:absolute; left:50%; bottom:26%; transform:translateX(-50%);
    background:var(--panel); border:1px solid var(--line); border-radius:10px;
    padding:8px 16px; font-size:15px; }
  #promptExtra{ display:none; position:absolute; left:50%; bottom:21%; transform:translateX(-50%);
    color:var(--warm); font-size:13px; text-shadow:0 1px 3px #000; }
  #actionBar{ display:none; position:absolute; left:50%; bottom:32%; transform:translateX(-50%);
    width:240px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 12px; }
  #actionLabel{ font-size:13px; color:var(--dim); margin-bottom:5px; }
  #actionTrack{ height:8px; background:#0a121c; border-radius:4px; overflow:hidden; }
  #actionFill{ height:100%; width:0; background:var(--warm); }

  #toasts{ position:absolute; bottom:16px; right:16px; display:flex; flex-direction:column;
    gap:6px; align-items:flex-end; max-width:360px; }
  .toast{ background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--cold);
    border-radius:8px; padding:8px 13px; font-size:13.5px; line-height:1.4; opacity:1; transition:opacity .6s; }
  .toast.warn{ border-left-color:var(--danger); }
  .toast.out{ opacity:0; }

  /* vignette d'ambiance */
  #vignette{ position:fixed; inset:0; pointer-events:none; z-index:4; transition:box-shadow 1.2s; }
  #vignette.cozy{ box-shadow:inset 0 0 150px 25px rgba(255,145,55,0.19); }
  #vignette.shelter{ box-shadow:inset 0 0 130px 20px rgba(12,22,38,0.28); }
  #vignette.freezing{ box-shadow:inset 0 0 170px 55px rgba(80,150,215,0.38); }
  #coldFx{ position:fixed; inset:-3px; pointer-events:none; z-index:4; opacity:0;
    background:
      radial-gradient(ellipse at center,transparent 48%,rgba(161,214,239,.08) 66%,rgba(208,238,249,.7) 100%),
      radial-gradient(circle at 3% 8%,rgba(232,248,255,.72) 0 1.2%,transparent 4.8%),
      radial-gradient(circle at 96% 18%,rgba(220,244,255,.6) 0 1.6%,transparent 5.5%),
      radial-gradient(circle at 10% 94%,rgba(220,244,255,.55) 0 1.3%,transparent 6%);
    box-shadow:inset 0 0 85px 18px rgba(125,193,225,.26);
    filter:contrast(1.08); transition:opacity .9s; mix-blend-mode:screen; }
  #snowLens{ position:fixed; inset:-10%; pointer-events:none; z-index:4; opacity:0;
    background:
      radial-gradient(ellipse at 16% 20%,rgba(239,250,255,.8) 0 .28%,transparent .7%),
      radial-gradient(ellipse at 72% 12%,rgba(239,250,255,.65) 0 .4%,transparent .9%),
      radial-gradient(ellipse at 86% 67%,rgba(239,250,255,.7) 0 .35%,transparent .85%),
      radial-gradient(ellipse at 38% 82%,rgba(239,250,255,.55) 0 .3%,transparent .8%);
    background-size:37% 43%,43% 52%,31% 39%,47% 58%;
    filter:blur(.35px); transform:rotate(-8deg); transition:opacity .5s;
    animation:lensSnow 2.8s linear infinite; }
  @keyframes lensSnow{ from{background-position:0 0,20px -30px,-20px 10px,10px -25px}
    to{background-position:160px 110px,210px 130px,135px 95px,180px 145px} }
  #damageFlash{ position:fixed; inset:0; pointer-events:none; z-index:6;
    background:radial-gradient(ellipse at center, transparent 40%, rgba(200,30,20,0.8)); opacity:0; transition:opacity .5s; }
  #cinematic{ position:fixed; inset:-20px; z-index:3; pointer-events:none; opacity:.012;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-size:cover;
    mix-blend-mode:soft-light; animation:grain .32s steps(2) infinite; }
  @keyframes grain{ 0%{transform:translate(0,0)} 25%{transform:translate(-1.5%,1%)} 50%{transform:translate(1%,-1.5%)} 75%{transform:translate(1.5%,1.5%)} }

  /* ---------- écrans & modales ---------- */
  .screen{ position:fixed; inset:0; z-index:20; display:none; flex-direction:column;
    overflow-y:auto; background:linear-gradient(180deg,#0b1220ee,#10203add);
    backdrop-filter:blur(3px); }
  .panel{ margin:auto; max-width:620px; width:calc(100% - 32px); background:var(--panel);
    border:1px solid var(--line); border-radius:16px; padding:34px 38px; text-align:center; }
  .panel h1{ font-size:44px; margin-bottom:4px; color:#dbeaf6; }
  .panel h1 .flake{ color:var(--cold); }
  .panel .tagline{ color:var(--cold); font-style:italic; margin-bottom:18px; }
  .gameVersion{ color:#708296; font-size:11.5px; letter-spacing:.08em; margin-bottom:14px; }
  .difficultyPicker{ margin:15px 0; padding:12px 14px; border:1px solid var(--line);
    border-radius:10px; background:#0d1825a8; text-align:left; }
  .difficultyPicker label{ display:flex; align-items:center; justify-content:center; gap:10px;
    color:var(--ink); font-weight:600; }
  #difficultyDescription{ color:var(--dim); font-size:12.5px; line-height:1.45;
    text-align:center; margin-top:7px; }
  .panel p{ color:var(--dim); line-height:1.65; font-size:15px; margin-bottom:14px; text-align:left; }
  .panel .story{ border-left:3px solid var(--cold); padding-left:14px; }
  .panel .hardcore{ border-left:3px solid var(--danger); padding-left:14px; color:#d8a8a0; }
  .controls{ text-align:left; font-size:13.5px; color:var(--dim); line-height:1.9;
    columns:2; margin-bottom:18px; }
  .controls b{ display:inline-block; min-width:52px; color:var(--ink); background:#1d2c3e;
    border-radius:5px; padding:0 7px; text-align:center; margin-right:6px; font-size:12px; }
  .btnrow{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
  .settings{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
    display:flex; gap:22px; justify-content:center; flex-wrap:wrap; font-size:13.5px; color:var(--dim); }
  .settings label{ display:flex; align-items:center; gap:7px; }
  .settings .wide-setting{ flex-basis:100%; justify-content:center; }
  .settings input[type="range"]{ accent-color:var(--cold); }
  .settings .wide-setting input{ width:min(230px,42vw); }
  .settings output{ min-width:42px; color:var(--ink); font-variant-numeric:tabular-nums; text-align:right; }

  .modal{ position:fixed; inset:0; z-index:25; display:none; align-items:center;
    justify-content:center; background:rgba(5,10,18,0.6); }
  .modalbox{ background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:26px 30px; max-width:480px; width:calc(100% - 40px); text-align:center; }
  .modalbox h2{ margin-bottom:14px; font-size:22px; }
  #noteText{ text-align:left; color:#d8d0b8; font-family:Georgia, serif; font-style:italic;
    line-height:1.7; font-size:15px; margin-bottom:18px; white-space:pre-wrap; }
  .helpContent{ text-align:left; color:var(--dim); line-height:1.55; font-size:13.5px;
    max-height:62vh; overflow-y:auto; padding-right:8px; }
  .helpContent h3{ color:var(--ink); margin:14px 0 5px; font-size:15px; }
  .helpContent ul{ margin:4px 0 10px 20px; padding:0; }
  .helpContent a{ color:var(--cold); }

  /* inventaire */
  #inventory{ position:fixed; inset:0; z-index:22; display:none; align-items:center;
    justify-content:center; background:rgba(5,10,18,0.55); }
  #invBox{ background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:24px 28px; width:min(440px, calc(100% - 40px)); max-height:80vh; overflow-y:auto; }
  #invBox h2{ margin-bottom:6px; }
  #invWorn{ font-size:12.5px; color:var(--warm); margin-bottom:14px; }
  #invCapacity{ font-size:12.5px; color:var(--dim); margin-bottom:10px; }
  .invRow{ display:flex; align-items:center; gap:10px; padding:7px 4px;
    border-bottom:1px solid #1a2634; font-size:14.5px; }
  .invRow .invName{ flex:1; } .invRow .invQty{ color:var(--dim); }
  .invRow button{ padding:4px 14px; font-size:13px; }
  .invEmpty{ color:var(--dim); font-style:italic; padding:14px 0; }
  #invBox .hint{ font-size:12px; color:var(--dim); margin-top:12px; line-height:1.6; }
  #invMap{ margin-top:14px; padding:11px 12px; border:1px solid var(--line); border-radius:9px;
    color:var(--dim); font-size:12.5px; line-height:1.55; }
  #invMap b{ color:var(--ink); }
  .mapIntro{ margin:3px 0 7px; }
  .mapRow{ display:flex; align-items:center; gap:8px; padding:5px 0; border-top:1px solid #1a2634; }
  .mapLabel{ flex:1; min-width:0; }
  .mapRow button{ flex:0 0 auto; padding:3px 9px; border-radius:6px; font-size:11.5px; }
  .mapRow button.tracked{ color:var(--warm); border-color:#735938; }
  #desktopNotice{ display:none; margin:12px 0; padding:9px 11px; border:1px solid var(--warm);
    border-radius:8px; color:#f0c690; font-size:13px; }
  #graphicsWarmup{ margin:10px 0 2px; min-height:20px; color:var(--cold); font-size:13px; }
  #graphicsWarmup.ready{ color:var(--ok); }
  #graphicsWarmup.warn{ color:var(--warm); }
  #saveNotice{ display:none; margin:10px 0 2px; padding:9px 11px; border:1px solid var(--danger);
    border-radius:8px; color:#efb0a8; background:rgba(92,31,27,.2); font-size:13px; line-height:1.45; }
  button:disabled{ cursor:wait; opacity:.55; }

  #clickstart{ position:fixed; inset:0; z-index:15; display:none; align-items:center;
    justify-content:center; background:rgba(5,10,18,0.45); cursor:pointer; }
  #clickstart div{ background:var(--panel); border:1px solid var(--line); border-radius:12px;
    padding:16px 28px; font-size:16px; }

  @media (max-height:700px){
    .panel{ padding:20px 24px; } .panel h1{ font-size:32px; }
    .controls{ line-height:1.6; } .panel p{ font-size:13.5px; margin-bottom:10px; }
  }
  @media (max-width:700px), (pointer:coarse){
    #desktopNotice{ display:block; }
    #topbar{ top:8px; gap:8px; padding:7px 10px; font-size:12px; }
    #waypointGuide{ top:45px; font-size:11.5px; }
    #placeStatus{ top:78px; left:8px; max-width:180px; font-size:11.5px; }
    #quest{ top:78px; right:8px; max-width:230px; font-size:12px; }
    #gauges{ left:8px; bottom:8px; }
    #saveStatus{ left:8px; bottom:174px; }
    #watchHint{ left:8px; bottom:8px; }
    #conditionStatus{ width:184px; }
    .gauge .gaugeName{ display:none; }
    .gauge .track{ width:92px; }
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{ animation:none!important; transition:none!important; }
  }

:root{--ink:#edf2e9;--dim:#a9bdbb;--panel:#10252aee;--line:#3a555766;--warm:#efb47e;--cold:#b6d6d6;--ok:#a8cfae}
body{font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
button{border-radius:5px;background:#243c40;border-color:#4c686b80;transition:background .2s,transform .2s}
button:hover{background:#355156;transform:translateY(-1px)}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #f0bc82;outline-offset:4px}
button.primary{color:#1a2c2b;background:#efb47e;border-color:#efb47e;font-weight:750}
button.primary:hover{background:#f8c997}
select{background:#1a3338;border-color:#476063;border-radius:5px}
.screen{background:linear-gradient(140deg,#0c1d24f5,#102a32eb);backdrop-filter:blur(7px)}
#screenStart{isolation:isolate;background:#10252d url('./valley.svg') center/cover no-repeat;backdrop-filter:none}
#screenStart:before{content:'';position:fixed;inset:0;background:linear-gradient(90deg,#091b22d9,#10252d40 70%),linear-gradient(0deg,#0b2028 0%,transparent 70%);z-index:-1}
#screenStart .panel{display:grid;grid-template-columns:1.2fr 1fr;gap:48px 70px;width:min(1180px,calc(100% - 88px));max-width:1180px;margin:auto;padding:64px 0 38px;border:0;background:none;border-radius:0;text-align:left}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:.24em;color:#b5cbca;margin-bottom:25px}
#screenStart .panel h1{font-size:clamp(66px,7.6vw,114px);line-height:.93;letter-spacing:-.055em;font-weight:400;margin:0 0 24px;color:#eff0df}
#screenStart .panel h1 .flake{color:#eff0df}
.titleDot{color:var(--warm)}
#screenStart .tagline{font-size:18px;font-style:normal;font-family:Georgia,serif;color:#dbdfcc;margin:0 0 16px}
#screenStart .gameVersion{font:10px/1.5 ui-monospace,monospace;letter-spacing:.17em;color:#86aaa9;margin-bottom:26px}
#screenStart .story{border:0;padding:0;font-size:15px;max-width:430px;line-height:1.8;color:#b7cbc6}
.heroPills{display:flex;gap:20px;margin-top:25px;font-size:9px;letter-spacing:.16em;color:#b7d1c8}
.heroPills span:before{content:'+';color:#e9b481;margin-right:7px}
.startActions{align-self:center;padding:28px 30px;border:1px solid #7d9e9750;background:linear-gradient(145deg,#132d32ee,#13292cd9);box-shadow:0 20px 70px #03101566;border-radius:10px}
.startActions .eyebrow{color:var(--warm);margin-bottom:14px}
.startActions h2{font-size:29px;font-weight:400;letter-spacing:-.025em;margin-bottom:14px;color:#edeedb}
#screenStart .startBrief{font-size:13px;line-height:1.7}
.difficultyPicker{background:#0f252880;border-color:#50727155;padding:12px;margin:16px 0}
.difficultyPicker label{justify-content:space-between;font-size:12px;font-weight:400}
.difficultyPicker select{max-width:75%;font-size:12px}
#difficultyDescription{font-size:11px;text-align:left;line-height:1.6;padding-top:4px}
#graphicsWarmup{font-size:11px;min-height:16px;margin:12px 0;color:#b0c1b3}
.commandGuide{margin:12px 0 18px}.commandGuide summary,.settingsFold summary{cursor:pointer;font-size:12px;color:#a6c1bd;padding:8px 0;list-style:none}
.commandGuide summary:after,.settingsFold summary:after{content:' +';float:right;color:#e9b481}
details[open]>summary:after{content:' −'}
.controls{columns:1;font-size:11px;line-height:2;margin-top:12px}.controls b{background:#294248;font-size:10px}
.startActions .btnrow{display:grid;grid-template-columns:1fr;gap:9px;margin:16px 0 8px}
.startActions .btnrow button{padding:13px 12px;font-size:13px}
.startActions #btnHelp{background:none;border:0;font-size:11px;color:#93b0af;padding:5px}
.settingsFold{border-top:1px solid #50727144;margin-top:12px;padding-top:4px}
.settings{border:0;margin:10px 0 0;padding:6px 0;gap:12px;font-size:11px;justify-content:flex-start}
.settings label{justify-content:space-between;width:100%;gap:12px}
.settings .wide-setting{justify-content:space-between}
.settings .wide-setting input{width:100px}
.settings input[type=range]{accent-color:#efb47e}
.settings output{font-size:10px}
.expeditionFeatures{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:36px;border-top:1px solid #6f958b55;padding-top:25px}
.expeditionFeatures span{font:9px ui-monospace,monospace;letter-spacing:.13em;color:#89aaa2}
.expeditionFeatures strong{display:block;margin:10px 0 8px;font:20px Georgia,serif;font-weight:400;color:#e1e5d5}
#screenStart .expeditionFeatures p{font-size:12px;line-height:1.65;color:#9db7b1;margin:0;max-width:280px}
.panel,.modalbox,#invBox{background:linear-gradient(140deg,#142d32f5,#102329f5);border-color:#5c797c66;border-radius:10px}
#quest{top:26px;right:26px;max-width:280px;background:linear-gradient(120deg,#10252ce6,#10252cbd);border:1px solid #7caaa340;border-radius:6px;padding:14px 17px;color:#cfdbd2;font-size:12px;line-height:1.9;box-shadow:0 8px 28px #00151c22}
.questEyebrow{display:block;font:9px ui-monospace,monospace;letter-spacing:.16em;color:#e8b281;margin-bottom:8px}
#navigation{position:absolute;top:26px;left:26px;display:flex;align-items:center;gap:14px;padding:12px 15px;background:#10252cca;border:1px solid #7caaa340;border-radius:6px;max-width:340px}
#navHeading{font:11px ui-monospace,monospace;color:#a9c6bd;width:18px}
#navArrow{display:inline-block;color:#f3c28f;font-size:28px;line-height:1;width:24px;text-align:center}
#navigation div{min-width:0}#navKind{display:block;font-size:8px;letter-spacing:.15em;color:#a2beba;text-transform:uppercase;margin-bottom:4px}
#navTarget{display:block;font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#navDistance{font:10px ui-monospace,monospace;color:#ebc9a3;white-space:nowrap}
#waypointGuide{display:none!important}
#fieldKit{position:absolute;left:26px;bottom:58px}.kitLabel{font:8px ui-monospace,monospace;letter-spacing:.2em;color:#b9cfc5;margin:0 0 9px;text-shadow:0 1px 4px #10252a}
.quickSlots{display:flex;gap:6px}.quickSlot{display:flex;gap:9px;align-items:center;background:#10252cd6;border:1px solid #7caaa340;border-radius:5px;padding:9px 10px;font-size:10px}
.quickSlot kbd{display:grid;place-items:center;width:18px;height:20px;border:1px solid #8ba7a466;border-radius:3px;color:#f0c79d;font:10px ui-monospace,monospace}
.slotCount{font:10px ui-monospace,monospace;color:#b9cfc5}.quickSlot.empty{opacity:.6}.quickSlot.urgent{border-color:#e5a467b0;opacity:1}
#endurance{display:flex;align-items:center;gap:9px;font:8px ui-monospace,monospace;letter-spacing:.08em;color:#c0d9cd;margin-top:10px;opacity:0;transition:opacity .3s}
#endurance.active{opacity:1}#endurance>div{width:148px;height:3px;background:#0e262b9c;border-radius:3px;overflow:hidden}
#enduranceFill{display:block;height:100%;background:#d5dcb3;border-radius:3px}#endurance small{font-size:8px}#endurance.tired i{background:#eaac7b}
#watchHint{left:26px;bottom:22px;border:0;background:none;font-size:9px;letter-spacing:.04em;color:#bdd1c4;padding:0}
#expeditionBadge{position:absolute;right:26px;top:210px;display:flex;gap:10px;align-items:center;color:#bacec4;background:#10252c99;border:1px solid #7caaa330;padding:9px 12px;border-radius:5px}
#expeditionBadge span{font:8px ui-monospace,monospace;letter-spacing:.07em}#expeditionBadge strong{font:12px ui-monospace,monospace;color:#f3c28f}#expeditionBadge small{font-size:9px;color:#a6bebb}
#survivalAlert{position:absolute;left:50%;bottom:50px;transform:translateX(-50%);font-size:11px;letter-spacing:.04em;color:#ffcfaa;text-shadow:0 2px 7px #142b2c;background:#251c1599;padding:7px 12px;border-radius:5px}
#survivalAlert:empty{display:none}
#discoveryBanner{position:absolute;top:29%;left:50%;transform:translate(-50%,-12px);text-align:center;opacity:0;transition:opacity .5s,transform .5s;text-shadow:0 2px 15px #10252a;padding:20px 45px;background:radial-gradient(ellipse,#10252c99,transparent 70%);min-width:320px}
#discoveryBanner.show{opacity:1;transform:translate(-50%,0)}#discoveryLabel{display:block;color:#efbf8a;font:9px ui-monospace,monospace;letter-spacing:.2em;margin-bottom:11px}#discoveryTitle{display:block;font:32px Georgia,serif;color:#f4eedc;font-weight:400}
#prompt{padding:11px 18px;font-size:12px;background:#10252cee;border-color:#b9cec366;border-radius:5px;box-shadow:0 4px 25px #061a2866;text-align:center;max-width:calc(100% - 40px);width:max-content}
#promptExtra{font-size:10px;max-width:calc(100% - 30px);text-align:center;width:max-content}
#actionBar{border-radius:6px;border-color:#e1b68766}#actionTrack{height:4px}
#toasts{bottom:27px;right:26px;max-width:300px;gap:5px}.toast{font-size:11px;padding:10px 13px;background:#10252cee;border-color:#7caaa330;border-left-color:#c3d8bc;border-radius:5px}
#invBox{width:min(550px,calc(100% - 40px));max-height:87vh;padding:28px}.invRow{font-size:13px;border-bottom-color:#3c595b55}.invRow button{font-size:11px}
#invMap{background:#10222977;border-color:#46626255}#expeditionMap{display:block;width:100%;height:auto;margin:12px 0;border:1px solid #6b898066;border-radius:5px}
#clickstart{background:#081c2440;backdrop-filter:blur(2px)}#clickstart div{font-size:13px;border-color:#8da8a477;background:#142c32e6;padding:18px 25px;border-radius:6px}
#crosshair{width:4px;height:4px;box-shadow:0 0 2px #10252a}
@media(max-width:950px){#screenStart .panel{gap:30px;width:calc(100% - 48px)}.startActions{padding:22px}#navigation{top:16px;left:16px;max-width:280px;gap:10px}#quest{top:16px;right:16px;max-width:230px;font-size:11px}#expeditionBadge{right:16px;top:205px}#expeditionBadge small{display:none}#discoveryTitle{font-size:26px}}
@media(max-width:680px){#screenStart .panel{display:flex;flex-direction:column;padding:35px 0;width:calc(100% - 36px);gap:30px}#screenStart .panel h1{font-size:76px}.heroIntro{width:100%}.startActions{width:100%}.expeditionFeatures{grid-template-columns:1fr;gap:20px}.heroPills{margin-top:18px}#navigation{max-width:190px;padding:9px;gap:7px}#navHeading{display:none}#navTarget{font-size:10px}#navDistance{font-size:9px}#quest{max-width:175px;padding:10px;font-size:10px}#expeditionBadge{top:200px}#fieldKit{left:16px;bottom:55px}.quickSlot{font-size:9px;padding:7px;gap:6px}#toasts{bottom:120px;max-width:240px;right:16px}#survivalAlert{bottom:105px;font-size:10px;white-space:nowrap}#watchHint{left:16px;font-size:8px}}
@media(max-height:720px) and (min-width:681px){#screenStart .panel{padding:28px 0;gap:25px 55px}#screenStart .panel h1{font-size:80px}.startActions{padding:21px 26px}.heroIntro .eyebrow{margin-bottom:18px}.expeditionFeatures{padding-top:20px}.startActions .eyebrow{margin-bottom:10px}.startActions .btnrow{margin-top:10px}.startActions h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

#weaponStatus{display:none;position:absolute;right:26px;bottom:110px;padding:12px 15px;background:#10252cd9;border:1px solid #7caaa340;border-radius:6px;text-align:right;min-width:170px}#weaponName{display:block;color:#dfdfc5;font-size:12px;margin-bottom:6px}#weaponAmmo{display:block;font:22px ui-monospace,monospace;color:#efbf8a}#weaponHint{display:block;font-size:9px;color:#abc5bd;margin-top:8px}#crosshair.armed{width:10px;height:10px;margin:-5px;border:1px solid #fff9;background:none;border-radius:2px;transform:rotate(45deg)}#crosshair.hit{border-color:#efb47e;background:#efb47e;box-shadow:0 0 12px #efb47e}.invRow{flex-wrap:wrap}.invRow .dropItem{font-size:9px;color:#a7beba;padding:5px 7px;background:transparent}.regionTitle{display:block;color:#e5bb90;font:11px ui-monospace,monospace;margin:14px 0 7px}.regionRow{color:#91aca7}.regionRow .mapLabel{font-size:11px}
@media(max-width:680px){#weaponStatus{right:16px;bottom:215px;min-width:130px;padding:9px}#weaponAmmo{font-size:18px}#weaponHint{max-width:150px}}

.quality-description{flex-basis:100%;font-size:12px;color:#b0c1b3;margin:0 0 10px;line-height:1.5}


/* Typographie commune aux menus et aux textes créés pendant la partie. */
body{font-size:15px;line-height:1.5;font-synthesis:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:1.4}
.panel,.modalbox,#invBox{min-width:0;color:var(--ink);font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.panel h2,#invBox h2{font-size:28px;line-height:1.2;letter-spacing:0;margin-bottom:16px;font-weight:400}
.panel p,.modalbox p{color:var(--dim);font-size:14px;line-height:1.65;margin-bottom:14px}
.panel h1{line-height:1.1;overflow-wrap:normal}
#screenStart .panel>*{min-width:0}
#screenStart .heroPills{flex-wrap:wrap;row-gap:10px}
.settings{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;font-size:13px}
.settings label{min-width:0;display:flex;flex-wrap:wrap;align-items:center;line-height:1.5;justify-content:space-between;gap:8px 12px;text-align:left}
.settings input[type=checkbox]{flex:0 0 auto;width:16px;height:16px;accent-color:var(--warm)}
.settings label:has(input[type=checkbox]){justify-content:flex-start}
.settings input[type=range]{min-width:72px;max-width:100%;flex:1;width:auto}
.settings select{min-width:100px;max-width:100%;padding:7px 10px}
.settings output{min-width:44px;font-size:12px}
.panel .quality-description{margin:0;color:var(--dim);font-size:12px;line-height:1.5}
.commandGuide .controls{columns:1;font-size:13px;line-height:1.6;margin:10px 0 16px}
.controls div{display:flex;align-items:baseline;gap:8px;margin:5px 0;break-inside:avoid}
.controls b{flex:0 0 94px;min-width:94px;margin:0;font-size:11px;white-space:nowrap}
.modal{padding:20px 0;overflow-y:auto;align-items:safe center}
.modalbox{max-height:calc(100dvh - 40px);overflow-y:auto;flex:0 0 auto;margin:auto}
.helpContent{max-height:none;overflow-y:visible;padding-right:0;font-size:14px;line-height:1.65}
.helpContent p{font-size:14px;margin:0 0 14px}
.helpContent h3{margin:20px 0 8px;font-size:16px;line-height:1.3}
.helpContent li{margin:6px 0}
#helpModal .btnrow{position:sticky;bottom:-26px;padding:12px 0;background:#132b30}
#noteText{font-size:16px;line-height:1.8;overflow-wrap:anywhere}
#invBox{scrollbar-gutter:stable;line-height:1.6}
#invWorn,#invCapacity{font-size:13px;line-height:1.6}
.invRow{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;font-size:14px;padding:10px 0}
.invName,.mapLabel{min-width:0;overflow-wrap:anywhere}
.invQty{font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.invRow button,.invRow .dropItem{font-size:12px;line-height:1.4;padding:5px 9px}
.invRow .dropItem{color:#bdcec6}
.mapRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:9px 0}
.mapLabel,.regionRow .mapLabel{font-size:13px;line-height:1.5}
.regionTitle{font-size:12px;line-height:1.5;letter-spacing:.08em}
#invMap>button{font-size:12px;padding:8px 12px;max-width:100%;white-space:normal}
#quest{line-height:1.65;max-width:min(300px,38vw);overflow-wrap:anywhere}
#navigation{max-width:min(360px,42vw)}
#expeditionBadge{top:235px}
#weaponHint{font-size:11px;line-height:1.5;max-width:230px}
#watchHint{font-size:11px;line-height:1.5;max-width:calc(100% - 32px);text-transform:none}
#prompt,#promptExtra{line-height:1.5;white-space:normal;overflow-wrap:anywhere}
#survivalAlert{max-width:calc(100% - 32px);text-align:center;white-space:normal}
@media(max-width:680px){
 #screenStart .panel h1{font-size:clamp(54px,13vw,76px)}
 .startActions{padding:22px 18px}
 .expeditionFeatures strong{font-size:20px}
 .panel,.modalbox,#invBox{padding:22px 18px}
 .invRow{grid-template-columns:minmax(0,1fr) auto auto}
 .invRow .dropItem{grid-column:3}
 .settings .wide-setting{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
 .settings .wide-setting input{grid-row:2;grid-column:1/-1;width:100%}
 #quest{top:110px;max-width:min(260px,65vw);font-size:12px}
 #navigation{max-width:calc(100% - 32px);font-size:12px}
 #navTarget{font-size:12px}
 #expeditionBadge{top:285px}
 #discoveryBanner{min-width:0;width:calc(100% - 32px);padding:15px}
 #watchHint{font-size:10px}
}
.panel .centered-copy{text-align:center}
#screenPause h1{font-size:32px;margin-bottom:14px}
.panel .death-title{color:#c8ddf0}
.panel .win-title{color:var(--warm)}
.sleep-description{margin-bottom:16px}
#sleepForecast{color:var(--warm);font-size:14px;line-height:1.6;margin-bottom:12px}
.secondary-actions{margin-top:14px}
.screen,.modal,.modalbox,#invBox{scrollbar-width:thin;scrollbar-color:#58716e #10252a}
.screen::-webkit-scrollbar,.modal::-webkit-scrollbar,.modalbox::-webkit-scrollbar,#invBox::-webkit-scrollbar{width:7px}
.screen::-webkit-scrollbar-thumb,.modal::-webkit-scrollbar-thumb,.modalbox::-webkit-scrollbar-thumb,#invBox::-webkit-scrollbar-thumb{background:#58716e;border-radius:6px}
.screen::-webkit-scrollbar-track,.modal::-webkit-scrollbar-track,.modalbox::-webkit-scrollbar-track,#invBox::-webkit-scrollbar-track{background:#10252a}