:root{color-scheme:dark;--page:#15131b;--ink:#eee9ed;--muted:#beb1c7;--pink:#ed94b3;--line:#3b3446;--mono:"Courier New",Courier,monospace}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 42%,#25202f 0%,#1b1723 40%,var(--page) 77%);color:var(--ink);font-family:var(--mono);font-size:16px;display:grid;place-items:center;padding:38px 24px 30px}
button,a,canvas{-webkit-tap-highlight-color:transparent}
button{font:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--pink);outline-offset:5px}
.adventure{width:min(100%,820px)}
.masthead{display:flex;align-items:center;justify-content:space-between;margin:0 2px 24px;gap:20px}
.wordmark{color:#fff8ec;text-decoration:none;font-size:46px;font-weight:900;letter-spacing:4px;line-height:1;text-shadow:3px 3px 0 #77546b;display:flex;align-items:center;gap:11px}
.logo-spark{font-size:27px;color:var(--pink);text-shadow:none;margin-bottom:3px}
.edition{text-align:right;display:grid;gap:8px}
.edition-line{font-size:14px;font-weight:bold;letter-spacing:1.3px;color:#e4d9e9}
.edition-caption{font-size:14px;line-height:1.4;color:var(--muted)}
.game-window{--window-chrome:144px;background:#100e17;border:1px solid #55485e;box-shadow:0 0 0 5px #100e1680,0 24px 75px #0005;overflow:hidden;position:relative}
.window-bar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;background:#221d2b;border-bottom:1px solid #493c54}
.location{font-size:16px;letter-spacing:1px;color:#eadfee;display:flex;align-items:center;gap:10px;font-weight:bold}
.location-light{width:5px;height:5px;background:var(--pink);box-shadow:0 0 9px #ed94b350}
.chapter{color:#b7a5c2;margin-left:4px}
.window-actions{display:flex;gap:13px}
.window-actions button{width:24px;height:28px;display:grid;place-items:center;padding:3px;background:none;border:0;color:#a395b0;cursor:pointer}
.window-actions button:hover{color:#f7c0d5}
.window-actions svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.sound-waves{display:none}
[aria-pressed="true"] .sound-waves{display:block}
[aria-pressed="true"] .sound-off{display:none}
.scene-wrap{position:relative;line-height:0;background:#100e17}
#game{width:100%;height:auto;display:block;aspect-ratio:4/3;image-rendering:pixelated;image-rendering:crisp-edges;outline:none;touch-action:none}
#game:focus-visible{box-shadow:inset 0 0 0 2px #ed94b350}
.room-label{position:absolute;left:0;right:0;top:9%;pointer-events:none;display:grid;text-align:center;gap:12px;animation:room-label 4.5s forwards;line-height:1;text-shadow:0 2px 0 #100e17,2px 0 0 #100e17,-2px 0 0 #100e17,0 -2px 0 #100e17}
.room-label span{font-size:14px;font-weight:bold;letter-spacing:2px;color:#e9cdb7}
.room-label strong{font-size:34px;letter-spacing:2px;color:#fff0db}
@keyframes room-label{0%{opacity:0;transform:translateY(3px)}12%,65%{opacity:1;transform:translateY(0)}100%{opacity:0}}
.focus-hint{position:absolute;inset:0;background:#100e176e;display:grid;align-content:center;justify-items:center;gap:14px;pointer-events:none;line-height:1.4}
.focus-hint span{color:#ffe7ed;font-weight:bold;font-size:20px;letter-spacing:1px;background:#211a2ff0;padding:14px 18px;border:1px solid #7b5d7e}
.focus-hint small{color:#f2dfe9;font-size:16px;text-shadow:0 2px #100e17}
.game-status{min-height:94px;border-top:1px solid #493c54;background:#211b29;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.player-status{display:flex;align-items:center;gap:10px}
#portrait{width:48px;height:63px;image-rendering:pixelated}
.player-status>div{display:grid;gap:6px}
.player-status strong{font-size:20px;letter-spacing:2px;color:#f7eff2}
.player-status span{font-size:16px;color:#cfbcd6}
.room-status{display:flex;align-items:center;gap:9px;font-size:16px;line-height:1.4;color:#dfcce8}
.tiny-star{color:var(--pink);font-size:22px;flex-shrink:0}
.controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 24px;margin-top:23px;padding:0 2px;color:#d2c3dc}
.control-group{display:flex;align-items:center;gap:10px;font-size:16px;white-space:nowrap}
.control-group>span:has(kbd){display:flex;gap:3px}
kbd{font:bold 16px var(--mono);min-width:28px;min-height:30px;padding:4px 6px;display:inline-grid;place-items:center;border:1px solid #695a75;border-bottom:2px solid #80698f;border-radius:3px;color:#efe3f5;background:#2b2235}
.arrow-keys{font-size:20px;line-height:15px;text-align:center;letter-spacing:-2px;color:#e3d5ed;margin-right:3px}
.footer-note{width:100%;text-align:center;font-size:12px;line-height:1.5;letter-spacing:1px;color:#b7a4c3}
.footer-note span{font-size:18px;color:#d995b7;margin-left:6px}
.dialog{position:absolute;bottom:4%;left:4%;right:4%;min-height:190px;max-height:92%;display:flex;gap:16px;border:3px solid #f9ecf2;outline:4px solid #100e17;background:#100d16;padding:20px 22px 16px;line-height:1.4;box-shadow:0 8px 0 #0005}
.dialog-star{color:#f7a5c4;font-size:30px;padding-top:22px}
.dialog-content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.dialog-name{font-size:16px;letter-spacing:1px;color:#f1b8cf;font-weight:bold;flex-shrink:0}
.dialog p{font-size:28px;font-weight:bold;line-height:1.35;margin:10px 0 16px;min-height:0;overflow-y:auto;overflow-wrap:break-word;color:#fff;white-space:pre-line}
.dialog button{align-self:flex-end;flex-shrink:0;background:none;border:0;color:#e3c4eb;cursor:pointer;padding:4px 0;font-size:18px;font-weight:bold;letter-spacing:.25px;text-align:right}
.dialog button:hover{color:#fff}
.dialog button span{color:var(--pink);margin-left:9px}
.touch-controls{display:none;justify-content:space-between;align-items:center;padding:20px 10px 0}
.dpad{display:grid;grid-template:repeat(2,42px)/repeat(3,44px);gap:4px}
.touch-controls button{touch-action:none;user-select:none;-webkit-user-select:none;border:1px solid #564460;background:#2a2135;color:#ead2e8;border-radius:5px;font-size:24px;cursor:pointer}
.touch-controls button:active,.touch-controls button.held{background:#754660;border-color:#eb9cbd}
.dpad .up{grid-column:2}.dpad .left{grid-column:1;grid-row:2}.dpad .down{grid-column:2;grid-row:2}.dpad .right{grid-column:3;grid-row:2}
.touch-action{width:112px;height:88px;display:grid;align-content:center;gap:9px}
.touch-action span{font-size:14px;letter-spacing:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.game-window:fullscreen{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#100e17;border:0}
.game-window:fullscreen .window-bar,.game-window:fullscreen .game-status{width:min(100vw,calc((100dvh - var(--window-chrome))*4/3))}
.game-window:fullscreen .scene-wrap{width:min(100vw,calc((100dvh - var(--window-chrome))*4/3))}
@media(min-width:700px) and (max-height:850px){body{padding-top:22px;padding-bottom:20px}.adventure{max-width:690px}.masthead{margin-bottom:18px}.wordmark{font-size:40px}.edition-caption{max-width:300px}.controls{gap:16px;margin-top:19px}}
@media(max-width:600px){
  body{padding:24px 13px}
  .masthead{margin-bottom:20px;gap:16px;flex-wrap:wrap}
  .wordmark{font-size:38px;gap:8px;letter-spacing:2px}
  .logo-spark{font-size:25px}
  .edition{width:100%;text-align:left;gap:5px}
  .edition-line{font-size:14px;letter-spacing:1px}
  .edition-caption{font-size:14px}
  .game-window{--window-chrome:194px}
  .window-bar{height:44px;padding:0 10px}
  .location{font-size:14px;gap:7px}
  .game-status{min-height:130px;padding:12px;gap:10px;flex-wrap:wrap}
  #portrait{width:40px;height:53px}
  .player-status{gap:10px}
  .player-status strong{font-size:20px}
  .player-status span{font-size:16px}
  .room-status{width:100%;font-size:16px;gap:8px}
  .controls{gap:16px;margin-top:20px}
  .footer-note{margin-top:4px;font-size:12px;letter-spacing:.5px}
  .dialog{left:3%;right:3%;bottom:3%;max-height:94%;padding:12px;gap:8px;border-width:2px;outline-width:2px;min-height:0}
  .dialog p{font-size:20px;line-height:1.35;margin:8px 0 10px}
  .dialog-name{font-size:14px}
  .dialog-star{font-size:22px;padding-top:22px}
  .dialog button{font-size:16px}
  .room-label strong{font-size:28px}
  .room-label span{font-size:12px;letter-spacing:1px}
  .focus-hint span{font-size:16px;padding:12px}
  .focus-hint small{font-size:16px}
}
@media(pointer:coarse){.touch-controls{display:flex}.controls .control-group{display:none}.controls{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.room-label{animation:none;display:none}}