@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    background:#07080d; display:flex; flex-direction:column;
    align-items:center; justify-content:center; min-height:100vh;
    font-family:'Orbitron',sans-serif; color:#fff; overflow:hidden;
  }
  #game-wrapper {
    position:relative; width:800px; height:500px;
    border:1px solid #1a1a2e;
    box-shadow:0 0 60px rgba(0,100,255,0.12), 0 0 120px rgba(0,0,0,0.9);
    overflow:hidden;
  }
  canvas { display:block; width:100%; height:100%; }

  /* SCREENS */
  .screen {
    position:absolute; inset:0; display:none; flex-direction:column;
    align-items:center; justify-content:center; z-index:10;
    background:rgba(4,5,14,0.95);
  }
  .screen.active { display:flex; }

  /* TITLE */
  .title-logo {
    font-size:58px; font-weight:900; letter-spacing:8px; color:#ffe81f;
    animation:logopulse 3s ease-in-out infinite alternate; margin-bottom:4px;
  }
  @keyframes logopulse {
    from { text-shadow:0 0 20px #ffe81f44; }
    to   { text-shadow:0 0 50px #ffe81faa, 0 0 100px #ffe81f33; }
  }
  .title-sub   { font-size:9px; color:#223; letter-spacing:8px; margin-bottom:52px; }
  .title-btn   {
    background:transparent; border:1px solid #ffe81f88; color:#ffe81f;
    padding:12px 44px; font-size:11px; font-family:inherit; font-weight:700;
    letter-spacing:4px; cursor:pointer; transition:.2s; text-transform:uppercase;
  }
  .title-btn:hover { background:#ffe81f18; border-color:#ffe81f; box-shadow:0 0 20px #ffe81f33; }

  /* SCREEN LABEL */
  .screen-lbl { font-size:9px; color:#334; letter-spacing:6px; margin-bottom:16px; }

  /* CHAR GRID — 4 columns */
  .char-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:784px; margin-bottom:16px;
  }
  .char-card {
    background:#0b0c18; border:1px solid #181a28; padding:10px 8px 8px;
    cursor:pointer; text-align:center; transition:.15s;
  }
  .char-card:hover { border-color:#33364a; background:#0f1020; transform:translateY(-2px); }
  .char-card.sel   { border-color:#ffe81f; background:#100f00; box-shadow:0 0 16px #ffe81f22; }

  /* Mini pixel figure in card */
  .card-fig {
    width:40px; height:50px; margin:0 auto 6px; position:relative;
  }
  .fig-head { position:absolute; left:10px; top:0; width:20px; height:14px; border-radius:2px; }
  .fig-body { position:absolute; left:6px; top:14px; width:28px; height:20px; border-radius:2px; }
  .fig-lleg { position:absolute; left:8px; top:34px; width:8px; height:14px; border-radius:1px; }
  .fig-rleg { position:absolute; left:24px; top:34px; width:8px; height:14px; border-radius:1px; }
  .fig-larm { position:absolute; left:1px; top:14px; width:6px; height:14px; border-radius:1px; }
  .fig-rarm { position:absolute; left:33px; top:14px; width:6px; height:14px; border-radius:1px; }
  .fig-saber {
    position:absolute; right:-6px; top:-10px; width:3px; height:28px;
    border-radius:2px; transform:rotate(15deg);
    box-shadow:0 0 6px currentColor, 0 0 12px currentColor;
  }
  .fig-gun {
    position:absolute; right:-10px; top:18px; width:14px; height:4px;
    border-radius:1px; background:#555;
  }

  .card-name  { font-size:8px; font-weight:700; letter-spacing:1.5px; margin-bottom:2px; }
  .card-role  { font-size:6px; color:#334; letter-spacing:1.5px; margin-bottom:7px; }
  .card-bars  { display:flex; flex-direction:column; gap:3px; }
  .cbar-row   { display:flex; align-items:center; gap:4px; }
  .cbar-lbl   { width:22px; font-size:6px; color:#334; letter-spacing:.5px; text-align:left; }
  .cbar-bg    { flex:1; height:2px; background:#161620; }
  .cbar-fill  { height:100%; border-radius:1px; }

  /* LEVEL SELECT */
  .level-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:640px; margin-bottom:16px; }
  .level-card {
    background:#0b0c18; border:1px solid #181a28; padding:16px 12px;
    cursor:pointer; text-align:center; transition:.15s;
  }
  .level-card:hover { border-color:#33364a; background:#0f1020; }
  .level-card.sel   { border-color:#ffe81f; background:#100f00; box-shadow:0 0 16px #ffe81f22; }
  .level-name { font-size:9px; color:#ffe81f; letter-spacing:2px; margin-bottom:6px; }
  .level-info { font-size:7px; color:#334; letter-spacing:1px; line-height:1.8; }

  /* BUTTONS */
  .btn-row { display:flex; gap:10px; }
  .btn {
    background:transparent; border:1px solid #ffe81f55; color:#ffe81f99;
    padding:9px 28px; font-size:9px; font-family:inherit; font-weight:700;
    letter-spacing:3px; cursor:pointer; transition:.15s; text-transform:uppercase;
  }
  .btn:hover { border-color:#ffe81f; color:#ffe81f; background:#ffe81f0d; }
  .btn.ghost { border-color:#1e2030; color:#334; }
  .btn.ghost:hover { border-color:#2a2d40; color:#445; background:transparent; }

  /* HUD */
  #hud {
    position:absolute; bottom:0; left:0; right:0;
    background:rgba(0,0,0,0.75); border-top:1px solid #111;
    padding:5px 14px; display:none; align-items:center; gap:14px; z-index:5;
  }
  .hud-name  { font-size:7px; letter-spacing:2px; color:#ffe81f; min-width:70px; }
  .hud-bars  { display:flex; flex-direction:column; gap:3px; flex:1; }
  .hud-row   { display:flex; align-items:center; gap:6px; }
  .hud-lbl   { font-size:6px; color:#334; width:12px; }
  .hud-bg    { flex:1; height:5px; background:#0d0d0d; border:1px solid #1a1a1a; }
  .hud-fill  { height:100%; transition:width .1s; }
  #fill-hp   { background:#c33; }
  #fill-fp   { background:#28f; }
  .hud-combo { font-size:20px; color:#ffe81f; min-width:44px; text-align:center; font-weight:700; opacity:0; transition:opacity .2s; }
  .hud-keys  { font-size:6px; color:#1e2030; letter-spacing:.5px; text-align:right; line-height:2; }

  /* GAMEOVER / WIN */
  .end-title { font-size:48px; font-weight:900; letter-spacing:4px; margin-bottom:6px; }
  .end-sub   { font-size:9px; color:#334; letter-spacing:4px; margin-bottom:28px; }