:root {
  --bronze: #b8894a;
  --bronze-dark: #6b4a22;
  --stone: rgba(28, 24, 20, 0.88);
  --stone-2: rgba(48, 40, 32, 0.92);
  --text: #efe6d4;
  --muted: #b9ab92;
  --good: #7fd36b;
  --perfect: #ffd84a;
  --bad: #e0503c;
  --hp: #4fc36a;
  --sta: #e8c34a;
  font-family: "Segoe UI", "Leelawadee UI", "Tahoma", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--text); }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

/* ---------- loading ---------- */
#loading { position: fixed; inset: 0; background: #0d0a07; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; }
.loading-title { font-size: 56px; letter-spacing: 12px; color: var(--bronze); font-family: "Times New Roman", serif; }
.loading-sub { margin-top: 12px; color: var(--muted); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#emblem { position: absolute; left: 18px; top: 14px; width: 132px; height: 132px; }
#topbar { position: absolute; right: 18px; top: 14px; text-align: right; text-shadow: 0 2px 4px #000; }
#day-label { font-size: 20px; color: var(--text); }
#money-label { font-size: 15px; color: var(--muted); margin-top: 4px; }
#prompt { position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); background: var(--stone); border: 1px solid var(--bronze-dark); padding: 8px 18px; border-radius: 4px; font-size: 17px; display: flex; gap: 10px; align-items: center; }
#toast { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); background: var(--stone); border: 1px solid var(--bronze); padding: 10px 22px; font-size: 18px; border-radius: 4px; }
#fps { position: fixed; left: 160px; top: 14px; font: 12px/1.35 Consolas, monospace; background: rgba(0,0,0,.65); padding: 6px 9px; color: #9f9; z-index: 50; white-space: pre; pointer-events: none; }

/* ---------- button glyphs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; font-weight: 700; font-size: 14px; border: 2px solid #ddd; color: #fff; background: #222; }
.btn.kb { border-radius: 5px; background: #333; border-color: #888; }
.btn.ps.south { color: #8ab4ff; border-color: #8ab4ff; }
.btn.ps.east { color: #ff6b6b; border-color: #ff6b6b; }
.btn.ps.west { color: #ff9be3; border-color: #ff9be3; }
.btn.ps.north { color: #5fe0b0; border-color: #5fe0b0; }
.btn.xbox.south { background: #2f8a2f; border-color: #6c6; }
.btn.xbox.east { background: #a52a2a; border-color: #e66; }
.btn.xbox.west { background: #2c56a8; border-color: #69f; }
.btn.xbox.north { background: #a88a1c; border-color: #ec4; }
.btn.big { min-width: 46px; height: 46px; border-radius: 23px; font-size: 22px; border-width: 3px; }
.btn.kb.big { border-radius: 8px; }

/* ---------- panels ---------- */
.screen { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; }
.screen.dim { background: rgba(0,0,0,.55); }
.panel { background: var(--stone); border: 2px solid var(--bronze-dark); outline: 1px solid rgba(184,137,74,.35); outline-offset: -6px; padding: 22px 26px; border-radius: 3px; min-width: 360px; max-width: min(92vw, 760px); max-height: 92vh; overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.panel h1, .panel h2 { margin: 0 0 12px; font-family: "Times New Roman", serif; color: var(--bronze); letter-spacing: 2px; font-weight: 400; }
.panel h1 { font-size: 30px; } .panel h2 { font-size: 22px; }
.panel p { color: var(--text); line-height: 1.55; margin: 6px 0; }
.muted { color: var(--muted); }
.menu { list-style: none; padding: 0; margin: 10px 0 0; }
.menu li { padding: 10px 14px; margin: 4px 0; border: 1px solid transparent; border-radius: 3px; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; }
.menu li .sub { color: var(--muted); font-size: 13px; }
.menu li.sel { background: rgba(184,137,74,.18); border-color: var(--bronze); }
.menu li.disabled { opacity: .4; }
.menu.compact li { padding: 5px 12px; margin: 2px 0; }
.hint { margin-top: 14px; color: var(--muted); font-size: 13px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.hint span { display: inline-flex; gap: 6px; align-items: center; }
input.name { width: 100%; font-size: 18px; padding: 8px 10px; background: #1a1612; color: var(--text); border: 1px solid var(--bronze-dark); margin-top: 6px; }

/* ---------- title ---------- */
.title-big { font-size: 64px; letter-spacing: 14px; font-family: "Times New Roman", serif; color: var(--bronze); text-align: center; text-shadow: 0 4px 18px #000; }
.title-sub { text-align: center; color: var(--muted); margin-bottom: 18px; letter-spacing: 3px; }

/* ---------- character select ---------- */
.chars { display: flex; gap: 10px; margin: 10px 0; }
.chars .c { flex: 1; padding: 10px; border: 1px solid var(--bronze-dark); text-align: center; cursor: pointer; }
.chars .c.sel { background: rgba(184,137,74,.2); border-color: var(--bronze); }

/* ---------- minigames ---------- */
.mg { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
.mg-top { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); width: min(86vw, 900px); }
.mg-bar { position: relative; height: 26px; background: linear-gradient(#5a3e1e, #3a2812); border: 2px solid #2a1a0a; border-radius: 13px; overflow: hidden; }
.mg-zone { position: absolute; top: 0; bottom: 0; background: var(--bad); opacity: .85; }
.mg-zone.perfect { background: var(--perfect); opacity: 1; }
.mg-cursor { position: absolute; top: -4px; bottom: -4px; width: 5px; margin-left: -2px; background: #fff; box-shadow: 0 0 8px #fff; }
.mg-btnrow { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.mg-timebar { height: 8px; background: #2a1a0a; border: 1px solid #000; margin-bottom: 10px; }
.mg-timebar > div { height: 100%; background: linear-gradient(90deg, #e8c34a, #6c6); }
.mg-seq { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.mg-seq .btn.done { opacity: .25; }
.mg-seq .btn.cur { transform: scale(1.25); box-shadow: 0 0 10px #fff; }
.mg-score { position: absolute; right: 24px; bottom: 90px; background: var(--stone-2); border: 2px solid var(--bronze-dark); min-width: 170px; font: 18px/1 Consolas, monospace; }
.mg-score div { display: flex; justify-content: space-between; padding: 7px 12px; border-bottom: 1px solid rgba(184,137,74,.25); }
.mg-flash { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%); font-size: 42px; font-weight: 800; letter-spacing: 3px; text-shadow: 0 3px 10px #000; }
.mg-flash.good { color: var(--good); } .mg-flash.perfect { color: var(--perfect); } .mg-flash.bad { color: var(--bad); }
.mg-caption { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); font-size: 18px; text-shadow: 0 2px 6px #000; }

/* ---------- food (mess) ---------- */
.food { display: grid; grid-template-columns: 1fr 96px 44px 1fr 74px; gap: 6px 10px; align-items: center; font-size: 17px; }
.food .row { display: contents; }
.food .cell { padding: 7px 10px; background: rgba(0,0,0,.35); border: 1px solid rgba(184,137,74,.25); }
.food .cell.sel { border-color: var(--bronze); background: rgba(184,137,74,.2); }
.food .num { text-align: right; font-family: Consolas, monospace; }
.food .stat { color: var(--bronze); }
.food-foot { display: flex; justify-content: space-between; margin-top: 12px; font: 17px Consolas, monospace; }
.food-foot .over { color: var(--bad); }

/* ---------- status ---------- */
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kv { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed rgba(184,137,74,.2); font-family: Consolas, monospace; }
.lvbar { height: 6px; background: #222; margin: 2px 0 6px; } .lvbar > div { height: 100%; background: var(--bronze); }
/* interactive tutorial card */
.tut-card { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 15; width: min(640px, 92vw); background: rgba(20,14,8,.86); border: 1px solid var(--bronze-dark); outline: 1px solid rgba(184,137,74,.3); outline-offset: -5px; padding: 12px 18px; border-radius: 3px; color: var(--text); font-size: 15px; line-height: 1.6; pointer-events: none; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.tut-head { font-family: "Times New Roman", serif; color: var(--bronze); font-size: 21px; letter-spacing: 1px; margin-bottom: 4px; }
.tut-n { font-size: 12px; color: var(--muted); font-family: "Segoe UI", sans-serif; letter-spacing: 0; margin-right: 6px; }
.tut-prog { margin-top: 6px; color: #ffd84a; font-weight: 600; }
.tut-foot { margin-top: 8px; font-size: 12px; color: var(--muted); }
/* match card */
.vs-banner { position: fixed; left: 0; right: 0; top: 34%; z-index: 30; text-align: center; pointer-events: none; opacity: 0; transform: scale(1.08); transition: opacity .45s, transform .45s; text-shadow: 0 3px 12px #000; }
.vs-banner.in { opacity: 1; transform: scale(1); }
.vs-banner .vs-arena { font: 15px "Segoe UI", sans-serif; letter-spacing: 3px; color: #e8d2aa; margin-bottom: 6px; }
.vs-banner .vs-row { display: flex; justify-content: center; align-items: baseline; gap: 26px; font-family: "Times New Roman", serif; font-size: 44px; color: #fff; background: linear-gradient(90deg, transparent, rgba(20,12,6,.7) 20%, rgba(20,12,6,.7) 80%, transparent); padding: 8px 0; }
.vs-banner .vs-x { color: #ffd84a; font-size: 30px; }
.vs-banner .vs-them { color: #ffb08a; }
.vs-banner .vs-title { font: italic 20px "Times New Roman", serif; color: #ffd84a; margin-top: 4px; }
/* status screen (RtF-style) */
.status-panel { min-width: min(920px, 94vw); }
.st-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.st-head h2 { margin-bottom: 6px; }
.status-grid3 { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; gap: 20px; }
@media (max-width: 760px) { .status-grid3 { grid-template-columns: 1fr; } }
.st-emblem { display: flex; justify-content: center; margin-bottom: 6px; }
.st-emblem svg { width: 150px; height: 150px; }
.st-row { display: grid; grid-template-columns: 42px 1fr 40px; align-items: center; gap: 8px; padding: 4px 0; font-family: Consolas, monospace; }
.st-k { color: var(--bronze); }
.st-v { text-align: right; }
.st-bar { height: 9px; background: rgba(0,0,0,.4); border: 1px solid rgba(184,137,74,.35); }
.st-bar > div { height: 100%; background: linear-gradient(90deg, #8a5a22, #e0b060); }
.lvbar.debt > div { background: linear-gradient(90deg, #6b8f3a, #b7d46a); }
/* cinematic title: letterbox bars, captions, menu on the left over the live scene */
.cine-bars { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.cine-bars .cine-top, .cine-bars .cine-bot { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height .9s ease; }
.cine-bars .cine-top { top: 0; } .cine-bars .cine-bot { bottom: 0; }
.cine-bars.on .cine-top, .cine-bars.on .cine-bot { height: 9vh; }
.cine-cap { position: absolute; left: 0; right: 0; bottom: 12vh; text-align: center; font: 28px "Times New Roman", serif; letter-spacing: 2px; color: #f3e2c0; text-shadow: 0 2px 10px #000, 0 0 30px #000; opacity: 0; transition: opacity .8s; padding: 0 6vw; }
.cine-cap.in { opacity: 1; }
.title-screen { justify-content: flex-start !important; align-items: center; }
.title-wrap { margin-left: 7vw; max-width: 460px; }
.title-wrap .title-big { text-align: left; font-size: clamp(44px, 6vw, 78px); letter-spacing: 12px; text-shadow: 0 4px 24px #000, 0 0 2px #000; }
.title-wrap .title-sub { text-align: left; letter-spacing: 8px; color: #e8d2aa; text-shadow: 0 2px 8px #000; }
.title-menu { min-width: 320px; background: rgba(20,14,8,.55); backdrop-filter: blur(2px); }


/* ---------------------------------------------------------------- Roman theme (marble, gold, meander) */
:root {
  --gold: #d6b06a;
  --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 11h4V3h12v6h-6V6h3' fill='none' stroke='%23b8894a' stroke-width='1.6'/%3E%3Cpath d='M16 11h8' stroke='%23b8894a' stroke-width='1.6'/%3E%3C/svg%3E");
  --roman: "Cinzel", "Trajan Pro", "Times New Roman", serif;
}
.panel {
  position: relative;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,240,210,.06), transparent 60%),
    linear-gradient(160deg, rgba(40,33,26,.93), rgba(22,18,14,.95));
  border: 1px solid var(--bronze-dark);
  outline: 1px solid rgba(214,176,106,.45); outline-offset: -5px;
  padding-top: 30px; padding-bottom: 28px;
  box-shadow: 0 14px 44px rgba(0,0,0,.65), inset 0 0 40px rgba(0,0,0,.35);
}
.panel::before, .panel::after {
  content: ""; position: absolute; left: 10px; right: 10px; height: 12px; pointer-events: none;
  background: var(--meander) repeat-x center / auto 12px; opacity: .85;
}
.panel::before { top: 9px; } .panel::after { bottom: 8px; }
.panel h1, .panel h2, .title-big, .title-sub, .loading-title, .tut-head, .vs-banner .vs-row { font-family: var(--roman); }
.panel h1, .panel h2 { color: var(--gold); text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.menu li { position: relative; transition: background .15s, border-color .15s; }
.menu li.sel {
  background: linear-gradient(90deg, rgba(214,176,106,.26), rgba(214,176,106,.06) 70%, transparent);
  border-color: rgba(214,176,106,.75);
  box-shadow: inset 3px 0 0 var(--gold);
}
.menu li.sel::before {
  content: "❧"; position: absolute; left: -16px; top: 50%; transform: translateY(-50%) scaleX(-1);
  color: var(--gold); font-size: 15px; text-shadow: 0 0 6px rgba(214,176,106,.6);
}
.title-big { background: linear-gradient(180deg, #f3dca4 0%, #c99b55 55%, #8a6330 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none !important; letter-spacing: 12px; display: inline-block; padding-right: 0.4em; white-space: nowrap; filter: drop-shadow(0 4px 14px rgba(0,0,0,.85)); }
.title-sub { color: var(--gold) !important; letter-spacing: 9px !important; }
.title-sub::before, .title-sub::after { content: "—  "; opacity: .6; } .title-sub::after { content: "  —"; }


/* ---------------------------------------------------------------- combat HUD, Roman theme */
.chud .ch-box {
  background: linear-gradient(180deg, rgba(38,30,22,.88), rgba(18,14,10,.9)) !important;
  border: 1px solid rgba(214,176,106,.55) !important; border-radius: 2px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.6);
  position: absolute;
}
.chud .ch-box::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: -7px; height: 8px;
  background: var(--meander) repeat-x center / auto 8px; opacity: .8; pointer-events: none;
}
.chud .ch-time { font-family: var(--roman) !important; font-size: 22px !important; color: var(--gold); letter-spacing: 2px; min-width: 64px; text-align: center; }
.chud .ch-weapon { color: #f0e2c4; }
.chud .ch-center {
  font-family: var(--roman) !important; font-weight: 700 !important; letter-spacing: 6px !important;
  text-shadow: 0 0 18px rgba(0,0,0,.9), 0 3px 8px #000 !important;
}
.chud .ch-combo { font-family: var(--roman) !important; color: var(--gold) !important; letter-spacing: 2px; }
.chud .ch-pop { font-family: var(--roman) !important; -webkit-text-stroke: 1px rgba(0,0,0,.55); }
.chud .ch-foe-n { font-family: var(--roman); color: #f2e3c2; letter-spacing: 1px; margin-bottom: 2px; }
.chud .ch-foe-hp { height: 7px; background: #1c120a; border: 1px solid rgba(214,176,106,.7); box-shadow: 0 1px 3px #000; }
.chud .ch-foe-hp > div { background: linear-gradient(180deg, #e2604c, #9c2a1e); }
.chud .ch-foe-st { height: 3px; background: #1c120a; margin-top: 2px; border: 1px solid rgba(0,0,0,.6); }
.chud .ch-foe-st > div { background: linear-gradient(180deg, #f0d06a, #b8902a); }