/* ============================================================
   DEAD AIR — Coolabah Crossing (Digital Greenhouse)
   Standalone game page. Rusted-outback palette + amber terminal UI.
   ============================================================ */
:root {
  --dust: #c9763a;
  --rust: #8a3b16;
  --ink: #1a0f08;
  --amber: #ffb547;
  --amber-dim: #b9782a;
  --amber-glow: rgba(255, 181, 71, .35);
  --panel: rgba(22, 13, 7, .94);
  --line: #5a3417;
  --hp: #d8452b;
  --water: #4fa3c7;
  --rad: #8fdc3c;
  --term: "VT323", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --stencil: "Rubik Dirt", Impact, "Arial Black", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--amber); overflow: hidden; }
body { font-family: var(--term); font-size: 20px; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.game { position: fixed; inset: 0; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud-bars { position: absolute; left: 14px; top: 12px; display: grid; gap: 5px; padding: 8px 10px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 0 0 1px #000, 0 4px 14px rgba(0,0,0,.5); }
.bar { display: flex; align-items: center; gap: 8px; }
.bar-label { width: 34px; font-size: 18px; letter-spacing: 1px; text-shadow: 0 0 6px var(--amber-glow); }
.bar-track { position: relative; width: 150px; height: 11px; background: #0d0704; border: 1px solid #3d2410; }
.bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transition: width .25s linear; }
.bar-fill.hp { background: linear-gradient(#ff6a48, var(--hp)); }
.bar-fill.water { background: linear-gradient(#7cc9ea, var(--water)); }
.bar-fill.rad { background: linear-gradient(#c1ff6e, var(--rad)); box-shadow: 0 0 8px rgba(143,220,60,.6); }
.bar.flash .bar-track { animation: flash .5s steps(2) infinite; }
@keyframes flash { 50% { border-color: #ff5a3a; box-shadow: 0 0 8px #ff5a3a; } }

.hud-quest { position: absolute; right: 14px; top: 12px; max-width: 330px; padding: 8px 12px; background: var(--panel); border: 2px solid var(--line); font-size: 19px; line-height: 1.15; box-shadow: 0 0 0 1px #000, 0 4px 14px rgba(0,0,0,.5); }
.hud-quest h3 { margin: 0 0 4px; font-family: var(--stencil); font-weight: 400; font-size: 18px; letter-spacing: 1px; color: #f3d9a4; }
.hud-quest ul { list-style: none; margin: 0; padding: 0; }
.hud-quest li { padding-left: 18px; position: relative; }
.hud-quest li::before { content: "▢"; position: absolute; left: 0; }
.hud-quest li.done { color: var(--amber-dim); text-decoration: line-through; }
.hud-quest li.done::before { content: "▣"; }
.hud-mini { position: absolute; right: 14px; bottom: 44px; border: 2px solid var(--line); background: #120a05; box-shadow: 0 0 0 1px #000; image-rendering: pixelated; }

.hud-prompt { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); padding: 4px 12px; background: var(--panel); border: 1px solid var(--amber-dim); white-space: nowrap; text-shadow: 0 0 6px var(--amber-glow); }
.hud-search { position: absolute; left: 50%; bottom: calc(22% + 40px); transform: translateX(-50%); width: 140px; height: 8px; border: 1px solid var(--amber-dim); background: #0d0704; }
.hud-search span { display: block; height: 100%; width: 0; background: var(--amber); }
.hud-toasts { position: absolute; left: 14px; bottom: 44px; display: flex; flex-direction: column-reverse; gap: 4px; max-width: 60vw; }
.toast { padding: 3px 10px; background: var(--panel); border-left: 3px solid var(--amber); animation: toastIn .2s ease-out; font-size: 19px; }
.toast.good { border-color: var(--rad); }
.toast.bad { border-color: var(--hp); color: #ffb3a1; }
.toast.out { opacity: 0; transition: opacity .6s; }
@keyframes toastIn { from { transform: translateX(-12px); opacity: 0; } }
.hud-keys { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: center; padding: 5px 60px; font-size: 17px; color: var(--amber-dim); background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.hud-keys b { color: var(--amber); font-weight: 400; }
.hud-mute { position: absolute; right: 14px; bottom: 6px; pointer-events: auto; width: 30px; height: 26px; padding: 0; background: var(--panel); border: 1px solid var(--line); }
.hud-mute.off { color: #6b4a2a; text-decoration: line-through; }

/* ---------- Panels ---------- */
.panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--panel); border: 3px solid var(--line); box-shadow: 0 0 0 2px #000, 0 0 40px rgba(255,140,40,.15), inset 0 0 60px rgba(255,150,40,.06); }
.panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.18) 2px 3px); }
.kit-head { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-bottom: 2px solid var(--line); }
.kit-title { font-family: var(--stencil); font-size: 22px; color: #f3d9a4; letter-spacing: 1px; }
.kit-title small { font-family: var(--term); font-size: 16px; color: var(--amber-dim); }
.kit-tabs { display: flex; gap: 4px; margin-left: auto; }
.kit-tabs button, .kit-close { background: transparent; border: 1px solid var(--line); padding: 1px 12px; }
.kit-tabs button[aria-selected="true"] { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.kit-close { margin-left: 4px; }
.map .kit-close { margin-left: auto; }
.kit-body { overflow: auto; padding: 12px; min-height: 300px; }

.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
.slot { position: relative; height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 4px; background: #0f0804; border: 1px solid #3d2410; font-size: 15px; line-height: 1; text-align: center; }
.slot canvas { width: 44px; height: 44px; margin: auto 0 4px; image-rendering: pixelated; }
.slot .qty { position: absolute; right: 4px; top: 2px; font-size: 18px; color: #f3d9a4; }
.slot:hover, .slot.sel { border-color: var(--amber); box-shadow: inset 0 0 12px var(--amber-glow); }
.slot.key { border-color: #7d5a1e; }
.slot.empty { opacity: .25; }
.inv-desc { min-height: 3em; margin: 12px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); color: #f0cf96; }
.inv-desc button { margin-left: 8px; background: var(--amber); color: var(--ink); border: 0; padding: 0 10px; }

.craft-where { margin: 0 0 10px; color: #f0cf96; }
.craft-list { display: grid; gap: 8px; }
.recipe { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid #3d2410; background: #0f0804; }
.recipe canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.recipe h4 { margin: 0; font-weight: 400; font-size: 22px; color: #f3d9a4; }
.recipe p { margin: 0; font-size: 17px; color: var(--amber-dim); }
.recipe .needs { margin-top: 2px; font-size: 17px; }
.recipe .needs .have { color: var(--rad); }
.recipe .needs .miss { color: #ff8a6a; }
.recipe button { background: var(--amber); color: var(--ink); border: 0; padding: 4px 14px; }
.recipe button:disabled { background: #3d2410; color: #7a5532; cursor: not-allowed; }
.recipe.made { opacity: .55; }
.recipe.sel { border-color: var(--amber); box-shadow: inset 0 0 12px var(--amber-glow); }
.kit-foot { margin: 0; padding: 5px 12px; border-top: 1px solid var(--line); font-size: 16px; color: var(--amber-dim); }
@media (pointer: coarse) { .kit-foot { display: none; } }
.recipe.made button { background: transparent; color: var(--rad); }

.notes { display: grid; gap: 10px; }
.note { padding: 10px 12px; background: #e9d6ad; color: #2a1a0c; font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-size: 16px; line-height: 1.4; transform: rotate(-.4deg); box-shadow: 2px 3px 0 rgba(0,0,0,.4); }
.note:nth-child(even) { transform: rotate(.5deg); background: #e2cfa0; }
.note h4 { margin: 0 0 4px; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: #6b3a14; }
.note.none { background: transparent; color: var(--amber-dim); font-family: var(--term); box-shadow: none; transform: none; }

.map canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }

/* ---------- Dialogue ---------- */
.talk { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); width: min(760px, calc(100vw - 24px)); padding: 12px 16px 8px; background: var(--panel); border: 2px solid var(--amber-dim); box-shadow: 0 0 0 2px #000, 0 0 30px rgba(0,0,0,.6); cursor: pointer; }
.talk-who { font-family: var(--stencil); color: #f3d9a4; font-size: 20px; margin-bottom: 2px; }
.talk-text { font-size: 22px; line-height: 1.2; min-height: 2.4em; text-shadow: 0 0 5px var(--amber-glow); white-space: pre-wrap; }
.talk-more { text-align: right; font-size: 16px; color: var(--amber-dim); animation: blink 1s steps(2) infinite; }
.talk.radio { border-color: var(--rad); }
.talk.radio .talk-text { color: #c9ff8a; text-shadow: 0 0 6px rgba(143,220,60,.5); }
.talk.radio .talk-who { color: var(--rad); }
@keyframes blink { 50% { opacity: .3; } }

/* ---------- Screens ---------- */
.screen { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; }
.title { background: radial-gradient(ellipse at 50% 45%, rgba(26,12,4,.72), rgba(18,8,3,.9) 75%); }
.title-inner, .overlay-inner { max-width: 640px; text-align: center; }
.title-kicker { margin: 0; color: var(--amber-dim); letter-spacing: 3px; text-transform: uppercase; font-size: 18px; }
.title h1 { margin: 4px 0 0; font-family: var(--stencil); font-weight: 400; font-size: clamp(64px, 14vw, 140px); line-height: .9; color: #e8a15a; letter-spacing: 4px; text-shadow: 0 3px 0 var(--rust), 0 6px 0 #3d1606, 0 0 40px rgba(255,140,40,.35); }
.title-sub { margin: 6px 0 18px; font-family: var(--stencil); font-size: clamp(22px, 4vw, 34px); color: #f3d9a4; }
.title-blurb { margin: 0 auto 22px; max-width: 540px; font-size: 21px; line-height: 1.25; color: #f0cf96; }
.title-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.title-btns button { min-width: 170px; padding: 6px 20px; font-size: 24px; background: var(--amber); color: var(--ink); border: 0; box-shadow: 0 4px 0 var(--rust); }
.title-btns button:hover, .title-btns button:focus-visible { background: #ffd08a; outline: none; }
.title-btns button.ghost { background: transparent; color: var(--amber); border: 1px solid var(--amber-dim); box-shadow: none; }
.title-help { margin-top: 22px; font-size: 17px; color: var(--amber-dim); }
.overlay { background: rgba(10,5,2,.78); }
.overlay h2 { margin: 0 0 10px; font-family: var(--stencil); font-weight: 400; font-size: clamp(40px, 8vw, 72px); color: #e8a15a; text-shadow: 0 3px 0 var(--rust); }
.overlay-inner > div:not(.title-btns) { margin-bottom: 20px; font-size: 21px; line-height: 1.3; color: #f0cf96; }
.overlay .stats { display: inline-grid; grid-template-columns: auto auto; gap: 2px 22px; text-align: left; margin-top: 10px; }
.overlay .stats b { color: var(--amber); font-weight: 400; }
.back { position: absolute; left: 12px; bottom: 6px; font-size: 16px; color: var(--amber-dim); text-decoration: none; z-index: 2; }
.game.playing .back { display: none; }

/* ---------- Touch ---------- */
.touch { position: absolute; inset: auto 0 34px 0; height: 150px; pointer-events: none; }
.stick { position: absolute; left: 22px; bottom: 0; width: 130px; height: 130px; border-radius: 50%; border: 2px solid rgba(255,181,71,.35); background: rgba(26,15,8,.35); pointer-events: auto; touch-action: none; }
.nub { position: absolute; left: 40px; top: 40px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,181,71,.45); }
.tbtns { position: absolute; right: 16px; bottom: 0; display: grid; grid-template-columns: repeat(2, 66px); gap: 8px; pointer-events: auto; }
.tbtns button { height: 50px; background: rgba(26,15,8,.75); border: 2px solid var(--amber-dim); font-size: 20px; touch-action: manipulation; }
.tbtns button[data-k="e"] { grid-column: span 2; height: 60px; font-size: 26px; background: rgba(255,181,71,.25); }

@media (max-width: 760px) {
  body { font-size: 18px; }
  .hud-bars { padding: 5px 7px; }
  .bar-track { width: 90px; }
  .hud-quest { max-width: 52vw; font-size: 16px; padding: 6px 8px; }
  .hud-mini { display: none; }
  .hud-keys { display: none; }
  .hud-toasts { bottom: 200px; }
  .hud-prompt { bottom: 210px; }
  .hud-search { bottom: 250px; }
  .talk { bottom: 190px; }
}
/* Touch pad: E is a tall button on the right, the rest in a 2-row block, so Radio/Rattle never add a third row. */
.touch { height: 112px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tbtns { grid-template-columns: repeat(3, 58px); grid-template-rows: 52px 52px; }
.tbtns button[data-k="e"] { grid-column: 3; grid-row: 1 / span 2; height: auto; }
.tbtns button { height: auto; min-height: 0; }
.stick { width: 112px; height: 112px; }
.nub { left: 31px; top: 31px; }
@media (max-width: 760px) {
  .hud-toasts { bottom: 200px; }
  .game.talking .hud-toasts { bottom: 300px; }
  .hud-prompt { bottom: 162px; }
  .hud-search { bottom: 170px; }
  .talk { bottom: 156px; }
}
@media (max-width: 480px) {
  .hud-quest { left: 14px; right: auto; top: 88px; max-width: calc(100vw - 28px); }
  .hud .banner { top: 42%; width: calc(100vw - 32px); white-space: normal; font-size: 26px; }
  .stick { left: 10px; }
  .tbtns { right: 10px; grid-template-columns: repeat(3, 54px); }
}
@media (max-height: 420px) and (max-width: 900px) {
  .hud-quest { font-size: 15px; max-width: 42vw; }
  .talk { bottom: 12px; left: 146px; right: 222px; width: auto; transform: none; }  /* sits between the joystick and the buttons */
  .hud-toasts { bottom: 130px; }
  .hud-prompt { bottom: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  .talk-more, .bar.flash .bar-track { animation: none; }
}

/* ---------- Discovery banner ---------- */
.banner { position: absolute; left: 50%; top: 16%; transform: translateX(-50%); text-align: center; font-family: var(--stencil); font-size: clamp(26px, 4vw, 40px); color: #f3d9a4; text-shadow: 0 3px 0 var(--rust), 0 0 24px rgba(0,0,0,.8); opacity: 0; white-space: nowrap; }
.banner small { display: block; font-family: var(--term); font-size: 18px; letter-spacing: 4px; text-transform: uppercase; color: var(--amber-dim); text-shadow: none; }
.banner.show { animation: bannerIn 3.2s ease forwards; }
@keyframes bannerIn { 0% { opacity: 0; transform: translate(-50%, 8px); } 12%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }