html, body {
    margin: 0;
    padding: 0;
    background: #181818;
    color: white;
    font-family: monospace;
    height: 100%;
    overflow: hidden;
    user-select: none;
  }

  #sidebar {
    position: fixed;
    top: 8px;
    left: 8px;
    width: 240px;
    max-width: 40vw;
    bottom: 8px;
    overflow-y: auto;
    background: rgba(0,0,0,0.65);
    padding: 10px;
    border: 1px solid #444;
    font-size: 14px;
    box-sizing: border-box;
  }

  .panel { margin-bottom: 12px; padding: 8px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.03); }
  .panel-title { font-weight: bold; margin-bottom: 6px }

  #ui .row { margin-bottom: 4px }
  #ui .small { font-size: 12px; opacity: 0.9 }

  #game-wrap { display:flex; justify-content:center}

  canvas {
    display: block;
    margin: auto;
    image-rendering: pixelated;
    background: #000;
    cursor: default;
    width: 800px;
    height: 600px;
    flex-shrink: 0;
    object-fit: contain;
    flex-grow: 0;
  }

  #game-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin-left: 264px;
    flex-shrink: 0;
  }

  #game-wrap {
    background: #181818;
    padding: 18px;
  }


  @media (max-width: 400px) {
    #sidebar {
      position: fixed;
      left: 8px;
      right: 8px;
      top: 8px;
      width: auto;
      max-height: 40vh;
      overflow-y: auto;
      display: block;
    }
    #game-wrap { margin-left: 0; padding-top: 120px }
    canvas {
      width: 800px;
      height: 600px;
    }
  }

  #panel-status .row.small { color: #9ea3a8 }

  #hud { position: fixed; right: 8px; top: 8px; color: #ddd; font-family: monospace }

  .particle { position: absolute; pointer-events: none }

  .skill-tree { 
    margin-top: 8px;
  }
  .skill-node {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.04);
    margin-bottom: 6px;
  }
  .skill-node .meta { font-size: 12px; color: #aaa }
  .skill-button {
    background: #2b7;
    border: none;
    color: #012;
    padding: 6px 8px;
    cursor: pointer;
  }
  .skill-button[disabled] { background: #444; color: #888; cursor: not-allowed }