@font-face { font-family: 'Dungeon Pixel'; src: url('fonts/PressStart2P-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
:root { color-scheme: dark; font-family: 'Dungeon Pixel', monospace; color: #d8d1be; background: #111513; }
:root { --accent-equip: #edc46a; --accent-loot: #83d7bf; --accent-danger: #e88787; --accent-magic: #c49af1; --accent-armor: #93bfdc; }
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; }
main { position: relative; width: 100%; height: 100vh; height: 100dvh; }
header { position: absolute; z-index: 2; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; }
.header-actions { display: flex; gap: 8px; pointer-events: auto; }
h1 { font-size: 10px; font-weight: 400; margin: 0; color: #a7b19f; text-shadow: 1px 1px #000; }
button { background: #111711e6; border: 1px solid #53604d; color: #d3d8c8; padding: 7px 9px; border-radius: 0; cursor: pointer; font: 11px ui-monospace, monospace; }
button:hover { background: #293125; }
#bag { border-color: #9674ad; color: var(--accent-magic); }
#bag:hover { background: #30243c; }
button:focus-visible { outline: 2px solid #c3ad7c; outline-offset: 2px; }
button:disabled { opacity: .45; cursor: default; }
#restart:disabled { display: none; }
.hud { position: absolute; z-index: 2; top: 48px; left: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; max-width: calc(100% - 208px); padding: 12px; background: #0e140ef2; border: 1px solid #354032; pointer-events: none; }
.hud > div { position: relative; display: flex; align-items: center; gap: 7px; padding-bottom: 6px; white-space: nowrap; }
.label { font-size: 8px; color: #7e8b77; }
.hud strong { font-size: 10px; font-weight: 400; font-variant-numeric: tabular-nums; }
.hud .vital { padding-bottom: 12px; color: #ffb0a5; }
.vital .label { color: #ef837e; }
.hud .vital strong { font-size: 12px; }
.stat-icon { font: 20px/1 ui-monospace, monospace; }
.heart { color: #f05b60; text-shadow: 0 0 10px #df3c5066; }
.gold-stat strong, .gold-stat .stat-icon { color: #edc46a; }
.potion-stat strong, .potion-stat .stat-icon { color: #e49eab; }
.health-track { position: absolute; bottom: 0; left: 0; right: 0; height: 7px; border: 1px solid #8c4545; background: #3a1e24; overflow: hidden; }
.turn-track { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #30382b; }
#turn-fill { height: 100%; background: #c49d5e; width: 100%; }
#health-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #b93449, #f36b68); box-shadow: 0 0 8px #ef5366; transition: width .25s ease-out; }
.vital[data-low="true"] { background: #431f29; box-shadow: 0 0 16px #b7344933; }
.viewport { position: absolute; inset: 0; background: #111310; overflow: hidden; }
canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; outline: none; }
canvas:focus-visible { outline: 2px solid #c49d5e; outline-offset: -2px; }
.floor-tag { position: absolute; left: 14px; top: 118px; font: 11px ui-monospace, monospace; color: #8c9982; pointer-events: none; text-shadow: 1px 1px #000; }
footer { position: absolute; z-index: 2; bottom: 12px; left: 12px; display: flex; flex-direction: column; gap: 7px; max-width: calc(100% - 24px); padding: 9px 10px; background: #0e140ee6; font: 12px/1.6 ui-monospace, monospace; color: #85917c; pointer-events: none; }
.controls { display: flex; align-items: center; flex-wrap: wrap; column-gap: 5px; }
kbd { font: inherit; margin-left: 9px; color: #c5ceba; }
kbd::before { content: '['; }
kbd::after { content: ']'; }
kbd:first-child { margin-left: 0; }
#message { display: none; }
/* Message log, bottom right above the footer: newest last and brightest, the rest dimmed but legible. */
#message-log { position: absolute; z-index: 3; right: 12px; bottom: 84px; width: min(340px, calc(100% - 24px)); margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
#message-log li { padding: 5px 9px; background: #0b0d0ae6; border-left: 2px solid #c3ad7c; font: 13px/1.45 ui-monospace, monospace; color: #efe6d0; text-shadow: 1px 1px #000; animation: message-in .25s ease-out; }
#message-log li strong { font-weight: 700; color: #f2cf78; }
#message-log li[data-age='1'] { opacity: .85; border-left-color: #8c7d5c; }
#message-log li[data-age='2'] { opacity: .72; border-left-color: #6b6150; }
#message-log li:not([data-age='0']):not([data-age='1']):not([data-age='2']) { opacity: .6; border-left-color: #4e483d; }
@keyframes message-in { from { opacity: 0; transform: translateX(12px); } }
@media (max-width: 760px) { #message-log { bottom: 150px; width: calc(100% - 24px); } #message-log li { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { #message-log li { animation: none; } }
.credit { position: absolute; z-index: 2; top: 202px; right: 12px; max-width: 190px; color: #85917c; font: 10px/1.6 ui-monospace, monospace; text-align: right; margin: 0; pointer-events: none; text-shadow: 1px 1px #000; }
#overlay { position: absolute; z-index: 3; inset: 0; background: #101611e8; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px; text-align: center; }
#overlay[hidden] { display: none; }
h2 { font-size: 20px; font-weight: 400; line-height: 1.6; margin: 8px 0; }
#summary { color: #9fa890; font: 13px/1.8 ui-monospace, monospace; margin-bottom: 20px; max-width: 480px; }
#inventory { position: absolute; z-index: 4; top: 48px; right: 12px; width: min(360px, calc(100% - 24px)); max-height: calc(100% - 160px); overflow-y: auto; padding: 12px; background: #101710f5; border: 1px solid #53604d; font: 12px/1.7 ui-monospace, monospace; }
#inventory[hidden] { display: none; }
#inventory.looting { width: min(740px, calc(100% - 24px)); }
.inventory-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.looting .inventory-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inventory-columns h4 { color: #d6bf8b; margin: 0 0 10px; font: 9px/1.5 'Dungeon Pixel', monospace; }
#loot-pane[hidden] { display: none; }
#loot-name { color: var(--accent-loot); }
#take-all { border: 1px solid var(--accent-loot); background: #1d4035; color: #d2f6e8; font-weight: 700; padding: 8px 14px; }
#take-all:hover:not(:disabled) { background: #2a5b49; }
.loot-hint, #loot-status { color: #929e88; font-size: 11px; }
#loot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.loot-resource { font: 22px/1 ui-monospace, monospace; color: #edc46a; }
.loot-resource.potions { color: #e49eab; }
.loot-quantity { position: absolute; right: 4px; bottom: 4px; font: 10px ui-monospace, monospace; color: #e7d6a8; }
.inventory-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inventory-heading h3 { font: 10px 'Dungeon Pixel', monospace; margin: 0; }
.inventory-heading h3 { color: var(--accent-equip); }
#bag-count { color: #85917c; font: 11px ui-monospace, monospace; }
#equipment-stats, .inventory-hint { color: #85917c; font-size: 11px; }
#item-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.inventory-cell { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; padding: 6px; background: #171f18; border: 1px solid #44513b; color: #52604a; }
.inventory-cell:disabled { opacity: 1; background: #111711; }
.inventory-cell[data-rank='1'] { border-color: #678b76; }
.inventory-cell[data-rank='2'] { border-color: #ae8f4b; }
.inventory-cell[data-rank='3'] { border-color: #bb85e4; box-shadow: inset 0 0 12px #8b5da226; }
.inventory-cell[aria-pressed='true'] { background: #303826; outline: 2px solid #e3c285; outline-offset: -3px; }
.equipped-badge { position: absolute; right: 4px; top: 4px; color: #e3c285; font: 7px 'Dungeon Pixel', monospace; }
#item-details { min-height: 100px; margin-top: 12px; padding: 10px; border: 1px solid #35432f; background: #0d140e; color: #929e88; }
.item-icon { width: 32px; height: 32px; background-image: url('32rogues/items.png'); image-rendering: pixelated; }
.item-name { color: #d3d8c8; }
.item-name[data-rank='1'] { color: #9ec2aa; }
.item-name[data-rank='2'] { color: #d8b976; }
.item-name[data-rank='3'] { color: #d4a3f1; }
.item-detail { display: block; color: #85917c; font-size: 10px; }
.item-actions { display: flex; gap: 6px; }
.item-actions button { padding: 5px 10px; font-size: 11px; }
.item-actions button[data-action='equip'] { border: 1px solid var(--accent-equip); background: #edc46a; color: #211a0c; font-weight: 700; padding: 8px 18px; box-shadow: 0 0 10px #edc46a24; }
.item-actions button[data-action='equip']:hover { background: #ffe2a1; }
.item-actions button[data-action='unequip'] { border-color: #957a45; color: var(--accent-equip); background: #302818; padding: 8px 12px; }
.item-actions button[data-action='drop'] { border-color: #844f54; color: var(--accent-danger); background: #25191c; padding: 8px 12px; }
.item-actions button[data-action='drop']:hover { background: #41262c; }
#character-panel { position: absolute; z-index: 2; left: 12px; top: 148px; width: 272px; max-height: calc(100% - 280px); overflow-y: auto; padding: 12px; background: #101710ed; border: 1px solid #53604d; }
#character-panel h2 { margin: 0 0 10px; font-size: 9px; color: #d6bf8b; text-align: center; }
.paper-doll { display: grid; grid-template-columns: 56px 1fr 56px; gap: 8px; align-items: stretch; }
.doll-column { display: grid; grid-template-rows: repeat(4, 1fr); gap: 6px; }
.doll-figure { position: relative; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 78%, #5b6a4655 0%, #26301f33 45%, #0d120c 75%); border: 1px solid #303d2a; box-shadow: inset 0 0 24px #000a; min-width: 0; }
.doll-figure::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 10%; height: 6px; border-radius: 50%; background: #0008; filter: blur(2px); }
#portrait { position: relative; z-index: 1; width: 100%; height: auto; image-rendering: pixelated; }
.gear-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; padding: 5px 2px 4px; min-height: 58px; text-align: center; background: #151d14; border: 1px solid #3a4636; box-shadow: inset 0 0 10px #0009; }
.gear-slot:hover, .gear-slot:focus-visible { border-color: #8a9a78; background: #1b2619; }
.gear-slot small { display: block; font: 6px 'Dungeon Pixel', monospace; color: #929e88; letter-spacing: .5px; }
.gear-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gear-icon { width: 32px; height: 32px; display: grid; place-items: center; font: 20px ui-monospace, monospace; color: #4f5a48; image-rendering: pixelated; }
.gear-slot[data-equipped="true"] { border-color: #aa915e; background: radial-gradient(circle at 50% 40%, #3b33204d, #151d14 70%); }
#character-panel .doll-hint { text-align: center; margin: 4px 0 0; font-size: 9px; }
.character-stats { display: flex; justify-content: space-between; margin: 12px 0; font: 11px ui-monospace, monospace; color: #929e88; }
.character-stats strong { color: #e7c996; }
#character-armor { color: var(--accent-armor); }
.gear-slot[data-slot='weapon'] small { color: var(--accent-equip); }
.gear-slot[data-slot='relic'] small { color: var(--accent-magic); }
.gear-slot[data-slot='armor'] small, .gear-slot[data-slot='shield'] small, .gear-slot[data-slot='head'] small, .gear-slot[data-slot='hands'] small, .gear-slot[data-slot='feet'] small { color: var(--accent-armor); }
.gear-slot[data-slot='charm'] small { color: var(--accent-loot); }
.gear-slot[data-equipped="true"] .gear-icon { background-image: url('32rogues/items.png'); }
#character-panel p { font: 10px/1.5 ui-monospace, monospace; color: #929e88; margin: 10px 0 0; }
#character-panel #weapon-timer { color: var(--accent-equip); margin: -4px 0 8px; }
#character-panel #tools { display: flex; gap: 14px; color: var(--accent-loot); margin: 0 0 10px; font-size: 8px; }
#tools .tool { display: inline-flex; align-items: center; gap: 4px; }
#tools .tool strong { font-size: 10px; font-weight: 400; color: #f3dfaa; }
[data-tip] { cursor: help; }
#ui-tip { position: fixed; z-index: 30; max-width: 260px; padding: 7px 9px; background: #0b0a08f2; border: 1px solid #c9a65a; box-shadow: 0 4px 14px #000a; color: #efe6d0; font: 8px/1.6 'Dungeon Pixel', monospace; white-space: normal; pointer-events: none; }
#ui-tip[hidden] { display: none; }
#ui-tip kbd { padding: 0 3px; border: 1px solid #c9a65a; color: #ffe08a; font: inherit; }
.bag-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.bag-filters button { padding: 4px 7px; }
.bag-filters button[aria-pressed="true"] { background: #333b29; border-color: #c3ad7c; color: #e7c996; }
@media (max-width: 760px) { .hud { max-width: calc(100% - 24px); gap: 12px; } .floor-tag { top: 170px; } .credit { top: 280px; max-width: 150px; } footer { font-size: 11px; } #character-panel { top: 192px; width: 170px; padding: 7px; max-height: calc(100% - 380px); } #character-panel h2 { font-size: 7px; } .paper-doll { grid-template-columns: 38px 1fr 38px; gap: 4px; } .gear-slot { min-height: 40px; padding: 3px 1px; } .gear-slot small { font-size: 5px; } .gear-icon { width: 24px; height: 24px; font-size: 15px; } .gear-slot .gear-icon[style*='background-image'] { background-size: auto; transform: scale(.75); } .character-stats { font-size: 9px; } }
@media (max-width: 400px) { h1 { font-size: 8px; } .hud { gap: 10px; } .label, .hud strong { font-size: 7px; } .hud .vital strong { font-size: 10px; } }
@media (max-width: 600px) { .looting .inventory-columns { grid-template-columns: minmax(0, 1fr); } #loot-pane { padding-top: 14px; border-top: 1px solid #53604d; } }

#tooltip { position: absolute; left: 0; top: 0; z-index: 2; max-width: 260px; padding: 8px 10px; background: #0a0f0cf2; border: 1px solid #4b5a48; box-shadow: 0 4px 16px #0009; pointer-events: none; font: 10px ui-monospace, monospace; color: #b9c2ad; }
#tooltip[hidden] { display: none; }
#tooltip .tip-entry + .tip-entry { margin-top: 8px; padding-top: 8px; border-top: 1px solid #2c362b; }
#tooltip .tip-title { font: 8px 'Dungeon Pixel', monospace; line-height: 1.5; }
#tooltip .tip-tag { margin-top: 2px; color: #7f8c79; text-transform: uppercase; font-size: 9px; }
#tooltip p { margin: 4px 0 0; line-height: 1.35; }
.gear-slot[data-equipped="true"][data-rank='1'] { border-color: #678b76; }
.gear-slot[data-equipped="true"][data-rank='2'] { border-color: #ae8f4b; }
.gear-slot[data-equipped="true"][data-rank='3'] { border-color: #bb85e4; box-shadow: inset 0 0 12px #8b5da226; }

#loot-log { position: absolute; z-index: 2; top: 252px; right: 12px; width: 230px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.log-entry { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; background: linear-gradient(90deg, #0b100cdd, #0b100cf5); border: 1px solid #2f3a2c; border-right: 3px solid #6b7a63; animation: log-life 12s linear forwards; }
.log-entry[data-kind='gold'] { border-right-color: #dcc274; }
.log-entry[data-kind='potion'] { border-right-color: #d58d81; }
.log-entry[data-kind='key'], .log-entry[data-kind='lockpick'] { border-right-color: #93bfdc; }
.log-entry[data-rank='1'] { border-right-color: #678b76; } .log-entry[data-rank='1'] strong { color: #9ec2aa; }
.log-entry[data-rank='2'] { border-right-color: #ae8f4b; } .log-entry[data-rank='2'] strong { color: #d8b976; }
.log-entry[data-rank='3'] { border-right-color: #bb85e4; } .log-entry[data-rank='3'] strong { color: #d4a3f1; }
.log-icon { flex: 0 0 32px; width: 32px; height: 32px; transform: scale(.75); margin: -4px; image-rendering: pixelated; }
.log-text { display: flex; flex-direction: column; min-width: 0; }
.log-text strong { font: 8px/1.5 'Dungeon Pixel', monospace; color: #e4dcc6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-text small { font: 9px ui-monospace, monospace; color: #7f8c79; }
@keyframes log-life {
  0% { opacity: 0; transform: translateX(24px); box-shadow: inset 0 0 0 40px #e8c96a33; }
  3% { opacity: 1; transform: translateX(0); }
  10% { box-shadow: inset 0 0 0 40px #e8c96a00; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
@media (max-width: 760px) { #loot-log { top: 330px; width: 150px; } .log-text small { display: none; } }
@media (prefers-reduced-motion: reduce) { .log-entry { animation: none; } }

#hero-picker { position: absolute; z-index: 4; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; background: radial-gradient(ellipse at 50% 40%, #1b2418f2, #070a07fa 70%); overflow-y: auto; }
#hero-picker[hidden] { display: none; }
#hero-picker h2 { margin: 0; font-size: 14px; color: #d6bf8b; letter-spacing: 2px; }
.hero-name { display: flex; align-items: center; gap: 12px; font: 9px 'Dungeon Pixel', monospace; color: #929e88; }
.hero-name input { width: 220px; padding: 9px 10px; background: #0b100b; border: 1px solid #53604d; color: #f0e3c2; font: 11px 'Dungeon Pixel', monospace; }
.hero-name input:focus { outline: none; border-color: #d6bf8b; box-shadow: 0 0 0 2px #d6bf8b33; }
#hero-classes { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 14px; max-width: 100%; }
.hero-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px; text-align: center; background: #111810; border: 1px solid #3a4636; color: #b9c2ad; cursor: pointer; }
.hero-card:hover { border-color: #7e8c6f; }
.hero-card[aria-checked="true"] { border-color: var(--hero-color); box-shadow: 0 0 0 1px var(--hero-color), 0 0 24px color-mix(in srgb, var(--hero-color) 25%, transparent); background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--hero-color) 14%, #111810), #111810 70%); }
.hero-card canvas { width: 96px; height: 96px; image-rendering: pixelated; }
.hero-card strong { font: 11px 'Dungeon Pixel', monospace; color: var(--hero-color); }
.hero-card p { margin: 0; font: 10px/1.45 ui-monospace, monospace; color: #a3ad97; }
.hero-card ul { margin: 0; padding: 0; list-style: none; font: 10px/1.6 ui-monospace, monospace; color: #d8d1be; }
.hero-card kbd { font: 8px 'Dungeon Pixel', monospace; color: #7f8c79; }
#hero-start { padding: 10px 18px; border: 1px solid var(--accent-equip); background: #3a3120; color: #f3dfaa; font: 9px 'Dungeon Pixel', monospace; }
@media (max-width: 760px) { #hero-classes { grid-template-columns: 1fr; } .hero-card { flex-direction: row; text-align: left; } .hero-card canvas { width: 64px; height: 64px; flex: none; } .hero-name input { width: 160px; } }

/* Breadcrumbs: empty gear slots with something equippable in the bag. */
.gear-slot[data-available="true"], #bag[data-available="true"], [data-filter][data-available="true"], .inventory-cell { position: relative; }
.gear-slot[data-available="true"] { border-color: #8a7a4a; }
.gear-slot[data-available="true"]::after, #bag[data-available="true"]::after, [data-filter][data-available="true"]::after, .ready-dot {
  content: ''; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-equip); box-shadow: 0 0 0 2px #101710, 0 0 8px var(--accent-equip); animation: crumb 1.6s ease-in-out infinite;
}
#bag[data-available="true"]::after { top: -4px; right: -4px; }
[data-filter][data-available="true"]::after { top: -3px; right: -3px; width: 6px; height: 6px; }
@keyframes crumb { 50% { transform: scale(.7); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .gear-slot[data-available="true"]::after, #bag[data-available="true"]::after, .ready-dot { animation: none; } }

/* Inventory docks beside the character doll on the left. */
#inventory { left: 318px; right: auto; top: 148px; width: min(360px, calc(100% - 330px)); max-height: calc(100% - 280px); }
#inventory.looting { width: min(740px, calc(100% - 330px)); }
@media (max-width: 760px) { #inventory, #inventory.looting { left: 12px; right: 12px; top: 48px; width: auto; max-height: calc(100% - 160px); } }

/* Pickup log sits mid-screen, just below the hero, newest on top. */
#loot-log { top: auto; bottom: 22%; right: auto; left: 50%; transform: translateX(-50%); width: 260px; align-items: center; z-index: 3; }
.log-entry { width: 100%; border-right: 1px solid #2f3a2c; border-left: 3px solid #6b7a63; animation-name: log-life-center; }
.log-entry[data-kind='gold'] { border-left-color: #dcc274; }
.log-entry[data-kind='potion'] { border-left-color: #d58d81; }
.log-entry[data-kind='key'], .log-entry[data-kind='lockpick'] { border-left-color: #93bfdc; }
.log-entry[data-rank='1'] { border-left-color: #678b76; } .log-entry[data-rank='2'] { border-left-color: #ae8f4b; } .log-entry[data-rank='3'] { border-left-color: #bb85e4; }
@keyframes log-life-center {
  0% { opacity: 0; transform: translateY(10px) scale(.92); box-shadow: inset 0 0 0 40px #e8c96a33; }
  3% { opacity: 1; transform: translateY(0) scale(1); }
  10% { box-shadow: inset 0 0 0 40px #e8c96a00; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
@media (max-width: 760px) { #loot-log { top: auto; bottom: 26%; width: 200px; } }

#chat-form { position: absolute; z-index: 5; left: 50%; bottom: 64px; transform: translateX(-50%); width: min(460px, calc(100% - 32px)); }
#chat-form[hidden] { display: none; }
#chat-form input { width: 100%; box-sizing: border-box; padding: 9px 10px; background: #0d0b08ee; border: 1px solid #6f6249; color: #f0e3c2; font: 13px ui-monospace, monospace; }
#chat-form input:focus { outline: none; border-color: #d6bf8b; }
#message-log li[data-chat] strong { color: #f2dc9a; margin-right: 4px; }
#etch-form { position: absolute; z-index: 5; left: 50%; top: 38%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100% - 32px)); padding: 14px; background: #15120de8; border: 1px solid #6f6249; box-shadow: 0 8px 30px #000a; }
#etch-form[hidden] { display: none; }
#etch-form label { font: 9px 'Dungeon Pixel', monospace; color: #e4d6ae; }
#etch-form input { padding: 9px 10px; background: #0d0b08; border: 1px solid #4f4535; color: #f0e3c2; font: 13px ui-monospace, monospace; }
#etch-form input:focus { outline: none; border-color: #d6bf8b; }
#etch-form small { font: 10px ui-monospace, monospace; color: #8f8670; }

.load { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: 2px 0 4px; font: 7px 'Dungeon Pixel', monospace; color: #929e88; }
.load strong { font: 10px ui-monospace, monospace; color: #d8d1be; }
.load-track { position: relative; height: 6px; background: #0a0f0a; border: 1px solid #3a4636; }
#load-fill { height: 100%; width: 0; background: #7fa36e; transition: width .3s, background .3s; }
.load-limit { position: absolute; top: -3px; bottom: -3px; left: 66.6%; width: 1px; background: #d6bf8b99; }
.load[data-state='burdened'] #load-fill { background: #d8a24a; }
.load[data-state='overloaded'] #load-fill { background: #d65a4a; }
.load[data-state='overloaded'] strong { color: #f08a7a; }
#character-panel #load-state { margin: 0 0 6px; min-height: 0; font-size: 9px; color: #d8a24a; }
#character-panel #load-state[data-state='overloaded'] { color: #f08a7a; }
#character-panel #load-state:empty { display: none; }

.flying-loot { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; filter: drop-shadow(0 0 6px #f3d77f88); }
.hud-bump { animation: hud-bump .35s ease-out; }
@keyframes hud-bump { 30% { transform: scale(1.18); filter: brightness(1.6); } }

#hero-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 12px; max-width: 100%; }
.hero-mode { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; text-align: left; background: #111810; border: 1px solid #3a4636; color: #b9c2ad; }
.hero-mode strong { font: 9px 'Dungeon Pixel', monospace; color: #d6bf8b; }
.hero-mode[data-mode='daily'] strong { color: #e88787; }
.hero-mode span { font: 10px ui-monospace, monospace; color: #8f9a85; }
.hero-mode[aria-checked='true'] { border-color: #d6bf8b; box-shadow: 0 0 0 1px #d6bf8b55; background: #1b2118; }
.hero-mode[data-mode='daily'][aria-checked='true'] { border-color: #e88787; box-shadow: 0 0 0 1px #e8878755, 0 0 18px #e8878722; }
.hero-mode:disabled { opacity: .45; cursor: not-allowed; }
#hero-error { margin: 0; color: #f08a7a; font: 11px ui-monospace, monospace; }
#daily-board { margin: 0 0 16px; padding: 10px 16px 10px 32px; min-width: min(420px, 90%); text-align: left; background: #0b100b; border: 1px solid #3a4636; font: 11px/1.8 ui-monospace, monospace; color: #b9c2ad; }
#daily-board:empty::before { content: 'No runs recorded yet today.'; color: #7f8c79; }
#daily-board li[data-mine='true'] { color: #f2d18a; }
#new-hero { margin-top: 4px; }
body[data-mode='daily'] .floor-tag { color: #e88787; }
@media (max-width: 760px) { #hero-modes { grid-template-columns: 1fr; } }

.shop-price { position: absolute; left: 3px; bottom: 2px; font: 9px ui-monospace, monospace; color: #e8c96a; text-shadow: 1px 1px #000; }
.shop-cell[data-affordable='false'] { opacity: .5; }
.shop-cell[data-affordable='false'] .shop-price { color: #e88787; }
[data-action='sell'] { border-color: #8a7a4a; color: #e8c96a; }

/* Mana, level and XP in the HUD */
.mana-stat strong { color: #9fc8f0; }
.mana-track, .xp-track { height: 4px; margin-top: 4px; background: #0a0f0a; border: 1px solid #2a3a4a; }
#mana-fill { height: 100%; width: 100%; background: #5a8fd8; transition: width .2s; }
#xp-fill { height: 100%; width: 0; background: #d6bf8b; transition: width .4s; }
.level-stat strong { color: #f2d18a; }
/* RPG dialogue box: black strip, framed portrait, speaker name, typewriter text. Sits just under your hero. */
#conversation { position: absolute; z-index: 6; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 24px 36px; background: linear-gradient(#0000 30%, #000000cc 78%); cursor: pointer; animation: dialogue-in .2s ease-out; }
#conversation[hidden] { display: none; }
.conversation-panel { position: relative; display: flex; gap: 22px; align-items: flex-end; width: min(880px, 100%); padding: 18px 24px 26px; background: linear-gradient(#0d0b08f4, #050403f6); border-top: 2px solid #c9a65a; border-bottom: 2px solid #c9a65a; box-shadow: 0 0 0 1px #000, 0 10px 40px #000c; }
.conversation-portrait { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#conversation-portrait { width: 160px; height: 160px; image-rendering: pixelated; background: radial-gradient(circle at 50% 38%, #4a4030, #14110b 72%); border: 1px solid #c9a65a88; box-shadow: inset 0 0 24px #000; }
#conversation-name { font: 11px 'Dungeon Pixel', monospace; color: #f2cf78; letter-spacing: .1em; text-transform: uppercase; }
.conversation-main { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#conversation-options { display: flex; flex-wrap: wrap; gap: 8px; }
#conversation-options[hidden] { display: none; }
#conversation-options button, #conversation-options input { font: 10px 'Dungeon Pixel', monospace; padding: 7px 10px; background: #1a1610; color: #f2dc9a; border: 1px solid #c9a65a88; }
#conversation-options button:hover { border-color: #f2dc9a; }
#conversation-options input { width: 220px; color: #f0e3c2; background: #0d0b08; }
#stash-gold { margin-top: 8px; }
.quest-offer { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 10px 12px; border: 1px solid #c9a65a; background: #14110bf0; cursor: default; }
.quest-offer strong { font: 10px 'Dungeon Pixel', monospace; color: #f2cf78; letter-spacing: .1em; }
.quest-offer p { margin: 0; font: 10px/1.6 'Dungeon Pixel', monospace; color: #efe6d0; }
.quest-reward { display: flex; align-items: center; gap: 10px; color: #c9e7ff !important; }
.quest-reward .item-icon { flex: none; width: 32px; height: 32px; }
.quest-buttons { display: flex; gap: 8px; }
#stash-gold[hidden] { display: none; }
#conversation-log { flex: 1; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; max-height: 300px; overflow: hidden; }
#conversation-log li { font: 13px/1.75 'Dungeon Pixel', monospace; color: #f2ead6; overflow-wrap: anywhere; }
#conversation-log li.old { font-size: 10px; color: #8d8676; }
#conversation-log li kbd { padding: 0 4px; border: 1px solid #c9a65a; color: #ffe08a; font: inherit; }
.conversation-hint { position: absolute; right: 14px; bottom: 6px; font: 8px 'Dungeon Pixel', monospace; color: #8f8670; }
#dialogue { position: absolute; z-index: 4; left: 50%; top: calc(50% + 54px); transform: translateX(-50%); width: min(540px, calc(100vw - 32px)); display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px 12px 10px; background: linear-gradient(#0b0a08f2, #050403f2); border-top: 2px solid #c9a65a; border-bottom: 2px solid #c9a65a; box-shadow: 0 0 0 1px #000, 0 6px 22px #000a; cursor: pointer; animation: dialogue-in .18s ease-out; }
#dialogue[hidden] { display: none; }
#dialogue::before, #dialogue::after { content: ''; position: absolute; top: 3px; bottom: 3px; width: 2px; background: #c9a65a55; }
#dialogue::before { left: 3px; } #dialogue::after { right: 3px; }
.dialogue-frame { flex: none; width: 64px; height: 64px; padding: 2px; background: #1c1810; border: 2px solid #c9a65a; box-shadow: inset 0 0 0 2px #000; }
#dialogue-portrait { display: block; width: 60px; height: 60px; image-rendering: pixelated; background: radial-gradient(circle at 50% 40%, #3a3326, #14110b); }
.dialogue-body { flex: 1; min-width: 0; }
#dialogue-name { display: block; margin-bottom: 5px; font: 10px 'Dungeon Pixel', monospace; color: #f2cf78; letter-spacing: .06em; text-transform: uppercase; }
#dialogue[data-tone='danger'] #dialogue-name { color: #f07a6a; }
#dialogue[data-tone='merchant'] #dialogue-name { color: #e8c96a; }
#dialogue-text { margin: 0; min-height: 2.6em; font: 10px/1.6 'Dungeon Pixel', monospace; color: #efe6d0; overflow-wrap: anywhere; }
#dialogue-text kbd { padding: 0 4px; border: 1px solid #c9a65a; color: #ffe08a; font: inherit; }
.dialogue-more { position: absolute; right: 12px; bottom: 6px; font-size: 9px; color: #c9a65a; animation: dialogue-bob .9s ease-in-out infinite; }
#dialogue:not([data-done='true']) .dialogue-more { visibility: hidden; }
@keyframes dialogue-in { from { opacity: 0; transform: translate(-50%, 6px); } }
@keyframes dialogue-bob { 50% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { #dialogue, .dialogue-more { animation: none; } }

/* Hotbar */
#hotbar { position: absolute; z-index: 3; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; gap: 6px; }
.hotbar-slot { position: relative; width: 52px; height: 52px; padding: 0; display: grid; place-items: center; overflow: hidden; background: #0e140ee8; border: 1px solid #3a4636; }
.hotbar-slot:disabled { opacity: .35; }
.hotbar-slot[data-ready='true'] { border-color: #6f8fc8; box-shadow: 0 0 10px #5a8fd833; }
.hotbar-slot[data-low-mana='true'] .skill-glyph { color: #6a7480; }
.hotbar-slot kbd { position: absolute; top: 2px; left: 4px; margin: 0; font: 7px 'Dungeon Pixel', monospace; color: #c5ceba; }
.hotbar-slot kbd::before, .hotbar-slot kbd::after { content: none; }
.hotbar-slot small { position: absolute; right: 3px; bottom: 2px; font: 9px ui-monospace, monospace; color: #9fc8f0; }
.hotbar-slot .skill-glyph { font-size: 22px; color: #e8dcc0; }
.hotbar-cooldown { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #000a; pointer-events: none; }

/* Character builder and sheet */
#hero-builder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(1100px, 100%); }
#hero-builder[hidden] { display: none; }
.builder-block { padding: 10px 12px; background: #0e140e; border: 1px solid #3a4636; min-width: 0; }
.builder-block h3, #sheet h4 { margin: 0 0 8px; font: 8px 'Dungeon Pixel', monospace; color: #d6bf8b; }
.builder-row { display: grid; grid-template-columns: 34px 1fr auto 22px auto; align-items: center; gap: 6px; margin: 4px 0; font: 10px ui-monospace, monospace; }
.builder-row strong { font: 8px 'Dungeon Pixel', monospace; color: #e8dcc0; }
.builder-row b { min-width: 18px; text-align: center; color: #f2d18a; }
.builder-hint { color: #7f8c79; font-size: 9px; }
.builder-step { width: 22px; height: 22px; padding: 0; }
.builder-tree { display: flex; flex-direction: column; gap: 4px; }
.builder-tree h4 { margin: 4px 0 2px; font: 7px 'Dungeon Pixel', monospace; color: #93bfdc; }
#hero-builder .builder-block:nth-child(2) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#hero-builder .builder-block:nth-child(2) h3 { grid-column: 1 / -1; }
.builder-skill { display: flex; align-items: center; gap: 6px; padding: 4px 6px; text-align: left; font: 10px ui-monospace, monospace; background: #111810; border: 1px solid #2f3a2c; }
.builder-skill[data-active='true'] .skill-glyph { color: #9fc8f0; }
.builder-skill[data-chosen='true'] { border-color: #d6bf8b; background: #2a2618; color: #f3dfaa; }
.builder-skill small { margin-left: auto; color: #7f8c79; }
.builder-shop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.builder-ware { display: flex; justify-content: space-between; gap: 6px; padding: 4px 6px; font: 10px ui-monospace, monospace; background: #111810; border: 1px solid #2f3a2c; text-align: left; }
.builder-ware b { color: #e8c96a; }
.builder-ware[data-owned='true'] { border-color: #d6bf8b; background: #2a2618; }
.builder-note { margin: 6px 0 0; font: 9px ui-monospace, monospace; color: #7f8c79; }
#sheet { position: absolute; z-index: 5; left: 50%; top: 60px; transform: translateX(-50%); width: min(760px, calc(100% - 24px)); max-height: calc(100% - 200px); overflow-y: auto; padding: 14px; background: #101710f5; border: 1px solid #53604d; }
#sheet[hidden] { display: none; }
.sheet-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.sheet-head h3 { margin: 0; font: 11px 'Dungeon Pixel', monospace; color: #f2d18a; }
.sheet-head span { font: 10px ui-monospace, monospace; color: #929e88; }
.sheet-close { margin-left: auto; }
.sheet-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { #hero-builder, .sheet-columns { grid-template-columns: 1fr; } #hero-builder .builder-block:nth-child(2) { grid-template-columns: 1fr; } }
@media (max-width: 760px) { #hotbar { bottom: 130px; } .hotbar-slot { width: 42px; height: 42px; } }

#hero-classes { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); width: min(1100px, 100%); }
.vital.hurt { animation: vital-hurt .45s ease-out; }
@keyframes vital-hurt { 0% { background: #7a1018; transform: translateX(-3px); } 20% { transform: translateX(3px); } 40% { transform: translateX(-2px); } 100% { background: transparent; transform: none; } }
#area-banner { position: absolute; z-index: 3; left: 0; right: 0; top: 30%; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; text-align: center; opacity: 0; }
#area-banner[hidden] { display: none; }
#ghost-bar { position: absolute; z-index: 3; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; padding: 6px 10px; background: #0b0f14d9; border: 1px solid #8fb4d955; font: 11px/1.2 'Dungeon Pixel', monospace; letter-spacing: 2px; color: #bcd6ee; text-shadow: 1px 1px #000; }
#ghost-bar[hidden] { display: none; }
#ghost-bar button { font: inherit; letter-spacing: 1px; }
#players-banner { position: absolute; z-index: 3; left: 0; right: 0; top: 46%; text-align: center; pointer-events: none; opacity: 0; font: 18px/1.2 'Dungeon Pixel', monospace; letter-spacing: 3px; color: #f2cf78; text-shadow: 0 0 16px #000, 2px 2px #000; }
#players-banner[hidden] { display: none; }
#players-banner.showing { animation: area-banner 4.2s ease-in-out forwards; }
@media (max-width: 760px) { #players-banner { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { #players-banner.showing { animation: none; opacity: 1; } }
#area-banner.showing { animation: area-banner 4.2s ease-in-out forwards; }
#area-banner strong { font: 26px/1.2 'Dungeon Pixel', monospace; color: #efe3c4; letter-spacing: 3px; text-shadow: 0 0 18px #000, 2px 2px #000; padding: 0 24px 12px; border-bottom: 1px solid #d6bf8b88; background: linear-gradient(90deg, transparent, #0008 20%, #0008 80%, transparent); }
#area-banner small { font: 9px 'Dungeon Pixel', monospace; color: #b8a77e; letter-spacing: 4px; text-transform: uppercase; text-shadow: 1px 1px #000; }
@keyframes area-banner { 0% { opacity: 0; letter-spacing: 1px; } 18% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 760px) { #area-banner strong { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { #area-banner.showing { animation: none; opacity: 1; } .vital.hurt { animation: none; } }

/* Atlas icons and the skill web */
.atlas-icon { display: inline-block; flex: none; vertical-align: middle; image-rendering: pixelated; background-repeat: no-repeat; }
.character-stats span, .hud > div { display: inline-flex; align-items: center; gap: 4px; }
.builder-row strong { display: inline-flex; align-items: center; gap: 4px; }
.graph-host { position: relative; width: 100%; }
.graph-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; border: 1px solid #2f3a2c; }
.graph-tip { position: absolute; z-index: 2; max-width: 220px; padding: 8px 10px; background: #0a0f0cf2; border: 1px solid #4b5a48; pointer-events: none; font: 10px/1.4 ui-monospace, monospace; color: #b9c2ad; }
.graph-tip[hidden] { display: none; }
.graph-tip strong { display: block; font: 8px 'Dungeon Pixel', monospace; color: #f2d18a; margin-bottom: 4px; }
.graph-tip p { margin: 0 0 4px; }
.graph-tip small { color: #8fd3b0; }
#hero-builder { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); }
.builder-graph .graph-host { height: 320px; }
#hero-builder .builder-block.builder-graph { display: block; }
#sheet { width: min(1180px, calc(100% - 24px)); height: calc(100% - 150px); max-height: none; display: flex; flex-direction: column; }
.sheet-body { flex: 1; display: grid; grid-template-columns: 210px 1fr; gap: 12px; min-height: 0; }
.sheet-graph { height: 100%; }
.sheet-attributes h4 { margin: 0 0 6px; }
.stat-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; margin: 4px 0; font: 11px ui-monospace, monospace; color: #b9c2ad; }
.stat-row b { color: #f2d18a; }
.sheet-points { color: #8fd3b0; }
.sheet-hint { margin: 8px 0 0; font: 9px ui-monospace, monospace; color: #7f8c79; }
.hotbar-slot .atlas-icon { margin-top: 4px; }
@media (max-width: 900px) { #hero-builder { grid-template-columns: 1fr; } .sheet-body { grid-template-columns: 1fr; } .sheet-attributes { display: none; } }

.hero-card[data-locked='true'] { opacity: .5; filter: grayscale(.8); cursor: not-allowed; }
.hero-card[data-locked='true'] canvas { filter: brightness(.4); }
.hero-lock { margin-top: 6px !important; color: #e8c96a !important; }

#boss-banner { position: absolute; z-index: 4; left: 0; right: 0; top: 36%; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; opacity: 0; }
#boss-banner[hidden] { display: none; }
#boss-banner.showing { animation: boss-banner 4.2s ease-in-out forwards; }
#boss-banner strong { font: 28px/1.2 'Dungeon Pixel', monospace; color: #f3d27a; letter-spacing: 3px; text-shadow: 0 0 24px #a01818, 3px 3px #000; }
#boss-banner span { padding: 6px 40px 10px; font: 18px 'Dungeon Pixel', monospace; color: #e84a3a; letter-spacing: 10px; text-transform: uppercase; text-shadow: 2px 2px #000; background: linear-gradient(90deg, transparent, #000a 20%, #000a 80%, transparent); border-top: 1px solid #f3d27a66; }
@keyframes boss-banner { 0% { opacity: 0; transform: scale(1.15); } 15% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 760px) { #boss-banner strong { font-size: 16px; } #boss-banner span { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { #boss-banner.showing { animation: none; opacity: 1; } }

/* Quest tracker, under the minimap. */
/* Roster, then quests, stacked under the minimap (drawn on the canvas: top 56 px, 120 px tall; top 154 px when narrow). */
#side-stack { position: absolute; z-index: 3; top: 190px; right: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
#side-stack > * { pointer-events: auto; }
@media (max-width: 760px) { #side-stack { top: 262px; } }
#quests { margin: 0; padding: 8px 10px; list-style: none; background: #0b0a08d8; border-left: 2px solid #c9a65a; font: 8px/1.7 'Dungeon Pixel', monospace; color: #d9cfb4; }
#quests[hidden] { display: none; }
#roster { min-width: 130px; margin: 0; padding: 6px 8px; list-style: none; background: #0b0a08b0; border-left: 2px solid #5f6b55; font: 8px/1.9 'Dungeon Pixel', monospace; color: #c5ceba; }
#roster[hidden] { display: none; }
#roster li { display: flex; gap: 8px; justify-content: space-between; }
#roster li::before { content: '■'; color: var(--class); }
#roster strong { flex: 1; font-weight: 400; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#roster span { color: #85917c; }
#roster li[data-you='true'] strong { color: #f2cf78; }
#roster li[data-resting='true'] { opacity: .6; }
#roster li[data-resting='true'] span::before { content: 'z '; color: #cfd8e6; }
#roster li[data-fallen='true'] { opacity: .45; text-decoration: line-through; }
#quests span { color: #f2cf78; }
#quests strong { font-weight: 400; color: #efe6d0; }
#quests li[data-done='true'] strong { color: #9fd39a; }

#level-up { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 0 0 10px; padding: 7px 8px; font: 8px 'Dungeon Pixel', monospace; color: #2a1a04; background: linear-gradient(#f6dc8e, #d9a944); border: 1px solid #fff1bf; box-shadow: 0 0 12px #f2c75a66; cursor: pointer; animation: level-glow 1.6s ease-in-out infinite; }
#level-up[hidden] { display: none; }
#level-up strong { font-weight: 400; font-size: 10px; }
#level-up small { font-size: 7px; }
#level-up kbd { padding: 1px 4px; font: inherit; background: #2a1a0422; border: 1px solid #2a1a0455; }
#level-up:hover, #level-up:focus-visible { filter: brightness(1.1); outline: none; }
@keyframes level-glow { 50% { box-shadow: 0 0 22px #f2c75aaa; } }
@media (prefers-reduced-motion: reduce) { #level-up { animation: none; } }

/* ---- One panel on the left: everything but the world itself. The game view fills the rest. ---- */
:root { --sidebar: 320px; }
main { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.viewport { position: relative; inset: auto; grid-column: 2; grid-row: 1; height: 100vh; height: 100dvh; }
#sidebar { grid-column: 1; grid-row: 1; height: 100vh; height: 100dvh; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 10px; padding: 10px; background: #0b100c; border-right: 1px solid #2c362b; scrollbar-width: thin; scrollbar-color: #354032 transparent; }
#sidebar header, #sidebar .hud, #sidebar .floor-tag, #sidebar #side-stack, #sidebar #character-panel, #sidebar #hotbar, #sidebar #message-log, #sidebar footer, #sidebar .credit {
  position: static; inset: auto; top: auto; left: auto; right: auto; bottom: auto; transform: none; width: auto; max-width: none; max-height: none; margin: 0; z-index: auto; }
#sidebar header { pointer-events: auto; flex-wrap: wrap; }
#sidebar .header-actions { flex-wrap: wrap; }
#sidebar .hud { gap: 10px 14px; padding: 10px; }
#sidebar .floor-tag { padding: 0 2px; }
#sidebar .map-block { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; background: #0e140e; border: 1px solid #2c362b; }
#minimap { width: 276px; height: auto; max-width: 100%; image-rendering: pixelated; }
#sidebar .credit { text-align: center; max-width: none; }
#sidebar #side-stack { align-items: stretch; }
#sidebar #side-stack:not(:has(> :not([hidden]))) { display: none; }
#sidebar #character-panel { overflow: visible; }
#sidebar #hotbar { justify-content: center; }
#sidebar #message-log { width: auto; }
#sidebar #message-log:empty { display: none; }
#sidebar footer { padding: 8px; font-size: 11px; }
#sidebar .controls { row-gap: 2px; }
/* Pop-ups that used to sit beside the left HUD now sit just right of the panel. */
#inventory, #inventory.looting { left: calc(var(--sidebar) + 12px); right: auto; top: 12px; max-height: calc(100% - 24px); }
#loot-log { left: calc(var(--sidebar) + (100% - var(--sidebar)) / 2); }
@media (max-width: 760px) {
  :root { --sidebar: 240px; }
  #minimap { width: 100%; }
  #inventory, #inventory.looting { left: calc(var(--sidebar) + 8px); right: 8px; width: auto; }
}
/* The torch stat doubles as the button that lights or snuffs a torch. */
#torch-stat { pointer-events: auto; cursor: pointer; }
#torch-stat:hover { background: #1c241a; outline: 1px solid #c49d5e66; }

/* Where am I: location, room and player counts, top-right of the game view. */
#where { position: absolute; z-index: 3; top: 12px; right: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; padding: 9px 12px; background: #0b0d0acc; border-right: 2px solid #c9a65a; pointer-events: none; text-align: right; text-shadow: 1px 1px #000; }
#where small { font: 8px 'Dungeon Pixel', monospace; letter-spacing: 2px; color: #b8a77e; text-transform: uppercase; }
#where strong { font: 12px 'Dungeon Pixel', monospace; font-weight: 400; color: #efe3c4; }
#where span { font: 12px/1.3 ui-monospace, monospace; color: #c5ceba; }
#where span:empty { display: none; }
#where #where-players { color: #f2cf78; }
@media (max-width: 760px) { #where strong { font-size: 10px; } #where span { font-size: 11px; } }

/* Stats bar over the top of the game view (left of the location panel). */
.viewport > .hud { position: absolute; z-index: 3; top: 12px; left: 14px; right: auto; max-width: calc(100% - 320px); margin: 0; padding: 8px 12px; gap: 8px 16px; flex-wrap: wrap; background: #0b0d0ad9; border: 1px solid #354032; }
@media (max-width: 760px) { .viewport > .hud { max-width: calc(100% - 28px); } #where { top: auto; bottom: 12px; } }

/* Casual: no wall of key bindings. Keys still work; tooltips and the chalk tutorials teach the basics. */
#sidebar footer { display: none; }
#chalk-stat { padding: 0; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
#chalk-stat:hover:not(:disabled) { color: #f2cf78; }
#chalk-stat:disabled { opacity: .45; cursor: default; }
/* The title and items/fullscreen/respawn buttons are gone: I, F and the death screen's respawn still work. */
#sidebar header { display: none; }
/* Keep the scrollbar's space reserved so the panel never flips between widths (it made the minimap and text jitter),
   and keep the map a fixed size. */
#sidebar { scrollbar-gutter: stable; }
#minimap { flex: none; }
#sidebar > * { flex-shrink: 0; }
/* Top-right corner of the view: where you are, the map, then the message log, stacked. */
#corner { position: absolute; z-index: 3; top: 12px; right: 14px; width: max(22%, 260px); display: flex; flex-direction: column; align-items: stretch; gap: 6px; pointer-events: none; }
#corner #where { position: static; align-items: flex-end; }
#corner .map-block { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px; background: #0b0d0acc; border: 1px solid #2c362b; pointer-events: auto; }
#corner #minimap { width: 100%; height: auto; image-rendering: pixelated; }
#corner .credit { position: static; margin: 0; max-width: none; text-align: center; font-size: 9px; }
#corner #message-log { position: static; width: auto; }
#corner #message-log li { font-size: 11px; padding: 4px 8px; }
#corner #message-log:empty { display: none; }
@media (max-width: 760px) { #corner { width: 170px; } #corner #where { position: static; } }
#message-log li[data-loot='true'] { border-left-color: #8fa37f; color: #d9e3c8; }
#message-log li[data-rank='1'] { color: #9ec2aa; }
#message-log li[data-rank='2'] { color: #d8b976; }
#message-log li[data-rank='3'] { color: #d4a3f1; }
#character-panel #record { margin: 6px 0 0; text-align: center; color: #b8a77e; font-size: 9px; }
#character-panel #record:empty, #hero-record:empty { display: none; }
#hero-record { margin: -4px 0 10px; text-align: center; font: 10px ui-monospace, monospace; color: #b8a77e; }
.chalk-cell { border-color: #8c8577; }

/* ===== Monochrome UI =====
   Flat black panels, thin grey rules, white text. No gradients, glows or colour-coded labels.
   Colour is left to the game world, item sprites and the one warning that matters (low health). */
:root { --ink: #e6e6e6; --dim: #8c8c8c; --faint: #5a5a5a; --rule: #333; --panel: #000; --panel-soft: #0b0b0b;
  --accent-equip: var(--ink); --accent-loot: var(--ink); --accent-magic: var(--ink); --accent-armor: var(--ink); --accent-danger: #d23c3c;
  color: var(--ink); background: #000; }
.viewport, #sidebar { background: #000; }
#sidebar { border-right: 1px solid var(--rule); }
button { background: var(--panel); border: 1px solid #444; color: var(--ink); }
button:hover { background: #1a1a1a; }
button:focus-visible { outline: 1px solid #fff; }
.label, small { color: var(--dim) !important; }
[data-tip] { cursor: default; }

/* Stats bar over the view */
.viewport > .hud, .hud { background: var(--panel); border: 1px solid var(--rule); box-shadow: none; gap: 20px; padding: 10px 14px; }
.hud strong, .hud .vital, .vital .label, .gold-stat strong, .potion-stat strong, .gold-stat .stat-icon, .potion-stat .stat-icon { color: var(--ink) !important; text-shadow: none; }
.hud strong { font-size: 12px; }
.hud .vital strong { font-size: 13px; }
.health-track { height: 6px; border: 1px solid #555; background: #111; }
#health-fill { background: #e6e6e6; box-shadow: none; }
.vital[data-low="true"] { background: none; box-shadow: none; }
.vital[data-low="true"] #health-fill { background: var(--accent-danger); }
.mana-track, .xp-track, .load-track { background: #111; border: 1px solid #444; }
#mana-fill, #xp-fill, #load-fill { background: #bdbdbd !important; }
.load[data-state='overloaded'] #load-fill { background: var(--accent-danger) !important; }
.atlas-icon { filter: grayscale(1) brightness(1.15); }
#torch-stat[hidden] { display: none !important; }
#torch-stat[data-prompt='true'] strong { animation: torch-prompt 1.2s steps(2) infinite; }
@keyframes torch-prompt { 50% { opacity: .45; } }

/* Character panel and paper doll */
#character-panel, #sidebar #character-panel { background: var(--panel); border: 1px solid var(--rule); box-shadow: none; }
#character-panel h2 { color: var(--ink); }
.doll-figure { background: var(--panel-soft); border: 1px solid var(--rule); box-shadow: none; }
.doll-figure::after { content: none; }
.gear-slot { background: var(--panel-soft); border: 1px solid var(--rule); box-shadow: none; min-height: 64px; }
.gear-slot:hover, .gear-slot:focus-visible { background: #161616; border-color: #777; }
.gear-slot[data-equipped="true"] { background: var(--panel-soft); border-color: #888; }
.gear-slot[data-available="true"] { border-color: #bbb; }
.gear-slot small { color: var(--dim) !important; }
.gear-icon { font-size: 24px; color: var(--faint); }
.gear-slot .gear-icon[style*='background-image'] { transform: scale(1.3); }
.character-stats, .character-stats strong, #character-armor, #character-panel p, #character-panel #weapon-timer, #character-panel #tools, #tools .tool strong, #character-panel #record { color: var(--ink) !important; }
#character-panel p, #character-panel #record { color: var(--dim) !important; }
#tools .tool strong { font-size: 12px; }
#level-up { background: var(--ink); color: #000; border: 0; box-shadow: none; }

/* Hotbar */
.hotbar-slot { width: 58px; height: 58px; background: var(--panel); border: 1px solid var(--rule); box-shadow: none; }
.hotbar-slot[data-ready='true'] { border-color: #aaa; box-shadow: none; }
.hotbar-slot small, .hotbar-slot kbd, .hotbar-slot .skill-glyph { color: var(--ink); }

/* Corner: location, map, log */
#where, #corner #where { background: var(--panel); border: 1px solid var(--rule); border-right: 1px solid var(--rule); text-shadow: none; }
#where small, #where strong, #where span, #where #where-players { color: var(--ink) !important; letter-spacing: 1px; }
#where small, #where span { color: var(--dim) !important; }
#corner .map-block { background: var(--panel); border: 1px solid var(--rule); }
#corner .credit, .credit { color: var(--faint); text-shadow: none; }
#message-log li { background: var(--panel); border-left: 1px solid #555; color: var(--ink); text-shadow: none; }
#message-log li strong { color: #fff; }
#message-log li[data-age='1'], #message-log li[data-age='2'], #message-log li:not([data-age='0']):not([data-age='1']):not([data-age='2']) { border-left-color: var(--rule); }
#message-log li[data-loot='true'], #message-log li[data-rank] { color: var(--ink); border-left-color: #999; }

/* Roster, quests, tooltips */
#roster, #quests { background: var(--panel); border-left: 1px solid #555; color: var(--ink); }
#roster li::before { color: var(--dim); }
#roster li[data-you='true'] strong { color: #fff; }
#roster span { color: var(--dim); }
#ui-tip { background: var(--panel); border: 1px solid #666; box-shadow: none; color: var(--ink); }
#ui-tip kbd { border-color: #666; color: #fff; }

/* Inventory, dialogue, start screen */
#inventory { background: var(--panel); border: 1px solid var(--rule); box-shadow: none; }
.inventory-cell { background: var(--panel-soft); border: 1px solid var(--rule); color: var(--faint); }
.inventory-cell[aria-pressed="true"] { border-color: #fff; box-shadow: none; }
.inventory-cell .item-icon { transform: scale(1.3); }
.bag-filters button[aria-pressed="true"] { background: #1a1a1a; border-color: #fff; color: #fff; }
#dialogue { background: var(--panel); border: 1px solid #555; box-shadow: none; }
#dialogue-portrait { background: var(--panel-soft); }
#hero-picker { background: #000; }
.hero-card { background: var(--panel); border-color: var(--rule); box-shadow: none; }
.hero-card[aria-checked="true"] { border-color: #fff; box-shadow: none; }
.hero-mode { background: var(--panel); }
.hero-mode[aria-checked="true"] { border-color: #fff; }
#hero-record, #area-banner small, #area-banner strong { color: var(--ink); text-shadow: none; }
canvas:focus-visible { outline: none; }
.viewport { outline: none; border: 0; }

/* Coloured icons on a monochrome UI; borders only on the stats bar and the skill bar, which sits right under it. */
.atlas-icon { filter: none; }
#topbar { position: absolute; z-index: 3; top: 12px; left: 14px; max-width: calc(100% - 300px); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; }
#topbar > .hud, .viewport > #topbar > .hud { position: static; max-width: none; margin: 0; }
#topbar #hotbar { position: static; transform: none; left: auto; bottom: auto; display: flex; gap: 6px; pointer-events: auto; }
#topbar #hotbar:empty { display: none; }
.hotbar-slot { border: 1px solid var(--rule); }
#character-panel, #sidebar #character-panel, .doll-figure, .gear-slot, .gear-slot[data-equipped="true"], .gear-slot:hover, .gear-slot:focus-visible,
#where, #corner #where, #corner .map-block, #message-log li, #roster, #quests, #sidebar, .inventory-cell, #inventory, #dialogue { border: 0 !important; }
.gear-slot[data-available="true"] { outline: 1px dashed #777; outline-offset: -3px; }
.inventory-cell[aria-pressed="true"] { outline: 1px solid #fff; outline-offset: -1px; }
.gear-slot { background: #111; }
.gear-slot:hover, .gear-slot:focus-visible { background: #1c1c1c; }
#corner { align-items: stretch; }
#where, #corner #where { align-items: center; text-align: center; }
#corner .credit { text-align: center; }
@media (max-width: 760px) { #topbar { max-width: calc(100% - 28px); } }
/* A skill that is ready shines: a bright edge, a soft glow and a slow sheen across the slot. */
.hotbar-slot[data-ready='true'] { border-color: #fff; box-shadow: 0 0 10px #ffffff55, inset 0 0 10px #ffffff22; animation: skill-ready 1.8s ease-in-out infinite; }
.hotbar-slot[data-ready='true']::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, #ffffff40 50%, transparent 65%); background-size: 250% 100%; animation: skill-sheen 2.6s linear infinite; pointer-events: none; }
@keyframes skill-ready { 50% { box-shadow: 0 0 16px #ffffff88, inset 0 0 12px #ffffff33; } }
@keyframes skill-sheen { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .hotbar-slot[data-ready='true'], .hotbar-slot[data-ready='true']::after { animation: none; } }

/* Level up: big golden title with a glow and a light burst, then it fades. */
#levelup-banner { position: absolute; z-index: 4; left: 0; right: 0; top: 24%; display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; text-align: center; }
#levelup-banner[hidden] { display: none; }
#levelup-banner strong { position: relative; font: 40px/1.1 'Dungeon Pixel', monospace; font-weight: 400; color: #ffe9a8; letter-spacing: 6px; text-shadow: 0 0 12px #ffcf5a, 0 0 32px #ffb12e, 0 0 64px #ff9a1f99, 3px 3px #000; }
#levelup-banner small { position: relative; font: 11px 'Dungeon Pixel', monospace; color: #fff3cf !important; letter-spacing: 3px; text-shadow: 0 0 10px #ffcf5a, 2px 2px #000; }
#levelup-banner .burst { position: absolute; top: 50%; left: 50%; width: 520px; height: 220px; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, #ffd76a66 0%, #ffb12e22 40%, transparent 70%); }
#levelup-banner.showing { animation: levelup-fade 3.6s ease-out forwards; }
#levelup-banner.showing strong { animation: levelup-pop .6s cubic-bezier(.2, 1.6, .4, 1) both, levelup-glow 1.2s ease-in-out .6s infinite; }
#levelup-banner.showing .burst { animation: levelup-burst 1.4s ease-out both; }
@keyframes levelup-fade { 0% { opacity: 0; } 8% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes levelup-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes levelup-glow { 50% { text-shadow: 0 0 18px #ffe08a, 0 0 46px #ffb12e, 0 0 90px #ff9a1fcc, 3px 3px #000; } }
@keyframes levelup-burst { from { transform: translate(-50%, -50%) scale(.3); opacity: 1; } to { transform: translate(-50%, -50%) scale(1.4); opacity: .55; } }
/* Unspent points: the panel button glows until you spend them. */
#level-up:not([hidden]) { animation: levelup-button 1.6s ease-in-out infinite; }
@keyframes levelup-button { 50% { box-shadow: 0 0 14px #ffd76a, 0 0 4px #fff inset; background: #fff3cf; } }
@media (prefers-reduced-motion: reduce) { #levelup-banner.showing, #levelup-banner.showing strong, #levelup-banner.showing .burst, #level-up:not([hidden]) { animation: none; } }

/* XP sits right under the health bar. */
.hud .vital { padding-bottom: 18px; }
.vital .xp-track { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; margin: 0; background: #111; border: 1px solid #444; }
.vital .health-track { bottom: 7px; }
.vital #xp-fill { background: #d9b54a !important; }

/* Health on top, then a thin XP bar with the level beside it. */
.hud .vital { flex-wrap: wrap; padding-bottom: 0; row-gap: 4px; min-width: 150px; }
.hud .vital .health-track { position: static; flex: 0 0 100%; order: 3; }
.hud .vital .xp-row { position: static; flex: 0 0 100%; order: 4; display: flex; align-items: center; gap: 6px; }
.vital .xp-row .xp-track { position: static; flex: 1; height: 4px; margin: 0; }
.xp-level { font: 7px 'Dungeon Pixel', monospace; color: var(--dim); white-space: nowrap; }
.xp-level strong { font-size: 9px !important; color: #e8c766 !important; }
/* Stats table in the character panel. */
#stat-table { width: 100%; margin: 12px 0; border-collapse: collapse; font: 11px ui-monospace, monospace; }
#stat-table th { padding: 4px 6px 4px 0; text-align: left; font: 7px 'Dungeon Pixel', monospace; color: var(--dim); font-weight: 400; white-space: nowrap; }
#stat-table td { padding: 4px 10px 4px 0; text-align: right; color: var(--ink); white-space: nowrap; }
#stat-table td + th { padding-left: 10px; border-left: 1px solid #222; }
#stat-table tr + tr th, #stat-table tr + tr td { border-top: 1px solid #161616; }
#stat-table strong { font-weight: 400; color: #fff; }
#stat-table .atlas-icon { margin-right: 4px; vertical-align: -6px; }

/* Item families you wear: lit once the 2-piece bonus is on. */
#sets { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; padding: 0; list-style: none; }
#sets:empty { display: none; }
#sets li { padding: 2px 6px; font: 7px 'Dungeon Pixel', monospace; color: var(--dim); border: 1px solid #333; }
#sets li[data-active='true'] { color: var(--set); border-color: var(--set); box-shadow: 0 0 6px color-mix(in srgb, var(--set) 40%, transparent); }

/* Hotkey hints: a small keycap beside a HUD control (Q potions, T torch, G chalk). */
kbd.hotkey { display: inline-block; margin-left: 6px; padding: 0 4px; min-width: 9px; text-align: center; border: 1px solid #ffffff55; border-bottom-width: 2px; border-radius: 2px;
  font: 7px/12px 'Dungeon Pixel', monospace; color: #e8e2d0; background: #ffffff10; vertical-align: middle; }
kbd.hotkey::before, kbd.hotkey::after { content: none; }
#potion-stat { cursor: pointer; }

/* Gold, torch and chalk stacks in the bag. */
.resource-cell.passive { cursor: default; }

/* Builder: the attribute label takes the width it needs (it used to spill over the hint beside it). */
.builder-row { grid-template-columns: max-content minmax(0, 1fr) auto 22px auto; }
.builder-row strong { white-space: nowrap; }
.builder-hint { line-height: 1.35; }
/* Builder: the look picker (figures from rogues.png at 1.5×). */
.builder-looks { grid-column: 1 / -1; }
.look-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.look-cell { width: 48px; height: 48px; padding: 0; border: 1px solid #3a4636; background: #0e140e url('32rogues/rogues.png') no-repeat; background-size: 336px 336px; image-rendering: pixelated; cursor: pointer; }
.look-cell[aria-pressed='true'] { border-color: #f2cf78; box-shadow: 0 0 8px #f2cf7866; }

/* The countdown to midnight, in the main stat bar. */
#doom-clock { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 7px; row-gap: 3px; align-items: center; padding: 0 10px; border-left: 1px solid var(--rule, #333); border-right: 1px solid var(--rule, #333); }
#doom-clock .doom-icon { grid-row: 1 / 3; font-size: 18px; line-height: 1; }
#doom-clock .doom-label { grid-column: 2; font: 7px 'Dungeon Pixel', monospace; color: #9a9486; letter-spacing: .06em; white-space: nowrap; }
#doom-clock #doom-time { grid-column: 2; }
#doom-time { font: 15px 'Dungeon Pixel', monospace; color: #f2ead6; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
#doom-clock[data-urgency='soon'] #doom-time { color: #f2a65a; }
#doom-clock[data-urgency='now'] #doom-time { color: #ff5a4a; animation: doom-pulse 1s ease-in-out infinite; }
@keyframes doom-pulse { 50% { opacity: .55; } }

/* Lord Pennant's banner designer. */
#banner-designer { position: absolute; z-index: 7; inset: 0; display: flex; align-items: center; justify-content: center; background: #000000b0; }
#banner-designer[hidden] { display: none; }
.designer-box { display: grid; grid-template-columns: auto 1fr; gap: 14px 22px; width: min(820px, calc(100% - 32px)); padding: 18px 22px; background: #0d0b08f6; border-top: 2px solid #c9a65a; border-bottom: 2px solid #c9a65a; }
.designer-box h3 { grid-column: 1 / -1; margin: 0; font: 11px 'Dungeon Pixel', monospace; color: #f2cf78; letter-spacing: .1em; text-transform: uppercase; }
.designer-preview { width: 192px; height: 192px; image-rendering: pixelated; background: radial-gradient(circle at 50% 40%, #3a3326, #14110b 72%); border: 1px solid #c9a65a88; }
.designer-rows { display: flex; flex-direction: column; gap: 8px; }
.designer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.designer-row > span { width: 64px; font: 8px 'Dungeon Pixel', monospace; color: #b9b29c; }
.designer-choice { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 1px solid #3a4636; background: #14110b; cursor: pointer; }
.designer-choice canvas { width: 24px; height: 24px; image-rendering: pixelated; }
.designer-choice .item-icon { transform: scale(.85); }
.designer-choice[aria-pressed='true'] { outline: 2px solid #f2cf78; outline-offset: 1px; }
.designer-save { grid-column: 1 / -1; display: flex; gap: 8px; }
.designer-save input { flex: 1; padding: 8px 10px; background: #0d0b08; border: 1px solid #6f6249; color: #f0e3c2; font: 12px ui-monospace, monospace; }
.designer-save button { font: 9px 'Dungeon Pixel', monospace; padding: 7px 12px; background: #1a1610; color: #f2dc9a; border: 1px solid #c9a65a88; }
.designer-note { grid-column: 1 / -1; margin: 0; font: 9px ui-monospace, monospace; color: #8f8670; }

/* Wilmot's letters: the writing form, and a letter laid open. */
.letter-form { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.letter-form textarea, .letter-form input { padding: 8px 10px; background: #0d0b08; border: 1px solid #6f6249; color: #f0e3c2; font: 12px/1.5 ui-monospace, monospace; resize: vertical; }
#letter-view { position: absolute; z-index: 7; inset: 0; display: flex; align-items: center; justify-content: center; background: #000000a8; }
#letter-view[hidden] { display: none; }
.letter-paper { width: min(460px, calc(100% - 40px)); padding: 26px 30px 18px; background: linear-gradient(#e9dcb8, #d8c69a); color: #2a2014; box-shadow: 0 10px 40px #000c, inset 0 0 40px #8a6a3a55; font: 14px/1.7 Georgia, 'Times New Roman', serif; }
.letter-to { margin: 0 0 10px; font-style: italic; }
.letter-body { margin: 0 0 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.letter-sign { margin: 0 0 14px; text-align: right; font-style: italic; }
.letter-paper button { font: 9px 'Dungeon Pixel', monospace; padding: 6px 10px; background: #3a2c18; color: #f2e6c8; border: none; cursor: pointer; }

.designer-save .banner-name { flex: 0 0 74px; text-transform: uppercase; letter-spacing: .2em; font: 12px 'Dungeon Pixel', monospace; }

/* The Talk button under an NPC's lines. */
#conversation-options .talk-button { color: #d8cfb4; }

#conversation-log li.old { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#conversation-log li.asked { font-size: 10px; color: #9fc8e8; font-style: italic; }
#conversation-log li.asked.old { color: #6f8798; }

/* Drag and drop: where a dragged item can go lights up. */
.drop-ready { outline: 2px dashed #f2cf78 !important; outline-offset: -2px; }
.inventory-cell[draggable='true'] { cursor: grab; }
body.dragging-item .gear-slot { transition: none; }

/* ===== Tooltip cards (items, skills, stacks): rarity / school colour drives the frame. ===== */
#ui-tip.card { padding: 0; min-width: 230px; max-width: 300px; background: #0b0b0cf7; border: 1px solid color-mix(in srgb, var(--rarity, #888) 60%, #111); box-shadow: 0 0 0 1px #000, 0 10px 28px #000c; font: 11px/1.45 ui-monospace, monospace; color: #d8d4c8; }
.tip-card { --rarity: #c4beae; border-top: 2px solid var(--rarity); }
.tip-head { display: flex; gap: 10px; align-items: center; padding: 9px 11px 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--rarity) 22%, transparent), transparent 85%); }
.tip-icon { flex: none; width: 32px; height: 32px; background-color: #050505; outline: 1px solid color-mix(in srgb, var(--rarity) 70%, #000); box-shadow: 0 0 10px color-mix(in srgb, var(--rarity) 35%, transparent); }
.tip-names { min-width: 0; }
.tip-name { font: 9px/1.5 'Dungeon Pixel', monospace; color: var(--rarity); text-shadow: 0 0 8px color-mix(in srgb, var(--rarity) 40%, transparent); }
.tip-kind { margin-top: 1px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--rarity) 60%, #888); }
.tip-section { padding: 6px 11px; border-top: 1px solid #ffffff12; }
.tip-stat { color: #cfcabd; } .tip-stat b { color: #fff; font-weight: 600; }
.tip-label { margin-bottom: 2px; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #8f897c; }
.tip-up { color: #6fe08a; } .tip-down { color: #ef6a5a; } .tip-gold { color: #e8c766; }
.tip-effect::before { content: '◆ '; font-size: 9px; }
.tip-set .tip-label { color: var(--set); }
.tip-set-on { color: var(--set); } .tip-set-off { color: #6c6a64; }
.tip-note { color: #a29d90; }
.tip-flavor { margin: 4px 0 0; font-style: italic; color: #b9a98a; }
.tip-text { margin: 0; color: #d8d4c8; }
.tip-foot { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 5px 11px; background: #ffffff08; border-top: 1px solid #ffffff12; font-size: 10px; color: #8f897c; }
.tip-foot kbd { padding: 0 4px; border: 1px solid var(--rarity); color: var(--rarity); font: 8px 'Dungeon Pixel', monospace; }
.tip-mana { color: #8fc0ff; }
.tip-hint { padding: 4px 11px 6px; font-size: 10px; color: #6f6a60; }

/* Rarity on cells and slots */
.inventory-cell[data-rarity='fine'], .gear-slot[data-rarity='fine'] { border-color: #6fd27a; box-shadow: inset 0 -3px 0 #6fd27a66; }
.inventory-cell[data-rarity='runed'], .gear-slot[data-rarity='runed'] { border-color: #5aa6ff; box-shadow: inset 0 -3px 0 #5aa6ff66; }
.inventory-cell[data-rarity='enchanted'], .gear-slot[data-rarity='enchanted'] { border-color: #b77cff; box-shadow: inset 0 -3px 0 #b77cff77, inset 0 0 12px #b77cff22; }
.inventory-cell[data-rarity='relic'], .gear-slot[data-rarity='relic'] { border-color: #ff9f3a; box-shadow: inset 0 -3px 0 #ff9f3a88, inset 0 0 14px #ff9f3a2a; }
.inventory-cell[data-rarity][aria-pressed='true'] { outline: 1px solid #fff; outline-offset: -3px; }
.item-rarity { margin-top: 2px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }

/* Skills: colour-coded by school */
.hotbar-slot[data-school] { border-color: color-mix(in srgb, var(--school) 45%, #222); }
.hotbar-slot[data-school]::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--school); opacity: .75; }
.hotbar-slot[data-school][data-ready='true'] { border-color: var(--school); box-shadow: 0 0 10px color-mix(in srgb, var(--school) 35%, transparent), inset 0 0 14px color-mix(in srgb, var(--school) 18%, transparent); }
.hotbar-slot[data-school][data-low-mana='true']::before { opacity: .25; }
.hotbar-slot[data-school] small { color: var(--school); }

/* The coffin's curse: a violet chip in the stat bar while your gold weighs ×3. */
#curse-stat { display: flex; align-items: center; gap: 6px; padding: 0 8px; color: #d8a8ff; border: 1px solid #7a4aa8; background: #2a1438cc; animation: curse-pulse 2.4s ease-in-out infinite; }
#curse-stat[hidden] { display: none; }
#curse-stat .label { color: #c08cff; } #curse-stat strong { color: #f0dcff; font-variant-numeric: tabular-nums; }
#curse-stat .curse-icon { font-size: 15px; }
@keyframes curse-pulse { 50% { box-shadow: 0 0 10px #a060ff66; } }

/* ===== Title screen (title.js) ===== */
#title-screen { --flash: 0; position: fixed; inset: 0; z-index: 100; background: #05060b; cursor: pointer; overflow: hidden; transition: opacity .7s ease; }
#title-screen.leaving { opacity: 0; }
#title-screen .title-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#title-screen .title-words { position: absolute; left: 0; right: 0; top: 9vh; display: grid; justify-items: center; gap: 2.2vh; pointer-events: none; text-align: center; }
#title-screen .title-name { margin: 0; font: clamp(28px, 6.4vw, 92px)/1.1 'Dungeon Pixel', monospace; letter-spacing: .06em; color: #e9e2cf; opacity: 0;
  text-shadow: 0 0 calc(10px + var(--flash) * 40px) rgba(200, 215, 255, calc(.25 + var(--flash) * .7)), 0 4px 0 #3a0b0b, 0 8px 0 #000; }
#title-screen .title-tagline { margin: 0; font: clamp(8px, 1.1vw, 14px) 'Dungeon Pixel', monospace; color: #9c8f84; letter-spacing: .12em; opacity: 0; }
#title-screen .title-prompt { position: fixed; left: 0; right: 0; bottom: 8vh; margin: 0; font: clamp(9px, 1.2vw, 15px) 'Dungeon Pixel', monospace; color: #d8cfb8; letter-spacing: .2em; opacity: 0; text-transform: uppercase; }
#title-screen.struck .title-name { animation: title-burn 1.4s ease-out forwards; }
#title-screen.struck .title-tagline { animation: title-fade 1.6s ease-out .9s forwards; }
#title-screen.struck .title-prompt { animation: title-fade .8s ease-out 2.2s forwards, title-blink 1.6s steps(2, jump-none) 3s infinite; }
@keyframes title-burn { 0% { opacity: 0; transform: scale(1.08); filter: blur(3px) brightness(3); } 12% { opacity: 1; } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes title-fade { to { opacity: 1; } }
@keyframes title-blink { 0% { opacity: 1; } 50% { opacity: .25; } 100% { opacity: 1; } }

/* ===== The throne on the start screen ===== */
#throne { position: relative; display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; margin: 6px auto 14px; max-width: 720px; padding: 10px 14px; border: 1px solid #6b5520; background: linear-gradient(90deg, #2a1f08cc, #0d0c0acc 70%); }
#throne[hidden] { display: none; }
#throne[data-king-day='true'] { border-color: #a02a2a; background: linear-gradient(90deg, #3a0c0ccc, #0d0c0acc 70%); animation: throne-pulse 2.4s ease-in-out infinite; }
@keyframes throne-pulse { 50% { box-shadow: 0 0 18px #c0303055; } }
.throne-doll { width: 96px; height: 112px; image-rendering: pixelated; }
.throne-title { font: 14px/1.5 'Dungeon Pixel', monospace; color: #f2c84b; letter-spacing: .06em; text-shadow: 0 0 10px #f2c84b44; }
.throne-sub { margin-top: 6px; font: 11px/1.5 ui-monospace, monospace; color: #b9ad90; }
.throne-info { align-self: start; width: 26px; height: 26px; padding: 0; border: 1px solid #c9a65a; background: #1a1508; color: #f2c84b; font: 10px 'Dungeon Pixel', monospace; cursor: pointer; }
.throne-info[aria-pressed='true'] { background: #f2c84b; color: #1a1508; }
.throne-build { grid-column: 1 / -1; display: grid; gap: 4px; padding: 8px 10px; border-top: 1px solid #6b552066; font: 11px/1.5 ui-monospace, monospace; color: #d8d1be; }
.throne-build[hidden] { display: none; }
.throne-build strong { color: #c9a65a; font-weight: 600; }
.throne-gear { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.throne-gear .inventory-cell { width: 40px; height: 40px; display: grid; place-items: center; }