:root { color-scheme: dark; }
* { box-sizing: border-box; }
body.backrooms-page { min-height: 100vh; margin: 0; overflow: hidden; color: #292816; background: #4c4931; font-family: "Yu Gothic", "MS Gothic", sans-serif; }
.backrooms-shell { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; background: linear-gradient(90deg, rgba(83,76,36,.32) 1px, transparent 1px) 0 0 / 84px 100%, linear-gradient(180deg, #d0c574 0 54%, #888050 54% 56%, #827b48 56% 100%); }
.backrooms-ceiling { position: absolute; inset: 0 0 46%; background: repeating-linear-gradient(90deg, transparent 0 18%, rgba(49,46,23,.23) 18% 18.4%, transparent 18.4% 36%), repeating-linear-gradient(180deg, rgba(255,255,212,.68) 0 2px, transparent 2px 55px); opacity: .8; }
.backrooms-ceiling::after { content: ""; position: absolute; left: 50%; top: 18%; width: min(32vw,410px); height: 18px; transform: translateX(-50%); background: #f8f5c5; box-shadow: 0 0 30px rgba(255,255,201,.88), 0 0 100px rgba(255,255,201,.46); animation: backroomsBuzz 2.6s steps(2,end) infinite; }
.backrooms-carpet { position: absolute; inset: 56% 0 0; opacity: .72; background: radial-gradient(ellipse at 50% 0, rgba(32,30,14,.48), transparent 42%), repeating-linear-gradient(45deg, rgba(45,41,18,.18) 0 2px, transparent 2px 6px), #817946; }
.backrooms-room { position: relative; z-index: 1; width: min(740px, calc(100vw - 38px)); min-height: min(520px, calc(100svh - 72px)); display: grid; align-content: center; justify-items: center; gap: 30px; padding: 36px; border: 1px solid rgba(48,46,20,.58); background: rgba(203,193,105,.2); box-shadow: inset 0 0 90px rgba(38,34,14,.2), 0 32px 110px rgba(17,15,8,.4); }
.backrooms-id { position: absolute; top: 18px; left: 20px; margin: 0; color: rgba(45,44,18,.74); font: 700 11px/1.2 "MS Gothic", monospace; letter-spacing: .13em; }
.backrooms-guide-paper { position: absolute; z-index: 3; top: 58px; right: 34px; width: 118px; min-height: 94px; padding: 12px 10px; border: 0; color: #332e1d; background: linear-gradient(135deg, transparent 0 12px, #ede1aa 12px), repeating-linear-gradient(0deg, rgba(87,70,35,.11) 0 1px, transparent 1px 16px), #e8dda4; box-shadow: 4px 5px 0 rgba(33,29,12,.34); font: 700 13px/1.4 "Yu Mincho", serif; cursor: pointer; transform: rotate(3deg); }
.backrooms-guide-paper::before { content: ""; position: absolute; left: 16px; right: 16px; top: 31px; height: 1px; background: rgba(71,59,28,.35); box-shadow: 0 16px 0 rgba(71,59,28,.35), 0 32px 0 rgba(71,59,28,.35); }
.backrooms-guide-paper span { position: relative; z-index: 1; }
.backrooms-guide-paper:hover,.backrooms-guide-paper:focus-visible { color: #f5ebba; background: #40391d; box-shadow: 0 0 0 2px #ffffd0, 4px 5px 0 rgba(33,29,12,.34); outline: none; transform: rotate(0deg) translateY(-3px); }
.backrooms-developer { position: relative; width: 112px; height: 170px; padding: 0; border: 0; background: transparent; cursor: pointer; filter: drop-shadow(0 16px 10px rgba(30,27,8,.42)); image-rendering: pixelated; }
.backrooms-developer span { position: absolute; left: 50%; bottom: 10px; width: 58px; height: 124px; transform: translateX(-50%); background: linear-gradient(90deg, #111827 0 15%, #26364b 15% 48%, #171e2c 48% 85%, #111827 85%); box-shadow: 0 0 0 5px #17150e, 0 13px 0 -3px #14130d, 0 22px 0 -8px #14130d; }
.backrooms-developer span::before { content: ""; position: absolute; left: 13px; top: -36px; width: 32px; height: 39px; background: #d8b58a; box-shadow: -5px 5px 0 #171821, 5px -5px 0 #171821, 10px 4px 0 #171821, -2px -8px 0 4px #171821; }
.backrooms-developer span::after { content: ""; position: absolute; left: 25px; top: 8px; width: 8px; height: 69px; background: #c8c4a7; box-shadow: -14px 8px 0 #30435e, 14px 8px 0 #1a2638, 0 69px 0 #11131b; }
.backrooms-developer:hover { animation: backroomsDeveloperFlicker .3s steps(2,end) infinite; }
.backrooms-developer:focus-visible { animation: backroomsDeveloperFlicker .3s steps(2,end) infinite; outline: 1px dotted #d7cb7d; outline-offset: 6px; }
.backrooms-dialog { width: min(600px,100%); min-height: 136px; padding: 18px 20px; border: 3px solid #34321b; color: #2c2a17; background: rgba(238,231,165,.82); box-shadow: 8px 8px 0 rgba(51,47,20,.28); }
.backrooms-dialog p { min-height: 3em; margin: 0; font: 700 clamp(16px,2.4vw,22px)/1.7 "Yu Mincho", serif; }
.backrooms-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.backrooms-actions button { min-width: 96px; min-height: 36px; border: 2px solid #34321b; color: #2b2917; background: #cbc169; font: 700 13px/1 "MS Gothic", monospace; cursor: pointer; }
.backrooms-actions button:hover,.backrooms-actions button:focus-visible,.backrooms-actions button.is-emphasis { color: #ffffda; background: #333117; outline: none; }
.backrooms-return { position: absolute; z-index: 2; right: 22px; bottom: 20px; color: #34321b; font: 700 13px/1.3 "MS Gothic", monospace; text-decoration: none; border: 2px solid #49441c; padding: 10px 12px; background: rgba(229,220,134,.76); }
.backrooms-return:hover,.backrooms-return:focus-visible { color: #ffffdf; background: #343117; }
.backrooms-audio-controls { position: absolute; z-index: 3; left: 22px; bottom: 20px; display: flex; align-items: center; gap: 10px; color: #34321b; font: 700 12px/1 "MS Gothic", monospace; }
.backrooms-audio-controls button { min-height: 34px; padding: 0 10px; border: 2px solid #49441c; color: #34321b; background: rgba(229,220,134,.76); font: inherit; cursor: pointer; }
.backrooms-audio-controls button[aria-pressed="true"],.backrooms-audio-controls button:hover,.backrooms-audio-controls button:focus-visible { color: #ffffdf; background: #343117; outline: none; }
.backrooms-audio-controls label { display: flex; align-items: center; gap: 5px; padding: 9px 10px; border: 2px solid #49441c; background: rgba(229,220,134,.76); }
.backrooms-audio-controls input { width: 84px; accent-color: #343117; }
.backrooms-guide-dialog { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(27,25,11,.72); }
.backrooms-guide-dialog[hidden] { display: none; }
.backrooms-guide-sheet { position: relative; width: min(560px, 100%); padding: 36px 42px 34px; color: #332f20; background: repeating-linear-gradient(0deg, rgba(72,59,25,.08) 0 1px, transparent 1px 28px), #eee3af; box-shadow: 14px 16px 0 rgba(0,0,0,.42); font-family: "Yu Mincho", serif; transform: rotate(-.5deg); }
.backrooms-guide-sheet > p { margin: 0 0 12px; color: #756b3e; font: 700 11px/1 "MS Gothic", monospace; letter-spacing: .1em; }
.backrooms-guide-sheet h2 { margin: 0 0 18px; font-size: clamp(24px, 4vw, 36px); line-height: 1.25; }
.backrooms-guide-sheet ol { margin: 0; padding-left: 1.35em; font-size: clamp(15px, 2vw, 18px); line-height: 1.85; }
.backrooms-guide-sheet small { display: block; margin-top: 22px; color: #645d3b; font: 12px/1.6 "Yu Gothic", sans-serif; }
.backrooms-guide-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 1px solid #71683b; color: #3a351f; background: transparent; font: 700 20px/1 "MS Gothic", monospace; cursor: pointer; }
.backrooms-guide-close:hover,.backrooms-guide-close:focus-visible { color: #f3e9b9; background: #3c381f; outline: none; }
.backrooms-page::after { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .16; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 4px); }
@keyframes backroomsBuzz { 0%,92%,100% { opacity: 1; } 93%,96% { opacity: .16; } }
@keyframes backroomsDeveloperFlicker { 0%,100% { opacity: 1; transform: translateX(0); } 50% { opacity: .52; transform: translateX(3px); } }
@media (max-width:620px) { .backrooms-room { min-height: calc(100svh - 52px); padding: 30px 18px; } .backrooms-return { right: 12px; bottom: 12px; } .backrooms-audio-controls { left: 12px; bottom: 12px; gap: 5px; } .backrooms-audio-controls label { padding: 8px; } .backrooms-audio-controls input { width: 56px; } .backrooms-guide-paper { top: 54px; right: 14px; width: 102px; min-height: 82px; font-size: 12px; } .backrooms-guide-sheet { padding: 34px 26px 26px; } }