/* ================================================================
   KOREAN ROGUELITE - styles
   Ported from typing-game.html with dungeon additions
================================================================ */
:root {
  --bg-top: #c8c8d4;
  --bg-bot: #9898a8;
  --primary-color: #0e113a;
  --secondary-color: #1e40af;
  --accent-color: #3b82f6;
  --accent-light: rgba(14,17,58,.12);
  --accent-border: rgba(14,17,58,.35);
  --tb-h: 0px;
}
body.mobile-fs { --tb-h: 20px; }

/* ── Mobile fullscreen: shift game content below titlebar ── */
body.mobile-fs .screen,
body.mobile-fs #gc,
body.mobile-fs #wx-canvas,
body.mobile-fs #dn-canvas,
body.mobile-fs #ctrl-panel,
body.mobile-fs #ground-items,
body.mobile-fs #cfx,
body.mobile-fs #door-overlay,
body.mobile-fs #announce,
body.mobile-fs #freeze-overlay { top: var(--tb-h); }
body.mobile-fs #hud  { top: calc(8px + var(--tb-h)); }
body.mobile-fs #btn-map { top: calc(8px + var(--tb-h)); }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── SVG icon helper - inherits CSS color via mask ── */
.icon-close, .icon-fs-enter, .icon-fs-exit {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: middle;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  background-color: currentColor;
  flex-shrink: 0;
}
.icon-close    { -webkit-mask-image: url(../img/close.svg);            mask-image: url(../img/close.svg); }
.icon-fs-enter { -webkit-mask-image: url(../img/fullscreen-enter.svg); mask-image: url(../img/fullscreen-enter.svg); }
.icon-fs-exit  { -webkit-mask-image: url(../img/fullscreen-exit.svg);  mask-image: url(../img/fullscreen-exit.svg); }
button, input, select, textarea { font-family: inherit; }
input, textarea { user-select: text; -webkit-user-select: text; }

/* ── Global scrollbar style ── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.35); }
*::-webkit-scrollbar-corner { background: transparent; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  font-family: 'Pretendard', 'Noto Color Emoji', sans-serif;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
body {
  background: #000;
}

/* ===== SCREENS ===== */
.screen {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity .4s;
}
.screen.off { opacity: 0; pointer-events: none; }
/* Teacher screen sits below the pause overlay */
#scr-teacher { z-index: 150; }

.menu-screen {
  background: #030d1a;
}

/* White content card - still used by in-run screens (shop, modifier, etc.) */
.menu-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(720px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  color: #1a1a2e;
}
.menu-card::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); }
.menu-card h1, .menu-card h2, .menu-card h3,
.screen h1, .screen h2, .screen h3 { font-weight: 400; }

/* ===== TITLE SCREEN - 민화 layout ===== */
#scr-title {
  background: rgb(255 244 210 / 65%);
  backdrop-filter: blur(2px);

  justify-content: stretch;
  align-items: stretch;
  overflow: hidden;
}
#scr-title::after {
  content: ''; position: absolute; inset: 0;
  background: url('../img/paper-grain.svg') repeat center/180px 180px;
  mix-blend-mode: multiply;
  pointer-events: none; z-index: 0; opacity: 0.22;
}

/* Minhwa tree — bottom-left, black bg removed via screen blend */
#menu-minhwa {
  position: absolute; bottom: 0; left: 0;
  height: 100vh; width: auto;
  pointer-events: none; user-select: none;
  mix-blend-mode: multiply;
  object-fit: contain; object-position: bottom left;
  z-index: 0;
  opacity: 30%;
}

/* Version badge — top-right, desktop only */
#version-badge {
  position: absolute; top: 32px; right: 32px;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: 'EZRA Serif', serif;
  font-size: 1.25rem; color: #b1382f;
  opacity: 0.75; pointer-events: none; user-select: none;
  letter-spacing: 0.45em; z-index: 10;
  font-weight: 600;
}
body.phase-title #version-badge { pointer-events: all; }
.vb-char { position: relative; cursor: default; }
.vb-char .vb-h {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .15s;
  text-orientation: upright;
  display: flex; align-items: center; justify-content: start;
}
.vb-char .vb-n { transition: opacity .15s; }
.vb-char:hover .vb-n { opacity: 0; }
.vb-char:hover .vb-h { opacity: 1; }
.vb-label .vb-h { font-size: 0.65em; letter-spacing: -0.05em; font-weight: 900; }
.vb-label + .vb-char { transition: margin-top .25s ease; }
.vb-label:hover + .vb-char { margin-top: 2em; }
.mtb-version { opacity: 0.55; margin-left: 4px; font-size: .72em; }

/* Minhwa — bottom-right */
#menu-minhwa-right {
  position: absolute; bottom: 0; right: 0;
  height: 100vh; width: auto;
  pointer-events: none; user-select: none;
  mix-blend-mode: multiply;
  object-fit: contain; object-position: bottom right;
  z-index: 0;
  opacity: 30%;
}

/* Dojang stamp */
#menu-dojang-wrap {
  position: relative;
  width: 80px; z-index: 2;
  cursor: default;
  margin-bottom: 32px;
  flex-shrink: 0;
}
#menu-dojang {
  width: 100%;
  user-select: none; display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.18)) saturate(0.5) brightness(1.25);
  transition: filter .3s ease, opacity .3s ease;
}
#menu-dojang-wrap:hover #menu-dojang {
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.18)) blur(3px);
  opacity: 0.4;
}
#menu-dojang-lluc {
  position: absolute; inset: 0;
  object-fit: cover; border-radius: 4px;
  opacity: 0; transition: opacity .3s ease;
  pointer-events: none; user-select: none;
  width: 40%; height: 40%;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
#menu-dojang-wrap:hover #menu-dojang-lluc { opacity: 1; }

/* ── Single column wrapper ── */
#menu-wrap {
  flex: 1; min-height: 0; height: 100%;
  width: 100%; max-width: none;
  position: relative; z-index: 1;
}
/* Desktop only: scale menu UI to ~80% so px/rem elements feel proportional */
@media (min-height: 501px) {
  #menu-wrap { zoom: 0.8; }
  #menu-logo-wrap { position: fixed; top: 32px; left: 32px; z-index: 5; }
}

/* ── Left column: all content ── */
#menu-left {
  display: flex; flex-direction: column;
  min-height: 0; height: 100%;
}
#menu-logo-wrap {
  display: flex; flex-direction: column; align-items: center;
  width: fit-content;
  flex-shrink: 0;
}
#menu-logo-gif {
  height: 200px; width: auto; object-fit: contain; display: block;
  padding: 20px 20px 0;
  user-select: none; -webkit-user-select: none;
  pointer-events: auto; cursor: pointer;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.55));
}
#menu-slogan {
  margin: 8px 0 0; padding: 0;
  font-size: 1.3rem; font-weight: 500;
  letter-spacing: 2px; text-align: center;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 8px rgba(0,0,0,.3);
  line-height: 1.5; font-style: italic;
  flex-shrink: 0;
}
/* Icon buttons — fixed above the tree bottom edge */
/* Tree content ends at 968/1953 ≈ 49.6% of image width = 0.496 * 72vh ≈ 35.7vh */
#menu-left-btns {
  position: fixed;
  width: 100%; box-sizing: border-box;
  padding-left: calc(0.9 * 72vh); padding-right: 32px;
  display: flex; flex-direction: row; gap: 30px;
  justify-content: space-between;
  z-index: 2; align-items: end; bottom: 0;
}
#menu-left-btns .btn-group {
  display: flex; flex-direction: row; gap: 10px;
  margin-bottom: 32px; height: fit-content;
}
.menu-icon-btn {
  position: relative;
  background: none; border: none;
  padding: 12px 6px; border-radius: 10px;
  cursor: pointer; transition: transform .18s, background .18s;
  font-family: inherit;
}
.menu-icon-btn:hover {
  background: rgba(255,255,255,.18);
  transform: translateY(-4px);
}
.mic-emoji {
  display: block;
  font-size: 4.5rem; line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));
}
/* Dict icon pulses softly to hint it's clickable */
#btn-my-dict .mic-emoji {
  animation: dict-glow 2.8s ease-in-out infinite;
}
@keyframes dict-glow {
  0%, 100% { filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
  50%       { filter: drop-shadow(0 0 12px rgba(120,180,255,.7)) drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
}
.mic-label {
  position: absolute;
  bottom: calc(100% + 15px);
  left: 50%; transform: translateX(-50%);
  white-space: nowrap; pointer-events: none;
  color: #fff; font-size: 1.3rem; font-weight: 500; font-style: italic;
  letter-spacing: 1.5px;
  text-shadow: 0 0 8px rgba(0,0,0,.9), 0 1px 4px rgba(0,0,0,.8), 0 0 20px rgba(0,0,0,.5);
  opacity: 0; transition: opacity .18s;
}
.menu-icon-btn:hover .mic-label { opacity: 1; }
#menu-footer {
  display: none;
  font-size: .75rem; color: rgba(10,8,4,.35);
}

/* ── Character editor area ── */
#menu-main {
  flex: 1; min-height: 0;
  display: flex; align-items: stretch; justify-content: center;
  padding: 0 4px;
}
.ava-tabs {
  display: flex; flex-direction: row; flex-wrap: wrap;
  justify-content: center; opacity: 0%; visibility: hidden;
  gap: 8px; width: 100%; padding: 4px 0 8px;
  transition: opacity 0.3s ease;
}
.ava-tab {
  width: 70px; height: 70px;
  border: none;
  border-radius: 10px;
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(5px);
  color: rgba(255,255,255,.9);
  font-size: 2rem; line-height: 1;
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
}
.ava-tab:hover { background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.22); }
.ava-tab.active { background: rgba(14,17,58,.6); border-color: rgba(14,17,58,.8); }
/* Tab tooltips: centered below each button */
.ava-tab[data-tooltip] { position: relative; }
.ava-tab[data-tooltip]::after {
  font-weight: 200;
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px); top: auto; left: 50%; transform: translateX(-50%);
  background: rgba(14,17,58,.9); color: #fff;
  font-size: 1rem; white-space: nowrap;
  padding: 5px 12px; border-radius: 20px;
  pointer-events: none; opacity: 0; transition: opacity .15s;
  z-index: 200;
}
.ava-tab[data-tooltip]:hover::after { opacity: 1; }
#ava-center {
  display: flex; flex-direction: column; align-items: center;
  height: 100%; min-height: 0; min-width: 0; overflow: visible; padding: 4px; padding-bottom: 0;
}
#ava-preview-wrap {
  position: relative; margin-top: auto;
  display: flex; align-items: center; justify-content: center;
  width: min(66vh, calc(100vw - 200px));
  height: min(66vh, calc(100vw - 200px));
  transition: transform .25s ease;
}
#menu-main.edit-open #ava-preview-wrap { transform: scale(.86); transform-origin: bottom center; }
#ava-randomize, #ava-edit { position: absolute; z-index: 1; bottom: 32px; }
#ava-randomize { right: -60px; }
#ava-edit { left: -60px; }
#ava-randomize.spinning {
  opacity: 1;
  pointer-events: none;
}
#ava-randomize.spinning .mic-emoji {
  display: inline-block;
  animation: dice-spin .55s cubic-bezier(.36,.07,.19,.97) forwards;
}
#ava-randomize.spinning .mic-label { opacity: 0 !important; transition: opacity 0.04s !important; }
@keyframes dice-spin {
  0%   { transform: rotate(0deg)   scale(1);    }
  15%  { transform: rotate(120deg) scale(1.25); }
  35%  { transform: rotate(270deg) scale(1.1);  }
  55%  { transform: rotate(450deg) scale(1.3);  }
  75%  { transform: rotate(600deg) scale(1.15); }
  90%  { transform: rotate(700deg) scale(1);    }
  100% { transform: rotate(720deg) scale(1);    }
}
#ava-preview { width: 100%; height: 100%; filter: drop-shadow(0 6px 18px rgba(0,0,0,.1)) drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
#ava-preview svg { width: 100%; height: 100%; display: block; }

/* ── Edit bar ── */
#ava-edit-bar {
  width: 100%; flex-shrink: 0;
  background: rgba(10,10,28,.88);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: 8px;
  max-height: 0; overflow: hidden;
  padding: 0 12px;
  transition: max-height .25s ease, padding .25s ease;
}
#ava-edit-bar.open { max-height: 150px; padding: 10px 12px; border-radius: 10px; }
#ava-edit-close {
  background: rgba(200,30,30,.28); border: 1.5px solid rgba(200,30,30,.7);
  font-size: .95rem; cursor: pointer; color: #ff3333;
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
#ava-edit-close:hover { background: rgba(200,30,30,.45); color: #ff5555; }
#ava-edit-rows {
  flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.ava-edit-row {
  display: flex; align-items: center; gap: 6px;
}
.ava-edit-row.hidden { display: none; }
.ava-edit-nav {
  background: none; border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px; padding: 2px 10px;
  font-size: 1.1rem; cursor: pointer; color: rgba(255,255,255,.7);
  flex-shrink: 0; line-height: 1.4;
  transition: background .12s;
}
.ava-edit-nav:hover { background: rgba(255,255,255,.1); }
#ava-edit-label1, #ava-edit-label2, #ava-edit-label3 {
  flex: 1; text-align: center; font-size: 1rem; font-weight: 600;
  color: rgba(255,255,255,.88); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Play button: right-edge vertical tab ── */
#btn-play {
  position: fixed; bottom: 32px; left: 32px;
  padding: 28px 52px; font-size: 2.2rem; font-weight: 700;
  font-family: 'EZRA Serif', serif;
  border: none; border-radius: 16px;
  background: rgb(59 53 41 / 80%);
  backdrop-filter: blur(14px);
  color: #fff; cursor: pointer; letter-spacing: 4px;
  box-shadow: 0 4px 28px rgba(0,0,0,.18);
  transition: background .2s, box-shadow .2s;
  z-index: 10; pointer-events: auto;
}
#btn-play:hover {
  background: rgb(59 53 41);
  box-shadow: 0 6px 36px rgba(0,0,0,.26);
}

/* My Dictionary floating modal */
#my-dict-modal {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
#my-dict-modal.off, #settings-modal.off, #donate-modal.off, #tts-modal.off, #progress-modal.off { display: none; }
#my-dict-modal-inner {
  position: relative;
  border-radius: 12px; padding: 24px 24px 24px 28px;
  width: min(520px, 96vw); height: min(76vh, 730px);
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
#settings-modal-inner {
  background: #0f0f1c; border-radius: 20px; padding: 24px;
  width: min(680px, 96vw); max-height: min(88vh, 730px);
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.1);
}
#settings-modal {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
#my-dict-header {
  position: static !important; /* keep out of positioned context so children anchor to modal-inner */
  display: block;
  border-bottom: none; padding-bottom: 0; margin-bottom: 0; margin-top: 6px;
}
#my-dict-header > span { font-size: 0.9rem; font-weight: 700; color: #5a3e00; }
#my-dict-close {
  position: absolute; top: 1px; right: 0px; z-index: 16;
  background: rgba(255,255,255,.38); border: 1px solid rgba(101,75,0,.25);
  font-size: 1.1rem; cursor: pointer;
  color: rgba(70,48,0,.9); padding: 0; border-radius: 6px; font-family: inherit;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
#my-dict-close:hover { color: #3a2800; background: rgba(255,255,255,.6); }
#my-dict-expand-btn {
  position: absolute; top: 1px; right: 36px; z-index: 16;
  background: rgba(255,255,255,.38); border: 1px solid rgba(101,75,0,.25);
  font-size: 1.1rem; cursor: pointer;
  color: rgba(70,48,0,.9); padding: 0; border-radius: 6px; font-family: inherit;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
#my-dict-expand-btn:hover { color: #3a2800; background: rgba(255,255,255,.6); }
#my-dict-expand-btn .icon-fs-enter,
#my-dict-expand-btn .icon-fs-exit { width: 14px; height: 14px; }
#my-dict-expand-btn .icon-fs-exit { display: none; }
#my-dict-modal.dict-expanded #my-dict-expand-btn .icon-fs-enter { display: none; }
#my-dict-modal.dict-expanded #my-dict-expand-btn .icon-fs-exit  { display: inline-block; }
@media (max-height: 500px) { #my-dict-expand-btn { display: none; } }
#settings-header {
  display: flex; align-items: center; justify-content: space-between;
}
#settings-header > span { font-size: 1.1rem; font-weight: 700; color: #7db4ff; }
#settings-close {
  background: none; border: none; font-size: 1.1rem; cursor: pointer;
  color: rgba(255,255,255,.35); padding: 8px; border-radius: 6px; font-family: inherit;
}
#settings-close:hover { color: rgba(255,255,255,.8); background: rgba(255,255,255,.08); }
.dict-panel-sub { font-size: .95rem; color: rgba(255,255,255,.38); }
#my-dict-modal-inner .dict-panel-sub { color: rgba(90,62,0,.55); }
.dict-search-wrap input {
  width: 100%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: .95rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  color: #fff;
}
.dict-search-wrap input::placeholder { color: rgba(255,255,255,.3); }
.dict-search-wrap input:focus { border-color: #0e113a; }
#my-dict-modal-inner .dict-search-wrap input {
  background: rgba(101,75,0,.07);
  border-color: rgba(101,75,0,.25);
  color: #2a1a00;
}
#my-dict-modal-inner .dict-search-wrap input::placeholder { color: rgba(90,62,0,.4); }
#my-dict-modal-inner .dict-search-wrap input:focus { border-color: #b8820e; }
#dict-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  flex: 1;
}
.dict-expanded #dict-list { max-height: none; }
.dict-entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 12px;
  background: rgba(14,17,58,.1);
  border-radius: 9px;
  font-size: 1rem;
  text-decoration: none;
  color: rgba(255,255,255,.88);
  transition: background .15s;
  border: 1px solid transparent;
}
.dict-entry:hover { background: rgba(14,17,58,.22); border-color: rgba(14,17,58,.3); }
.dict-entry.expanded { background: rgba(14,17,58,.18); }
.dict-entry-main {
  display: flex; align-items: center; gap: 8px;
}
.dict-emoji { font-size: 1.35rem; min-width: 1.8rem; text-align: center; }
.dict-secondary-emoji { font-size: 0.65rem; position: absolute; top: 50%; transform: translateY(-50%); right: -20px; }
.dict-text { font-size: 1.15rem; font-weight: 700; color: #fff; margin-left: 1.25rem; }
.dict-alts { color: #5d598b; font-size: .8rem; opacity: .85; margin: 0 4px; }
.dict-hanja { color: #ffc855; font-size: 1rem; font-family: 'Song Myung', 'Noto Color Emoji', serif; margin: 0 4px; opacity: .9; }
.dict-en { color: rgba(255,255,255,.5); font-size: .88rem; margin-left: auto; }
.dict-kills { font-size: .8rem; opacity: .6; margin-left: 4px; cursor: default; }
.dict-untouched .dict-text, .dict-untouched .dict-en { font-style: italic; opacity: .55; }
.dict-link { margin-left: 4px; opacity: .5; font-size: .85rem; text-decoration: none; }
.dict-link:hover { opacity: 1; }
.dict-empty { color: #888; font-size: .88rem; font-style: italic; display: block; padding: 10px; }
.dict-conj-row { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 2.2rem; }
.dict-conj-item { font-size: .7rem; color: #aad; background: rgba(14,17,58,.15); border-radius: 10px; padding: 1px 7px; }
/* Grammar / Hangul guide */
.guide-section { margin-bottom: 14px; }
.guide-title { font-size: .75rem; text-transform: uppercase; letter-spacing: 1.5px; color: #ffd700; margin-bottom: 7px; }
.guide-row { font-size: .9rem; color: #cce; line-height: 1.8; padding: 1px 0; }
.guide-icon { display: inline-block; width: 1.6rem; text-align: center; font-size: 1rem; }
.guide-tag { display: inline-block; background: rgba(14,17,58,.25); border-radius: 4px; padding: 0 6px; color: #aad; min-width: 3.4rem; text-align: center; margin-right: 5px; font-size: .9rem; }
.guide-ex { color: #889; font-size: .84rem; margin-left: 6px; }
.guide-ex b { color: #adf; }
.hangul-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px,1fr)); gap: 5px; margin-top: 6px; }
.hg-cell { background: rgba(255,255,255,.06); border-radius: 7px; padding: 5px 3px; text-align: center; }
.hg-j { display: block; font-size: 1.5rem; line-height: 1.2; }
.hg-r { display: block; font-size: .66rem; color: #aad; margin-top: 2px; }

/* Options grid (in mcard) */
.settings-content { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; }
#settings-credits {
  margin-top: auto; padding-top: 20px; text-align: center;
  color: rgba(255,255,255,.38); font-size: 0.7rem; line-height: 1.55;
}
.credits-by { font-weight: 600; margin-bottom: 5px; }
.credits-thanks { font-style: italic; }
.gopts-grid { display: flex; flex-direction: column; gap: 6px; }
@media (max-height: 500px) {
  .gopts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .gopt-card:has(#chk-dict-prog) { grid-column: 1 / -1; }
}
.gopts-grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); }
.gopt-card {
  background: rgb(255 255 255 / 10%); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: 9px 12px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; width: 100%; box-sizing: border-box;
}
.gopt-label { font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.5); }
.lives-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

input[type=number] {
  width: 68px; padding: 6px 8px;
  background: #f7f7fa; border: none; outline: none;
  border-radius: 8px; color: #2b2b2b;
  font-family: inherit; font-size: 1.2rem; text-align: right;
  appearance: textfield;
  -moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Toggle switch */
.gopt-toggle { display: flex; align-items: center; cursor: pointer; }
.gopt-toggle input { display: none; }
.gopt-track {
  width: 38px; height: 22px; border-radius: 11px;
  background: rgba(255,255,255,.18); position: relative; transition: background .2s;
  display: block;
}
.gopt-toggle input:checked ~ .gopt-track { background: #0e113a; }
.gopt-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s;
}
.gopt-toggle input:checked ~ .gopt-track .gopt-thumb { transform: translateX(16px); }


/* ===== SHOP (title screen) ===== */
#shop-card { background: transparent; border-radius: 18px; padding: 0; overflow: hidden; }
#shop-header {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; padding: 12px 16px;
  cursor: pointer; border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  transition: background .15s;
}
#shop-header:hover { background: #f7f7fc; }
#shop-header-title { font-size: .95rem; font-weight: 500; color: #3e3e3e; }
#shop-wallet { color: #ffd700; font-weight: bold; margin-left: auto; margin-right: 16px; }
#shop-chevron { color: #999; font-size: .8rem; }
#shop-body { display: none; padding-top: 8px; }
#shop-body.open { display: block; }
.shop-section-title {
  font-size: .75rem; text-transform: uppercase; letter-spacing: 1px;
  color: #888; margin: 8px 0 6px; padding-left: 4px;
}
.shop-grid + .shop-section-title { margin-top: 18px; }
/* .shop-grid defined below for in-run shop */
.shop-item {
  background: #fff; border: 1px solid rgba(0,0,0,.09);
  border-radius: 12px; padding: 10px 12px;
  min-width: 90px; text-align: center; cursor: pointer;
  transition: all .15s; position: relative;
}
.shop-item:hover { background: #f0f0f8; transform: translateY(-1px); border-color: #0e113a; }
.shop-item.cant-afford { opacity: .4; cursor: not-allowed; }
.shop-item.cant-afford:hover { transform: none; border-color: rgba(0,0,0,.09); }
.shop-item-emoji { font-size: 2rem; }
.shop-item-name { font-size: .72rem; color: #555; margin: 3px 0 1px; }
.shop-item-price { font-size: .78rem; color: #a06600; font-weight: 600; background: rgba(255,200,0,.15); border-radius: 10px; padding: 1px 6px; }
.shop-item-count {
  position: absolute; top: 4px; right: 6px;
  font-size: .62rem; color: #999;
}
#shop-tooltip {
  position: fixed; z-index: 9999;
  background: #1a1a2e; color: #e0e0ff;
  border: 1px solid #0e113a; border-radius: 8px;
  padding: 6px 12px; font-size: .8rem;
  pointer-events: none; opacity: 0;
  transition: opacity .1s; white-space: normal;
  width: fit-content; max-width: 280px;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
#shop-tooltip.show { opacity: 1; }
.shop-number-guide {
  margin-top: 8px; padding: 4px 8px;
  font-size: .79rem; color: #aaa;
  text-align: center; border-top: 1px solid rgba(255,255,255,.1);
}

/* ===== GAME OVER ===== */
#scr-over {
  background: rgba(47, 29, 13, .68); backdrop-filter: blur(6px);
  padding: 18px 12px; overflow-y: auto; justify-content: safe center;
}
#game-over-panel {
  width: min(430px, 92vw); max-height: calc(100vh - 36px);
  overflow-y: auto;
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 26px 24px;
  color: #32170d;
  background: hsla(42, 28%, 95%, .98) url('../img/noise.svg') repeat;
  background-size: 200px;
  border: 1px solid rgba(80, 30, 10, .24);
  border-radius: 17px;
  box-shadow: 0 26px 76px rgba(22, 10, 3, .52);
}
#game-over-panel::-webkit-scrollbar-thumb { background: rgba(91, 49, 20, .28); }
#go-title {
  font-family: 'EZRA Serif', serif;
  font-size: clamp(2rem, 6vw, 3.25rem); color: #8d261c; text-align: center;
}
#go-detail { font-size: 1.05rem; color: rgba(53, 26, 14, .76); margin-top: 8px; }
#go-hiscore { font-size: .92rem; color: #9a5a12; margin-top: 6px; }
#go-support { margin-top: 18px; }
.support-callout {
  width: min(400px, 92vw); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 12px 14px 10px; border-radius: 15px;
  color: #4c2b1a; text-align: center;
  background: rgba(129, 79, 35, .075);
  border: 1px solid rgba(103, 54, 24, .2);
  box-shadow: 0 7px 18px rgba(74, 36, 12, .08);
}
.support-callout-heading {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  color: #7d2119; font-size: .96rem;
}
.support-callout-emoji { font-size: 1.2rem; line-height: 1; }
.support-callout-body {
  margin: 0; color: rgba(66, 35, 18, .74);
  font-size: .78rem; line-height: 1.38;
}
.support-callout-btn {
  min-height: 38px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 6px 10px; border-radius: 10px;
  color: #fffaf1; font-family: inherit; font-size: .78rem; font-weight: 600;
  text-decoration: none;
  background: #4a392b; border: 1px solid rgba(55, 35, 19, .72);
  transition: background .15s, border-color .15s, transform .15s;
}
.support-callout-btn:hover {
  background: #30281f; border-color: #30281f;
  transform: translateY(-1px);
}
.support-callout-btn img { width: 28px; height: 28px; }
.support-callout-pix {
  margin: 0; color: rgba(72, 40, 20, .58);
  font-size: .62rem; line-height: 1.35; user-select: text;
}
.support-callout-pix i { color: rgba(72, 40, 20, .84); }
#donate-pix i { color: rgba(255,255,255,.76); }
#game-over-panel .support-callout { width: 100%; }
#btn-restart {
  min-width: min(260px, 100%); margin-top: 20px; padding: 13px 28px;
  font-family: 'EZRA Serif', serif; font-size: 1.05rem; font-weight: 700;
  letter-spacing: .04em; border: 1px solid rgba(42, 33, 23, .76); border-radius: 13px;
  background: rgba(59, 53, 41, .94); color: #fffaf0; cursor: pointer;
  box-shadow: 0 5px 16px rgba(53, 31, 12, .2);
  transition: background .18s, box-shadow .18s, transform .18s;
}
#btn-restart:hover {
  background: rgb(48, 42, 32); box-shadow: 0 7px 20px rgba(53, 31, 12, .28);
  transform: translateY(-1px);
}

@media (max-height: 500px) {
  #scr-over { padding: 10px 12px; }
  #game-over-panel { max-height: calc(100vh - 20px); padding: 10px 12px 12px; }
  #go-title { font-size: 1.5rem; }
  #go-detail { margin-top: 4px; font-size: .82rem; }
  #go-hiscore { margin-top: 3px; font-size: .72rem; }
  #go-support { margin-top: 8px; }
  #scr-over .support-callout { padding: 7px 10px 6px; gap: 5px; }
  #scr-over .support-callout-heading { font-size: .78rem; gap: 5px; }
  #scr-over .support-callout-emoji { font-size: .98rem; }
  #scr-over .support-callout-body { font-size: .67rem; line-height: 1.3; }
  #scr-over .support-callout-btn { min-height: 30px; padding: 4px 8px; font-size: .69rem; }
  #scr-over .support-callout-btn img { width: 20px; height: 20px; }
  #scr-over .support-callout-pix { font-size: .54rem; }
  #btn-restart { margin-top: 8px; padding: 8px 22px; font-size: .84rem; }
}

/* ===== PAUSE SCREEN - redesign ===== */
#scr-pause {
  background: rgba(47, 29, 13, .68);
  backdrop-filter: blur(6px);
}
#pause-backdrop {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
#pause-panel {
  background: hsla(42, 28%, 95%, .98) url('../img/noise.svg') repeat;
  background-size: 200px;
  border: 1px solid rgba(80, 30, 10, .22);
  border-radius: 20px; padding: 24px 28px;
  width: min(480px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  color: #32170d;
  box-shadow: 0 24px 64px rgba(37, 18, 5, .45);
}
/* Landscape mobile: compact layout */
@media (max-height: 500px) {
  #pause-panel {
    padding: 12px 20px;
    gap: 8px;
    flex-direction: row; flex-wrap: wrap;
    align-items: flex-start;
  }
  #pause-top { width: 100%; }
  #pause-top h2 { font-size: 1.1rem; }
  #pause-run-stats { width: 100%; margin-top: 4px; }
  .pstat { padding: 6px 10px; }
  .pstat-val { font-size: 1rem; }
  #pause-mid-opts { min-width: 200px; gap: 4px; }
  .pause-opt-row { padding: 4px 8px; }
  .pause-btns { flex: 0 0 160px; gap: 6px; }
  .pause-btn { padding: 8px; font-size: .85rem; }
}
#pause-top h2 {
  font-family: 'EZRA Serif', serif;
  font-size: 1.6rem; font-weight: 700; text-align: center; color: #7d2119;
}
#pause-run-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-top: 16px;
}
.pstat {
  background: rgba(96, 51, 22, .055); border: 1px solid rgba(96, 51, 22, .15);
  border-radius: 12px; padding: 10px 14px;
}
.pstat-val { font-size: 1.35rem; font-weight: 700; color: #4a2414; }
.pstat-lbl { font-size: .72rem; color: rgba(74, 36, 20, .55); text-transform: uppercase; letter-spacing: .8px; margin-top: 2px; }
#pause-mid-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#pause-mid-opts .pause-opt-full { grid-column: span 2; }
.pause-opt-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(96, 51, 22, .045); border: 1px solid rgba(96, 51, 22, .11);
}
.pause-opt-label { font-size: .8rem; color: #573221; }
.pause-ui-size-control { display: flex; align-items: center; gap: 7px; }
#pause-ui-size { width: 90px; accent-color: #9a1818; }
#pause-ui-size-value {
  min-width: 2.8em;
  color: #573221;
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.dict-tab { font-family: inherit; }
.dict-tab:hover { border-color: #0e113a; }
#title-reset-btn { color: rgba(255,255,255,.25); }
.pause-btns { display: flex; flex-direction: column; gap: 10px; }
.pause-btn {
  padding: 13px; font-size: 1rem; width: 100%;
  font-family: 'EZRA Serif', serif; font-weight: 700; letter-spacing: .03em;
  border: 1px solid rgba(42, 33, 23, .74); border-radius: 13px;
  cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
  background: #3b3529; color: #fffaf0;
}
.pause-btn:hover { background: #30281f; transform: translateY(-1px); }
.pause-btn-outline {
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(89, 43, 19, .46);
  color: #512719;
}
.pause-btn-outline:hover { background: rgba(105, 57, 24, .09); border-color: #512719; }
#pause-panel .gopt-track { background: rgba(89, 43, 19, .18); }
#pause-panel .gopt-toggle input:checked ~ .gopt-track { background: #8d261c; }

/* Modifier / treasure / in-run shop screens */
#scr-modifier, #scr-shop, #scr-treasure {
  background: rgba(0,0,0,.8); backdrop-filter: blur(6px);
  justify-content: center; overflow-y: auto;
}
#scr-modifier .menu-card, #scr-shop .menu-card, #scr-treasure .menu-card {
  gap: 12px; padding: 24px; margin: auto 0;
}
@media (max-width: 600px) {
  #scr-modifier .menu-card, #scr-shop .menu-card, #scr-treasure .menu-card {
    padding: 16px; max-height: 85vh;
  }
}

/* ===== CASINO SCREEN ===== */
#scr-casino {
  background: rgba(10,0,20,.85); backdrop-filter: blur(6px);
  justify-content: center; overflow-y: auto;
}
.casino-card {
  gap: 16px; padding: 28px; margin: auto 0; max-width: 540px;
  border: 1px solid rgba(192,132,252,.35);
}
.casino-hint { color: #888; font-size: .85rem; margin: 0; }
.casino-slots { display: flex; gap: 12px; justify-content: center; }
.casino-slot {
  background: rgba(192,132,252,.12);
  border: 2px solid rgba(192,132,252,.4);
  border-radius: 12px; padding: 14px 10px;
  min-width: 110px; text-align: center; transition: background .08s;
}
.casino-slot.bad-outcome {
  background: rgba(220,50,50,.18); border-color: rgba(255,100,100,.5);
}
.casino-slot-emoji { font-size: 2.2rem; line-height: 1.1; }
.casino-slot-name  { font-size: .72rem; color: #bbb; margin-top: 6px; }
.casino-controls { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.casino-stop {
  padding: 10px 28px; font-family: inherit; font-size: .95rem;
  background: linear-gradient(135deg,#9333ea,#7e22ce);
  border: none; color: #fff; border-radius: 50px; cursor: pointer; transition: opacity .15s;
}
.casino-stop:hover { opacity: .85; }
.casino-accept {
  padding: 10px 28px; font-family: inherit; font-size: .95rem;
  background: linear-gradient(135deg,#22c55e,#16a34a);
  border: none; color: #fff; border-radius: 50px; cursor: pointer; transition: opacity .15s;
}
.casino-accept:hover { opacity: .85; }
.casino-accept.hidden, .casino-stop.hidden { display: none; }
.casino-slot.hidden { display: none; }
.casino-slot.casino-result {
  min-width: 160px; padding: 20px 24px;
  border-color: rgba(192,132,252,.8);
  box-shadow: 0 0 18px rgba(192,132,252,.35);
}
.casino-slot.casino-result .casino-slot-emoji { font-size: 3rem; }
.casino-slot.casino-result .casino-slot-name  { font-size: .88rem; color: #ddd; }
#modifier-choices {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; width: 100%;
}
.item-choice-card {
  background: #f7f7fa; border: 2px solid rgba(0,0,0,.09);
  border-radius: 14px; padding: 16px 14px;
  text-align: center; min-width: 130px; max-width: 160px;
  cursor: pointer; transition: all .15s; color: #1a1a2e;
}
.item-choice-card:hover { border-color: #0e113a; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(14,17,58,.25); }
.item-choice-card.permanent { border-color: rgba(255,200,0,.4); }
.item-choice-card.permanent:hover { border-color: #ffd700; box-shadow: 0 8px 20px rgba(255,215,0,.3); }
.choice-badge {
  font-size: .62rem; text-transform: uppercase; letter-spacing: 1px;
  background: rgba(14,17,58,.12); color: #0e113a;
  border-radius: 20px; padding: 2px 8px; margin-bottom: 8px; display: inline-block;
}
.permanent .choice-badge { background: rgba(255,200,0,.15); color: #b8860b; }
.choice-emoji { font-size: 2.5rem; margin: 6px 0; }
.choice-name { font-size: .82rem; font-weight: 600; margin-bottom: 4px; }
.choice-desc { font-size: .72rem; color: #666; }
#modifier-skip, #scr-modifier button:not(.item-choice-card),
#scr-shop button, #scr-treasure button {
  padding: 8px 24px; font-family: inherit;
  background: #f0f0f5; border: 1px solid #ddd;
  border-radius: 50px; color: #555; cursor: pointer;
  transition: all .15s; font-size: .9rem;
}
#scr-treasure button:first-of-type {
  background: linear-gradient(135deg, #ffd700, #cc9900);
  border: none; color: #000; font-weight: bold;
}
#treasure-items { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.treasure-item {
  background: #fff; border: 1px solid rgba(255,200,0,.3);
  border-radius: 12px; padding: 14px 18px; text-align: center;
}
.t-emoji { font-size: 2.2rem; display: block; }
.t-name { font-size: .75rem; color: #b8860b; margin-top: 4px; }
#shop-items-grid {
  width: 100%; max-height: 55vh; overflow-y: auto;
  padding: 4px 2px; align-self: stretch;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
  width: 100%;
  align-self: stretch;
}
.shop-item.sold-out { opacity: .4; cursor: default; }
.shop-item.sold-out:hover { transform: none; border-color: rgba(0,0,0,.09); }

/* ===== CANVAS ===== */
#gc { position: fixed; inset: 0; pointer-events: none; z-index: 1; }

/* ===== HUD ===== */
#hud {
  --hud-base-zoom: 1.25;
  position: fixed; top: 8px; left: 8px; right: 8px;
  display: none; align-items: stretch; gap: 8px;
  z-index: 50; pointer-events: none;
  zoom: var(--hud-base-zoom); transition: opacity .3s;
}
#inv-hud, #inv-hud * { pointer-events: all; }
#hcard-score { margin-left: auto; }
#hcard-wave { pointer-events: none; min-width: 170px; }
.wave-ring-wrap { pointer-events: all; cursor: pointer; }
#hcard-score { pointer-events: all; min-width: 140px; }

.hcard {
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px; padding: 8px 14px;
  color: #fff; font-size: .88rem;
  display: flex; flex-direction: column; justify-content: space-between;
}
.hlbl {
  font-size: .82rem; opacity: .55;
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-bottom: 6px;
}
.wave-body { display: flex; align-items: center; gap: 10px; }
/* Each small HUD nav item: fixed icon height so all items are the same total height */
.hud-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; margin: 0 4px; height: 2.5rem; }
.hud-nav-icon { height: 1.6rem; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; line-height: 1; }
.hud-nav-lbl  { font-size: .72rem; opacity: .65; white-space: nowrap; line-height: 1; }
.wave-ring-wrap { flex-shrink: 0; }
.wave-text { display: flex; flex-direction: column; }
#hw-num { font-size: 2rem; font-weight: bold; line-height: 1; }
#hw-boss { font-size: .82rem; opacity: .6; margin-top: 2px; white-space: nowrap; }

.score-body { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.score-vals { display: flex; flex-direction: column; text-align: right; }
#hs-val { font-size: 2rem; font-weight: bold; color: #ffd700; line-height: 1; }
#hs-best-row { font-size: .82rem; opacity: .45; margin-top: 2px; }
#hs-best-row[hidden] { display: none; }
#btn-pause {
  flex-shrink: 0;
  width: 50px; height: 50px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
}
#btn-pause:hover { background: rgba(255,255,255,.2); }
#btn-pause img { filter: invert(1); }

@media (max-width: 600px) {
  #hud { gap: 5px; }
  #hcard-wave { min-width: 0; padding: 6px 10px; }
  #hcard-score { min-width: 0; padding: 6px 10px; }
  #hw-num { font-size: 1.2rem; }
  .wave-ring-wrap svg { width: 36px; height: 36px; }
  #hs-val { font-size: 1.2rem; }
  #hs-best-row { display: none; }
  #btn-pause { width: 38px; height: 38px; font-size: 1.2rem; }
}

/* ── INVENTORY HUD ── */
#inv-hud {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: rgba(0,0,0,.38); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px; padding: 5px 8px 6px;
  min-width: 88px;
  margin-right: auto;
}
#inv-main-row { display: flex; align-items: center; gap: 4px; }
.inv-nav {
  background: rgba(255,255,255,.18); border: none;
  color: #fff; font-size: 1rem; cursor: pointer;
  border-radius: 8px; padding: 4px 7px; line-height: 1;
  transition: background .15s;
}
.inv-nav:hover { background: rgba(255,255,255,.35); }
#inv-slot {
  position: relative;
  width: 52px; height: 52px;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; cursor: pointer;
  overflow: hidden;
  transition: border-color .15s;
}
#inv-slot:hover { border-color: rgba(255,220,50,.9); }
#inv-slot-hover {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.68);
  opacity: 0; transition: opacity .15s;
  border-radius: 10px;
}
#inv-slot:hover #inv-slot-hover { opacity: 1; }
#inv-use-hover {
  font-size: .62rem; font-weight: 700; color: #fff;
  background: rgba(255,220,50,.85); border: none;
  border-radius: 6px; padding: 3px 9px; cursor: pointer;
  letter-spacing: .5px; transition: background .12s;
}
#inv-use-hover:hover { background: rgba(255,220,50,1); color: #222; }
#inv-count {
  position: absolute; bottom: 2px; right: 4px;
  font-size: .78rem; font-weight: 900; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.95);
  pointer-events: none; z-index: 1;
}
#inv-hud.unavailable { opacity: .25; pointer-events: none; }
#inv-item-name {
  font-size: .65rem; color: #fff; font-weight: 700;
  letter-spacing: .8px; text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.7);
  min-height: .8rem;
}

/* ── MINIMAP BUTTON ── */
#btn-map {
  position: fixed; top: 8px; right: 8px;
  display: none;
  width: 44px; height: 44px;
  background: rgba(0,0,0,.38); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px; color: #fff; font-size: 1.3rem;
  cursor: pointer; z-index: 51;
  transition: background .15s;
}
#btn-map:hover { background: rgba(0,0,0,.55); }

/* ── MINIMAP PANEL ── */
#map-panel {
  position: fixed; bottom: 0; right: 32px; top: auto; left: auto;
  background: rgba(10,10,24,.95); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px 12px 0 0; padding: 10px;
  z-index: 150;
  transition: opacity .2s;
}
#map-panel.off { opacity: 0; pointer-events: none; }
#map-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; font-size: .82rem; color: #ffd700; font-weight: 600;
}
.map-esc-btn {
  font-size: .58rem; font-weight: 700; line-height: 2;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-bottom: 2px solid rgba(255,255,255,.35);
  border-radius: 4px; padding: 2px 7px; color: rgba(255,255,255,.6);
  cursor: pointer; user-select: none;
  font-family: 'Pretendard', 'Noto Color Emoji', sans-serif; letter-spacing: .5px;
  box-shadow: 0 2px 0 rgba(0,0,0,.3);
}
.map-esc-btn:hover { color: #fff; background: rgba(255,255,255,.2); }
#book-expand-btn { margin-left: auto; }
#book-expand-btn .icon-fs-enter,
#book-expand-btn .icon-fs-exit { width: 10px; height: 10px; }
#book-expand-btn .icon-fs-exit { display: none; }
#book-panel.book-expanded #book-expand-btn .icon-fs-enter { display: none; }
#book-panel.book-expanded #book-expand-btn .icon-fs-exit  { display: inline-block; }
#minimap-grid {
  display: grid;
  gap: 2px;
}
.map-col-lbl, .map-row-lbl {
  font-size: .5rem; font-weight: 700; color: rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  user-select: none; pointer-events: none;
}
.map-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 3px;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.map-cell-hero {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1;
  pointer-events: none; user-select: none;
}

.map-cell.visited { background: rgba(60,80,120,.55); color: rgba(255,255,255,.7); cursor: pointer; }
.map-cell.visited:hover { background: rgba(14,17,58,.5); }
.map-cell.guide-only { background: rgba(50,60,100,.35); color: rgba(255,255,255,.45); cursor: default; }
.map-cell.guide-only:hover { background: rgba(60,70,120,.45); }
.map-cell.cleared { background: rgba(40,80,50,.6); }
.map-cell.current {
  background: rgba(14,17,58,.7) !important;
  box-shadow: 0 0 5px rgba(14,17,58,.8);
  animation: map-pulse 1s ease-in-out infinite;
}
/* Current room that's already cleared → green glow instead of blue */
.map-cell.current.cleared {
  background: rgba(40,160,70,.75) !important;
  box-shadow: 0 0 5px rgba(40,200,80,.8) !important;
  animation: map-pulse-green 1s ease-in-out infinite;
}
/* Boss room - always red */
.map-cell.boss-room {
  background: rgba(160,25,25,.45);
  color: rgba(255,110,110,.9);
  cursor: default;
}
.map-cell.boss-room.can-teleport { cursor: pointer; }
.map-cell.boss-room:hover { background: rgba(200,40,40,.55); }
.map-cell.boss-room.current {
  background: rgba(210,40,40,.75) !important;
  box-shadow: 0 0 6px rgba(255,70,70,.85) !important;
  animation: map-pulse-red 1s ease-in-out infinite;
}
/* Teacher room - near-white */
.map-cell.teacher-room {
  background: rgba(235,237,240,.55);
  color: rgba(50,60,70,.95);
  cursor: default;
}
.map-cell.teacher-room.can-teleport { cursor: pointer; }
.map-cell.teacher-room:hover {
  background: rgba(215,220,228,.75);
}
.map-cell.teacher-room.current {
  background: rgba(220,225,232,.82) !important;
  box-shadow: 0 0 8px rgba(170,185,205,.75) !important;
  animation: map-pulse-teacher 1s ease-in-out infinite;
}
@keyframes map-pulse-teacher { 0%,100% { opacity:1; } 50% { opacity:.6; } }
/* Shop room - always yellow */
.map-cell.shop-room {
  background: rgba(140,110,10,.45);
  color: rgba(255,225,80,.9);
  cursor: default;
}
.map-cell.shop-room.can-teleport { cursor: pointer; }
.map-cell.shop-room:hover { background: rgba(180,145,20,.55); }
.map-cell.shop-room.current {
  background: rgba(200,165,25,.75) !important;
  box-shadow: 0 0 6px rgba(255,215,50,.85) !important;
  animation: map-pulse-yellow 1s ease-in-out infinite;
}
/* Casino room - always purple */
.map-cell.casino-room {
  background: rgba(100,30,160,.45);
  color: rgba(220,160,255,.9);
  cursor: default;
}
.map-cell.casino-room.can-teleport { cursor: pointer; }
.map-cell.casino-room:hover { background: rgba(130,50,200,.55); }
.map-cell.casino-room.current {
  background: rgba(150,60,220,.75) !important;
  box-shadow: 0 0 6px rgba(200,120,255,.85) !important;
  animation: map-pulse-purple 1s ease-in-out infinite;
}
@keyframes map-pulse        { 0%,100% { opacity:1; } 50% { opacity:.6;  } }
@keyframes map-pulse-green  { 0%,100% { opacity:1; } 50% { opacity:.55; } }
@keyframes map-pulse-red    { 0%,100% { opacity:1; } 50% { opacity:.55; } }
@keyframes map-pulse-yellow { 0%,100% { opacity:1; } 50% { opacity:.55; } }
@keyframes map-pulse-purple { 0%,100% { opacity:1; } 50% { opacity:.55; } }
#map-legend {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 6px;
  margin-top: 8px; font-size: .65rem; color: rgba(255,255,255,.45);
}

/* ── DICTIONARY PANEL ── */
#book-panel {
  position: fixed; bottom: 0; left: 32px; top: auto; right: auto;
  background: rgba(10,10,24,.95); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px 12px 0 0; padding: 10px;
  z-index: 150;
  transition: opacity .2s;
  width: 400px;
  display: flex; flex-direction: column;
}
#book-panel.off { opacity: 0; pointer-events: none; }
#book-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; font-size: 1rem; color: #ffd700; font-weight: 600;
}
#book-content {
  flex: 1;
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.dict-tabs {
  display: flex; gap: 6px; margin-bottom: 6px;
  flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
}
.dict-tab {
  font-size: 0.9rem; padding: 4px 12px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 4px; color: rgba(255,255,255,.7);
  cursor: pointer; user-select: none;
  transition: all .1s;
  flex-shrink: 0; white-space: nowrap;
}
.dict-tab:hover { background: rgba(255,255,255,.15); color: #fff; }
.dict-tab.active {
  background: rgba(14,17,58,.6);
  border-color: rgba(14,17,58,.8);
  color: #fff;
}
#book-dict-search {
  font-size: .7rem; padding: 4px 6px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 4px; color: #fff;
}
#book-dict-search::placeholder { color: rgba(255,255,255,.5); }
#book-dict-list {
  color: white;
  flex: 1;
  margin-top: 6px;
  overflow-y: auto;
  min-height: 0;
}
.dict-word {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 6px; margin-bottom: 2px;
  background: rgba(255,255,255,.05);
  border-radius: 4px;
  font-size: .65rem;
  cursor: pointer;
}
.dict-word:hover { background: rgba(255,255,255,.1); }
.dict-word.hidden { opacity: 0.3; }
.dict-word.hidden .dict-korean { filter: blur(3px); }
.dict-word .dict-korean { font-weight: 600; color: #ffd700; }
.dict-word .dict-english { color: rgba(255,255,255,.8); }
.dict-word .dict-hanja { font-size: .5rem; color: rgba(255,255,255,.5); margin-left: 4px; }
.dict-word .dict-kills { font-size: .5rem; color: rgba(255,255,255,.4); margin-left: auto; }
/* ===== TOUCH-MODE MAP PANEL LAYOUT ===== */
body.touch-mode #map-panel:not(.off) {
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "header     header"
    "grid       nextworlds"
    "legend     legend";
  column-gap: 20px;
  row-gap: 10px;
  overflow: hidden; /* outer panel clips; inner items scroll individually */
}
body.touch-mode #map-panel:not(.off) #map-panel-header {
  grid-area: header;
}
body.touch-mode #map-panel:not(.off) #minimap-grid {
  grid-area: grid;
  align-self: start;
  grid-template-columns: 16px repeat(8, 34px) !important;
  grid-template-rows: 12px repeat(6, 34px) !important;
  gap: 2px !important;
}
body.touch-mode #map-panel:not(.off) .map-cell {
  width: 34px; height: 34px; font-size: .95rem;
}
body.touch-mode #map-panel:not(.off) #map-legend {
  grid-area: legend;
  grid-template-columns: repeat(8, 1fr);
  margin-top: 0;
  font-size: .7rem;
  color: rgba(255,255,255,.5);
  align-self: end;
}
body.touch-mode #map-panel:not(.off) #map-perms-row {
  grid-area: nextworlds;
  border-top: none;
  margin-top: 0;
  padding-top: 0;
  border-left: 1px solid rgba(255,255,255,.12);
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;

  min-height: 0; /* allow flex child to shrink in grid */
}
body.touch-mode #map-panel:not(.off) #map-next-worlds {
  display: flex;
  flex-direction: column;
  gap: 5px;
  letter-spacing: 0;
}
/* Next world rows rendered by updateMapExtras in touch mode */
body.touch-mode .map-next-world-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  cursor: default;
  flex-shrink: 0;
}
body.touch-mode .map-next-world-row .mnw-emoji { font-size: 1.5rem; line-height: 1; }
body.touch-mode .map-next-world-row .mnw-name  {
  font-size: .82rem; color: rgba(255,255,255,.75);
  letter-spacing: 0;
}

/* ── PERMANENT ITEMS BAR (lives inside ctrl-panel) ── */
#perm-bar {
  width: min(300px, 82vw);
  display: flex; flex-wrap: wrap;
  pointer-events: auto; overflow: visible;
  gap: clamp(2px, 0.5vh, 4px); align-items: center; justify-content: center;
}
.perm-slot {
  font-size: clamp(0.9rem, 4.5vh, 1.6rem);
  background: rgba(0,0,0,.35); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: clamp(5px, 1vh, 8px);
  width: clamp(26px, 5.5vh, 46px); height: clamp(26px, 5.5vh, 46px);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: default;
}
.perm-slot:hover { transform: scale(1.15); }

/* ===== PLAYER AREA ===== */
#player-area {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: none; flex-direction: row; justify-content: center; gap: 0.5rem;
  align-items: end;
  padding-left: 5vw; padding-right: 5vw;
  padding-bottom: calc(7vh + 8px + env(safe-area-inset-bottom, 0px));
  z-index: 40; pointer-events: none; transition: opacity .3s;
}
#player-inner {
  display: flex; flex-direction: column;
  align-items: center;
  position: relative; /* anchor for abs-positioned keyboard panels */
}
#inp-wrap { pointer-events: all; }
#pl-emoji-row {
  display: flex; align-items: center;
  margin-bottom: 8px;
}
#pl-emoji-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#pl-emoji {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
}
body.phase-title #pl-emoji {
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.7)) drop-shadow(0 2px 6px rgba(0,0,0,.55));
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, opacity .3s;
  line-height: 1;
  user-select: none;
}
/* SVG avatar in player slot - sized by font-size via 1em */
#pl-emoji svg { width: 1em; height: 1em; display: block; flex-shrink: 0; }
/* SVG avatar in door-walk ghost - sized via inline width/height on parent */
#pl-door-ghost svg { width: 100%; height: 100%; display: block; }
/* SVG avatar on minimap hero cell */
.map-cell-hero svg { width: 1rem; display: block; }
#spell-ico {
  position: absolute;
  bottom: -2px; right: -6px;
  font-size: clamp(1.4rem, 2.7vh, 1.75rem);
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
  opacity: 0;
  transition: opacity .3s ease;
}
#spell-ico.visible {
  opacity: 1;
}
#pl-chevron {
  display: none;
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  font-size: 1.3rem; line-height: 1;
  color: rgba(255,255,255,.35);
  pointer-events: none;
  animation: chevronBounce 1.8s ease-in-out infinite;
  white-space: nowrap;
}
#pl-chevron.coins-flash {
  animation: coinFlash .35s ease-out forwards;
  font-size: 1.1rem;
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255,210,0,.7);
  top: -28px;
}
@keyframes coinFlash {
  0%   { transform: translateX(-50%) translateY(0) scale(.8); opacity:0; }
  25%  { transform: translateX(-50%) translateY(-6px) scale(1.1); opacity:1; }
  100% { transform: translateX(-50%) translateY(-4px) scale(1); opacity:1; }
}
@keyframes chevronBounce {
  0%, 100% { transform: translateX(-50%) translateY(0);   opacity: .2; }
  50%       { transform: translateX(-50%) translateY(-4px); opacity: .5; }
}

/* ── Mini keyboard panels (shown in Korean IME mode) ── */
.kb-panel {
  display: flex; flex-direction: column; gap: 4px;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.kb-panel.visible { visibility: visible; opacity: 1; pointer-events: all; }

/* Keep the touch keyboard readable over the game scene. */
body.touch-mode .kb-panel.visible {
  padding: 6px;
  background: rgba(3, 8, 26, .88);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  box-shadow: 0 5px 18px rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.kb-row {
  display: flex; gap: 3px;
  flex: 1; align-items: stretch;
}
#kb-left  .kb-row { justify-content: flex-end; }
#kb-right .kb-row { justify-content: flex-start; }

.kb-key {
  position: relative;
  width: 46px; height: 46px; flex: none;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
  border-bottom: 2px solid rgba(255,255,255,.25);
  border-radius: 6px; box-sizing: border-box;
  overflow: hidden;
  transition: background .1s, border-color .1s;
}
body.touch-mode .kb-key {
  background: rgba(30, 36, 62, .82);
}
/* Home-row bump keys (F/ㄹ and J/ㅓ) - 2× thicker bottom border */
.kb-key.kb-home {
  border-bottom: 3px solid rgba(255,255,255,.42);
}
.kb-key.lit {
  background: rgba(255,255,255,.38);
  border-color: rgba(255,255,255,.65);
}
/* Main jamo - top-left, large */
.kb-main-char {
  position: absolute; top: 3px; left: 4px;
  font-size: 1.3rem; line-height: 1;
  color: rgba(255,255,255,.7);
  font-family: 'Pretendard', sans-serif;
  transition: color .1s, font-size .1s;
}
/* Shift jamo - top-right, small, transparent */
.kb-shift-char {
  position: absolute; top: 3px; right: 4px;
  font-size: .72rem; line-height: 1;
  color: rgba(255,255,255,.28);
  font-family: 'Pretendard', sans-serif;
  transition: color .1s, font-size .1s;
}
/* Latin letter - bottom-right, tiny, very transparent */
.kb-latin-char {
  position: absolute; bottom: 2px; right: 4px;
  font-size: .75rem; line-height: 1;
  color: rgba(255,255,255,.4);
  font-family: 'Pretendard', sans-serif;
  transition: color .1s; letter-spacing: 0;
  text-transform: uppercase;
}
/* Numbers Opacity */
.kb-num-btn { opacity: 0.4; }
/* Lit state */
.kb-key.lit .kb-main-char  { color: rgba(255,255,255,.98); }
.kb-key.lit .kb-shift-char { color: rgba(255,255,255,.7);  }
.kb-key.lit .kb-latin-char { color: rgba(255,255,255,.35); }
/* Shifted state: swap position and prominence of main ↔ shift */
.kb-panel.shifted .kb-main-char  { font-size: .72rem; color: rgba(255,255,255,.28); left: auto; right: 4px; }
.kb-panel.shifted .kb-shift-char { font-size: 1.3rem; color: rgba(255,255,255,.7); right: auto; left: 4px; }
.kb-panel.shifted .kb-key.lit .kb-main-char  { color: rgba(255,255,255,.7);  }
.kb-panel.shifted .kb-key.lit .kb-shift-char { color: rgba(255,255,255,.98); }
@keyframes plEnter {
  0%   { opacity: 0; transform: translateY(-40px) scale(.7); }
  60%  { opacity: 1; transform: translateY(6px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes plExit {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  40%  { opacity: 1; transform: translateY(-12px) scale(1.05); }
  100% { opacity: 0; transform: translateY(-50px) scale(.7); }
}
#pl-emoji.entering { animation: plEnter .45s ease-out forwards; }
#pl-emoji.exiting  { animation: plExit  .3s  ease-in  forwards; }

/* Door transition ghost - floats over canvas during door walk */
#pl-door-ghost {
  position: fixed;
  font-size: 4rem;
  pointer-events: none;
  z-index: 60;
  line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
  transform-origin: center center;
  display: none;
}

/* Full-screen black overlay for door transition */
#door-overlay {
  position: fixed; inset: 0; z-index: 59;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
#inp-wrap {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(12px);
  border: 2px solid rgba(255,255,255,.3); border-radius: 30px;
  padding: 8px 18px;
  transition: border-color .18s;
}
#inp-wrap:focus-within { border-color: rgba(255,255,255,.7); }
#typing {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: #fff; font-family: 'Pretendard', 'Noto Color Emoji', sans-serif;
  font-size: 1rem; caret-color: #ff4488;
  text-align: center;
  user-select: text; -webkit-user-select: text;
}
#typing::placeholder { color: rgba(255,255,255,.3); }
#typing.frozen {
  background: rgba(140,210,255,.4) !important;
  color: rgba(200,235,255,.6) !important;
  caret-color: transparent;
}
#pl-lives { font-size: .88rem; margin-bottom: 8px; max-width: 440px; text-align: center; }

/* ===== DOOR BUTTONS ===== */
.door-btn {
  position: fixed;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 52;
  padding: 0;
}
/* boss-door: visual is canvas-only (dark red fill in drawDoors); DOM btn stays transparent */


/* ===== ANNOUNCEMENTS ===== */
#announce {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 160; /* high z-index: above teacher screen */
}
body.phase-title #announce { visibility: hidden; }
body:has(#ctrl-panel:not(.off)) #announce,
body:has(#map-panel:not(.off)) #announce,
body:has(#book-panel:not(.off)) #announce { visibility: hidden; }
body:has(#ctrl-panel:not(.off)) #tutorial-box { opacity: 0; pointer-events: none; }
body.phase-title #player-area,
body.phase-title #map-panel,
body.phase-title #book-panel { visibility: hidden !important; }
#announce-txt {
  font-size: clamp(2.8rem, 9vw, 6rem); color: #fff;
  text-shadow: 0 0 30px rgba(255,210,80,.8), 0 4px 10px rgba(0,0,0,.6);
  opacity: 0; transition: opacity .35s ease;
  text-align: center; padding: 0 16px;
  max-width: 92vw; word-break: break-word;
}
#announce-txt.on { opacity: 1; }
@media (max-height: 600px) { #announce-txt { font-size: clamp(1.1rem, 4.5vw, 2rem); } }

/* ===== DICT UNLOCK NOTIFICATION ===== */
#dict-unlock-notif {
  position: fixed; left: 8px; top: 90px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  border-radius: 10px;
  padding: 5px 10px;
  font-size: .78rem; font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  pointer-events: none; z-index: 55;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
}
#dict-unlock-notif.on { opacity: 1; transform: translateY(0); }
#dict-unlock-notif.off { display: none; }

/* ===== FREEZE OVERLAY ===== */
#freeze-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(100,180,255,.28);
  pointer-events: none; opacity: 0;
  transition: opacity .15s;
}
#freeze-overlay.on { opacity: 1; }

/* ===== WEATHER CANVAS ===== */
#wx-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: .72; }

/* ===== DAY/NIGHT CANVAS (always visible, never opacity-animated) ===== */
#dn-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 3; }

/* In title phase: elevate weather/day-night above the menu UI */
body.phase-title #wx-canvas { z-index: 210; }
body.phase-title #dn-canvas { z-index: 211; }

/* ===== CTRL QUICK-ACTION PANEL ===== */
#ctrl-panel {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  pointer-events: auto; /* blocks clicks to elements behind the panel */
}
#ctrl-panel.off { display: none; }

.ctrl-wallet {
  position: absolute; top: 20px; left: 24px;
  font-size: 2.4rem; font-weight: 900; color: #ffd700;
  text-shadow: 0 2px 10px rgba(0,0,0,.95);
  pointer-events: none;
}
.ctrl-esc-btn {
  position: absolute; top: 16px; right: 20px;
  display: flex; align-items: center; justify-content: center; gap: 5px; flex-direction: column;
  background: rgba(255,255,255,.22);
  border: 1.5px solid rgba(255,255,255,.4);
  border-bottom: 3px solid rgba(255,255,255,.55);
  border-radius: 10px; color: #fff; font-size: 1.3rem; font-weight: 800;
  padding: 8px 22px; cursor: pointer; pointer-events: auto;
  box-shadow: 0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15);
  font-family: 'Pretendard', 'Noto Color Emoji', sans-serif;
  letter-spacing: .5px; line-height: 1;
  transition: filter .1s, transform .08s;
}
.ctrl-esc-btn:hover { filter: brightness(1.2); }
.ctrl-esc-btn:active { transform: translateY(1px); filter: brightness(.9); }

/* Action buttons (outside center panel, above inventory) */
.ctrl-actions {
  display: flex; gap: 10px;
  width: min(300px, 82vw);
}
.ctrl-action-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.18) 100%);
  border: 1.5px solid rgba(255,255,255,.4);
  border-bottom: 3px solid rgba(255,255,255,.55);
  border-radius: 10px; color: #fff;
  padding: 10px 8px 8px;
  cursor: pointer; pointer-events: auto;
  box-shadow: 0 3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
  font-family: 'Pretendard', 'Noto Color Emoji', sans-serif;
  transition: filter .1s, transform .08s;
}
.ctrl-action-btn:hover { filter: brightness(1.2); }
.ctrl-action-btn:active { transform: translateY(1px); filter: brightness(.9); }
.cak-letter {
  font-size: 1.5rem; font-weight: 900; line-height: 1;
  color: #fff; letter-spacing: 0;
}
.cak-sub {
  font-size: .6rem; font-weight: 700; color: rgba(255,255,255,.75);
  text-transform: uppercase; letter-spacing: .5px; text-align: center;
  line-height: 1.2;
}

/* Center panel: inventory */
.ctrl-center {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: rgba(0,0,0,.65); backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255,255,255,.28); border-radius: 18px;
  padding: 18px 22px;
  width: min(300px, 82vw);
  box-shadow: 0 8px 32px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
}

.ctrl-inv-panel {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
}
.ctrl-nav {
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.18) 100%);
  border: 1.5px solid rgba(255,255,255,.4);
  border-bottom: 3px solid rgba(255,255,255,.55);
  color: #fff; font-size: 1rem; cursor: pointer; pointer-events: auto;
  border-radius: 8px; padding: 5px 10px;
  box-shadow: 0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.18);
  flex-shrink: 0;
  visibility: hidden;
  transition: filter .1s, transform .08s;
}
.ctrl-nav:hover { filter: brightness(1.2); }
.ctrl-nav:active { transform: translateY(1px); }

.ctrl-inv-slot {
  position: relative; flex: 1;
  height: 72px;
  border: 2px solid rgba(255,255,255,.5); border-radius: 14px;
  background: rgba(0,0,0,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.8rem;
  overflow: hidden;
}
#ctrl-inv-count {
  position: absolute; bottom: 3px; right: 5px;
  font-size: .8rem; font-weight: 900; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.95);
}
.ctrl-inv-name {
  font-size: .72rem; color: #ddd; font-weight: 700;
  letter-spacing: .8px; text-align: center;
  text-transform: uppercase; min-height: .9rem;
}
.ctrl-inv-dots {
  display: flex; gap: 5px; align-items: center; justify-content: center;
  min-height: 7px;
}
.ctrl-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.25);
  flex-shrink: 0;
}
.ctrl-dot.active { background: rgba(255,255,255,.9); }
.ctrl-inv-desc {
  font-size: .6rem; color: rgba(255,255,255,.5);
  text-align: center; line-height: 1.3; min-height: .75rem;
}
.ctrl-use-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(255,220,50,.38) 0%, rgba(255,200,30,.25) 100%);
  border: 1.5px solid rgba(255,220,50,.6);
  border-bottom: 3px solid rgba(255,220,50,.8);
  border-radius: 10px; color: #ffe066; font-size: 1.4rem; font-weight: 900;
  cursor: pointer; pointer-events: auto; padding: 8px 0; min-height: 2.4rem;
  box-shadow: 0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,100,.12);
  font-family: 'Pretendard', 'Noto Color Emoji', sans-serif;
  transition: filter .1s, transform .08s;
}
.ctrl-use-btn:not(:disabled):hover { filter: brightness(1.2); }
.ctrl-use-btn:not(:disabled):active { transform: translateY(1px); }
.ctrl-use-btn:disabled { opacity: .3; cursor: default; }

/* ===== CTRL HINT + IME TOGGLE (in inp-wrap) ===== */
#ctrl-hint, #ime-toggle, #touch-space-btn {
  font-size: .58rem; font-weight: 700;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-bottom: 2px solid rgba(255,255,255,.35);
  border-radius: 4px; padding: 2px 6px; color: rgba(255,255,255,.55);
  user-select: none; flex-shrink: 0;
  font-family: 'Pretendard', 'Noto Color Emoji', sans-serif;
  letter-spacing: .5px;
  box-shadow: 0 2px 0 rgba(0,0,0,.3);
  width: 42px;
}
#ctrl-hint  { cursor: default; }
#ime-toggle { cursor: pointer; transition: color .15s, background .15s; }
#touch-space-btn { display: none; cursor: pointer; transition: color .15s, background .15s; text-align: center; }
#touch-space-btn:active { background: rgba(255,255,255,.22); color: rgba(255,255,255,.85); }
#ime-toggle:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.2); }
#ime-toggle.active {
  color: #fff;
  background: rgba(100,180,255,.25);
  border-color: rgba(100,180,255,.5);
  border-bottom-color: rgba(100,180,255,.7);
}


/* ===== KB KEY WRAPPER (number labels in touch mode) ===== */
.kb-key-wrap {
  display: flex;
  flex-direction: column;
  width: auto;
}
.kb-key-num {
  display: none;
  font-size: .52rem; line-height: 1;
  color: rgba(255,255,255,.45);
  pointer-events: none; user-select: none;
  font-family: 'Pretendard', sans-serif;
}
.kb-latin-upper {
  display: none; /* only shown in touch 영-mode */
  position: absolute; top: 3px; left: 4px;
  font-size: 1.1rem; line-height: 1;
  color: rgba(255,255,255,.75);
  font-family: 'Pretendard', sans-serif;
}

/* ===== TOUCH SPECIAL KEYS (shift / 한영 / ⌫ / ⏎) ===== */
#kb-touch-shift {
  background: rgba(100,160,255,.22);
  border-color: rgba(100,160,255,.45);
  border-bottom-color: rgba(100,160,255,.65);
  color: rgba(180,215,255,.9);
}
#kb-touch-shift.active {
  background: rgba(100,160,255,.45) !important;
  border-color: rgba(100,160,255,.8) !important;
}
#kb-touch-shift.caps {
  background: rgba(30,110,255,.65) !important;
  border-color: rgba(80,160,255,1) !important;
  border-bottom-color: rgba(130,200,255,1) !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(60,140,255,.5) !important;
}
#kb-touch-backspace {
  background: rgba(255,110,70,.22);
  border-color: rgba(255,110,70,.4);
  border-bottom-color: rgba(255,110,70,.6);
  color: rgba(255,180,160,.9);
}
#kb-han-toggle {
  background: rgba(255,200,60,.16);
  border-color: rgba(255,200,60,.32);
  border-bottom-color: rgba(255,200,60,.52);
  color: rgba(255,225,140,.9);
}
#kb-touch-enter {
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
#kb-touch-enter.has-input {
  background: rgba(60,210,110,.35);
  border-color: rgba(60,210,110,.65);
  border-bottom-color: rgba(60,210,110,.85);
  box-shadow: 0 0 8px rgba(60,210,110,.45);
  color: #fff;
}
.kb-touch-special {
  width: 46px; height: 46px; flex: none;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-bottom: 2px solid rgba(255,255,255,.3);
  border-radius: 6px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.75);
  font-size: .85rem;
  cursor: pointer; touch-action: manipulation; user-select: none;
  font-family: 'Pretendard', 'Noto Color Emoji', sans-serif;
  transition: background .1s, border-color .1s;
}
.kb-touch-special:active,
.kb-touch-special.active { background: rgba(255,255,255,.35); border-color: rgba(255,255,255,.65); color: #fff; }
.kb-touch-special.caps { background: rgba(100,200,255,.35); border-color: rgba(100,200,255,.6); }

/* ── Keyboard hint: next-jamo guide (Dojang / World 2) ─────── */
@keyframes kbHintPulse {
  0%, 100% { background: rgba(50,190,90,.22); border-color: rgba(80,255,140,.5); }
  50%       { background: rgba(50,190,90,.55); border-color: rgba(80,255,140,.85); }
}
@keyframes kbBspHintPulse {
  0%, 100% { background: rgba(220,70,50,.22); border-color: rgba(255,110,80,.5); }
  50%       { background: rgba(220,70,50,.52); border-color: rgba(255,110,80,.88); }
}
/* PC mode: dim all keys, highlight one */
body.kb-hint-mode .kb-key { opacity: 0.32; transition: opacity .15s; }
body.kb-hint-mode .kb-touch-special { opacity: 0.32; transition: opacity .15s; }
body.kb-hint-mode .kb-key.kb-hint { opacity: 1 !important; animation: kbHintPulse .75s ease-in-out infinite; }
body.kb-hint-mode .kb-touch-special.kb-hint { opacity: 1 !important; animation: kbHintPulse .75s ease-in-out infinite; }
body.kb-hint-mode #kb-touch-backspace.kb-hint { animation: kbBspHintPulse .75s ease-in-out infinite; }
/* Touch mode: no dimming, standalone pulse on the specific key */
.kb-key.kb-hint { animation: kbHintPulse .75s ease-in-out infinite; }
.kb-touch-special.kb-hint { animation: kbHintPulse .75s ease-in-out infinite; }
#kb-touch-backspace.kb-hint { animation: kbBspHintPulse .75s ease-in-out infinite; }
/* PC shift badge: hidden until kb-hint is applied */
.kb-pc-shift-badge { display: none; }
body.kb-hint-mode .kb-pc-shift-badge.kb-hint {
  display: flex; opacity: 1 !important;
  animation: kbHintPulse .75s ease-in-out infinite;
}

/* ===== SHOW/HIDE BY MODE ===== */
.touch-only { display: none; }
body.touch-mode .touch-only { display: inline; }
body.touch-mode .no-touch   { display: none; }

/* PAUSE button: touch mode shows only PAUSE, large */
body.touch-mode .ctrl-esc-btn p { font-size: 1.3rem !important; line-height: 0.8 !important; margin-top: 5px !important; margin-bottom: 0 !important; font-weight: 800 !important; }

/* ===== TOUCH MODE ===== */
body.touch-mode #ctrl-hint       { display: none         !important; }
body.touch-mode #touch-space-btn { display: inline-flex  !important; align-items: center; justify-content: center; }
body.touch-mode #inv-hud          { display: none   !important; }
body.touch-mode #inp-wrap         { cursor: pointer !important; }
body.touch-mode #pl-chevron       { display: block; }
body.touch-mode #hud-backpack-btn { display: flex !important; flex-direction: column; align-items: center; }
body.touch-mode #typing { caret-color: transparent; cursor: pointer; user-select: none; }
body.touch-mode #hcard-score .hlbl { display: none; }
/* kb-panels-active: layout now baked into #player-area base rule */
body.touch-mode #player-area {
  justify-content: space-between !important;
  z-index: 58;
}
body.touch-mode #ime-toggle { visibility: hidden; }
body.touch-mode #hw-room, body.touch-mode #hud-clock-time { line-height: 0; margin-top: 5px; }
body.touch-mode .wave-ring-wrap { display: flex; }
body.touch-mode #hcard-wave { justify-content: center; }
/* #pl-emoji and #spell-ico sizes are screen-height responsive (clamp in base rule) */

/* Key size: smaller on short screens (landscape mobile) - no touch-mode dependency */
@media (max-height: 680px) {
  .kb-key, .kb-touch-special { width: 40px; height: 40px; }
}

/* Korean mode: show uppercase latin letter at bottom-right */
.kb-panel:not(.latin-mode) .kb-latin-char { text-transform: uppercase; }

/* 영 (latin) mode: lowercase (big) at top-left, uppercase (small) at top-right, no bottom */
.kb-panel.latin-mode .kb-main-char  { visibility: hidden; }
.kb-panel.latin-mode .kb-shift-char { visibility: hidden; }
/* lowercase char becomes primary - move to top-left, enlarge */
.kb-panel.latin-mode .kb-latin-char {
  bottom: auto; top: 3px; left: 4px; right: auto;
  font-size: 1.1rem; color: rgba(255,255,255,.75);
  text-transform: none;
}
/* Shift in 영 mode: show latin char as uppercase */
.kb-panel.latin-mode.shifted .kb-latin-char { text-transform: uppercase; }
/* uppercase char becomes secondary - top-right, small */
.kb-panel.latin-mode .kb-latin-upper {
  display: block;
  top: 3px; left: auto; right: 4px;
  font-size: .6rem; color: rgba(255,255,255,.35);
}

/* Drag handle on player emoji in touch mode */
body.touch-mode #pl-emoji-wrap { pointer-events: all; cursor: grab; touch-action: none; }

/* Ctrl panel: wider on small screens; zoom applied via _applyCtrlZoom() in JS */
body.touch-mode #perm-bar,
body.touch-mode .ctrl-actions,
body.touch-mode .ctrl-center { width: min(90vw, 320px); }
body.touch-mode .ctrl-wallet { font-size: 1.5rem; }
body.touch-mode .cak-letter  { display: none; }
body.touch-mode .cak-sub     { font-size: .75rem; color: #fff; }
/* Map panel and ctrl zoom: only apply 1.2/1.5× on tall screens */
@media (min-height: 700px) {
  #map-panel { zoom: 1.2; }
  .ctrl-actions, .ctrl-center, #perm-bar { zoom: 1.5; }
}

/* ===== HUD TOUCH MODE REDESIGN ===== */
body.touch-mode #hud-world-lbl { display: none; }
body.touch-mode #hcard-score { min-width: 0; }
/* HUD zoom and card padding scale with screen height, not touch mode */
@media (max-height: 680px) {
  #hud { --hud-base-zoom: 0.9; }
  .hcard { padding: 8px 10px; }
}
body.touch-mode .wave-body { justify-content: center; }
/* Right HUD card: show only pause button, hide score values */
body.touch-mode .score-vals { display: none; }
body.touch-mode .score-body { justify-content: center; }
/* Ring-arc area: clickable in both modes - cursor set globally in base rule */

/* ===== GROUND ITEMS ===== */
#ground-items { position: fixed; inset: 0; pointer-events: none; z-index: 49; overflow: visible; }
.gitem {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none; user-select: none;
  width: 84px; height: 84px; overflow: visible;
  animation: coin-bob 1.8s ease-in-out infinite alternate;
  filter: drop-shadow(3px 4px 6px rgba(0,0,0,.55));
}
.gitem svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gitem-hanja {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; font-family: 'Song Myung', 'Noto Color Emoji', serif;
  font-weight: 700; z-index: 1;
}
@keyframes coin-bob {
  from { transform: translateY(0px); filter: drop-shadow(3px 5px 7px rgba(0,0,0,.55)); }
  to   { transform: translateY(-6px); filter: drop-shadow(3px 10px 10px rgba(0,0,0,.35)); }
}
.gitem-coin-group { animation: coin-glow 1.4s ease-in-out infinite alternate; }
@keyframes coin-glow {
  from { filter: drop-shadow(0 0 3px var(--coin-glow-a)); }
  to   { filter: drop-shadow(0 0 10px var(--coin-glow-b)) drop-shadow(0 0 20px var(--coin-glow-a)); }
}
.gitem[data-coin="gold"]   { --coin-fill:#ffe033; --coin-rim:#b8860b; --coin-text:#5a3800; --coin-glow-a:rgba(255,200,30,.7); --coin-glow-b:rgba(255,220,80,1); }
.gitem[data-coin="silver"] { --coin-fill:#e8e8e8; --coin-rim:#909090; --coin-text:#2a2a2a; --coin-glow-a:rgba(180,180,200,.7); --coin-glow-b:rgba(220,220,240,1); }
.gitem[data-coin="bronze"] { --coin-fill:#cd7f32; --coin-rim:#8b4513; --coin-text:#3a1800; --coin-glow-a:rgba(180,100,20,.7); --coin-glow-b:rgba(220,140,50,1); }
.gitem-coin-fill { fill: var(--coin-fill); stroke: var(--coin-rim); stroke-width: 2.5; }
.gitem-coin-arc  { fill: none; stroke: var(--coin-text); stroke-width: 3; stroke-linecap: round; }
.gitem-coin-sheen { fill: rgba(0,0,0,.12); }
.gitem-hanja { color: var(--coin-text); }

/* ===== EFFECT BUBBLE ===== */
#effect-bubble {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 38;
  transition: opacity .4s; display: none;
}
#effect-bubble.under-transition { z-index: 0; }

/* ===== FX ===== */
#cfx { position: fixed; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; }
.cp { position: absolute; top: -18px; border-radius: 2px; animation: cffall linear forwards; }
@keyframes cffall { to { transform: translateY(110vh) rotate(720deg); opacity: 0; } }

/* ===== CHEAT MENU (hidden; type "cheatcode" to open) ===== */
#cheat-menu {
  position: fixed; z-index: 150;
  background: #1a1a2e; color: #e0e0ff;
  border: 1px solid #0e113a; border-radius: 14px;
  padding: 16px 18px; width: 370px;
  box-shadow: 0 8px 32px rgba(0,0,0,.7);
  font-family: 'Pretendard', 'Noto Color Emoji', sans-serif; font-size: .82rem;
  display: none; top: 80px; left: 20px;
  cursor: default; user-select: none;
}
#cheat-menu.on { display: block; }
#cheat-run-shortcut {
  position: fixed; left: 8px; bottom: 8px; z-index: 60;
  color: #fff; font-weight: 800; font-size: .8rem;
  font-family: 'Pretendard', 'Noto Color Emoji', sans-serif;
  text-decoration: none; letter-spacing: .02em;
  opacity: .82; text-shadow: 0 1px 4px rgba(0,0,0,.75);
  cursor: pointer;
}
#cheat-run-shortcut:hover { opacity: 1; text-decoration: underline; }
#cheat-run-shortcut[hidden] { display: none; }
/* Touch mode: cheat menu occupies the floor area, scrollable, no drag */
body.touch-mode #cheat-menu.on {
  top: 13vh; left: 5vw; right: 5vw; bottom: 7vh;
  width: auto;
  border-radius: 10px;
  overflow-y: auto;

  touch-action: pan-y;
  overscroll-behavior: contain;
}
body.touch-mode #cheat-title { cursor: default; }
#cheat-title {
  font-size: 1rem; font-weight: bold; color: #aab8ff;
  margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center;
  cursor: grab; user-select: none;
}
#cheat-close { cursor: pointer; opacity: .6; font-size: 1.2rem; }
#cheat-close:hover { opacity: 1; }
.cheat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cheat-row label { flex: 1; min-width: 80px; }
.cheat-btn {
  background: #0e113a; color: #fff; border: none;
  border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: .78rem;
}
.cheat-btn:hover { background: #8899ff; }
.cheat-btn.red { background: #e74c3c; }
.cheat-btn.red:hover { background: #ff6666; }
.cheat-inp {
  width: 54px; background: #2a2a4e; color: #fff;
  border: 1px solid #0e113a; border-radius: 5px;
  padding: 3px 6px; font-size: .78rem;
}
#cheat-tabs {
  display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap;
}
.cheat-tab {
  flex: 1 1 56px; background: #0e113a; color: #8899cc;
  border: none; border-radius: 6px;
  padding: 5px 3px; font-size: .72rem;
  cursor: pointer; transition: background .12s, color .12s;
}
.cheat-tab:hover { background: #1a1d5a; color: #ccd4ff; }
.cheat-tab.active { background: #3a4adf; color: #fff; }
.cheat-panel { display: none; }
.cheat-panel.active { display: block; }
.cheat-disclaimer {
  font-size: .72rem; color: #ffcc80; line-height: 1.4;
  background: rgba(255,180,50,.08); border-radius: 6px;
  padding: 6px 8px; margin: 0 0 10px; border: 1px solid rgba(255,180,50,.18);
}
.cheat-preset-name {
  flex: 1; text-align: center; font-size: .8rem;
  color: #c8d4ff; font-style: italic;
}
.cheat-color-inp {
  width: 32px !important; height: 26px !important;
  padding: 1px 2px; cursor: pointer;
}
.cheat-bot-stats {
  margin-top: 10px; padding: 7px 8px;
  color: #b7c5ff; background: rgba(87,109,255,.12);
  border: 1px solid rgba(130,150,255,.2); border-radius: 6px;
  font-size: .72rem; line-height: 1.45;
}
/* ===== TITLE FOOTER ===== */
/* #title-footer removed - replaced by #menu-footer inside #menu-body */

/* ===== LANGUAGE / DIFFICULTY SELECT ===== */
.gopt-select {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  color: rgba(255,255,255,.85);
  text-align: end;
}
.gopt-select option {
  color: #1a1a2e;
  background: #fff;
}
#pause-panel .gopt-select {
  background: rgba(96, 51, 22, .07);
  border-color: rgba(96, 51, 22, .22);
  color: #4a2414;
}

/* ===== SHOP WALLET ALIGNMENT ===== */
.shop-wallet-display {
  margin-left: auto;
  margin-right: 16px;
  color: #ffd700;
  font-weight: bold;
}

/* ===== MAP FOG CELLS ===== */
.map-cell.fog {
  background: transparent !important;
  border: none !important;
  pointer-events: none;
}
.map-cell.fog::after {
  content: '';
  position: absolute;
  width: 90%;
  height: 90%;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 2px;
}

/* ===== FIRST-CLEAR BANNER ===== */
#first-clear-banner {
  position: fixed;
  top: 26%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.72);
  color: #ffe;
  font-size: 1rem;
  padding: 8px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,100,0.3);
  pointer-events: none;
  z-index: 120;
  animation: bannerFadeIn 0.4s ease;
  white-space: nowrap;
}
#first-clear-banner.off { display: none; }
@keyframes bannerFadeIn {
  from { opacity:0; transform:translateX(-50%) translateY(-12px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ===== MAP / CHEAT OPEN - fade out HUD + player area (touch only: map fills screen) ===== */
body.touch-mode.map-open #hud,
body.touch-mode.map-open #player-area,
body.touch-mode.cheat-open #hud,
body.touch-mode.cheat-open #player-area,
body.touch-mode.book-open #hud,
body.touch-mode.book-open #player-area {
  opacity: 0.08;
  pointer-events: none;
}
body.touch-mode.map-open #hud *,
body.touch-mode.map-open #player-area *,
body.touch-mode.cheat-open #hud *,
body.touch-mode.cheat-open #player-area *,
body.touch-mode.book-open #hud *,
body.touch-mode.book-open #player-area * { pointer-events: none !important; }

/* ===== LORE ANIMATION OVERLAY ===== */
#hud.lore-hud,
#hud.lore-hud * { pointer-events: none !important; }
#hud.lore-hud #btn-pause { pointer-events: auto !important; }
#hcard-score.lore-pause-only {
  min-width: 0; padding: 0; border: 0; background: transparent;
}
#hcard-score.lore-pause-only .hlbl,
#hcard-score.lore-pause-only .score-vals { display: none; }
#lore-skip-btn {
  position: absolute; bottom: 14px; right: 16px;
  background: none; border: none; cursor: pointer;
  font-size: .72rem; color: rgba(255,255,255,.28);
  font-family: 'Pretendard', sans-serif; letter-spacing: .4px;
  padding: 4px 6px; z-index: 10;
  transition: color .2s;
}
#lore-skip-btn:hover { color: rgba(255,255,255,.65); }
#lore-overlay {
  position: fixed; inset: 0; z-index: 5000;
  background: #000;
  overflow: hidden;
  font-family: 'Pretendard', 'Noto Color Emoji', sans-serif;
}
#lore-player-outer {
  position: absolute;
  bottom: -28px;
  width: 120px; height: 140px;
  transform-origin: bottom center;
}
#lore-player-inner {
  width: 100%; height: 100%;
  transform-origin: bottom center;
}
#lore-player-inner.lore-walking,
#lore-p2-inner.lore-walking {
  animation: loreWalk 0.4s ease-in-out infinite;
}
@keyframes loreWalk {
  0%   { transform: rotate(-6deg) translateY(0); }
  25%  { transform: rotate(0deg)  translateY(-3px); }
  50%  { transform: rotate(6deg)  translateY(0); }
  75%  { transform: rotate(0deg)  translateY(-3px); }
  100% { transform: rotate(-6deg) translateY(0); }
}
#lore-villain-outer {
  position: absolute;
  width: 120px; height: 120px;
  transform-origin: bottom center;
  opacity: 0;
  /* vertically centered, 2/3 from left */
  top: 50%; margin-top: -60px;
}
#lore-villain-inner {
  font-size: 90px;
  line-height: 120px;
  text-align: center;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.7));
}
#lore-speech {
  position: absolute;
  color: #fff;
  font-size: clamp(0.85rem, 3vmin, 1.3rem);
  font-weight: 700;
  text-shadow: 0 0 10px rgba(0,0,0,.8), 0 2px 4px rgba(0,0,0,.9);
  pointer-events: none;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
  letter-spacing: 0.03em;
}
#lore-particles {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: visible;
}
.lore-book {
  position: absolute;
  font-size: 2.2rem;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  filter: drop-shadow(2px 4px 8px rgba(0,0,0,.5));
}
.lore-letter {
  position: absolute;
  pointer-events: none;
  user-select: none;
  font-weight: 700;
  will-change: transform, opacity;
  text-shadow: 0 0 8px rgba(255,255,255,.4);
}
.lore-word-rain {
  position: absolute;
  font-size: 2rem;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
.lore-villain-speech {
  position: absolute;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  will-change: left;
}

/* ===== ROTATE OVERLAY ===== */
@keyframes phoneTilt {
  0%   { transform: rotate(0deg) translateX(0); opacity: 0; }
  6%   { opacity: 1; }
  10%  { transform: rotate(-8deg) translateX(-4px); }
  20%  { transform: rotate(8deg) translateX(4px); }
  30%  { transform: rotate(-6deg) translateX(-3px); }
  40%  { transform: rotate(6deg) translateX(3px); }
  55%  { transform: rotate(-90deg) translateX(0); }
  70%  { transform: rotate(-90deg) translateX(0); opacity: 1; }
  80%  { transform: rotate(-96deg) translateX(-2px); }
  90%  { transform: rotate(-84deg) translateX(2px); opacity: 1; }
  96%  { opacity: 0; }
  100% { transform: rotate(-90deg) translateX(0); opacity: 0; }
}
#rotate-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 99999;
  background-color: #5c3a1e;
  flex-direction: column; align-items: center; justify-content: center;
  color: #f0e0c8; text-align: center;
  font-family: 'Song Myung', 'Nanum Myeongjo', Georgia, serif;
  letter-spacing: .5px;
}
#rotate-overlay::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: url('../img/paper-grain.svg');
  background-repeat: repeat;
  opacity: 0.18; pointer-events: none;
}
#rotate-content { position: relative; padding-bottom: 28px; z-index: 1; }
#rotate-bg-art {
  position: absolute; right: 0; top: 0; bottom: 0; height: 125%; width: auto;
  object-fit: contain; object-position: right center;
  opacity: 0.12; pointer-events: none; user-select: none;
  z-index: 0;
}
#rotate-phone-icon {
  display: inline-block;
  animation: phoneTilt 2.4s ease-in-out infinite;
  transform-origin: center center;
}

/* ===== LESSON VIEWER (markdown content panel) ===== */
.lesson-viewer {
  width: 100%; overflow-y: auto;
  padding: 4px 2px;
  zoom: 1.25;
}
.lesson-viewer-inner { display: flex; flex-direction: column; gap: 4px; }
.md-h3 { color: #d19e17; font-size: 1.05rem; margin: 14px 0 6px; font-weight: 600; }
.md-h4 { color: #b8820e; font-size: .95rem; margin: 10px 0 4px; font-weight: 600; }
.md-p  { font-size: .9rem; line-height: 1.5; margin: 2px 0; }
.md-li { font-size: .9rem; line-height: 1.5; margin-left: 16px; list-style: disc; }
.md-br { height: 6px; }
.md-hr {
  border: none; border-top: 1px solid rgba(0,0,0,.18); margin: 12px 0;
}
.md-quote {
  border-left: 3px solid #0e113a; padding: 4px 10px;
  background: rgba(14,17,58,.08); border-radius: 0 6px 6px 0;
  font-size: .88rem; color: #4d4d5f;
}
.md-code {
  background: rgba(255,255,255,.12); border-radius: 4px;
  padding: 1px 5px; font-family: monospace; font-size: .9em;
  color: #c14848;
}
.md-table {
  width: 100%; border-collapse: collapse; margin: 8px 0;
  font-size: .85rem;
}
.md-table th, .md-table td {
  border: 1px solid rgba(0,0,0,.18);
  padding: 5px 8px; text-align: left;
}
.md-table thead th { background: rgba(14,17,58,.25); color: #474763; font-weight: 600; }
.md-table tbody tr:nth-child(even) { background: rgba(0,0,0,.04); }
.md-img { display: block; width: 100%; height: auto; }
.md-link { color: #7db4ff; text-decoration: underline; }
.md-link:hover { color: #aad0ff; }

/* inline word card */
.md-word-entry {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.1); border-radius: 6px;
  padding: 1px 7px; white-space: nowrap;
}
.md-word-wield { font-size: 1.1em; }
.md-word-hangul { font-size: 1em; color: #ffe; }
.md-word-tr { font-size: .8em; opacity: .75; }
.md-word-inline { background: rgba(255,255,255,.1); border-radius: 4px; padding: 1px 5px; }

/* speak button */
.md-speak-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; font-family: inherit; font-size: .88rem;
  background: rgba(14,17,58,.22); border: 1px solid rgba(14,17,58,.45);
  border-radius: 20px; color: #dde; cursor: pointer; transition: all .15s;
}
.md-speak-btn:hover { background: rgba(14,17,58,.4); }
.md-speak-word { font-weight: 700; color: #808080; }

/* ================================================================
   ADDITIONS / OVERRIDES - appended
================================================================ */
/* ── Difficulty hearts label ── */
#difficulty-hearts-label {
  font-size: .7rem; opacity: .6; letter-spacing: .3px; line-height: 1; text-align: left;
}
#difficulty-toggle-label {
  text-align: left;
}

/* ── Player emoji size ── */
#pl-emoji {
  font-size: clamp(3.5rem, 8vh, 5.5rem) !important;
}
/* ── Input bar: slightly narrower ── */
#inp-wrap {
  width: min(440px, 94vw) !important;
}

/* ── Non-touch mode: book panel height constraint ── */
body:not(.touch-mode) #book-panel { max-height: min(435px, 85vh);  height: min(435px, 85vh); }

/* ── Touch mode: map panel layout mode ── */
body.touch-mode #map-panel:not(.off) {
  display: grid;
}

/* ── Large screen HUD & player area scaling ── */
@media (min-width: 1600px) {
  #hud { --hud-base-zoom: 1.45; }
  #pl-emoji { font-size: clamp(4.5rem, 9.5vh, 7.5rem) !important; }
  #inp-wrap { width: min(560px, 96vw) !important; }
}
@media (min-width: 1920px) {
  #hud { --hud-base-zoom: 1.7; }
  #pl-emoji { font-size: clamp(5.5rem, 11vh, 9rem) !important; }
  #inp-wrap { width: min(640px, 96vw) !important; }
}


/* ================================================================
   TITLE SCREEN - mobile landscape (max-height: 500px): compact 2-col
================================================================ */
@media (max-height: 500px) {
  #version-badge { font-size: 1.1rem; font-weight: 900; text-shadow: 0px 0px 6px #ffffff; }
  .map-cell-hero svg { width: 1.5rem !important; }
  #btn-play {
    font-size: .8rem !important;
    padding: 8px;
    bottom: unset !important;
    margin-top: 10px;
    border-radius: 12px;
    left: unset !important;
    position: relative;
    width: 90%;
    margin-right: 20px;
  }
  #scr-title:has(#menu-main.edit-open) #btn-play { display: none; }
  #ava-edit-bar.open { padding: 6px !important; }
  #ava-edit-label1, #ava-edit-label2, #ava-edit-label3 { font-weight: 400 !important; font-size: 1.1rem !important; }
  #menu-left { padding: 10px 10px 8px 14px !important; }
  #menu-logo-gif { height: 112.5px !important; padding: 2px 20px 0 0 !important; }
  #menu-slogan { font-size: .85rem !important; padding-right: 20px !important; }
  #menu-dojang-wrap { width: 40px !important; margin-right: 32px; }
  #menu-main { grid-template-columns: 12vh minmax(0,1fr) 12vh !important; }
  #menu-right { padding: 8px 10px 0 0 !important; }
  .ava-tab[data-tooltip]::after { font-size: .85rem !important; }
  .ava-tabs { justify-content: space-between; gap: 4px; }
  .ava-tab { width: 50px !important; height: auto !important; aspect-ratio: 1/1; font-size: 1.2rem !important; }
  #ava-preview-wrap {
    width: min(260px, calc(56vw - 60px)) !important;
    height: min(220px, calc(94vh - 60px)) !important;
  }
  #menu-left-btns .btn-group { margin-bottom: 22px !important; }
  #ava-randomize, #ava-edit { bottom: 22px !important }
  #menu-footer { display: none !important; }
  /* minhwa height: 90vh → tree end = 0.496 * 90vh ≈ 44.6vh */
  #menu-left-btns { padding-left: calc(0.5 * 90vh) !important; padding-right: 15px;}
  .mic-emoji { font-size: 2.25rem !important; }
  .mic-label { font-size: 1rem !important; }
  #menu-dojang-wrap.dojang-revealed #menu-dojang {
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.18)) blur(3px);
    opacity: 0.4;
  }
  #menu-dojang-wrap.dojang-revealed #menu-dojang-lluc { opacity: 1; }
}

/* ================================================================
   PAUSE SCREEN - mobile landscape: backdrop scrolls, panel compact
================================================================ */
#scr-pause { justify-content: stretch; align-items: stretch; }
#pause-backdrop {
  overflow-y: auto;

  padding: 20px 12px;
}
#pause-panel { margin: auto; }

@media (max-height: 600px) {
  #pause-panel {
    padding: 14px 18px;
    gap: 10px;
  }
  #pause-top h2 { font-size: 1.25rem; }
  #pause-run-stats { gap: 6px; margin-top: 10px; }
  .pstat { padding: 7px 10px; }
  .pstat-val { font-size: 1.1rem; }
  #pause-mid-opts { gap: 4px; }
  .pause-opt-row { padding: 6px 10px; }
  .pause-btn { padding: 10px; }
}

@media (max-height: 440px) {
  #pause-backdrop { padding: 10px; align-items: flex-start; }
  #pause-panel {
    padding: 10px 14px;
    gap: 7px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 130px;
    grid-template-areas:
      "top top top"
      "ui-size ui-size resume"
      "sfx sfx resume"
      "music music resume"
      "weather weather menu"
      "translation hanja tts";
    align-items: stretch;
    max-height: none;
    width: min(600px, 96vw);
  }
  #pause-top { width: auto; grid-area: top; }
  #pause-top h2 { font-size: 1rem; margin: 0; }
  #pause-run-stats {
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px; margin-top: 5px;
  }
  .pstat { padding: 4px 7px; }
  .pstat-val { font-size: .88rem; }
  .pstat-lbl { font-size: .58rem; }
  #pause-mid-opts,
  .pause-btns { display: contents; }
  #pause-panel .pause-opt-row {
    min-width: 0;
    grid-column: auto;
    padding: 2px 7px;
  }
  #pause-panel .pause-opt-label {
    min-width: 0;
    overflow: hidden;
    font-size: .72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #pause-panel .pause-ui-size-row { grid-area: ui-size; }
  #pause-panel .pause-sfx-row { grid-area: sfx; }
  #pause-panel .pause-music-row { grid-area: music; }
  #pause-panel .pause-weather-row { grid-area: weather; }
  #pause-panel .pause-translation-row { grid-area: translation; }
  #pause-panel .pause-hanja-row { grid-area: hanja; }
  #pause-panel .pause-tts-row { grid-area: tts; }
  #btn-resume.pause-btn { grid-area: resume; height: auto; }
  #btn-menu.pause-btn { grid-area: menu; }
  .pause-btn { align-self: stretch; padding: 6px; font-size: .8rem; }
  #pause-ui-size { width: 76px; }
  #pause-ui-size-value { min-width: 2.55em; font-size: .7rem; }
}

/* ===== TEACHER SCREEN - dark theme ===== */
#scr-teacher {
  background: rgba(4, 10, 22, 0.90);
  backdrop-filter: blur(8px);
  justify-content: center;
}
#scr-teacher .menu-card {
  background: #091a2c;
  color: #c2d4e8;
  border: 1px solid rgba(70, 120, 180, 0.22);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75);
  max-height: min(92vh, 100dvh - 40px);
}
@media (max-width: 600px) {
  #scr-teacher .menu-card {
    width: 92vw;
    padding: 20px 16px;
    max-height: min(80vh, 100dvh - 20px);
    overflow-y: auto;
  }
}
#scr-teacher .menu-card h2 {
  color: #9fbfe0;
  font-size: 1.2rem;
  letter-spacing: 0.4px;
}
/* Cards inside teacher screen */
#scr-teacher .item-choice-card {
  background: rgba(255, 255, 255, 0.04);
  color: #c2d4e8;
  border-color: rgba(70, 120, 180, 0.22);
}
#scr-teacher .item-choice-card:hover {
  border-color: rgba(90, 150, 210, 0.55) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45) !important;
  transform: translateY(-3px);
}
#scr-teacher .choice-badge {
  background: rgba(70, 120, 180, 0.18);
  color: #6a9cc8;
}
#scr-teacher .choice-name { color: #c2d4e8; }
#scr-teacher .choice-desc { color: #5e7a96; }
.teacher-level-up {
  margin-top: 7px;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.teacher-level-up-desc {
  min-height: 2.4em;
  margin-top: 3px;
  font-size: .7rem;
  line-height: 1.22;
  color: #7d9ab5;
}
.teacher-lesson-card .teacher-level-up { color: #54bd8d; }
.teacher-challenge-card .teacher-level-up { color: #e0b852; }
/* Lesson & challenge card accents */
.teacher-lesson-card   { border-color: rgba(30, 140, 100, 0.42) !important; }
.teacher-lesson-card:not(.disabled):hover {
  border-color: rgba(40, 185, 130, 0.72) !important;
  box-shadow: 0 8px 22px rgba(30, 140, 100, 0.22) !important;
}
.teacher-challenge-card { border-color: rgba(170, 130, 28, 0.40) !important; }
.teacher-challenge-card:hover {
  border-color: rgba(215, 168, 48, 0.68) !important;
  box-shadow: 0 8px 22px rgba(170, 130, 28, 0.20) !important;
}
.teacher-challenge-done { opacity: 0.55; }
.teacher-challenge-done:hover {
  transform: none !important;
  border-color: rgba(170, 130, 28, 0.40) !important;
  box-shadow: none !important;
  cursor: default;
}
/* ── Stats tab ── */
.dict-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 14px 4px; gap: 10px 0;
}
.dict-stats-group {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  flex: 1 1 auto;
}
.dict-stats-ring {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%;
}
.dict-stats-label {
  color: rgba(255,255,255,.8); font-size: .78rem; text-align: center;
  line-height: 1.2; max-width: 90px;
}
.dict-prog-disabled-msg {
  font-style: italic; font-size: .88rem;
  color: rgba(255,255,255,.5); text-align: center;
  padding: 32px 24px; line-height: 1.6; margin: 0;
}
#book-panel .dict-prog-disabled-msg,
#my-dict-modal-inner .dict-prog-disabled-msg { color: rgba(40,25,0,.5); }

/* ── Wiki accordion ──────────────────────────────────────────────── */
.wiki-accordion {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 4px 16px;
}
.wiki-section { border: 1px solid rgba(255,255,255,.1); border-radius: 8px; overflow: hidden; }
.wiki-header {
  width: 100%; background: rgba(255,255,255,.05); border: none;
  color: rgba(255,255,255,.9); font-size: .9rem; font-weight: 600;
  padding: 10px 14px; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; text-align: left;
  font-family: inherit; transition: background .15s;
}
.wiki-header:hover { background: rgba(255,255,255,.09); }
.wiki-chevron { font-size: .75rem; transition: transform .2s; flex-shrink: 0; }
.wiki-section.open > .wiki-header .wiki-chevron { transform: rotate(180deg); }
.wiki-body {
  display: none; padding: 8px 10px; gap: 6px;
  flex-direction: column;
}
.wiki-section.open > .wiki-body { display: flex; }

/* ── Wiki cards ──────────────────────────────────────────────────── */
.wiki-card {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 7px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  transition: border-color .15s;
}
.wiki-card-seen {
  border-color: rgba(39,174,96,.4);
  background: rgba(39,174,96,.05);
}
.wiki-card-icon {
  font-size: 1.6rem; line-height: 1; flex-shrink: 0;
  width: 2.4rem; text-align: center; cursor: default;
}
.wiki-card-body { flex: 1; min-width: 0; }
.wiki-card-title {
  font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.92);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.wiki-card-sub {
  font-size: .78rem; color: rgba(255,255,255,.5); margin-top: 3px;
  line-height: 1.4;
}
.wiki-badge {
  font-size: .65rem; font-weight: 700; padding: 1px 6px;
  border-radius: 4px; text-transform: uppercase; letter-spacing: .04em;
}
.wiki-badge-visited { background: rgba(39,174,96,.25); color: #2ecc71; }
.wiki-card-unknown { filter: grayscale(1); opacity: .65; }
.wiki-card-unknown .wiki-card-title,
.wiki-card-unknown .wiki-card-sub { color: rgba(255,255,255,.35); }
.wiki-price { color: #f0c040; }
.wiki-price b { font-weight: 800; }
.wiki-desc { color: rgba(255,255,255,.5); }
.wiki-world-music-btn {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 4px 6px; border-radius: 5px;
  opacity: .55; transition: opacity .15s;
}
.wiki-world-music-btn:hover { opacity: 1; }
.wiki-world-music-btn.active { opacity: 1; }
.dj-book-body-inner { display: flex; flex-direction: column; gap: 2px; width: 100%; }

/* ── Hanja wiki ─────────────────────────────────────────────────── */
.hanja-wiki { display: flex; flex-direction: column; gap: 10px; }
.hanja-tier { display: flex; flex-direction: column; gap: 5px; }
.hanja-tier-label {
  color: rgba(255,255,255,.58); font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.hanja-mini-grid {
  display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start;
  gap: 5px;
}
.hanja-mini-card {
  position: relative; flex: 0 0 82px; width: 82px; min-height: 44px;
  display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center; justify-items: center; gap: 0; padding: 5px 3px;
  overflow: hidden; border-radius: 7px;
  color: #332816 !important; text-decoration: none !important;
  background: linear-gradient(145deg, #fffefa 0%, #f8f5ed 62%, hsl(42 33% 98% / 1) 100%) !important;
  border: 1px solid #d7cbb7 !important; border-bottom: 3px solid #b4a185 !important;
  box-shadow: 0 2px 3px rgba(70,48,18,.2), inset 0 1px 0 rgba(255,255,255,.95);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.hanja-mini-card:hover {
  background: linear-gradient(145deg, #fff 0%, #fff8d9 100%) !important;
  border-color: #c4a35e !important; box-shadow: 0 3px 6px rgba(70,48,18,.25), inset 0 1px 0 #fff;
  transform: translateY(-2px);
}
.hanja-mini-card::before {
  content: ''; position: absolute; inset: 2px 3px auto; height: 9px;
  border-radius: 5px 5px 50% 50%; background: rgba(255,255,255,.6); pointer-events: none;
}
.hanja-mini-char {
  position: relative; z-index: 1; font-size: 1.25rem; line-height: 1;
  font-family: 'Song Myung', 'Noto Serif KR', serif; color: #292014 !important;
}
.hanja-mini-divider {
  width: 1px; height: 70%; background: linear-gradient(to bottom, transparent, #b9aa91 20%, #b9aa91 80%, transparent);
}
.hanja-mini-reading {
  position: relative; z-index: 1; font-size: .82rem; font-weight: 700;
  line-height: 1; color: #765522 !important; text-align: center;
}

/* Lesson viewer text on dark bg */
#scr-teacher .md-p,
#scr-teacher .md-li { color: #b8ccdf; }
#scr-teacher .md-quote {
  border-left-color: rgba(70, 120, 180, 0.5);
  background: rgba(70, 120, 180, 0.08);
  color: #8aaac8;
}
/* Health warning */
.teacher-health-warning {
  color: #e07070; font-size: .82rem; text-align: center;
  background: rgba(200, 60, 60, 0.12); border-radius: 8px; padding: 6px 12px; margin-top: 6px;
  border: 1px solid rgba(200, 60, 60, 0.22);
}
/* Exit button - muted, not red */
.teacher-exit-btn {
  display: block !important; margin: 0 auto !important;
  background: rgba(70, 90, 120, 0.28) !important;
  border: 1px solid rgba(70, 90, 120, 0.40) !important;
  color: #6888aa !important; font-size: .88rem !important;
}
.teacher-exit-btn:hover {
  background: rgba(70, 90, 120, 0.50) !important;
  color: #88aacc !important;
}
/* Cooldown badge on lesson button */
.teacher-lesson-cooldown {
  font-size: .75rem; color: #888ba0; margin-top: 4px;
  letter-spacing: 0.5px;
}
/* Tooltip for cooldown */
.teacher-lesson-card[data-tooltip] { position: relative; }
.teacher-lesson-card[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #0a1624; color: #8aa0c0; font-size: .72rem;
  padding: 5px 10px; border-radius: 8px; white-space: nowrap;
  border: 1px solid rgba(70, 120, 180, 0.3); pointer-events: none; z-index: 10;
}

/* ===== TEACHER TEST UI ===== */
.test-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .8rem; opacity: .7; margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 6px;
  flex-direction: column; gap: 4px;
  width: 100%;
}
.test-dots {
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: space-evenly; align-items: center;
  margin-bottom: 8px; width: 100%;
}
.test-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3);
  display: inline-block;
}
.test-dot.correct { background: #27ae60; border-color: #27ae60; }
.test-dot.incorrect { background: #e74c3c; border-color: #e74c3c; }
.test-dot.done { background: #27ae60; border-color: #27ae60; } /* legacy alias */
.test-dot.current { background: #d19e17; border-color: #d19e17; box-shadow: 0 0 4px #d19e17; }
.test-hits { font-size: .85rem; opacity: .8; }
.test-hits.failed { color: #e74c3c; font-weight: bold; }
.test-giveup-btn {
  display: block; width: fit-content;
  background: rgba(231,76,60,.25) !important; border: 1px solid rgba(231,76,60,.4) !important;
  font-size: .75rem !important; padding: 4px 14px !important; border-radius: 20px !important;
  color: #ff9999 !important;
}
.test-giveup-btn:hover { background: rgba(231,76,60,.5) !important; }
.teacher-warning-msg {
  font-size: .82rem; color: #ffd080; text-align: center;
  background: rgba(255,200,80,.08); border-radius: 8px; padding: 6px 12px;
  margin-bottom: 8px; border: 1px solid rgba(255,200,80,.2);
}
.test-big-word {
  font-size: 2.4rem; text-align: center; margin: 12px 0;
  color: #fff; letter-spacing: 2px;
}
.test-big-emoji {
  font-size: 3.5rem; text-align: center; width: fit-content; margin: 12px auto; line-height: 1;
  position: relative;
}
.emoji-primary {
  position: relative;
}
.emoji-secondary {
  position: absolute;
  right: -6px; bottom: -3px;
  font-size: 1.2rem;
  z-index: 1;
}
.test-listen-buttons {
  display: flex; gap: 8px; margin-bottom: 12px; width: 100%;
}
.test-listen-buttons .pause-btn {
  flex: 1;
}
.test-prompt { text-align: center; opacity: .8; margin-bottom: 8px; }
.test-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;
}
.test-grid-4 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px;
}
.test-ko-btn {
  padding: 10px 6px !important; font-size: 1.05rem !important;
  border-radius: 10px !important; letter-spacing: 1px;
}
.test-emoji-btn {
  padding: 8px 4px !important; font-size: 2rem !important;
  border-radius: 10px !important; line-height: 1;
  position: relative;
}
.test-emoji-tr-hint {
  font-size: .7rem; opacity: .38; text-align: center;
  margin-top: 2px; margin-bottom: 10px; line-height: 1.2;
}
.test-won-indicator {
  font-size: .75rem; color: #d19e17; font-weight: 600;
  letter-spacing: 0.5px; opacity: .9;
}
.test-listen-btn {
  display: block; margin: 0 auto 10px;
  background: rgba(52,152,219,.35) !important;
  border: 1px solid rgba(52,152,219,.6) !important;
}
.test-listen-btn:hover { background: rgba(52,152,219,.55) !important; }
.test-write-inp {
  width: 100% !important; font-size: 1.3rem !important;
  text-align: center; padding: 8px 12px !important;
  margin-top: 10px;
}
.test-reward-box {
  background: rgba(39,174,96,.15); border: 1px solid rgba(39,174,96,.4);
  border-radius: 10px; padding: 12px 16px; margin: 12px 0;
  font-size: .95rem; display: flex; flex-direction: column; gap: 4px;
}

.item-choice-card.disabled { opacity: 0.4; filter: grayscale(1); cursor: not-allowed; pointer-events: none; }
#rotate-overlay.visible { display: flex; }

/* ===== MOBILE TITLE BAR ===== */
#mobile-titlebar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  height: 20px;
  background: rgba(3, 13, 26, 0.72);
 backdrop-filter: blur(6px);
  padding: 0 16px;
  align-items: center; justify-content: space-between;
  font-size: 0.6rem; color: rgba(255,255,255,.38);
  letter-spacing: .4px; pointer-events: auto;
}
body.mobile-fs #mobile-titlebar { display: flex; }
.mtb-left { display: flex; align-items: center; gap: 5px; }
.mtb-left img { opacity: 0.4; filter: invert(1); flex-shrink: 0; }
#mtb-exit-fs {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.38); font-size: 0.85rem; line-height: 1;
  padding: 0; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
}
#mtb-exit-fs:hover { color: rgba(255,255,255,.7); }

/* ===== FULLSCREEN REQUEST OVERLAY ===== */
#fs-overlay {
  position: fixed; inset: 0; z-index: 100001;
  background-color: rgba(92, 58, 30);
  flex-direction: column;
  display: flex; align-items: start; justify-content: center;
  font-family: 'Song Myung', 'Nanum Myeongjo', Georgia, serif;
  color: #f0e0c8;
  padding: 0 10vw;
}
#fs-overlay::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: url('../img/paper-grain.svg');
  background-repeat: repeat;
  opacity: 0.1; pointer-events: none;
}
#fs-bg-art {
  position: absolute; right: 0; top: 0; height: 100%; width: auto;
  object-fit: contain; object-position: right center;
  transform: scaleX(-1);
  opacity: 0.35; pointer-events: none; user-select: none;
}
#fs-overlay.off { display: none; }
#fs-btn {
  font-size: 5rem; background: none; border: none;
  color: rgba(240,224,200,.7); cursor: pointer; line-height: 1;
  transition: transform .15s, color .15s;
}
#fs-btn:hover, #fs-btn:active { transform: scale(1.12); color: #f0e0c8; }
@keyframes fs-glow {
  0%   { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%  { transform: scale(1.10); filter: drop-shadow(0 0 18px rgba(255,200,120,0.9)); }
  100% { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
}
#fs-btn.glow {
  animation: fs-glow 1.4s ease-in-out infinite;
  color: #f0e0c8;
}
#fs-btn.glow:hover {
  transform: scale(1.16);
  filter: drop-shadow(0 0 22px rgba(255,200,120,0.95));
}
#fs-prompt {
  margin-top: 16px; font-size: .85rem; color: rgba(240,224,200,.6);
  max-width: 280px; text-align: start; line-height: 1.6;
  letter-spacing: .3px;
}
/* Desktop audio-unlock variant: no button, whole overlay is the click target */
#fs-overlay.desktop-mode { cursor: pointer; }
#fs-overlay.desktop-mode #fs-btn { visibility: hidden; pointer-events: none; }
#fs-overlay.desktop-mode #fs-prompt {
  font-size: 1.15rem; color: rgba(240,224,200,.85);
  max-width: 480px; margin-top: 0;
}

/* ===== UNSUPPORTED BROWSER OVERLAY ===== */
#unsupported-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 999999;
  background: #08080f;
  flex-direction: column; align-items: center; justify-content: center;
  color: #e0e0ff; text-align: center; padding: 24px;
  font-family: 'Pretendard', sans-serif; letter-spacing: .4px;
  gap: 20px;
}
html.browser-unsupported #unsupported-overlay { display: flex; }
#unsupported-overlay .unsup-icon { font-size: 3.5rem; }
#unsupported-overlay h2 { font-size: 1.3rem; font-weight: 700; margin: 0; color: #fff; transition: opacity .3s; }
#unsupported-overlay p { font-size: .9rem; opacity: .75; max-width: 320px; line-height: 1.6; margin: 0; transition: opacity .3s; }
#unsupported-overlay .unsup-browsers { display: flex; gap: 24px; justify-content: center; font-size: .85rem; opacity: .45; }

/* ── Touch mode: slightly larger quiz font & monster emoji ── */
body.touch-mode .test-big-word { font-size: 2.7rem; }
body.touch-mode .test-big-emoji { font-size: 4rem; }

/* ===== TUTORIAL BOX ===== */
#tutorial-box {
  position: fixed;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(6, 12, 28, 0.88);
  border: 1px solid rgba(90, 140, 210, 0.28);
  border-radius: 14px;
  padding: 10px 16px 13px;
  color: #b8ccdf;
  font-size: 0.88rem;
  text-align: center;
  max-width: 280px;
  z-index: 118;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease;
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
#tutorial-box.off { opacity: 0; pointer-events: none !important; }
#tutorial-box.off * { pointer-events: none !important; }
#tutorial-actions {
  pointer-events: all;
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 15px;
  margin-bottom: 3px;
}
#tutorial-hide,
#tutorial-close {
  pointer-events: all;
  background: none; border: none;
  color: rgba(184,204,223,.45); font-size: .75rem;
  cursor: pointer; padding: 0 0 4px 6px; line-height: 1;
  transition: color .15s;
}
#tutorial-hide { padding-left: 0; }
#tutorial-hide:hover,
#tutorial-close:hover { color: rgba(184,204,223,.85); }
#tutorial-emoji { font-size: 1.5rem; flex-shrink: 0; line-height: 1; margin-bottom: 6px; }
#tutorial-text  { line-height: 1.45; }

/* ===== BOSS PATH HINT ===== */
#boss-path-hint {
  position: fixed;
  top: var(--boss-path-top, 19%); left: 50%; transform: translateX(-50%);
  z-index: 117;
  display: flex; align-items: center; gap: 8px;
  max-width: min(360px, calc(100vw - 28px));
  padding: 8px 12px;
  color: rgba(255, 226, 220, .9);
  background: rgba(25, 7, 12, .78);
  border: 1px solid rgba(255, 80, 80, .28);
  border-radius: 18px;
  box-shadow: 0 5px 18px rgba(0,0,0,.28), 0 0 14px rgba(210,30,30,.12);
  backdrop-filter: blur(5px);
  font-size: .78rem;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
  opacity: 1;
  transition: top .35s ease, opacity .35s ease, transform .35s ease;
}
#boss-path-hint.off {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  pointer-events: none !important;
}
.boss-path-hint-icon {
  font-size: .75rem;
  filter: drop-shadow(0 0 5px rgba(255,40,40,.75));
  animation: boss-hint-pulse 1.8s ease-in-out infinite;
}
@keyframes boss-hint-pulse {
  50% { transform: scale(1.18); opacity: .72; }
}
body.phase-title #boss-path-hint,
body:has(#ctrl-panel:not(.off)) #boss-path-hint,
body:has(#map-panel:not(.off)) #boss-path-hint,
body:has(#book-panel:not(.off)) #boss-path-hint { visibility: hidden; }
@media (max-width: 600px) {
  #boss-path-hint { font-size: .72rem; padding: 7px 10px; }
}

/* ===== STARTUP ANIMATION ===== */
#startup-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: #030d1a;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0;
  transition: opacity 0.6s ease;
}
#startup-overlay.fade-out { opacity: 0; pointer-events: none; }
#startup-overlay.hidden { display: none; }
#startup-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
  width: fit-content;
  transition: opacity 0.4s ease;
}
#startup-inner.hidden-fade { opacity: 0; pointer-events: none; }
#startup-logo {
  width: 120px; height: 120px; object-fit: contain;
  opacity: 0; transition: opacity 0.5s ease;
  border-radius: 0;
}
#startup-logo.visible { opacity: 1; }
#startup-text {
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 3rem; color: #fff; letter-spacing: 0.05em;
  opacity: 0; transition: opacity 0.3s ease;
  min-height: 1.4em;
  min-width: 8ch;
  margin-top: 12px;
  display: flex; align-items: center; justify-content: center;
}
#startup-text.visible { opacity: 1; }
#startup-typed {
  display: inline-block;
  position: relative;
  overflow: visible;
}
#startup-cursor {
  position: absolute; left: 100%; top: 0;
  display: inline-block; opacity: 0.5;
  animation: cursor-blink 0.7s step-end infinite;
  pointer-events: none;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 0.5; } 50% { opacity: 0; }
}

/* ===== LANGUAGE SELECT (inside startup overlay) ===== */
/* Language selection — standalone full-screen panel, same aesthetic as #fs-overlay */
#lang-select {
  position: fixed; inset: 0; z-index: 100003;
  background-color: rgba(92, 58, 30, 0.97);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 0 10vw;
  font-family: 'Song Myung', 'Nanum Myeongjo', Georgia, serif;
  color: #f0e0c8;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
}
#lang-select::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: url('../img/paper-grain.svg');
  background-repeat: repeat; opacity: 0.1; pointer-events: none;
}
#lang-select::after {
  content: ''; position: absolute; right: 0; top: 0;
  height: 100%; width: 50%;
  background: url('../img/menu-right.png') right center / cover no-repeat;
  opacity: 0.1; pointer-events: none;
}
#lang-select.off { display: none; }
#lang-select.visible { opacity: 1; pointer-events: all; }
#lang-select-title {
  color: rgba(240, 224, 200, 0.65); font-size: 1rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 24px;
  transition: opacity 0.3s ease;
}
#lang-select-btns {
  display: flex; gap: 16px; flex-wrap: wrap; max-width: 500px;
}
.lang-btn {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 112px; height: 112px; padding: 14px 8px;
  background: rgba(240, 224, 200, 0.07);
  border: 1px solid rgba(240, 224, 200, 0.22);
  border-radius: 4px; cursor: pointer; color: #f0e0c8;
  font-family: 'Song Myung', 'Nanum Myeongjo', serif;
  transition: background 0.2s, border-color 0.2s;
}
.lang-btn:hover {
  background: rgba(240, 224, 200, 0.17); border-color: rgba(240, 224, 200, 0.55);
}
.lang-flag { font-size: 2.6rem; line-height: 1; }
.lang-name { font-size: 0.8rem; opacity: 0.8; letter-spacing: 0.05em; }

@media (max-height: 600px) {
  #lang-select {
    align-items: flex-start;
    justify-content: center;
    padding: 0 4vw;
  }
  #lang-select-title {
    font-size: 0.8rem;
    margin-bottom: 16px;
  }
  #lang-select-btns {
    gap: 10px;
    max-width: 600px;
    justify-content: flex-start;
  }
  .lang-btn {
    width: 90px;
    height: 90px;
    padding: 11px 6px;
    gap: 8px;
  }
  .lang-flag { font-size: 2.1rem; }
  .lang-name { font-size: 0.72rem; letter-spacing: 0.04em; }
}

/* ===== DICTIONARY DARK MODE TEXT ===== */
#book-panel .dict-entry { color: #e8e8f0; margin-bottom: 3px; }
#book-panel .dict-en { color: rgba(232,232,240,.6); }
#book-panel .dict-empty { color: rgba(232,232,240,.5); }

/* ===== DARK SCROLLBARS ===== */

/* ── Hide alts row when panel is small ── */
#book-panel:not(.book-expanded) .dict-alts { display: none; }

/* ===== BOOK PANEL: EXPANDED MODE (DESKTOP) ===== */
#book-panel.book-expanded {
  width: min(90vw, 960px) !important;
}

/* ===== DICT MODAL: EXPANDED (PC fullscreen button) ===== */
#my-dict-modal.dict-expanded {
  align-items: stretch;
  justify-content: stretch;
}
#my-dict-modal.dict-expanded .dict-panel-sub { display: none !important; }
#my-dict-modal.dict-expanded #my-dict-header > span { display: none; }
#my-dict-modal.dict-expanded #my-dict-modal-inner {
  width: 100% !important;
  max-height: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
}

/* ===== SMALL SCREEN: MY DICT MODAL = FULLSCREEN ===== */
@media (max-height: 600px) {
  #my-dict-modal-inner {
    width: 100% !important;
    max-height: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    padding: 16px !important;
  }
  #my-dict-modal {
    align-items: stretch;
    justify-content: stretch;
  }
}

/* ===== MOBILE TITLEBAR: offset dict modal below titlebar ===== */
body.mobile-fs #my-dict-modal { top: var(--tb-h); }
@media (max-height: 500px) {
  body.mobile-fs #dict-list {
    max-height: unset !important;
  }
}
/* ===== VERY SMALL HEIGHT (mobile landscape): ultra-compact dict ===== */
@media (max-height: 500px) {
  #my-dict-modal-inner {
    padding: 8px 12px !important;
    gap: 5px !important;
  }
  #my-dict-header > span { font-size: 1rem !important; }
  .dict-panel-sub { display: none !important; }
  .dict-search-wrap input { padding: 4px 10px !important; font-size: .82rem !important; }
  #my-dict-modal .dict-tab { font-size: .78rem !important; padding: 4px 10px !important; }
  .dict-entry { font-size: .82rem !important; padding: 5px 10px !important; }
  .dict-entry-main { gap: 5px !important; }
  #dict-list { gap: 3px !important; }
  #title-reset-btn { font-size: .65rem !important; }
}
/* ===== DESKTOP MODE: INCREASED FONT SIZES (min-height: 500px) ===== */
@media (min-height: 500px) {
  .dict-emoji { font-size: 1.5rem !important; }
  .dict-secondary-emoji { font-size: 0.75rem !important; }
  .dict-text { font-size: 1.25rem !important; }
  .dict-en { font-size: 0.95rem !important; }
  .dict-entry { font-size: 1.1rem !important; }
}
/* In touch mode, alts are always visible (no expand available) */
body.touch-mode .dict-alts { display: inline !important; }

/* ===== TOUCH MODE: BOOK PANEL = MAP PANEL SIZE ===== */
body.touch-mode #book-panel:not(.off),
body.touch-mode #map-panel:not(.off) {
  inset: 0 !important;
  width: auto !important;
  max-height: none !important;
  border-radius: 0 !important;
  z-index: 180;
}
body.touch-mode.mobile-fs #book-panel:not(.off),
body.touch-mode.mobile-fs #map-panel:not(.off) {
  top: var(--tb-h) !important;
}

/* ===== NON-TOUCH MODE: FIXED BOOK PANEL HEIGHT ===== */
#book-panel {
  max-height: min(600px, 85vh);
}
#book-panel.book-expanded {
  height: 90vh !important;
  max-height: 90vh !important;
}

/* ===== DONATE MODAL ===== */
#donate-modal, #tts-modal, #progress-modal {
  position: fixed; inset: 0; z-index: 510;
  background: rgba(0,0,0,.65); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
#progress-modal-inner {
  background: #0f0f1c; border-radius: 20px; padding: 32px 24px 24px;
  width: min(420px, 92vw); display: flex; flex-direction: column;
  gap: 12px; color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  position: relative;
}
#progress-modal-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; color: rgba(255,255,255,.35);
  font-size: 1.1rem; cursor: pointer; font-family: inherit; padding: 4px 6px;
}
#progress-modal-close:hover { color: rgba(255,255,255,.8); }
#progress-modal-title { font-size: 1.1rem; font-weight: 700; color: #fff; }
#progress-modal-desc { font-size: .82rem; color: rgba(255,255,255,.5); margin: 0; line-height: 1.4; }
#progress-modal-code {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: 10px; color: #7ecfff;
  font-family: monospace; font-size: .72rem;
  resize: vertical; min-height: 80px; max-height: 160px;
  word-break: break-all;
}
#progress-modal-actions { display: flex; gap: 8px; }
#progress-modal-copy, #progress-modal-load {
  flex: 1; padding: 10px; border-radius: 10px; border: none; cursor: pointer;
  font-family: inherit; font-size: .9rem; font-weight: 600;
  background: rgba(255,255,255,.1); color: #fff; transition: background .15s;
}
#progress-modal-copy:hover, #progress-modal-load:hover { background: rgba(255,255,255,.2); }
#donate-modal-inner, #tts-modal-inner {
  background: #0f0f1c; border-radius: 20px; padding: 32px 24px 24px;
  width: min(420px, 92vw); max-height: 88vh; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  position: relative; text-align: center;
}
#donate-modal-inner { gap: 32px; }
#donate-close, #tts-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; border-radius: 50%;
  background: #991b1b;
  border: 1.5px solid rgba(255,130,130,.3);
  color: #fff;
  font-size: .8rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  transition: background .15s, transform .12s;
  padding: 0; flex-shrink: 0;
}
#donate-close:hover, #tts-modal-close:hover {
  background: #dc2626;
  transform: scale(1.12);
}
.modal-big-emoji { font-size: 9rem; line-height: 1; }
#donate-title { font-size: 1.75rem; font-weight: 700; color: #fff; margin: 0; }
#donate-msg { font-size: 1.1rem; color: rgba(255,255,255,.7); margin: 0; line-height: 1.5; }
#donate-btn {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px; padding: 12px 20px; text-decoration: none;
  color: #fff; font-size: 1.4rem; font-family: inherit; cursor: pointer;
  transition: background .2s; width: 100%; justify-content: center;
  box-sizing: border-box;
}
#donate-btn:hover { background: rgba(255,255,255,.15); }
#donate-btn span { text-align: start; font-weight: 200; }
#donate-btn img { width: 75px; height: 75px; }
#donate-pix {
  font-size: .75rem; color: rgba(255,255,255,.2);
  margin: 0; user-select: text;
}
#donate-pix i { font-style: italic; }
#tts-modal-msg { font-size: .9rem; color: rgba(255,255,255,.7); margin: 0; line-height: 1.5; }
/* Disabled TTS toggle card when TTS is unavailable */
.gopt-card.tts-unsupported { opacity: .25; pointer-events: none; }
.pause-opt-row.tts-unsupported { opacity: .25; pointer-events: none; }

/* ── Custom cursor tooltip (for dict-kills, etc.) ── */
#custom-tooltip {
  position: fixed;
  z-index: 9999;
  background: rgba(14,17,58,.92);
  color: #e8e8f0;
  font-size: .88rem;
  padding: 6px 11px;
  border-radius: 6px;
  pointer-events: none;
  white-space: pre;
  display: none;
  font-family: 'Noto Sans KR', sans-serif;
  line-height: 1.5;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

/* ── Desktop: settings icon button has no background override needed ── */

/* ================================================================
   BOOK PANEL & MAP PANEL – WHITE / PAPER MODE
================================================================ */

/* ── Book panel: notebook with thick spine on the left ── */
/* ── Parchment book skin — shared by in-game panel and main-menu dict modal ── */
/* Tabs live inside the thick golden top strip (padding-top reserves their space) */
#book-panel,
#my-dict-modal-inner {
  background: linear-gradient(to bottom, #d4a017 38px, #fdf6e3 38px) !important;
  border: 5px solid #d4a017 !important;
  border-left: 24px solid #b8820e !important; /* thick spine */
  padding-top: 44px !important; /* 38px tab strip + 6px breathing room */
  padding-left: 10px !important;
  padding-right: 10px !important;
  padding-bottom: 0 !important;
  isolation: isolate;
  backdrop-filter: none !important;
}
#book-panel,
#my-dict-modal-inner {
  overflow: visible !important;
}
#book-panel {
  border-bottom: none !important;
}
#book-panel::before,
#my-dict-modal-inner::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../img/noise.svg') center/cover;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
/* Spiral holes on the spine */
#book-panel::after,
#my-dict-modal-inner::after {
  content: '';
  position: absolute;
  left: -24px; top: 0; bottom: 0;
  width: 24px;
  background-image: radial-gradient(circle 5px at 12px 50%, #ffe9a0 0%, #e8b800 55%, transparent 56%);
  background-size: 100% 34px;
  background-repeat: repeat-y;
  background-position: 0 12px;
  pointer-events: none;
  z-index: 10;
}
#book-panel > *,
#my-dict-modal-inner > * { position: relative; z-index: 1; }

/* ── Map panel: paper sheet — square corners, no coloured border ── */
#map-panel {
  background: #f5eedc !important;
  border: none !important;
  border-radius: 0 0 0 0 !important;
  box-shadow: -4px 0 0 0 #c8a040, 0 -4px 0 0 #c8a040, 4px 0 12px rgba(0,0,0,.35) !important;
  isolation: isolate;
  backdrop-filter: none !important;
}
#map-panel::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../img/noise.svg') center/cover;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
#map-panel > * { position: relative; z-index: 1; }

/* ── Book panel header: buttons float in the gold bar, top-right ── */
#book-panel #book-panel-header {
  position: absolute !important;
  top: 4px; right: 1px;
  background: transparent !important;
  border: none !important; padding: 0 !important; margin: 0 !important;
  z-index: 16; display: flex; gap: 4px; align-items: center;
}
#book-panel .map-esc-btn {
  background: rgba(255,255,255,.38);
  border-color: rgba(101,75,0,.25);
  color: rgba(70,48,0,.9);
}
#book-panel .map-esc-btn:hover { background: rgba(255,255,255,.6); color: #3a2800; }

/* ── Map panel header ── */
#map-panel #map-panel-header { color: #4a2e00; }
#map-panel .map-esc-btn {
  background: rgba(101,75,0,.12);
  border-color: rgba(101,75,0,.3);
  color: rgba(90,62,0,.8);
}
#map-panel .map-esc-btn:hover { background: rgba(101,75,0,.2); color: #3a2800; }

/* ── Map panel text overrides ── */
#map-panel #map-legend { color: #3d2d00; font-size: .75rem; }
#map-panel #map-legend span { color: #3d2d00; }
#map-panel #map-perms-row { border-top-color: rgba(101,75,0,.25) !important; }
#map-panel #map-perms-row > div { color: #5a3e00 !important; }

/* ── Map cells on paper background ── */
#map-panel .map-col-lbl,
#map-panel .map-row-lbl { color: rgba(80,50,0,.3); }

#map-panel .map-cell.visited      { background: rgba(100,70,20,.22); color: rgba(50,30,0,.8); }
#map-panel .map-cell.visited:hover { background: rgba(100,70,20,.36); }
#map-panel .map-cell.guide-only   { background: rgba(100,70,20,.10); color: rgba(50,30,0,.4); }
#map-panel .map-cell.guide-only:hover { background: rgba(100,70,20,.17); }
#map-panel .map-cell.cleared      { background: rgba(30,100,40,.28); }
#map-panel .map-cell.current      { background: rgba(90,60,0,.65) !important; box-shadow: 0 0 5px rgba(180,120,0,.6); }
#map-panel .map-cell.current.cleared { background: rgba(30,130,50,.7) !important; box-shadow: 0 0 5px rgba(40,180,70,.7) !important; }
#map-panel .map-cell.boss-room    { background: rgba(140,20,20,.20); color: rgba(160,30,30); }
#map-panel .map-cell.boss-room:hover { background: rgba(160,30,30,.15); }
#map-panel .map-cell.boss-room.current { background: rgba(180,30,30,.65) !important; }
#map-panel .map-cell.teacher-room { background: rgba(20,80,160,.20); color: rgba(20,60,140); }
#map-panel .map-cell.teacher-room:hover { background: rgba(20,80,160,.15); }
#map-panel .map-cell.shop-room    { background: rgba(150,110,0,.20); color: rgba(100,70,0); }
#map-panel .map-cell.shop-room:hover { background: rgba(160,120,0,.15); }
#map-panel .map-cell.shop-room.current { background: rgba(160,120,0,.65) !important; }
#map-panel .map-cell.casino-room  { background: rgba(100,30,180,.20); color: rgba(80,20,160); }
#map-panel .map-cell.casino-room:hover { background: rgba(110,40,190,.15); }
#map-panel .map-cell.item-room    { background: rgba(20,120,120,.20); color: rgba(10,90,90); }
#map-panel .map-cell.item-room:hover { background: rgba(20,130,130,.15); }
#map-panel .map-cell.treasure-room { background: rgba(180,140,0,.20); color: rgba(120,90,0); }
#map-panel .map-cell.treasure-room:hover { background: rgba(190,150,0,.15); }

/* ── Parchment book: TABS INSET IN TOP BORDER ── */
/* Tabs are absolutely positioned inside the thick golden top strip */
#book-panel .dict-tabs,
#my-dict-modal-inner .dict-tabs {
  position: absolute;
  top: 3.5px;           /* just below the outer border edge */
  right: 0;
  height: 34px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  overflow: hidden;
  border-bottom: none;
  margin: 0;
  z-index: 15;
}
/* Compact book (non-expanded) + non-expanded my-dict: emoji only */
#book-panel:not(.book-expanded) .dict-tab .tab-full,
#my-dict-modal:not(.dict-expanded) .dict-tab .tab-full { display: none; }
#book-panel:not(.book-expanded) .dict-tab .tab-short,
#my-dict-modal:not(.dict-expanded) .dict-tab .tab-short { display: inline; }
/* Expanded states + default: full labels */
.tab-short { display: none; }
/* Mobile: my-dict is already full-screen, always show full labels */
body.touch-mode #book-panel .dict-tab .tab-full { display: inline !important; }
body.touch-mode #book-panel .dict-tab .tab-short { display: none !important; }
@media (max-height: 500px) {
  #book-panel .dict-tab .tab-full,
  #my-dict-modal .dict-tab .tab-full { display: inline !important; }
  #book-panel .dict-tab .tab-short,
  #my-dict-modal .dict-tab .tab-short { display: none !important; }
}
#book-panel .dict-tabs        { left: 8px; right: 56px; }
#my-dict-modal-inner .dict-tabs { left: 8px; right: 78px; }
#book-panel .dict-tab,
#my-dict-modal-inner .dict-tab {
  background: rgba(255,240,190,.75);
  border: 1.5px solid rgba(180,130,0,.5);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  color: #5a3800;
  padding: 3px 14px;
  font-size: .8rem;
  font-weight: 600;
  height: 34px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background .1s;
}
#book-panel .dict-tab:hover,
#my-dict-modal-inner .dict-tab:hover {
  background: rgba(255,250,220,.9);
  color: #3d2800;
}
#book-panel .dict-tab.active,
#my-dict-modal-inner .dict-tab.active {
  background: #fdf6e3;         /* seamlessly continues into parchment below */
  border-color: rgba(180,130,0,.6);
  color: #3d2800;
  z-index: 16;
  box-shadow: 0 -2px 6px rgba(101,75,0,.2);
}

/* Stats tab = light blue bookmark */
#book-panel .dict-tab[data-cat="stats"],
#my-dict-modal-inner .dict-tab[data-cat="stats"] { background: #c8e4f5; border-color: #82bfe0; color: #1a4e6e; }
#book-panel .dict-tab[data-cat="stats"]:hover,
#my-dict-modal-inner .dict-tab[data-cat="stats"]:hover { background: #d8eefb; }
#book-panel .dict-tab[data-cat="stats"].active,
#my-dict-modal-inner .dict-tab[data-cat="stats"].active { background: #fdf6e3; border-color: rgba(180,130,0,.6); color: #3d2800; }

/* Word tabs (noun, adverb, verb, adjective) = coral/red bookmark */
#book-panel .dict-tab[data-cat="noun"],
#my-dict-modal-inner .dict-tab[data-cat="noun"],
#book-panel .dict-tab[data-cat="adverb"],
#my-dict-modal-inner .dict-tab[data-cat="adverb"],
#book-panel .dict-tab[data-cat="verb"],
#my-dict-modal-inner .dict-tab[data-cat="verb"],
#book-panel .dict-tab[data-cat="adjective"],
#my-dict-modal-inner .dict-tab[data-cat="adjective"] {
  background: #f5caca; border-color: #d87878; color: #7a1a1a;
}
#book-panel .dict-tab[data-cat="noun"]:hover,
#my-dict-modal-inner .dict-tab[data-cat="noun"]:hover,
#book-panel .dict-tab[data-cat="adverb"]:hover,
#my-dict-modal-inner .dict-tab[data-cat="adverb"]:hover,
#book-panel .dict-tab[data-cat="verb"]:hover,
#my-dict-modal-inner .dict-tab[data-cat="verb"]:hover,
#book-panel .dict-tab[data-cat="adjective"]:hover,
#my-dict-modal-inner .dict-tab[data-cat="adjective"]:hover { background: #fbd8d8; }
#book-panel .dict-tab[data-cat="noun"].active,
#my-dict-modal-inner .dict-tab[data-cat="noun"].active,
#book-panel .dict-tab[data-cat="adverb"].active,
#my-dict-modal-inner .dict-tab[data-cat="adverb"].active,
#book-panel .dict-tab[data-cat="verb"].active,
#my-dict-modal-inner .dict-tab[data-cat="verb"].active,
#book-panel .dict-tab[data-cat="adjective"].active,
#my-dict-modal-inner .dict-tab[data-cat="adjective"].active {
  background: #fdf6e3; border-color: rgba(180,130,0,.6); color: #3d2800;
}

/* Lesson tabs = white/off-white bookmark (applied dynamically to numeric cat IDs) */
#book-panel .dict-tab[data-cat^="1"],
#book-panel .dict-tab[data-cat^="2"],
#book-panel .dict-tab[data-cat^="3"],
#book-panel .dict-tab[data-cat^="4"],
#book-panel .dict-tab[data-cat^="5"],
#book-panel .dict-tab[data-cat^="6"],
#book-panel .dict-tab[data-cat^="7"],
#book-panel .dict-tab[data-cat^="8"],
#book-panel .dict-tab[data-cat^="9"] {
  background: #f0f0ee; border-color: #aaa; color: #333;
}

/* ── Parchment book: content area text colors (book-panel + main-menu dict modal) ── */
#book-panel #book-dict-search {
  background: rgba(255,255,255,.7);
  border-color: rgba(101,75,0,.3);
  color: #2a1a00;
}
#book-panel #book-dict-search::placeholder { color: rgba(80,55,0,.45); }
#book-panel #book-dict-list { color: #1a1000; display: flex; flex-direction: column; gap: 6px; }
#my-dict-modal-inner #dict-list { color: #2a1a00; }
#book-panel .dict-entry,
#my-dict-modal-inner .dict-entry { color: #1a1000 !important; }
#book-panel .dict-en,
#my-dict-modal-inner .dict-en    { color: rgba(40,25,0,.6) !important; }
#book-panel .dict-empty,
#my-dict-modal-inner .dict-empty { color: rgba(40,25,0,.45) !important; }
#book-panel .dict-word,
#my-dict-modal-inner .dict-word  { background: rgba(255,220,120,.18); border-color: rgba(180,140,0,.2); }
#book-panel .dict-word:hover,
#my-dict-modal-inner .dict-word:hover { background: rgba(255,220,120,.35); }
#book-panel .dict-alts,
#my-dict-modal-inner .dict-alts  { color: rgba(40,25,0,.55); }
#book-panel .dict-hanja,
#my-dict-modal-inner .dict-hanja { color: #c44; }

/* Wiki sections inside book panel + main-menu dict modal */
#book-panel .wiki-section,
#my-dict-modal-inner .wiki-section { border-color: rgba(101,75,0,.2); flex-shrink: 0; }
#book-panel .wiki-header,
#my-dict-modal-inner .wiki-header  { color: #4a3000 !important; background: rgba(180,130,0,.18); }
#book-panel .wiki-header:hover,
#my-dict-modal-inner .wiki-header:hover { background: rgba(180,130,0,.28); }
#book-panel .wiki-body,
#my-dict-modal-inner .wiki-body { color: #2a1a00; }
#book-panel .wiki-card,
#my-dict-modal-inner .wiki-card {
  background: rgba(255,255,255,.55);
  border-color: rgba(101,75,0,.18);
  color: #2a1a00;
}
#book-panel .wiki-card-seen,
#my-dict-modal-inner .wiki-card-seen { background: rgba(39,174,96,.12); border-color: rgba(39,174,96,.4); }
#book-panel .wiki-card-unknown,
#my-dict-modal-inner .wiki-card-unknown { filter: grayscale(1); opacity: .55; }
#book-panel .wiki-card-title,
#my-dict-modal-inner .wiki-card-title { color: #2a1a00; }
#book-panel .wiki-card-sub,
#my-dict-modal-inner .wiki-card-sub   { color: rgba(40,25,0,.6); }
#book-panel .hanja-tier-label,
#my-dict-modal-inner .hanja-tier-label { color: rgba(74,48,0,.62); }
#book-panel .hanja-mini-card,
#my-dict-modal-inner .hanja-mini-card {
  color: #332816 !important;
}
#book-panel .hanja-mini-card:hover,
#my-dict-modal-inner .hanja-mini-card:hover {
  background: linear-gradient(145deg, #fff 0%, #fff8d9 100%) !important;
}
#book-panel .hanja-mini-char,
#my-dict-modal-inner .hanja-mini-char { color: #292014 !important; }
#book-panel .hanja-mini-reading,
#my-dict-modal-inner .hanja-mini-reading { color: #765522 !important; }
#book-panel .wiki-price,
#my-dict-modal-inner .wiki-price { color: #c87000; }
#book-panel .wiki-desc,
#my-dict-modal-inner .wiki-desc  { color: rgba(40,25,0,.55); }

/* Stats rings */
#book-panel .dict-stats-group,
#my-dict-modal-inner .dict-stats-group { color: #2a1a00; }
#book-panel .dict-ring-lbl, #book-panel .dict-ring-val,
#my-dict-modal-inner .dict-ring-lbl, #my-dict-modal-inner .dict-ring-val { color: #4a3000; }
#book-panel .dict-stats,
#my-dict-modal-inner .dict-stats { color: #2a1a00; }
#book-panel .dict-stats-ring,
#my-dict-modal-inner .dict-stats-ring { color: #2a1a00; }
#book-panel .dict-stats-ring circle.ring-track,
#my-dict-modal-inner .dict-stats-ring circle.ring-track { stroke: rgba(0,0,0,.12); }
#book-panel .dict-stats-label,
#my-dict-modal-inner .dict-stats-label { color: rgba(40,25,0,.65); }

/* Lesson viewer inside book panel */
#book-panel .lesson-content, #book-panel .lesson-body { color: #1a1000; }
#book-panel .lesson-btn { background: rgba(255,202,40,.25); color: #3a2800; border-color: #ffca28; }
#book-panel .lesson-btn:hover { background: rgba(255,202,40,.45); }
#book-panel .lesson-example, #book-panel .example-kr { color: #1a1000; }
#book-panel .lesson-quiz { background: rgba(255,255,255,.6); border-color: rgba(101,75,0,.25); }

/* Dojang book rows inside book panel + main-menu dict modal */
#book-panel .dj-book-row,
#my-dict-modal-inner .dj-book-row { border-color: rgba(101,75,0,.15); background: transparent; }
#book-panel .dj-book-jamo,
#my-dict-modal-inner .dj-book-jamo { color: #3d2800; }
#book-panel .dj-book-name, #book-panel .dj-book-rom,
#my-dict-modal-inner .dj-book-name, #my-dict-modal-inner .dj-book-rom { color: #6b4c00; }
#book-panel .dj-book-count, #book-panel .dj-book-strokes,
#my-dict-modal-inner .dj-book-count, #my-dict-modal-inner .dj-book-strokes { color: rgba(80,55,0,.6); }
#book-panel .dj-book-bar-wrap,
#my-dict-modal-inner .dj-book-bar-wrap { background: rgba(101,75,0,.12); }
#book-panel .dj-book-bar,
#my-dict-modal-inner .dj-book-bar { background: #ffca28; }
#book-panel .dj-book-expand-btn,
#my-dict-modal-inner .dj-book-expand-btn { color: #6b4c00; }
#book-panel .dj-book-desc,
#my-dict-modal-inner .dj-book-desc { color: #2a1a00; background: rgba(255,255,255,.5); }

/* touch fullscreen: keep parchment gradient; */
body.touch-mode #map-panel:not(.off)  { background: #f5eedc !important; box-shadow: none !important; }

/* touch-mode map: legend and perms text on paper */
body.touch-mode #map-panel:not(.off) #map-legend { color: #3d2d00; }
body.touch-mode #map-panel:not(.off) #map-perms-row { border-left-color: rgba(101,75,0,.2); }
body.touch-mode #map-panel:not(.off) #map-perms-row > div { color: #5a3e00 !important; }
body.touch-mode #map-panel:not(.off) .mnw-name { color: #3d2800; }

/* ── Parchment book: speak-word, dict-text, tabs & header ── */
#book-panel .md-speak-word,
#my-dict-modal-inner .md-speak-word { color: #2a1a00; }
#book-panel .dict-text,
#my-dict-modal-inner .dict-text { color: #1a1000 !important; }
#book-panel #book-panel-header { font-size: 1.1rem; }
#book-panel .dict-tab,
#my-dict-modal-inner .dict-tab { font-size: .9rem; }


/* cursor auto-hide after 2s of inactivity in-game */
body.cursor-hidden,
body.cursor-hidden * { cursor: none !important; }

/* ══════════════════════════════════════════════════════════════════
   Minhwa Style — Pintura tradicional coreana nos avatares
   Filtro SVG #minhwa injetado via assets/js/minhwa.js
   ══════════════════════════════════════════════════════════════════ */

/* Aplica filtro Minhwa a todos os SVGs de avatar inline */
#pl-emoji > svg,
#lore-player-inner > svg,
#lore-p2-inner > svg,
#pl-door-ghost > svg,
#ava-preview > svg,
#mp-p2-avatar-inner > svg {
  filter: url(#minhwa);
}

/* ── Textura Hanji (papel) por cima do avatar via ::after ── */

/* Contexto de isolamento para mix-blend-mode não vazar */
#ava-preview-wrap {
  isolation: isolate;
}

/* Grain para o editor de avatar */
#ava-preview-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/paper-grain.svg') center / 180px 180px;
  mix-blend-mode: multiply;
  opacity: 0.12;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}

/* Grain sobre o lore inteiro (cobre toda a cena, não só o personagem) */
#lore-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/paper-grain.svg') center / 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.12;
  pointer-events: none;
  z-index: 9999;
}