*{box-sizing:border-box}
:root{
  --bg:#070a08;--surface:#0d130f;--surface2:#111a14;--surface3:#172019;
  --border:#243429;--text:#dcf5df;--muted:#87a48e;--green:#8cff9d;
  --green2:#4ad765;--gold:#f1cc6a;--red:#ff7d7d;--blue:#8cc9ff;
  --shadow:0 20px 80px rgba(0,0,0,.38);--font-size:16px
}
html{font-size:var(--font-size)}
body{
  margin:0;min-height:100vh;color:var(--text);background:
  radial-gradient(circle at 50% -10%,rgba(69,136,78,.18),transparent 34%),
  linear-gradient(180deg,#070a08,#050706);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace
}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
.hidden{display:none!important}
#app{min-height:100vh}
.topbar{
  height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;
  border-bottom:1px solid var(--border);background:rgba(10,14,11,.9);backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:20
}
.brand{display:flex;align-items:center;gap:13px}.brand-mark{color:var(--green);font-size:27px}
.brand h1{font-size:1.08rem;margin:0;color:#fff}.brand p{font-size:.72rem;color:var(--muted);margin:4px 0 0}
.top-actions{display:flex;gap:8px}.top-actions button,.modal button,.combat-actions button,.direction-row button{
  border:1px solid var(--border);border-radius:8px;background:var(--surface2);color:var(--text);padding:9px 12px
}
button.ghost{background:transparent}button.accent{border-color:#436e4b;color:var(--green);background:#142019}
button:hover{border-color:#4d7857;color:#fff}
.layout{display:grid;grid-template-columns:250px minmax(0,1fr) 280px;gap:14px;max-width:1500px;margin:0 auto;padding:14px}
.sidebar{display:flex;flex-direction:column;gap:14px;min-width:0}
.panel{
  border:1px solid var(--border);border-radius:12px;background:rgba(13,19,15,.94);
  padding:14px;box-shadow:0 8px 30px rgba(0,0,0,.15)
}
.panel.grow{flex:1}.panel h2{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.panel-title-row{display:flex;align-items:center;justify-content:space-between}.panel-title-row span{color:var(--muted);font-size:.72rem}
.stat-line{display:flex;justify-content:space-between;gap:10px;font-size:.82rem;margin:8px 0}.stat-line span{color:var(--muted)}
.meter{height:7px;background:#1b241e;border-radius:99px;overflow:hidden;border:1px solid #27352b}
.meter-fill{height:100%;width:50%;transition:width .25s ease}.meter-fill.hp{background:linear-gradient(90deg,#58d66e,#95ff9f)}
.meter-fill.enemy{background:linear-gradient(90deg,#d65353,#ff8989)}
.small-list{font-size:.78rem;color:#bcd0bf;line-height:1.55}.small-list .muted{color:var(--muted)}
.small-list .done{text-decoration:line-through;color:#64816c}.small-list .quest{padding:7px 0;border-bottom:1px dashed #213126}
.game-column{
  min-width:0;border:1px solid var(--border);border-radius:12px;background:rgba(8,12,9,.96);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;height:calc(100vh - 104px);min-height:620px
}
.game-header{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--border);background:#0d140f}
.eyebrow{font-size:.67rem;letter-spacing:.18em;color:var(--gold)}.game-header h2{font-size:1.02rem;margin:5px 0 0}
.game-meta{display:flex;gap:15px;font-size:.73rem;color:var(--muted)}
.terminal{
  flex:1;overflow-y:auto;padding:20px 20px 10px;scroll-behavior:smooth;
  background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px);background-size:100% 25px
}
.line{white-space:pre-wrap;line-height:1.58;font-size:.91rem;margin:0 0 11px}
.line.command{color:var(--green)}.line.system{color:var(--muted)}.line.gold{color:var(--gold)}
.line.danger{color:var(--red)}.line.info{color:var(--blue)}.line.title{font-weight:700;color:#fff;font-size:1rem;margin-top:6px}
.line.success{color:#a8ffb3}.line.dialogue{color:#d8d0ff}.line em{color:var(--muted)}
.command-form{display:flex;align-items:center;gap:10px;padding:13px 15px;border-top:1px solid var(--border);background:#101711}
.command-form .prompt{color:var(--green);font-weight:700}.command-form input{flex:1;background:transparent;border:0;outline:0;color:var(--text);min-width:0}
.command-form button{border:1px solid #31533a;background:#17301e;color:var(--green);border-radius:8px;padding:8px 13px}
.direction-row{display:flex;justify-content:center;gap:6px;padding:0 14px 12px;background:#101711}
.direction-row button{font-size:.72rem;padding:6px 9px}
.combat-bar{padding:10px 15px;border-top:1px solid #512f2f;background:#1b1010;display:grid;grid-template-columns:170px 1fr auto;gap:10px;align-items:center}
.combat-bar>div:first-child{display:flex;flex-direction:column;font-size:.76rem}.combat-bar span{color:#cfaaaa}.enemy-meter{min-width:100px}
.combat-actions{display:flex;gap:5px}.combat-actions button{font-size:.72rem;padding:7px 8px;background:#211414}
.inventory-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto}
.inventory-item{border:1px solid #203026;border-radius:7px;padding:7px 8px;font-size:.75rem;background:#101711}
.inventory-item strong{display:block;color:#dff7e2}.inventory-item span{color:var(--muted);font-size:.68rem}
.map-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(10,32px);gap:4px;min-height:356px}
.map-cell{border:1px solid #203025;background:#111712;border-radius:5px;font-size:0;position:relative;opacity:.72}
.map-cell.visited{background:#17261b;border-color:#31523a}.map-cell.current{background:#23482b;border-color:var(--green);box-shadow:0 0 0 1px rgba(140,255,157,.18)}
.map-cell::after{content:attr(data-short);position:absolute;inset:0;display:grid;place-items:center;font-size:9px;color:#8fb997}
.map-cell.current::after{color:#fff;font-weight:700}.hint{font-size:.66rem;color:var(--muted);margin:9px 0 0}
.achievement-summary{font-size:.76rem;color:var(--muted)}.achievement-summary strong{color:var(--gold)}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);display:grid;place-items:center;z-index:100;padding:20px}
.modal{width:min(680px,100%);max-height:88vh;overflow:auto;position:relative;background:#0d140f;border:1px solid #304136;border-radius:14px;box-shadow:var(--shadow);padding:24px}
.modal-close{position:absolute;right:12px;top:10px;border:0!important;background:transparent!important;font-size:1.6rem!important;padding:2px 8px!important;color:var(--muted)!important}
.modal h2{margin:0 0 14px;font-size:1.1rem}.modal h3{font-size:.88rem;color:var(--green);margin:18px 0 8px}.modal p,.modal li{font-size:.82rem;line-height:1.6;color:#bed0c1}
.modal code{color:var(--gold)}.modal .modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modal .save-slot{border:1px solid var(--border);padding:12px;border-radius:9px;background:#101711}
.modal .save-slot strong{display:block}.modal .save-slot span{display:block;color:var(--muted);font-size:.72rem;margin:4px 0 9px}
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #1d2a21}
.setting-row select{background:#111a14;border:1px solid var(--border);color:var(--text);padding:6px 9px;border-radius:7px}
.toast{position:fixed;right:18px;bottom:18px;background:#17231a;border:1px solid #385240;color:#dff7e2;padding:11px 14px;border-radius:9px;z-index:200;box-shadow:var(--shadow);font-size:.78rem}
@media(max-width:1100px){.layout{grid-template-columns:210px minmax(0,1fr)}.right-panel{display:none}}
@media(max-width:760px){
  .topbar{height:auto;padding:12px 14px;align-items:flex-start}.brand p{display:none}.top-actions #btnSettings{display:none}
  .layout{display:block;padding:8px}.left-panel{display:none}.game-column{height:calc(100vh - 78px);min-height:520px}
  .game-header{padding:11px 13px}.game-meta{font-size:.65rem;gap:8px}.terminal{padding:15px 13px 8px}.line{font-size:.86rem}
  .combat-bar{grid-template-columns:1fr;gap:7px}.combat-actions{flex-wrap:wrap}.command-form{padding:11px 10px}.command-form button{display:none}
  .direction-row{padding-bottom:9px}.top-actions button{padding:7px 8px;font-size:.72rem}.modal{padding:20px 16px}.modal .modal-grid{grid-template-columns:1fr}
}