:root{
    --bg:#05070d;
    --frame-edge:#23273a;
    --gold:#f3c50a;
    --gold-dark:#8a6a02;
    --red:#f0405e;
    --red-dim:#6d2032;
    --blue:#35a3f4;
    --blue-dim:#1c4868;
    --ink:#eef1f7;
    --muted:#8b97ad;
    --panel:#0d1626;
    --panel-edge:#1c2a41;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Rajdhani',sans-serif;
    min-height:100vh;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:32px 20px 60px;
  }
  .page{
    width:100%;
    max-width:1080px;
    display:flex;
    flex-wrap:wrap;
    gap:36px;
    align-items:flex-start;
    justify-content:center;
  }
  .masthead{width:100%;text-align:center;margin-bottom:4px;}
  .masthead h1{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(34px,5vw,52px);
    letter-spacing:2px;
    margin:0;
    text-wrap:balance;
  }
  .masthead h1 span{color:var(--gold);}
  .masthead p{margin:6px 0 0;color:var(--muted);font-size:15px;direction:rtl;}
  .phase-tag{
    display:inline-block;margin-top:12px;padding:5px 14px;border-radius:999px;
    background:var(--panel);border:1px solid var(--panel-edge);color:var(--muted);
    font-size:13px;direction:rtl;font-weight:600;
  }
  .phase-tag b{color:var(--gold);font-weight:700;}

  .stage-col{display:flex;flex-direction:column;align-items:center;gap:14px;}
  .obs-frame{
    width:340px;max-width:86vw;
    border:1px solid var(--frame-edge);
    border-radius:10px;
    background:#000;
    padding:6px;
  }
  .obs-label{
    display:flex;align-items:center;gap:6px;
    padding:3px 4px 7px;
    color:var(--muted);font-size:11px;letter-spacing:.5px;text-transform:uppercase;
  }
  .obs-label .rec{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red);}
  .screen{
    position:relative;
    width:100%;
    aspect-ratio:9/16;
    border-radius:4px;
    overflow:hidden;
    background:#0a1a12;
  }
  canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto;}
  #glError{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
    padding:24px;text-align:center;font-size:14px;line-height:1.7;color:#ffd7dd;
    background:rgba(10,12,20,.92);z-index:5;}

  .hud{position:absolute;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;padding:8px 9px;z-index:3;pointer-events:none;}
  .hud.top{top:0;}
  .hud.bottom{bottom:0;}
  .crest{display:flex;flex-direction:column;gap:3px;}
  .crest .row1{display:flex;align-items:center;gap:6px;}
  .flag{width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.18);flex:none;}
  .flag.r{background:linear-gradient(160deg,var(--red),#7a1f33);}
  .flag.b{background:linear-gradient(160deg,var(--blue),#123c58);}
  .crest .name{font-family:'Bebas Neue',sans-serif;letter-spacing:1px;font-size:14px;line-height:1;}
  .crest.r .name{color:var(--red);}
  .crest.b .name{color:var(--blue);}
  .crowns{display:flex;gap:3px;padding-inline-start:28px;}
  .crowns svg{width:11px;height:11px;opacity:.28;}
  .crowns svg.on{opacity:1;filter:drop-shadow(0 0 3px rgba(243,197,10,.7));}
  .wins{display:flex;align-items:center;gap:4px;font-family:'Bebas Neue',sans-serif;font-size:19px;font-variant-numeric:tabular-nums;color:var(--gold);text-shadow:0 1px 4px rgba(0,0,0,.6);}
  .wins svg{width:13px;height:13px;flex:none;}

  .timer{
    position:absolute;top:8px;left:50%;transform:translateX(-50%);
    font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:1px;font-variant-numeric:tabular-nums;
    color:var(--ink);background:rgba(5,7,13,.6);padding:1px 11px;border-radius:7px;z-index:3;
    border:1px solid rgba(255,255,255,.08);
  }

  .banner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(5,7,13,0);opacity:0;pointer-events:none;transition:opacity .3s ease,background .3s ease;z-index:6;}
  .banner.show{opacity:1;background:rgba(5,7,13,.6);}
  .banner span{font-family:'Bebas Neue',sans-serif;font-size:27px;letter-spacing:1.5px;padding:9px 20px;border-radius:9px;background:var(--panel);border:1px solid var(--panel-edge);text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.5);}
  .banner span.r{color:var(--red);}
  .banner span.b{color:var(--blue);}
  .banner span.d{color:var(--muted);}

  .econ{position:absolute;left:6px;right:6px;z-index:3;display:flex;align-items:center;gap:5px;pointer-events:none;}
  .econ.r{top:50px;}
  .econ.b{bottom:50px;flex-direction:row-reverse;}
  .elixirbar{display:flex;align-items:center;gap:4px;background:rgba(10,14,24,.6);border-radius:20px;padding:2px 7px;}
  .pips{display:flex;gap:2px;}
  .pip{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);}
  .pip.on{background:#c9184a;border-color:#ff5b7f;}
  .econ.b .pip.on{background:#1c6fd6;border-color:#5fb0ff;}
  .elixirbar .enum{font-family:'Bebas Neue',sans-serif;font-size:13px;color:#fff;min-width:11px;text-align:center;}

  .gift-toast{
    position:absolute;left:8px;right:8px;bottom:6px;z-index:4;
    display:flex;flex-direction:column-reverse;gap:3px;
    pointer-events:none;
  }
  .gift-toast .row{
    font-size:11.5px;font-weight:700;color:#fff;
    background:rgba(10,14,24,.72);border:1px solid rgba(255,255,255,.12);
    border-radius:6px;padding:2px 8px;
    animation:toastIn .35s ease, toastOut .4s ease 1.9s forwards;
    width:fit-content;
  }
  .gift-toast .row.r{color:#ffd7de;}
  .gift-toast .row.b{color:#d3ecff;}
  @keyframes toastIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
  @keyframes toastOut{to{opacity:0;}}

  .reset-link{background:none;border:none;color:var(--muted);font-family:'Rajdhani',sans-serif;font-size:13px;text-decoration:underline;cursor:pointer;padding:0;}
  .reset-link:hover{color:var(--ink);}
  .reset-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

  .panel-col{width:340px;max-width:92vw;display:flex;flex-direction:column;gap:18px;}
  .card{background:var(--panel);border:1px solid var(--panel-edge);border-radius:16px;padding:16px 18px;}
  .card h2{font-family:'Bebas Neue',sans-serif;letter-spacing:1px;font-size:18px;margin:0 0 10px;display:flex;align-items:center;gap:8px;}
  .card h2 .dot{width:9px;height:9px;border-radius:50%;flex:none;}
  .card h2 .dot.r{background:var(--red);}
  .card h2 .dot.b{background:var(--blue);}
  .faction-switch{display:flex;gap:6px;margin-bottom:10px;}
  .faction-btn{
    flex:1;padding:6px 8px;border-radius:8px;border:1px solid var(--panel-edge);
    background:#0a1220;color:var(--muted);font-family:'Rajdhani',sans-serif;font-weight:700;
    font-size:12.5px;cursor:pointer;transition:all .12s ease;
  }
  .faction-btn.active{background:var(--gold);color:#1a1400;border-color:var(--gold);}
  .faction-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
  .gift-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
  .gift-btn{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 8px;border-radius:9px;border:1px solid var(--panel-edge);background:#0a1220;color:var(--ink);cursor:pointer;font-family:'Rajdhani',sans-serif;text-align:left;transition:transform .08s ease,border-color .15s ease;}
  .gift-btn:hover{border-color:var(--gold);transform:translateY(-1px);}
  .gift-btn:active{transform:translateY(0);}
  .gift-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
  .gift-btn .prop{font-size:15px;line-height:1;}
  .gift-btn .label{font-weight:700;font-size:12.5px;}
  .gift-btn .cost{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
  .gift-btn.r .label{color:var(--red);}
  .gift-btn.b .label{color:var(--blue);}
  .legend{display:flex;flex-direction:column;gap:9px;direction:rtl;}
  .legend .row{display:flex;align-items:center;gap:9px;font-size:14px;}
  .legend .row .prop{font-size:15px;width:20px;text-align:center;}
  .legend .row .stat{margin-inline-start:auto;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;}
  .note{direction:rtl;font-size:13.5px;line-height:1.7;color:var(--muted);}
  .note b{color:var(--ink);}
  @media (prefers-reduced-motion: reduce){.banner,.gift-toast .row{transition:none;animation:none;}}