:root { --bg-color: moccasin; --lighter-bg: hsl(42, 80%, 91%); --accent-color: hsl(225, 67%, 19%); }
    body {
      display: flex; flex-direction: column; align-items: center; font-family: "Cardo", serif;
      min-height: 100vh; margin: 0; padding: 1rem;
      background-color: darkred;
      background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 100%), url('rv-background.png');
      background-size: cover;
    }
    .node.skeleton { fill: lightgray; stroke: none; visibility: hidden; }
    .edge.skeleton { stroke: lightgray; stroke-width: 2; visibility: hidden; }
    .node.generated { fill: lightgreen; stroke: darkgreen; stroke-width: 1.5; }
    .edge.generated { stroke: var(--accent-color); stroke-width: 2.5; }
    .node.core { fill: gold; stroke: darkorange; stroke-width: 1.5; }
    .node.selected { filter: url(#glow-gap); }
    .node.boss { fill: violet; stroke: purple }
    .row { display: flex; flex-direction: row; align-items: center; }
    #main { margin-top: 5%; }
    #camp, #destination {
      width: 275px; height: 480px; background-color: var(--bg-color); color: var(--accent-color);
      font-size: 1.1rem; text-align: center; padding: 15px 5px;
    }
    .brass-border {
      border: 0; border-radius: 8px; overflow: hidden; position: relative;
      box-shadow: inset 0 0 40px 6px rgba(139,107,33,0.3);
    }
    .brass-border::after {
      content: ""; position: absolute; top:0; bottom:0; left:0; right:0; pointer-events: none;
      border: 30px solid transparent; border-image: url('brass-border-9slice.png') 30 repeat;
    }
    #central { position: relative; }
    #map { border: 1px solid #ccc; margin: 0 35px; background-color: var(--bg-color); 
           width: 50vw; max-width: 900px; height: 500px }
    #dark-overlay {
      position: fixed; inset: 0; z-index:100; background: rgba(0,0,0,0.4);
      display: none; pointer-events: none;
    }
    #attack-info {
      position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);
      z-index:101; width:max-content; padding:20px; display:none;
      background: var(--bg-color); color: var(--accent-color); text-align:center;
    }
    #dark-overlay.visible, #attack-info.visible { display: flex; flex-direction: column; }
    .combatant { width:42%; margin:0 25px; }
    #mobdmg, #herdmg { color: #660000; }
    .hero-card, .mob-card {
      display:flex; align-items:flex-start; padding:0.75rem; margin:0.75rem 0.5rem; position: relative;
      background: var(--lighter-bg); border:1px solid #660000; border-radius:8px;
      box-shadow:0 2px 4px rgba(0,0,0,0.2), inset 0 0 15px 2px hsla(190, 18%, 32%, 0.25);
    }
    .guard-overlay { display: none; background: rgba(0,0,0,0.4); font-weight: bold; color: hsl(15, 15%, 95%); text-shadow: 1px 1px hsl(43, 89%, 19%); font-size: 1.2rem;}
    .guard-overlay.visible { display: block; position: absolute; right: 0; left: 0; top: 0; bottom: 0; padding-top: 18px;}
    .hero-card.selected, .mob-card.selected {
      border:1px solid #830000;
      box-shadow:1px 2px 5px rgba(0,0,0,0.2), inset 0 0 25px 4px rgba(255,215,107,0.35);
    }
    .hero-icon, .mob-icon { width:32px; height:32px; margin-right:0.7rem; flex-shrink:0; }
    .hero-info, .mob-info { display:flex; flex-direction:column; text-align:left; }
    .hero-name, .mob-name { font-weight:bold; font-size: 1rem; margin-bottom:0.25rem; }
    .hero-stats, .mob-stats { font-family: 'Inter'; font-size:0.7rem; color: var(--accent-color); }
    button { margin:1rem 0.5rem; padding:0.5rem 1rem; }
    h2 { font-size:1.4rem; font-weight:bold; margin:0.5rem; letter-spacing:0.5px; }