* { margin:0; padding:0; box-sizing:border-box; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; touch-action:none; }
  html,body { width:100%; height:100%; background:#050502; overflow:hidden; font-family:'Courier New', monospace; }
  #gameCanvas { display:block; width:100%; height:100%; transition:filter .08s, transform .08s; }
  #gameCanvas.glitch { filter:contrast(1.18) saturate(1.35) hue-rotate(4deg); }

  /* ---------- HUD ---------- */
  #hud { position:fixed; inset:0; pointer-events:none; z-index:20; opacity:0; transition:opacity .6s;
    padding-bottom:env(safe-area-inset-bottom); padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
  #hud.on { opacity:1; }

  .bar-wrap { position:absolute; left:24px; bottom:24px; width:220px; font-size:11px; letter-spacing:1px; color:#d9d3a8; text-shadow:0 0 4px #000; }
  .bar-label { display:flex; justify-content:space-between; margin-bottom:3px; opacity:.85; }
  .bar-outer { height:9px; border:1px solid #6b6440; background:rgba(20,18,8,.6); margin-bottom:9px; }
  .bar-inner { height:100%; background:linear-gradient(90deg,#8a7f2e,#d4c94a); transition:width .25s linear, background-color .4s; }
  #staminaInner { background:linear-gradient(90deg,#3a5f6e,#5fb0c9); }

  #itemBar { position:absolute; right:24px; bottom:24px; color:#d9d3a8; font-size:12px; text-align:right; text-shadow:0 0 4px #000; letter-spacing:1px; }
  #itemBar .count { font-size:22px; color:#e8dd8a; }
  #itemBar .hint { display:block; opacity:.55; font-size:9px; margin-top:2px; }

  #topLeft { position:absolute; top:16px; left:24px; color:#c9c39a; font-size:11px; letter-spacing:2px; text-shadow:0 0 4px #000; opacity:.8; }
  #topLeft div { margin-bottom:4px; }
  #sanReadout { font-size:14px; letter-spacing:2px; }
  #sanReadout.crit { color:#e0453a; animation: sanflicker .3s infinite; }
  #biomeReadout { font-size:9px; opacity:.6; letter-spacing:2px; }
  @keyframes sanflicker { 0%,100%{opacity:1} 50%{opacity:.35} }

  #crosshair { position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px; border-radius:50%; background:rgba(230,220,160,.5); }
  #interactPrompt { position:absolute; left:50%; top:56%; transform:translateX(-50%); color:#e8dd8a; font-size:12px; letter-spacing:2px; text-shadow:0 0 4px #000; opacity:0; transition:opacity .15s; white-space:nowrap; }
  #interactPrompt.show { opacity:1; }

  #topRightBtns { position:absolute; top:14px; right:16px; display:flex; gap:8px; pointer-events:auto; }
  .iconBtn { width:34px; height:34px; border:1px solid rgba(217,211,168,.4); background:rgba(10,9,4,.4); color:#d9d3a8; font-size:15px;
    display:flex; align-items:center; justify-content:center; cursor:pointer; }

  /* ---------- Atmosphere overlays (old-camera feel) ---------- */
  #vignette { position:fixed; inset:0; pointer-events:none; z-index:15;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 42%, rgba(5,4,1,.62) 100%); }
  #dangerVignette { position:fixed; inset:0; pointer-events:none; z-index:16; opacity:0;
    background: radial-gradient(ellipse at center, rgba(90,0,0,0) 32%, rgba(120,10,5,.68) 100%); transition: opacity .5s; }
  #staticOverlay { position:fixed; inset:0; pointer-events:none; z-index:17; opacity:.06; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    transition:opacity .4s; animation:grainshift .4s steps(2) infinite; }
  @keyframes grainshift { 0%{transform:translate(0,0)} 50%{transform:translate(-1%,1%)} 100%{transform:translate(1%,-1%)} }
  #scanlines { position:fixed; inset:0; pointer-events:none; z-index:18; opacity:.16; mix-blend-mode:multiply;
    background:repeating-linear-gradient(to bottom, rgba(0,0,0,.55) 0px, rgba(0,0,0,.55) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 3px);
    animation:scanmove 9s linear infinite; }
  @keyframes scanmove { from{background-position:0 0} to{background-position:0 300px} }
  #flashOverlay { position:fixed; inset:0; pointer-events:none; z-index:25; background:#fff; opacity:0; }
  #fallOverlay { position:fixed; inset:0; pointer-events:none; z-index:24; background:#000; opacity:0; transition:opacity .15s linear; }

  /* ---------- Start / Death / Pause screens ---------- */
  .screen { position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; flex-direction:column;
    background:radial-gradient(ellipse at center,#151206 0%,#020200 90%); color:#d9d3a8; text-align:center; padding:24px; overflow-y:auto; }
  #startScreen { background:radial-gradient(ellipse at center, rgba(10,9,3,.72) 0%, rgba(3,2,0,.93) 78%); backdrop-filter:blur(1px); }
  .screen h1 { font-size:clamp(26px,6vw,50px); letter-spacing:8px; color:#e3d878; text-shadow:0 0 22px rgba(227,216,120,.5), 0 0 60px rgba(227,216,120,.15); margin-bottom:6px; font-weight:700; }
  .screen .sub { font-size:12px; letter-spacing:4px; opacity:.55; margin-bottom:24px; }
  .screen p.lore { max-width:560px; font-size:12.5px; line-height:1.9; opacity:.75; margin-bottom:22px; letter-spacing:.5px; }
  .screen .keys { display:grid; grid-template-columns:auto auto; gap:5px 18px; font-size:11.5px; margin-bottom:26px; text-align:left; opacity:.8; }
  .screen .keys b { color:#e3d878; letter-spacing:2px; }
  .btn { pointer-events:auto; background:transparent; border:1px solid #8a7f2e; color:#e3d878; padding:13px 34px; font-size:13px; letter-spacing:4px;
    font-family:inherit; cursor:pointer; transition:.2s; margin:4px; }
  .btn:hover { background:#8a7f2e; color:#050502; }
  #deathScreen, #pauseScreen, #settingsScreen { display:none; }
  #deathScreen h1 { color:#c94a3a; text-shadow:0 0 18px rgba(201,74,58,.4); }
  #deathScreen .stat { font-size:13px; letter-spacing:2px; margin-bottom:24px; opacity:.75; }
  #deathScreen .stat span { color:#e3d878; }
  .setting-row { display:flex; align-items:center; gap:14px; margin-bottom:18px; width:280px; font-size:11px; letter-spacing:2px; }
  .setting-row input[type=range] { flex:1; }

  /* ---------- Save slots ---------- */
  .slotGrid { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:26px; pointer-events:auto; }
  .slotCard { position:relative; width:200px; min-height:120px; border:1px solid rgba(217,211,168,.35); background:rgba(15,13,5,.55);
    padding:14px 12px; cursor:pointer; transition:.2s; text-align:left; }
  .slotCard:hover { border-color:#e3d878; background:rgba(40,36,14,.65); transform:translateY(-2px); }
  .slotTitle { font-size:12px; letter-spacing:3px; color:#e3d878; margin-bottom:10px; }
  .slotBody { font-size:10.5px; line-height:1.9; opacity:.8; letter-spacing:1px; }
  .slotEmpty { opacity:.55; font-size:11px; letter-spacing:2px; padding-top:8px; }
  .slotDelete { position:absolute; top:6px; right:8px; font-size:11px; opacity:.4; padding:4px; cursor:pointer; }
  .slotDelete:hover { opacity:1; color:#c94a3a; }
  #saveToast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:55; background:rgba(10,9,3,.85);
    border:1px solid #8a7f2e; color:#e3d878; letter-spacing:6px; font-size:13px; padding:12px 28px; opacity:0; transition:opacity .3s; pointer-events:none; }

  /* ---------- Touch controls ---------- */
  #touchLayer { position:fixed; inset:0; z-index:30; display:none; pointer-events:none; }
  #touchLayer.on { display:block; }
  #joyBase { position:absolute; left:26px; bottom:30px; width:110px; height:110px; border-radius:50%; border:2px solid rgba(217,211,168,.35); background:rgba(20,18,8,.25); pointer-events:auto; }
  #joyKnob { position:absolute; left:35px; top:35px; width:40px; height:40px; border-radius:50%; background:rgba(217,211,168,.55); pointer-events:none; }
  #lookPad { position:absolute; right:0; top:0; width:55%; height:100%; pointer-events:auto; }
  #touchButtons { position:absolute; right:16px; bottom:22px; display:flex; flex-direction:column; align-items:flex-end; gap:10px; pointer-events:auto; }
  .tbtn { width:58px; height:58px; border-radius:50%; border:1px solid rgba(217,211,168,.45); background:rgba(20,18,8,.4); color:#e3d878;
    font-size:10px; letter-spacing:1px; display:flex; align-items:center; justify-content:center; text-align:center; }
  .tbtn.active { background:rgba(138,127,46,.55); }
  #tbRow { display:flex; gap:10px; }
  #jumpBtn { width:66px; height:66px; font-size:11px; }
  .orientHint { position:fixed; inset:0; z-index:60; background:#050502; color:#d9d3a8; display:none; align-items:center; justify-content:center;
    flex-direction:column; text-align:center; font-size:13px; letter-spacing:2px; padding:20px; }