:root {
  color-scheme: dark;
  --bg: #0b0f0c;
  --panel: #111713;
  --panel-2: #172019;
  --panel-3: #0d130f;
  --line: #2b3a2e;
  --text: #e7f0df;
  --muted: #91a08f;
  --accent: #b7dc67;
  --accent-2: #68bfa0;
  --danger: #e1645e;
  --warning: #e3b55c;
  --blue: #74a7cf;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at top, #18241b 0, var(--bg) 46%); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height: 100vh; }
button, input { font: inherit; }
button { cursor: pointer; }

#app { width: min(1510px, 100%); margin: 0 auto; padding: 18px; }
.topbar { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 14px; }
h1 { margin: 0; letter-spacing: .09em; font-size: clamp(24px, 4vw, 42px); line-height: 1; }
h2, h3 { margin-top: 0; }
.eyebrow { color: var(--accent); font-size: 11px; letter-spacing: .18em; margin-bottom: 6px; text-transform: uppercase; }
.top-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

button { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--text); min-height: 38px; padding: 8px 13px; transition: .15s ease; }
button:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(0); }
button:disabled { opacity: .42; cursor: not-allowed; }
button.primary { background: var(--accent); color: #13190e; border-color: var(--accent); font-weight: 800; }
button.ghost { background: rgba(17, 23, 19, .75); }
button.danger { border-color: #7b3534; color: #efb3ae; background: #251414; }
button.mini { min-height: 26px; padding: 3px 8px; font-size: 11px; }

.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 14px; align-items: stretch; }
.game-card, .side-panel { background: rgba(17, 23, 19, .94); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,.28); }
.game-card { min-width: 0; }
.location-strip { min-height: 57px; padding: 9px 14px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(183,220,103,.05), transparent); }
.location-strip strong { display: block; font-size: 17px; }
.canvas-wrap { position: relative; background: #070a08; aspect-ratio: 27 / 19; width: 100%; }
canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; touch-action: none; }
.status-banner { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 30px; background: rgba(4,7,5,.82); font-size: clamp(25px, 4vw, 52px); font-weight: 900; letter-spacing: .08em; white-space: pre-line; }
.hidden { display: none !important; }

.help-row { display: flex; gap: 16px; flex-wrap: wrap; padding: 11px 14px; color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; }
kbd { border: 1px solid #3d5140; background: #0a0f0b; border-radius: 4px; padding: 2px 5px; color: var(--text); box-shadow: inset 0 -1px 0 rgba(255,255,255,.08); }

.side-panel { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 105px); }
.panel-block { padding: 14px; border-bottom: 1px solid var(--line); }
.panel-block:last-child { border-bottom: 0; }
.panel-block.grow { flex: 1; min-height: 190px; display: flex; flex-direction: column; overflow: hidden; }
.panel-block.compact-panel { padding-block: 11px; }
.section-title { color: var(--accent); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; }
.log-title-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.identity-row { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.player-badge { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #405243; background: #0c120e; color: var(--accent); border-radius: 10px; font-size: 22px; font-weight: 900; }
.muted { color: var(--muted); }
.lead { color: #cbd7c6; font-size: 15px; line-height: 1.65; }
.meter { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin: 7px 0 4px; }
.bar { height: 7px; border-radius: 99px; background: #29332b; overflow: hidden; }
.bar i { height: 100%; width: 0; display: block; background: var(--danger); transition: width .2s ease; }
.bar.xp i { background: var(--accent-2); }
.resource-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.resource-grid div { border: 1px solid var(--line); border-radius: 7px; padding: 8px; background: var(--panel-3); display: flex; justify-content: space-between; gap: 8px; }
.resource-grid span { color: var(--muted); font-size: 12px; }
.weapon-card { border: 1px solid var(--line); background: var(--panel-3); border-radius: 8px; padding: 9px; }
.weapon-card strong { display: block; color: var(--warning); }
.weapon-card small { color: var(--muted); }
.quest-summary { line-height: 1.45; font-size: 12px; }

.log-panel { min-height: 240px; }
.log { overflow-y: auto; min-height: 0; max-height: 100%; flex: 1; font-size: 12px; line-height: 1.5; padding-right: 5px; scrollbar-color: #405243 #0d130f; }
.log-entry { border-left: 2px solid var(--line); padding: 6px 7px 6px 9px; color: #bec9ba; margin-bottom: 5px; background: rgba(255,255,255,.015); }
.log-entry .log-meta { display: block; color: #657164; font-size: 10px; margin-bottom: 2px; letter-spacing: .05em; }
.log-entry.good { border-color: var(--accent-2); color: #c9eadf; }
.log-entry.bad { border-color: var(--danger); color: #efb3ae; }
.log-entry.warn { border-color: var(--warning); color: #ecd19a; }
.log-entry.story { border-color: var(--blue); color: #c4daea; }
.log-entry.discovery { border-color: var(--accent); color: #dcebbd; }

.mobile-controls { display: none; justify-content: space-between; gap: 16px; padding: 12px; border-top: 1px solid var(--line); }
.dpad { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 44px); gap: 4px; }
.dpad button:nth-child(1) { grid-column: 2; }
.dpad button:nth-child(2) { grid-column: 1; grid-row: 2; }
.dpad button:nth-child(3) { grid-column: 2; grid-row: 2; }
.dpad button:nth-child(4) { grid-column: 3; grid-row: 2; }
.dpad button:nth-child(5) { grid-column: 2; grid-row: 3; }
.action-pad { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: center; }
.action-pad button { min-width: 93px; }

.modal { width: min(720px, calc(100% - 28px)); max-height: min(90vh, 900px); overflow: auto; background: #101713; color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 0; box-shadow: 0 24px 90px rgba(0,0,0,.6); }
.modal::backdrop { background: rgba(4,7,5,.82); backdrop-filter: blur(4px); }
.modal form { padding: 22px; }
.modal h2 { margin: 0 0 14px; }
.modal.small { width: min(520px, calc(100% - 28px)); }
.modal.wide { width: min(980px, calc(100% - 28px)); }
.world-modal { width: min(1180px, calc(100% - 28px)); }
.dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.field { display: grid; gap: 6px; margin: 12px 0; }
.field span { color: var(--muted); font-size: 12px; }
.field input { border: 1px solid var(--line); border-radius: 8px; background: #0b100d; color: var(--text); padding: 10px 12px; outline: none; }
.field input:focus { border-color: var(--accent); }
.creator-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
.creator-stat { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-3); }
.creator-stat small { display: block; color: var(--muted); margin-top: 2px; }
.creator-stat button { min-height: 31px; width: 32px; padding: 0; }
.creator-stat b { width: 20px; text-align: center; color: var(--accent); }
.creator-footer { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.perk-choices { display: grid; gap: 10px; }
.perk { text-align: left; padding: 13px; }
.perk strong { display: block; color: var(--accent); margin-bottom: 4px; }
.perk span { color: var(--muted); }

.inventory-layout { display: grid; grid-template-columns: 1fr 270px; gap: 14px; }
.inventory-list { display: grid; gap: 8px; }
.inventory-item { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-3); padding: 10px; }
.inventory-item.equipped { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.inventory-item strong { display: block; }
.inventory-item p { color: var(--muted); margin: 3px 0 0; font-size: 12px; line-height: 1.4; }
.item-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: end; }
.inventory-summary { border: 1px solid var(--line); background: #0b100d; border-radius: 9px; padding: 13px; align-self: start; }
.ammo-grid, .derived-grid, .stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.info-cell { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-3); padding: 9px; }
.info-cell span { display: block; color: var(--muted); font-size: 11px; }
.info-cell b { color: var(--accent); }
.character-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.section-card { border: 1px solid var(--line); border-radius: 10px; background: #0b100d; padding: 13px; margin-bottom: 12px; }
.perk-tag { display: inline-block; border: 1px solid #425543; border-radius: 99px; padding: 4px 8px; margin: 3px; color: #dbe8d4; font-size: 12px; }

.world-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; }
#worldCanvas { background: radial-gradient(circle at 40% 45%, #2b3326, #11150f 65%); border: 1px solid var(--line); border-radius: 10px; min-height: 360px; }
.world-info { border: 1px solid var(--line); border-radius: 10px; background: #0b100d; padding: 14px; }
.world-status { display: grid; gap: 6px; margin: 12px 0; color: #c2cec0; }
.world-status div { border-bottom: 1px dashed rgba(145,160,143,.25); padding-bottom: 5px; }
.city-rumor { border-left: 3px solid var(--warning); background: rgba(227,181,92,.07); padding: 12px; color: #e7d5ad; line-height: 1.55; margin: 15px 0; }
.city-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.city-actions .primary { grid-column: 1 / -1; }
.quest-list { display: grid; gap: 10px; }
.quest-card { border: 1px solid var(--line); border-radius: 10px; background: var(--panel-3); padding: 13px; }
.quest-card.done { border-color: var(--accent-2); }
.quest-card h3 { margin: 0 0 6px; }
.quest-card p { color: var(--muted); line-height: 1.5; }
.quest-meta { display: flex; justify-content: space-between; gap: 14px; color: #c9d2c6; font-size: 12px; margin: 8px 0; }

@media (max-width: 1050px) {
  #app { padding: 10px; }
  .game-layout { grid-template-columns: 1fr; }
  .side-panel { max-height: none; display: grid; grid-template-columns: 1fr 1fr; }
  .panel-block.grow { grid-column: 1 / -1; height: 260px; }
  .mobile-controls { display: flex; }
  .help-row { display: none; }
}

@media (max-width: 760px) {
  .topbar { align-items: start; flex-direction: column; }
  .top-actions { width: 100%; justify-content: stretch; }
  .top-actions button { flex: 1 1 28%; padding-inline: 8px; }
  .game-layout { gap: 10px; }
  .side-panel { grid-template-columns: 1fr; }
  .panel-block.grow { grid-column: auto; height: 280px; }
  .canvas-wrap { aspect-ratio: 1 / 1; }
  .location-strip { align-items: start; }
  .mobile-controls { align-items: center; }
  .dpad { grid-template-columns: repeat(3, 42px); grid-template-rows: repeat(3, 40px); }
  .action-pad button { min-width: 82px; padding: 6px; font-size: 12px; }
  .creator-stats, .inventory-layout, .character-columns, .world-layout { grid-template-columns: 1fr; }
  .world-info { order: -1; }
  #worldCanvas { min-height: 280px; }
  .city-actions { grid-template-columns: 1fr; }
  .city-actions .primary { grid-column: auto; }
}

/* v3: accounts, five server saves, free world travel, targets and NPCs */
.target-tooltip { position: absolute; z-index: 4; min-width: 190px; max-width: 260px; pointer-events: none; background: rgba(8,13,9,.94); border: 1px solid var(--accent); border-radius: 8px; padding: 8px 10px; box-shadow: 0 10px 34px rgba(0,0,0,.55); font-size: 12px; line-height: 1.4; }
.target-tooltip strong { color: var(--warning); display: block; }
.target-tooltip .chance { color: var(--accent); font-size: 17px; font-weight: 900; }
.creator-skills { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin: 10px 0 4px; }
.creator-skill { text-align: left; min-height: 46px; padding: 8px 10px; }
.creator-skill.selected { border-color: var(--accent); background: rgba(183,220,103,.12); color: var(--accent); }
.skill-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.skill-cell { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-3); padding: 9px; min-width: 0; }
.skill-cell strong { display: flex; justify-content: space-between; gap: 8px; color: #d6e7c9; }
.skill-cell small { display: block; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.skill-cell.tagged { border-color: #5f7e4f; box-shadow: inset 3px 0 0 var(--accent); }
.skill-spend { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 6px; }
.skill-spend button { min-height: 27px; padding: 2px 8px; }
.armor-card { border: 1px solid var(--line); background: var(--panel-3); border-radius: 8px; padding: 9px; margin-top: 7px; }
.armor-card strong { color: var(--blue); }
.form-error { border: 1px solid #733b38; background: #241413; color: #efb3ae; border-radius: 8px; padding: 9px; margin: 10px 0; }
.auth-actions, .account-actions { display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap; margin-top: 15px; }
.save-slots { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.save-slot { border: 1px solid var(--line); border-radius: 10px; background: var(--panel-3); padding: 12px; display: grid; gap: 8px; }
.save-slot.empty { border-style: dashed; }
.save-slot h3 { margin: 0; color: var(--accent); }
.save-slot p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.save-slot-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.world-canvas-column { min-width: 0; }
.world-controls { display: grid; grid-template-columns: repeat(5, minmax(48px, 1fr)); gap: 6px; margin-top: 8px; }
.world-hint { margin-top: 7px; font-size: 12px; }
#worldCanvas { aspect-ratio: 14 / 9; }
.npc-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin: 14px 0; }
.npc-card { text-align: left; padding: 10px; min-height: 72px; }
.npc-card strong { display: block; color: var(--accent); }
.npc-card span { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.npc-dialogue { border-left: 3px solid var(--accent-2); background: rgba(104,191,160,.07); padding: 13px; line-height: 1.65; margin: 14px 0; }
.npc-actions, .encounter-choices { display: grid; gap: 8px; }
.encounter-choices button { text-align: left; padding: 12px; }
.boss-label { color: #ffb36d; font-weight: 900; letter-spacing: .06em; }
.item-section-title { color: var(--accent); letter-spacing: .12em; font-size: 11px; text-transform: uppercase; margin: 10px 0 4px; }

@media (max-width: 760px) {
  .creator-skills, .skill-grid, .npc-list, .save-slots { grid-template-columns: 1fr; }
  .world-controls { grid-template-columns: repeat(5, 1fr); }
}