:root { color-scheme: dark; font-family: monospace; background: #1b1428; }
* { box-sizing: border-box; }
html, body, #library, #viewport { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #1b1428; touch-action: none; }
#viewport, #viewport canvas, .scanlines { position: fixed; inset: 0; }
#viewport canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.scanlines { pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(27,20,40,0) 0, rgba(27,20,40,0) 3px, rgba(27,20,40,.13) 3px, rgba(27,20,40,.13) 4px); }
.help { position: fixed; z-index: 2; top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); display: grid; gap: 3px; padding: 6px 8px; border: 2px solid #c8a15a; background: rgba(27,20,40,.78); color: #fff5d1; font-size: 10px; line-height: 1.25; text-shadow: 1px 1px #1b1428; pointer-events: none; }
.help strong { color: #c8a15a; letter-spacing: 2px; }
[hidden] { display: none !important; }
.prompt { position: fixed; z-index: 3; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; width: max-content; max-width: calc(100vw - 32px); transform: translateX(-50%); padding: 8px 12px; border: 2px solid #c8a15a; background: rgba(27,20,40,.92); color: #fff5d1; font-size: 12px; text-align: center; text-shadow: 1px 1px #1b1428; }
.touch-controls { display: none; }
.shelf-modal { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; overflow: auto; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: rgba(27,20,40,.82); }
.shelf-card { position: relative; width: min(620px, 100%); max-height: 100%; overflow: auto; padding: 22px; border: 4px solid #4a2b1c; background: #f2e3c0; color: #241d33; box-shadow: 6px 6px 0 #7a2f3a; }
.shelf-card h1 { margin: 0 90px 18px 0; font-size: 20px; }
.shelf-card ul { margin: 0; padding: 0; list-style: none; border-top: 2px solid #c8a15a; }
.shelf-card li { border-bottom: 1px solid #c8a15a; }
.shelf-card li a { display: grid; grid-template-columns: 8em 1fr; gap: 10px; padding: 9px 3px; color: #241d33; text-decoration: none; }
.shelf-card li a:hover, .shelf-card li a:focus { background: #fff5d1; }
.book-date { color: #7a2f3a; }
#shelf-note { white-space: pre-line; line-height: 1.7; }
.close-shelf, .d-pad-button, .action-button { border: 2px solid #241d33; border-radius: 0; background: #c8a15a; color: #241d33; font: bold 14px monospace; box-shadow: 3px 3px 0 #241d33; touch-action: none; user-select: none; -webkit-user-select: none; }
.close-shelf { position: absolute; top: 14px; right: 16px; padding: 7px 12px; }
@media (max-width: 520px) { .shelf-card li a { grid-template-columns: 1fr; gap: 2px; } }
@media (pointer: coarse), (max-width: 720px) {
  .prompt { bottom: max(116px, calc(env(safe-area-inset-bottom) + 108px)); }
  .touch-controls { position: fixed; z-index: 4; inset: 0; display: block; pointer-events: none; }
  .d-pad { position: absolute; bottom: max(12px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); display: grid; grid-template: repeat(3, 38px) / repeat(3, 38px); gap: 3px; pointer-events: auto; }
  .d-pad-button { width: 38px; height: 38px; padding: 0; }
  .d-pad-up { grid-area: 1 / 2; } .d-pad-left { grid-area: 2 / 1; } .d-pad-down { grid-area: 2 / 2; } .d-pad-right { grid-area: 2 / 3; }
  .action-button { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(28px, calc(env(safe-area-inset-bottom) + 16px)); width: 62px; height: 62px; border-color: #fff5d1; border-radius: 50%; background: #7a2f3a; color: #fff5d1; font-size: 22px; pointer-events: auto; }
}
.hon-card { border-color: #7a2f3a; box-shadow: 6px 6px 0 #4a2b1c; }
.hon-lead { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px solid #c8a15a; line-height: 1.7; }
.hon-delta { margin: 0 0 14px; padding: 8px 10px; background: #fff5d1; border-left: 6px solid #7a2f3a; line-height: 1.6; }
.hon-lines { margin: 0; padding: 0 0 0 1.6em; line-height: 1.85; }
.hon-lines li { padding: 3px 0; border-bottom: 1px solid #e2d3ae; }
.hon-blank { margin: 0 0 12px; line-height: 1.8; }
.hon-foot { margin: 16px 0 0; padding-top: 12px; border-top: 2px solid #c8a15a; color: #7a2f3a; line-height: 1.6; }