.hb-game { --brass: #c89b52; --ink: #171921; max-width: 960px; margin: 28px auto 0; color: #eee3c6; }
.hb-hud { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 12px 16px; background: #202934; border: 2px solid #67573e; border-bottom: 0; }
.hb-hud div { min-width: 95px; display: grid; }
.hb-hud span, .hb-kicker { color: #a9b6b2; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.hb-hud strong { color: #f0d49a; font: 700 .95rem/1.4 "Courier New", monospace; }
.hb-hud button:first-of-type { margin-left: auto; }
.hb-help { padding: 10px 16px; background: #283641; border: 2px solid #67573e; border-bottom: 0; }
.hb-help p { margin: 0; color: #d7d8c9; }
.hb-stage { position: relative; overflow: hidden; background: #10171d; border: 2px solid #67573e; box-shadow: 0 12px 35px rgba(0,0,0,.35); }
#hbCanvas { display: block; width: 100%; aspect-ratio: 16 / 9; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }
.hb-prompt { position: absolute; left: 8px; right: 8px; bottom: 7px; padding: 5px 8px; background: rgba(15,18,23,.88); border-left: 3px solid var(--brass); color: #eee3c6; font: 12px/1.35 "Courier New", monospace; }
.hb-dialogue { margin-top: 10px; padding: 16px 18px; min-height: 112px; background: #18232c; border: 2px solid #786345; box-shadow: inset 0 0 0 2px #283641; }
.hb-dialogue strong { color: #e4b866; font-family: "Courier New", monospace; }
.hb-dialogue p { min-height: 44px; margin: 8px 0 12px; color: #eef0df; }
.hb-dialogue-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hb-dialogue-actions button, .hb-order button, .hb-choice, .hb-grid-cell { padding: 8px 11px; color: #f1e4c5; background: #293843; border: 1px solid #806b47; cursor: pointer; }
.hb-dialogue-actions button:hover, .hb-order button:hover, .hb-choice:hover, .hb-grid-cell:hover { background: #3b4b50; border-color: #d0a55f; }
.hb-modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(8,12,15,.82); }
.hb-modal[hidden], .hb-dialogue[hidden], .hb-help[hidden], .hb-hint[hidden] { display: none; }
.hb-card { position: relative; width: min(620px, 100%); max-height: 88vh; overflow-y: auto; padding: 24px; color: #ede5d1; background: #1b252d; border: 3px solid #8f7449; box-shadow: inset 0 0 0 2px #303e45, 10px 10px 0 rgba(0,0,0,.35); }
.hb-card h3 { margin: 3px 72px 12px 0; color: #efc776; }
.hb-card p { line-height: 1.55; }
.hb-close { position: absolute; right: 14px; top: 14px; color: #cbd3cb; background: transparent; border: 1px solid #64716c; cursor: pointer; }
.hb-puzzle-input { display: grid; gap: 8px; margin: 18px 0; }
.hb-puzzle-input input { width: 100%; padding: 11px; color: #f5ead0; background: #10171d; border: 2px solid #59645f; font: 1rem "Courier New", monospace; }
.hb-choice.is-selected, .hb-grid-cell.is-selected { color: #15191a; background: #d3aa60; border-color: #ffe0a3; }
.hb-order { display: flex; flex-wrap: wrap; gap: 7px; }
.hb-order-result { min-height: 40px; padding: 8px; border: 1px dashed #65716d; color: #f0d49a; }
.hb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.hb-grid-cell { min-height: 48px; font: 700 1rem "Courier New", monospace; }
.hb-feedback { min-height: 24px; color: #e5bb6d; }
.hb-feedback.is-error { color: #ee8d79; }
.hb-hint { margin: 10px 0; padding: 12px; color: #dce4da; background: #27363b; border-left: 3px solid #c89b52; }
.hb-card-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hb-ending-card { text-align: center; }
@media (max-width: 620px) { .hb-hud { gap: 8px; } .hb-hud div { min-width: calc(50% - 8px); } .hb-hud button:first-of-type { margin-left: 0; } .hb-card { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .hb-game * { scroll-behavior: auto !important; } }