/* ============ Arcane Tycoon — theme ============ */
:root {
  --bg0: #0b0e1a;
  --bg1: #131829;
  --bg2: #1b2238;
  --panel: rgba(16, 20, 36, .94);
  --panel-brd: #3a4668;
  --gold: #f5c542;
  --gold-dim: #b9962e;
  --ink: #e8ecf7;
  --ink-dim: #9aa4c0;
  --good: #57d97a;
  --bad: #ff6b6b;
  --warn: #ffb347;
  --mana: #a86bff;
  --accent: #58c1ff;
  font-size: 15px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  background: var(--bg0);
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  user-select: none;
}
#app { position: fixed; inset: 0; }
#game { position: absolute; inset: 0; display: block; cursor: default; }
.hidden { display: none !important; }
.spacer { flex: 1; }

/* ============ Top HUD ============ */
#topbar {
  position: absolute; top: 8px; left: 8px; right: 8px;
  display: flex; align-items: center; gap: 6px;
  pointer-events: auto; z-index: 30;
}
.hud-group {
  background: var(--panel);
  border: 1px solid var(--panel-brd);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: .95rem;
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
  white-space: nowrap;
}
.hud-group.brand { color: var(--gold); font-weight: bold; letter-spacing: .06em; text-shadow: 0 0 12px rgba(245,197,66,.35); }
.hud-group.stat span b { color: var(--gold); }
.mana-bar { width: 90px; height: 10px; background: #241a3d; border-radius: 6px; overflow: hidden; border: 1px solid #4a3a75; }
#mana-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #7b3ff2, #c39bff); transition: width .25s; }
#mana-num { font-size: .78rem; color: #cbb2ff; min-width: 52px; }
.clock { font-variant-numeric: tabular-nums; }

.hbtn {
  background: var(--panel); border: 1px solid var(--panel-brd); color: var(--ink);
  border-radius: 10px; padding: 6px 11px; font-size: 1rem; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.hbtn:hover { border-color: var(--gold); background: #1c2440; }
.hbtn.active { border-color: var(--gold); color: var(--gold); }
#speed-group { display: flex; gap: 4px; }

/* ============ Minimap ============ */
#minimap-wrap {
  position: absolute; right: 10px; top: 54px; z-index: 25;
  border: 1px solid var(--panel-brd); border-radius: 10px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.5); line-height: 0; background:#000;
}
#minimap { cursor: crosshair; }

/* ============ Toolbar ============ */
#toolbar {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 8px;
  display: flex; gap: 5px; padding: 6px; z-index: 30;
  background: var(--panel); border: 1px solid var(--panel-brd); border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.55);
}
.tbtn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 62px; padding: 6px 4px;
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  color: var(--ink); font-size: 1.25rem; cursor: pointer;
}
.tbtn span { font-size: .68rem; color: var(--ink-dim); letter-spacing: .02em; }
.tbtn:hover { background: #202a4a; }
.tbtn.active { border-color: var(--gold); background: #232d52; }
.tbtn.active span { color: var(--gold); }

/* ============ Palette ============ */
#palette {
  position: absolute; left: 8px; bottom: 76px; width: 308px; max-height: 62vh;
  background: var(--panel); border: 1px solid var(--panel-brd); border-radius: 12px;
  z-index: 32; display: flex; flex-direction: column;
  box-shadow: 0 6px 22px rgba(0,0,0,.55);
}
.pal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px; border-bottom: 1px solid var(--panel-brd);
  color: var(--gold); font-weight: bold; letter-spacing: .04em;
}
.pal-head button { background:none;border:none;color:var(--ink-dim);cursor:pointer;font-size:1rem; }
.pal-head button:hover{color:var(--bad);}
#pal-body { overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 7px; }
.pal-item {
  background: var(--bg2); border: 1px solid var(--panel-brd); border-radius: 10px;
  padding: 8px 6px; text-align: center; cursor: pointer; position: relative;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.pal-item:hover { border-color: var(--gold); background: #232c50; }
.pal-item.selected { outline: 2px solid var(--gold); }
.pal-item.locked { opacity: .45; filter: grayscale(.8); cursor: not-allowed; }
.pal-item .ic { font-size: 1.5rem; line-height: 1; }
.pal-item .nm { font-size: .72rem; color: var(--ink); line-height:1.15; }
.pal-item .pr { font-size: .7rem; color: var(--gold); }
.pal-item.unaffordable .pr { color: var(--bad); }

/* ============ Context panel ============ */
#context-panel {
  position: absolute; right: 10px; top: 250px; width: 264px;
  background: var(--panel); border: 1px solid var(--panel-brd); border-radius: 12px;
  z-index: 28; padding: 12px; box-shadow: 0 6px 22px rgba(0,0,0,.55);
  max-height: 46vh; overflow-y: auto;
}
.ctx-title { color: var(--gold); font-weight: bold; margin-bottom: 6px; display:flex;justify-content:space-between;align-items:center; }
.ctx-title button{background:none;border:none;color:var(--ink-dim);cursor:pointer;}
.ctx-row { display: flex; justify-content: space-between; font-size: .84rem; padding: 2.5px 0; color: var(--ink-dim); }
.ctx-row b { color: var(--ink); font-weight: normal; }
.bar { height: 8px; background: #26203c; border-radius: 5px; overflow: hidden; margin: 3px 0 7px; border:1px solid #3a3157;}
.bar > div { height: 100%; border-radius: 5px; }
.btnrow { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* ============ Buttons ============ */
.btn {
  background: linear-gradient(180deg, #2a3559, #1d2542);
  color: var(--ink); border: 1px solid var(--panel-brd);
  border-radius: 9px; padding: 7px 13px; cursor: pointer; font-size: .88rem;
}
.btn:hover { border-color: var(--gold); color: var(--gold); }
.btn.primary { background: linear-gradient(180deg, #8a6b1d, #6b520f); border-color: var(--gold); color: #fff; }
.btn.primary:hover { filter: brightness(1.15); color:#fff; }
.btn.danger { border-color: #a04444; color: #ff9c9c; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ============ Tool hint ============ */
#tool-hint {
  position: absolute; top: 56px; left: 50%; transform: translateX(-50%);
  background: rgba(20,16,40,.92); border: 1px solid var(--mana);
  color: #d9ccff; border-radius: 999px; padding: 6px 18px; font-size: .85rem; z-index: 31;
  box-shadow: 0 0 18px rgba(140,90,255,.25);
}

/* ============ Toasts ============ */
#toasts {
  position: absolute; right: 10px; bottom: 76px; width: 300px;
  display: flex; flex-direction: column-reverse; gap: 7px; z-index: 40; pointer-events: none;
}
.toast {
  background: var(--panel); border: 1px solid var(--panel-brd); border-left: 4px solid var(--accent);
  border-radius: 10px; padding: 8px 12px; font-size: .83rem;
  animation: toast-in .25s ease-out; box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.toast.gold { border-left-color: var(--gold); }
.toast.bad { border-left-color: var(--bad); }
.toast.good { border-left-color: var(--good); }
.toast.magic { border-left-color: var(--mana); }
.toast .t-title { color: var(--gold); font-weight: bold; font-size: .8rem; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.toast.fade { opacity: 0; transition: opacity .6s; }

/* ============ Modal ============ */
#modal-root {
  position: fixed; inset: 0; background: rgba(5,7,14,.66); z-index: 100;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
}
.modal {
  background: linear-gradient(180deg, #171d33, #10142a);
  border: 1px solid var(--panel-brd); border-radius: 16px;
  width: min(720px, 94vw); max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 70px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
}
.modal.wide { width: min(980px, 96vw); }
.modal-head {
  padding: 14px 18px; border-bottom: 1px solid var(--panel-brd);
  display: flex; justify-content: space-between; align-items: center;
  color: var(--gold); font-weight: bold; font-size: 1.1rem; letter-spacing: .05em;
}
.modal-head button { background: none; border: none; color: var(--ink-dim); font-size: 1.2rem; cursor: pointer; }
.modal-head button:hover { color: var(--bad); }
.modal-body { padding: 16px 18px; overflow-y: auto; }
.modal-foot { padding: 12px 18px; border-top: 1px solid var(--panel-brd); display: flex; justify-content: flex-end; gap: 8px; }

/* Scenario cards */
.scen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scen-card {
  border: 1px solid var(--panel-brd); border-radius: 12px; padding: 14px;
  background: var(--bg2); cursor: pointer; transition: transform .12s, border-color .12s;
}
.scen-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.scen-card h3 { color: var(--gold); margin-bottom: 4px; font-size: 1.02rem; }
.scen-card p { font-size: .82rem; color: var(--ink-dim); margin-bottom: 8px; }
.scen-card .diff { font-size: .74rem; color: var(--warn); letter-spacing: .1em; }
.scen-goals { list-style: none; margin-top: 6px; }
.scen-goals li { font-size: .78rem; color: var(--ink-dim); padding: 1px 0; }

/* Research */
.res-track { margin-bottom: 14px; border: 1px solid var(--panel-brd); border-radius: 12px; padding: 10px 12px; background: var(--bg2); }
.res-track h4 { color: var(--accent); margin-bottom: 6px; display:flex; justify-content:space-between; }
.res-items { display: flex; flex-wrap: wrap; gap: 6px; }
.res-item { border: 1px solid var(--panel-brd); border-radius: 9px; padding: 6px 10px; font-size: .8rem; background: var(--bg1); }
.res-item.done { border-color: var(--good); color: var(--good); }
.res-item.avail { cursor: pointer; border-color: var(--warn); }
.res-item.avail:hover { background: #33301c; }
.res-item.avail.cant { opacity:.5; cursor:not-allowed; }

/* Finances table */
table.fin { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.fin th, table.fin td { padding: 5px 8px; text-align: right; border-bottom: 1px solid #232a44; }
table.fin th:first-child, table.fin td:first-child { text-align: left; }
table.fin th { color: var(--ink-dim); font-weight: normal; }
.pos { color: var(--good); } .neg { color: var(--bad); }

/* Hero guild */
.hero-card { border: 1px solid var(--panel-brd); border-radius: 12px; padding: 10px; background: var(--bg2); display:flex; gap:10px; align-items:center; }
.hero-card .portrait { font-size: 2rem; filter: drop-shadow(0 0 8px rgba(120,160,255,.35)); }
.hero-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; }
.hp-bar { height: 7px; background:#33202c; border-radius:5px; overflow:hidden; }
.hp-bar>div{height:100%;background:linear-gradient(90deg,#e5484d,#ff8a5c);}
.xp-bar { height: 5px; background:#20303c; border-radius:5px; overflow:hidden; margin-top:3px;}
.xp-bar>div{height:100%;background:var(--accent);}

/* Help / tutorial */
.help-cols { columns: 2; column-gap: 26px; font-size: .86rem; color: var(--ink-dim); }
.help-cols h4 { color: var(--gold); margin: 8px 0 4px; break-inside: avoid-column; }
.help-cols p, .help-cols li { margin-bottom: 4px; break-inside: avoid-column; }
kbd { background:#242c4c; border:1px solid #3c486e; border-radius:5px; padding:0 6px; font-family:inherit; font-size:.78rem; color:#cdd6f4;}

/* Settings rows */
.set-row { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid #222a46; font-size:.9rem; }
input[type=range]{ accent-color: var(--gold); width:170px;}
input[type=text], input[type=number], select{
  background:#0e1326; color:var(--ink); border:1px solid var(--panel-brd); border-radius:7px; padding:5px 9px; font-family:inherit;
}

/* ============ Main menu ============ */
#main-menu {
  position: fixed; inset: 0; z-index: 80;
  background:
    radial-gradient(1100px 500px at 50% -80px, rgba(168,107,255,.28), transparent 60%),
    radial-gradient(900px 480px at 85% 108%, rgba(88,193,255,.16), transparent 55%),
    radial-gradient(800px 420px at 12% 105%, rgba(245,197,66,.13), transparent 55%),
    linear-gradient(180deg, #0a0d1c 0%, #12172c 55%, #1a1430 100%);
  display: flex; align-items: center; justify-content: center;
}
.mm-inner { text-align: center; animation: mm-in .7s ease-out; }
@keyframes mm-in { from { opacity: 0; transform: translateY(16px) scale(.98);} to {opacity:1;transform:none;} }
.mm-title {
  font-size: clamp(2.6rem, 7vw, 4.6rem); letter-spacing: .18em; color: var(--gold);
  text-shadow: 0 0 30px rgba(245,197,66,.45), 0 4px 0 #6b520f; font-weight: 900;
}
.mm-sub { color: #cbb2ff; letter-spacing: .42em; margin: 10px 0 38px; font-size: .95rem; text-transform: uppercase; }
.mm-buttons { display: flex; flex-direction: column; gap: 13px; width: 290px; margin: 0 auto; }
.big-btn {
  padding: 14px; font-size: 1.08rem; border-radius: 13px; cursor: pointer;
  background: linear-gradient(180deg, #8a6b1d, #5d480d); color: #fff;
  border: 1px solid var(--gold); letter-spacing: .06em;
  box-shadow: 0 6px 22px rgba(245,197,66,.22);
}
.big-btn:hover { filter: brightness(1.2); transform: translateY(-1px); }
.big-btn.ghost { background: rgba(255,255,255,.05); border-color: var(--panel-brd); color: var(--ink); box-shadow:none; }
.mm-credit { margin-top: 44px; color: #5d6787; font-size: .76rem; letter-spacing: .08em; }

/* POV overlay (on-ride camera) */
#pov-overlay { position: fixed; inset: 0; z-index: 70; background: #000; }
#pov-canvas { width: 100%; height: 100%; display:block; }
#pov-hud {
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  background:rgba(10,10,25,.7); border:1px solid var(--panel-brd); border-radius:999px;
  padding:8px 22px; display:flex; gap:22px; font-size:.9rem; align-items:center;
}
#pov-exit { position:absolute; top:14px; right:14px; }

/* scrollbars */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#2c3658;border-radius:6px}
::-webkit-scrollbar-track{background:transparent}