:root {
  --ink: #f3e7d3;
  --dim: #b9a88f;
  --ember: #ff9a3c;
  --ember2: #ffcf7a;
  --blood: #d8463b;
  --panel: rgba(18, 13, 10, 0.78);
  --panel2: rgba(30, 22, 16, 0.9);
  --line: rgba(255, 190, 120, 0.18);
  --good: #9fd36b;
  --display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --ui: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0807; color: var(--ink); font-family: var(--ui); user-select: none; -webkit-user-select: none; }
#c { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
kbd { display: inline-block; min-width: 1.7em; padding: 0.1em 0.45em; margin-right: 0.45em; border-radius: 6px; background: rgba(255, 236, 200, 0.92); color: #22160d; font: 700 0.78em var(--ui); text-align: center; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }

/* ---------------- loading / errors */
#loading { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: radial-gradient(circle at 50% 55%, #2a160b, #070504 70%); z-index: 50; transition: opacity 0.8s; }
#loading.done { opacity: 0; pointer-events: none; }
#loading b { font: 600 34px var(--display); letter-spacing: 0.35em; color: var(--ember2); }
#loading span { color: var(--dim); font-size: 13px; letter-spacing: 0.1em; }
#loading .ember { width: 18px; height: 18px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 30px 12px rgba(255, 120, 30, 0.6); animation: flick 0.4s infinite alternate; }
@keyframes flick { to { transform: scale(1.25); box-shadow: 0 0 44px 18px rgba(255, 120, 30, 0.75); } }
#fatal { position: fixed; left: 50%; top: 20px; transform: translateX(-50%); background: #5a1410; color: #fff; padding: 10px 16px; border-radius: 8px; display: none; z-index: 60; max-width: 90vw; }
#fatal.on { display: block; }

/* ---------------- menus */
#ui { position: fixed; inset: 0; display: none; z-index: 20; place-items: safe center; overflow: auto; padding: 24px 12px; background: linear-gradient(90deg, rgba(5, 4, 3, 0.82) 0%, rgba(5, 4, 3, 0.35) 55%, rgba(5, 4, 3, 0) 100%); }
#ui.on { display: grid; }
#ui.ingame { background: rgba(6, 4, 3, 0.62); backdrop-filter: blur(3px); }
.panel { width: min(560px, 94vw); justify-self: start; margin-left: max(0px, 7vw); animation: rise 0.35s ease-out; }
#ui.ingame .panel { justify-self: center; margin-left: 0; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.title h1 { font: 600 clamp(44px, 8vw, 86px) / 1 var(--display); letter-spacing: 0.16em; margin: 0 0 6px; color: var(--ember2); text-shadow: 0 0 30px rgba(255, 130, 40, 0.55), 0 4px 0 rgba(0, 0, 0, 0.5); }
.title p { margin: 0 0 28px; font: italic 18px var(--display); color: var(--ink); opacity: 0.9; }
.panel h2 { font: 600 30px var(--display); letter-spacing: 0.06em; color: var(--ember2); margin: 0 0 16px; }
.panel h2 small { font: 13px var(--ui); color: var(--dim); letter-spacing: 0; }
.menu { display: flex; flex-direction: column; gap: 8px; }
.menu.wide { width: min(760px, 94vw); }
.b { appearance: none; text-align: left; font: 600 17px var(--ui); color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 13px 18px; cursor: pointer; transition: transform 0.12s, background 0.12s, border-color 0.12s; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.b small { font-weight: 500; font-size: 12.5px; color: var(--dim); }
.b:hover, .b.focus { background: var(--panel2); border-color: rgba(255, 170, 90, 0.7); transform: translateX(6px); box-shadow: -4px 0 0 var(--ember); }
.b.primary { background: linear-gradient(90deg, rgba(150, 62, 18, 0.92), rgba(70, 30, 12, 0.85)); border-color: rgba(255, 160, 80, 0.5); }
.b.dim { opacity: 0.45; cursor: default; }
.b.file { justify-content: flex-start; }
.foot, .hint { color: var(--dim); font-size: 13px; margin-top: 14px; line-height: 1.5; }
.row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.row label { width: 170px; color: var(--dim); font-size: 14px; }
.row input[type=text] { flex: 1; min-width: 140px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 8px 10px; font: 15px var(--ui); }
.row input[type=text].focus, .row input[type=text]:focus { outline: none; border-color: var(--ember); }
.row input[type=range] { flex: 1; accent-color: var(--ember); }
.row input[type=range].focus { outline: 2px solid var(--ember); outline-offset: 4px; border-radius: 4px; }
.row output { width: 42px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.chip { background: rgba(0, 0, 0, 0.3); color: var(--ink); border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; font: 600 13px var(--ui); cursor: pointer; text-transform: capitalize; }
.chip small { color: var(--dim); font-weight: 500; text-transform: none; }
.chip.on { background: rgba(200, 90, 30, 0.85); border-color: var(--ember); }
.chip.focus, .chip:hover { outline: 2px solid var(--ember2); }
.sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.5); cursor: pointer; }
.sw.on { outline: 3px solid var(--ink); }
.sw.focus { outline: 3px solid var(--ember); }
.saverow { display: flex; gap: 6px; }
.saverow .b { flex: 1; }
.x { width: 46px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--dim); cursor: pointer; font-size: 16px; }
.x:hover, .x.focus { color: #fff; background: #5a1410; }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.slot { background: var(--panel); border: 1px dashed rgba(255, 190, 120, 0.35); border-radius: 16px; padding: 22px 16px; display: grid; gap: 8px; text-align: center; min-height: 150px; align-content: center; }
.slot b { font: 600 20px var(--display); color: var(--ember2); }
.slot small { color: var(--dim); font-size: 11.5px; }
.slot.joined { border-style: solid; border-color: var(--ember); background: linear-gradient(180deg, rgba(120, 50, 15, 0.6), var(--panel)); cursor: pointer; }
.slot.joined.focus { outline: 2px solid var(--ember2); }
.pulse { animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.room { flex-direction: column; align-items: flex-start; position: relative; min-height: 86px; }
.room b { font: 600 19px var(--display); }
.room .pc { position: absolute; right: 14px; top: 12px; font-size: 13px; color: var(--ember2); }
.room[disabled] { opacity: 0.5; }
.err { color: #ffb0a0; background: rgba(90, 20, 16, 0.6); padding: 8px 12px; border-radius: 8px; grid-column: 1 / -1; }
table.ctl { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 12px; overflow: hidden; font-size: 13.5px; }
.ctl th { text-align: left; color: var(--ember2); font: 600 13px var(--ui); padding: 10px; border-bottom: 1px solid var(--line); }
.ctl td { padding: 7px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.ctl td:first-child { color: var(--dim); }
.tips { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.scr-win .title h1 { color: #ffe7a8; }

/* ---------------- chat */
#chat { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); width: min(560px, 90vw); display: none; z-index: 25; }
#chat.on { display: block; }
#chat input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ember); background: rgba(10, 7, 5, 0.9); color: var(--ink); font: 15px var(--ui); outline: none; }

/* ---------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.hud { position: absolute; overflow: hidden; font-size: 14px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.hud + .hud { border-left: 2px solid rgba(0, 0, 0, 0.7); }
.hud-top { position: absolute; left: 16px; top: 14px; right: 16px; display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.clock, .firebox, .rescued { background: rgba(14, 10, 8, 0.55); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; display: flex; gap: 10px; align-items: center; backdrop-filter: blur(2px); }
.clock b { font: 600 19px var(--display); display: block; letter-spacing: 0.04em; }
.clock .sub { color: var(--dim); font-size: 11.5px; }
.dial { width: 38px; height: 19px; overflow: hidden; position: relative; border-bottom: 1px solid var(--line); }
.dial::before { content: ''; position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px dashed rgba(255, 220, 160, 0.35); }
.sunmoon { position: absolute; left: 0; top: 0; width: 38px; height: 38px; transform-origin: 50% 50%; }
.sunmoon::after { content: ''; position: absolute; left: -4px; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: #ffd56a; box-shadow: 0 0 10px #ffb43a; }
.is-night .sunmoon::after { background: #dfe6ff; box-shadow: 0 0 10px #9fb6ff; }
.is-night .clock b { color: #c9d4ff; }
.fire-ico { font-size: 24px; filter: drop-shadow(0 0 6px rgba(255, 120, 30, 0.9)); animation: fireflick 0.6s infinite alternate; }
@keyframes fireflick { to { transform: scale(1.08) rotate(-3deg); filter: drop-shadow(0 0 9px rgba(255, 150, 40, 1)); } }
.fire-out .fire-ico { filter: grayscale(1); animation: none; opacity: 0.5; }
.fire-out .firebox { border-color: var(--blood); background: rgba(90, 20, 16, 0.55); }
.fire-txt b { font-size: 13px; display: block; margin-bottom: 4px; }
.meter { height: 7px; width: 120px; background: rgba(0, 0, 0, 0.5); border-radius: 9px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; border-radius: 9px; transition: width 0.25s; }
.fuel i { background: linear-gradient(90deg, #ff5a1a, #ffc04a); }
.meter.xp { height: 3px; margin-top: 3px; }
.xp i { background: #fff1c8; opacity: 0.7; }
.rescued { margin-left: auto; font-size: 12px; color: var(--dim); }
.rescued i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--dim); display: inline-block; }
.rescued i.follow { background: var(--ember2); border-color: var(--ember2); }
.rescued i.rescued { background: var(--good); border-color: var(--good); }

.compass { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); width: min(420px, 46%); height: 34px; mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.compass .strip { position: absolute; inset: 0; border-bottom: 1px solid rgba(255, 230, 190, 0.35); }
.compass span { position: absolute; top: 2px; transform: translateX(-50%); font-weight: 700; white-space: nowrap; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.compass .dir { color: var(--ink); font-size: 13px; opacity: 0.85; }
.compass small { font-size: 10px; color: var(--dim); font-weight: 600; margin-top: 2px; }
.compass .camp { font-size: 17px; filter: drop-shadow(0 0 6px rgba(255, 120, 30, 0.9)); }
.compass .mk { font-size: 15px; }
.compass .needle { position: absolute; left: 50%; bottom: -4px; width: 2px; height: 8px; background: var(--ember2); }
.narrow .compass { top: 76px; width: 64%; }

.cross { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255, 245, 225, 0.75); box-shadow: 0 0 3px #000; transition: transform 0.1s; }
.cross.target { transform: scale(1.8); background: var(--ember2); }
.prompt { position: absolute; left: 50%; top: calc(50% + 34px); transform: translateX(-50%); background: rgba(14, 10, 8, 0.72); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity 0.12s; }
.prompt.on { opacity: 1; }

.toasts { position: absolute; left: 16px; top: 82px; display: flex; flex-direction: column; gap: 6px; max-width: min(440px, 70%); }
.narrow .toasts { top: 120px; }
.toast { background: rgba(14, 10, 8, 0.72); border-left: 3px solid var(--ember); padding: 7px 12px; border-radius: 0 10px 10px 0; font-size: 13.5px; animation: rise 0.25s; transition: opacity 0.5s, transform 0.5s; }
.toast.good { border-color: var(--good); }
.toast.bad { border-color: var(--blood); background: rgba(70, 14, 10, 0.75); }
.toast.night { border-color: #8aa0ff; }
.toast.chat { border-color: #8ad0ff; }
.toast.dim { opacity: 0.6; }
.toast.out { opacity: 0; transform: translateX(-12px); }

.bottom { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: flex-end; gap: 12px; }
.bars { background: rgba(14, 10, 8, 0.55); border: 1px solid var(--line); border-radius: 14px; padding: 9px 12px; display: grid; gap: 5px; }
.bar { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bar span { width: 18px; text-align: center; }
.bar em { font-style: normal; font-size: 11.5px; color: var(--dim); width: 26px; font-variant-numeric: tabular-nums; }
.bar .meter { width: 150px; height: 9px; }
.hp i { background: linear-gradient(90deg, #b8241c, #ff5a4a); }
.food i { background: linear-gradient(90deg, #a5652a, #f0b060); }
.stam .meter, .bat .meter { height: 5px; }
.stam i { background: #e9e4a0; }
.bat i { background: #a8d4ff; }
.low-hp .hp .meter { animation: pulse 0.8s infinite; box-shadow: 0 0 0 1px var(--blood); }
.starving .food .meter { animation: pulse 0.8s infinite; }
.tools { display: flex; gap: 6px; margin-left: auto; margin-right: auto; }
.tools .slot { background: rgba(14, 10, 8, 0.55); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12.5px; text-align: center; }
.tools .slot b { font: 600 12.5px var(--ui); color: var(--ink); }
.tools .slot.on { border-color: var(--ember); background: rgba(120, 50, 15, 0.6); }
.tools .slot.locked { opacity: 0.35; }
.tools .slot.flash.lit { border-color: #cfe3ff; box-shadow: 0 0 14px rgba(200, 220, 255, 0.4); }
.tools kbd { font-size: 10px; }
.bag { background: rgba(14, 10, 8, 0.55); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; min-width: 150px; max-width: 270px; }
.bag-h { font-size: 11.5px; color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 5px; display: flex; justify-content: space-between; }
.bag-h em { font-style: normal; color: var(--ink); }
.bag-full .bag { border-color: var(--ember); }
.bag-full .bag-h em { color: var(--ember); }
.bag-items { display: flex; flex-wrap: wrap; gap: 5px; }
.bag-items .it { display: flex; align-items: center; gap: 3px; background: rgba(0, 0, 0, 0.35); border-radius: 8px; padding: 3px 7px; font-size: 13px; }
.bag-items .empty { color: var(--dim); font-size: 12px; }
.narrow .bottom { flex-wrap: wrap; }
.narrow .tools { order: -1; width: 100%; justify-content: center; }
.narrow .bar .meter { width: 100px; }
.tiny .bag { display: none; }
.tiny .rescued span { display: none; }

.dead { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: radial-gradient(circle, rgba(60, 0, 0, 0.2), rgba(20, 0, 0, 0.7)); opacity: 0; transition: opacity 0.6s; }
.dead.on { opacity: 1; }
.dead h2 { font: 600 clamp(26px, 4vw, 44px) var(--display); color: #ff8070; margin: 0 0 8px; letter-spacing: 0.06em; }
.dead p { color: var(--ink); margin: 0; font-size: 14px; }

.craft { position: absolute; right: 16px; top: 80px; bottom: 120px; width: min(380px, 60%); background: rgba(16, 11, 8, 0.9); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: none; flex-direction: column; gap: 8px; pointer-events: auto; overflow: hidden; }
.craft.on { display: flex; }
.craft h3 { margin: 0; font: 600 22px var(--display); color: var(--ember2); }
.storage { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.storage .lbl { color: var(--dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; margin-right: 4px; }
.storage .it { background: rgba(0, 0, 0, 0.4); padding: 3px 8px; border-radius: 8px; }
.storage i { font-style: normal; margin-right: 3px; }
.recipes { overflow: auto; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.rec { border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; padding: 8px 10px; background: rgba(0, 0, 0, 0.25); cursor: pointer; }
.rec.sel { border-color: var(--ember); background: rgba(120, 50, 15, 0.45); }
.rec.lock, .rec.own { opacity: 0.45; }
.rec.can .rn b { color: var(--good); }
.rn { display: flex; justify-content: space-between; }
.rn em { font-style: normal; font-size: 11px; color: var(--dim); }
.rc { font-size: 13px; margin: 3px 0; }
.rc .ok { color: var(--good); } .rc .no { color: #ff9d8a; }
.rd { font-size: 12px; color: var(--dim); }
.craft-foot { font-size: 12px; color: var(--dim); }
.narrow .craft { width: calc(100% - 32px); top: 120px; }
.plabel { position: absolute; right: 16px; bottom: 112px; font-size: 11px; color: var(--dim); background: rgba(0, 0, 0, 0.35); padding: 2px 8px; border-radius: 8px; }
.plabel:empty { display: none; }

/* ---------------- touch controls */
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
#c { touch-action: none; }
#ui { touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.ctl-wrap { overflow-x: auto; border-radius: 12px; }
.ctl-wrap table { min-width: 720px; }
.craft-x { float: right; appearance: none; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line); color: var(--ink); border-radius: 10px; width: 38px; height: 34px; font-size: 16px; cursor: pointer; }
.craft-x:hover { background: rgba(255, 255, 255, 0.16); }

#touch { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 12; overflow: hidden; display: none; touch-action: none; user-select: none; -webkit-user-select: none; }
#touch.on { display: block; }
#touch.craft { display: none; }
#touch .joy { position: absolute; left: max(110px, 14vw); top: calc(100% - max(120px, 24vh)); width: min(140px, 24vh); height: min(140px, 24vh); margin: calc(min(140px, 24vh) / -2) 0 0 calc(min(140px, 24vh) / -2); border-radius: 50%; border: 2px solid rgba(255, 236, 200, 0.25); background: radial-gradient(circle, rgba(255, 236, 200, 0.06), rgba(0, 0, 0, 0.18)); opacity: 0.55; transition: opacity 0.15s; pointer-events: none; }
#touch .joy.active { opacity: 1; }
#touch .joy.sprint { border-color: rgba(255, 190, 90, 0.8); box-shadow: 0 0 18px rgba(255, 150, 50, 0.35); }
#touch .knob { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; border-radius: 50%; background: rgba(255, 236, 200, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); transform: translate(-50%, -50%); }
#touch .look-hint { position: absolute; right: 22%; top: 46%; color: rgba(255, 236, 200, 0.28); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; pointer-events: none; animation: fadeHint 6s forwards; }
@keyframes fadeHint { 70% { opacity: 1; } to { opacity: 0; } }
#touch .tb { position: absolute; appearance: none; border: 1px solid rgba(255, 220, 170, 0.28); background: rgba(16, 11, 8, 0.5); color: var(--ink); border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 0; padding: 0; font: 600 10px var(--ui); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); touch-action: none; }
#touch .tb span { font-size: 22px; line-height: 1; }
#touch .tb small { font-size: 9.5px; color: var(--dim); margin-top: 2px; }
#touch .tb.press { background: rgba(200, 90, 30, 0.75); border-color: var(--ember); transform: scale(0.94); }
/* main cluster, bottom right */
#touch { --u: min(64px, 11.5vh, 13vw); }
#touch .b-attack { right: calc(var(--u) * 0.45); bottom: calc(var(--u) * 0.45); width: calc(var(--u) * 1.55); height: calc(var(--u) * 1.55); }
#touch .b-attack span { font-size: 32px; }
#touch .b-use { right: calc(var(--u) * 2.25); bottom: calc(var(--u) * 0.3); width: var(--u); height: var(--u); }
#touch .b-jump { right: calc(var(--u) * 2.05); bottom: calc(var(--u) * 1.55); width: var(--u); height: var(--u); }
#touch .b-flash { right: calc(var(--u) * 0.75); bottom: calc(var(--u) * 2.25); width: var(--u); height: var(--u); }
#touch .b-flash.lit { background: rgba(190, 215, 255, 0.35); border-color: #dbe8ff; box-shadow: 0 0 16px rgba(200, 220, 255, 0.45); }
#touch.can-use .b-use { background: rgba(200, 110, 30, 0.75); border-color: var(--ember2); animation: usePulse 1s infinite; }
@keyframes usePulse { 50% { box-shadow: 0 0 0 6px rgba(255, 170, 70, 0.25); } }
/* small row, right edge above the cluster */
#touch .b-eat, #touch .b-heal, #touch .b-tool, #touch .b-view, #touch .b-drop { width: calc(var(--u) * 0.72); height: calc(var(--u) * 0.72); right: calc(var(--u) * 0.35); }
#touch .b-eat span, #touch .b-heal span, #touch .b-tool span, #touch .b-view span, #touch .b-drop span { font-size: 16px; }
#touch .b-eat small, #touch .b-heal small, #touch .b-tool small, #touch .b-view small, #touch .b-drop small { display: none; }
#touch .b-eat { bottom: calc(var(--u) * 3.35); }
#touch .b-heal { bottom: calc(var(--u) * 4.15); }
#touch .b-tool { bottom: calc(var(--u) * 4.95); }
#touch .b-view { bottom: calc(var(--u) * 5.75); }
#touch .b-drop { bottom: calc(var(--u) * 6.55); }
#touch .b-pause { top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 12px; }
#touch .b-pause span { font-size: 15px; letter-spacing: -2px; }
#touch.dead .tb:not(.b-pause) { opacity: 0.25; pointer-events: none; }
@media (max-height: 520px) {
  #touch .b-view, #touch .b-drop { right: calc(var(--u) * 1.2); }
  #touch .b-view { bottom: calc(var(--u) * 3.35); }
  #touch .b-drop { bottom: calc(var(--u) * 4.15); }
}

/* HUD of a touch player: keep the bottom corners free for thumbs */
.hud.touchmode .hud-top { right: 66px; }
.hud.touchmode .rescued span { display: none; }
.hud.touchmode .bottom { left: 50%; right: auto; bottom: 8px; transform: translateX(-50%); width: max-content; max-width: 46%; gap: 6px; }
.hud.touchmode .tools { display: none; }
.hud.touchmode .bars { padding: 6px 10px; gap: 3px; grid-template-columns: 1fr 1fr; column-gap: 10px; }
.hud.touchmode .bar .meter { width: min(110px, 13vw); }
.hud.touchmode .bar em { display: none; }
.hud.touchmode .bag { padding: 5px 8px; min-width: 0; max-width: 160px; }
.hud.touchmode .bag-h { margin-bottom: 3px; font-size: 10px; }
.hud.touchmode .bag-items .it { padding: 2px 5px; font-size: 12px; }
.hud.touchmode .compass { top: 66px; }
.hud.touchmode .toasts { top: 104px; max-width: 46%; }
.hud.touchmode .prompt { top: calc(50% + 40px); font-size: 15px; }
.hud.touchmode .craft { top: 64px; bottom: 12px; right: 12px; width: min(420px, 70%); }
.hud.touchmode .rec { padding: 11px 12px; }
.hud.touchmode .plabel { display: none; }
@media (max-height: 520px) {
  .hud.touchmode .hud-top { left: 10px; top: 8px; gap: 6px; }
  .hud.touchmode .clock, .hud.touchmode .firebox, .hud.touchmode .rescued { padding: 5px 9px; border-radius: 11px; }
  .hud.touchmode .clock b { font-size: 15px; }
  .hud.touchmode .fire-ico { font-size: 18px; }
  .hud.touchmode .meter.fuel { width: 80px; }
  .hud.touchmode .compass { top: 52px; width: 40%; }
  .hud.touchmode .toasts { top: 88px; }
}
/* portrait phones: suggest rotating */
#rotate { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 30; background: rgba(16, 11, 8, 0.85); border: 1px solid var(--line); padding: 8px 14px; border-radius: 12px; font-size: 13px; display: none; pointer-events: none; }
@media (orientation: portrait) and (pointer: coarse) { body.touch.ingame #rotate { display: block; } }
.hud.crafting .prompt { display: none; }
.hud.touchmode .bottom { max-width: 64%; flex-wrap: nowrap; }
/* short (landscape phone) screens: compact menus */
@media (max-height: 520px) {
  #ui { padding: 10px; }
  .panel { margin-left: max(0px, 4vw); }
  .title h1 { font-size: 40px; margin-bottom: 2px; }
  .title p { font-size: 14px; margin-bottom: 12px; }
  .panel h2 { font-size: 22px; margin-bottom: 8px; }
  .scr-main .menu { display: grid; grid-template-columns: 1fr 1fr; }
  .scr-main .menu .b.primary { grid-column: 1 / -1; }
  .b { padding: 9px 14px; font-size: 15px; border-radius: 10px; }
  .menu { gap: 6px; }
  .row { padding: 6px 10px; }
  .row label { width: 130px; font-size: 13px; }
  .slot { min-height: 104px; padding: 12px; }
  .foot, .hint { margin-top: 8px; }
  .rooms .room { min-height: 64px; }
}
.hud.touchmode.tiny .bag { display: block; }
/* touch player in a split-screen half: stats go to the top so the thumbs have the bottom */
.hud.touchmode.narrow .bottom { left: 12px; right: auto; top: 104px; bottom: auto; transform: none; max-width: 70%; }
.hud.touchmode.narrow .toasts { top: 168px; }