/* Fonts: system/serif stack only — no external font dependencies, per portal policy */
  :root{
    --parchment:#e8dcc0;
    --parchment-dark:#d4c39e;
    --ink:#2b1d10;
    --crimson:#7a1f1f;
    --brass:#9c7a3c;
    --forest:#3c4a2b;
    --shadow:#1a120a;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;height:100%;background:var(--shadow);
    font-family:Georgia, 'Times New Roman', serif; color:var(--ink);}
  #app{display:flex;flex-direction:column;height:100%;}
  header{
    background:linear-gradient(180deg,#3a2a16,#241608);
    color:var(--parchment);
    padding:10px 18px;
    display:flex;justify-content:space-between;align-items:baseline;
    border-bottom:3px solid var(--brass);
    flex-shrink:0;
  }
  header h1{
    font-family:'Palatino Linotype', Georgia, serif;
    letter-spacing:3px;
    font-size:1.4em;margin:0;
    text-transform:uppercase;
    color:#e8d9b0;
    text-shadow:1px 1px 0 #000;
  }
  header .tag{font-size:.75em;font-style:italic;color:#b8a06a;}
  #main{flex:1;display:flex;overflow:hidden;}
  #mapPane{flex:1;overflow:hidden;background:
    radial-gradient(ellipse at 50% 30%, #2c2210, #16100a 80%);
    position:relative;cursor:grab;}
  #mapPane.grabbing{cursor:grabbing;}
  #zoomControls{position:absolute;top:14px;right:14px;
    display:flex;flex-direction:column;gap:4px;z-index:8;width:38px;}
  #zoomControls button{width:36px;height:32px;font-size:1.1em;padding:0;}
  #sidebar{width:340px;background:var(--parchment);
    border-left:4px solid var(--brass);
    display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;}
  #stats{padding:14px 16px;border-bottom:2px solid var(--brass);}
  #stats h2{margin:0 0 8px;font-size:1em;letter-spacing:2px;text-transform:uppercase;
    color:var(--crimson);border-bottom:1px solid var(--brass);padding-bottom:4px;}
  .statRow{display:flex;justify-content:space-between;font-size:.92em;padding:2px 0;}
  .statRow b{color:var(--forest);}
  #bars{margin-top:6px;}
  .barLabel{font-size:.78em;display:flex;justify-content:space-between;margin-top:4px;}
  .barTrack{background:#c9b98b;border:1px solid var(--ink);height:10px;border-radius:2px;overflow:hidden;}
  .barFill{height:100%;}
  .fillHealth{background:linear-gradient(90deg,#7a1f1f,#b03a3a);}
  .fillFood{background:linear-gradient(90deg,#4a6a2c,#7ea34a);}
  .fillEnd{background:linear-gradient(90deg,#8a6a1f,#c9a13a);}
  #inventory{padding:10px 16px;font-size:.85em;border-bottom:2px solid var(--brass);}
  #inventory ul{margin:4px 0 0;padding-left:18px;}
  #log{flex:1;overflow-y:auto;padding:10px 16px;font-size:.86em;line-height:1.4em;
    background:#ded0ac;}
  #log p{margin:0 0 8px;padding-bottom:6px;border-bottom:1px dashed #b3a077;}
  #log p.event{color:var(--crimson);font-weight:bold;}
  #log p.combat{color:#5a1010;}
  #log p.good{color:var(--forest);font-weight:bold;}
  .paraNum{display:inline-block;background:var(--crimson);color:#f2e6c4;
    font-size:.72em;font-weight:bold;padding:1px 5px;border-radius:2px;
    margin-right:6px;letter-spacing:.5px;font-family:Georgia,serif;}
  #controls{padding:12px 16px;border-top:2px solid var(--brass);background:var(--parchment-dark);}
  #controls .dirGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:8px;}
  button{
    font-family:'Segoe UI',Verdana,Arial,sans-serif;font-weight:600;
    background:linear-gradient(180deg,#4fc3dc,#1a7a99 55%,#0d4a5c);
    color:#fff;border:1px solid #0a3a4a;border-radius:9px;
    padding:8px 6px;cursor:pointer;font-size:.82em;letter-spacing:.4px;
    position:relative;overflow:hidden;isolation:isolate;
    box-shadow:0 3px 0 rgba(0,0,0,.35), 0 5px 8px rgba(0,0,0,.35);
    text-shadow:0 1px 2px rgba(0,0,0,.45);
    transition:transform .08s, box-shadow .08s, filter .12s;
  }
  button::before{
    content:"";position:absolute;inset:0 0 50% 0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0));
    border-radius:9px 9px 50% 50%/9px 9px 100% 100%;
  }
  button:hover:not(:disabled){filter:brightness(1.14);}
  button:active:not(:disabled){transform:translateY(2px);
    box-shadow:0 1px 0 rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.35);}
  button:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4);box-shadow:none;}
  #actionRow{display:flex;gap:6px;flex-wrap:wrap;}
  #actionRow button{flex:1;min-width:90px;}
  svg{background:transparent;}
  .hex{stroke:#1a120a;stroke-width:1;cursor:pointer;transition:filter .15s;}
  .hex:hover.reachable{filter:brightness(1.35);}
  .hexId{font-size:6px;fill:#241608;text-anchor:middle;pointer-events:none;font-family:Georgia,serif;opacity:.75;}
  .hexMarker{font-size:15px;text-anchor:middle;pointer-events:none;fill:#7a1f1f;
    text-shadow:0 0 3px #fff;}
  .fog{fill:#0d0904;stroke:#000;opacity:.94;}
  .fog:hover{opacity:.94;}
  #mapWrap{position:relative;width:100%;height:100%;}
  #mapSvg{width:100%;height:100%;display:block;}
  #compassRose{position:absolute;top:6px;left:6px;width:70px;height:70px;
    pointer-events:none;z-index:5;filter:drop-shadow(0 2px 3px #000);}
  #overlay{
    position:fixed;inset:0;background:rgba(10,6,2,.92);
    display:none;align-items:center;justify-content:center;z-index:50;
  }
  #overlay.show{display:flex;}
  #overlayBox{
    background:linear-gradient(160deg,#f7ecc8,#e2cd94 55%,#c9ac78);
    border:3px solid rgba(255,255,255,.5);border-radius:22px;
    padding:34px 42px;max-width:520px;text-align:center;
    box-shadow:0 16px 50px rgba(0,0,0,.6), 0 0 30px rgba(201,161,58,.35), inset 0 2px 0 rgba(255,255,255,.6);
    position:relative;overflow:hidden;
  }
  #overlayBox::before{content:"";position:absolute;top:0;left:0;right:0;height:38%;
    background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));pointer-events:none;}
  #overlayBox h2{color:var(--crimson);letter-spacing:2px;text-transform:uppercase;margin-top:0;}
  #overlayBox button{margin-top:16px;padding:10px 24px;font-size:1em;}
  #turnOverlay{
    position:fixed;inset:0;background:rgba(10,6,2,.88);
    display:none;align-items:center;justify-content:center;z-index:60;
  }
  #turnOverlay.show{display:flex;}
  #turnBox{
    background:linear-gradient(160deg,#f7ecc8,#e2cd94 55%,#c9ac78);
    border:3px solid rgba(255,255,255,.5);border-radius:20px;
    padding:26px 32px;max-width:480px;width:90%;text-align:left;
    box-shadow:0 16px 50px rgba(0,0,0,.6), 0 0 26px rgba(201,161,58,.3), inset 0 2px 0 rgba(255,255,255,.6);
    max-height:70vh;display:flex;flex-direction:column;position:relative;overflow:hidden;
  }
  #turnBox::before{content:"";position:absolute;top:0;left:0;right:0;height:30%;
    background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));pointer-events:none;}
  #turnBox h3{margin:0 0 10px;color:var(--crimson);letter-spacing:1px;
    text-transform:uppercase;font-size:1em;border-bottom:1px solid var(--brass);padding-bottom:6px;}
  #turnMsgs{overflow-y:auto;flex:1;margin-bottom:14px;}
  #turnMsgs p{margin:0 0 8px;font-size:.92em;line-height:1.4em;padding-bottom:6px;
    border-bottom:1px dashed #b3a077;}
  #turnMsgs p.event{color:var(--crimson);font-weight:bold;}
  #turnMsgs p.combat{color:#5a1010;}
  #turnMsgs p.good{color:var(--forest);font-weight:bold;}
  #turnBox button{align-self:flex-end;padding:8px 22px;}

  #dungeonOverlay{
    position:fixed;inset:0;background:rgba(5,3,1,.94);
    display:none;align-items:center;justify-content:center;z-index:70;
  }
  #dungeonOverlay.show{display:flex;}
  #dungeonBox{
    background:linear-gradient(160deg,#3a2a4a,#241535 55%,#150c20);
    border:3px solid rgba(216,169,255,.4);border-radius:22px;
    padding:22px 28px;max-width:480px;width:92%;text-align:center;color:#e8dcc0;
    box-shadow:0 16px 50px rgba(0,0,0,.7), 0 0 30px rgba(138,43,226,.35), inset 0 2px 0 rgba(255,255,255,.15);
    position:relative;overflow:hidden;
  }
  #dungeonBox::before{content:"";position:absolute;top:0;left:0;right:0;height:32%;
    background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));pointer-events:none;}
  #dungeonBox h3{margin:0 0 10px;color:#c9a13a;letter-spacing:2px;text-transform:uppercase;}
  #dungeonStats{display:flex;justify-content:space-around;font-size:.82em;
    margin-bottom:12px;color:#d8c9a0;}
  #dungeonStats b{color:#e8d9b0;}
  #dungeonGrid{display:grid;grid-template-columns:repeat(15,1fr);gap:0;
    max-width:345px;margin:0 auto 14px;background:#050302;border:2px solid #3a2a10;border-radius:4px;}
  .dgCell{aspect-ratio:1;background:#050302;border:0.5px solid transparent;
    display:flex;align-items:center;justify-content:center;font-size:.85em;
    color:#8a7a5a;}
  .dgCell.dgWall{background:linear-gradient(160deg,#3a3226,#221c14);
    border-color:rgba(0,0,0,.4);}
  .dgCell.dgFloor{background:radial-gradient(circle at 35% 28%, #6a5a3e, #3e3420 70%, #2a2314);
    border-color:rgba(0,0,0,.3);}
  .dgCell.revealed{background:radial-gradient(circle at 35% 28%, #7a5f42, #4a3a24 65%, #34281a);color:#f2e6c4;
    text-shadow:0 1px 2px rgba(0,0,0,.6);font-size:1.05em;}
  .dgCell.resolved{background:radial-gradient(circle at 35% 28%, #4e4130, #3a2e1e 65%, #241c12);color:#9a8a6a;
    font-size:1.05em;}
  .dgCell.current{background:radial-gradient(circle at 35% 28%, #ff6b6b, #c62828 60%, #6b0f14);color:#fff;
    box-shadow:0 0 8px #ffb84d, inset 0 1px 2px rgba(255,255,255,.4);text-shadow:0 1px 2px rgba(0,0,0,.6);
    font-size:1.05em;z-index:2;position:relative;}
  #dungeonText{font-size:.92em;line-height:1.4em;min-height:3.4em;
    background:#1a1408;border:1px solid #4a3a24;border-radius:4px;padding:10px;margin-bottom:14px;}
  #dungeonDirGrid{display:grid;grid-template-columns:repeat(3,42px);
    grid-template-rows:repeat(3,38px);gap:4px;justify-content:center;margin-bottom:12px;}
  #dungeonDirGrid button{padding:0;}
  #dgHere{display:flex;align-items:center;justify-content:center;font-size:1.2em;color:#c9a13a;}

  #townOverlay{
    position:fixed;inset:0;background:rgba(10,6,2,.9);
    display:none;align-items:center;justify-content:center;z-index:70;
  }
  #townOverlay.show{display:flex;}
  #townBox{
    background:linear-gradient(160deg,#f7ecc8,#e2cd94 55%,#c9ac78);
    border:3px solid rgba(255,255,255,.5);border-radius:22px;
    padding:22px 28px;max-width:420px;width:92%;text-align:center;
    box-shadow:0 16px 50px rgba(0,0,0,.6), 0 0 26px rgba(14,158,99,.3), inset 0 2px 0 rgba(255,255,255,.6);
    position:relative;overflow:hidden;
  }
  #townBox::before{content:"";position:absolute;top:0;left:0;right:0;height:32%;
    background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));pointer-events:none;}
  #townBox h3{margin:0 0 10px;color:var(--crimson);letter-spacing:2px;text-transform:uppercase;}
  #townMapSvg{width:100%;height:auto;background:linear-gradient(160deg,#dccfa0,#cdbd8e);
    border:2px solid var(--brass);border-radius:14px;margin-bottom:12px;
    box-shadow:inset 0 2px 8px rgba(0,0,0,.25);}
  .townBldg{cursor:pointer;}
  .townBldg .townBldgShape{filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}
  .townBldg:hover .townBldgShape{filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)) brightness(1.2);}
  .townBldgLabel{font-size:9px;fill:#2b1d10;text-anchor:middle;font-family:Georgia,serif;font-weight:bold;}
  #townServicePanel{display:none;text-align:left;}
  #townServicePanel.show{display:block;}
  #townServiceTitle{margin:0 0 4px;color:var(--crimson);text-transform:uppercase;
    letter-spacing:1px;font-size:1em;}
  #townServiceDesc{font-size:.85em;font-style:italic;margin:0 0 10px;color:#4a3a20;}
  .townOption{display:flex;justify-content:space-between;align-items:center;
    background:var(--parchment-dark);border:1px solid var(--brass);border-radius:4px;
    padding:8px 10px;margin-bottom:6px;font-size:.86em;}
  .townOption button{padding:5px 12px;min-width:70px;}
  #townServiceBack{margin-top:4px;width:100%;}
  #townFooter{display:flex;align-items:center;justify-content:space-between;
    margin-top:14px;padding-top:10px;border-top:1px solid var(--brass);font-size:.9em;}
  #townFooter b{color:var(--forest);}

  #bookOverlay{
    position:fixed;inset:0;background:rgba(10,6,2,.92);
    display:none;align-items:center;justify-content:center;z-index:80;
  }
  #bookOverlay.show{display:flex;}
  #bookBox{
    background:linear-gradient(160deg,#f7ecc8,#e2cd94 55%,#c9ac78);
    border:3px solid rgba(255,255,255,.5);border-radius:22px;
    padding:20px 26px;max-width:640px;width:92%;max-height:82vh;
    display:flex;flex-direction:column;position:relative;overflow:hidden;
    box-shadow:0 16px 50px rgba(0,0,0,.6), 0 0 26px rgba(122,31,31,.25), inset 0 2px 0 rgba(255,255,255,.6);
  }
  #bookBox::before{content:"";position:absolute;top:0;left:0;right:0;height:22%;
    background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));pointer-events:none;z-index:0;}
  #bookBox > *{position:relative;z-index:1;}
  #bookTabs{display:flex;gap:6px;margin-bottom:12px;border-bottom:2px solid var(--brass);}
  .bookTab{background:none;border:none;color:#5c451c;padding:8px 14px;
    font-family:Georgia,serif;font-size:.9em;cursor:pointer;border-radius:4px 4px 0 0;
    box-shadow:none;}
  .bookTab::before{display:none;}
  .bookTab.active{background:var(--parchment-dark);color:var(--crimson);font-weight:bold;}
  #bookContent{overflow-y:auto;flex:1;padding-right:6px;font-size:.9em;line-height:1.5em;}
  #bookContent h4{color:var(--crimson);text-transform:uppercase;letter-spacing:1px;
    margin:16px 0 4px;border-bottom:1px solid var(--brass);padding-bottom:3px;}
  #bookContent h4:first-child{margin-top:0;}
  #bookContent p{margin:0 0 8px;}
  #bookContent .paraNum{margin-right:6px;}
  #bookClose{margin-top:14px;align-self:flex-end;padding:8px 22px;}

  #dbOverlay{
    position:fixed;inset:0;background:rgba(10,6,2,.92);
    display:none;align-items:center;justify-content:center;z-index:80;
  }
  #dbOverlay.show{display:flex;}
  #dbBox{
    background:linear-gradient(160deg,#f7ecc8,#e2cd94 55%,#c9ac78);
    border:3px solid rgba(255,255,255,.5);border-radius:22px;
    padding:20px 26px;max-width:680px;width:94%;max-height:82vh;
    display:flex;flex-direction:column;position:relative;overflow:hidden;
    box-shadow:0 16px 50px rgba(0,0,0,.6), 0 0 26px rgba(46,92,74,.3), inset 0 2px 0 rgba(255,255,255,.6);
  }
  #dbBox::before{content:"";position:absolute;top:0;left:0;right:0;height:18%;
    background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));pointer-events:none;z-index:0;}
  #dbBox > *{position:relative;z-index:1;}
  #dbTabs{display:flex;gap:6px;margin-bottom:12px;border-bottom:2px solid var(--brass);}
  #dbContent{overflow-y:auto;flex:1;padding-right:6px;font-size:.85em;}
  .dbTable{width:100%;border-collapse:collapse;margin-bottom:10px;}
  .dbTable th{text-align:left;font-size:.78em;text-transform:uppercase;letter-spacing:.5px;
    color:var(--crimson);border-bottom:2px solid var(--brass);padding:4px 6px;}
  .dbTable td{padding:4px 6px;border-bottom:1px solid rgba(0,0,0,.1);}
  .dbTable input[type="text"],.dbTable input[type="number"]{
    width:100%;box-sizing:border-box;font-family:Georgia,serif;font-size:.95em;
    padding:4px 6px;border:1px solid var(--brass);border-radius:4px;background:#fffdf5;}
  .dbTable input[type="number"]{width:64px;}
  .dbRowDelete{background:linear-gradient(180deg,#ff6b6b,#e63946 55%,#8a1520);
    padding:4px 10px;font-size:.8em;}
  .dbAddRow{margin:6px 0 16px;padding:6px 16px;}
  .dbSectionTitle{color:var(--crimson);text-transform:uppercase;letter-spacing:1px;
    font-size:.9em;margin:14px 0 4px;border-bottom:1px solid var(--brass);padding-bottom:3px;}
  .dbSectionTitle:first-child{margin-top:0;}
  .dbReadonlyNote{font-size:.78em;font-style:italic;opacity:.7;margin:2px 0 8px;}
  #dbFooter{display:flex;align-items:center;justify-content:space-between;
    margin-top:14px;padding-top:10px;border-top:1px solid var(--brass);}
  #dbFooter button{padding:8px 16px;margin-left:6px;}
  #dbStatus{font-size:.8em;font-style:italic;color:var(--forest);min-height:1.2em;}

  #fastTravelOverlay{
    position:fixed;inset:0;background:rgba(10,6,2,.9);
    display:none;align-items:center;justify-content:center;z-index:75;
  }
  #fastTravelOverlay.show{display:flex;}
  #fastTravelBox{
    background:linear-gradient(160deg,#f7ecc8,#e2cd94 55%,#c9ac78);
    border:3px solid rgba(255,255,255,.5);border-radius:22px;
    padding:20px 26px;max-width:380px;width:92%;position:relative;overflow:hidden;
    box-shadow:0 16px 50px rgba(0,0,0,.6), 0 0 26px rgba(245,146,10,.3), inset 0 2px 0 rgba(255,255,255,.6);
  }
  #fastTravelBox::before{content:"";position:absolute;top:0;left:0;right:0;height:30%;
    background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));pointer-events:none;z-index:0;}
  #fastTravelBox > *{position:relative;z-index:1;}
  #fastTravelBox h3{margin:0 0 4px;color:var(--crimson);letter-spacing:2px;text-transform:uppercase;}
  #fastTravelList{max-height:320px;overflow-y:auto;margin:10px 0;}
  .ftOption{display:flex;justify-content:space-between;align-items:center;
    background:var(--parchment-dark);border:1px solid var(--brass);border-radius:8px;
    padding:8px 10px;margin-bottom:6px;font-size:.86em;box-shadow:0 2px 4px rgba(0,0,0,.15);}
  .ftOption button{padding:5px 12px;min-width:80px;}
  #fastTravelClose{width:100%;}
  .legend{display:flex;flex-wrap:wrap;gap:8px;padding:8px 16px;font-size:.72em;
    background:var(--parchment-dark);border-top:1px solid var(--brass);}
  .legend span{display:flex;align-items:center;gap:4px;}
  .swatch{width:12px;height:12px;display:inline-block;border:1px solid #1a120a;}
  ::-webkit-scrollbar{width:10px;}
  ::-webkit-scrollbar-thumb{background:#5c451c;border-radius:5px;}
  ::-webkit-scrollbar-track{background:#241608;}