:root{
      --red:var(--in-accent, #e92038);
      --red2:#ff5060;
      --grn:#27e08a;
      --pgrn:#34c98a;
      --pgrn2:#5fe0aa;
      --amb:#ffb02e;
      --cyn:#3ad6ff;
      --sf:'Steelfish',Impact,sans-serif;
      --pp:var(--in-font-body, 'Poppins',sans-serif);
      --bg:#0d0d0f;
      --hud:var(--inlab-hud-h, 85px);
      --top:52px;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%;background:var(--bg);color:#fff;font-family:var(--pp);overflow:hidden;-webkit-user-select:none;user-select:none}

    /* ── STAGE ── */
    #rxStage{
      position:fixed; inset:52px 0 var(--hud) 0;
      background:#0d0d0f;
      touch-action:none; overflow:visible;
      display:flex; align-items:center; justify-content:center;
      gap:clamp(1rem,2.5vw,1.8rem); padding:0 clamp(1rem,3vw,2.5rem);
    }
    #rxStage::after{
      content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
      background:radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.45) 100%);
    }

    #rxArena{
      position:relative; z-index:5;
      --arena: min(calc(100vh - 52px - var(--hud) - 28px), calc(100vw - 620px), 720px);
      width:var(--arena); height:var(--arena);
      border:1px solid rgba(255,255,255,.06);
      border-radius:18px;
      background:#121214;
      box-shadow:0 12px 40px -16px rgba(0,0,0,.8), inset 0 0 80px -40px rgba(233,32,56,.18);
      display:flex; align-items:center; justify-content:center;
      overflow:hidden; flex:0 0 auto;
    }
    #rxCanvas{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; border-radius:18px; z-index:2}
    /* ── THREE.JS "YAŞAYAN DÜNYA" KATMANI ── */
    #rxCanvas3d{position:absolute; inset:0; width:100%; height:100%; display:block; border-radius:18px; z-index:1; pointer-events:none; opacity:0; transition:opacity .8s ease}
    #rxCanvas3d.on{opacity:1}
    /* ── ZEN MODU ── */
    #rxZenAura{
      position:absolute; z-index:3;
      pointer-events:none; border-radius:24px;
      opacity:0; transition:opacity .5s ease;
      background:radial-gradient(ellipse at 50% 50%,
        rgba(var(--zenrgb,90,209,255),.55) 0%,
        rgba(var(--zenrgb,90,209,255),.32) 45%,
        rgba(var(--zenrgb,90,209,255),0) 72%);
      filter:blur(26px);
      will-change:opacity, transform;
    }
    #rxZenAura.on{ opacity:1; animation:rxZenBreath 5s ease-in-out infinite; }
    @keyframes rxZenBreath{
      0%,100%{ transform:scale(1.18); opacity:.6; }
      50%    { transform:scale(1.55); opacity:1; }
    }
    #rxZenAura.rainbow{
      background:radial-gradient(ellipse at 50% 50%,
        rgba(255,80,140,.75) 0%, rgba(120,120,255,.5) 40%, rgba(120,120,255,0) 72%);
      animation:rxZenBreath 3s ease-in-out infinite, rxZenRainbow 4s linear infinite;
    }
    @keyframes rxZenRainbow{
      0%  { filter:blur(24px) hue-rotate(0deg)   saturate(1.5) brightness(1.2); }
      100%{ filter:blur(24px) hue-rotate(360deg) saturate(1.5) brightness(1.2); }
    }
    #rxArena.arena-fail{ animation:arenaFail .6s ease-out, rxShake .32s cubic-bezier(.36,.07,.19,.97); }
    @keyframes arenaFail{
      0%   { border-color:var(--red); box-shadow:0 0 0 2px var(--red), 0 0 40px rgba(233,32,56,.7), inset 0 0 60px rgba(233,32,56,.4); }
      100% { border-color:rgba(255,255,255,.06); box-shadow:0 12px 40px -16px rgba(0,0,0,.8), inset 0 0 80px -40px rgba(233,32,56,.18); }
    }
    @keyframes rxShake{
      0%,100%{ transform:translate(0,0); }
      15%{ transform:translate(-4px,2px); }
      30%{ transform:translate(4px,-2px); }
      45%{ transform:translate(-3px,-2px); }
      60%{ transform:translate(3px,2px); }
      75%{ transform:translate(-2px,1px); }
      90%{ transform:translate(2px,-1px); }
    }

    /* ── BÖLÜM RAIL ── */
    /* ── SAĞ PANEL ── */
    #rxLevelRail{
      flex:0 0 auto; align-self:center;
      width:clamp(208px,18vw,264px); height:var(--arena,560px);
      display:flex; flex-direction:column; gap:.65rem;
      background:linear-gradient(180deg,#15151a,#0f0f12); border:1px solid rgba(255,255,255,.08); border-radius:18px;
      padding:.85rem .7rem; box-shadow:0 16px 50px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.02) inset;
    }
    /* ── ÜST ── */
    .rail-now{ position:relative; display:flex; flex-direction:column; gap:.55rem;
               padding:.95rem .9rem; border-radius:15px; overflow:hidden;
               background:linear-gradient(155deg,rgba(233,32,56,.2),rgba(233,32,56,.05) 70%,rgba(233,32,56,.02));
               border:1px solid rgba(233,32,56,.36); box-shadow:0 0 26px -10px rgba(233,32,56,.55) inset; }
    .rail-now-main{ display:flex; flex-direction:column; gap:.4rem; min-width:0; }
    .rail-now-eyebrow{ display:inline-flex; align-items:center; gap:.45em; align-self:flex-start;
                       font-family:var(--pp); font-weight:700; font-size:.42rem; letter-spacing:.26em; text-transform:uppercase;
                       color:#ff8493; line-height:1;
                       background:rgba(233,32,56,.16); border:1px solid rgba(233,32,56,.32);
                       padding:.3rem .6rem; border-radius:999px; }
    .rail-now-eyebrow i{ font-size:.95em; animation:nowPulse 1.6s ease-in-out infinite; }
    @keyframes nowPulse{ 0%,100%{opacity:.5} 50%{opacity:1} }
    .rail-now-chapter{ font-family:var(--pp); font-weight:700; font-size:.92rem; letter-spacing:.01em; text-transform:uppercase;
                       color:#fff; line-height:1.1; text-shadow:0 0 14px rgba(233,32,56,.45);
                       white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .rail-now-lvl{ display:inline-flex; align-items:baseline; gap:.3em; align-self:flex-start;
                   font-family:var(--pp); font-weight:600; font-size:.5rem; letter-spacing:.08em; text-transform:uppercase;
                   color:rgba(255,255,255,.7); line-height:1;
                   background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
                   padding:.3rem .6rem; border-radius:8px; }
    .rail-now-lvl b{ font-size:.78rem; font-weight:700; color:#fff; }

    /* ── CHAPTER GEZGİNİ ── */
    .rail-chapter-head{ display:flex; flex-direction:column; gap:.45rem; }
    .rch-browse{ display:flex; align-items:stretch; gap:.4rem; height:64px; flex:0 0 auto;
                 background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:.35rem;
                 transition:background .2s, border-color .2s; }
    .rch-browse.here{ background:linear-gradient(150deg,rgba(52,201,138,.14),rgba(52,201,138,.04));
                      border-color:rgba(52,201,138,.4); }
    .rch-browse.here .rch-view-name{ color:#cfeede; text-shadow:0 0 12px rgba(52,201,138,.45); }
    .rch-browse.here .rch-view-top .rch-vno{ color:var(--pgrn2); }
    .rch-nav{ flex:0 0 auto; width:32px; display:flex; align-items:center; justify-content:center;
              background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:9px;
              color:#fff; cursor:pointer; font-size:.7rem; transition:all .15s; }
    .rch-nav:hover:not(:disabled){ background:var(--red); border-color:var(--red); }
    .rch-nav:disabled{ opacity:.22; cursor:not-allowed; }
    .rch-view{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.22rem; text-align:center; cursor:default; overflow:hidden; }
    .rch-view-top{ display:inline-flex; align-items:center; gap:.4em; font-family:var(--pp); font-weight:700;
                   font-size:.44rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); }
    .rch-view-top .rch-vno{ color:#ffd36b; }
    .rch-view-name{ font-family:var(--pp); font-weight:700; font-size:.86rem; letter-spacing:.02em; text-transform:uppercase; color:#fff; line-height:1;
                    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
    .rch-view-badge{ font-family:var(--pp); font-weight:600; font-size:.42rem; letter-spacing:.04em; display:inline-flex; align-items:center; gap:.3em; min-height:.5rem; line-height:.5rem; }
    .rch-view-badge.lock{ color:#ff8493; }
    .rch-view-badge.done{ color:var(--pgrn2); }

    /* ── BÖLÜM IZGARASI ── */
    .rail-grid{ flex:1; min-height:0; overflow-y:auto; display:grid; grid-template-columns:repeat(5,1fr); gap:5px;
                align-content:start; padding:.15rem .05rem; scrollbar-width:thin; }
    .rail-grid::-webkit-scrollbar{ width:5px; } .rail-grid::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:3px; }
    .rl-cell{ position:relative; aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center;
              gap:2px; background:#1c1c20; border:1px solid rgba(255,255,255,.09); border-radius:8px;
              color:#fff; cursor:pointer; padding:.05rem;
              transition:transform .12s, border-color .12s, background .12s; }
    .rl-no{ font-family:var(--pp); font-weight:700; font-size:.66rem; line-height:1; }
    .rl-cell:hover:not(.locked){ transform:scale(1.1); border-color:var(--red); background:#26262b; z-index:3; }
    .rl-cell.current{ border-color:var(--red); background:rgba(233,32,56,.2); box-shadow:0 0 0 1px var(--red), 0 0 14px -4px rgba(233,32,56,.7); }
    .rl-cell.done{ border-color:rgba(255,176,46,.42); }
    .rl-cell.locked{ opacity:.45; cursor:not-allowed; }
    .rl-cell.locked .rl-no{ color:rgba(255,255,255,.35); }
    .rl-cell.locked::after{ content:'\f023'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:.42rem;
                            position:absolute; top:2px; right:3px; color:rgba(255,255,255,.45); }
    /* YILDIZLAR */
    .rl-stars{ display:flex; justify-content:center; gap:2px; min-height:4px; }
    .rl-stars i{ width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.18); }
    .rl-stars i.on{ background:var(--amb); box-shadow:0 0 5px rgba(255,176,46,.7); }
    .rl-gate{ position:absolute; bottom:1px; left:50%; transform:translateX(-50%);
              display:flex; align-items:center; gap:1px; font-family:var(--pp); font-weight:700; font-size:.42rem; color:var(--red); }
    .rl-gate .fa-star{ font-size:.38rem; }
    .rl-ch{ font-family:var(--pp); font-weight:600; font-size:.34rem; letter-spacing:.06em; color:rgba(255,255,255,.38); line-height:1; }
    .rl-cell.current .rl-ch{ color:rgba(255,255,255,.65); }
    .rl-cell.boss{ background:linear-gradient(160deg,#2a0c12,#1a0a0d); border-color:rgba(233,32,56,.55); }
    .rl-cell.boss .rl-no{ color:#ff5a6e; }
    .rl-cell.boss .rl-ch{ color:rgba(255,90,110,.55); }
    .rl-cell.boss:not(.locked){ box-shadow:0 0 0 1px rgba(233,32,56,.3), 0 0 14px -4px rgba(233,32,56,.6); }
    .rl-cell.boss.done{ border-color:rgba(255,176,46,.6); }
    .rl-cell.boss:hover:not(.locked){ border-color:#ff5a6e; background:linear-gradient(160deg,#3a0e16,#220b10); }
    .rail-chapter-prog{ display:flex; align-items:center; gap:.5rem; padding:.6rem .15rem 0;
                        border-top:1px solid rgba(255,255,255,.08); }
    .rcp-bar{ flex:1; height:6px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; }
    .rcp-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--amb),#ffd36b); border-radius:99px; transition:width .35s; }
    .rcp-txt{ font-family:var(--pp); font-weight:600; font-size:.46rem; letter-spacing:.04em; color:rgba(255,255,255,.55); white-space:nowrap; }
    .rail-mtoggle{ display:none; }

    /* ── MOBİL ── */
    @media (max-width:1000px){

      #rxLevelRail{ width:min(96vw,560px); height:auto; max-height:none;
                    align-self:center; gap:.5rem; padding:.5rem .55rem; }
      .rail-now{ flex-direction:row; align-items:center; justify-content:space-between;
                 gap:.6rem; padding:.55rem .7rem; }
      .rail-now-main{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:.35rem .55rem; min-width:0; }
      .rail-now-eyebrow{ display:none; }
      .rail-now-chapter{ font-size:.78rem; max-width:48vw; }
      .rail-now-lvl{ font-size:.46rem; }

      .rail-mtoggle{ display:inline-flex; align-items:center; gap:.4rem; flex:0 0 auto;
                     font-family:var(--pp); font-weight:700; font-size:.6rem; letter-spacing:.04em; text-transform:uppercase;
                     color:#fff; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
                     border-radius:999px; padding:.45rem .8rem; cursor:pointer; white-space:nowrap;
                     transition:background .15s, border-color .15s; }
      .rail-mtoggle:hover{ background:rgba(233,32,56,.2); border-color:rgba(233,32,56,.5); }
      .rail-mtoggle-caret{ font-size:.55em; transition:transform .25s; }

      .rail-chapter-head, .rail-grid, .rail-chapter-prog{ display:none; }

      #rxLevelRail.expanded .rail-chapter-head{ display:flex; }
      #rxLevelRail.expanded .rail-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr));
                                        max-height:34vh; overflow-y:auto; }
      #rxLevelRail.expanded .rail-chapter-prog{ display:flex; }
      #rxLevelRail.expanded .rail-mtoggle-caret{ transform:rotate(180deg); }

      .rch-view-name{ font-size:.9rem; }
      .rl-gate{ font-size:.42rem; }
    }
    @media (max-width:480px){
      .rail-now-chapter{ font-size:.72rem; max-width:42vw; }
      .rail-mtoggle span{ display:none; }
      .rail-mtoggle{ padding:.45rem .6rem; }
    }

    /* ── BÖLÜM ADI ── */
    #rxBanner{
      position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
      z-index:20; display:flex; flex-direction:column; align-items:center; gap:.3rem;
      pointer-events:none; text-align:center; width:auto; max-width:88%;
    }
    .rx-prompt{
      font-family:var(--sf); font-size:clamp(1.4rem,3vw,2.1rem); letter-spacing:.04em;
      text-transform:uppercase; color:rgba(255,255,255,.92); line-height:1;
      text-shadow:0 2px 18px rgba(0,0,0,.8);
    }
    .rx-sub{ font-family:var(--pp); font-size:.62rem; font-weight:500; letter-spacing:.08em; color:rgba(255,255,255,.78);
      background:rgba(12,12,14,.7); border:1px solid rgba(255,255,255,.1); border-radius:999px; padding:.4rem .9rem;
      backdrop-filter:blur(6px); text-shadow:0 1px 4px rgba(0,0,0,.8); }
    .rx-sub:empty{ display:none }

    #rxTypeWrap{
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
      z-index:25; width:92%; display:none; flex-direction:column; align-items:center; gap:1.6rem;
    }
    #rxTypeTarget{
      font-family:var(--sf); font-size:clamp(2.2rem,7vw,4rem); letter-spacing:.05em;
      color:#fff; text-align:center; line-height:1.15; text-shadow:0 4px 24px rgba(0,0,0,.7);
    }
    #rxTypeTarget .ok{color:var(--grn)} #rxTypeTarget .bad{color:var(--red); text-decoration:line-through}
    #rxTypeTarget .cur{border-bottom:4px solid var(--red); animation:curBlink .8s steps(2,start) infinite}
    @keyframes curBlink{50%{border-color:transparent}}
    #rxTypeInput{
      width:100%; max-width:560px; background:rgba(0,0,0,.55); border:2px solid rgba(255,255,255,.18);
      color:#fff; font-family:var(--pp); font-size:1.6rem; padding:1rem 1.4rem; border-radius:14px;
      text-align:center; letter-spacing:.08em; outline:none;
    }
    #rxTypeInput:focus{border-color:var(--red); box-shadow:0 0 0 3px rgba(233,32,56,.18)}

    #rxMeter{
      position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
      z-index:20; width:70%; max-width:340px; height:8px;
      background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; display:none;
    }
    #rxMeterFill{ height:100%; width:0%; background:linear-gradient(90deg,var(--red),var(--red2)); transition:width .12s linear }

    /* ── GENEL KALKAN ── */
    #rxCard:not(.show), #rxPassFx:not(.show), #rxChapterClear:not(.show),
    #rxFlash:not(.pass):not(.fail), #rxPassBackdrop:not(.show){
      pointer-events:none !important; visibility:hidden !important;
    }
    #rxFlash{ position:absolute; inset:0; z-index:30; opacity:0; pointer-events:none; mix-blend-mode:screen; transition:opacity .4s }
    #rxFlash.pass{background:radial-gradient(circle, rgba(52,201,138,.5), transparent 70%); opacity:1}
    #rxFlash.fail{background:radial-gradient(circle, rgba(233,32,56,.55), transparent 70%); opacity:1}

    #rxScoreFx{ position:absolute; z-index:32; pointer-events:none; font-family:var(--sf);
      font-size:2.2rem; color:var(--grn); opacity:0; left:50%; top:42%; transform:translate(-50%,-50%);
      text-shadow:0 2px 16px rgba(0,0,0,.7); }
    #rxScoreFx.show{ animation:scorePop 1s ease-out forwards }
    @keyframes scorePop{ 0%{opacity:0;transform:translate(-50%,-30%) scale(.6)} 25%{opacity:1;transform:translate(-50%,-50%) scale(1.1)} 100%{opacity:0;transform:translate(-50%,-80%) scale(1)} }

    /* COMBO göstergesi */
    #rxComboFx{ position:absolute; z-index:33; pointer-events:none; left:50%; top:24%; transform:translate(-50%,-50%);
      opacity:0; display:flex; flex-direction:column; align-items:center; gap:.1rem; }
    #rxComboFx .cb-x{ font-family:var(--sf); font-weight:700; font-size:3rem; line-height:1;
      color:#ffb02e; text-shadow:0 0 24px rgba(255,176,46,.8), 0 2px 12px rgba(0,0,0,.6); }
    #rxComboFx .cb-lbl{ font-family:var(--pp); font-size:.5rem; letter-spacing:.4em; text-transform:uppercase; color:rgba(255,255,255,.7) }
    #rxComboFx.show{ animation:comboPop 1.1s cubic-bezier(.2,1.3,.4,1) forwards }
    @keyframes comboPop{ 0%{opacity:0;transform:translate(-50%,-30%) scale(.4) rotate(-6deg)} 30%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(2deg)} 70%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-65%) scale(1)} }

    /* ── PASS KARTI overlay ── */
    #rxPassBackdrop{
      position:absolute; inset:0; z-index:33; pointer-events:none; opacity:0;
      background:radial-gradient(ellipse at center, rgba(10,18,15,.55) 0%, rgba(3,5,5,.88) 78%);
      backdrop-filter:blur(8px) saturate(.9); -webkit-backdrop-filter:blur(8px) saturate(.9);
      transition:opacity .35s ease;
    }
    #rxPassBackdrop.show{ opacity:1; animation:pbFade 3s ease forwards; }
    @keyframes pbFade{ 0%{opacity:0} 8%{opacity:1} 88%{opacity:1} 100%{opacity:0} }
    #rxPassFx{
      position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
      z-index:34; pointer-events:none; text-align:center; opacity:0; visibility:hidden;
    }
    #rxPassFx:not(.show){ visibility:hidden !important; pointer-events:none !important; }
    #rxPassFx.show{ pointer-events:auto; opacity:1; visibility:visible; }
    .rxpf-card{
      position:relative; display:flex; flex-direction:column; align-items:center; gap:.5rem;
      padding:1.5rem 2.7rem 1.6rem; border-radius:22px; min-width:248px;
      background:linear-gradient(165deg, rgba(17,26,22,.97), rgba(9,13,12,.98));
      border:1px solid rgba(52,201,138,.40);
      box-shadow:0 28px 80px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04) inset,
                 0 0 70px -22px rgba(52,201,138,.55);
    }
    .rxpf-card::before{
      content:''; position:absolute; left:50%; top:-1px; width:62%; height:2px; transform:translateX(-50%);
      background:linear-gradient(90deg,transparent,rgba(95,224,170,.9),transparent);
      filter:blur(.5px);
    }
    .rxpf-head{ display:flex; align-items:center; gap:.45rem; font-family:var(--pp); font-weight:600;
      font-size:.52rem; letter-spacing:.32em; text-transform:uppercase; color:var(--pgrn2);
      opacity:0; transform:translateY(-6px); }
    .rxpf-head i{ font-size:.62rem; }
    #rxPassFx.show .rxpf-head{ animation:pfHeadIn .4s ease .05s forwards; }
    @keyframes pfHeadIn{ to{opacity:1;transform:translateY(0)} }
    .rxpf-div{ width:54%; height:1px; background:linear-gradient(90deg,transparent,rgba(52,201,138,.5),transparent); margin:.15rem 0 .1rem; }
    #rxPassFx.show{ animation:passPopIn .5s cubic-bezier(.2,1.4,.3,1) forwards }
    @keyframes passPopIn{ 0%{opacity:0;transform:translate(-50%,-42%) scale(.7)} 70%{opacity:1;transform:translate(-50%,-50%) scale(1.05)} 100%{opacity:1;transform:translate(-50%,-50%) scale(1)} }
    /* PASS KARTI BUTONLARI */
    .rxpf-btns{ display:flex; gap:.6rem; margin-top:.7rem; opacity:0; transform:translateY(8px); }
    #rxPassFx.show .rxpf-btns{ animation:pfMetaIn .4s ease 1.5s forwards; }
    .rxpf-btn{ display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; pointer-events:auto;
      font-family:var(--pp); font-weight:600; font-size:.56rem; letter-spacing:.08em; text-transform:uppercase;
      border-radius:11px; padding:.62rem 1.1rem; border:1px solid transparent; transition:transform .12s, box-shadow .2s, background .2s; }
    .rxpf-btn i{ font-size:.66rem; }
    .rxpf-btn:active{ transform:scale(.94); }
    .rxpf-btn.replay{ color:rgba(255,255,255,.82); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); }
    .rxpf-btn.replay:hover{ background:rgba(255,255,255,.12); }
    .rxpf-btn.next{ color:#06140d; background:linear-gradient(95deg,#5fe0aa,#34c98a); border-color:rgba(95,224,170,.5);
      box-shadow:0 8px 26px -8px rgba(52,201,138,.7); position:relative; overflow:hidden; }
    .rxpf-btn.next:hover{ box-shadow:0 10px 32px -8px rgba(52,201,138,.9); }
    /* ── NETFLIX TARZI AUTO-ADVANCE ── */
    .rxpf-btn.next .rxpf-auto{ position:absolute; left:0; bottom:0; top:0; width:0%;
      background:rgba(255,255,255,.30); pointer-events:none; z-index:0;
      transition:width .1s linear; }
    .rxpf-btn.next.counting .rxpf-auto{ box-shadow:0 0 12px rgba(255,255,255,.4) inset; }
    .rxpf-btn.next > i, .rxpf-btn.next > .rxpf-next-lbl{ position:relative; z-index:1; }
    .rxpf-match{ font-family:var(--sf); font-size:3.4rem; line-height:1; color:var(--pgrn2);
      text-shadow:0 0 26px rgba(52,201,138,.55), 0 2px 8px rgba(0,0,0,.4) }
    .rxpf-match .pct{ font-size:1.5rem; opacity:.85 }
    .rxpf-lbl{ font-family:var(--pp); font-size:.5rem; letter-spacing:.4em; text-transform:uppercase; color:rgba(255,255,255,.55) }
    .rxpf-score{ font-family:var(--sf); font-size:1.9rem; color:#eafff5; line-height:1;
      background:rgba(52,201,138,.13); border:1px solid rgba(52,201,138,.45); padding:.3rem 1.1rem; border-radius:9px;
      opacity:0; transform:scale(.6); }
    .rxpf-score::before{ content:'+'; opacity:.7; }
    #rxPassFx.show .rxpf-score{ animation:pfScorePop .45s cubic-bezier(.2,1.5,.3,1) .25s forwards }
    @keyframes pfScorePop{ 0%{opacity:0;transform:scale(.5)} 60%{opacity:1;transform:scale(1.15)} 100%{opacity:1;transform:scale(1)} }
    .rxpf-meta{ display:flex; gap:.55rem; opacity:0; transform:translateY(6px); margin-top:.1rem; }
    #rxPassFx.show .rxpf-meta{ animation:pfMetaIn .4s ease .5s forwards; }
    @keyframes pfMetaIn{ to{opacity:1;transform:translateY(0)} }
    .rxpf-pill{ display:inline-flex; align-items:center; gap:.32rem; font-family:var(--pp); font-weight:600;
      font-size:.48rem; letter-spacing:.06em; color:rgba(255,255,255,.78);
      background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:.28rem .65rem; }
    .rxpf-pill i{ font-size:.52rem; }
    .rxpf-pill.total i{ color:var(--pgrn2); }
    .rxpf-pill.combo{ color:#ffd27a; border-color:rgba(255,176,46,.32); background:rgba(255,176,46,.08); }
    .rxpf-pill.combo i{ color:var(--amb); }
    .rxpf-pill b{ font-family:var(--sf); font-size:.78rem; line-height:1; }
    /* YENİ REKOR rozeti */
    .rxpf-newbest{ display:none; font-family:var(--pp); font-size:.5rem; letter-spacing:.3em; text-transform:uppercase;
                   color:#0a0a0a; background:var(--amb); border-radius:999px; padding:.3rem .8rem;
                   box-shadow:0 0 20px rgba(255,176,46,.7); animation:nbPulse 1s ease-in-out infinite; }
    @keyframes nbPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
    /* ── PASS YILDIZLARI ── */
    .rxpf-stars{ display:flex; gap:.7rem; margin-top:.3rem; }
    .rxpf-stars .pf-star{ font-size:2.4rem; color:rgba(255,255,255,.13); transform:scale(.9); opacity:1;
      filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
    #rxPassFx.show .pf-star.on{ animation:pfStarBam .55s cubic-bezier(.2,2,.3,1) forwards; }
    @keyframes pfStarBam{
      0%{transform:scale(.9) rotate(-25deg); color:rgba(255,255,255,.13); text-shadow:none}
      40%{transform:scale(1.7) rotate(10deg); color:#ffe07a; text-shadow:0 0 30px rgba(255,176,46,1)}
      70%{transform:scale(.95) rotate(-4deg)}
      100%{transform:scale(1.18) rotate(0); color:var(--amb); text-shadow:0 0 18px rgba(255,176,46,.85)}
    }
    .rxpf-perfect{ display:none; font-family:var(--pp); font-weight:600; font-size:.46rem; letter-spacing:.3em;
      text-transform:uppercase; color:#0a0a0a; background:linear-gradient(90deg,#ffd36b,var(--amb));
      border-radius:999px; padding:.26rem .8rem; box-shadow:0 0 18px rgba(255,176,46,.6); margin-top:.15rem; }

    /* ── CHAPTER TAMAMLAMA KARTI ── */
    #rxChapterClear{
      position:absolute; inset:0; z-index:48; display:flex; align-items:center; justify-content:center;
      opacity:0; visibility:hidden; pointer-events:none; cursor:pointer;
      background:radial-gradient(ellipse at center, rgba(20,16,4,.7) 0%, rgba(2,2,2,.92) 75%);
      backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); transition:opacity .4s;
    }
    #rxChapterClear:not(.show){ visibility:hidden !important; pointer-events:none !important; }
    #rxChapterClear.show{ opacity:1; visibility:visible; pointer-events:auto; }
    .rxcc-inner{
      position:relative; display:flex; flex-direction:column; align-items:center; gap:.5rem;
      padding:2.6rem 3rem 2rem; border-radius:26px; text-align:center;
      background:linear-gradient(165deg, rgba(30,22,6,.97), rgba(10,8,4,.98));
      border:1px solid rgba(255,176,46,.5);
      box-shadow:0 34px 100px -22px rgba(0,0,0,.9), 0 0 80px -20px rgba(255,176,46,.5), 0 0 0 1px rgba(255,255,255,.05) inset;
      transform:scale(.8); transition:transform .5s cubic-bezier(.2,1.4,.3,1);
    }
    #rxChapterClear.show .rxcc-inner{ transform:scale(1); }
    .rxcc-trophy{ font-size:3.2rem; color:var(--amb); text-shadow:0 0 36px rgba(255,176,46,.9);
                  animation:ccTrophy 1.6s ease-in-out infinite; }
    @keyframes ccTrophy{ 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-6px) rotate(3deg)} }
    .rxcc-badge{ font-family:var(--pp); font-size:.52rem; letter-spacing:.4em; text-transform:uppercase;
                 color:#0a0a0a; background:linear-gradient(90deg,#ffd36b,var(--amb)); padding:.32rem 1rem; border-radius:999px;
                 box-shadow:0 0 24px rgba(255,176,46,.7); }
    .rxcc-no{ font-family:var(--pp); font-weight:600; font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:.3rem; }
    .rxcc-name{ font-family:var(--pp); font-weight:700; font-size:1.8rem; line-height:1.05; letter-spacing:.02em; text-transform:uppercase; color:#fff;
                text-shadow:0 0 30px rgba(255,176,46,.5); }
    .rxcc-stars{ font-family:var(--pp); font-size:1.4rem; color:var(--amb); margin-top:.3rem; }
    .rxcc-stars .fa-star{ font-size:1.1rem; }
    .rxcc-msg{ font-family:var(--pp); font-size:.78rem; letter-spacing:.04em; color:rgba(255,255,255,.78); line-height:1.5;
               margin-top:.4rem; max-width:340px; }
    .rxcc-msg b{ color:var(--grn); }
    .rxcc-hint{ font-family:var(--pp); font-size:.55rem; letter-spacing:.2em; text-transform:uppercase;
                color:rgba(255,255,255,.4); margin-top:.7rem; animation:ccHint 1.4s ease-in-out infinite; }
    @keyframes ccHint{ 0%,100%{opacity:.4} 50%{opacity:.9} }
    .rxcc-btn{ margin-top:1.2rem; font-family:var(--pp); font-weight:700; font-size:.72rem; letter-spacing:.12em;
               text-transform:uppercase; color:#0a0a0a; cursor:pointer; border:none;
               padding:.85rem 1.8rem; border-radius:999px;
               background:linear-gradient(90deg,#ffd36b,var(--amb));
               box-shadow:0 8px 28px -6px rgba(255,176,46,.7), 0 0 0 1px rgba(255,255,255,.15) inset;
               transition:transform .18s, box-shadow .25s; animation:ccBtnPulse 1.8s ease-in-out infinite; }
    .rxcc-btn:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 12px 36px -6px rgba(255,176,46,.9); }
    .rxcc-btn:active{ transform:translateY(0) scale(.98); }
    .rxcc-btn i{ margin-right:.4em; }
    @keyframes ccBtnPulse{ 0%,100%{ box-shadow:0 8px 28px -6px rgba(255,176,46,.7), 0 0 0 1px rgba(255,255,255,.15) inset; }
                           50%{ box-shadow:0 8px 38px -2px rgba(255,176,46,1), 0 0 0 1px rgba(255,255,255,.25) inset; } }

    /* HUD yıldız barı + ikonları */
    .rxs-prog.star > i{ background:linear-gradient(90deg,#ffd36b,var(--amb)); box-shadow:0 0 10px rgba(255,176,46,.6); }
    .rxs-lives.stars{ display:flex; gap:.4rem; font-size:1.05rem; }
    .rxs-lives.stars .fa-star{ color:rgba(255,255,255,.16); }
    .rxs-lives.stars .fa-star.on{ color:var(--amb); text-shadow:0 0 10px rgba(255,176,46,.6); }

    /* ── HUD ── */
    /* ── HUD ── */
    #rxHud{
      position:fixed; bottom:0; left:0; right:0; height:var(--hud); z-index:9100;
      display:grid; grid-template-columns:auto 1fr auto; align-items:stretch;
      padding:0;
      background:rgba(8,8,8,.98);
      border-top:1px solid rgba(154,154,154,.07);
      box-shadow:none;
    }
    .hud-center{ display:flex; align-items:center; justify-content:center; overflow:hidden }
    .hud-actions{
      display:flex; align-items:center; gap:.5rem;
      padding-left:clamp(.5rem,1.4vw,1.2rem); padding-right:var(--inlab-edge-pad, clamp(1.1rem,3vw,2rem));
      border-left:1px solid rgba(255,255,255,.07);
    }
    .hud-btn{
      appearance:none; border:1px solid rgba(255,255,255,.12); background:rgba(20,20,22,.92); color:#fff;
      font-family:var(--pp); cursor:pointer; border-radius:10px; transition:background .2s, border-color .2s, color .2s;
      display:inline-flex; align-items:center; justify-content:center; gap:0;
      width:38px; height:38px; min-width:38px; padding:0;
    }
    .hud-btn .lbl{ display:none; }
    .hud-btn i{ font-size:14px; }
    .hud-btn:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25) }
    .hud-btn.primary{ background:var(--red); border-color:var(--red) }
    .hud-btn.primary:hover{ background:var(--red2); border-color:var(--red2) }
    .hud-btn.icon-only{ padding:0; }
    .hud-btn.is-disabled{ opacity:.32; cursor:default; pointer-events:none; filter:grayscale(.4) }

    /* ── HUD canlı istatistik şeridi ── */
    .hud-stats{ display:flex; align-items:center; gap:clamp(.6rem,2vw,1.6rem); }
    .hud-stat{ display:inline-flex; align-items:baseline; gap:.32rem; position:relative; }
    .hud-stat > i{ font-size:.8rem; align-self:center; opacity:.85 }
    .hud-stat--combo > i{ color:#ff7a3d }
    .hud-stat--zone > i{ color:#3ad6ff }
    .hud-stat--score > i{ color:var(--amb,#ffb02e) }
    .hud-stat--time > i{ color:#5ad1ff }
    .hud-stat--stars > i{ color:var(--amb,#ffb02e) }
    .hud-stat--type b{ font-size:.92rem; letter-spacing:.04em }
    .hud-stat b{ font-family:var(--sf,sans-serif); font-size:1.15rem; color:#fff; line-height:1; font-weight:700;
      font-variant-numeric:tabular-nums; transition:transform .15s }
    .hud-stat b.bump{ transform:scale(1.25); color:#ffd23d }
    .hud-stat--combo.live > i{ color:#ff5a2b; animation:hudFire .9s ease-in-out infinite }
    .hud-stat--combo.live b{ color:#ffb02e }
    @keyframes hudFire{ 0%,100%{transform:scale(1);opacity:.85} 50%{transform:scale(1.18);opacity:1} }
    .hud-stat em{ font-style:normal; font-size:.7rem; color:rgba(255,255,255,.4); }
    .hud-stat-lbl{ font-family:var(--pp,sans-serif); font-size:.42rem; letter-spacing:.22em; text-transform:uppercase;
      color:rgba(255,255,255,.4); margin-left:.25rem; align-self:center; }
    .hud-stat-div{ width:1px; height:18px; background:rgba(255,255,255,.12); }
    @media (max-width:1100px){ .hud-stat-lbl{ display:none } .hud-stats{ gap:.85rem } .hud-stat b{ font-size:1.02rem } }
    @media (max-width:920px){ .hud-stat--time, .hud-stat--time + .hud-stat-div{ display:none } }
    @media (max-width:780px){ .hud-stat--stars, .hud-stat--stars + .hud-stat-div, .hud-stat--type, .hud-stat--type + .hud-stat-div{ display:none } }
    @media (max-width:600px){ .hud-stat--zone, .hud-stat--zone + .hud-stat-div, .hud-stat--score, .hud-stat--score + .hud-stat-div{ display:none } .hud-stats{ gap:.6rem } }
    @media (max-width:430px){ .hud-stat b{ font-size:.95rem } }

    @keyframes rxpFade{ from{opacity:0} to{opacity:1} }
    @keyframes rxpRise{ from{transform:translateY(18px) scale(.96);opacity:0} to{transform:none;opacity:1} }
    #btnMute{ position:relative }
    #rxVolPop{ position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(6px);
      background:#16161a; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.7rem .8rem;
      display:flex; flex-direction:column; align-items:center; gap:.4rem; width:130px;
      box-shadow:0 14px 40px rgba(0,0,0,.55); opacity:0; visibility:hidden; transition:all .18s; z-index:60; pointer-events:none }
    #btnMute:hover #rxVolPop, #btnMute:focus-within #rxVolPop{ opacity:1; visibility:visible; transform:translateX(-50%); pointer-events:auto }
    #rxVolPop::after{ content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
      border:6px solid transparent; border-top-color:#16161a }
    .rxvol-track{ position:relative; width:100%; height:5px; border-radius:3px; background:rgba(255,255,255,.14) }
    #rxVolFill{ position:absolute; left:0; top:0; height:100%; border-radius:3px; background:var(--grn,#27e08a); width:85% }
    #rxVolSlider{ -webkit-appearance:none; appearance:none; width:100%; height:18px; background:transparent; cursor:pointer; margin:0 }
    #rxVolSlider::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid var(--grn,#27e08a); cursor:pointer }
    #rxVolSlider::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid var(--grn,#27e08a); cursor:pointer }
    .rxvol-lbl{ font-family:var(--pp,sans-serif); font-size:.55rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5) }

    /* ── SKOR PAYLAŞ OVERLAY ── */
    #rxShare{ position:fixed; inset:0; z-index:9600; display:none; align-items:center; justify-content:center;
      background:rgba(4,4,6,.85); backdrop-filter:blur(8px); }
    #rxShare.show{ display:flex; animation:rxpFade .25s ease }
    .rxsh-card{ position:relative; background:linear-gradient(160deg,#1a1a1d,#121214); border:1px solid rgba(255,255,255,.1);
      border-radius:20px; padding:2rem 2rem 1.8rem; text-align:center; max-width:94vw; width:420px;
      max-height:92vh; overflow-y:auto;
      box-shadow:0 30px 80px -20px rgba(0,0,0,.8); animation:rxpRise .35s cubic-bezier(.2,1,.3,1); }
    .rxsh-cardimg-wrap{ margin:0 auto 1rem; width:100%; max-width:300px; border-radius:14px; overflow:hidden;
      box-shadow:0 14px 40px -12px rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.08); }
    .rxsh-cardimg-wrap canvas{ display:block; width:100%; height:auto; }
    .rxsh-close{ position:absolute; top:.8rem; right:.8rem; width:32px; height:32px; border-radius:50%;
      background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#fff; cursor:pointer; transition:all .18s }
    .rxsh-close:hover{ background:rgba(255,255,255,.14) }
    .rxsh-icon{ font-size:2.2rem; color:#5ad1ff; margin-bottom:.7rem; filter:drop-shadow(0 0 16px rgba(90,209,255,.5)) }
    .rxsh-title{ font-family:var(--sf,sans-serif); font-size:1.5rem; letter-spacing:.1em; color:#fff; margin-bottom:.9rem }
    .rxsh-preview{ font-family:var(--pp,sans-serif); font-size:.82rem; color:rgba(255,255,255,.7); line-height:1.5;
      background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:.9rem 1rem; margin-bottom:1.4rem }
    .rxsh-btns{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem }
    .rxsh-btn{ appearance:none; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#fff;
      font-family:var(--pp,sans-serif); font-size:.68rem; font-weight:500; padding:.8rem .7rem; cursor:pointer; border-radius:10px;
      display:inline-flex; align-items:center; justify-content:center; gap:.45rem; transition:all .18s }
    .rxsh-btn:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.3) }
    .rxsh-btn.wa:hover{ background:rgba(37,211,102,.18); border-color:#25d366 }
    .rxsh-btn.dl{ background:rgba(233,32,56,.12); border-color:rgba(233,32,56,.45); font-weight:600 }
    .rxsh-btn.dl:hover{ background:rgba(233,32,56,.24); border-color:var(--red,var(--in-accent, #e92038)) }
    .rxsh-btn.cp{ grid-column:1 / -1; background:rgba(90,209,255,.1); border-color:rgba(90,209,255,.4) }
    .rxsh-btn.cp:hover{ background:rgba(90,209,255,.2) }
    .rxsh-btn.nv{ grid-column:1 / -1; background:var(--red,var(--in-accent, #e92038)); border-color:var(--red,var(--in-accent, #e92038)); font-weight:600 }
    .rxsh-btn.nv:hover{ filter:brightness(1.1) }

    /* ── STATUS ── */
    #rxStatus{
      flex:0 0 auto; z-index:21; align-self:center; position:relative;
      width:clamp(240px, 24vw, 300px);
      height:var(--arena, 560px);
    }
    .rxs-grid{
      display:grid; grid-template-columns:1fr 1fr; gap:12px; height:100%;
      grid-template-rows:1.6fr auto auto 1fr;
    }
    .rxs-card{
      background:#161618; border:1px solid rgba(255,255,255,.06);
      border-radius:14px; padding:.95rem 1.05rem;
      display:flex; flex-direction:column; justify-content:center; gap:.5rem; min-width:0;
      box-shadow:0 6px 18px -10px rgba(0,0,0,.7);
    }
    .rxs-card.span2{ grid-column:1 / -1 }
    .rxs-card.level{ gap:.45rem; padding:1.2rem 1.25rem; justify-content:flex-start;
      background:linear-gradient(155deg,#1b1b1e,#161618); }
    .rxs-card.level .rxs-val{ font-size:4.4rem; font-weight:700; line-height:.85; color:#fff;
      text-shadow:0 0 22px rgba(233,32,56,.25); display:flex; align-items:baseline; gap:.35rem }
    .rxs-card.level .rxs-val .rxs-total{ font-size:1.3rem; font-weight:600; color:rgba(255,255,255,.38);
      letter-spacing:.02em; text-shadow:none }
    .rxs-chapter{ display:inline-flex; align-items:center; gap:.4em; align-self:flex-start; margin-top:.3rem;
      font-family:var(--pp); font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
      color:#ff7080; background:rgba(233,32,56,.1); border:1px solid rgba(233,32,56,.32);
      padding:.3rem .65rem; border-radius:999px; line-height:1; }
    .rxs-chapter i{ font-size:.66em; }
    .rxs-mission{ display:flex; flex-direction:column; gap:.4rem; margin-top:1.1rem;
      padding-top:1rem; border-top:1px solid rgba(255,255,255,.1); }
    .rxs-mission .rxinfo-name{ font-family:var(--sf); font-size:1.5rem; font-weight:700; text-transform:uppercase; color:#fff; line-height:1; letter-spacing:.02em }
    .rxs-mission .rxinfo-desc{ font-family:var(--pp); font-size:.66rem; font-weight:400; color:rgba(255,255,255,.6); line-height:1.6 }
    .rxs-card.time{ grid-column:1; grid-row:4; align-self:stretch; height:100%;
      align-items:center; justify-content:center; gap:.25rem;
      background:radial-gradient(120% 120% at 50% 0%, #201416 0%, #131315 70%);
      border-color:rgba(233,32,56,.22); position:relative; overflow:hidden; }
    .rxs-card.time .rxs-lbl{ align-self:center }
    .rxs-card.time .hud-timer{ font-size:3rem !important; font-weight:700; letter-spacing:.01em;
      color:#fff; text-shadow:0 0 18px rgba(233,32,56,.35); line-height:.95 }
    .rxs-card.time .hud-timer.warn{ color:#ffb02e } 
    .rxs-mini-col{ grid-column:2; grid-row:4; align-self:stretch; height:100%;
      display:grid; grid-template-rows:1fr 1fr; gap:12px; min-height:0 }
    .rxs-mini-col .rxs-card{ padding:.7rem 1rem; min-height:0; height:100% }

    .rxs-lbl{ font-family:var(--pp); font-size:.5rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.42); white-space:nowrap }
    .rxs-val{ font-family:var(--sf); font-size:2.5rem; letter-spacing:.01em; color:#fff; line-height:.9; font-variant-numeric:tabular-nums }
    .rxs-card.time .rxs-val, .rxs-mini-col .rxs-val{ font-size:2rem }
    .rxs-cat{ display:inline-flex; align-items:center; gap:.4em; font-family:var(--sf); font-size:1.5rem;
      letter-spacing:.03em; text-transform:uppercase; color:var(--red); line-height:1 }
    .rxs-cat i{ font-size:1.1rem }

    .rxs-card.lives{ gap:.5rem; padding:.7rem 1rem; flex-direction:row; align-items:center; justify-content:space-between }
    .rxs-lives-left{ display:flex; flex-direction:column; gap:.4rem }
    .rxs-lives{ display:inline-flex; align-items:center; gap:.3rem; font-size:1rem }
    .rxs-lives i{ color:rgba(255,255,255,.16) }
    .rxs-lives i.on{ color:#ffd23d; text-shadow:0 0 8px rgba(255,210,61,.55) }
    .rxs-card.lives .cnt{ font-family:var(--sf); font-size:1.15rem; font-weight:700; color:#fff; letter-spacing:.01em; font-variant-numeric:tabular-nums }

    /* SEGMENT PROGRESS BAR */
    .rxs-bar{ display:flex; gap:5px; margin-top:.15rem }
    .rxs-bar .seg{ flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.1); transition:background .2s }
    .rxs-bar .seg.on{ background:var(--red); box-shadow:0 0 8px rgba(233,32,56,.6) }

    .rxs-prog{ position:relative; height:7px; border-radius:5px; background:rgba(255,255,255,.08);
               overflow:hidden; margin-top:.35rem }
    .rxs-prog > i{ display:block; height:100%; width:0%; border-radius:5px;
                   background:linear-gradient(90deg, #ff5063, var(--red));
                   box-shadow:0 0 10px rgba(233,32,56,.6);
                   transition:width .5s cubic-bezier(.2,.8,.2,1) }

    .rxs-val.warn{ color:var(--red); animation:rxsWarn .6s ease-in-out infinite }
    @keyframes rxsWarn{ 0%,100%{ text-shadow:0 0 14px rgba(233,32,56,.5) } 50%{ text-shadow:0 0 22px rgba(233,32,56,1) } }
    #hudTimeCard.danger{ animation:timeCardWarn .55s ease-in-out infinite }
    @keyframes timeCardWarn{
      0%,100%{ border-color:rgba(233,32,56,.4); background:#161618; box-shadow:0 6px 18px -10px rgba(0,0,0,.7) }
      50%    { border-color:var(--red); background:rgba(233,32,56,.16); box-shadow:0 0 22px rgba(233,32,56,.6) }
    }

    /* ── HUD ── */
    #rxStatus{ --neon:#ff2d4d; --neon2:#5ad1ff; }
    .rxs-card{
      position:relative; overflow:hidden;
      background:
        linear-gradient(160deg, rgba(28,28,34,.92), rgba(14,14,18,.96)),
        radial-gradient(120% 90% at 0% 0%, rgba(90,209,255,.06), transparent 60%);
      border:1px solid rgba(255,255,255,.08);
      border-radius:13px;
      box-shadow:0 8px 26px -12px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05);
      backdrop-filter:blur(6px);
    }
    .rxs-card::after{
      content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
      background:repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
    }
    .rxs-card::before{
      content:""; position:absolute; top:7px; left:7px; width:14px; height:14px; pointer-events:none;
      border-top:2px solid var(--neon); border-left:2px solid var(--neon); opacity:.55; border-radius:2px 0 0 0;
    }
    .rxs-card.level{
      background:
        linear-gradient(150deg, rgba(34,20,24,.96), rgba(15,14,18,.97)),
        radial-gradient(130% 100% at 100% 0%, rgba(255,45,77,.12), transparent 55%);
      border-color:rgba(255,45,77,.22);
    }
    .rxs-card.level .rxs-val{
      text-shadow:0 0 28px rgba(255,45,77,.5), 0 0 8px rgba(255,45,77,.4);
      animation:rxsLevelGlow 3.4s ease-in-out infinite;
    }
    @keyframes rxsLevelGlow{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.14) } }
    /* LABEL'lar */
    .rxs-lbl{ color:rgba(160,200,230,.55); }
    .rxs-card.level .rxs-lbl{ color:rgba(255,130,140,.7); }
    /* TYPE */
    .rxs-cat{ color:#ff5063; text-shadow:0 0 14px rgba(255,45,77,.45); }
    .rxs-cat b{ position:relative; }
    .rxs-card.time{
      background:
        radial-gradient(120% 130% at 50% 0%, rgba(46,20,26,.95), rgba(13,13,17,.97) 72%);
      border-color:rgba(255,45,77,.3);
    }
    .rxs-card.time::before{ border-top-color:#ff5063; border-left-color:#ff5063; }
    .rxs-card.time .hud-timer{
      text-shadow:0 0 22px rgba(255,45,77,.6), 0 0 6px rgba(255,255,255,.4);
      font-variant-numeric:tabular-nums;
    }
    .rxs-card.score .rxs-val{ color:#7cff9b; text-shadow:0 0 18px rgba(60,224,138,.5); }
    .rxs-card.best .rxs-val{ color:#ffd23d; text-shadow:0 0 16px rgba(255,210,61,.45); }
    .rxs-card.score .rxs-val.pop{ animation:rxsPop .4s cubic-bezier(.2,1.6,.4,1); }
    @keyframes rxsPop{ 0%{ transform:scale(1) } 35%{ transform:scale(1.22) } 100%{ transform:scale(1) } }
    /* YILDIZ */
    .rxs-lives i.on{ color:#ffd23d; text-shadow:0 0 12px rgba(255,210,61,.8); animation:rxsStarTwinkle 2.4s ease-in-out infinite; }
    @keyframes rxsStarTwinkle{ 0%,100%{ opacity:1 } 50%{ opacity:.75 } }
    .rxs-prog{ background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
    .rxs-prog > i{ background:linear-gradient(90deg,#ff7080,#ff2d4d,#ff7080); background-size:200% 100%;
      animation:rxsFlow 2.2s linear infinite; box-shadow:0 0 12px rgba(255,45,77,.7); }
    @keyframes rxsFlow{ 0%{ background-position:0% 0 } 100%{ background-position:200% 0 } }
    /* SEGMENT TIME bar */
    .rxs-bar .seg.on{ background:linear-gradient(90deg,#ff5063,#ff2d4d); box-shadow:0 0 10px rgba(255,45,77,.8); }
    /* CHAPTER rozeti */
    .rxs-chapter{ background:rgba(255,45,77,.12); border-color:rgba(255,45,77,.38);
      box-shadow:0 0 14px -4px rgba(255,45,77,.5); }
    /* MISSION adı */
    .rxs-mission .rxinfo-name{ text-shadow:0 0 16px rgba(90,209,255,.25); }
    /* TIME danger */
    #hudTimeCard.danger{ animation:rxsTimePulse .5s ease-in-out infinite; }
    @keyframes rxsTimePulse{
      0%,100%{ border-color:rgba(255,45,77,.45); box-shadow:0 8px 26px -12px rgba(0,0,0,.85) }
      50%    { border-color:#ff2d4d; box-shadow:0 0 30px rgba(255,45,77,.8), inset 0 0 24px rgba(255,45,77,.25) }
    }

    /* ── INTRO ── */
    .bb-screen{
      position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
      background:rgba(2,2,2,.97); z-index:8200; padding:2rem; text-align:center;
      transition:opacity .4s, visibility .4s;
    }
    .bb-screen.hidden{opacity:0; visibility:hidden; pointer-events:none}
    #rxIntro.bb-screen{
      overflow:hidden;
      background:
        radial-gradient(ellipse at 50% 46%, rgba(0,0,0,.30) 0%, rgba(0,0,0,.5) 66%, rgba(2,2,2,.86) 100%),
        #060607;
    }
    #rxIntro.bb-screen::before{
      content:''; position:absolute; inset:-40px; z-index:-1;
      background:url('../images/reflexin-intro-bg-v5.jpg?v=1') center/cover no-repeat;
      filter:brightness(.92) contrast(1.04);
      transform:scale(1.06);
      animation:rxIntroBreath 26s ease-in-out infinite;
    }
    @keyframes rxIntroBreath{
      0%,100%{ transform:scale(1.08) translate(0,0) }
      50%    { transform:scale(1.13) translate(1%, -1%) }
    }
    #rxIntro::after{
      content:''; position:absolute; inset:0; pointer-events:none;
      background:repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
      mix-blend-mode:overlay; opacity:.6; z-index:0;
    }
    #rxIntro > *{ position:relative; z-index:1 }

    .nmi-eyebrow{
      font-family:var(--pp); font-size:.48rem; letter-spacing:.5em; text-transform:uppercase;
      color:var(--red); margin-bottom:1.2rem; display:flex; align-items:center; gap:.8rem;
    }
    .nmi-eyebrow::before,.nmi-eyebrow::after{ content:''; flex:1; height:1px; background:rgba(233,32,56,.3); max-width:55px }
    .bb-title{
      font-family:var(--sf); font-size:clamp(4rem,10vw,9rem); font-weight:700; text-transform:uppercase;
      letter-spacing:-.03em; line-height:1.02; color:#fff; margin-bottom:.6rem; position:relative; display:inline-block;
    }
    .bb-title em{font-style:normal; color:var(--red)}
    .bb-sub{
      font-family:var(--pp); font-size:.56rem; letter-spacing:.22em; text-transform:uppercase;
      color:rgba(255,255,255,.38); margin-bottom:2.2rem; max-width:520px;
    }
    .nmi-cta{
      appearance:none; position:relative; border:1px solid rgba(255,255,255,.25);
      background:var(--red); color:#fff; font-family:var(--pp);
      font-size:.8rem; font-weight:700; letter-spacing:.25em; text-transform:uppercase;
      padding:1.1rem 2.4rem; border-radius:999px; cursor:pointer;
      transition:background .25s ease, box-shadow .25s ease;
      display:inline-flex; justify-content:center; gap:.9rem; box-shadow:0 8px 30px rgba(233,32,56,.4); margin-bottom:2rem;
      overflow:visible; isolation:isolate;
    }
    .nmi-cta::before{
      content:''; position:absolute; inset:-1px; border-radius:999px; padding:1px;
      background:rgba(255,255,255,.22);
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude;
      pointer-events:none; z-index:2;
    }
    .nmi-cta::after{
      content:''; position:absolute; inset:-1px; border-radius:999px; padding:1px;
      background:conic-gradient(from var(--inlab-angle,0deg), transparent 0deg, rgba(255,255,255,.15) 18deg, rgba(255,255,255,1) 30deg, rgba(255,120,130,1) 38deg, rgba(255,255,255,.15) 52deg, transparent 70deg, transparent 360deg);
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude;
      filter:drop-shadow(0 0 4px rgba(255,120,130,.9));
      animation:inlabCtaBorderTrain 3.2s linear infinite; pointer-events:none; z-index:2;
    }
    @property --inlab-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
    @keyframes inlabCtaBorderTrain{ to{ --inlab-angle:360deg; } }
    .nmi-cta > *{ position:relative; z-index:3; }
    .nmi-cta:hover{background:#ff3047; box-shadow:0 12px 40px rgba(233,32,56,.55), 0 0 0 1px rgba(255,255,255,.35)}
    .nmi-cta:hover::after{ animation-duration:1.5s; }
    .nmi-cta i{animation:arrPulse 1.4s ease-in-out infinite}
    @keyframes arrPulse{0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)}}

    .nmi-quads{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; width:min(94vw,760px); margin-bottom:1.4rem;
      border:1px solid rgba(255,255,255,.1); border-radius:14px; overflow:hidden;
      background:rgba(255,255,255,.025); }
    .nmi-quad{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem;
      padding:1.4rem 1rem; isolation:isolate;
      border-right:1px solid rgba(255,255,255,.08); transition:background .4s ease; }
    .nmi-quad:last-child{ border-right:0; }
    .nmi-quad::before{ content:''; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .45s ease;
      background:radial-gradient(circle at 50% 0%, rgba(233,32,56,.16), transparent 65%); }
    .nmi-quad:hover::before{ opacity:1; }
    .nmi-quad:hover{ background:rgba(255,255,255,.02); }
    .nmi-quad__num{ display:inline-flex; align-items:center; justify-content:center; gap:.16em; font-family:var(--sf); font-size:2.6rem; font-weight:800;
      line-height:1; letter-spacing:-.02em; color:#fff; transition:color .35s ease; }
    .nmi-quad__num i{ font-size:.52em; color:var(--red); }
    .nmi-quad:hover .nmi-quad__num{ color:#ff7080; }
    .nmi-quad:nth-child(3) .nmi-quad__num i{ color:var(--amb); }
    .nmi-quad__label{ font-family:var(--pp); font-weight:300; font-size:.46rem; letter-spacing:.24em; text-transform:none; color:rgba(255,255,255,.62); }
    .nmi-quad__desc{ font-family:var(--pp); font-size:.52rem; line-height:1.55; color:rgba(255,255,255,.48); letter-spacing:.01em; margin:.1rem 0 0; }
    @media (max-width:560px){
      .nmi-quads{ grid-template-columns:repeat(2,1fr); width:min(94vw,420px); }
      .nmi-quad{ padding:1.1rem .9rem; border-bottom:1px solid rgba(255,255,255,.08); }
      .nmi-quad:nth-child(2n){ border-right:0; }
      .nmi-quad:nth-child(n+3){ border-bottom:0; }
      .nmi-quad:last-child{ border-right:0; }
      .nmi-quad__num{ font-size:2.1rem; }
    }

    /* ── END / WIN ── */
    #rxEnd, #rxWin{
      position:fixed; inset:0; z-index:9300; display:flex; align-items:center; justify-content:center;
      opacity:0; visibility:hidden; transition:opacity .5s, visibility .5s; overflow:hidden;
      background-color:#000;
      backdrop-filter:blur(4px);
    }
    #rxEnd.show, #rxWin.show{opacity:1; visibility:visible}
    .end-fx{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none }
    .end-card{ text-align:center; max-width:560px; padding:2rem; position:relative; z-index:3 }

    /* ── GAME OVER ── */
    #rxEnd{ background:radial-gradient(ellipse at 50% 42%, rgba(70,3,10,.62) 0%, rgba(3,1,2,.99) 52%, #000 100%); }
    #rxEnd::before{
      content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
      background:radial-gradient(ellipse at 50% 50%, rgba(233,32,56,.12), transparent 65%);
      animation:goPulse 2.4s ease-in-out infinite;
    }
    @keyframes goPulse{ 0%,100%{opacity:.3} 50%{opacity:.8} }
    #rxEnd::after{
      content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
      background:repeating-linear-gradient(0deg, rgba(0,0,0,.0) 0 2px, rgba(0,0,0,.22) 2px 4px);
      mix-blend-mode:multiply;
    }
    #rxEnd.show .end-card{ animation:goCardIn 1s cubic-bezier(.2,.8,.2,1) both }
    @keyframes goCardIn{ 0%{opacity:0; transform:scale(1.15) translateY(-10px); filter:blur(8px)} 100%{opacity:1; transform:none; filter:none} }
    .go-icon{ font-size:3.2rem; color:var(--red); margin-bottom:1rem; filter:drop-shadow(0 0 22px rgba(233,32,56,.7)); animation:goIcon 3s ease-in-out infinite }
    @keyframes goIcon{ 0%,100%{transform:rotate(-4deg) scale(1)} 50%{transform:rotate(4deg) scale(1.06)} }

    /* ── WIN ── */
    #rxWin{ background:radial-gradient(ellipse at 50% 45%, rgba(28,150,95,.28) 0%, rgba(4,6,5,.99) 50%, #000 100%); z-index:9320 }
    #rxWin::before{
      content:''; position:absolute; left:50%; top:45%; width:160vmax; height:160vmax; transform:translate(-50%,-50%); z-index:0; pointer-events:none;
      background:conic-gradient(from 0deg, transparent 0 8deg, rgba(39,224,138,.06) 8deg 16deg, transparent 16deg 24deg);
      animation:winRays 26s linear infinite; opacity:.5;
    }
    @keyframes winRays{ to{ transform:translate(-50%,-50%) rotate(360deg) } }
    #rxWin.show .end-card{ animation:winCardIn 1s cubic-bezier(.2,.9,.25,1) both }
    @keyframes winCardIn{ 0%{opacity:0; transform:scale(.7)} 60%{opacity:1; transform:scale(1.04)} 100%{transform:scale(1)} }
    /* RÜTBE rozeti */
    .win-rank{
      width:150px; height:150px; margin:0 auto 1.1rem; position:relative;
      display:flex; align-items:center; justify-content:center;
      border-radius:50%; background:radial-gradient(circle at 50% 35%, #1a2b22, #0a120e);
      border:2px solid var(--grn); box-shadow:0 0 50px -8px rgba(39,224,138,.7), inset 0 0 30px -10px rgba(39,224,138,.5);
      animation:rankPop .7s .3s cubic-bezier(.2,1.4,.4,1) both;
    }
    @keyframes rankPop{ 0%{transform:scale(0) rotate(-30deg); opacity:0} 100%{transform:none; opacity:1} }
    .win-rank::before{ content:''; position:absolute; inset:-12px; border-radius:50%; border:1px dashed rgba(39,224,138,.4); animation:winRays 12s linear infinite reverse }
    .win-rank b{ font-family:var(--sf); font-size:clamp(1.1rem,5.2vw,1.7rem); font-weight:800; letter-spacing:.02em; line-height:1; color:#fff; text-align:center; padding:0 8px; text-shadow:0 0 24px rgba(39,224,138,.9); text-transform:uppercase }
    .win-rank small{ position:absolute; bottom:18px; font-family:var(--pp); font-size:.4rem; letter-spacing:.3em; color:rgba(255,255,255,.6); text-transform:uppercase }

    .end-tag{
      display:inline-flex; align-items:center; gap:.6em; font-family:var(--pp); font-size:.5rem; letter-spacing:.45em;
      text-transform:uppercase; color:var(--red); margin-bottom:1.1rem; padding:.5em 1.1em;
      border:1px solid currentColor; border-radius:999px; background:rgba(233,32,56,.08); box-shadow:0 0 18px -6px currentColor;
    }
    .end-tag::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; animation:tagPulse 1.1s ease-in-out infinite }
    @keyframes tagPulse{0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.7)}}
    #rxWin .end-tag{ color:var(--grn); background:rgba(39,224,138,.1) }
    .end-title{ font-family:var(--sf); font-size:clamp(3rem,8vw,5.6rem); text-transform:uppercase; line-height:.95; margin-bottom:.5rem; letter-spacing:.01em }
    .end-title em{font-style:normal; color:var(--red)}
    #rxWin .end-title em{color:var(--grn)}
    #rxEnd.show .end-title{ animation:goGlitch 2.6s steps(1) infinite }
    @keyframes goGlitch{
      0%,92%,100%{ text-shadow:0 0 20px rgba(233,32,56,.4) }
      93%{ text-shadow:-3px 0 #ff3a4a, 3px 0 #3ad6ff; transform:translateX(-2px) }
      95%{ text-shadow:3px 0 #ff3a4a, -3px 0 #3ad6ff; transform:translateX(2px) }
      97%{ text-shadow:0 0 20px rgba(233,32,56,.4); transform:none }
    }
    #rxWin .end-title{ text-shadow:0 0 30px rgba(39,224,138,.5) }

    .end-sub{ font-family:var(--pp); font-size:.54rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:.4rem }
    .end-stats{ display:flex; justify-content:center; gap:1rem; margin:1.6rem 0 1.8rem; flex-wrap:wrap }
    .end-stat{ text-align:center; min-width:92px; padding:.9rem 1rem; border-radius:12px;
      background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08) }
    #rxWin .end-stat{ border-color:rgba(39,224,138,.2); background:rgba(39,224,138,.05) }
    .end-stat b{ display:block; font-family:var(--sf); font-size:2.4rem; color:#fff; line-height:1; font-variant-numeric:tabular-nums }
    #rxWin .end-stat b{ color:#dfffe6 }
    .end-stat span{ font-family:var(--pp); font-size:.42rem; letter-spacing:.25em; text-transform:uppercase; color:rgba(255,255,255,.45); display:block; margin-top:.4rem }
    .end-namebox{ margin:0 auto 1.4rem; max-width:340px; display:flex; flex-direction:column; gap:.6rem; align-items:center }
    .end-namebox.saved{ opacity:.6; pointer-events:none }
    .end-namebox label{ font-family:var(--pp); font-size:.46rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.55); display:flex; align-items:center; gap:.5rem }
    .end-namebox label i{ color:var(--amb) }
    .end-namerow{ display:flex; gap:.5rem; width:100% }
    .end-namebox input{ flex:1; appearance:none; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
      border-radius:10px; padding:.65rem 1rem; color:#fff; font-family:var(--sf); font-size:1rem; letter-spacing:.06em; text-align:center; text-transform:uppercase; }
    .end-namebox input:focus{ outline:none; border-color:var(--amb); box-shadow:0 0 0 3px rgba(255,176,46,.18) }
    .end-namebox input::placeholder{ color:rgba(255,255,255,.28); letter-spacing:.12em }
    .end-save-btn{ appearance:none; border:0; background:var(--amb); color:#1a1305; font-family:var(--pp); font-weight:700;
      font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; padding:.65rem 1.1rem; border-radius:10px; cursor:pointer; transition:.2s; white-space:nowrap }
    .end-save-btn:hover{ filter:brightness(1.1) }
    .end-save-btn:disabled{ background:rgba(39,224,138,.25); color:#27e08a; cursor:default }
    .end-actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap }
    .end-btn{
      appearance:none; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05); color:#fff;
      font-family:var(--pp); font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
      padding:.9rem 1.6rem; border-radius:999px; cursor:pointer; transition:all .18s; display:inline-flex; align-items:center; gap:.5rem;
    }
    .end-btn.primary{ background:var(--red); border-color:var(--red); box-shadow:0 8px 24px rgba(233,32,56,.35) }
    #rxWin .end-btn.primary{ background:var(--grn); border-color:var(--grn); box-shadow:0 8px 24px rgba(39,224,138,.3) }
    .end-btn:hover{ transform:translateY(-2px) }
    .end-newbest{ display:none; margin:-.4rem auto 1.2rem; font-family:var(--pp); font-size:.5rem; font-weight:700;
      letter-spacing:.28em; text-transform:uppercase; color:var(--amb); padding:.45em 1.1em; border-radius:999px;
      border:1px solid var(--amb); background:rgba(255,176,46,.1); box-shadow:0 0 20px -6px var(--amb);
      animation:newBestGlow 1.2s ease-in-out infinite; }
    .end-newbest.show{ display:inline-flex; align-items:center; gap:.5em }
    @keyframes newBestGlow{ 0%,100%{box-shadow:0 0 20px -6px var(--amb)} 50%{box-shadow:0 0 28px 0px var(--amb)} }

    /* ── LEVEL INTRO ── */
    #rxCard{
      position:absolute; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
      background:rgba(8,8,11,.82); backdrop-filter:blur(3px);
      opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s; border-radius:18px; overflow:hidden; cursor:pointer;
    }
    #rxCard:not(.show){ visibility:hidden !important; pointer-events:none !important; }
    #rxCard.show{opacity:1; visibility:visible; pointer-events:auto}
    .rx-card-inner{ text-align:center; max-width:90%; padding:1.5rem }
    .rx-card-num{ font-family:var(--pp); font-size:.6rem; font-weight:600; letter-spacing:.45em; color:var(--red); text-transform:uppercase; margin-bottom:.6rem }
    .rx-card-type{ font-family:var(--sf); font-size:clamp(2.4rem,7vw,4rem); text-transform:uppercase; line-height:1; margin-bottom:.5rem }
    .rx-card-type em{font-style:normal; color:var(--red)}
    .rx-card-desc{ font-family:var(--pp); font-size:.62rem; letter-spacing:.04em; color:rgba(255,255,255,.6); line-height:1.7; margin-bottom:1.4rem }
.rx-howto{ display:block; margin-top:.85rem; padding:.6em .9em; font-size:.56rem; letter-spacing:.06em;
  color:#ffe6a8; background:rgba(255,176,46,.1); border:1px solid rgba(255,176,46,.32); border-radius:10px;
  line-height:1.5; animation:howtoGlow 1.6s ease-in-out infinite; }
.rx-howto i{ color:#ffb02e; margin-right:.45em; }
@keyframes howtoGlow{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,176,46,0); } 50%{ box-shadow:0 0 18px -4px rgba(255,176,46,.5); } }
    .rx-card-ready{ font-family:var(--pp); font-size:.5rem; letter-spacing:.4em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:.7rem }
    .rx-card-prog{ width:160px; height:4px; margin:0 auto; background:rgba(255,255,255,.12); border-radius:99px; overflow:hidden }
    .rx-card-prog i{ display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--red),var(--red2));
      transform-origin:left; transform:scaleX(0); }
    #rxCard.show .rx-card-prog i{ animation:cardCount var(--ready,1100ms) linear forwards }
    @keyframes cardCount{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
    .rx-card-skip{ margin-top:1rem; font-family:var(--pp); font-size:.42rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.3) }

    /* ── SABİT FAB ── */
    #rxFabBar{ position:absolute; top:12px; right:12px; z-index:60; display:flex; gap:8px; }
    .rx-fab{ width:38px; height:38px; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center;
      background:rgba(18,18,24,.62); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.66);
      font-size:.82rem; backdrop-filter:blur(6px); transition:all .18s; }
    .rx-fab:hover{ color:#fff; border-color:var(--rx-accent,var(--red)); box-shadow:0 0 16px -4px var(--rx-accent,var(--red)); transform:translateY(-1px); }
    .rx-fab.on{ color:var(--rx-accent,var(--red)); border-color:var(--rx-accent,var(--red)); background:rgba(255,255,255,.06); }
    /* ── ZEN MOD ── */
    body.rx-zen #rxHud, body.rx-zen #rxLevelRail, body.rx-zen #rxStatus{ opacity:.22; transition:opacity .4s; filter:saturate(.5); }
    body.rx-zen #rxHud:hover, body.rx-zen #rxLevelRail:hover, body.rx-zen #rxStatus:hover{ opacity:1; filter:none; }
    body.rx-zen #rxArena{ border-color:rgba(var(--zenrgb,90,209,255),.5); }

    /* ── Geliştirici aracı ── */
    #rxDebug{ display:none !important; position:fixed; right:14px; bottom:calc(var(--hud) + 14px); z-index:9000; font-family:var(--pp) }
    .dbg-toggle{
      width:40px; height:40px; border-radius:10px; cursor:pointer;
      background:rgba(20,20,22,.92); border:1px solid rgba(255,255,255,.18);
      color:rgba(255,255,255,.7); font-size:15px; transition:all .2s;
    }
    .dbg-toggle:hover{ color:#fff; border-color:rgba(255,255,255,.4) }
    .dbg-panel{
      position:absolute; right:0; bottom:50px; width:248px;
      max-height:min(78vh, 620px); overflow-y:auto; overscroll-behavior:contain;
      background:rgba(14,14,16,.97); border:1px solid rgba(255,255,255,.16);
      border-radius:12px; padding:10px; display:none; flex-direction:column; gap:6px;
      box-shadow:0 12px 40px rgba(0,0,0,.6);
    }
    .dbg-panel::-webkit-scrollbar{ width:6px } .dbg-panel::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:3px }
    .dbg-head-hint{ font-size:.85em; letter-spacing:.06em; color:rgba(255,255,255,.28); text-transform:none }
    /* OYUN TÜRLERİ grid */
    .dbg-types{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px }
    .dbg-type{
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
      background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:8px;
      color:#fff; padding:8px 4px; cursor:pointer; transition:all .15s; min-height:52px;
    }
    .dbg-type i{ font-size:14px } .dbg-type span{ font:600 7.5px/1.1 var(--pp); letter-spacing:.04em; text-align:center; color:rgba(255,255,255,.78) }
    .dbg-type:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); transform:translateY(-1px) }
    #rxDebug.open .dbg-panel{ display:flex }
    .dbg-head{ font-size:.42rem; letter-spacing:.3em; color:rgba(255,255,255,.4); text-transform:uppercase; margin:2px 0 }
    .dbg-btn{
      display:flex; align-items:center; gap:8px; text-align:left;
      background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
      color:#fff; border-radius:7px; padding:7px 10px; cursor:pointer;
      font:600 11px/1 var(--pp); letter-spacing:.04em; transition:background .15s;
    }
    .dbg-btn i{ width:14px; color:var(--red) }
    .dbg-btn:hover{ background:rgba(233,32,56,.18) }
    .dbg-sep{ height:1px; background:rgba(255,255,255,.1); margin:3px 0 }
    .dbg-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:10px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.08em }
    .dbg-row input{
      width:60px; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.18);
      color:#fff; border-radius:5px; padding:4px 6px; font:600 11px var(--pp); text-align:center;
    }
    .dbg-row select{
      flex:1; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.18);
      color:#fff; border-radius:5px; padding:4px 6px; font:600 11px var(--pp);
    }
  
    @media (max-width:1000px){
      #rxStage{
        --rx-pad:8px; --rx-gap:8px; --rx-rail-h:46px; --rx-strip:64px;
        --rxa: min(calc(100vw - 16px), calc(100vh - 52px - var(--hud) - 16px - var(--rx-rail-h) - var(--rx-strip) - 16px), 660px);
        flex-direction:column; flex-wrap:nowrap; align-items:center;
        justify-content:flex-start; justify-content:safe center;
        gap:var(--rx-gap);
        padding:calc(var(--rx-pad) + var(--rx-rail-h) + var(--rx-gap)) var(--rx-pad) var(--rx-pad);
      }
      @supports (container-type:size){
        #rxStage{ container-type:size;
          --rxa: max(140px, min(100cqw, calc(100cqh - var(--rx-strip) - var(--rx-gap)), 660px)); }
        #rxStage > #rxLevelRail{ top:calc(var(--rx-pad) + max(0px, (100cqh - var(--rx-strip) - var(--rx-gap) - var(--rxa)) / 2)); }
      }
      #rxArena{ --arena:var(--rxa); order:2; flex:0 0 auto; }
      #rxStatus{ order:1; flex:0 0 auto; align-self:center; width:var(--rxa); max-width:none; height:var(--rx-strip); }

      #rxLevelRail{ position:absolute; z-index:60; top:var(--rx-pad); left:var(--rx-pad); right:var(--rx-pad);
        width:auto; max-width:560px; margin:0 auto; height:auto; max-height:calc(100% - 2 * var(--rx-pad));
        align-self:auto; padding:4px; gap:.5rem; overflow:hidden; }
      #rxLevelRail .rail-now{ height:calc(var(--rx-rail-h) - 10px); padding:0 .4rem 0 .7rem; border-radius:14px; flex:0 0 auto; }
      #rxLevelRail.expanded{ padding-bottom:.6rem; box-shadow:0 28px 70px -12px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04) inset; }
      #rxLevelRail.expanded .rail-grid{ max-height:min(34vh, 260px); }

      .rxs-grid{ display:flex; flex-wrap:nowrap; gap:6px; height:100%; grid-template-rows:none; }
      .rxs-mini-col{ display:contents; }
      .rxs-lives-left{ display:contents; }
      .rxs-card, .rxs-card.level, .rxs-card.lives, .rxs-card.time, .rxs-mini-col .rxs-card{
        flex:1 1 0; min-width:0; height:auto; min-height:0; align-self:stretch;
        grid-row:auto; grid-column:auto;
        flex-direction:column; align-items:center; justify-content:center; text-align:center;
        gap:.22rem; padding:.3rem .35rem; border-radius:10px; }
      .rxs-card.type{ flex-grow:1.6; }
      #rxStatus .rxs-card::before, #rxStatus .rxs-chapter, #rxStatus .rxs-prog, #rxStatus .rxs-mission,
      #rxStatus .rxs-lives, #rxStatus .rxs-val .rxs-total{ display:none; }
      .rxs-lbl, .rxs-card.time .rxs-lbl{ align-self:center; font-size:.44rem; letter-spacing:.14em; }
      .rxs-val, .rxs-card.level .rxs-val, .rxs-card.time .rxs-val, .rxs-mini-col .rxs-val{
        font-size:1.35rem; line-height:1; display:block; max-width:100%;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .rxs-card.time .hud-timer{ font-size:1.35rem !important; line-height:1; }
      .rxs-card.lives .cnt{ font-size:1.05rem; white-space:nowrap; }
      .rxs-cat{ max-width:100%; font-size:1rem; gap:.3em; }
      .rxs-cat i{ font-size:.78rem; flex:0 0 auto; }
      .rxs-cat b{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .rxs-bar{ position:absolute; left:7px; right:7px; bottom:4px; margin:0; gap:2px; }
      .rxs-bar .seg{ height:2px; }
    }
    @media (max-width:620px){
      #rxStage{ --rx-strip:50px; }
      .rxs-grid{ gap:4px; }
      .rxs-card, .rxs-card.level, .rxs-card.lives, .rxs-card.time, .rxs-mini-col .rxs-card{ padding:.25rem .2rem; border-radius:9px; gap:.18rem; }
      .rxs-lbl, .rxs-card.time .rxs-lbl{ font-size:.4rem; letter-spacing:.1em; }
      .rxs-val, .rxs-card.level .rxs-val, .rxs-card.time .rxs-val, .rxs-mini-col .rxs-val, .rxs-card.time .hud-timer{ font-size:1.1rem !important; }
      .rxs-card.lives .cnt{ font-size:.86rem; }
      .rxs-cat{ font-size:.82rem; }
      .rxs-cat i{ display:none; }
      .rxs-card.level{ flex-grow:.7; }
      .rxs-mini-col .rxs-card.best{ flex-grow:1.5; }
      .rxs-card.best .rxs-val{ font-size:.92rem !important; }
    }
    @media (max-width:480px){
      #hudStats > .hud-stat:last-child, #hudStats > .hud-stat--combo + .hud-stat-div{ display:none; }
    }
    @media (max-width:1000px) and (orientation:landscape) and (max-height:560px){
      #rxStage{ --rx-side-l:122px; --rx-side-r:172px;
        --rxa: min(calc(100vh - 52px - var(--hud) - 16px), calc(100vw - 16px - var(--rx-side-l) - var(--rx-side-r) - 16px), 560px);
        flex-direction:row; justify-content:center; align-items:center; padding:var(--rx-pad); }
      @supports (container-type:size){
        #rxStage{ --rxa: max(120px, min(100cqh, calc(100cqw - var(--rx-side-l) - var(--rx-side-r) - 2 * var(--rx-gap)), 560px)); }
      }
      #rxStatus{ order:0; width:var(--rx-side-l); height:var(--rxa); }
      #rxArena{ order:1; }
      .rxs-grid{ flex-direction:column; gap:5px; }
      .rxs-card, .rxs-card.level, .rxs-card.lives, .rxs-card.time, .rxs-mini-col .rxs-card{
        flex-direction:row; justify-content:space-between; padding:0 .55rem; gap:.4rem; }
      .rxs-card.type{ flex-grow:1; }
      .rxs-cat i{ display:none; }
      .rxs-val, .rxs-card.level .rxs-val, .rxs-card.time .rxs-val, .rxs-mini-col .rxs-val, .rxs-card.time .hud-timer{ font-size:1.05rem !important; }
      .rxs-cat{ font-size:.8rem; } .rxs-card.lives .cnt{ font-size:.8rem; }
      #rxLevelRail, #rxStage > #rxLevelRail{ position:relative; order:2; top:auto; left:auto; right:auto; margin:0;
        width:var(--rx-side-r); max-width:none; max-height:100%; align-self:center; }
      #rxLevelRail .rail-now{ height:auto; flex-direction:column; align-items:stretch; gap:.4rem; padding:.5rem .55rem; }
      #rxLevelRail .rail-now-main{ flex-direction:column; align-items:flex-start; gap:.3rem; }
      #rxLevelRail .rail-now-chapter{ max-width:100%; font-size:.7rem; }
      #rxLevelRail .rail-mtoggle{ justify-content:center; }
      #rxLevelRail .rail-mtoggle span{ display:inline; }
      #rxLevelRail.expanded .rail-grid{ max-height:none; flex:1 1 auto; min-height:0; overflow-y:auto;
        grid-template-columns:repeat(auto-fill,minmax(38px,1fr)); }
      #rxLevelRail .rch-browse{ height:46px; }
      #rxLevelRail.expanded .rail-now-main, #rxLevelRail.expanded .rail-chapter-prog{ display:none; }
    }

    /* ── REKOR ── */
    .rx-rec{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.45rem .55rem; }
    .rx-rec__val{ display:inline-flex; align-items:center; gap:.45em; font-family:var(--pp); font-size:.56rem; font-weight:600;
      letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62); white-space:nowrap; }
    .rx-rec__val i{ color:var(--amb); }
    .rx-rec__val b{ font-family:var(--sf); font-size:1.05rem; letter-spacing:.03em; color:#ffd23d; text-transform:none; }
    .rx-rec__btn{ appearance:none; display:inline-flex; align-items:center; gap:.42rem; cursor:pointer;
      font-family:var(--pp); font-size:.54rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#fff;
      background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:.5rem .85rem;
      max-width:15rem; transition:background .18s, border-color .18s; }
    .rx-rec__btn > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .rx-rec__btn:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.36); }
    .rx-rec__btn i{ font-size:.66rem; color:var(--amb); }
    .rx-rec__btn[data-rx-share] i{ color:#5ad1ff; }
    @media (pointer:coarse){ .rx-rec__btn{ min-height:44px; } }
    .rx-rec__state{ flex-basis:100%; min-height:1em; font-family:var(--pp); font-size:.5rem; letter-spacing:.06em; color:rgba(255,255,255,.5); }
    .rx-rec__state.is-ok{ color:#5fe0aa; } .rx-rec__state.is-wait{ color:#ffd27a; }
    .rx-rec--pass .rx-rec__state:empty{ display:none; }
    .rx-rec--pass .rx-rec__state{ font-size:.46rem; min-height:0; }
    #rxArena:has(#rxPassFx.show) #rxFabBar{ opacity:0; pointer-events:none; }
    .hud-stat b{ white-space:nowrap; }
    #rxIntro .rx-rec{ margin:-.9rem 0 1.6rem; max-width:min(94vw,520px); }
    .rx-rec--pass{ margin-top:.55rem; padding-top:.6rem; border-top:1px solid rgba(255,255,255,.08); width:100%;
      opacity:0; transform:translateY(8px); }
    #rxPassFx.show .rx-rec--pass{ animation:pfMetaIn .4s ease 1.6s forwards; }
    .rx-rec--pass .rx-rec__btn{ padding:.42rem .7rem; font-size:.5rem; }

    #rxNameDlg{ position:fixed; inset:0; z-index:9650; display:none; align-items:center; justify-content:center;
      padding:1rem; background:rgba(4,4,6,.86); backdrop-filter:blur(8px); }
    #rxNameDlg.show{ display:flex; animation:rxpFade .22s ease; }
    .rxnd-card{ position:relative; width:400px; max-width:100%; text-align:center; border-radius:20px; padding:1.9rem 1.6rem 1.5rem;
      background:linear-gradient(160deg,#1a1a1d,#121214); border:1px solid rgba(255,176,46,.28);
      box-shadow:0 30px 80px -20px rgba(0,0,0,.85), 0 0 50px -24px rgba(255,176,46,.5); animation:rxpRise .3s cubic-bezier(.2,1,.3,1); }
    .rxnd-title{ font-family:var(--sf); font-size:1.6rem; letter-spacing:.08em; color:#fff; line-height:1; margin-bottom:.7rem; }
    .rxnd-rec{ font-family:var(--pp); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:1.1rem; }
    .rxnd-rec b{ font-family:var(--sf); font-size:1.15rem; letter-spacing:.03em; color:#ffd23d; text-transform:none; }
    #rxNameDlg .end-namebox{ margin:0 auto .6rem; }
    .end-namebox input{ -webkit-user-select:text; user-select:text; }
    .rxnd-status{ min-height:1.2em; font-family:var(--pp); font-size:.58rem; letter-spacing:.04em; color:rgba(255,255,255,.55); }
    .rxnd-status.is-ok{ color:#5fe0aa; } .rxnd-status.is-wait{ color:#ffd27a; }
    .rxnd-note{ margin-top:.7rem; font-family:var(--pp); font-size:.5rem; line-height:1.6; color:rgba(255,255,255,.38); }

    @media (max-width:620px), (max-width:1000px) and (orientation:landscape) and (max-height:560px){
      #rxPassFx{ top:50%; width:calc(100% - 12px); }
      .rxpf-card{ min-width:0; padding:.85rem .8rem .8rem; gap:.28rem; border-radius:16px; }
      .rxpf-match{ font-size:2rem; } .rxpf-match .pct{ font-size:1rem; }
      .rx-rec--pass .rx-rec__val, .rxpf-lbl, .rxpf-div, .rxpf-meta{ display:none; }
      .rxpf-score{ font-size:1.35rem; padding:.2rem .8rem; }
      .rxpf-stars{ gap:.5rem; margin-top:.1rem; } .rxpf-stars .pf-star{ font-size:1.6rem; }
      .rxpf-btns{ margin-top:.35rem; gap:.45rem; } .rxpf-btn{ padding:.5rem .75rem; font-size:.5rem; }
      .rx-rec--pass{ margin-top:.3rem; padding-top:.4rem; gap:.35rem .4rem; }
      .rx-rec--pass .rx-rec__btn{ padding:.36rem .6rem; font-size:.46rem; }
      .rx-rec--pass .rx-rec__val{ font-size:.48rem; } .rx-rec--pass .rx-rec__val b{ font-size:.92rem; }
    }
    @media (max-width:1000px) and (orientation:landscape) and (max-height:560px){
      .rxpf-head, .rxpf-lbl, .rxpf-div, .rxpf-meta{ display:none; }
      .rxpf-newbest, .rxpf-perfect{ display:none !important; }   /* JS satır-içi display verir */
      .rxpf-match{ font-size:1.7rem; } .rxpf-stars .pf-star{ font-size:1.25rem; }
    }
    @media (max-height:760px){
      #rxIntro.bb-screen{ justify-content:safe center; overflow-y:auto; }
    }