:root {
  --bg: #070912;
  --panel: rgba(13, 17, 31, 0.82);
  --panel-strong: rgba(18, 23, 42, 0.94);
  --line: rgba(165, 188, 255, 0.16);
  --line-bright: rgba(181, 203, 255, 0.34);
  --text: #eef3ff;
  --muted: #8e9ab5;
  --accent: #82a8ff;
  --accent-2: #bd8cff;
  --cyan: #7ce9e2;
  --gold: #f3ce80;
  --danger: #ff6888;
  --good: #72e3a4;
  --shadow: 0 24px 80px rgba(0,0,0,.46);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(86, 78, 179, .20), transparent 32rem),
    radial-gradient(circle at 85% 8%, rgba(38, 112, 150, .13), transparent 34rem),
    linear-gradient(180deg, #090b17, #05060c 72%);
}
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

#app { width: min(1880px, 100%); margin: 0 auto; padding: 14px; }
.glass {
  background: linear-gradient(145deg, rgba(20,25,46,.86), rgba(9,12,24,.84));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), var(--shadow);
  backdrop-filter: blur(18px);
}

.topbar {
  min-height: 76px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 16px;
  gap: 20px;
  margin-bottom: 12px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center;
  color: #dbe7ff; font-size: 24px;
  background: radial-gradient(circle at 35% 30%, #9fc3ff, #7456c9 43%, #202545 75%);
  box-shadow: 0 0 30px rgba(111, 130, 255, .34), inset 0 0 14px rgba(255,255,255,.25);
}
h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; margin: 0; letter-spacing: .04em; }
.brand h1 { font-size: 18px; letter-spacing: .18em; }
.brand p { margin: 3px 0 0; font-size: 9px; letter-spacing: .22em; color: var(--muted); }
.run-readout { display: flex; gap: 36px; align-items: center; }
.run-readout div { min-width: 64px; text-align: center; }
.run-readout span { display:block; font-size: 9px; letter-spacing:.17em; color:var(--muted); margin-bottom: 4px; }
.run-readout strong { font-family:Georgia,'Times New Roman',serif; font-size:19px; color:#f4f7ff; }
.top-actions { justify-self: end; display:flex; align-items:center; gap:8px; }
.speed-control { display:flex; padding:4px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.2); }
.speed-btn, .icon-btn {
  border:0; background:transparent; cursor:pointer; border-radius:8px; color:var(--muted);
  transition:.2s ease;
}
.speed-btn { min-width:36px; height:32px; font-size:12px; font-weight:700; }
.speed-btn:hover, .speed-btn.active { background:rgba(130,168,255,.16); color:#fff; box-shadow:inset 0 0 0 1px rgba(130,168,255,.2); }
.icon-btn { width:40px; height:40px; border:1px solid var(--line); font-size:17px; }
.icon-btn:hover { border-color:var(--line-bright); color:#fff; background:rgba(255,255,255,.05); }
.icon-btn.muted { color:#596177; text-decoration:line-through; }

.game-layout { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:12px; }
.stage-shell { position:relative; overflow:hidden; min-height:640px; height:calc(100vh - 284px); border-radius:20px; }
#gameCanvas { display:block; width:100%; height:100%; cursor:crosshair; touch-action:none; }
.sidebar { display:flex; flex-direction:column; gap:12px; }
.panel { border-radius:18px; padding:16px; }
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:15px; }
.panel-heading.compact { margin-bottom:12px; align-items:center; }
.panel-heading h2 { font-size:17px; margin-top:3px; }
.panel-heading h3 { font-size:15px; margin-top:2px; }
.eyebrow { color:#8190ae; letter-spacing:.16em; font-size:9px; font-weight:700; }
.level-badge { padding:7px 9px; border-radius:9px; border:1px solid rgba(129,164,255,.25); background:rgba(100,128,210,.12); font-size:10px; font-weight:800; letter-spacing:.08em; }
.bar-block { margin-bottom:10px; }
.bar-label { display:flex; justify-content:space-between; font-size:10px; color:var(--muted); margin-bottom:5px; }
.bar-label strong { color:#dce5f8; font-weight:600; }
.meter { height:8px; border-radius:999px; overflow:hidden; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.04); }
.meter > div { height:100%; border-radius:inherit; transition:width .25s ease; }
.hp-meter > div { background:linear-gradient(90deg,#b72f55,#ff6d83); box-shadow:0 0 12px rgba(255,80,120,.35); }
.xp-meter > div { background:linear-gradient(90deg,#5f6bd9,#84b7ff); }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0; }
.stat-grid div { padding:10px; border-radius:11px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.025); }
.stat-grid span { display:block; font-size:9px; color:var(--muted); margin-bottom:4px; }
.stat-grid strong { font-family:Georgia,'Times New Roman',serif; font-size:14px; }

.ability-btn {
  position:relative; overflow:hidden; width:100%; min-height:60px; border:1px solid rgba(135,180,255,.35); border-radius:14px;
  background:linear-gradient(135deg,rgba(73,105,189,.22),rgba(116,68,166,.20)); cursor:pointer;
  display:flex; align-items:center; gap:12px; padding:10px 13px; text-align:left; transition:.2s ease;
}
.ability-btn:hover:not(:disabled) { transform:translateY(-1px); border-color:rgba(147,213,255,.65); box-shadow:0 9px 28px rgba(53,78,158,.25); }
.ability-btn:disabled { cursor:not-allowed; filter:saturate(.55); }
.ability-glyph { width:37px; height:37px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle,#d3f4ff,#7294e9 42%,#303357 68%); color:white; box-shadow:0 0 18px rgba(105,177,255,.38); font-size:20px; z-index:1; }
.ability-copy { display:flex; flex-direction:column; z-index:1; }
.ability-copy strong { font-family:Georgia,'Times New Roman',serif; font-size:13px; }
.ability-copy small { color:#9fb0cf; font-size:10px; margin-top:3px; }
.ability-cooldown { position:absolute; inset:auto 0 0; height:0; background:rgba(4,6,13,.68); transition:height .08s linear; }

.smart-toggle { display:flex; align-items:center; gap:7px; font-size:9px; color:var(--muted); cursor:pointer; user-select:none; }
.smart-toggle input { display:none; }
.smart-toggle span { width:29px; height:16px; border-radius:99px; background:#363d52; position:relative; transition:.2s; }
.smart-toggle span::after { content:""; width:11px; height:11px; border-radius:50%; background:#adb7ca; position:absolute; top:2.5px; left:3px; transition:.2s; }
.smart-toggle input:checked + span { background:#486dc0; }
.smart-toggle input:checked + span::after { transform:translateX(12px); background:white; }
.equipment-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.equip-slot { min-height:64px; border:1px solid rgba(255,255,255,.065); border-radius:12px; background:rgba(255,255,255,.025); padding:8px; display:flex; gap:8px; align-items:center; }
.equip-icon { width:31px; height:31px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center; background:rgba(114,147,225,.13); border:1px solid rgba(127,164,255,.15); }
.equip-copy { min-width:0; }
.equip-copy span { display:block; color:#75819a; font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.equip-copy strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10px; margin:3px 0 2px; }
.equip-copy small { color:#9aa7bf; font-size:8px; }
.rarity-uncommon strong { color:#8be0b5; }
.rarity-rare strong { color:#91b7ff; }
.rarity-epic strong { color:#d39cff; }
.rarity-legendary strong { color:#ffd681; text-shadow:0 0 8px rgba(255,205,111,.25); }
.loot-feed { display:flex; flex-direction:column; gap:5px; margin-top:10px; min-height:22px; }
.loot-entry { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px; border-radius:9px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.04); font-size:8px; color:#9aa8c1; }
.loot-entry strong { color:#d9e2f4; font-size:9px; }
.loot-actions { display:flex; gap:4px; }
.loot-actions button { border:1px solid var(--line); border-radius:6px; background:rgba(255,255,255,.04); cursor:pointer; padding:3px 6px; font-size:8px; }

.run-modifiers { min-height:48px; display:flex; flex-wrap:wrap; gap:6px; }
.modifier-chip { padding:6px 8px; border:1px solid rgba(125,162,255,.16); background:rgba(91,120,190,.09); border-radius:9px; font-size:8px; color:#b8c5de; }
.empty-state { color:#6f7c95; font-size:9px; padding:8px 0; }
.expedition-actions { display:flex; gap:7px; margin-top:12px; }
.secondary-btn, .text-btn { border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:10px; cursor:pointer; transition:.2s; }
.secondary-btn { flex:1; padding:9px 10px; font-size:10px; }
.secondary-btn:hover { border-color:var(--line-bright); background:rgba(255,255,255,.07); }
.text-btn { padding:8px 12px; color:#7f8ba4; }
.text-btn:hover { color:#bcc7da; }

.hand-shell { margin-top:12px; border-radius:18px; padding:11px 13px 13px; min-height:142px; }
.hand-header { display:flex; justify-content:space-between; align-items:end; margin-bottom:9px; font-size:10px; color:#7e8ba6; }
.hand-header strong { display:block; color:#ccd6e9; margin-top:2px; font-size:11px; }
.card-hand { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:thin; }
.world-card {
  position:relative; flex:0 0 178px; min-height:92px; border:1px solid rgba(255,255,255,.09); border-radius:13px; padding:10px;
  background:linear-gradient(145deg,rgba(37,44,69,.96),rgba(15,18,33,.98)); cursor:pointer; text-align:left;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; overflow:hidden;
}
.world-card::before { content:""; position:absolute; inset:0; opacity:.2; background:radial-gradient(circle at 90% 15%,var(--card-color,#82a8ff),transparent 45%); }
.world-card:hover { transform:translateY(-3px); border-color:rgba(173,196,255,.36); box-shadow:0 10px 22px rgba(0,0,0,.28); }
.world-card.selected { transform:translateY(-6px); border-color:var(--cyan); box-shadow:0 0 0 1px rgba(124,233,226,.2),0 12px 28px rgba(0,0,0,.35); }
.card-top { position:relative; display:flex; align-items:center; gap:9px; }
.card-icon { width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.06);font-size:17px; }
.card-name { font-family:Georgia,'Times New Roman',serif;font-size:11px; }
.card-type { font-size:8px;color:#7f8ba5;margin-top:2px;text-transform:uppercase;letter-spacing:.09em; }
.card-desc { position:relative;font-size:8.5px;color:#aab5c9;line-height:1.35;margin-top:8px;padding-right:3px; }
.card-danger { position:absolute;right:8px;top:8px;font-size:8px;color:#ff9ab0;background:rgba(150,42,72,.18);padding:3px 5px;border-radius:6px; }
.card-hotkey { position:absolute;right:7px;bottom:5px;color:#5f6c86;font-size:8px; }

.danger-wrap { position:absolute; left:18px; right:18px; top:14px; pointer-events:none; }
.danger-copy { display:flex;justify-content:space-between;font-size:9px;letter-spacing:.13em;color:#9ea9c0;text-shadow:0 1px 4px #000; }
.danger-copy strong { color:#ff9bb0; }
.danger-track { margin-top:5px;height:5px;border-radius:999px;background:rgba(0,0,0,.45);overflow:hidden;border:1px solid rgba(255,255,255,.05); }
.danger-fill { height:100%;width:0;background:linear-gradient(90deg,#7f4d9c,#ff5378);box-shadow:0 0 12px rgba(255,75,116,.5);transition:width .3s; }
.boss-hint { text-align:right;font-size:8px;color:#71809c;margin-top:4px; }
.placement-hint { position:absolute;left:50%;bottom:15px;transform:translateX(-50%);padding:9px 12px;border-radius:10px;background:rgba(8,11,23,.9);border:1px solid rgba(124,233,226,.3);font-size:9px;color:#c3d0e8;box-shadow:0 12px 30px rgba(0,0,0,.35); }
.placement-hint button { margin-left:10px;border:0;background:transparent;color:var(--cyan);cursor:pointer;font-size:9px; }
.hidden { display:none !important; }
.toast-stack { position:absolute;left:18px;bottom:18px;display:flex;flex-direction:column;gap:7px;pointer-events:none; }
.toast { min-width:220px;max-width:330px;padding:9px 11px;border-radius:10px;background:rgba(10,13,25,.92);border:1px solid rgba(160,183,255,.18);box-shadow:0 10px 28px rgba(0,0,0,.32);font-size:9px;color:#b8c4da;animation:toastIn .22s ease,toastOut .35s ease 3.2s forwards; }
.toast strong { color:#edf2ff;display:block;margin-bottom:2px; }
@keyframes toastIn { from{opacity:0;transform:translateY(8px)} }
@keyframes toastOut { to{opacity:0;transform:translateY(8px)} }

.modal-layer { position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(3,4,10,.72);backdrop-filter:blur(12px); }
.modal-layer.visible { display:flex; }
.modal { display:none;position:relative;width:min(760px,100%);max-height:90vh;overflow:auto;border-radius:23px;padding:28px;background:linear-gradient(145deg,rgba(24,30,55,.98),rgba(9,12,24,.99));border:1px solid rgba(168,191,255,.22);box-shadow:0 38px 100px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.05); }
.modal.visible { display:block;animation:modalIn .24s ease; }
@keyframes modalIn { from{opacity:0;transform:scale(.98) translateY(8px)} }
.modal h2 { font-size:28px;line-height:1.18;margin:8px 0 12px; }
.modal > p { color:#a5b0c5;line-height:1.7;font-size:13px;max-width:660px; }
.modal-sigil { width:60px;height:60px;border-radius:18px;display:grid;place-items:center;font-size:30px;margin-bottom:16px;background:radial-gradient(circle,#cce8ff,#806fd4 48%,#292c4b 72%);box-shadow:0 0 36px rgba(127,146,255,.35); }
.feature-row { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0; }
.feature-row div { padding:14px;border-radius:13px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06); }
.feature-row strong { display:block;font-family:Georgia,'Times New Roman',serif;font-size:12px;margin-bottom:7px; }
.feature-row span { color:#8e9ab1;font-size:10px;line-height:1.5; }
.primary-btn { border:1px solid rgba(143,188,255,.48);border-radius:12px;background:linear-gradient(135deg,#4d6fb8,#7954b4);padding:12px 20px;font-weight:700;cursor:pointer;box-shadow:0 12px 28px rgba(48,61,130,.32);transition:.2s; }
.primary-btn:hover { transform:translateY(-1px);filter:brightness(1.1); }
.intro-modal > small { display:block;color:#65728d;font-size:9px;margin-top:13px; }
.choice-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:20px; }
.choice-card { min-height:170px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.035);padding:16px;cursor:pointer;text-align:left;transition:.2s; }
.choice-card:hover { transform:translateY(-3px);border-color:rgba(132,183,255,.45);background:rgba(100,125,200,.1); }
.choice-card .choice-icon { font-size:26px;margin-bottom:18px; }
.choice-card strong { display:block;font-family:Georgia,'Times New Roman',serif;font-size:14px;margin-bottom:8px; }
.choice-card p { color:#9da9bf;font-size:10px;line-height:1.55;margin:0; }
.camp-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0; }
.camp-stats div { border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.025);border-radius:11px;padding:12px; }
.camp-stats span { display:block;color:#7f8ba4;font-size:8px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px; }
.camp-stats strong { font-family:Georgia,'Times New Roman',serif;font-size:15px; }
.upgrade-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:16px 0 20px; }
.upgrade-card { border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);border-radius:12px;padding:13px; }
.upgrade-card strong { display:block;font-family:Georgia,'Times New Roman',serif;font-size:12px; }
.upgrade-card p { color:#8793aa;font-size:9px;line-height:1.45;min-height:39px; }
.upgrade-card button { width:100%;border:1px solid rgba(132,178,255,.25);border-radius:9px;background:rgba(83,115,190,.12);padding:8px;cursor:pointer;font-size:9px; }
.upgrade-card button:disabled { opacity:.4;cursor:not-allowed; }
.help-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0; }
.help-grid div { padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.025); }
.help-grid strong { font-family:Georgia,'Times New Roman',serif;font-size:12px; }
.help-grid p { color:#96a2b8;font-size:10px;line-height:1.55;margin:8px 0 0; }
.close-btn { position:absolute;right:15px;top:13px;width:34px;height:34px;border:0;background:transparent;color:#7f8ba2;font-size:24px;cursor:pointer; }

@media (max-width: 1180px) {
  .game-layout { grid-template-columns:minmax(0,1fr) 300px; }
  .stage-shell { min-height:560px; }
  .run-readout { gap:20px; }
}
@media (max-width: 920px) {
  #app { padding:8px; }
  .topbar { grid-template-columns:1fr auto; }
  .run-readout { display:none; }
  .game-layout { grid-template-columns:1fr; }
  .stage-shell { height:58vh;min-height:430px; }
  .sidebar { display:grid;grid-template-columns:1fr 1fr; }
  .expedition-panel { grid-column:1/-1; }
  .hand-shell { position:relative; }
}
@media (max-width: 620px) {
  .topbar { min-height:64px;padding:8px;gap:8px; }
  .brand-mark { width:40px;height:40px; }
  .brand h1 { font-size:14px; }
  .brand p { display:none; }
  .speed-btn { min-width:30px; }
  .icon-btn { width:34px;height:34px; }
  .stage-shell { height:50vh;min-height:350px; }
  .sidebar { display:flex; }
  .world-card { flex-basis:154px;min-height:88px; }
  .feature-row,.choice-grid,.upgrade-grid { grid-template-columns:1fr; }
  .help-grid { grid-template-columns:1fr; }
  .camp-stats { grid-template-columns:1fr 1fr; }
  .modal { padding:20px; }
  .modal h2 { font-size:22px; }
  .danger-wrap { left:10px;right:10px; }
}

.world-status {
  position:absolute; right:16px; bottom:16px; display:flex; gap:6px; pointer-events:none;
  padding:7px; border-radius:12px; background:rgba(7,10,20,.82); border:1px solid rgba(163,187,255,.14);
  box-shadow:0 10px 28px rgba(0,0,0,.28); backdrop-filter:blur(10px);
}
.world-status div { min-width:68px; padding:5px 7px; border-right:1px solid rgba(255,255,255,.06); }
.world-status div:last-child { border-right:0; min-width:105px; }
.world-status span { display:block; font-size:7px; letter-spacing:.12em; color:#71809c; margin-bottom:3px; }
.world-status strong { display:block; max-width:115px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; color:#d8e2f4; }
.tile-tooltip {
  position:absolute; z-index:8; width:235px; pointer-events:none; padding:9px 10px; border-radius:10px;
  background:rgba(7,10,20,.95); border:1px solid rgba(161,188,255,.23); box-shadow:0 12px 32px rgba(0,0,0,.45);
}
.tile-tooltip strong { display:block; font-family:Georgia,'Times New Roman',serif; font-size:11px; color:#edf3ff; margin-bottom:4px; }
.tile-tooltip span { display:block; font-size:8.5px; line-height:1.45; color:#9facbf; }
@media (max-width: 620px) {
  .world-status { right:8px; bottom:8px; padding:5px; }
  .world-status div { min-width:52px; padding:4px; }
  .world-status div:last-child { min-width:78px; }
  .world-status span { font-size:6px; }
  .world-status strong { font-size:8px; max-width:80px; }
  .tile-tooltip { display:none !important; }
}