/* ==========================================================
   Кръв и Пепел — интерфейс в стил Dragon Quest
   Тъмносини прозорци с бял двоен кант върху черна основа.
   ========================================================== */

:root {
  --dq-fill:    #0a1636;
  --dq-fill-2:  #071028;
  --dq-edge:    #f4f2ea;
  --dq-shadow:  #000000;
  --ink:        #05060c;
  --bone:       #f2efe6;
  --bone-dim:   #a8a496;
  --gold:       #f0c95a;
  --gold-dim:   #9a8134;
  --blood:      #b8202f;
  --blood-lt:   #e4515e;
  --hp:         #d8394a;
  --mp:         #4f9be0;
  --font:       "Georgia", "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #04050a;
  color: var(--bone);
  font-family: var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 0%, #131a2e 0%, #04050a 70%);
  touch-action: manipulation;          /* без двойно чукване за увеличение */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* Кадърът е винаги 640×480 и се мащабира от JS, за да пасне на екрана.
   Така телефон и монитор виждат едно и също, без пренареждане. */
#frame {
  position: relative;
  width: 640px; height: 480px;
  flex: 0 0 auto;
  transform-origin: center center;
  border: 3px solid #2a3350;
  box-shadow: 0 0 0 1px #000, 0 0 40px rgba(60,90,180,0.18), 0 18px 60px rgba(0,0,0,.9);
  overflow: hidden;
  background: #000;
}

#screen { display: block; width: 100%; height: 100%; }

/* По-едри бутони и надписи, когато се играе с пръст */
@media (pointer: coarse) {
  .hud-btn { width: 38px; height: 38px; font-size: 18px; }
  .menu-item { padding-top: 7px; padding-bottom: 7px; }
  #battle-menu .menu-item { padding-top: 6px; padding-bottom: 6px; }
  #menu-tabs .menu-item { padding: 7px 12px; }
}
.hidden { display: none !important; }

/* ---------- Прозорец в стил Dragon Quest ---------- */
.dq-window {
  position: relative;
  background: linear-gradient(180deg, var(--dq-fill), var(--dq-fill-2));
  border: 2px solid var(--dq-edge);
  border-radius: 6px;
  box-shadow: 0 0 0 3px var(--dq-shadow), 0 4px 14px rgba(0,0,0,.75);
  padding: 8px 12px;
  color: var(--bone);
}
.dq-window::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(244,242,234,0.18);
  border-radius: 4px;
  pointer-events: none;
}

/* ---------- Overlay ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  background: rgba(4,5,10,0.95);
}

/* ---------- Заглавен екран ---------- */
#title-screen {
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 35%, rgba(40,60,130,0.30) 0%, rgba(4,5,10,0.97) 65%), #04050a;
}
.title-inner { text-align: center; width: 100%; }
#title-screen h1 {
  margin: 0; font-size: 52px; letter-spacing: 6px; color: var(--bone);
  text-shadow: 0 0 18px rgba(120,160,255,.35), 0 3px 0 #000;
}
#title-screen h1 span {
  display: block; font-size: 19px; letter-spacing: 10px;
  color: var(--blood-lt); margin: 2px 0;
}
.subtitle {
  margin: 6px 0 22px; color: var(--bone-dim);
  letter-spacing: 4px; font-size: 12px; text-transform: uppercase;
}
.hint { margin-top: 22px; font-size: 11px; color: #6d7690; letter-spacing: 1px; }
#title-menu {
  display: inline-flex; flex-direction: column;
  width: 306px; margin: 0 auto; padding: 6px;
}

/* ---------- Менюта ---------- */
.menu { display: flex; flex-direction: column; gap: 1px; }
.menu.horizontal { flex-direction: row; gap: 3px; }

.menu-item {
  position: relative;
  display: flex; align-items: baseline; gap: 10px;
  padding: 5px 12px 5px 24px;
  font-size: 15px; color: var(--bone);
  cursor: pointer; user-select: none;
  border: 1px solid transparent;
  text-align: left; letter-spacing: .5px;
}
/* Дългият надпис се съкращава с многоточие вместо да пълзи под цената. */
.menu-item .m-label {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Стойността отдясно не се свива под съдържанието си — иначе кратки
   числа като „5“ се режеха. Само много дългите имена се съкращават. */
.menu-item .m-right {
  flex: 0 0 auto;
  max-width: 72%;
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.menu-item.sel { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.35); }
.menu-item.sel::before {
  content: "▶";
  position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
  color: var(--bone); font-size: 11px;
}
.menu-item.disabled { color: #5b6480; }
.menu-item.disabled .m-right { color: #5b6480; }

/* ---------- Бутони на екрана ---------- */
#hud-buttons {
  position: absolute; top: 38px; right: 34px; z-index: 16;
  display: flex; gap: 5px;
}
.hud-btn {
  width: 30px; height: 30px;
  background: linear-gradient(180deg, var(--dq-fill), var(--dq-fill-2));
  border: 2px solid var(--dq-edge);
  border-radius: 5px;
  box-shadow: 0 0 0 2px #000;
  color: var(--bone); font-size: 15px; line-height: 1;
  cursor: pointer; font-family: var(--font);
  padding: 0;
}
.hud-btn:hover { background: #16255a; }
.hud-btn.off { color: #5b6480; }

/* ---------- Банер ---------- */
#location-banner {
  display: none;
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 15; padding: 5px 22px;
  background: rgba(7,16,40,.9);
  border: 2px solid var(--dq-edge); border-radius: 5px;
  box-shadow: 0 0 0 2px #000;
  color: var(--bone); letter-spacing: 4px; font-size: 13px;
  text-transform: uppercase; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 450ms ease;
}
#location-banner.show { opacity: 1; }

/* ---------- Диалог ---------- */
#dialog-box {
  position: absolute; left: 30px; right: 30px; bottom: 34px;
  z-index: 25; min-height: 104px;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 14px 16px;
}
#dialog-portrait canvas {
  width: 84px; height: 84px;
  border: 2px solid var(--dq-edge);
  border-radius: 4px;
  box-shadow: 0 0 0 2px #000;
  display: block;
}
#dialog-portrait.empty { display: none; }
#dialog-body { flex: 1; min-width: 0; }
#dialog-name {
  color: var(--gold); font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 6px; min-height: 14px;
}
#dialog-text {
  font-size: 16px; line-height: 1.5; white-space: pre-wrap;
  min-height: 46px;
  padding-right: 26px;      /* стрелката долу вдясно стои в този отстъп */
  padding-bottom: 4px;
  overflow-wrap: anywhere;
}
#dialog-next {
  position: absolute; right: 12px; bottom: 5px;
  width: 18px; text-align: center;
  color: var(--bone); animation: bob 900ms infinite ease-in-out;
}
@keyframes bob { 0%,100% { transform: translateY(0); opacity:.45 } 50% { transform: translateY(3px); opacity:1 } }

/* ---------- Битка ---------- */
#battle-ui { position: absolute; inset: 0; z-index: 18; pointer-events: none; }

#battle-log {
  position: absolute; bottom: 12px; left: 32px; right: 32px;
  min-height: 70px; max-height: 78px;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  font-size: 12.5px; line-height: 1.4; letter-spacing: .2px;
  padding: 6px 12px;
}
#battle-log > div {
  overflow-wrap: anywhere;
  margin-top: 1px;
}
#battle-log .old { color: #8f98b4; }

/* Командите стоят вътре в прозорчето на рамката, над долната лента. */
#battle-bottom {
  position: absolute; left: 30px; right: 30px; bottom: 130px;
  display: flex; align-items: flex-end; gap: 6px; padding: 0;
}
/* Командите и компактните бойни карти остават над дневника. */
#battle-left { display: flex; flex-direction: column; gap: 4px; pointer-events: auto; }

#skill-info {
  width: 232px; font-size: 11px; line-height: 1.45;
  padding: 6px 10px; color: var(--bone-dim);
}
#skill-info:empty { display: none; }
#skill-info b { color: var(--gold); font-weight: normal; }
#skill-info .tag { color: var(--bone); }

/* Брояч за автоматична атака */
.turn-timer {
  position: relative;
  width: 232px; height: 12px;
  background: #04070f;
  border: 2px solid var(--dq-edge);
  border-radius: 4px;
  box-shadow: 0 0 0 2px #000;
  overflow: hidden;
  pointer-events: none;
}
.turn-timer > i {
  position: absolute; inset: 0 auto 0 0;
  display: block; width: 100%;
  background: #4f9be0;
  transition: width 100ms linear;
}
.turn-timer > span {
  position: absolute; inset: 0;
  text-align: center; font-size: 9px; line-height: 8px;
  color: #fff; text-shadow: 0 1px 2px #000;
  font-variant-numeric: tabular-nums;
}

#battle-menu {
  width: 232px; padding: 5px;
  max-height: 172px; overflow-y: auto;
}
#battle-menu:empty { display: none; }
#battle-menu .menu-item { font-size: 14px; padding: 3px 10px 3px 22px; gap: 8px; }

#party-status {
  flex: 1; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 124px));
  gap: 5px; justify-content: end; align-content: end;
  max-width: 258px;
  pointer-events: none;
}
.pstat {
  width: auto; min-width: 0;
  background: linear-gradient(180deg, var(--dq-fill), var(--dq-fill-2));
  border: 2px solid var(--dq-edge); border-radius: 5px;
  box-shadow: 0 0 0 2px #000;
  padding: 4px 6px; font-size: 11px;
}
.pstat.active { border-color: var(--gold); box-shadow: 0 0 0 2px #000, 0 0 10px rgba(240,201,90,.5); }
.pstat.dead { opacity: .45; }
.pstat .top { display: flex; gap: 5px; align-items: center; margin-bottom: 3px; }
.pstat canvas { width: 26px; height: 26px; border: 1px solid #000; display: block; }
.pstat .pname { color: var(--bone); letter-spacing: .5px; font-size: 11px; }
.pstat .lv { color: var(--bone-dim); font-size: 10px; }
.pstat .line { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.pstat .line em { font-style: normal; color: var(--bone-dim); width: 20px; font-size: 10px; }
.pstat .bar { position: relative; flex: 1; height: 8px; background: #04070f; border: 1px solid #38436a; }
.pstat .bar > i { position: absolute; inset: 0 auto 0 0; display: block; transition: width 220ms ease; }
.pstat .bar.hp > i { background: linear-gradient(180deg, #ee5666, var(--hp)); }
.pstat .bar.mp > i { background: linear-gradient(180deg, #79b6ee, var(--mp)); }
.pstat .num { font-size: 10px; color: var(--bone); min-width: 48px; text-align: right; }
.pstat .fx { margin-top: 2px; font-size: 10px; color: var(--gold); letter-spacing: 1px; }

/* ---------- Меню на групата ---------- */
/* Осем раздела на два езика не се събират на един ред при 640px,
   затова редът се пренася вместо да излиза извън кадъра. */
#menu-tabs {
  pointer-events: auto;
  padding: 4px 6px;
  flex-wrap: wrap;
  row-gap: 2px;
  justify-content: flex-start;
}
#menu-tabs .menu-item {
  padding: 3px 9px;
  font-size: 12px;
  letter-spacing: .5px;
  flex: 0 1 auto;
}
#menu-tabs .menu-item .m-label { flex: 0 0 auto; overflow: visible; }
#menu-tabs .menu-item.sel::before { content: ""; }
#menu-tabs .menu-item.sel { padding-left: 9px; }

#menu-main { flex: 1; display: flex; gap: 8px; min-height: 0; }
#menu-list {
  width: 230px; overflow-y: auto; padding: 6px;
  pointer-events: auto; flex-shrink: 0;
}
#menu-list:empty { display: none; }
#menu-list .menu-item { font-size: 12.5px; padding: 3px 8px 3px 21px; gap: 7px; }
#menu-body { flex: 1; overflow-y: auto; font-size: 13px; padding: 10px 12px; }
#menu-foot { font-size: 11px; color: #6d7690; letter-spacing: 1px; min-height: 14px; }

.hero-card {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 10px; align-items: start;
  padding: 8px; margin-bottom: 6px;
  border: 1px solid #35406a; background: rgba(10,22,54,.6); border-radius: 4px;
}
.hero-card canvas { width: 64px; height: 64px; border: 2px solid var(--dq-edge); display: block; }
.hero-card h3 { margin: 0 0 2px; font-size: 15px; color: var(--gold); letter-spacing: .5px; }
.hero-card .cls { font-size: 10px; color: var(--bone-dim); letter-spacing: 2px; text-transform: uppercase; }
.hero-card .bio {
  font-size: 11px; color: var(--bone-dim); font-style: italic;
  margin-top: 4px; overflow-wrap: anywhere;
}
.hero-card .nums {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 14px;
  font-size: 11px; line-height: 1.5; margin-top: 6px;
  border-top: 1px dotted #2c3556; padding-top: 5px;
}
.hero-card .nums > div { overflow-wrap: anywhere; }
.hero-card .nums b { color: var(--bone-dim); font-weight: normal; }

.abils { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin-top: 6px; }
.abil {
  text-align: center; border: 1px solid #35406a; border-radius: 3px;
  padding: 2px 0; background: rgba(4,10,28,.6);
}
.abil .k { font-size: 9px; color: var(--bone-dim); letter-spacing: 1px; }
.abil .v { font-size: 13px; color: var(--bone); }
.abil .m { font-size: 10px; color: var(--gold); }

.row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; border-bottom: 1px dotted #2c3556; }
.row .r-name { color: var(--bone); }
.row .r-val { color: var(--gold); white-space: nowrap; }
.desc { color: var(--bone-dim); font-size: 12px; }
.lore { color: #8c93ad; font-size: 11px; font-style: italic; margin-top: 5px; }

.item-reader {
  display: flex; align-items: center; gap: 8px;
  min-height: 58px; margin: 0 76px 8px 0; padding: 4px 7px;
  border: 1px solid #35406a; border-radius: 4px;
  background: linear-gradient(90deg, rgba(10,22,54,.78), rgba(4,10,28,.42));
}
.item-reader canvas {
  width: 56px !important; height: 56px !important; flex: 0 0 56px;
  float: none !important; margin: 0 !important;
  border: 1px solid var(--dq-edge); background: #060b1c;
  image-rendering: auto !important;
}
.item-reader strong { display: block; color: var(--gold); font-size: 12px; }
.item-reader span { display: block; margin-top: 2px; color: var(--bone-dim); font-size: 10px; font-style: italic; }
.item-icon {
  float: right; width: 64px; height: 64px; margin-left: 8px;
  image-rendering: pixelated;
}

/* ---------- Кодекс ---------- */
.codex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 5px; }
.codex-cell {
  border: 1px solid #35406a; border-radius: 4px;
  background: rgba(4,10,28,.7);
  padding: 4px; text-align: center; cursor: pointer;
}
.codex-cell:hover { border-color: var(--gold); }
.codex-cell.locked { opacity: .38; cursor: default; }
.codex-cell canvas { width: 48px; height: 48px; display: block; margin: 0 auto; image-rendering: pixelated; }
.codex-cell .cname { font-size: 10px; color: var(--bone); margin-top: 2px; line-height: 1.2; }
.codex-cell.locked .cname { color: #5b6480; }

.codex-detail { display: grid; grid-template-columns: 116px 1fr; gap: 12px; }
.codex-detail canvas { width: 108px; height: 108px; border: 2px solid var(--dq-edge); image-rendering: pixelated; background: #060b1c; }
.codex-detail h3 { margin: 0 0 4px; color: var(--gold); font-size: 16px; }
.tagline { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.tag-chip {
  font-size: 10px; padding: 1px 7px; border-radius: 9px;
  border: 1px solid #46527e; color: var(--bone);
}
.tag-chip.weak { border-color: #e07a2a; color: #ffb26a; }
.tag-chip.res  { border-color: #4f9be0; color: #9cc9f2; }
.tag-chip.imm  { border-color: #9a5fc0; color: #cba0e8; }

/* ---------- Магазин ---------- */
#shop-head {
  display: flex; justify-content: space-between; align-items: baseline;
  color: var(--gold); letter-spacing: 2px; text-transform: uppercase; font-size: 13px;
}
#shop-head .gold { color: var(--bone); letter-spacing: .5px; text-transform: none; }
#shop-cols { flex: 1; display: flex; gap: 8px; min-height: 0; }
#shop-list { flex: 1; overflow-y: auto; pointer-events: auto; padding: 6px; }
#shop-info { width: 232px; font-size: 12px; padding: 10px; overflow-y: auto; }
#shop-info canvas { width: 48px; height: 48px; image-rendering: pixelated; float: right; margin-left: 8px; }

/* ---------- Toast ---------- */
#toast {
  position: absolute; left: 50%; bottom: 156px; transform: translateX(-50%);
  z-index: 40; padding: 5px 18px;
  background: rgba(7,16,40,.96);
  border: 2px solid var(--dq-edge); border-radius: 5px;
  box-shadow: 0 0 0 2px #000;
  color: var(--gold); font-size: 13px; letter-spacing: .5px;
  opacity: 0; pointer-events: none; transition: opacity 240ms ease; white-space: nowrap;
}
#toast.show { opacity: 1; }

/* ---------- Сцени ---------- */
.cut-text {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 35;
  min-height: 74px;
  padding: 12px 16px;
  font-size: 16px; line-height: 1.5;
  white-space: pre-wrap;
}
.cut-skip {
  position: absolute;
  right: 18px; top: 12px;
  z-index: 35;
  font-size: 11px; color: #7b849e; letter-spacing: 1px;
}

/* ---------- Плаващо меню ---------- */
.prompt-box {
  position: absolute; right: 34px; bottom: 150px; z-index: 30;
  min-width: 196px; padding: 6px;
}

/* ---------- Скролбар ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #060c1e; }
::-webkit-scrollbar-thumb { background: #35406a; border: 1px solid #0a1636; }