:root {
  --ink: #0c0f14;
  --ink-2: #121722;
  --panel: #161c27;
  --panel-2: #1c2331;
  --line: #38415a;
  --gold: #d8b878;
  --gold-dim: #9a8050;
  --paper: #ece4d2;
  --muted: #99a0ae;
  --green: #8ac07a;
  --red: #d97b6c;
  --blue: #7fa8d9;
  --violet: #b58fd9;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: #05070b;
  overflow: hidden;
  color: var(--paper);
  font-family: 'Courier New', 'Consolas', monospace;
  -webkit-font-smoothing: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Frame covers the window so the canvas and UI fill the screen (캔버스와 UI가 화면을 꽉 채우도록 프레임이 창을 덮는다) */
#frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  --s: 3;
  /* Rectangle of the scaled picture, filled in by fitCanvas (fitCanvas가 채우는 그림 영역) */
  --vx: 0px;
  --vy: 0px;
  --vw: 100vw;
  --vh: 100vh;
}

#game {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #0b0e14;
}

#vignette {
  position: absolute;
  left: var(--vx);
  top: var(--vy);
  width: var(--vw);
  height: var(--vh);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(0, 0, 0, 0) 42%, rgba(4, 6, 10, 0.55) 100%),
    linear-gradient(rgba(4, 6, 10, 0.28), rgba(4, 6, 10, 0) 18%, rgba(4, 6, 10, 0) 82%, rgba(4, 6, 10, 0.34));
  z-index: 2;
}

#ui {
  position: absolute;
  inset: 0;
  z-index: 3;
  font-size: calc(6px * var(--s));
  line-height: 1.45;
  color: var(--paper);
  pointer-events: none;
  user-select: none;
}

#ui button,
#ui canvas,
#ui input {
  pointer-events: auto;
}

#hud {
  position: absolute;
  left: var(--vx);
  top: var(--vy);
  width: var(--vw);
  height: var(--vh);
  overflow: hidden;
}

/* ---------- vitals ---------- */
.hud-left {
  position: absolute;
  top: 0.9em;
  left: 0.9em;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
}

.vitals {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.45em 0.8em 0.45em 0.45em;
  background: linear-gradient(180deg, rgba(22, 28, 39, 0.95), rgba(13, 17, 24, 0.95));
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(216, 184, 120, 0.14), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.portrait {
  width: 2.8em;
  height: 2.8em;
  flex: none;
  border: 1px solid var(--gold-dim);
  background: #0f131b center/contain no-repeat;
  image-rendering: pixelated;
}

.vitals-main {
  min-width: 11.5em;
}

.vitals-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 0.25em;
}

.hud-name {
  font-size: 0.82em;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.hud-level {
  font-size: 0.8em;
  color: var(--gold);
  letter-spacing: 0.06em;
}

.bar {
  position: relative;
  height: 1.05em;
  background: #0a0d12;
  border: 1px solid #2b3344;
  overflow: hidden;
}

.bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  display: block;
  transition: width 0.16s linear;
}

.bar.hp i {
  background: linear-gradient(180deg, #c9635a, #8f3f3b);
  box-shadow: inset 0 1px 0 rgba(255, 190, 170, 0.35);
}

.bar.xp {
  height: 0.42em;
  margin-top: 0.3em;
  border-color: #263042;
}

.bar.xp i {
  background: linear-gradient(180deg, #8ac07a, #557f4c);
}

.bar span {
  position: absolute;
  inset: 0;
  font-size: 0.66em;
  line-height: 1.55em;
  text-align: center;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 2px #000;
}

.purse {
  display: flex;
  gap: 1em;
  align-items: center;
  padding: 0.3em 0.8em;
  background: rgba(13, 17, 24, 0.9);
  border: 1px solid var(--line);
  font-size: 0.72em;
  color: var(--muted);
}

.purse b {
  color: var(--paper);
  font-size: 1.15em;
  margin-left: 0.35em;
}

.coin-glyph {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  background: radial-gradient(circle at 35% 30%, #f4d98e, #b98e3c 70%);
  border-radius: 50%;
  box-shadow: 0 0 0 1px #6b4e1d;
  vertical-align: -0.05em;
}

.rep-glyph {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  background: #0e1420;
  border: 1px solid var(--gold-dim);
  clip-path: polygon(50% 0, 100% 35%, 82% 100%, 18% 100%, 0 35%);
  vertical-align: -0.08em;
}

/* ---------- quest chip ---------- */
.hud-quest {
  /* Under the tab bar on the right, so the top row is only vitals and tabs (탭 아래 오른쪽에 두어 윗줄은 체력과 탭만 쓴다) */
  position: absolute;
  top: 4.5em;
  right: 0.9em;
  left: auto;
  width: auto;
  max-width: min(23em, 44%);
  text-align: right;
  padding: 0.35em 0.7em 0.4em;
  background: linear-gradient(180deg, rgba(20, 26, 37, 0.92), rgba(12, 16, 23, 0.88));
  border-top: 1px solid rgba(216, 184, 120, 0.35);
  border-bottom: 1px solid rgba(216, 184, 120, 0.18);
  overflow: hidden;
}

.hud-quest-label {
  font-size: 0.56em;
  letter-spacing: 0.2em;
  color: var(--gold-dim);
}

.hud-quest-title {
  font-size: 0.78em;
  letter-spacing: 0.04em;
  margin: 0.08em 0 0.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-quest-step {
  font-size: 0.62em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- tabs ---------- */
.hud-tabs {
  position: absolute;
  top: 0.9em;
  right: 0.9em;
  display: flex;
  gap: 0.18em;
}

.hud-tabs button {
  font-family: inherit;
  font-size: 0.62em;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: rgba(16, 21, 30, 0.92);
  border: 1px solid var(--line);
  padding: 0.5em 0.46em;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.hud-tabs button:hover {
  color: var(--paper);
  border-color: var(--gold-dim);
  background: #1c2434;
}

.hud-tabs button.on {
  color: var(--gold);
  border-color: var(--gold);
}

/* ---------- minimap ---------- */
.minimap-card {
  position: absolute;
  left: 0.9em;
  bottom: 0.9em;
  padding: 0.45em;
  background: rgba(12, 16, 23, 0.92);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(216, 184, 120, 0.12);
}

#minimap {
  display: block;
  width: 9.6em;
  height: 9.6em;
  image-rendering: pixelated;
  background: #0a0d12;
}

.minimap-foot {
  display: flex;
  justify-content: space-between;
  gap: 0.6em;
  font-size: 0.62em;
  color: var(--muted);
  padding-top: 0.35em;
  letter-spacing: 0.04em;
}

/* Context action prompt: one key, one sentence, right where the eyes are (눈이 머무는 곳에 한 키, 한 문장)
 */
.context-prompt {
  position: absolute;
  bottom: 3.2em;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.42em 0.9em;
  font-size: 0.74em;
  letter-spacing: 0.04em;
  color: var(--paper);
  background: linear-gradient(180deg, rgba(30, 39, 55, 0.96), rgba(13, 18, 26, 0.96));
  border: 1px solid rgba(216, 184, 120, 0.55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  animation: context-in 0.16s ease-out;
}

.context-prompt kbd {
  background: var(--gold);
  color: #1a1408;
  border: 1px solid #f0d69a;
  padding: 0.1em 0.5em;
  margin: 0;
  font-weight: 700;
}

@keyframes context-in {
  from {
    opacity: 0;
    transform: translate(-50%, 0.4em);
  }
}

.hud-hint {
  position: absolute;
  bottom: 1.2em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68em;
  color: #7d8494;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 3px #000;
}

.hud-region {
  position: absolute;
  right: 1.4em;
  bottom: 1.3em;
  font-size: 0.7em;
  color: var(--gold-dim);
  letter-spacing: 0.14em;
  text-shadow: 0 1px 3px #000;
}

/* ---------- toasts ---------- */
#toasts {
  position: absolute;
  top: 4.5em;
  bottom: auto;
  left: 50%;
  max-width: 42%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  pointer-events: none;
}

.toast {
  font-size: 0.74em;
  letter-spacing: 0.03em;
  padding: 0.5em 1em;
  background: rgba(10, 14, 20, 0.94);
  border-left: 2px solid var(--gold);
  color: var(--paper);
  animation: toast-in 0.18s ease-out;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.toast.good {
  border-left-color: var(--green);
}

.toast.bad {
  border-left-color: var(--red);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

#flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(140, 30, 30, 0);
  transition: background 0.18s;
}

#flash.hit {
  background: rgba(150, 32, 32, 0.28);
}

/* ---------- panels ---------- */
#panel-root[hidden] {
  display: none;
}

#panel-root {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 11, 0.72);
  backdrop-filter: blur(1px);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  pointer-events: auto;
}

.panel {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #161c27, #10151f);
  border: 1px solid #4a5470;
  box-shadow: inset 0 0 0 1px rgba(216, 184, 120, 0.18), 0 24px 70px rgba(0, 0, 0, 0.7);
  animation: panel-in 0.12s ease-out;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: scale(0.99);
  }
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.9em 1.2em;
  border-bottom: 1px solid var(--line);
  background: #131924;
}

.panel-head h2 {
  margin: 0;
  font-size: 1.15em;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--paper);
}

.panel-head .sub {
  font-size: 0.7em;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.panel-head .spacer {
  flex: 1;
}

.panel-close {
  font-family: inherit;
  font-size: 0.8em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.35em 0.7em;
  cursor: pointer;
}

.panel-close:hover {
  color: var(--red);
  border-color: var(--red);
}

.panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

.panel-side {
  /* Cap the sidebar so small windows keep a usable main area (작은 창에서도 본문이 남도록 사이드바를 제한한다) */
  width: min(24em, 40%);
  flex: none;
  border-left: 1px solid var(--line);
  padding: 1.1em;
  overflow-y: auto;
  scrollbar-gutter: stable;
  background: rgba(10, 14, 20, 0.5);
}

.panel-main {
  flex: 1;
  min-width: 0;
  padding: 1.1em;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.panel-scroll {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  /* Keep the far-right values clear of the scrollbar (오른쪽 값이 스크롤바에 가리지 않게)
   */
  scrollbar-gutter: stable;
  padding-right: 0.45em;
}

.panel-foot {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.8em 1.2em;
  border-top: 1px solid var(--line);
  background: #10151f;
  font-size: 0.78em;
  color: var(--muted);
}

/* scrollbars */
.panel-side::-webkit-scrollbar,
.panel-scroll::-webkit-scrollbar {
  width: 0.5em;
}

.panel-side::-webkit-scrollbar-thumb,
.panel-scroll::-webkit-scrollbar-thumb {
  background: #39425a;
}

/* ---------- generic pieces ---------- */
.btn {
  font-family: inherit;
  font-size: 0.78em;
  letter-spacing: 0.06em;
  color: var(--paper);
  background: #1d2635;
  border: 1px solid #46516c;
  padding: 0.55em 1em;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.btn:hover:not(:disabled) {
  background: #26324a;
  border-color: var(--gold-dim);
}

.btn.primary {
  background: linear-gradient(180deg, #d8b878, #b58f4c);
  border-color: #f0d69a;
  color: #1a1408;
  font-weight: 700;
}

.btn.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #e8c98c, #c69e56);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn.small {
  font-size: 0.7em;
  padding: 0.35em 0.7em;
}

.btn.ghost {
  background: transparent;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.64em;
  letter-spacing: 0.08em;
  padding: 0.25em 0.6em;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(20, 26, 37, 0.8);
}

.chip.gold {
  color: var(--gold);
  border-color: rgba(216, 184, 120, 0.5);
}

.chip.green {
  color: var(--green);
  border-color: rgba(138, 192, 122, 0.45);
}

.chip.red {
  color: var(--red);
  border-color: rgba(217, 123, 108, 0.45);
}

.muted {
  color: var(--muted);
}

.gold {
  color: var(--gold);
}

.green {
  color: var(--green);
}

.red {
  color: var(--red);
}

h3.section {
  font-size: 0.72em;
  letter-spacing: 0.18em;
  color: var(--gold-dim);
  margin: 1.4em 0 0.6em;
  border-bottom: 1px solid #2b3446;
  padding-bottom: 0.4em;
  font-weight: 400;
}

h3.section:first-child {
  margin-top: 0;
}

.row {
  display: flex;
  align-items: center;
  gap: 0.7em;
}

.between {
  justify-content: space-between;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.divider {
  height: 1px;
  background: #2a3345;
  margin: 0.9em 0;
}

/* ---------- map ---------- */
.map-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background:
    radial-gradient(circle at 50% 45%, rgba(45, 56, 78, 0.35), rgba(8, 11, 16, 0.9) 70%);
}

.map-canvas {
  display: block;
  image-rendering: pixelated;
  border: 1px solid #46516c;
  box-shadow: 0 0 0 1px #0a0e14, 0 10px 30px rgba(0, 0, 0, 0.5);
  cursor: crosshair;
  max-width: 100%;
  max-height: 100%;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em 0.9em;
  font-size: 0.62em;
  color: var(--muted);
  padding-top: 0.6em;
}

.legend-dot {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.35em;
  vertical-align: 0.02em;
}

/* zoom and pan controls under the sheet (시트 아래 확대와 이동 도구) */
.map-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35em 0.8em;
  padding-top: 0.6em;
  font-size: 0.72em;
  color: var(--muted);
  min-height: 2.2em;
}

.chart-purse {
  flex: none;
  white-space: nowrap;
  color: var(--muted);
}

.chart-purse b {
  font-size: 1.05em;
}

.map-toolbar > .muted {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-toolbar .spacer {
  flex: 1;
}

.map-zoom {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  flex: none;
}

.map-zoom .btn.small {
  font-size: 1em;
  padding: 0.28em 0.62em;
  line-height: 1;
}

.map-zoom b {
  min-width: 3.4em;
  text-align: center;
  font-size: 0.9em;
  letter-spacing: 0.06em;
  color: var(--gold);
}

/* Keep a long footer sentence from squeezing the zoom buttons (긴 안내문이 확대 버튼을 짜부라뜨리지 않게) */
.panel-foot > .muted {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-canvas.panning {
  cursor: grabbing;
}

.map-canvas.zoomed {
  border-color: var(--gold-dim);
}

.layer-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.4em 0.55em;
  font-size: 0.72em;
  border: 1px solid transparent;
  cursor: pointer;
}

.layer-row:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: #2c3purple;
  border-color: #2c3547;
}

.layer-row.on {
  border-color: rgba(216, 184, 120, 0.35);
  background: rgba(216, 184, 120, 0.06);
}

.layer-row .swatch {
  width: 0.7em;
  height: 0.7em;
  border: 1px solid rgba(0, 0, 0, 0.5);
  flex: none;
}

.layer-row .count {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.85em;
}

/* ---------- info cards ---------- */
.info-card {
  border: 1px solid var(--line);
  background: rgba(14, 19, 27, 0.8);
  padding: 0.7em 0.8em;
  font-size: 0.72em;
  color: var(--muted);
}

.info-card b {
  color: var(--paper);
}

.stat-line {
  display: flex;
  justify-content: space-between;
  gap: 0.8em;
  padding: 0.28em 0.4em 0.28em 0;
  font-size: 0.72em;
  border-bottom: 1px dotted #262f40;
}

.stat-line span:last-child {
  color: var(--paper);
}

/* ---------- charts / quests ---------- */
.tool-list {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.tool {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.55em 0.7em;
  border: 1px solid var(--line);
  background: rgba(18, 24, 34, 0.7);
  font-size: 0.72em;
  cursor: pointer;
  text-align: left;
  color: var(--paper);
  font-family: inherit;
}

.tool:hover:not(:disabled) {
  border-color: var(--gold-dim);
}

.tool.on {
  border-color: var(--gold);
  background: rgba(216, 184, 120, 0.1);
}

.tool:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.tool .cost {
  margin-left: auto;
  color: var(--gold-dim);
  font-size: 0.9em;
}

.quest-card {
  border: 1px solid var(--line);
  padding: 0.8em 0.9em;
  background: rgba(15, 20, 28, 0.75);
  margin-bottom: 0.6em;
}

.quest-card.active {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(216, 184, 120, 0.12);
}

.quest-card .q-title {
  display: flex;
  justify-content: space-between;
  gap: 0.8em;
  font-size: 0.86em;
  margin-bottom: 0.25em;
}

.quest-card .q-client {
  font-size: 0.65em;
  color: var(--gold-dim);
  letter-spacing: 0.1em;
}

.quest-card .q-desc {
  font-size: 0.7em;
  color: var(--muted);
  margin: 0.35em 0;
}

.req {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  padding: 0.38em 0;
  font-size: 0.71em;
  color: var(--muted);
  border-bottom: 1px dotted #232c3c;
}

.req .mark {
  width: 1.1em;
  flex: none;
  color: #5d6678;
}

.req.ok {
  color: var(--paper);
}

.req.ok .mark {
  color: var(--green);
}

.req.optional {
  opacity: 0.8;
}

.req .val {
  margin-left: auto;
  color: var(--muted);
  flex: none;
}

.req.ok .val {
  color: var(--green);
}

/* ---------- bestiary ---------- */
.species-list {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.species-row {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.5em 0.6em;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.74em;
}

.species-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.species-row.on {
  border-color: rgba(216, 184, 120, 0.4);
  background: rgba(216, 184, 120, 0.06);
}

.species-row img {
  width: 2.2em;
  height: 2.2em;
  image-rendering: pixelated;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid #2c3547;
}

.species-row .unknown {
  color: #5a6272;
  letter-spacing: 0.15em;
}

.bestiary-hero {
  display: flex;
  gap: 1em;
  align-items: center;
  border: 1px solid var(--line);
  padding: 0.8em;
  background: rgba(14, 19, 27, 0.7);
  margin-bottom: 0.8em;
}

.bestiary-hero img {
  width: 6em;
  height: 6em;
  image-rendering: pixelated;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid #2c3547;
}

.bestiary-hero h3 {
  margin: 0 0 0.15em;
  font-size: 1.05em;
  letter-spacing: 0.06em;
}

.habitat-box {
  border: 1px solid var(--line);
  background: rgba(14, 19, 27, 0.7);
  padding: 0.8em;
  font-size: 0.72em;
  margin-top: 0.8em;
}

.habitat-box .conf {
  height: 0.5em;
  background: #0a0d12;
  border: 1px solid #2b3344;
  margin-top: 0.4em;
}

.habitat-box .conf i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7fa8d9, #8ac07a);
}

/* ---------- shop / upgrades ---------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7em;
}

.shop-item {
  border: 1px solid var(--line);
  padding: 0.75em;
  background: rgba(15, 20, 28, 0.75);
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  font-size: 0.72em;
}

.shop-item .name {
  font-size: 1.02em;
  color: var(--paper);
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
}

.shop-item .desc {
  color: var(--muted);
  flex: 1;
}

.shop-item .effect {
  color: var(--blue);
  font-size: 0.94em;
}

.shop-item.owned {
  opacity: 0.65;
}

.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
  gap: 0.6em;
}

.inv-slot {
  border: 1px solid var(--line);
  background: rgba(15, 20, 28, 0.7);
  padding: 0.6em;
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.7em;
}

.inv-slot img {
  width: 2em;
  height: 2em;
  image-rendering: pixelated;
}

/* ---------- title ---------- */
#title-screen {
  /* The title covers the whole window, not just the letterboxed picture (타이틀은 캔버스가 아니라 창 전체를 덮는다) */
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(40, 48, 66, 0.55), rgba(5, 7, 11, 0.96) 68%),
    linear-gradient(180deg, #0a0d13, #05070b);
  pointer-events: auto;
  z-index: 10;
}

#title-screen.hidden {
  display: none;
}

.title-card {
  width: min(94%, 44em);
  max-height: 94vh;
  overflow-y: auto;
  text-align: center;
  border: 1px solid #3c465e;
  padding: 2.2em 2em 1.6em;
  background: linear-gradient(180deg, rgba(22, 28, 39, 0.9), rgba(10, 14, 20, 0.94));
  box-shadow: inset 0 0 0 1px rgba(216, 184, 120, 0.16), 0 30px 80px rgba(0, 0, 0, 0.7);
}

.title-kicker {
  font-size: 0.6em;
  letter-spacing: 0.45em;
  color: var(--gold-dim);
}

.title-card h1 {
  margin: 0.15em 0 0;
  font-size: 4.4em;
  letter-spacing: 0.35em;
  line-height: 1;
  color: #efe5cd;
  text-shadow: 0 0 24px rgba(216, 184, 120, 0.25), 0 3px 0 #6c5836;
  font-weight: 700;
}

.title-sub {
  font-size: 0.9em;
  letter-spacing: 0.4em;
  color: var(--gold);
  margin-top: 0.55em;
}

.title-desc {
  font-size: 0.72em;
  color: var(--muted);
  line-height: 1.9;
  margin: 1.6em 0;
}

.title-actions {
  display: flex;
  gap: 0.6em;
  justify-content: center;
  flex-wrap: wrap;
}

.title-actions .btn {
  font-size: 0.8em;
  padding: 0.7em 1.8em;
}

.title-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1em;
  justify-content: center;
  margin-top: 1.6em;
  font-size: 0.62em;
  color: #737b8b;
}

kbd {
  font-family: inherit;
  border: 1px solid #3a4459;
  padding: 0.05em 0.35em;
  color: #aab1c0;
  margin-right: 0.2em;
}

.title-note {
  margin-top: 1em;
  font-size: 0.62em;
  color: var(--gold-dim);
  min-height: 1em;
}

/* ---------- world list (월드 목록) ---------- */
.world-name-input {
  font-family: inherit;
  font-size: 0.7em;
  letter-spacing: 0.04em;
  color: var(--paper);
  background: #0f131b;
  border: 1px solid var(--line);
  padding: 0.6em 0.8em;
  width: 12em;
  pointer-events: auto;
}

.world-name-input:focus {
  outline: none;
  border-color: var(--gold-dim);
}

.world-name-input::placeholder {
  color: #5f6878;
}

.title-actions label.btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.world-list-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 1.6em;
  padding-bottom: 0.4em;
  font-size: 0.62em;
  letter-spacing: 0.2em;
  color: var(--gold-dim);
  border-bottom: 1px solid #2b3446;
}

.world-list {
  max-height: 34vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  margin-top: 0.5em;
  padding-right: 0.3em;
}

.world-list::-webkit-scrollbar {
  width: 0.5em;
}

.world-list::-webkit-scrollbar-thumb {
  background: #39425a;
}

.world-row {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0.6em 0.7em;
  border: 1px solid transparent;
  border-bottom: 1px dotted #262f40;
  text-align: left;
}

.world-row:hover {
  background: rgba(34, 44, 64, 0.55);
  border-color: var(--line);
}

.world-main {
  flex: 1;
  min-width: 0;
}

.world-name {
  font-size: 0.78em;
  letter-spacing: 0.06em;
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.world-meta {
  font-size: 0.6em;
  color: var(--muted);
  margin-top: 0.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.world-actions {
  display: flex;
  gap: 0.35em;
  flex: none;
}

.world-empty {
  font-size: 0.66em;
  color: #5f6878;
  border: 1px dashed #2b3446;
  padding: 1.2em 1em;
  text-align: center;
  margin-top: 0.6em;
}

#loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05070b;
  z-index: 20;
  font-size: 0.9em;
  letter-spacing: 0.2em;
  color: var(--gold-dim);
}

#loading.hidden {
  display: none;
}

/* helpers */
.hidden {
  display: none !important;
}

.empty {
  font-size: 0.72em;
  color: #5f6878;
  padding: 1.2em;
  text-align: center;
  border: 1px dashed #2b3446;
}

.big-num {
  font-size: 1.5em;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.tag-row {
  display: flex;
  gap: 0.35em;
  flex-wrap: wrap;
}

/* ---------- tutorial (수업 카드) ---------- */
#tutorial {
  position: absolute;
  top: auto;
  bottom: 3.4em;
  right: 0.9em;
  width: min(21em, 36%);
  padding: 0.8em 0.95em 0.85em;
  background: linear-gradient(180deg, rgba(24, 31, 44, 0.96), rgba(11, 15, 22, 0.95));
  border: 1px solid rgba(216, 184, 120, 0.42);
  box-shadow: inset 0 0 0 1px rgba(216, 184, 120, 0.1), 0 12px 34px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

#tutorial.tut-pop {
  animation: tut-in 0.22s ease-out;
}

@keyframes tut-in {
  from {
    opacity: 0;
    transform: translateY(-0.35em);
  }
}

.tut-head {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.6em;
  letter-spacing: 0.16em;
}

.tut-kicker {
  color: var(--gold-dim);
}

.tut-step {
  color: var(--muted);
  margin-left: auto;
  letter-spacing: 0.08em;
}

.tut-skip {
  font-family: inherit;
  font-size: 0.95em;
  color: #6f7787;
  background: transparent;
  border: 1px solid #303a4d;
  padding: 0.15em 0.45em;
  cursor: pointer;
  letter-spacing: 0.06em;
}

.tut-skip:hover {
  color: var(--red);
  border-color: var(--red);
}

#tutorial h4 {
  margin: 0.55em 0 0.35em;
  font-size: 0.92em;
  letter-spacing: 0.06em;
  color: #efe5cd;
  font-weight: 700;
}

#tutorial p {
  margin: 0;
  font-size: 0.7em;
  line-height: 1.75;
  color: #a8afbd;
}

.tut-task {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.6em;
  padding-top: 0.5em;
  border-top: 1px solid rgba(216, 184, 120, 0.18);
  font-size: 0.72em;
  color: var(--gold);
}

.tut-mark {
  color: var(--gold-dim);
}

.tut-next {
  margin-left: auto;
  font-family: inherit;
  font-size: 0.95em;
  letter-spacing: 0.06em;
  color: #1a1408;
  background: linear-gradient(180deg, #d8b878, #b58f4c);
  border: 1px solid #f0d69a;
  padding: 0.25em 0.7em;
  cursor: pointer;
}

.tut-next:hover {
  background: linear-gradient(180deg, #e8c98c, #c69e56);
}

.tut-progress {
  margin-top: 0.5em;
  height: 0.22em;
  background: #0b0f16;
  overflow: hidden;
}

.tut-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #9a8050, #e8c878);
  transition: width 0.25s ease-out;
}

/* Ring around the tab the current lesson points at (수업이 가리키는 탭에 주는 테두리) */
.tut-focus {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  animation: tut-pulse 1.5s ease-in-out infinite;
}

@keyframes tut-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(216, 184, 120, 0.45), 0 0 14px rgba(216, 184, 120, 0.32);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(216, 184, 120, 0.14), 0 0 20px rgba(216, 184, 120, 0.55);
  }
}

/* Lesson reminder inside a panel header (패널 머리글에 붙는 수업 안내) */
.panel-tip {
  font-size: 0.64em;
  letter-spacing: 0.04em;
  color: var(--gold);
  border: 1px solid rgba(216, 184, 120, 0.35);
  background: rgba(216, 184, 120, 0.07);
  padding: 0.32em 0.6em;
  max-width: 30em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: none;
}

.panel-tip b {
  color: var(--gold-dim);
  font-weight: 400;
}

@media (max-width: 720px) {
  #tutorial {
    width: min(21em, 52%);
  }
}

/* ---------- help panel (도움말) ---------- */
.loop-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  padding: 0.45em 0;
  font-size: 0.74em;
  color: var(--muted);
  border-bottom: 1px dotted #262f40;
}

.loop-row b {
  color: var(--paper);
}

.loop-num {
  flex: none;
  width: 1.5em;
  height: 1.5em;
  display: grid;
  place-items: center;
  font-size: 0.85em;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  background: rgba(216, 184, 120, 0.06);
}

.help-card {
  border: 1px solid var(--line);
  background: rgba(14, 19, 27, 0.8);
  padding: 0.7em 0.8em;
  font-size: 0.72em;
  color: var(--muted);
}

.help-card b {
  color: var(--paper);
}

.help-card .stat-line {
  padding: 0.28em 0.4em 0.28em 0;
}

.help-card .stat-line span:last-child {
  color: var(--paper);
}

.help-side {
  border-left: 1px solid var(--line);
  padding: 1.1em;
  background: rgba(10, 14, 20, 0.5);
}

.help-side h3.section {
  font-size: 0.72em;
  letter-spacing: 0.18em;
  color: var(--gold-dim);
  margin: 1.4em 0 0.6em;
  border-bottom: 1px solid #2b3446;
  padding-bottom: 0.4em;
  font-weight: 400;
}

.help-side h3.section:first-child {
  margin-top: 0;
}

.help-side .stat-line {
  display: flex;
  justify-content: space-between;
  gap: 0.8em;
  padding: 0.28em 0.4em 0.28em 0;
  font-size: 0.72em;
  border-bottom: 1px dotted #262f40;
}

.help-side .stat-line span:last-child {
  color: var(--paper);
}

.help-side .info-card {
  border: 1px solid var(--line);
  background: rgba(14, 19, 27, 0.8);
  padding: 0.7em 0.8em;
  font-size: 0.72em;
  color: var(--muted);
}

.help-side .info-card b {
  color: var(--paper);
}

/* ---------- pause menu (일시 정지 메뉴) ---------- */
.pause-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.6em;
  overflow-y: auto;
}

.pause-card {
  width: min(27em, 100%);
  padding: 1.3em 1.45em;
  background: linear-gradient(180deg, #171e2a, #10151f);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(216, 184, 120, 0.14), 0 18px 50px rgba(0, 0, 0, 0.55);
}

.pause-kicker {
  font-size: 0.66em;
  letter-spacing: 0.24em;
  color: var(--gold-dim);
}

.pause-title {
  margin: 0.22em 0 0.1em;
  font-size: 1.5em;
  letter-spacing: 0.08em;
  color: var(--paper);
}

.pause-meta {
  margin-bottom: 0.9em;
  font-size: 0.72em;
  color: var(--muted);
}

.pause-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.32em 0.9em;
  margin-bottom: 0.9em;
  padding: 0.75em 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 0.76em;
}

.pause-grid span {
  color: var(--muted);
}

.pause-grid b {
  text-align: right;
  font-weight: 600;
  color: var(--paper);
}

.pause-card .btn {
  width: 100%;
  margin-top: 0.35em;
}

.pause-links {
  display: flex;
  gap: 0.35em;
  margin-top: 0.35em;
}

.pause-links .btn {
  flex: 1;
}

.pause-note {
  margin-top: 0.85em;
  font-size: 0.68em;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--muted);
}

.pause-card .btn.danger {
  color: var(--red);
  border-color: var(--red);
  background: rgba(217, 90, 80, 0.1);
}