/* 404.html — page-specific styles (extracted from inline) */

body{overflow:hidden;}

    .error-page {
      min-height:100vh;display:flex;flex-direction:column;
      align-items:center;justify-content:center;
      position:relative;overflow:hidden;
      background:var(--bg);padding:2rem;
      gap:0;
    }
    .error-page .blob--1{width:600px;height:600px;top:-150px;left:-100px;opacity:.35;}
    .error-page .blob--2{width:500px;height:500px;bottom:-100px;right:-100px;opacity:.25;}

    /* Glitching 404 */
    .error-404 {
      font-family:var(--font-display);
      font-size:clamp(6rem,18vw,16rem);
      line-height:1;letter-spacing:.04em;
      color:var(--orange);
      position:relative;z-index:2;
      animation:glitch404 4s ease-in-out infinite;
      text-shadow:0 0 60px rgba(249,130,25,.4);
      margin-bottom:-.5rem;
    }
    @keyframes glitch404 {
      0%,88%,100%{text-shadow:0 0 60px rgba(249,130,25,.4);}
      89%{text-shadow:-4px 0 var(--purple),4px 0 var(--orange),0 0 60px rgba(249,130,25,.4);transform:translate(-2px,0);}
      91%{text-shadow:4px 0 var(--purple),-4px 0 var(--orange),0 0 60px rgba(249,130,25,.4);transform:translate(2px,0);}
      93%{text-shadow:0 0 60px rgba(249,130,25,.4);transform:translate(0);}
    }

    .error-label {
      font-family:var(--font-mono);font-size:.8rem;letter-spacing:.2em;
      color:var(--text-muted);margin-bottom:1rem;position:relative;z-index:2;
    }

    .game-wrap {
      position:relative;z-index:2;
      display:flex;flex-direction:column;align-items:center;gap:.8rem;
    }

    .game-meta {
      display:flex;align-items:center;justify-content:space-between;
      width:100%;max-width:360px;
    }
    .game-score {
      font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted);letter-spacing:.08em;
    }
    .game-score span{color:var(--orange);}
    .game-hint {
      font-family:var(--font-mono);font-size:.65rem;color:var(--text-muted);letter-spacing:.08em;
      opacity:.6;
    }

    #gameCanvas {
      border:1px solid var(--border);border-radius:var(--radius-md);
      background:var(--code-bg);
      box-shadow:0 0 40px rgba(108,78,243,.15),inset 0 0 30px rgba(0,0,0,.4);
      max-width:100%;
    }

    .game-overlay {
      position:absolute;inset:0;border-radius:var(--radius-md);
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:1rem;background:rgba(8,8,16,.85);backdrop-filter:blur(4px);
      transition:opacity .3s;
    }
    .game-overlay.hidden{opacity:0;pointer-events:none;}
    .overlay-title{
      font-family:var(--font-display);font-size:2.4rem;color:var(--text);
      letter-spacing:.08em;line-height:1;
    }
    .overlay-score{
      font-family:var(--font-mono);font-size:.8rem;color:var(--text-muted);
      letter-spacing:.1em;
    }
    .overlay-cta{
      font-family:var(--font-mono);font-size:.75rem;
      padding:.5rem 1.4rem;border-radius:var(--radius-pill);
      background:linear-gradient(135deg,var(--orange),#e06c00);
      color:#fff;letter-spacing:.08em;cursor:pointer;
      border:none;transition:transform .2s;box-shadow:0 0 20px rgba(249,130,25,.4);
    }
    .overlay-cta:hover{transform:scale(1.05);}
    .overlay-sub{
      font-family:var(--font-mono);font-size:.62rem;color:var(--text-muted);
      letter-spacing:.08em;opacity:.6;
    }

    /* Mobile controls */
    .touch-controls {
      display:none;
      grid-template-columns:repeat(3,52px);
      grid-template-rows:repeat(2,52px);
      gap:6px;margin-top:.5rem;
    }
    @media(max-width:640px){.touch-controls{display:grid;}}
    .touch-btn {
      background:var(--surface);border:1px solid var(--border);
      border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
      font-size:1.2rem;cursor:pointer;transition:all .15s;
      -webkit-tap-highlight-color:transparent;
      user-select:none;
    }
    .touch-btn:active{background:rgba(249,130,25,.15);border-color:rgba(249,130,25,.3);transform:scale(.92);}
    .touch-btn[data-dir="up"]{grid-column:2;grid-row:1;}
    .touch-btn[data-dir="left"]{grid-column:1;grid-row:2;}
    .touch-btn[data-dir="down"]{grid-column:2;grid-row:2;}
    .touch-btn[data-dir="right"]{grid-column:3;grid-row:2;}

    .error-links {
      display:flex;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:center;
      position:relative;z-index:2;margin-top:.8rem;
    }
    .error-link {
      font-family:var(--font-mono);font-size:.68rem;color:var(--text-muted);
      background:var(--surface);border:1px solid var(--border);
      padding:.45rem 1rem;border-radius:var(--radius-pill);
      transition:all .2s;letter-spacing:.05em;
    }
    .error-link:hover{color:var(--text);border-color:var(--border-strong);}