:root {
  --void: #030305;
  --bone: #ece6da;
  --dim: #8b857a;
  --molten: #ff4d0a;
  --ember: #ffb15c;
  --ice: #bfe9ff;
  --violet: #c4a8ff;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --serif: "Cormorant Garamond", Georgia, serif;
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--void); color: var(--bone);
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  overscroll-behavior: none; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
body { position: fixed; inset: 0; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
body.in #c, body.core #c { cursor: pointer; }
button { font: inherit; color: inherit; }
b { font-weight: 600; }

.grain { position: fixed; inset: -50%; pointer-events: none; z-index: 40; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(3) infinite; }
@keyframes grain { 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } }
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%); }
.flash { position: fixed; inset: 0; z-index: 60; background: #fff; opacity: 0; pointer-events: none; transition: opacity .6s; }
.flash.on { opacity: 1; }
.flash.black { background: #000; }

/* ---------- outside HUD ---------- */
.hud { position: fixed; z-index: 10; top: calc(18px + var(--st)); left: 22px; pointer-events: none; max-width: 60vw; }
.lbl { font-size: 10.5px; letter-spacing: .22em; color: var(--dim); }
.integ { font-family: var(--display); font-weight: 900; font-size: clamp(56px, 8.4vw, 124px); line-height: .86; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--bone); margin: 6px 0 8px; text-shadow: 0 0 40px rgba(255,120,40,.0); transition: text-shadow .3s; }
.integ small { font-size: .42em; font-weight: 600; margin-left: .06em; color: var(--dim); }
.integ.hit { animation: glitch .32s steps(2) 1; }
@keyframes glitch {
  0% { transform: translate(2px, -1px); text-shadow: -3px 0 rgba(255,60,0,.8), 3px 0 rgba(80,200,255,.6); }
  50% { transform: translate(-2px, 1px); text-shadow: 3px 0 rgba(255,60,0,.8), -3px 0 rgba(80,200,255,.6); }
  100% { transform: none; }
}
.integ.heal { animation: healp .6s ease-out 1; }
@keyframes healp { 0% { color: var(--violet); text-shadow: 0 0 30px rgba(196,168,255,.9); } }
.bar { width: min(420px, 70vw); height: 4px; background: rgba(236,230,218,.12); position: relative; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, var(--molten), var(--ember) 60%, var(--bone)); transition: width .8s cubic-bezier(.2,1,.3,1); }
.sub { margin-top: 8px; font-size: 11px; letter-spacing: .14em; color: var(--dim); }
.sub b { color: var(--bone); }
.sub.heal b { color: var(--violet); }
.sub.heal.hit { animation: glitch .32s steps(2) 1; }
.feed li.echo b { color: var(--dim); }
.sub .unk { color: var(--violet); opacity: .8; animation: unk 3.2s ease-in-out infinite; }
@keyframes unk { 50% { opacity: .35; } }
.sep { color: #4a463f; margin: 0 .3em; }
.stage { display: flex; gap: 10px; align-items: baseline; margin-top: 14px; }
.stage .no { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--molten); min-width: 1.6em; }
.stage b { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: .08em; display: block; line-height: 1; }
.stage i { font-family: var(--serif); font-size: 17px; color: var(--dim); letter-spacing: 0; }

.coords { margin-top: 10px; font-size: 10px; letter-spacing: .14em; color: var(--dim); opacity: .8; white-space: nowrap; }
.coords.door { color: var(--violet); animation: unk .5s steps(2) infinite; }
.pip { position: fixed; z-index: 3; width: 13px; height: 13px; margin: -6px 0 0 -6px; pointer-events: none; opacity: .32; transition: opacity .3s; }
.pip::before, .pip::after { content: ""; position: absolute; background: var(--bone); }
.pip::before { left: 6px; top: 0; width: 1px; height: 13px; }
.pip::after { top: 6px; left: 0; height: 1px; width: 13px; }
body:not(.out) .pip { display: none; }
.live { position: fixed; z-index: 10; top: calc(18px + var(--st)); right: 22px; text-align: right; pointer-events: none; font-size: 11px; letter-spacing: .14em; }
.live .row { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-bottom: 6px; }
.live .dim { color: var(--dim); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--molten); box-shadow: 0 0 10px var(--molten); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.seis { position: relative; margin-top: 4px; border-top: 1px solid rgba(236,230,218,.12); border-bottom: 1px solid rgba(236,230,218,.12); }
.seis canvas { width: 220px; height: 48px; display: block; }
.seis .st { position: absolute; left: 0; top: 2px; font-size: 8.5px; color: var(--dim); letter-spacing: .2em; }
.lore { margin-top: 6px; font-size: 9.5px; color: var(--dim); max-width: 240px; margin-left: auto; min-height: 2.6em; line-height: 1.35; transition: opacity .8s; }

.target { position: fixed; z-index: 11; pointer-events: none; transform: translate(18px, -50%); display: flex; flex-direction: column; gap: 2px; font-size: 10px; letter-spacing: .16em; white-space: nowrap; }
.target b { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .1em; color: var(--ice); }
.target span { color: var(--dim); }
.target.door b { color: var(--violet); animation: unk .5s steps(2) infinite; }

.hint { position: fixed; z-index: 10; left: 0; right: 0; bottom: calc(22px + var(--sb)); margin: 0; text-align: center; font-size: 10.5px; letter-spacing: .22em; color: var(--dim); pointer-events: none; transition: opacity 1s; }
.hint span { color: #4a463f; margin: 0 .5em; }
.hint.gone { opacity: 0; }

.feed { position: fixed; z-index: 10; left: 22px; bottom: calc(54px + var(--sb)); margin: 0; padding: 0; list-style: none; font-size: 10.5px; letter-spacing: .1em; pointer-events: none; max-width: 46vw; }
.feed li { padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: fin .4s ease-out; }
.feed li:nth-child(2) { opacity: .7; } .feed li:nth-child(3) { opacity: .45; } .feed li:nth-child(4) { opacity: .25; }
.feed li b { color: var(--ember); font-weight: 600; }
.feed li.me b { color: var(--ice); }
.feed li.in b { color: var(--violet); }
.feed li em { font-style: normal; color: var(--dim); }
@keyframes fin { from { opacity: 0; transform: translateX(-10px); } }

.dock { position: fixed; z-index: 12; right: 22px; bottom: calc(50px + var(--sb)); display: flex; gap: 8px; }
.btn { cursor: pointer; padding: 10px 14px; border: 1px solid rgba(236,230,218,.28); background: rgba(3,3,5,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; transition: background .2s, border-color .2s, transform .1s; }
.btn:hover { border-color: var(--bone); }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .35; cursor: default; }
.btn.glow { border-color: var(--ember); color: var(--ember); box-shadow: 0 0 24px rgba(255,140,60,.18) inset; }
body.in .btn.glow { border-color: var(--violet); color: var(--violet); box-shadow: 0 0 24px rgba(196,168,255,.2) inset; }
.btn.big { padding: 14px 22px; font-size: 12px; }
.btn.snd[aria-pressed="true"] { color: var(--ice); border-color: var(--ice); }
.btn.door { color: var(--violet); border-color: rgba(196,168,255,.4); font-size: 14px; padding: 8px 12px; animation: unk 3s infinite; }
.mini { cursor: pointer; border: 1px solid rgba(236,230,218,.25); background: none; padding: 2px 8px; margin-left: 8px; font-size: 9.5px; letter-spacing: .14em; }

/* ---------- inside ---------- */
.inhud { position: fixed; z-index: 10; top: calc(18px + var(--st)); left: 22px; pointer-events: none; }
.inhud .lbl { color: var(--violet); font-size: 12px; }
.inhud .inline { margin-top: 6px; font-size: 11px; letter-spacing: .12em; color: var(--dim); }
.inhud .inline b { color: var(--bone); }
.inhint { position: fixed; z-index: 10; left: 0; right: 0; bottom: calc(22px + var(--sb)); margin: 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: 17px; letter-spacing: .02em; color: var(--violet); opacity: .8; pointer-events: none; }
.card { position: fixed; z-index: 14; left: auto; right: 4vw; top: 50%; transform: translateY(-50%); width: min(420px, 88vw); padding: 26px 24px 20px; text-align: center; background: rgba(10,6,20,.62); border: 1px solid rgba(196,168,255,.35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: cardIn .5s cubic-bezier(.2,1.2,.3,1); }
@keyframes cardIn { from { opacity: 0; transform: translate(20px, -50%); } }
.card .ins { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 5vw, 36px); line-height: 1.08; margin: 0 0 10px; color: #f4ecff; text-shadow: 0 0 30px rgba(196,168,255,.6); }
.card .meta { margin: 0 0 16px; font-size: 10px; letter-spacing: .16em; color: var(--dim); }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.x { position: absolute; top: 6px; right: 10px; width: 36px; height: 36px; border: 0; background: none; font-size: 24px; cursor: pointer; color: var(--dim); }

.forge { position: fixed; z-index: 15; right: 22px; top: 50%; transform: translateY(-50%); width: min(380px, 92vw); padding: 22px 20px 20px; background: rgba(10,6,20,.66); border: 1px solid rgba(196,168,255,.32); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); max-height: 92dvh; overflow: auto; touch-action: pan-y; -webkit-user-select: text; user-select: text; animation: forgeIn .5s cubic-bezier(.2,1.2,.3,1); }
@keyframes forgeIn { from { opacity: 0; transform: translate(30px, -50%); } }
.forge header { position: relative; }
.forge h2 { margin: 0 0 16px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 28px; line-height: 1; color: #f4ecff; padding-right: 30px; }
.f { display: block; margin-bottom: 14px; }
.f > span { display: flex; align-items: center; font-size: 9.5px; letter-spacing: .22em; color: var(--violet); margin-bottom: 6px; }
.frow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
input[type=range] { width: 100%; accent-color: var(--violet); }
input.hue { -webkit-appearance: none; appearance: none; height: 10px; background: linear-gradient(90deg, hsl(0,85%,60%), hsl(60,85%,60%), hsl(120,85%,60%), hsl(180,85%,60%), hsl(240,85%,60%), hsl(300,85%,60%), hsl(359,85%,60%)); border-radius: 0; }
input.hue::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 22px; background: #fff; border: 2px solid #000; }
input.hue::-moz-range-thumb { width: 14px; height: 20px; background: #fff; border: 2px solid #000; border-radius: 0; }
#fText { width: 100%; padding: 10px 12px; background: rgba(0,0,0,.4); border: 1px solid rgba(196,168,255,.3); color: #f4ecff; font-family: var(--serif); font-style: italic; font-size: 20px; outline: none; }
#fText:focus { border-color: var(--violet); }
.mel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.mel .col { display: grid; grid-template-rows: repeat(8, 1fr); gap: 3px; }
.mel button { height: 15px; border: 0; background: rgba(196,168,255,.12); cursor: pointer; padding: 0; }
.mel button.on { background: var(--violet); box-shadow: 0 0 12px var(--violet); }
.mel button.play { background: #fff; }
.fhint { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--dim); margin: 0 0 12px; }
.fhint.ok { color: var(--violet); }
.forge .btn.big { width: 100%; }

/* ---------- core ---------- */
.coreui { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
.cap { position: absolute; left: 0; right: 0; top: calc(12% + var(--st)); margin: 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(24px, 4.6vw, 44px); color: #fff3e8; text-shadow: 0 2px 20px #000; transition: opacity 1s; }
.coreend { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,.82); pointer-events: auto; animation: fadeIn 2.5s ease; text-align: center; padding: 24px; }
.coreend h2 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(30px, 6.5vw, 68px); margin: 10px 0 30px; color: #ffe2cc; letter-spacing: 0; }
.coren { font-size: 11px; letter-spacing: .2em; color: var(--dim); max-width: 520px; line-height: 1.7; }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- the lounge ---------- */
.loungeui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.lhud { position: absolute; top: calc(18px + var(--st)); left: 22px; }
.lhud .lbl { color: #d79bff; font-size: 12px; text-shadow: 0 0 12px rgba(182,92,255,.8); }
.lhud .inline { margin-top: 6px; font-size: 11px; letter-spacing: .12em; color: var(--dim); }
.lhud .np { color: #ffd2f0; }
.lhint { position: absolute; left: 0; right: 0; bottom: calc(18px + var(--sb)); margin: 0; text-align: center; font-size: 10px; letter-spacing: .2em; color: var(--dim); }
.lhint span { color: #4a463f; margin: 0 .4em; }
.lounge-dock { pointer-events: auto; }
body.lounge #c { cursor: pointer; }
.bubbles { position: fixed; inset: 0; z-index: 11; pointer-events: none; overflow: hidden; }
.speech { position: absolute; left: 0; top: 0; max-width: 240px; padding: 8px 12px; background: rgba(20,8,34,.88); border: 1px solid rgba(196,168,255,.55); color: #f4ecff; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.15; box-shadow: 0 0 24px rgba(160,90,255,.35); }
.speech::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -6px; border: 6px solid transparent; border-top-color: rgba(196,168,255,.55); border-bottom: 0; }
.chat { position: fixed; z-index: 16; right: 22px; bottom: calc(96px + var(--sb)); width: min(340px, 92vw); padding: 12px; background: rgba(12,6,22,.82); border: 1px solid rgba(196,168,255,.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: forgeIn .35s ease; -webkit-user-select: text; user-select: text; touch-action: auto; }
.chat-h { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: .2em; color: var(--dim); margin-bottom: 8px; }
.chat-h b { color: #d79bff; font-family: var(--display); font-size: 16px; letter-spacing: .12em; }
.chat-log { list-style: none; margin: 0 0 8px; padding: 0; max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.chat-log li { padding: 6px 10px; max-width: 85%; font-size: 14px; line-height: 1.25; letter-spacing: 0; font-family: var(--serif); font-style: italic; }
.chat-log li.them { align-self: flex-start; background: rgba(196,168,255,.14); }
.chat-log li.me { align-self: flex-end; background: rgba(255,79,154,.18); }
.chat-log li.sys { align-self: center; color: var(--dim); font-size: 13px; }
.chat-msg { min-height: 1em; margin: 0 0 6px; font-size: 10px; color: #ff9ac4; letter-spacing: .08em; }
.chat-row { display: flex; gap: 8px; }
.chat-row input { flex: 1; min-width: 0; padding: 10px; background: rgba(0,0,0,.45); border: 1px solid rgba(196,168,255,.3); color: #f4ecff; font: italic 500 16px var(--serif); outline: none; }
.chat-row input:focus { border-color: #d79bff; }
body.lounge .toasts { bottom: auto; top: calc(18px + var(--st)); flex-direction: column; }

/* ---------- overlays ---------- */
.intro { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 60%, rgba(3,3,5,.55), rgba(3,3,5,.92)); transition: opacity 1.2s; padding: 24px; }
.intro.gone { opacity: 0; pointer-events: none; }
.intro-in { max-width: 760px; text-align: center; }
.kicker { font-size: 10.5px; letter-spacing: .32em; color: var(--molten); margin: 0 0 14px; }
.intro h1 { font-family: var(--display); font-weight: 900; font-size: clamp(48px, 10vw, 128px); line-height: .84; margin: 0 0 22px; letter-spacing: -.005em; }
.lede { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2.4vw, 24px); line-height: 1.3; color: #cfc7b8; max-width: 560px; margin: 0 auto 28px; letter-spacing: 0; }
.live-stats { color: var(--ember) !important; margin-top: 6px !important; }
.load { margin-top: 18px; font-size: 10px; letter-spacing: .24em; color: var(--dim); min-height: 1em; }

.bigmsg { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: none; text-align: center; padding: 20px; font-family: var(--display); font-weight: 900; font-size: clamp(38px, 8vw, 104px); line-height: .9; letter-spacing: .04em; color: #fff; text-shadow: 0 0 40px rgba(255,255,255,.4); animation: bigIn 1s ease; }
.bigmsg small { display: block; margin-top: 18px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(18px, 2.6vw, 26px); letter-spacing: 0; color: #e8dcff; text-shadow: none; }
.bigmsg.violet { color: #f4ecff; text-shadow: 0 0 50px rgba(196,168,255,.7); }
@keyframes bigIn { from { opacity: 0; letter-spacing: .3em; } }

.toasts { position: fixed; z-index: 35; left: 50%; bottom: calc(96px + var(--sb)); transform: translateX(-50%); flex-direction: column-reverse; display: flex; flex-direction: column; gap: 8px; width: min(520px, 92vw); pointer-events: none; }
.toast { padding: 12px 16px; background: rgba(3,3,5,.8); border-left: 3px solid var(--ember); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: tin .5s cubic-bezier(.2,1.3,.3,1), tout .5s ease-in forwards 6.5s; }
.toast .k { font-size: 9.5px; letter-spacing: .26em; color: var(--ember); margin-bottom: 4px; }
.toast .m { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.2; letter-spacing: 0; }
.toast.v { border-color: var(--violet); } .toast.v .k { color: var(--violet); }
@keyframes tin { from { opacity: 0; transform: translateY(-14px); } }
@keyframes tout { to { opacity: 0; transform: translateY(-8px); } }

.sheet { border: 1px solid rgba(236,230,218,.2); padding: 0; background: rgba(8,8,12,.92); color: var(--bone); width: min(560px, 94vw); max-height: 90dvh; overflow: auto; touch-action: pan-y; -webkit-user-select: text; user-select: text; }
.sheet::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }
.sheet[open] { animation: fadeIn .4s ease; }
.sheet-in { padding: 26px 22px 22px; position: relative; text-align: center; }
.sheet h2 { font-family: var(--display); font-weight: 900; font-size: 44px; line-height: .9; margin: 0 0 20px; }
.sheet h3 { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .14em; margin: 0 0 10px; text-align: left; }
.fine { font-size: 10.5px; color: var(--dim); line-height: 1.6; letter-spacing: .08em; }
.whisper { font-family: var(--serif); font-style: italic; font-size: 15px !important; color: #9d93b5 !important; letter-spacing: 0 !important; margin-top: 18px; }
.slots { display: flex; justify-content: center; gap: 14px; margin: 8px 0 14px; }
.slot { display: flex; flex-direction: column; align-items: center; }
.slot b { font-family: var(--display); font-weight: 900; font-size: 84px; line-height: 1; width: 70px; color: var(--ember); text-shadow: 0 0 30px rgba(255,140,60,.5); }
.slot button { width: 60px; height: 34px; border: 1px solid rgba(236,230,218,.2); background: none; cursor: pointer; font-size: 14px; }
.initype { display: block; margin: 0 auto 10px; width: 180px; padding: 9px; text-align: center; background: rgba(0,0,0,.4); border: 1px solid rgba(236,230,218,.25); color: var(--ember); font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: .3em; outline: none; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; text-align: left; }
.list { margin: 0; padding: 0; list-style: none; counter-reset: r; font-size: 11.5px; }
.list li { counter-increment: r; display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(236,230,218,.08); }
.list li::before { content: counter(r, decimal-leading-zero); color: #4a463f; margin-right: 8px; }
.list li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list li b { color: var(--ember); }
.list li.me span { color: var(--ice); }
#shImg { width: 100%; max-width: 360px; display: block; margin: 0 auto 16px; border: 1px solid rgba(236,230,218,.15); }

.offline { position: fixed; z-index: 20; left: 50%; bottom: calc(80px + var(--sb)); transform: translateX(-50%); font-size: 10px; letter-spacing: .14em; color: var(--dim); }
.hap { position: fixed; left: -100px; top: -100px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.nojs { position: fixed; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 28px; }

body.in .toasts { bottom: auto; top: calc(18px + var(--st)); flex-direction: column; }
body.in .out-only, body.lounge .out-only, body.enter .out-only { display: none !important; }
body:not(.out) #hud, body:not(.out) #live, body:not(.out) #feed, body:not(.out) #hint, body:not(.out) #target { display: none !important; }

@media (max-width: 700px) {
  .hud { left: 16px; top: calc(12px + var(--st)); max-width: none; }
  .integ { font-size: 60px; margin: 4px 0 6px; }
  .bar { width: calc(100vw - 32px); }
  .stage { margin-top: 8px; }
  .coords { margin-top: 6px; font-size: 9px; }
  .stage b { font-size: 16px; }
  .stage i { font-size: 14px; }
  .live { top: calc(14px + var(--st)); right: 16px; }
  .live .row.dim, .live .seis { display: none; }
  .lore { position: fixed; left: 16px; right: 16px; bottom: calc(88px + var(--sb)); max-width: none; text-align: left; margin: 0; min-height: 0; font-size: 9px; }
  .feed { left: 16px; bottom: calc(118px + var(--sb)); max-width: calc(100vw - 32px); font-size: 10px; }
  .feed li:nth-child(n+3) { display: none; }
  .dock { left: 16px; right: 16px; bottom: calc(40px + var(--sb)); justify-content: flex-end; flex-wrap: wrap; }
  .btn { padding: 9px 11px; font-size: 9.5px; }
  .hint { bottom: calc(14px + var(--sb)); font-size: 8.5px; letter-spacing: .1em; white-space: nowrap; }
  .hint span { margin: 0 .25em; }
  .lbl .wide { display: none; }
  .forge { left: 8px; right: 8px; top: auto; bottom: calc(8px + var(--sb)); transform: none; width: auto; max-height: 56dvh; padding: 16px 14px; }
  @keyframes forgeIn { from { opacity: 0; transform: translateY(30px); } }
  .forge h2 { font-size: 22px; margin-bottom: 10px; }
  .forge .btn.big { position: sticky; bottom: -16px; background: rgba(10,6,20,.96); }
  .mel button { height: 22px; }
  .f { margin-bottom: 10px; }
  .inhud { left: 16px; top: calc(12px + var(--st)); }
  .inhint { font-size: 14px; padding: 0 20px; bottom: calc(136px + var(--sb)); }
  .cols { grid-template-columns: 1fr; }
  .toasts { bottom: auto; top: calc(232px + var(--st)); flex-direction: column; }
  .slot b { font-size: 64px; width: 54px; }
  .lhud { left: 16px; top: calc(12px + var(--st)); }
  .lhint { font-size: 8.5px; letter-spacing: .08em; bottom: calc(10px + var(--sb)); }
  .lounge-dock { left: 16px; right: 16px; bottom: calc(34px + var(--sb)); }
  .chat { left: 8px; right: 8px; width: auto; bottom: calc(84px + var(--sb)); }
  .chat-log { max-height: 120px; }
  .sheet h2 { font-size: 34px; }
  .card { top: auto; right: auto; left: 50%; bottom: calc(96px + var(--sb)); transform: translateX(-50%); }
  @keyframes cardIn { from { opacity: 0; transform: translate(-50%, 20px); } }
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .integ.hit { animation: none; }
}