:root {
  --bg: #101218; --panel: rgba(16, 18, 26, 0.86); --line: #2c3040; --text: #ecebe6; --dim: #9aa0ad;
  --accent: #f2c53d; --orange: #ef8a2c; --red: #ff5a4a; --green: #5ad45a; --blue: #5aa0ff;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 14px; user-select: none; -webkit-user-select: none; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; image-rendering: pixelated; }
.hidden { display: none !important; }
kbd { display: inline-block; min-width: 1.5em; padding: 1px 5px; border: 1px solid #555b6e; border-bottom-width: 3px; border-radius: 4px; background: #23262f; color: #fff; font: inherit; font-size: 0.85em; text-align: center; line-height: 1.3; }
b { color: #fff; }
button { font-family: var(--mono); }

/* ------------------------------------------------ buttons */
.btn { font-size: 16px; padding: 11px 22px; border-radius: 8px; border: 2px solid #3a3f52; background: #23262f; color: var(--text); cursor: pointer; box-shadow: 0 4px 0 #0b0c10; transition: transform .06s, background .1s; font-weight: bold; }
.btn:hover { background: #2e3240; border-color: #555b70; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #0b0c10; }
.btn.primary { background: var(--orange); border-color: #ffb066; color: #1a0f05; }
.btn.primary:hover { background: #ff9d45; }
.btn.small { font-size: 13px; padding: 6px 12px; box-shadow: 0 3px 0 #0b0c10; }
.btn.tiny { font-size: 12px; padding: 4px 10px; box-shadow: 0 2px 0 #0b0c10; }
.btn.ghost { background: transparent; }
.menu { display: flex; flex-direction: column; gap: 12px; align-items: stretch; margin-top: 18px; }
.menu.row { flex-direction: row; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------ full screens */
#screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; overflow: auto; background: radial-gradient(ellipse at center, rgba(10,12,18,0.35), rgba(5,6,10,0.85)); z-index: 20; padding: 30px; }
.title-wrap { text-align: center; }
.logo { font-size: clamp(56px, 11vw, 128px); font-weight: 900; letter-spacing: 0.06em; line-height: 1; }
.logo.small { font-size: clamp(44px, 7vw, 80px); }
.logo-a { color: #f4f1e6; text-shadow: 0 6px 0 #6b3b12, 0 10px 0 #2a1606, 0 14px 30px rgba(0,0,0,.7); }
.logo-b { color: var(--orange); text-shadow: 0 6px 0 #7a3a0a, 0 10px 0 #2a1606, 0 14px 30px rgba(0,0,0,.7); }
.tagline { margin-top: 18px; font-size: 18px; color: #d8d4c8; text-shadow: 0 2px 4px #000; }
.title-wrap .menu { width: 340px; margin: 34px auto 0; }
.foot { margin-top: 28px; color: var(--dim); text-shadow: 0 2px 4px #000; }

.select-wrap { width: min(1180px, 100%); align-self: flex-start; }
.select-head { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.select-head h2 { margin: 0; font-size: 28px; }
.levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 16px; }
.card { background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; position: relative; transition: transform .1s, border-color .1s; }
.card:hover { transform: translateY(-3px); border-color: var(--orange); }
.card.locked { cursor: not-allowed; filter: grayscale(0.9) brightness(0.6); }
.card.locked:hover { transform: none; border-color: var(--line); }
.card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.num { background: var(--orange); color: #1a0f05; font-weight: 900; border-radius: 6px; padding: 2px 9px; }
.stars { color: var(--accent); letter-spacing: 2px; }
.stars.big { font-size: 44px; letter-spacing: 8px; margin: 10px 0; }
.thumb { width: 100%; height: auto; image-rendering: pixelated; border-radius: 6px; border: 1px solid #000; display: block; }
.card-name { font-weight: bold; font-size: 16px; margin-top: 10px; }
.card-meta { color: var(--dim); font-size: 12px; margin-top: 4px; }
.card-routes { display: flex; align-items: center; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.route-chip { background: #1b1e27; border: 1px solid #333849; border-radius: 6px; padding: 2px; opacity: 0.55; }
.route-chip.done { opacity: 1; border-color: var(--green); background: #173018; }
.chip-icon { width: 24px; height: 24px; image-rendering: pixelated; display: block; }
.route-count { color: var(--dim); font-size: 12px; margin-left: 6px; }
.lock { position: absolute; inset: auto 12px 12px 12px; background: rgba(0,0,0,0.8); padding: 6px; border-radius: 6px; text-align: center; font-size: 12px; }

.brief, .help, .win { width: min(820px, 100%); background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 26px 30px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.win { text-align: center; }
.brief h2, .help h2 { margin: 0 0 8px; font-size: 28px; }
.blurb { color: #d8d4c8; line-height: 1.5; }
.brief-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; text-align: left; }
.brief-grid > div { background: #1b1e27; padding: 8px 10px; border-radius: 8px; }
.brief-grid .dim, .dim { opacity: .5; }
.routes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.route { display: flex; gap: 10px; align-items: flex-start; background: #1b1e27; border: 1px solid #333849; border-radius: 10px; padding: 10px; }
.route.done { border-color: var(--green); }
.route img { width: 40px; height: 40px; image-rendering: pixelated; flex: none; }
.small { font-size: 12px; color: var(--dim); line-height: 1.45; margin-top: 2px; }
.warn { color: #ffb066; }
.good { color: var(--green); font-weight: bold; }
.err { color: var(--red); margin: 8px 0; }
.help p { line-height: 1.5; color: #d8d4c8; }
.help-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.help-text h3 { margin: 10px 0 2px; color: var(--accent); font-size: 15px; }
.help-text p { margin: 0 0 6px; font-size: 13px; }
table.keys { border-collapse: collapse; width: 100%; }
table.keys td { padding: 5px 6px; border-bottom: 1px solid #262a36; vertical-align: top; font-size: 13px; }
table.keys td:first-child { white-space: nowrap; }
.settings .set-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #262a36; font-size: 16px; }
.settings input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--orange); }
.settings input[type=range] { width: 220px; accent-color: var(--orange); }

/* ------------------------------------------------ HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud .panel, #hud button, #hotbar, #tip { pointer-events: auto; }
.panel { background: var(--panel); border: 2px solid var(--line); border-radius: 10px; padding: 10px 12px; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
#hud-tl { position: absolute; top: 12px; left: 12px; min-width: 250px; max-width: 330px; }
#clock { font-size: 22px; font-weight: 900; color: #fff; }
#routine { font-size: 16px; font-weight: bold; margin-top: 4px; color: var(--accent); }
#routine.req { color: var(--red); animation: pulse 1s infinite; }
#routine.ok { color: var(--green); }
#routine-sub { font-size: 12px; color: var(--dim); margin-top: 2px; }
@keyframes pulse { 50% { opacity: .55; } }
#hud-stats { position: absolute; top: 112px; left: 12px; width: 250px; }
.bar { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; font-size: 12px; }
.bar .lbl { width: 36px; color: var(--dim); font-weight: bold; }
.bar .track { flex: 1; height: 12px; background: #0b0c10; border: 1px solid #333849; border-radius: 6px; overflow: hidden; }
.bar .fill { height: 100%; transition: width .15s; }
.bar .val { width: 28px; text-align: right; }
#bar-hp .fill { background: linear-gradient(#ff7a6a, #d8433a); }
#bar-en .fill { background: linear-gradient(#7fe07f, #3fa83f); }
#bar-heat .fill { background: linear-gradient(#ffcf5a, #ff7a2a); }
#bar-heat.hot .fill { background: linear-gradient(#ff6a5a, #c01010); animation: pulse .6s infinite; }
.statrow { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12px; color: var(--dim); }
#money { color: var(--accent); font-weight: bold; font-size: 14px; }
#hud-tr { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
#minimap { width: 240px; height: 170px; border: 2px solid var(--line); border-radius: 10px; background: #0b0c10; image-rendering: pixelated; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
#hud-buttons { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; max-width: 300px; }
#hud-buttons button { background: var(--panel); border: 2px solid var(--line); color: var(--text); border-radius: 8px; padding: 5px 8px; cursor: pointer; font-size: 12px; }
#hud-buttons button:hover { border-color: var(--orange); }
#hud-buttons kbd { font-size: 10px; padding: 0 3px; border-bottom-width: 2px; }
#location { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: rgba(10,12,18,.7); padding: 5px 14px; border-radius: 20px; font-size: 13px; font-weight: bold; letter-spacing: .05em; }
#location.restricted { color: #fff; background: rgba(170, 30, 30, .85); }
#toasts { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(560px, 60vw); }
.toast { background: rgba(16,18,26,.92); border-left: 4px solid var(--blue); padding: 8px 14px; border-radius: 6px; font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,.5); transition: opacity .8s; text-align: center; }
.toast.good { border-color: var(--green); }
.toast.bad { border-color: var(--red); color: #ffd6d0; }
.toast.warn { border-color: var(--accent); color: #fff2c8; }
.toast.fade { opacity: 0; }
#tip { position: absolute; left: 12px; bottom: 20px; width: 340px; font-size: 13px; line-height: 1.5; border-color: #4a5470; }
.tip-title { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; font-weight: bold; }
.tip-btns { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
#prompt { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; gap: 10px; }
#prompt span { background: rgba(10,12,18,.88); padding: 7px 12px; border-radius: 8px; font-size: 14px; white-space: nowrap; border: 1px solid #333849; }
#prompt span.illegal { border-color: #ff8a3a; color: #ffd2b0; }
#prompt i { color: var(--dim); font-style: normal; font-size: 12px; }
#hotbar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 6px; background: var(--panel); padding: 8px; border: 2px solid var(--line); border-radius: 12px; }
.slot { width: 64px; height: 64px; background: #1b1e27; border: 2px solid #333849; border-radius: 8px; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.slot:hover { border-color: #6a7090; }
.slot.sel { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(242,197,61,.35), inset 0 0 12px rgba(242,197,61,.2); }
.slot .icon { width: 44px; height: 44px; image-rendering: pixelated; }
.slot .key { position: absolute; top: 2px; left: 4px; font-size: 10px; color: var(--dim); }
.slot .contra { position: absolute; top: 1px; right: 4px; color: #ff7a6a; font-weight: 900; font-size: 12px; }
.slot .dur { position: absolute; bottom: 4px; left: 6px; right: 6px; height: 4px; background: #0b0c10; border-radius: 2px; overflow: hidden; }
.slot .dur > div { height: 100%; background: var(--green); }
.slot.outfit { margin-left: 10px; border-style: dashed; }

/* ------------------------------------------------ modals */
#modal { position: fixed; inset: 0; z-index: 15; display: flex; align-items: center; justify-content: center; background: rgba(5,6,10,.45); }
.mpanel { width: min(560px, 94vw); max-height: 90vh; display: flex; flex-direction: column; background: #141720; border: 2px solid #3a3f52; border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.7); }
.mpanel.wide { width: min(940px, 96vw); }
.mhead { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 2px solid #262a36; font-size: 18px; font-weight: bold; }
.mhead .x { background: none; border: none; color: var(--dim); font-size: 20px; cursor: pointer; }
.mhead .x:hover { color: #fff; }
.mbody { padding: 14px 16px; overflow: auto; }
.sub { color: var(--dim); font-size: 12px; margin: 8px 0 6px; }
.hint { color: #666c7c; font-size: 11px; text-align: center; margin-top: 12px; }
.warnbar { background: #3a1a14; border: 1px solid #7a3020; color: #ffc0b0; padding: 6px 10px; border-radius: 6px; font-size: 12px; }
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cell { background: #1b1e27; border: 2px solid #333849; border-radius: 8px; height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; padding: 2px; }
.cell:hover { border-color: var(--accent); }
.cell.empty { cursor: default; opacity: .4; }
.cell.empty:hover { border-color: #333849; }
.cell .icon { width: 40px; height: 40px; image-rendering: pixelated; }
.cell .nm { font-size: 9.5px; color: var(--dim); text-align: center; line-height: 1.1; margin-top: 2px; }
.quote { font-style: italic; color: #d8d4c8; margin-bottom: 6px; }
.money { color: var(--accent); font-weight: bold; margin-bottom: 8px; }
.shop-row, .favor { display: flex; align-items: center; gap: 10px; background: #1b1e27; border: 1px solid #333849; border-radius: 8px; padding: 8px; margin-bottom: 6px; }
.favor { border-color: #7a6a20; background: #24210f; margin-top: 10px; }
.shop-row .icon, .favor .icon { width: 40px; height: 40px; image-rendering: pixelated; }
.grow { flex: 1; }
.recipes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.recipe { background: #1b1e27; border: 2px solid #2c3040; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.recipe.ready { border-color: var(--green); background: #16241a; }
.r-out { display: flex; gap: 8px; align-items: center; }
.r-out .icon { width: 40px; height: 40px; image-rendering: pixelated; }
.r-in { display: flex; flex-wrap: wrap; gap: 4px; }
.ing { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; background: #12141b; border: 1px solid #3a2a2a; color: #e0a0a0; border-radius: 5px; padding: 2px 6px 2px 2px; }
.ing.have { border-color: #2a5a2a; color: #a8e8a8; }
.ing .icon { width: 20px; height: 20px; image-rendering: pixelated; }
.r-act { display: flex; justify-content: space-between; align-items: center; }
.int { font-size: 12px; color: var(--green); }
.int.low { color: var(--red); }
.bigmap { width: 100%; height: auto; image-rendering: pixelated; border-radius: 8px; background: #0b0c10; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--dim); }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -2px; border-radius: 3px; }
.pause .menu { margin: 6px 0; }
.busted .mhead { color: var(--red); font-size: 22px; }
#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 30; }
#flash.go { animation: flash 1.2s ease-out; }
@keyframes flash { 0% { opacity: .9; } 100% { opacity: 0; } }

@media (max-height: 760px) {
  #hud-stats { top: 104px; }
  .slot { width: 54px; height: 54px; }
  .slot .icon { width: 36px; height: 36px; }
  #prompt { bottom: 84px; }
  #minimap { width: 200px; height: 140px; }
}

#event-line { font-size: 12px; color: #ffd27a; margin-top: 6px; line-height: 1.35; }
#task-line { font-size: 12px; color: var(--dim); margin-top: 4px; }
#task-line b { color: var(--green); }
#banner { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); background: #b0101a; color: #fff; font-weight: 900; font-size: 20px; letter-spacing: .2em; padding: 6px 22px; border-radius: 8px; animation: pulse .5s infinite; box-shadow: 0 0 30px rgba(255,0,0,.6); }
#banner + #toasts, #banner:not(.hidden) ~ #toasts { top: 92px; }
.tasks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 14px; }
.task { background: #1b1e27; border: 1px solid #333849; border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.task.done { border-color: var(--green); background: #16241a; }
.task .small { margin-top: 4px; }
.today { background: #2a2410; border: 1px solid #6a5a20; border-radius: 8px; padding: 8px 12px; color: #ffe2a0; margin-bottom: 10px; font-size: 13px; }
.achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 12px; }
.ach { display: flex; gap: 10px; align-items: center; background: #1b1e27; border: 1px solid #333849; border-radius: 10px; padding: 10px; opacity: .55; }
.ach.on { opacity: 1; border-color: var(--accent); background: #262011; }
.ach .trophy { font-size: 26px; filter: grayscale(1); }
.ach.on .trophy { filter: none; }
.help.wide { width: min(1000px, 100%); }
.feat { display: inline-block; font-size: 11px; background: #23262f; border: 1px solid #3a3f52; border-radius: 5px; padding: 1px 6px; margin: 4px 4px 0 0; color: #d8d4c8; }

#sick { position: absolute; bottom: 140px; left: 50%; transform: translateX(-50%); background: rgba(40,90,20,.92); color: #e8ffd0; font-weight: 900; padding: 7px 16px; border-radius: 8px; border: 2px solid #8fd34a; animation: pulse 1s infinite; white-space: nowrap; }
.win.dead { border-color: #7a2020; }
.skull { font-size: 72px; margin: 6px 0; }
.slot.belly { margin-left: 4px; }

.inp { background: #1b1e27; border: 2px solid #3a3f52; border-radius: 8px; color: #fff; padding: 9px 12px; font: inherit; font-size: 15px; width: 100%; margin: 8px 0; }
.inp.code { font-size: 24px; letter-spacing: .3em; text-transform: uppercase; text-align: center; }
.mp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.mp-cols .route > div { width: 100%; }
.room-code { font-size: 56px; font-weight: 900; letter-spacing: .3em; color: var(--accent); text-align: center; margin: 10px 0; }
.mp-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.mp-member { background: #1b1e27; border: 1px solid #333849; border-radius: 8px; padding: 6px 12px; }
.wait { align-self: center; }
.notice { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #3a1a14; border: 1px solid #7a3020; color: #ffc0b0; padding: 10px 16px; border-radius: 8px; z-index: 40; }
#mp-badge { position: absolute; top: 236px; right: 12px; background: rgba(10,40,60,.85); border: 2px solid #2a6a8a; color: #9fe6ff; padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: bold; }