:root{
      --bg:#0f1624; --panel:#0b1220; --accent:#ffb84d; --muted:#9aa7bf;
      --shadow-color: rgba(0,0,0,0.85);
      --ui-radius:12px;
      --glow: 0 0 15px rgba(255, 184, 77, 0.3);
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,system-ui,Arial;color:#e6eef8;background:linear-gradient(180deg,#071025 0%, #081827 60%);}
    .wrap{max-width:980px;margin:36px auto;padding:20px}

    header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
    h1{font-size:20px;margin:0;font-weight:700;letter-spacing:0.5px;}
    .controls{display:flex;gap:8px;align-items:center}
    select,.btn{background:var(--panel);border:1px solid rgba(255,255,255,0.04);padding:8px 12px;border-radius:10px;color:var(--muted);}
    .btn{cursor:pointer;transition:all 0.2s ease;position:relative;overflow:hidden;}
    
    /* Enhanced button styles */
    .btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.3);}
    .btn:active{transform:translateY(0);}
    
    #startBtn {
      background: linear-gradient(135deg, #ffb84d, #ff9a3d);
      color: #0f1624;
      font-weight: 600;
      border: none;
      box-shadow: var(--glow);
      padding: 10px 18px;
    }
    
    #startBtn:hover {
      background: linear-gradient(135deg, #ffc266, #ffa64d);
      box-shadow: 0 0 20px rgba(255, 184, 77, 0.5), 0 4px 12px rgba(0,0,0,0.3);
    }
    
    #nextBtn {
      background: rgba(255, 184, 77, 0.1);
      color: var(--accent);
      border: 1px solid rgba(255, 184, 77, 0.3);
      font-weight: 500;
    }
    
    #nextBtn:hover {
      background: rgba(255, 184, 77, 0.15);
      box-shadow: 0 0 10px rgba(255, 184, 77, 0.2);
    }

    .game-area{display:grid;grid-template-columns:1fr 340px;gap:18px}

    /* Left: stage */
    .stage-wrap{
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      padding:18px;
      border-radius:16px;
      box-shadow:0 8px 32px rgba(2,6,23,0.8);
      min-height:420px;
      position:relative;
      overflow:hidden;
      border: 1px solid rgba(255,255,255,0.03);
    }
    
    .stage{
      position:relative;
      width:100%;
      height:440px;
      border-radius:12px;
      background:linear-gradient(180deg,#0b1420, #07111b);
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
    }

    /* shadow container */
    .shadow-entity{
      position:absolute;
      filter:blur(8px) saturate(0);
      opacity:0.85;
      pointer-events:none;
      mix-blend-mode:multiply;
      box-shadow: 0 0 30px rgba(0,0,0,0.7);
    }

    /* shape variants - rendered as solid black (shadow) */
    .shape-circle{width:110px;height:110px;border-radius:999px;background:var(--shadow-color)}
    .shape-square{width:110px;height:110px;background:var(--shadow-color)}
    .shape-rect{width:140px;height:80px;background:var(--shadow-color);border-radius:8px}
    .shape-triangle{width:0;height:0;border-left:60px solid transparent;border-right:60px solid transparent;border-bottom:110px solid var(--shadow-color)}
    .shape-star{width:120px;height:120px}
    .shape-star svg{width:120px;height:120px;display:block}

    /* motion helpers */
    @keyframes floatX{0%{transform:translateX(-20%) translateY(0) rotate(0deg)}50%{transform:translateX(20%) translateY(-8%) rotate(5deg)}100%{transform:translateX(-20%) translateY(0) rotate(0deg)}}
    @keyframes floatY{0%{transform:translateY(0)}50%{transform:translateY(-18%)}100%{transform:translateY(0)}}

    /* UI right column */
    .panel{
      background:linear-gradient(180deg,#071525,#06101a);
      border-radius:var(--ui-radius);
      padding:16px;
      color:var(--muted);
      height:100%;
      box-shadow:0 8px 32px rgba(2,6,23,0.6);
      border: 1px solid rgba(255,255,255,0.03);
    }
    
    .scoreline{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:12px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    
    .meter{
      height:12px;
      background:rgba(255,255,255,0.03);
      border-radius:8px;
      overflow:hidden;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
    }
    
    .meter > i{
      display:block;
      height:100%;
      background:linear-gradient(90deg,var(--accent),#ffd48a);
      width:0%;
      border-radius: 8px;
      transition: width 0.1s linear;
      box-shadow: 0 0 8px rgba(255, 184, 77, 0.4);
    }

    .choices{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      margin-top:12px;
    }
    
    .choice{
      background:rgba(255,255,255,0.02);
      padding:12px 10px;
      border-radius:10px;
      text-align:center;
      cursor:pointer;
      border:1px solid rgba(255,255,255,0.05);
      transition: all 0.2s ease;
      font-weight: 500;
    }
    
    .choice:hover{
      transform:translateY(-4px);
      background: rgba(255,255,255,0.05);
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    
    .choice.correct{
      outline:2px solid rgba(80,200,120,0.4);
      background: rgba(80,200,120,0.1);
      box-shadow: 0 0 15px rgba(80,200,120,0.2);
    }
    
    .choice.wrong{
      outline:2px solid rgba(255,80,80,0.4);
      background: rgba(255,80,80,0.1);
      box-shadow: 0 0 15px rgba(255,80,80,0.2);
    }

    .footer{
      display:flex;
      gap:8px;
      align-items:center;
      margin-top:12px;
    }
    
    .muter{
      opacity:0.7;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .muter input[type="checkbox"] {
      accent-color: var(--accent);
    }

    /* small screens */
    @media (max-width:880px){
      .game-area{grid-template-columns:1fr;}
      .stage{height:360px}
    }

    #howtoplay {
        font-size: 12px;
        color:#ff9a3d;
        font-weight: 600;
        font-family:  Tahoma, Geneva, Verdana, sans-serif;
    }
    #howtoplay2 {
        font-weight: 1000;
        color: #f0da0f;
        text-align: center;
        padding: 0;
        margin: 0;
    }