:root {
  --cyan: #3cf0ff; --magenta: #ff3cd2; --amber: #ffa24a;
  --ink: #e9eef2; --dim: #8a96a3; --panel: rgba(8, 10, 16, 0.72); --line: rgba(120, 220, 255, 0.22);
  --font: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif; --mono: 'JetBrains Mono', Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #05060a; color: var(--ink); font-family: var(--font); }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button { font-family: var(--font); }

/* ---------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s; }
body.playing #hud { opacity: 1; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 4px rgba(0,0,0,.6); transition: all .15s; }
#crosshair.focus { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: transparent; border: 1.5px solid rgba(160, 245, 255, .85); }
#prompt { position: absolute; left: 50%; top: calc(50% + 36px); transform: translate(-50%, 6px); display: flex; gap: 10px; align-items: center; font-size: 15px; letter-spacing: .04em; opacity: 0; transition: opacity .18s, transform .18s; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
#prompt.show { opacity: 1; transform: translate(-50%, 0); }
#prompt .key { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid rgba(160, 245, 255, .8); border-radius: 4px; font-family: var(--mono); font-size: 12px; color: var(--cyan); background: rgba(0,0,0,.35); }
#ammo { position: absolute; right: 36px; bottom: 30px; font-family: var(--mono); font-size: 22px; letter-spacing: .06em; opacity: 0; transition: opacity .3s; text-shadow: 0 0 10px rgba(60, 240, 255, .35), 0 1px 3px #000; }
#ammo.show { opacity: .9; }
#toasts { position: absolute; left: 32px; bottom: 32px; display: flex; flex-direction: column; gap: 6px; }
.toast { display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; background: linear-gradient(90deg, rgba(10,14,22,.8), rgba(10,14,22,.2)); border-left: 2px solid var(--cyan); font-size: 14px; letter-spacing: .03em; transform: translateX(-12px); opacity: 0; transition: all .35s; color: #dff8ff; }
.toast svg { color: var(--cyan); }
.toast.in { transform: none; opacity: 1; }
.toast.out { opacity: 0; transform: translateY(-6px); }
#status { position: absolute; right: 32px; top: 28px; text-align: right; opacity: 0; transform: translateY(-6px); transition: all .4s; }
#status.show { opacity: 1; transform: none; }
#status .k { font-size: 11px; letter-spacing: .3em; color: var(--magenta); text-transform: uppercase; }
#status .v { font-size: 22px; font-weight: 600; letter-spacing: .04em; text-shadow: 0 0 18px rgba(255,60,210,.35); }
#hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: max-content; max-width: 90vw; text-align: center; font-size: 11.5px; letter-spacing: .08em; color: rgba(220,235,245,.45); transition: opacity 1s; }
body.hint-off #hint { opacity: 0; }

/* ---------------- examine */
#examine { position: fixed; left: 50%; bottom: 9vh; transform: translate(-50%, 10px); width: min(560px, 90vw); text-align: center; opacity: 0; pointer-events: none; transition: all .3s; }
#examine.show { opacity: 1; transform: translate(-50%, 0); }
#examine .name { font-size: 22px; font-weight: 600; letter-spacing: .06em; color: #fff; text-shadow: 0 0 16px rgba(60, 240, 255, .3); }
#examine .desc { margin: 6px auto 12px; color: #c9d6de; font-size: 15px; line-height: 1.45; text-shadow: 0 1px 4px #000; }
#examine .keys { font-size: 12.5px; color: var(--dim); letter-spacing: .06em; }
#examine b, #pause b, #start b { color: var(--cyan); font-family: var(--mono); font-weight: 600; }

/* ---------------- panels */
.panel { background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px); border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
#inventory, #pause { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(2, 3, 8, .35); opacity: 0; pointer-events: none; transition: opacity .25s; }
#inventory.show, #pause.show { opacity: 1; pointer-events: auto; }
#inventory .panel { width: min(820px, 94vw); padding: 22px 24px 24px; }
#inventory header { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
#inventory h2 { margin: 0; font-size: 20px; letter-spacing: .18em; text-transform: uppercase; }
#invCount { color: var(--dim); font-size: 13px; }
#inventory .close { margin-left: auto; color: var(--dim); font-size: 12px; letter-spacing: .05em; }
#inventory .body { display: grid; grid-template-columns: 1fr 260px; gap: 20px; }
#invGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-content: start; }
.slot { position: relative; aspect-ratio: 1; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); color: #bfeaf5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: all .15s; padding: 6px; }
.slot:hover { border-color: rgba(60,240,255,.5); background: rgba(60,240,255,.06); }
.slot.sel { border-color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(60,240,255,.4), 0 0 18px rgba(60,240,255,.15); }
.slot.eq::after { content: 'EQUIPPED'; position: absolute; top: 6px; left: 7px; font-size: 8.5px; letter-spacing: .15em; color: var(--amber); }
.slot.empty { cursor: default; opacity: .45; }
.slot .nm { font-size: 11px; color: #d7e4ea; text-align: center; line-height: 1.15; }
.slot .qty { position: absolute; right: 7px; bottom: 5px; font-family: var(--mono); font-size: 12px; color: #fff; }
#invDetail { border-left: 1px solid rgba(255,255,255,.08); padding-left: 20px; }
#invDetail .big { color: var(--cyan); filter: drop-shadow(0 0 10px rgba(60,240,255,.35)); }
#invDetail h3 { margin: 8px 0 2px; font-size: 19px; letter-spacing: .04em; }
#invDetail .cnt { font-family: var(--mono); color: var(--dim); font-size: 13px; }
#invDetail p { color: #c2ced6; font-size: 14px; line-height: 1.5; }
#invDetail .muted { color: var(--dim); }
.act, .primary { margin-top: 6px; padding: 9px 22px; border-radius: 6px; border: 1px solid var(--cyan); background: rgba(60,240,255,.1); color: #e9fdff; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: all .15s; }
.act:hover, .primary:hover { background: rgba(60,240,255,.22); box-shadow: 0 0 18px rgba(60,240,255,.25); }

#pause .panel { width: min(620px, 94vw); padding: 26px 30px 28px; }
.logo { margin: 0; font-weight: 700; letter-spacing: .28em; font-size: clamp(38px, 7vw, 86px); color: #f4fbff; text-shadow: 0 0 22px rgba(60,240,255,.45), 0 0 2px #fff; }
.logo span { color: var(--magenta); text-shadow: 0 0 26px rgba(255,60,210,.65), 0 0 2px #fff; }
.logo.small { font-size: 26px; letter-spacing: .3em; }
.envlabel { color: var(--dim); font-size: 13px; letter-spacing: .08em; margin: 4px 0 14px; }
#pause section { margin: 14px 0; }
#pause h4 { margin: 0 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: #9fb2bf; }
#pause h4 em { font-style: normal; font-family: var(--mono); color: var(--cyan); margin-left: 6px; letter-spacing: 0; }
.row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
#qualityRow { grid-template-columns: repeat(3, 1fr); }
.seg { padding: 9px 6px; border-radius: 6px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: #cfdbe3; font-size: 13px; cursor: pointer; transition: all .15s; }
.seg:hover { border-color: rgba(60,240,255,.45); }
.seg.on { border-color: var(--cyan); color: #fff; background: rgba(60,240,255,.12); box-shadow: 0 0 14px rgba(60,240,255,.18); }
.sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sliders label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #9fb2bf; letter-spacing: .1em; text-transform: uppercase; }
input[type=range] { accent-color: #3cf0ff; }
.controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px 10px; font-size: 12.5px; color: #b8c6cf; }
#resume { width: 100%; margin-top: 10px; }

/* ---------------- start */
#start { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 60%, rgba(40, 10, 50, .55), rgba(3, 4, 8, .96) 70%), #04050a; transition: opacity 1.2s, visibility 1.2s; z-index: 10; }
#start.gone { opacity: 0; visibility: hidden; }
/* once loaded, the live rainy canal shows through behind the title (the game renders the start view meanwhile) */
#start.ready { background: radial-gradient(ellipse at 50% 46%, rgba(6, 4, 14, .58) 0%, rgba(6, 4, 14, .42) 38%, rgba(3, 4, 8, .9) 82%); transition: background 2s, opacity 1.2s, visibility 1.2s; }
#start.ready .logo { text-shadow: 0 0 22px rgba(60,240,255,.45), 0 0 2px #fff, 0 3px 26px rgba(0,0,0,.75); }
#start.ready .logo span { text-shadow: 0 0 26px rgba(255,60,210,.65), 0 0 2px #fff, 0 3px 26px rgba(0,0,0,.75); }
#start.ready .tag, #start.ready .goal, #start.ready .keys { text-shadow: 0 1px 8px rgba(0,0,0,.9); }
#start .inner { text-align: center; padding: 20px; position: relative; }
#start .tag { color: #b9c8d2; font-size: 16px; letter-spacing: .08em; margin: 14px 0 34px; }
#loadbar { width: min(360px, 70vw); height: 2px; margin: 0 auto; background: rgba(255,255,255,.08); overflow: hidden; }
#loadbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--magenta)); transition: width .3s; }
#loadtext { margin-top: 10px; font-size: 12px; letter-spacing: .15em; color: var(--dim); text-transform: uppercase; }
#enter { display: none; margin: 26px auto 0; padding: 14px 42px; font-size: 16px; letter-spacing: .3em; text-transform: uppercase; color: #fff; background: transparent; border: 1px solid var(--cyan); border-radius: 4px; cursor: pointer; box-shadow: 0 0 24px rgba(60,240,255,.25), inset 0 0 18px rgba(60,240,255,.12); animation: pulse 2.4s infinite; }
#start.ready #enter { display: block; }
#start.ready #loadbar, #start.ready #loadtext { display: none; }
@keyframes pulse { 50% { box-shadow: 0 0 40px rgba(60,240,255,.45), inset 0 0 22px rgba(60,240,255,.2); } }
#start .keys { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: 12.5px; color: #9fb0bc; }
#start .headphones { margin-top: 18px; font-size: 11px; color: #6c7a86; letter-spacing: .2em; text-transform: uppercase; }
.rain-overlay { position: absolute; inset: 0; background-image: repeating-linear-gradient(100deg, rgba(160,200,255,.05) 0 1px, transparent 1px 9px); animation: rain 0.6s linear infinite; opacity: .6; }
@keyframes rain { to { background-position: -30px 120px; } }
/* ---------------- objectives */
#start .goal { margin: -18px 0 30px; color: #d7e6ee; font-size: 14.5px; letter-spacing: .04em; }
#objective { position: absolute; left: 28px; top: 26px; max-width: min(420px, 60vw); padding: 10px 14px 10px 12px; border-left: 2px solid var(--amber); background: linear-gradient(90deg, rgba(8,10,16,.62), rgba(8,10,16,0)); transition: border-color .4s; }
#objective .lvl { font-size: 10.5px; letter-spacing: .28em; color: var(--amber); margin-bottom: 4px; }
#objective .row { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; letter-spacing: .02em; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
#objective .box { width: 11px; height: 11px; border: 1.5px solid #e9eef2; border-radius: 2px; flex: none; transition: all .3s; }
#objective.done .box { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
#objective .cnt { font-family: var(--mono); font-size: 13px; color: var(--cyan); }
#objective .hint { margin-top: 4px; font-size: 12.5px; color: #aebfca; line-height: 1.4; }
#objective .steps { display: none; }
#objective.fresh { animation: objIn .9s ease-out; }
@keyframes objIn { 0% { transform: translateX(-14px); opacity: 0; } 100% { transform: none; opacity: 1; } }
#waypoint { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; transition: opacity .3s; }
#waypoint .dia { position: absolute; left: -7px; top: -7px; width: 12px; height: 12px; border: 2px solid var(--amber); transform: rotate(45deg); box-shadow: 0 0 10px rgba(255,162,74,.6); background: rgba(255,162,74,.18); }
#waypoint .dist { position: absolute; left: -30px; top: 12px; width: 60px; text-align: center; font-family: var(--mono); font-size: 11px; color: #ffd9b0; text-shadow: 0 1px 3px #000; }
#waypoint.edge .dia { border-color: #ffd9b0; animation: wpPulse 1.2s infinite; }
@keyframes wpPulse { 50% { box-shadow: 0 0 18px rgba(255,162,74,.9); } }
#levelcard { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.98); width: min(620px, 90vw); text-align: center; padding: 26px 32px 22px; background: rgba(6,8,14,.72); border: 1px solid rgba(255,162,74,.35); border-radius: 10px; backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .8s, transform .8s; z-index: 6; }
#levelcard.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#levelcard .k { font-size: 11px; letter-spacing: .34em; color: var(--amber); }
#levelcard .t { margin: 8px 0 10px; font-size: 30px; font-weight: 700; letter-spacing: .06em; text-shadow: 0 0 20px rgba(255,162,74,.3); }
#levelcard .b { color: #cdd9e0; font-size: 15px; line-height: 1.55; }
#levelcard .f { margin-top: 14px; color: #8fa2ae; font-size: 12px; letter-spacing: .08em; }
.fadeblack { position: fixed; inset: 0; background: #000; opacity: 0; transition: opacity 1.5s; z-index: 7; pointer-events: none; }
.fadeblack.on { opacity: 1; }
#pause .objsec h4 { color: var(--amber); letter-spacing: .12em; }
#objList div { font-size: 13px; color: #8fa2ae; line-height: 1.7; }
#objList .ok { color: #7fd8c0; }
#objList .cur { color: #fff; font-weight: 600; }
#status { top: 26px; }
@media (max-width: 700px) { #inventory .body { grid-template-columns: 1fr; } .controls { grid-template-columns: repeat(2, 1fr); } }

/* ---------------- touch controls (phones and tablets only; see src/touch.js) */
body.touch { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.touch, body.touch canvas#game, #touch { touch-action: none; }
body.touch #pause .panel, body.touch #inventory .panel { max-height: calc(100dvh - 24px); overflow-y: auto; touch-action: pan-y; }
body.touch #inventory, body.touch #pause { z-index: 5; }
body.touch #pause .controls, body.touch #start .keys { display: none; }
body.touch #inventory .close { pointer-events: auto; cursor: pointer; padding: 6px 12px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); }
body.touch #status { top: 64px; }
body.touch #hint { bottom: auto; top: calc(62px + env(safe-area-inset-top)); }

#touch { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .4s; }
body.playing #touch { opacity: 1; }
#touch.hidden, #touch.inv { visibility: hidden; }
#touch .tz-zone { position: absolute; top: 56px; bottom: 0; pointer-events: auto; }
#touch .tz-left { left: 0; width: 42%; }
#touch .tz-right { right: 0; width: 58%; }

/* floating stick: rests bottom-left, jumps to wherever the thumb lands */
.tz-stick { position: absolute; left: calc(96px + env(safe-area-inset-left)); top: calc(100% - 104px - env(safe-area-inset-bottom)); width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 1.5px solid rgba(160, 245, 255, .28); background: radial-gradient(circle, rgba(60, 240, 255, .06), rgba(8, 10, 16, .25)); pointer-events: none; opacity: .55; transition: opacity .2s; }
.tz-stick.active { opacity: 1; }
.tz-knob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(160, 245, 255, .22); border: 1.5px solid rgba(160, 245, 255, .7); box-shadow: 0 0 16px rgba(60, 240, 255, .3); }

.tz-btn { position: absolute; pointer-events: auto; display: grid; place-items: center; padding: 0; border-radius: 50%; font: 600 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: rgba(8, 10, 16, .45); border: 1.5px solid rgba(160, 245, 255, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); touch-action: none; }
.tz-btn.down { background: rgba(60, 240, 255, .28); border-color: var(--cyan); }
.tz-btn.off { opacity: .28; }
.tz-btn.on { border-color: var(--amber); color: #ffd9b0; box-shadow: 0 0 14px rgba(255, 162, 74, .35); }

.tz-cluster { position: absolute; right: env(safe-area-inset-right); bottom: env(safe-area-inset-bottom); width: 236px; height: 220px; pointer-events: none; }
.tz-fire { right: 22px; bottom: 26px; width: 84px; height: 84px; font-size: 13px; border-color: rgba(255, 60, 210, .75); box-shadow: 0 0 18px rgba(255, 60, 210, .25); }
.tz-fire.down { background: rgba(255, 60, 210, .3); border-color: var(--magenta); }
.tz-aim { right: 120px; bottom: 18px; width: 58px; height: 58px; }
.tz-aim.on { background: rgba(60, 240, 255, .22); border-color: var(--cyan); }
.tz-jump { right: 36px; bottom: 124px; width: 58px; height: 58px; }
.tz-use { right: 112px; bottom: 96px; width: 62px; height: 62px; }
.tz-use.ready { border-color: var(--cyan); color: #fff; box-shadow: 0 0 18px rgba(60, 240, 255, .5); animation: pulse 1.6s infinite; }
.tz-reload { right: 178px; bottom: 150px; width: 50px; height: 50px; font-size: 9px; }

.tz-top { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); display: flex; gap: 8px; pointer-events: none; }
.tz-top .tz-btn { position: static; width: auto; height: 38px; padding: 0 12px; border-radius: 6px; font-size: 10.5px; }
.tz-pause { display: flex !important; gap: 4px; align-items: center; justify-content: center; width: 42px !important; }
.tz-pause span { width: 4px; height: 14px; background: var(--ink); border-radius: 1px; }

/* examining an item: only Take / Put back (drag still turns it) */
.tz-examine { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: none; gap: 14px; pointer-events: none; }
.tz-examine .tz-btn { position: static; width: auto; height: 46px; padding: 0 22px; border-radius: 6px; font-size: 12px; }
#touch.examining .tz-examine { display: flex; }
#touch.examining .tz-cluster, #touch.examining .tz-top, #touch.examining .tz-stick, #touch.examining .tz-left { display: none; }
#touch.examining .tz-right { width: 100%; }
body.touch.playing #examine { bottom: calc(96px + env(safe-area-inset-bottom)); }

@media (max-height: 420px) {
  .tz-cluster { transform: scale(.86); transform-origin: 100% 100%; }
  body.touch #ammo { bottom: 12px; right: 250px; }
}
body.touch #resume { position: sticky; bottom: 0; box-shadow: 0 -12px 24px rgba(8, 10, 16, .9); }