:root{
      --bg:#05070c;
      --panel:#3a0c09;
	  --panel-2:#55110c;
      --panel-3:#6b1610;
      --line:#e1b76a;
      --line-soft:rgba(225,183,106,.35);
      --wood-1:#8d5a2b;
      --wood-2:#9b6430;
      --wood-3:#b97739;
      --wood-4:#c58442;
      --paint:#d8842f;
      --paint-dark:#a95e17;
      --rim:#ff6b2d;
      --blue:#1e5eff;
      --blue-2:#0b44d2;
      --red:#ff3f4d;
      --red-2:#c92b38;
      --white:#f7f8fb;
      --muted:#9fb0c8;
      --shadow:0 18px 50px rgba(0,0,0,.35);
      --shadow-2:0 8px 24px rgba(0,0,0,.25);
      --glow:0 0 24px rgba(30,94,255,.35);
      --radius:18px;
      --radius-lg:28px;
      --hud-h:88px;
      --overlay:rgba(5,7,12,.72);
      --ok:#27d17f;
      --warning:#ffc145;
      --danger:#ff5f68;
      --court-edge:#4a2d16;
      --gold:#ffcf70;
      --text:#edf3ff;
      --text-2:#bfd0ef;
      --text-3:#8ea3c6;
      --ink:#081018;
      --accent:#6bd2ff;
      --accent-2:#8f6bff;
      --glass:rgba(255,255,255,.06);
      --glass-2:rgba(255,255,255,.1);
      --glass-3:rgba(255,255,255,.14);
      --border:rgba(255,255,255,.12);
      --border-2:rgba(255,255,255,.18);
      --success-bg:rgba(39,209,127,.14);
      --danger-bg:rgba(255,95,104,.14);
      --warn-bg:rgba(255,193,69,.14);
      --ui-max:1200px;
      --btn-shadow:0 12px 30px rgba(0,0,0,.28);
      --btn-shadow-hover:0 16px 36px rgba(0,0,0,.35);
      --card-shadow:0 16px 40px rgba(0,0,0,.22);
      --card-glow:0 0 28px rgba(255,207,112,.14);
      --ring:0 0 0 3px rgba(255,255,255,.08);
      --ring-blue:0 0 0 3px rgba(30,94,255,.2);
      --ring-red:0 0 0 3px rgba(255,63,77,.2);
      --ring-gold:0 0 0 3px rgba(255,207,112,.2);
      --title-size:30px;
      --subtitle-size:14px;
      --pill-size:13px;
      --btn-size:18px;
      --meta-size:13px;
      --round-size:16px;
      --speed-size:14px;
      --label-size:12px;
      --name-size:18px;
      --points-size:28px;
      --footer-size:12px;
      --ease:cubic-bezier(.2,.8,.2,1);
      --ease-bounce:cubic-bezier(.2,1.2,.2,1);
      --trans-fast:.18s;
      --trans:.28s;
      --trans-slow:.48s;
    }

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

    html,
    body{
      width:100%;
      height:100%;
      overflow:hidden;
      background:
        radial-gradient(circle at top, rgba(30,94,255,.08), transparent 30%),
        radial-gradient(circle at 80% 20%, rgba(255,99,71,.09), transparent 25%),
        linear-gradient(180deg, #05070c 0%, #070c14 100%);
      color:var(--text);
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
	  touch-action: none;
    }

    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), transparent 18%),
        radial-gradient(circle at center, transparent 56%, rgba(0,0,0,.28) 100%);
      z-index:1;
    }

    body::after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
      background-size:38px 38px;
      opacity:.16;
      z-index:1;
    }

    #gameWrap{
      position:relative;
      width:100%;
      height:100%;
      isolation:isolate;
      overflow:hidden;
    }

    canvas{
      display:block;
      width:100%;
      height:100%;
      position:relative;
      z-index:2;
    }
    

    #hud{
      position:absolute;
      top:16px;
      left:50%;
      transform:translateX(-50%);
      width:min(calc(100% - 28px), var(--ui-max));
      min-height:var(--hud-h);
      z-index:5;
      display:grid;
      grid-template-columns: 180px 1fr 180px;
      gap:14px;
      align-items:stretch;
      pointer-events:none;
    }

    .hud-card{
      position:relative;
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)),
        linear-gradient(180deg, rgba(16,26,45,.92), rgba(9,15,27,.92));
      border:1px solid var(--border);
      border-radius:22px;
      box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      overflow:hidden;
      pointer-events:auto;
    }

    .hud-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
      transform:translateX(-100%);
      animation:hudShine 7s linear infinite;
      pointer-events:none;
    }

    @keyframes hudShine{
      0%{transform:translateX(-100%);}
      100%{transform:translateX(180%);}
    }

    .hud-left,
    .hud-right{
      display:flex;
      align-items:center;
      justify-content:center;
      padding:14px 18px;
    }

    .hud-center{
      padding:14px 18px 12px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      gap:6px;
      text-align:center;
    }

    .brand-stack{
      display:flex;
      flex-direction:column;
      gap:4px;
      align-items:flex-start;
      width:100%;
    }

    .brand-top{
      display:flex;
      align-items:center;
      gap:10px;
      width:100%;
    }

    .brand-dot{
      width:14px;
      height:14px;
      border-radius:999px;
      background:linear-gradient(180deg, var(--gold), #ff9d42);
      box-shadow:0 0 18px rgba(255,207,112,.45);
      flex:0 0 auto;
    }

    .brand-name{
      font-size:15px;
      line-height:1;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.16em;
      color:var(--gold);
      white-space:nowrap;
    }

    .brand-sub{
      font-size:12px;
      color:var(--text-3);
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .question-kicker{
      font-size:12px;
      font-weight:800;
      letter-spacing:.18em;
      color:var(--accent);
      text-transform:uppercase;
    }

    .question-title{
      font-size:clamp(20px, 2.2vw, 34px);
      line-height:1.05;
      font-weight:1000;
      letter-spacing:.02em;
      text-transform:uppercase;
      color:var(--white);
      text-shadow:0 4px 20px rgba(0,0,0,.28);
    }

    .question-subtitle{
      font-size:13px;
      color:var(--text-2);
      opacity:.95;
    }

    .metric-stack{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:4px;
      width:100%;
    }

    .metric-label{
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.14em;
      color:var(--text-3);
    }

    .metric-value{
      font-size:30px;
      font-weight:1000;
      line-height:1;
      color:var(--white);
      text-shadow:0 4px 18px rgba(0,0,0,.28);
    }

    .metric-note{
      font-size:12px;
      color:var(--text-2);
    }

    #bottomBar{
      position:absolute;
      left:50%;
      bottom:18px;
      transform:translateX(-50%);
      width:min(calc(100% - 28px), 980px);
      z-index:5;
      display:grid;
      grid-template-columns: 1fr auto 1fr;
      gap:14px;
      align-items:center;
      pointer-events:none;
    }

    .bottom-card{
      min-height:74px;
      border-radius:20px;
      border:1px solid var(--border);
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
        linear-gradient(180deg, rgba(16,26,45,.9), rgba(7,12,20,.92));
      box-shadow:var(--shadow-2);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding:14px 18px;
      display:flex;
      align-items:center;
      pointer-events:auto;
    }

    .controls-wrap{
      justify-content:flex-start;
      gap:10px;
    }

    .controls-pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:42px;
      height:42px;
      border-radius:14px;
      font-size:18px;
      font-weight:900;
      color:var(--white);
      background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
      border:1px solid var(--border-2);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.18);
    }

    .controls-text{
      display:flex;
      flex-direction:column;
      gap:3px;
      margin-left:4px;
    }

    .controls-title{
      font-size:12px;
      color:var(--text-3);
      text-transform:uppercase;
      letter-spacing:.16em;
    }

    .controls-sub{
      font-size:13px;
      color:var(--text-2);
    }

    .status-wrap{
      justify-content:center;
      gap:12px;
    }

    .status-dot{
      width:12px;
      height:12px;
      border-radius:999px;
      background:var(--ok);
      box-shadow:0 0 16px rgba(39,209,127,.5);
      flex:0 0 auto;
      animation:pulseDot 1.6s infinite ease-in-out;
    }

    @keyframes pulseDot{
      0%,100%{transform:scale(1); opacity:1;}
      50%{transform:scale(1.25); opacity:.65;}
    }

    .status-text{
      font-size:15px;
      font-weight:800;
      color:var(--white);
      letter-spacing:.02em;
    }

    .round-wrap{
      justify-content:flex-end;
      gap:12px;
    }

    .round-chip{
      padding:10px 14px;
      border-radius:999px;
      border:1px solid var(--border-2);
      background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
      font-size:13px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.12em;
      color:var(--gold);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.18);
    }

    .round-text{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:3px;
    }

    .round-label{
      font-size:12px;
      color:var(--text-3);
      text-transform:uppercase;
      letter-spacing:.14em;
    }

    .round-value{
      font-size:14px;
      color:var(--text-2);
      font-weight:700;
    }

    #message{
      position:absolute;
      left:50%;
      top:112px;
      transform:translateX(-50%);
      z-index:6;
      min-width:280px;
      max-width:min(92vw, 720px);
      min-height:58px;
      padding:16px 18px;
      border-radius:18px;
      border:1px solid var(--border);
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)),
        linear-gradient(180deg, rgba(16,26,45,.96), rgba(7,12,20,.96));
      box-shadow:var(--shadow-2);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      pointer-events:none;
      opacity:0;
      transition:opacity .2s ease, transform .2s ease;
      color:var(--white);
      font-size:16px;
      font-weight:800;
      letter-spacing:.02em;
    }

    #message.show{
      opacity:1;
      transform:translateX(-50%) translateY(0);
    }

    #message.success{
      border-color:rgba(39,209,127,.28);
      box-shadow:var(--shadow-2), 0 0 0 1px rgba(39,209,127,.08), 0 0 30px rgba(39,209,127,.08);
    }

    #message.fail{
      border-color:rgba(255,95,104,.28);
      box-shadow:var(--shadow-2), 0 0 0 1px rgba(255,95,104,.08), 0 0 30px rgba(255,95,104,.08);
    }

    #overlay{
      position:absolute;
      inset:0;
      z-index:9;
      display:none;
      align-items:center;
      justify-content:center;
      background:
        radial-gradient(circle at center, rgba(11,17,28,.5), rgba(5,7,12,.78)),
        linear-gradient(180deg, rgba(5,7,12,.3), rgba(5,7,12,.84));
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding:20px;
    }

    #overlay.show{
      display:flex;
    }

    .overlay-panel{
      width:min(92vw, 560px);
      border-radius:28px;
      padding:26px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04)),
        linear-gradient(180deg, rgba(14,22,38,.96), rgba(8,13,22,.98));
      border:1px solid var(--border-2);
      box-shadow:0 28px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
      text-align:center;
      position:relative;
      overflow:hidden;
    }

    .overlay-panel::before{
      content:"";
      position:absolute;
      inset:-40% auto auto -20%;
      width:220px;
      height:220px;
      background:radial-gradient(circle, rgba(255,63,77,.15), transparent 70%);
      pointer-events:none;
    }

    .overlay-panel::after{
      content:"";
      position:absolute;
      inset:auto -10% -30% auto;
      width:280px;
      height:280px;
      background:radial-gradient(circle, rgba(30,94,255,.12), transparent 70%);
      pointer-events:none;
    }

    .overlay-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:110px;
      height:36px;
      padding:0 18px;
      margin-bottom:14px;
      border-radius:999px;
      background:linear-gradient(180deg, rgba(255,95,104,.18), rgba(255,95,104,.08));
      border:1px solid rgba(255,95,104,.28);
      color:#ffd9dd;
      font-weight:900;
      letter-spacing:.14em;
      text-transform:uppercase;
      font-size:12px;
    }

    .overlay-title{
      font-size:clamp(28px, 5vw, 46px);
      line-height:1;
      font-weight:1000;
      letter-spacing:.02em;
      margin-bottom:10px;
      color:var(--white);
      text-transform:uppercase;
    }

    .overlay-copy{
      color:var(--text-2);
      font-size:15px;
      line-height:1.55;
      max-width:430px;
      margin:0 auto 22px;
    }

    .overlay-grid{
      display:grid;
      grid-template-columns:repeat(2, 1fr);
      gap:12px;
      margin-bottom:22px;
    }

    .overlay-stat{
      border-radius:18px;
      padding:16px 14px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
        linear-gradient(180deg, rgba(20,31,52,.96), rgba(10,17,28,.96));
      border:1px solid var(--border);
      text-align:left;
      box-shadow:var(--shadow-2);
    }

    .overlay-stat-label{
      font-size:12px;
      color:var(--text-3);
      text-transform:uppercase;
      letter-spacing:.14em;
      margin-bottom:6px;
    }

    .overlay-stat-value{
      font-size:28px;
      color:var(--white);
      font-weight:1000;
      line-height:1;
    }

    .overlay-actions{
      display:flex;
      justify-content:center;
      gap:12px;
      flex-wrap:wrap;
    }

    .btn{
      appearance:none;
      border:none;
      outline:none;
      cursor:pointer;
      min-width:160px;
      height:56px;
      padding:0 24px;
      border-radius:18px;
      font-size:16px;
      font-weight:1000;
      letter-spacing:.08em;
      text-transform:uppercase;
      transition:transform var(--trans-fast) var(--ease), box-shadow var(--trans-fast) var(--ease), opacity var(--trans-fast) var(--ease), filter var(--trans-fast) var(--ease);
      box-shadow:var(--btn-shadow);
    }

    .btn:hover{
      transform:translateY(-2px);
      box-shadow:var(--btn-shadow-hover);
    }

    .btn:active{
      transform:translateY(0);
    }

    .btn-primary{
      color:white;
      background:
        linear-gradient(180deg, #ff6d59, #e83d43);
    }

    .btn-secondary{
      color:var(--white);
      background:
        linear-gradient(180deg, #2b6cff, #0f49dc);
    }

    .watermark{
      position:absolute;
      right:18px;
      bottom:12px;
      z-index:6;
      color:rgba(255,255,255,.18);
      font-size:11px;
      letter-spacing:.18em;
      text-transform:uppercase;
      pointer-events:none;
    }

    .hidden{
      display:none !important;
    }

    .sr-only{
      position:absolute !important;
      width:1px !important;
      height:1px !important;
      padding:0 !important;
      margin:-1px !important;
      overflow:hidden !important;
      clip:rect(0,0,0,0) !important;
      white-space:nowrap !important;
      border:0 !important;
    }

    .tone-blue{ color:var(--accent); }
    .tone-gold{ color:var(--gold); }
    .tone-red{ color:#ff9aa1; }
    .tone-green{ color:#8cffbf; }

    .bg-blue{ background:var(--success-bg); }
    .bg-red{ background:var(--danger-bg); }
    .bg-gold{ background:var(--warn-bg); }

    .ring-blue{ box-shadow:var(--ring-blue); }
    .ring-red{ box-shadow:var(--ring-red); }
    .ring-gold{ box-shadow:var(--ring-gold); }

    .weight-700{ font-weight:700; }
    .weight-800{ font-weight:800; }
    .weight-900{ font-weight:900; }
    .weight-1000{ font-weight:1000; }

    .upper{ text-transform:uppercase; }
    .center{ text-align:center; }
    .right{ text-align:right; }
    .left{ text-align:left; }

    .flex{ display:flex; }
    .grid{ display:grid; }
    .items-center{ align-items:center; }
    .justify-center{ justify-content:center; }
    .justify-between{ justify-content:space-between; }
    .gap-6{ gap:6px; }
    .gap-8{ gap:8px; }
    .gap-10{ gap:10px; }
    .gap-12{ gap:12px; }
    .gap-14{ gap:14px; }
    .gap-16{ gap:16px; }
    .w-full{ width:100%; }
    .h-full{ height:100%; }

    .glass{
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)),
        linear-gradient(180deg, rgba(16,26,45,.92), rgba(7,12,20,.92));
      border:1px solid var(--border);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .card{
      border-radius:18px;
      box-shadow:var(--card-shadow);
    }

    .badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid var(--border-2);
      background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
      font-size:12px;
      font-weight:900;
      letter-spacing:.12em;
      text-transform:uppercase;
    }

    .panel{
      border-radius:24px;
      border:1px solid var(--border);
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)),
        linear-gradient(180deg, rgba(16,26,45,.9), rgba(7,12,20,.92));
      box-shadow:var(--shadow-2);
    }

    .stat-line{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      width:100%;
    }

    .muted{
      color:var(--text-3);
    }

    .bright{
      color:var(--white);
    }

    .tiny{
      font-size:11px;
    }

    .small{
      font-size:12px;
    }

    .medium{
      font-size:14px;
    }

    .large{
      font-size:18px;
    }

    .xl{
      font-size:24px;
    }

    .xxl{
      font-size:32px;
    }

    .shadow{
      box-shadow:var(--shadow);
    }

    .shadow-2{
      box-shadow:var(--shadow-2);
    }

    .rounded{
      border-radius:18px;
    }

    .rounded-lg{
      border-radius:24px;
    }

    .rounded-xl{
      border-radius:30px;
    }

    .pad-10{ padding:10px; }
    .pad-12{ padding:12px; }
    .pad-14{ padding:14px; }
    .pad-16{ padding:16px; }
    .pad-18{ padding:18px; }
    .pad-20{ padding:20px; }
    .pad-24{ padding:24px; }

    .mb-6{ margin-bottom:6px; }
    .mb-8{ margin-bottom:8px; }
    .mb-10{ margin-bottom:10px; }
    .mb-12{ margin-bottom:12px; }
    .mb-14{ margin-bottom:14px; }
    .mb-16{ margin-bottom:16px; }
    .mb-20{ margin-bottom:20px; }

    .mt-6{ margin-top:6px; }
    .mt-8{ margin-top:8px; }
    .mt-10{ margin-top:10px; }
    .mt-12{ margin-top:12px; }
    .mt-16{ margin-top:16px; }
    .mt-20{ margin-top:20px; }

    .transition{
      transition:all var(--trans) var(--ease);
    }

    .transition-fast{
      transition:all var(--trans-fast) var(--ease);
    }

    .transition-slow{
      transition:all var(--trans-slow) var(--ease);
    }

    .blur{
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .border{
      border:1px solid var(--border);
    }

    .border-strong{
      border:1px solid var(--border-2);
    }

    .glow{
      box-shadow:var(--glow);
    }

    .text-shadow{
      text-shadow:0 4px 18px rgba(0,0,0,.28);
    }

    .caps{
      text-transform:uppercase;
      letter-spacing:.12em;
    }

    .mono{
      font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    }

    .opacity-80{ opacity:.8; }
    .opacity-70{ opacity:.7; }
    .opacity-60{ opacity:.6; }
    .opacity-50{ opacity:.5; }

    .pointer-none{ pointer-events:none; }
    .pointer-auto{ pointer-events:auto; }

    .absolute{ position:absolute; }
    .relative{ position:relative; }
    .fixed{ position:fixed; }

    .top-0{ top:0; }
    .left-0{ left:0; }
    .right-0{ right:0; }
    .bottom-0{ bottom:0; }

    .z-1{ z-index:1; }
    .z-2{ z-index:2; }
    .z-3{ z-index:3; }
    .z-4{ z-index:4; }
    .z-5{ z-index:5; }
    .z-9{ z-index:9; }

    .pill{
      border-radius:999px;
    }

    .hover-up:hover{
      transform:translateY(-2px);
    }

    .hover-bright:hover{
      filter:brightness(1.06);
    }

    .outline-none{
      outline:none;
    }

    .user-none{
      user-select:none;
      -webkit-user-select:none;
    }

    .nowrap{
      white-space:nowrap;
    }

    .wrap{
      white-space:normal;
    }

    .overflow-hidden{
      overflow:hidden;
    }

    .overflow-auto{
      overflow:auto;
    }

    .max-720{
      max-width:720px;
    }

    .max-560{
      max-width:560px;
    }

    .tracking-wide{
      letter-spacing:.12em;
    }

    .tracking-wider{
      letter-spacing:.18em;
    }

    .leading-tight{
      line-height:1.1;
    }

    .leading-normal{
      line-height:1.5;
    }

    .leading-loose{
      line-height:1.7;
    }

    .bg-panel{
      background:var(--panel);
    }

    .bg-panel-2{
      background:var(--panel-2);
    }

    .bg-panel-3{
      background:var(--panel-3);
    }

    .color-muted{
      color:var(--muted);
    }

    .color-white{
      color:var(--white);
    }

    .color-gold{
      color:var(--gold);
    }

    .color-blue{
      color:var(--accent);
    }

    .color-red{
      color:#ff9aa1;
    }

    .color-green{
      color:#8cffbf;
    }

    .bg-gradient-blue{
      background:linear-gradient(180deg, #2b6cff, #0f49dc);
    }

    .bg-gradient-red{
      background:linear-gradient(180deg, #ff6d59, #e83d43);
    }

    .bg-gradient-gold{
      background:linear-gradient(180deg, #ffcf70, #ffad42);
    }

    .separator{
      width:1px;
      height:100%;
      background:linear-gradient(180deg, transparent, rgba(255,255,255,.16), transparent);
    }

    .dot{
      width:8px;
      height:8px;
      border-radius:999px;
      background:currentColor;
    }

    .stack{
      display:flex;
      flex-direction:column;
    }

    .row{
      display:flex;
      flex-direction:row;
    }

    .icon-wrap{
      width:42px;
      height:42px;
      border-radius:14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
      border:1px solid var(--border-2);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.18);
    }

    .icon-emoji{
      font-size:20px;
      line-height:1;
    }

    .chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:36px;
      padding:0 12px;
      border-radius:999px;
      background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
      border:1px solid var(--border-2);
      font-size:12px;
      font-weight:900;
      letter-spacing:.1em;
      text-transform:uppercase;
    }

    .chip.ok{
      color:#bff5d9;
      background:linear-gradient(180deg, rgba(39,209,127,.18), rgba(39,209,127,.08));
      border-color:rgba(39,209,127,.28);
    }

    .chip.warn{
      color:#ffe2a8;
      background:linear-gradient(180deg, rgba(255,193,69,.18), rgba(255,193,69,.08));
      border-color:rgba(255,193,69,.28);
    }

    .chip.danger{
      color:#ffd7da;
      background:linear-gradient(180deg, rgba(255,95,104,.18), rgba(255,95,104,.08));
      border-color:rgba(255,95,104,.28);
    }

    .micro-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:8px;
    }

    .micro-stat{
      border-radius:14px;
      padding:10px 12px;
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border:1px solid var(--border);
    }

    .micro-label{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.12em;
      color:var(--text-3);
      margin-bottom:4px;
    }

    .micro-value{
      font-size:18px;
      font-weight:1000;
      color:var(--white);
      line-height:1;
    }

    .top-left-orb{
      position:absolute;
      left:-120px;
      top:-100px;
      width:280px;
      height:280px;
      border-radius:999px;
      background:radial-gradient(circle, rgba(30,94,255,.15), transparent 70%);
      filter:blur(12px);
      pointer-events:none;
      z-index:3;
    }

    .bottom-right-orb{
      position:absolute;
      right:-140px;
      bottom:-120px;
      width:320px;
      height:320px;
      border-radius:999px;
      background:radial-gradient(circle, rgba(255,80,80,.14), transparent 70%);
      filter:blur(12px);
      pointer-events:none;
      z-index:3;
    }

    .scanline{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:4;
      background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.03) 50%, transparent 100%);
      background-size:100% 6px;
      opacity:.07;
      mix-blend-mode:screen;
    }

    .vignette{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:4;
      box-shadow:inset 0 0 180px rgba(0,0,0,.5);
    }

    .grid-fade{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:3;
      background:
        linear-gradient(180deg, transparent, rgba(0,0,0,.08)),
        radial-gradient(circle at center, transparent 55%, rgba(0,0,0,.18));
    }

    .legend{
      display:flex;
      align-items:center;
      gap:8px;
      font-size:12px;
      color:var(--text-3);
    }

    .legend-dot{
      width:10px;
      height:10px;
      border-radius:999px;
      background:linear-gradient(180deg, var(--gold), #ff9d42);
      box-shadow:0 0 12px rgba(255,207,112,.35);
    }

    .kbd{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:28px;
      height:28px;
      padding:0 8px;
      border-radius:10px;
      border:1px solid var(--border-2);
      background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
      color:var(--white);
      font-size:12px;
      font-weight:900;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    }

    .footer-note{
      position:absolute;
      left:18px;
      bottom:12px;
      color:rgba(255,255,255,.18);
      font-size:11px;
      letter-spacing:.12em;
      text-transform:uppercase;
      pointer-events:none;
      z-index:6;
    }

    .fade-in{
      animation:fadeIn .35s ease;
    }

    @keyframes fadeIn{
      from{opacity:0; transform:translateY(8px);}
      to{opacity:1; transform:translateY(0);}
    }

    .pop-in{
      animation:popIn .28s var(--ease-bounce);
    }

    @keyframes popIn{
      from{opacity:0; transform:scale(.94);}
      to{opacity:1; transform:scale(1);}
    }

    @media (max-width:1100px){
      #hud{
        grid-template-columns:150px 1fr 150px;
      }

      .question-title{
        font-size:clamp(18px, 2.2vw, 28px);
      }

      .metric-value{
        font-size:25px;
      }
    }

    @media (max-width:860px){
      #hud{
        grid-template-columns:1fr;
        width:min(calc(100% - 20px), 760px);
      }

      .hud-left,
      .hud-right{
        justify-content:flex-start;
      }

      .metric-stack{
        align-items:flex-start;
      }

      #bottomBar{
        width:min(calc(100% - 20px), 760px);
        grid-template-columns:1fr;
      }

      .controls-wrap,
      .status-wrap,
      .round-wrap{
        justify-content:center;
      }

      .round-text{
        align-items:center;
      }
    }

    @media (max-width:560px){
      .question-title{
        font-size:18px;
      }

      .question-subtitle{
        font-size:12px;
      }

      .overlay-grid{
        grid-template-columns:1fr;
      }

      .btn{
        width:100%;
      }

      .overlay-actions{
        flex-direction:column;
      }

      .hud-card,
      .bottom-card{
        border-radius:18px;
      }
    }
	/* ============================= */
/* CARTOON MODE OVERRIDE */
/* ============================= */

:root{

  --bg:#0c1224;

  --blue:#4e8cff;
  --blue-2:#2e63ff;

  --red:#ff4d5f;
  --red-2:#e03545;

  --gold:#ffd44f;

  --accent:#6ad6ff;
  --accent-2:#8f7bff;

  --white:#ffffff;
  --text:#ffffff;
  --text-2:#d7e4ff;
  --text-3:#a6b6db;

  --border:rgba(255,255,255,.18);
  --border-2:rgba(255,255,255,.28);

  --shadow:
    0 14px 0 rgba(0,0,0,.35),
    0 18px 40px rgba(0,0,0,.45);

  --shadow-2:
    0 8px 0 rgba(0,0,0,.3),
    0 10px 25px rgba(0,0,0,.4);

  --btn-shadow:
    0 6px 0 rgba(0,0,0,.35),
    0 12px 25px rgba(0,0,0,.45);

}

/* ============================= */
/* BACKGROUND */
/* ============================= */

body{

  background:
    radial-gradient(circle at 50% -20%, #4e8cff33, transparent 40%),
    radial-gradient(circle at 90% 10%, #ff4d5f33, transparent 40%),
    radial-gradient(circle at 10% 80%, #ffd44f22, transparent 40%),
    linear-gradient(180deg,#0c1224,#0a0f1d);

}

/* ============================= */
/* HUD PANELS */
/* ============================= */

.hud-card{

  border:3px solid rgba(255,255,255,.18);

  background:
  linear-gradient(180deg,#1a2a4f,#111a33);

  box-shadow:
    0 6px 0 rgba(0,0,0,.35),
    0 16px 40px rgba(0,0,0,.45);

  backdrop-filter:none;

}

/* ============================= */
/* QUESTION TITLE */
/* ============================= */

.question-title{

  color:#ffffff;

  text-shadow:
    0 4px 0 rgba(0,0,0,.35),
    0 8px 20px rgba(0,0,0,.5);

}

/* ============================= */
/* BUTTONS */
/* ============================= */

.btn{

  border:3px solid rgba(255,255,255,.2);

  box-shadow:
    0 6px 0 rgba(0,0,0,.35),
    0 12px 30px rgba(0,0,0,.45);

  transform:translateY(0);

}

.btn:hover{

  transform:translateY(-3px) scale(1.03);

}

.btn:active{

  transform:translateY(3px);

}

.btn-primary{

  background:
  linear-gradient(180deg,#ff7a66,#ff4d5f);

}

.btn-secondary{

  background:
  linear-gradient(180deg,#5f8fff,#2e63ff);

}

/* ============================= */
/* CARDS / PANELS */
/* ============================= */

.panel,
.bottom-card,
.overlay-panel{

  border:3px solid rgba(255,255,255,.15);

  box-shadow:
    0 8px 0 rgba(0,0,0,.35),
    0 20px 45px rgba(0,0,0,.45);

}

/* ============================= */
/* METRICS */
/* ============================= */

.metric-value{

  color:#ffd44f;

  text-shadow:
    0 3px 0 rgba(0,0,0,.35);

}

/* ============================= */
/* MESSAGE BOX */
/* ============================= */

#message{

  border:3px solid rgba(255,255,255,.15);

  box-shadow:
    0 6px 0 rgba(0,0,0,.35),
    0 18px 30px rgba(0,0,0,.45);

}

/* ============================= */
/* OVERLAY */
/* ============================= */

.overlay-panel{

  background:
  linear-gradient(180deg,#1a2a4f,#0e1730);

}

/* ============================= */
/* CHIP / BADGE */
/* ============================= */

.chip,
.badge{

  border:2px solid rgba(255,255,255,.18);

  box-shadow:
    0 3px 0 rgba(0,0,0,.35);

}

/* ============================= */
/* BUTTON JUICE */
/* ============================= */

.btn:hover{

  filter:brightness(1.08);

}

/* ============================= */
/* LITTLE FUN DETAILS */
/* ============================= */

.brand-dot{

  width:16px;
  height:16px;

  box-shadow:
    0 0 0 3px rgba(255,255,255,.15),
    0 0 14px rgba(255,212,79,.8);

}

.status-dot{

  box-shadow:
    0 0 10px rgba(39,209,127,.8);

}

/* ============================= */
/* CARTOON POP ANIMATION */
/* ============================= */

.pop-in{

  animation:cartoonPop .25s cubic-bezier(.2,1.4,.2,1);

}

@keyframes cartoonPop{

  0%{transform:scale(.8)}
  60%{transform:scale(1.1)}
  100%{transform:scale(1)}

}
/* =============================== */
/* CARTOON RED UI OVERRIDE */
/* =============================== */

:root{

--accent:#ff3c2e;
--blue:#ff3c2e;
--blue-2:#c21f15;

--panel:#3a0c09;
--panel-2:#55110c;
--panel-3:#6b1610;

--border:rgba(255,255,255,.22);
--border-2:rgba(255,255,255,.28);

--shadow:
0 10px 0 rgba(0,0,0,.35),
0 18px 40px rgba(0,0,0,.45);

}

/* =============================== */
/* HUD PANELS */
/* =============================== */

.hud-card{

background:linear-gradient(180deg,#ff5a4a,#ff3c2e);

border:2px solid rgba(255,255,255,.25);

box-shadow:
0 10px 30px rgba(0,0,0,.35),
0 0 25px rgba(255,60,46,.35);

}

/* =============================== */
/* BOTTOM PANELS */
/* =============================== */

.bottom-card{

background:linear-gradient(180deg,#ff5a4a,#ff3c2e);

border:2px solid rgba(255,255,255,.25);

box-shadow:
0 10px 30px rgba(0,0,0,.35),
0 0 25px rgba(255,60,46,.35);

}

/* =============================== */
/* QUESTION TITLE */
/* =============================== */

.question-title{

color:#ffffff;

text-shadow:
0 3px 0 rgba(0,0,0,.35),
0 8px 20px rgba(0,0,0,.4);

}

/* =============================== */
/* METRICS */
/* =============================== */

.metric-value{

color:#ffe27a;

text-shadow:0 3px 0 rgba(0,0,0,.35);

}

/* =============================== */
/* MESSAGE BOX */
/* =============================== */

#message{

background:linear-gradient(180deg,#ff5a4a,#ff3c2e);

border:2px solid rgba(255,255,255,.25);

box-shadow:
0 10px 30px rgba(0,0,0,.35),
0 0 20px rgba(255,60,46,.35);

color:white;

}

/* =============================== */
/* OVERLAY */
/* =============================== */

.overlay-panel{

background:linear-gradient(180deg,#ff5a4a,#ff3c2e);

border:2px solid rgba(255,255,255,.3);

box-shadow:
0 18px 50px rgba(0,0,0,.45),
0 0 30px rgba(255,60,46,.4);

}

/* =============================== */
/* BUTTONS */
/* =============================== */

.btn-primary{

background:linear-gradient(180deg,#ff6a5c,#ff3c2e);

border:2px solid rgba(255,255,255,.3);

box-shadow:
0 6px 0 rgba(0,0,0,.35),
0 12px 30px rgba(0,0,0,.45);

}

.btn-secondary{

background:linear-gradient(180deg,#ff7d6e,#ff3c2e);

border:2px solid rgba(255,255,255,.3);

}

/* =============================== */
/* CHIP / BADGES */
/* =============================== */

.chip,
.badge{

background:linear-gradient(180deg,#ff6a5c,#ff3c2e);

border:2px solid rgba(255,255,255,.3);

color:white;

}

/* =============================== */
/* BRAND DOT */
/* =============================== */

.brand-dot{

background:#ffe27a;

box-shadow:
0 0 10px rgba(255,226,122,.7);

}

/* =============================== */
/* STATUS DOT */
/* =============================== */

.status-dot{

background:#2aff8c;

box-shadow:
0 0 12px rgba(42,255,140,.7);

}

/* =============================== */
/* LITTLE HOVER JUICE */
/* =============================== */

.hud-card:hover,
.bottom-card:hover{

transform:translateY(-2px);

}

.btn:hover{

transform:translateY(-3px) scale(1.03);

}


/* =============================== */
/* FORCE ALL TEXT WHITE */
/* =============================== */

body,
.hud-card,
.bottom-card,
.overlay-panel,
#message,
.metric-label,
.metric-value,
.metric-note,
.question-title,
.question-subtitle,
.brand-name,
.brand-sub,
.controls-title,
.controls-sub,
.status-text,
.round-label,
.round-value,
.overlay-copy,
.overlay-stat-label,
.overlay-stat-value,
.badge,
.chip,
.legend,
.legend-dot,
.footer-note,
.watermark{

color:#ffffff !important;

}

/* ako ima muted / sekundarni tekst */

.text-2,
.text-3,
.muted,
.color-muted{

color:#ffffff !important;
opacity:.85;

}

/* dugmad */

.btn,
.btn-primary,
.btn-secondary{

color:#ffffff !important;

}
.question-kicker{
color:#ffffff !important;
}
.menu{

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

display:flex;
flex-direction:column;
gap:20px;

z-index:20;
text-align:center;

}

.menu-title{

font-size:60px;
font-weight:900;
color:white;

text-shadow:
0 4px 0 rgba(0,0,0,.4),
0 8px 20px rgba(0,0,0,.5);

}

.menu-btn{

font-size:28px;
font-weight:900;

padding:14px 32px;
font-size:18px;

border-radius:18px;
border:none;

cursor:pointer;

background:#ff3c2e;
color:white;

box-shadow:
0 6px 0 rgba(0,0,0,.35),
0 12px 25px rgba(0,0,0,.45);

}

.menu-btn:hover{

transform:scale(1.05);

}
#mainMenu{

position:absolute;

top:60%;
left:50%;

transform:translate(-50%,-50%);

display:flex;
flex-direction:column;
gap:14px;

z-index:50;

text-align:center;

}

#mainMenu h1{

font-size:42px;
margin-bottom:10px;

}

.menu-btn{




border-radius:14px;

}
.watermark{
position:absolute;
bottom:20px;
right:20px;
opacity:.85;
pointer-events:none;
}

.watermark img{
height:40px;
}
/* MOBILE FIX */
@media (max-width: 768px){

.hud-card{
padding:14px 16px;
border-radius:18px;
}

.question-title{
font-size:22px !important;
line-height:1.2;
}

.question-subtitle{
font-size:14px !important;
}

.metric-value{
font-size:32px !important;
}

.metric-label{
font-size:12px !important;
}

.brand-name{
font-size:18px !important;
}

.brand-sub{
font-size:12px !important;
}

}
@media (max-width: 480px){

.question-title{
font-size:18px !important;
}

.question-subtitle{
font-size:12px !important;
}

.metric-value{
font-size:26px !important;
}

.hud-card{
padding:10px 12px;
}

}
/* ================= MOBILE RUNNER HUD ================= */

@media (max-width:768px){

#hud{
position:absolute;
top:8px;
left:50%;
transform:translateX(-50%);
width:94%;
display:flex;
flex-direction:column;
gap:6px;
}

/* sakrij velike kartice layout */
.hud-left,
.hud-right{
display:none;
}

/* centar postaje mala traka */
.hud-center{
padding:8px 12px;
border-radius:14px;
}

/* naslov igre */
.brand-name{
font-size:14px;
}

/* pitanje */
.question-title{
font-size:16px !important;
line-height:1.2;
}

/* podtekst */
.question-subtitle{
display:none;
}

/* streak pretvori u badge */
.metric-stack{
position:absolute;
top:8px;
right:14px;
font-size:14px;
}

.metric-value{
font-size:18px !important;
}

}
@media (max-width:768px){

.hud-center{
backdrop-filter:blur(10px);
box-shadow:0 6px 20px rgba(0,0,0,.35);
}

}


.about-panel h2{
margin-bottom:15px;
font-size:28px;
}

.about-panel p{
margin-bottom:12px;
line-height:1.5;
opacity:.9;
}
#gameWrap,
#gameWrap canvas{
touch-action:none;
overscroll-behavior:none;
}
#mobileScore{
  position:absolute;
  top:120px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(6px);
  padding:10px 18px;
  border-radius:18px;
  text-align:center;
  color:white;
  font-weight:700;
  pointer-events:none;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
}

.score-label{
  font-size:10px;
  letter-spacing:2px;
  opacity:0.7;
}

.score-value{
  font-size:28px;
  line-height:1;
}
@media (max-width:768px){

.hud-right{
  display:none;
}

}
.score-value.pop{
transform:scale(1.2);
transition:transform .15s;
}
#mobileScore{
  position:absolute;
  top:130px;
  right:5px;
  left:auto;
  transform:none;

  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(6px);
  padding:10px 16px;
  border-radius:16px;

  text-align:center;
  color:white;
  font-weight:700;
  pointer-events:none;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
}
/* po defaultu sakriven */
#mobileScore{
  display:none;
}

/* prikazi samo na telefonima */
@media (max-width:768px){
  #mobileScore{
    display:block;
  }
}
.btn-ad{
background: linear-gradient(135deg,#ffd84a,#ffb800);
color:#111;
font-weight:700;
border:none;
box-shadow:0 6px 20px rgba(255,200,0,0.4);
}

.btn-ad:hover{
transform:scale(1.05);
box-shadow:0 10px 25px rgba(255,200,0,0.6);
}
.menu-subtitle{
font-size:28px;
margin-bottom:20px;
letter-spacing:2px;
}
.quiz-screen{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:90%;
max-width:500px;
display:flex;
flex-direction:column;
gap:12px;
align-items:center;
z-index:10;
}

.quiz-screen h1{
font-size:32px;
margin-bottom:10px;
}

.quiz-screen input{
width:100%;
padding:10px;
border-radius:8px;
border:none;
font-size:16px;
}

.correct-select{
display:flex;
gap:15px;
font-size:14px;
color:white;
}

.correct-select label{
display:flex;
align-items:center;
gap:5px;
}
.correct-select{
display:flex;
justify-content:center;
gap:25px;
margin-top:10px;
margin-bottom:15px;
font-size:14px;
color:#fff;
flex-wrap:wrap;
}

.correct-select label{
display:flex;
align-items:center;
gap:6px;
background:rgba(0,0,0,0.15);
padding:6px 10px;
border-radius:8px;
}
.quiz-screen .menu-btn{
margin-top:8px;
}
.quiz-screen{
background:rgba(0,0,0,0.25);
backdrop-filter:blur(6px);
padding:25px;
border-radius:16px;
box-shadow:0 15px 40px rgba(0,0,0,0.35);
}
.option-row{
display:flex;
align-items:center;
gap:10px;
width:100%;
}

.option-row input[type="text"],
.option-row input:not([type]){
flex:1;
}

.correct-radio{
display:flex;
align-items:center;
gap:4px;
font-size:13px;
color:white;
background:rgba(0,0,0,0.2);
padding:6px 10px;
border-radius:8px;
}
.quiz-screen input{
background:#f3f3f3;
border:none;
outline:none;
font-size:16px;
padding:12px;
border-radius:10px;
}
.quiz-saved{
position:fixed;
bottom:30px;
left:50%;
transform:translateX(-50%);
background:#2ecc71;
color:white;
padding:10px 18px;
border-radius:30px;
font-weight:600;
opacity:0;
transition:all .3s;
pointer-events:none;
}

.quiz-saved.show{
opacity:1;
bottom:50px;
}
#aboutPanel{
position:fixed;
inset:0;

display:none;
align-items:center;
justify-content:center;

background:rgba(0,0,0,0.7);

z-index:100;
}

.about-content{
width:90%;
max-width:650px;

background:#111;
color:white;

padding:40px;
border-radius:20px;

text-align:center;
line-height:1.6;

box-shadow:0 25px 80px rgba(0,0,0,.6);
}

.about-content h2{
margin-bottom:20px;
font-size:32px;
}

.about-content button{
margin-top:25px;
padding:14px 30px;
border:none;
border-radius:12px;
background:#ff3c2e;
color:white;
font-weight:bold;
cursor:pointer;
}
#splashScreen{
position:fixed;
inset:0;

background:#ffffff;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

z-index:99999;
}

.splash-logo{
width:120px;
margin-bottom:20px;
}

#splashScreen h2{
font-size:26px;
color:#111;
}
#splashScreen{
position:fixed;
inset:0;

background:#ffffff;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

z-index:99999;

transition:transform .7s ease;
}

#splashScreen.hide{
transform:translateX(-100%);
}
.game-logo{
width:320px;
max-width:75vw;

filter: drop-shadow(0 10px 25px rgba(0,0,0,0.45))
        drop-shadow(0 0 20px rgba(255,220,120,0.6));

animation:logoGlow 3s ease-in-out infinite;
}
.menu-btn{
padding:12px 28px;
font-size:18px;
border-radius:14px;
width:220px;
}
#mainMenu{
position:absolute;

top:55%;
left:50%;

transform:translate(-50%,-50%);

display:flex;
flex-direction:column;
align-items:center;

gap:14px;
}
#playBtn{
transform:scale(1.08);
}
@keyframes logoShake {

0%{ transform:translateX(0) }

92%{ transform:translateX(0) }

94%{ transform:translateX(-3px) }

95%{ transform:translateX(3px) }

96%{ transform:translateX(-3px) }

97%{ transform:translateX(3px) }

98%{ transform:translateX(-2px) }

99%{ transform:translateX(2px) }

100%{ transform:translateX(0) }

}
.game-logo{
animation: logoShake 5s infinite;
}
#playBtn{
animation: playPulse 2s infinite;
}
@keyframes playPulse{

0%{ transform:scale(1) }

50%{ transform:scale(1.08) }

100%{ transform:scale(1) }

}
.btn-share{
  background: linear-gradient(135deg,#6a5cff,#8f7bff);
  color:#fff;
  font-weight:700;
  border:none;
  padding:14px 20px;
  border-radius:14px;
  box-shadow:0 6px 0 rgba(0,0,0,0.2);
  transition:0.15s;
}

.btn-share:active{
  transform:translateY(3px);
  box-shadow:0 2px 0 rgba(0,0,0,0.2);
}
#createQuizScreen {
  max-width: 420px;
  width: 95%;
  margin: 0 auto;
  padding: 20px;
}
.option-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.option-row input {
  flex: 1;
  min-width: 0;
}

.option-row .correct-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .correct-toggle span {
    display: none; /* sakrij tekst */
  }
}
input {
  height: 45px;
  font-size: 16px;
}
.option-row {
  width: 100%;
}
#iqBarWrap{
  position: fixed;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

/* 💻 PC */
@media (min-width: 900px){
  #iqBarWrap{
    left: 150px; /* pomeri ga malo unutra */
  }
}

#iqBar{
  width: 26px;
  height: 240px;
  padding: 4px;

  background: rgba(0,0,0,0.25);
  border: 2px solid rgba(0,0,0,0.6);
  border-radius: 12px;

  backdrop-filter: blur(6px);

  display: flex;
  align-items: flex-end;
}

#iqFill{
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
}

.iqBlock{
  width: 100%;
  height: 12px;
  border-radius: 4px;
  transition: all 0.25s ease;
}

#iqLabels{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 240px;
}

.iq-top, .iq-bottom{
  font-size: 18px;
}
#iqBarWrap{
  display: none;
}
.iqBlock{
  width: 100%;
  height: 12px;
  border-radius: 4px;
}



#praisePop {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: 56px;
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  pointer-events: none;
  opacity: 0;

  text-shadow:
    0 0 10px #fff,
    0 0 20px #ffcf70,
    0 0 40px #ff8a00;

  transition: all 0.25s ease;
}

#praisePop.show {
  transform: translate(-50%, -50%) scale(1.3);
  opacity: 1;
}

@keyframes popShake {
  0% { transform: translate(-50%, -50%) scale(1.2); }
  25% { transform: translate(-48%, -52%) scale(1.25); }
  50% { transform: translate(-52%, -48%) scale(1.3); }
  75% { transform: translate(-49%, -51%) scale(1.25); }
  100% { transform: translate(-50%, -50%) scale(1.3); }
}

#praisePop.show {
  animation: popShake 0.3s ease;
}
#gameWrap {
  position: relative;
}

#praisePop {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: 56px;
  font-weight: 900;
  color: #ffffff;
  opacity: 0;
  pointer-events: none;

  z-index: 99999; /* 🔥 NAJBITNIJE */

  text-shadow:
    0 0 10px #fff,
    0 0 20px #ffcf70,
    0 0 40px #ff8a00;

  transition: all 0.25s ease;
}

#praisePop.show {
  transform: translate(-50%, -50%) scale(1.3);
  opacity: 1;
}