:root { color-scheme: dark; font-family: 'Courier New', monospace; background: #080808; color: #dedede; --dim: #a2a2a2; --line: #b6b6b62c; --focus: #c4c4c4; --danger: .02; --warp: 0deg; --tension-color: #888; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 30%, #1b1b1b 0, #0b0b0b 50%, #060606 80%); }
main { width: min(1200px, 100%); padding: max(32px, env(safe-area-inset-top)) 32px max(24px, env(safe-area-inset-bottom)); }
header { margin-bottom: 28px; text-align: center; }
header p { font-size: 12px; letter-spacing: .24em; color: var(--dim); line-height: 1.8; }
h1 { font-family: 'Courier New', monospace; font-size: clamp(30px, 5.6vw, 64px); font-weight: 700; letter-spacing: -.055em; text-transform: uppercase; text-shadow: 1px 1px #696969; margin: 14px 0; }
h2 { font-family: 'Courier New', monospace; font-size: clamp(32px, 5vw, 52px); font-weight: 400; }
p { line-height: 1.65; font-size: 16px; }
.muted { color: var(--dim); font-size: 14px; }
button { font: inherit; font-size: 14px; letter-spacing: .04em; min-height: 52px; padding: 12px 22px; border: 1px solid #92929266; border-radius: 2px; color: #dedede; background: #181818; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; transition: background .2s, border-color .2s; }
button:disabled { opacity: .35; cursor: default; }
button:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
button:hover:not(:disabled), button:active:not(:disabled) { background: #2b2b2b; border-color: #bfbfbf; }
#enter, #open:not(:disabled) { background: #c0c0c0; border-color: #c0c0c0; color: #141414; }
#enter:hover, #open:hover:not(:disabled) { background: #eeeeee; }
#entry { min-height: 440px; display: grid; align-content: end; justify-items: center; padding: 60px 24px 36px; position: relative; isolation: isolate; text-align: center; border: 1px solid var(--line); background: #111; }
#entry::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url('ink-room.jpg') center / cover; opacity: .7; }
#entry::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent, #080808bb 45%, #080808 100%); }
#entry p { max-width: 580px; margin: 6px 0; }
#entry .muted { margin: 12px 0 22px; }
#error:empty { display: none; }
#experience { position: relative; }
.readout { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #aaa; }
output { font-variant-numeric: tabular-nums; color: #d6d6d6; }
meter { width: 140px; height: 5px; accent-color: var(--tension-color); }
meter::-webkit-meter-bar { background: #292929; border: 0; border-radius: 0; }
meter::-webkit-meter-optimum-value { background: var(--tension-color); }
meter::-moz-meter-bar { background: var(--tension-color); }
#room { position: relative; width: 100%; aspect-ratio: 2.18; min-height: 230px; background: #0c0c0c; border: 1px solid #77777755; overflow: hidden; isolation: isolate; }
#room::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 6; background: radial-gradient(ellipse at 50% 45%, transparent 25%, #03030366 78%, #030303b3), linear-gradient(0deg, #0404048a, transparent 25%, transparent 80%, #04040455); }
#player { position: absolute; z-index: 4; left: 7%; bottom: 9%; width: 12%; height: 34%; transform: translateX(-50%); background: url('ink-figure.png') center bottom / contain no-repeat; filter: grayscale(1) brightness(.85) drop-shadow(1px 1px 1px #000); }
#player::after { content: ''; position: absolute; left: -20%; right: -50%; bottom: -2%; height: 5%; border-radius: 50%; background: #0008; filter: blur(3px); }
#door { position: absolute; z-index: 3; left: 94%; bottom: 16%; width: 11.7%; height: 53%; transform: translateX(-50%); perspective: 650px; background: url('ink-door.png') center / 100% 100% no-repeat; }
.door-leaf { display: block; width: 100%; height: 100%; object-fit: fill; position: relative; z-index: 1; clip-path: inset(7% 20% 2% 20%); transform-origin: 80% 50%; animation: door-tremor 29s ease-in-out infinite; }
#door::before { content: ''; position: absolute; inset: 8% 20% 3%; z-index: 0; background: #080808; transition: background .35s, box-shadow .6s; }
#door.opened::before { background: #511010; box-shadow: -12px 0 55px 15px #770d0d55; }
#door.opened .door-leaf { animation: none; transform: rotateY(-69deg); transition: transform 1s ease-out; }
.fog, .lamp-light, .passing-shadow { pointer-events: none; position: absolute; }
.fog { z-index: 5; width: 140%; left: -20%; bottom: 0; height: 32%; opacity: .22; background: radial-gradient(ellipse at 30% 65%, #bdbdbd50, transparent 50%), radial-gradient(ellipse at 70% 90%, #b5b5b542, transparent 60%); animation: fog-drift 24s ease-in-out infinite alternate; }
.lamp-light { opacity: 0; inset: 0; z-index: 2; background: radial-gradient(ellipse at 28% 14%, #030303 2%, #030303cc 9%, transparent 30%); animation: light-falter 19s ease-in-out infinite; }
.passing-shadow { z-index: 2; width: 25%; height: 75%; bottom: 12%; left: 10%; opacity: 0; background: linear-gradient(100deg, transparent 20%, #02020288 50%, transparent 80%); transform: skew(-15deg); animation: shadow-pass 37s ease-in-out infinite; }
/* Three visual-only disturbances. Their timing never touches gameplay or sound. */
@keyframes light-falter { 0%, 43%, 48%, 100% { opacity: 0; } 44%, 47% { opacity: .7; } 45% { opacity: .2; } }
@keyframes shadow-pass { 0%, 58% { opacity: 0; transform: translateX(0) skew(-15deg); } 62% { opacity: .45; } 70%, 100% { opacity: 0; transform: translateX(190%) skew(-15deg); } }
@keyframes door-tremor { 0%, 65%, 69%, 100% { transform: rotate(0); } 66% { transform: rotate(.45deg); } 67% { transform: rotate(-.4deg); } 68% { transform: rotate(.2deg); } }
@keyframes fog-drift { from { transform: translateX(-5%); } to { transform: translateX(5%); } }
.layers { display: none; }
#hint { color: #bcbcbc; font-size: 14px; text-align: center; margin: 22px 0 18px; min-height: 24px; }
.controls { display: flex; gap: 12px; max-width: 580px; margin: 0 auto; }
.controls button { flex: 1; padding: 12px 8px; }
#experience > .muted { text-align: center; font-size: 12px; letter-spacing: .06em; margin: 16px 0 0; }
#ending { min-height: 390px; display: grid; place-content: center; text-align: center; background: radial-gradient(ellipse at 50% 20%, #44444435, transparent 65%); border-top: 1px solid var(--line); }
#ending h2 { margin-bottom: 8px; }
#ending p { margin: 8px 0; }
#ending .muted { margin-top: 44px; }
[hidden] { display: none !important; }
@media (max-width: 600px) {
 main { padding: max(28px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
 header { margin-bottom: 24px; } header p { font-size: 12px; letter-spacing: .12em; }
 #room { aspect-ratio: 1.55; } #player { width: 15%; height: 31%; } #door { width: 12%; height: 46%; }
 #entry { min-height: 440px; padding: 48px 18px 28px; } #entry::before { background-size: auto 100%; background-position: 40% center; }
 .controls { gap: 8px; } .controls button { padding: 12px 5px; font-size: 14px; letter-spacing: 0; }
 #hint { margin: 18px auto; max-width: 300px; } meter { width: 95px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* The background alone distorts: floor positions, controls, and hit areas stay fixed. */
.ink-wall { position: absolute; z-index: -1; inset: -1%; background: url('ink-room.jpg') center / 100% 100% no-repeat; transform: skewX(var(--warp)) scale(1.015); transform-origin: center bottom; }
#door::after { content: ''; pointer-events: none; position: absolute; z-index: 2; bottom: 1%; left: 18%; right: 18%; height: 2px; background: #9c1010; box-shadow: 0 2px 5px 1px #780606; opacity: var(--danger); }
#door.opened::after { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .ink-wall { transform: none; } }

/* A cautious shuffle, driven only by changes to the existing rendered position. */
#player { --facing: 1; transform: translateX(-50%) scaleX(var(--facing)); }
#player[data-facing="away"] { --facing: -1; }
#player.walking { animation: cautious-step .42s ease-in-out infinite; }
@keyframes cautious-step {
  0%, 100% { transform: translate(-50%, 0) scaleX(var(--facing)) rotate(-1deg); }
  50% { transform: translate(-50%, -2px) scaleX(var(--facing)) rotate(1deg); }
}