:root { color-scheme: dark; font-family: monospace; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #101936; }
body { touch-action: none; image-rendering: pixelated; }
#park, #game { position: fixed; inset: 0; width: 100%; height: 100%; }
#game { display: block; image-rendering: pixelated; }
button, a { font: inherit; }
button { cursor: pointer; }
.version { position: fixed; right: max(8px, env(safe-area-inset-right)); bottom: max(6px, env(safe-area-inset-bottom)); max-width: 56vw; color: #fff5d1; font-size: 10px; line-height: 1.3; text-align: right; text-shadow: 1px 1px #101936, -1px -1px #101936; pointer-events: none; }
.prompt { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); padding: 7px 10px; background: #fff5d1; border: 3px solid #3d3a74; color: #3d3a74; box-shadow: 3px 3px #101936; font-weight: bold; white-space: nowrap; }
.action { position: fixed; left: 50%; bottom: max(42px, calc(env(safe-area-inset-bottom) + 32px)); transform: translateX(-50%); min-width: 128px; padding: 12px; border: 3px solid #fff5d1; background: #d95763; color: #fff5d1; box-shadow: 4px 4px #101936; font-weight: bold; }
.title-screen, .overlay { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 18px; background: rgba(16,25,54,.82); backdrop-filter: blur(2px); }
[hidden] { display: none !important; }
.title-card, .panel { width: min(620px, 100%); max-height: calc(100vh - 36px); overflow: auto; border: 5px solid #fff5d1; outline: 4px solid #3d3a74; background: #1e8ca6; color: #fff5d1; padding: clamp(18px, 5vw, 38px); text-align: center; box-shadow: 9px 9px #101936; }
.title-card { position: relative; isolation: isolate; }
.title-card > *:not(.director-mark) { position: relative; z-index: 1; }
.director-mark { position: absolute; z-index: 0; left: 50%; top: 44%; width: 170px; height: 240px; transform: translate(-50%,-50%) rotate(45deg); background: repeating-linear-gradient(90deg,#101936 0 18px,#3d3a74 18px 36px); opacity: .14; }
.title-card h1 { margin: 0; font-size: clamp(36px, 10vw, 72px); line-height: .83; letter-spacing: -3px; text-shadow: 5px 5px #d95763; }
.title-card h1 span { color: #5fe8d8; letter-spacing: 8px; }
.tagline { color: #ffd166; font-weight: bold; }
.title-card button, .pixel-button, .cabinet { display: inline-block; border: 3px solid #3d3a74; background: #fff5d1; color: #3d3a74; padding: 11px 14px; box-shadow: 4px 4px #101936; text-decoration: none; font-weight: bold; }
.title-card button:hover, .title-card button:active { transform: translate(2px,2px); box-shadow: 2px 2px #101936; }
.corrupt { color: #5fe8d8; font-size: 11px; }
.title-card small { display: block; margin-top: 18px; }
.mini-chicken { font-size: 36px; color: #fff5d1; }
.panel { position: relative; background: #f2e3c0; color: #3d3a74; text-align: left; }
.panel h2 { margin: 0 34px 22px 0; color: #d95763; }
.close { position: absolute; right: 10px; top: 8px; width: 36px; height: 36px; border: 3px solid #3d3a74; background: #d95763; color: #fff5d1; font-size: 24px; line-height: 24px; }
.arcades { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.cabinet { min-height: 126px; background: #3d3a74; color: #ffd166; border-color: #d95763; }
.cabinet::before { content: ''; display: block; height: 52px; margin-bottom: 10px; border: 3px solid #5fe8d8; background: repeating-linear-gradient(135deg,#101936 0 6px,#3d3a74 6px 12px); }
.play-game { border: 0; background: transparent; color: #ffd166; font: inherit; font-weight: bold; }
.cabinet a { display: inline-block; margin-top: 8px; color: #fff5d1; font-size: 11px; }
.panel a { color: #3d3a74; font-weight: bold; }
.speech { position: fixed; z-index: 8; left: 50%; bottom: 86px; transform: translateX(-50%); width: min(520px, calc(100% - 32px)); padding: 14px; border: 4px solid #3d3a74; background: #fff5d1; color: #3d3a74; box-shadow: 5px 5px #101936; text-align: center; }
.speech button { margin: 12px 4px 0; padding: 8px; border: 2px solid #3d3a74; background: #ffd166; color: #3d3a74; }
.game-panel { width: min(960px, 100%); height: min(760px, calc(100vh - 36px)); display: flex; flex-direction: column; }
.game-panel iframe { flex: 1; min-height: 240px; width: 100%; border: 4px solid #3d3a74; background: #101936; }
.game-panel .pixel-button { align-self: center; margin-top: 12px; }
.library-list-link { margin: -10px 0 12px; font-size: 11px; }
.library-loading { padding: 36px 0; text-align: center; }
.bookshelf { max-width: 100%; overflow-x: auto; border: 5px solid #101936; background: linear-gradient(90deg,#5b3423,#7a4a32 45%,#5b3423); padding: 8px 8px 0; scrollbar-color: #7a4a32 #101936; }
.shelf-row { display: flex; align-items: flex-end; gap: 5px; min-width: max-content; height: 82px; padding: 8px 10px 0; border-bottom: 10px solid #5b3423; box-shadow: inset 0 -3px #101936,0 3px #101936; }
.book-spine { flex: 0 0 auto; height: 64px; min-width: 22px; padding: 4px 2px; overflow: hidden; border: 3px solid #101936; border-radius: 0; background: var(--book-color); color: #101936; box-shadow: inset -3px 0 rgba(255,255,255,.22); font-size: 10px; font-weight: bold; line-height: 1; }
.book-spine span { display: block; max-height: 52px; margin: auto; overflow: hidden; writing-mode: vertical-rl; }
.book-spine:focus-visible { outline: 3px solid #fff5d1; outline-offset: -6px; }
.mystery-book { width: 26px; background: #101936; color: #fff5d1; writing-mode: vertical-rl; }
.book-card { margin-top: 12px; padding: 12px; border: 4px solid #101936; background: #fff5d1; box-shadow: 4px 4px #7a4a32; }
.book-card strong, .book-card time { display: block; }
.book-card time { margin-top: 7px; font-size: 11px; }
.book-card-actions { display: flex; gap: 10px; margin-top: 12px; }
.book-card .pixel-button { padding: 7px 12px; }
.library-note { display: block; margin-top: 12px; text-align: center; font-size: 10px; }
@media (max-width: 520px) {
  .title-card { padding: 20px 14px; }
  .title-card h1 { font-size: 42px; }
  .arcades { grid-template-columns: 1fr; }
  .panel { padding: 18px 12px; }
  .prompt { top: max(8px, env(safe-area-inset-top)); font-size: 11px; }
  .game-overlay { padding: 8px; }
  .game-panel { height: calc(100vh - 16px); max-height: none; }
  .version { max-width: 70vw; font-size: 8px; }
}