/* No third-party font request: self-contained browser game. */

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: #0a0a0f;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: Georgia, 'Times New Roman', serif;
    color: #d4c9a8;
    user-select: none;
  }

  #gameCanvas {
    display:block; width:100vw; height:100vh;
    border: 2px solid #2a2a3a;
    cursor: crosshair;
    image-rendering: pixelated;
  }

  #ui-overlay {
    position: fixed;
    top: 0; left: 0; right: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 24px;
    pointer-events: none;
    z-index: 10;
  }

  .ui-panel {
    background: rgba(10, 10, 20, 0.85);
    border: 1px solid #3a3a4a;
    border-radius: 8px;
    padding: 12px 18px;
    pointer-events: all;
  }

  #title-area h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 22px;
    color: #e8d9a0;
    text-shadow: 0 0 20px rgba(232, 217, 160, 0.3);
    letter-spacing: 4px;
  }

  #title-area p {
    font-size: 11px;
    color: #777;
    margin-top: 2px;
  }

  .health-bar-bg {
    width: 180px; height: 14px;
    background: #1a1a2a;
    border-radius: 7px;
    border: 1px solid #3a3a4a;
    overflow: hidden;
    margin-top: 6px;
  }

  .health-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b0000, #cc2200);
    border-radius: 7px;
    transition: width 0.3s;
  }

  .xp-bar-bg {
    width: 180px; height: 8px;
    background: #1a1a2a;
    border-radius: 4px;
    border: 1px solid #3a3a4a;
    overflow: hidden;
    margin-top: 4px;
  }

  .xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #2a6a2a, #44cc44);
    border-radius: 4px;
    transition: width 0.3s;
  }

  #stats-area {
    text-align: right;
  }

  #stats-area .stat-line {
    font-size: 13px;
    margin: 2px 0;
    color: #aaa;
  }

  #controls-hint {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 20, 0.85);
    border: 1px solid #3a3a4a;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 12px;
    color: #888;
    z-index: 10;
    text-align: center;
  }

  #controls-hint kbd {
    background: #2a2a3a;
    border: 1px solid #4a4a5a;
    border-radius: 3px;
    padding: 1px 6px;
    color: #ccc;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12px;
  }

  #weapon-selector {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
  }

  .weapon-slot {
    width: 48px; height: 48px;
    background: rgba(10, 10, 20, 0.85);
    border: 2px solid #3a3a4a;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
  }

  .weapon-slot.active {
    border-color: #e8d9a0;
    box-shadow: 0 0 12px rgba(232, 217, 160, 0.3);
    background: rgba(30, 30, 50, 0.9);
  }

  .weapon-slot .key-hint {
    position: absolute;
    top: -8px; right: -6px;
    background: #2a2a3a;
    border: 1px solid #4a4a5a;
    border-radius: 3px;
    font-size: 9px;
    padding: 0 4px;
    color: #999;
  }

  #skin-selector {
    position: fixed;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 10;
  }

  .skin-dot {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 2px solid #3a3a4a;
    cursor: pointer;
    transition: all 0.2s;
  }

  .skin-dot.active {
    border-color: #e8d9a0;
    box-shadow: 0 0 8px rgba(232, 217, 160, 0.4);
    transform: scale(1.2);
  }

  #start-screen {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, #12121f 0%, #0a0a0f 70%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: opacity 0.8s;
  }

  #start-screen h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 52px;
    color: #e8d9a0;
    text-shadow: 0 0 40px rgba(232, 217, 160, 0.4), 0 4px 20px rgba(0,0,0,0.8);
    letter-spacing: 8px;
    margin-bottom: 8px;
  }

  #start-screen .subtitle {
    font-size: 16px;
    color: #666;
    font-style: italic;
    margin-bottom: 40px;
  }

  #start-screen .start-btn {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 20px;
    color: #e8d9a0;
    background: none;
    border: 2px solid #e8d9a0;
    padding: 12px 40px;
    cursor: pointer;
    letter-spacing: 4px;
    transition: all 0.3s;
    border-radius: 4px;
  }

  #start-screen .start-btn:hover {
    background: rgba(232, 217, 160, 0.1);
    box-shadow: 0 0 30px rgba(232, 217, 160, 0.2);
  }

  .skull-art {
    font-size: 80px;
    margin-bottom: 20px;
    filter: grayscale(0.3);
  }

  #death-screen {
    position: fixed;
    inset: 0;
    background: rgba(10, 0, 0, 0.92);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
  }

  #death-screen h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 42px;
    color: #cc2200;
    text-shadow: 0 0 40px rgba(200, 0, 0, 0.5);
    letter-spacing: 6px;
    margin-bottom: 12px;
  }

  #death-screen .death-stats {
    font-size: 16px;
    color: #888;
    margin-bottom: 30px;
  }

  #death-screen .start-btn {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px;
    color: #e8d9a0;
    background: none;
    border: 2px solid #e8d9a0;
    padding: 10px 32px;
    cursor: pointer;
    letter-spacing: 3px;
    transition: all 0.3s;
    border-radius: 4px;
  }

  #death-screen .start-btn:hover {
    background: rgba(232, 217, 160, 0.1);
  }

  #minimap {
    position: fixed;
    bottom: 90px;
    right: 16px;
    z-index: 10;
  }
  #music-toggle {
    position: fixed;
    bottom: 90px;
    left: 16px;
    z-index: 10;
    background: rgba(10, 10, 20, 0.85);
    border: 1px solid #3a3a4a;
    border-radius: 8px;
    padding: 8px 12px;
    color: #888;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  #music-toggle:hover {
    border-color: #e8d9a0;
    color: #ccc;
  }
  #music-toggle .vol-icon {
    font-size: 16px;
  }
/* First-party 0DMG wayfinding and small Chromebook/phone fit. */
.game-site-nav { position:fixed; top:10px; right:12px; z-index:210; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.game-site-nav a { background:#101622; color:#e8d9a0; text-decoration:none; font:bold 12px system-ui,sans-serif; border:1px solid #8a7955; border-radius:6px; padding:8px 10px; }
.game-site-nav a:hover,.game-site-nav a:focus-visible { background:#263247; outline:2px solid #e8d9a0; outline-offset:2px; }
/* Keep the whole in-game HUD below the fixed 0DMG game navigation bar (62px; 54px on phones). */
#ui-overlay { top:62px; }
@media(max-width:570px){ #ui-overlay{ top:54px; } }
.start-btn:focus-visible,.weapon-slot:focus-visible,.skin-dot:focus-visible,#music-toggle:focus-visible{
 outline:2px solid #e8d9a0;outline-offset:3px;}
.weapon-slot{color:#d4c9a8;font-family:inherit}
.skin-dot{padding:0}
@media(max-width:700px){
  #start-screen h1{font-size:clamp(23px,7.1vw,46px);letter-spacing:clamp(1px,1.1vw,5px);text-align:center}
  #start-screen .subtitle{font-size:clamp(11px,3vw,14px);text-align:center;margin-bottom:25px;padding:0 12px}
  #ui-overlay{padding:12px 10px;gap:5px}
  #title-area h1{font-size:15px;letter-spacing:1px}
  .ui-panel{padding:7px 8px}
  .health-bar-bg,.xp-bar-bg{width:min(26vw,125px)}
  #stats-area .stat-line{font-size:11px}
  #skin-selector{right:6px;gap:5px}
  .skin-dot{width:22px;height:22px}
  #controls-hint{bottom:6px;width:calc(100% - 12px);padding:4px 8px;font-size:10px;line-height:1.6}
  #controls-hint kbd{font-size:10px;padding:1px 3px}
  #weapon-selector{bottom:63px;gap:5px}
  .weapon-slot{width:39px;height:39px;font-size:17px}
  #minimap{bottom:127px;right:8px;opacity:.76}
  #music-toggle{bottom:126px;left:8px;font-size:11px;padding:5px 7px}
}
@media(max-height:630px){
  #start-screen .skull-art{font-size:54px;margin-bottom:8px}
  #start-screen h1{font-size:clamp(24px,5vw,38px);margin-bottom:4px}
  #start-screen .subtitle{margin-bottom:14px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}


#pause-screen[hidden]{display:none}
#pause-screen{position:fixed;inset:0;z-index:120;background:rgba(10,10,18,.95);
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;color:#e8d9a0}
#pause-screen h2{font:bold clamp(27px,7vw,44px) Georgia,serif;letter-spacing:.08em}
#pause-screen p{color:#c7bea4;font-size:15px}
#pause-screen .start-btn{font:bold 18px Georgia,serif;color:#e8d9a0;background:transparent;border:2px solid #e8d9a0;
 border-radius:5px;padding:12px 28px;cursor:pointer}
#pause-screen .start-btn:focus-visible{outline:3px solid #e8d9a0;outline-offset:4px}

/* Entry stays reachable on short Chromebook and phone landscape viewports. */
.game-version{font-size:11px;color:#777;margin-bottom:18px}
#start-screen{padding:70px 12px 16px;overflow-y:auto}
#start-screen .start-btn.game-entry-launch{font-size:17px;letter-spacing:.11em;min-height:49px}
@media(max-height:500px){
  #start-screen{padding-top:63px;padding-bottom:8px}
  #start-screen .skull-art{display:none}
  #start-screen h1{margin:0 0 7px}
  #start-screen .subtitle{margin:0 0 12px}
  .game-version{margin-bottom:12px}
}