:root {
  --bg: #0b0f14;
  --panel: rgba(12, 16, 24, .82);
  --gold: #d9b45a;
  --gold-dim: #8c7035;
  --ink: #ece4d2;
  --ink-dim: #a99f88;
  --ember: #ff7a2f;
  --blood: #c0392b;
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", Georgia, serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: var(--serif); -webkit-user-select: none; user-select: none; touch-action: none;
  overscroll-behavior: none;
}
canvas#game { position: fixed; inset: 0; display: block; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
.panel {
  background: var(--panel); border: 1px solid var(--gold-dim); border-radius: 6px;
  padding: 8px 12px; box-shadow: 0 2px 12px rgba(0,0,0,.5);
}
#me { position: absolute; left: max(12px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); width: 230px; }
.hpbar { position: relative; height: 20px; background: #2a0f0f; border: 1px solid #000; border-radius: 3px; overflow: hidden; }
.hpbar i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(#e0533d, #8e2216); transition: width .12s linear; }
.hpbar span { position: absolute; inset: 0; text-align: center; font-size: 13px; line-height: 20px; text-shadow: 0 1px 2px #000; }
#me .row { margin-top: 6px; font-size: 14px; color: var(--ink-dim); }
#me b { color: var(--gold); font-size: 16px; }
#top { position: absolute; right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); min-width: 180px; max-width: 220px; }
#top h4 { margin: 0 0 4px; font-size: 12px; font-weight: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
#top ol { margin: 0; padding-left: 20px; font-size: 14px; }
#top li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#top li span { color: var(--gold); float: right; margin-left: 10px; }
#online { margin-top: 4px; font-size: 12px; color: var(--ink-dim); }
#feed { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); width: min(320px, 60vw); display: flex; flex-direction: column; gap: 3px; }
#feed div { background: var(--panel); border-left: 2px solid var(--blood); padding: 3px 8px; font-size: 13px; border-radius: 2px; animation: fadein .2s ease-out; }
@keyframes fadein { from { opacity: 0; transform: translateX(-8px); } }
#mini {
  position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
  width: 150px; height: 100px; background: rgba(8, 12, 10, .7); border: 1px solid var(--gold-dim); border-radius: 4px;
}

/* ---------- Оверлеи ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 30%, rgba(40, 24, 12, .55), rgba(5, 8, 12, .92) 70%);
  overflow-y: auto; touch-action: pan-y;
}
#menu { align-items: flex-start; }
.card {
  width: 100%; max-width: 440px; margin: auto; text-align: center; padding: 28px 24px;
  background: linear-gradient(180deg, rgba(24, 18, 12, .94), rgba(10, 12, 18, .96));
  border: 1px solid var(--gold-dim); border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(0,0,0,.4), 0 10px 40px rgba(0,0,0,.7), inset 0 0 40px rgba(217,180,90,.05);
}
.card.wide { max-width: 560px; }
h1 {
  margin: 0; font-size: clamp(30px, 8vw, 46px); font-weight: normal; letter-spacing: .04em;
  background: linear-gradient(#ffe7a8, #d9902f 60%, #a4521c); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 8px rgba(255, 122, 47, .35));
}
h2 { margin: 0 0 8px; font-weight: normal; font-size: 30px; color: var(--blood); }
.sub { margin: 2px 0 14px; letter-spacing: .3em; text-transform: uppercase; font-size: 12px; color: var(--gold); }
.lore { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--ink-dim); }
.field { display: block; text-align: left; margin-bottom: 14px; }
.field span { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.field input {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 18px; color: var(--ink);
  background: rgba(0,0,0,.45); border: 1px solid var(--gold-dim); border-radius: 4px; outline: none;
  -webkit-user-select: text; user-select: text;
}
.field input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(217,180,90,.25); }
.classes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.cls {
  font: inherit; color: var(--ink); text-align: center; padding: 10px 6px; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid #3a3426; border-radius: 6px; transition: .15s;
}
.cls b { display: block; font-size: 17px; font-weight: normal; margin-bottom: 4px; }
.cls i { display: block; font-style: normal; font-size: 12px; line-height: 1.35; color: var(--ink-dim); min-height: 48px; }
.cls small { display: block; margin-top: 6px; font-size: 10px; color: var(--gold-dim); }
.cls:hover { border-color: var(--gold-dim); }
.cls.sel { border-color: var(--gold); background: rgba(217,180,90,.1); box-shadow: 0 0 14px rgba(217,180,90,.2); }
.btn {
  font: inherit; font-size: 18px; letter-spacing: .04em; color: #1a1005; cursor: pointer; padding: 12px 26px; margin: 4px;
  background: linear-gradient(#f3d58a, #c58b2c); border: 1px solid #6b4a14; border-radius: 5px;
  box-shadow: 0 2px 0 #6b4a14, 0 6px 16px rgba(0,0,0,.5); transition: transform .08s, filter .15s;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 #6b4a14; }
.btn:disabled { filter: grayscale(.8) brightness(.7); cursor: wait; }
.btn.ghost { color: var(--ink); background: transparent; border-color: var(--gold-dim); box-shadow: none; }
.msg { min-height: 1.2em; margin: 8px 0 0; font-size: 14px; color: var(--blood); }
.hint { margin: 8px 0 0; font-size: 12px; line-height: 1.8; color: var(--ink-dim); }
kbd { display: inline-block; min-width: 20px; padding: 0 5px; margin: 0 1px; font: 11px/18px monospace; color: var(--ink); background: #1b1f27; border: 1px solid #3a4150; border-radius: 3px; }
.hall { margin-top: 18px; padding-top: 14px; border-top: 1px solid #3a3426; text-align: left; }
.hall h3 { margin: 0 0 6px; text-align: center; font-weight: normal; letter-spacing: .12em; text-transform: uppercase; font-size: 14px; color: var(--gold); }
.hall ol { margin: 0; padding-left: 26px; font-size: 15px; }
.hall li { padding: 2px 0; }
.hall li span { float: right; color: var(--gold); }
.hall li.empty { list-style: none; margin-left: -26px; text-align: center; color: var(--ink-dim); font-size: 13px; }
.big { font-size: 20px; color: var(--ink-dim); margin: 10px 0; }
.big span { font-size: 54px; color: var(--gold); display: block; line-height: 1.1; }

@media (max-width: 560px) {
  .classes { grid-template-columns: 1fr; }
  .cls i { min-height: 0; }
  #top { max-width: 150px; min-width: 130px; }
  #me { width: 170px; }
  #mini { width: 110px; height: 73px; }
  .hint br { display: none; }
}

/* ---------- Виньетка (вместо рисования на канвасе, чтобы не тратить энергию) ---------- */
#vig { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }

/* ---------- Пауза, показатели, экономия энергии ---------- */
#stats { position: absolute; left: 50%; transform: translateX(-50%); top: max(6px, env(safe-area-inset-top)); font-size: 11px; color: rgba(236,228,210,.55); text-shadow: 0 1px 2px #000; white-space: nowrap; }
#pausebtn {
  position: absolute; pointer-events: auto; cursor: pointer; width: 40px; height: 34px;
  left: max(12px, env(safe-area-inset-left)); top: calc(max(12px, env(safe-area-inset-top)) + 84px);
  font: 13px/1 sans-serif; letter-spacing: -2px; color: var(--ink); background: var(--panel); border: 1px solid var(--gold-dim); border-radius: 6px;
}
#pausebtn:hover { border-color: var(--gold); }
h2.calm { color: var(--gold); }
.link {
  font: inherit; font-size: 13px; color: var(--ink-dim); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; margin-top: 10px;
}
.link:hover { color: var(--gold); }