/* GLOBAL: gizli katmanlar tıklama yemesin */
    .hidden{ display:none !important; pointer-events:none !important; }

    /* Click-safety: only overlay layers should be non-interactive when hidden */
    #sbOverlay.hidden, #sbOverlay[aria-hidden="true"],
    #buddyModal.hidden, #buddyModal[aria-hidden="true"]{
      display:none !important;
      pointer-events:none !important;
    }
    /* Decorative full-screen layers must never eat clicks */
    .roomPreview img, .roomWallSvgLayer, .roomWindowLayer, .roomTourSpot, #roomTourSpot, #roomWallSvgLayer, #roomWindowLayer{
        pointer-events:none !important;
      }

    /* removed global aria-hidden pointer-events rule: was breaking clicks */

    :root{
      --bg1:#071a2a; --bg2:#0a3045;
      --card: rgba(255,255,255,.06);
      --stroke: rgba(255,255,255,.12);
      --text:#eaf2ff; --muted: rgba(234,242,255,.72);
      --accent:#22c55e; --accent2:#38bdf8;
      --shadow: 0 18px 50px rgba(0,0,0,.35);
      --r: 18px;
      --ui-font: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
      --reading-font: Verdana,Tahoma,"Trebuchet MS","Segoe UI",Arial,sans-serif;
    }
    *{box-sizing:border-box}
    html,body{
      height:100%;
      overflow:hidden;
      pointer-events:auto !important;
    }
    body{
      margin:0;
      font-family: var(--ui-font);
      color:var(--text);
      min-height:100vh;
      background:
        radial-gradient(1200px 600px at 15% 20%, #0ea5e9 0%, transparent 55%),
        radial-gradient(1200px 600px at 85% 80%, #22c55e 0%, transparent 55%),
        linear-gradient(135deg, var(--bg1), var(--bg2));
      display:flex; align-items:center; justify-content:center;
      padding:24px;
    }

    /* =========================
       MINI GAME OVERLAY MODE
       (Center stage + single color bg)
       ========================= */
    body.minigame-open{
      padding:0;
      overflow:hidden; /* sayfa kaymasın */
      align-items:stretch;
      justify-content:stretch;
    }
    body.minigame-open .topbar,
    body.minigame-open .nav,
    body.minigame-open #helpLumoBtn,
    body.minigame-open #lumoIntro{
      display:none !important;
    }

    /* ana uygulama alanini sahnenin arkasinda tutuyoruz ama sabitliyoruz */
    body.minigame-open .app{
      width:100vw;
      height:100vh;
      min-height:100vh;
      border-radius:0;
      background:transparent;
      box-shadow:none;
    }
    body.minigame-open .wrap{
      grid-template-columns: 1fr;
      min-height: 100vh;
    }
    body.minigame-open .panel{
      padding:0;
      height:100vh;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    /* ekran tam kaplansin ama icerde odak sahnesi kalsin */
    body.minigame-open #screenAttention{
      width:100%;
      height:100%;
      display:flex !important;
      align-items:center;
      justify-content:center;
    }

    /* baslik/metin: sahne icine tasimiyoruz, minigame modunda gizli */
    body.minigame-open #screenAttention > h3,
    body.minigame-open #screenAttention > p{
      display:none !important;
    }

    /* sahne karti */
    body.minigame-open #screenAttention > .card{
      width:min(980px, calc(100vw - 40px));
      height:min(620px, calc(100vh - 40px));
      margin:0;
      display:flex;
      flex-direction:column;
      position:relative;
      overflow:hidden;
      background: #050b14; /* odak penceresi tek renk */
      border:1px solid rgba(255,255,255,.12);
      border-radius: 18px;
      box-shadow: 0 18px 50px rgba(0,0,0,.45);
    }

    
    /* XOX ekranı da mini oyun sahnesinde tek başına kalsın */
    body.minigame-open #screenXox{
      width:100%;
      height:100%;
      display:flex !important;
      align-items:center;
      justify-content:center;
    }
    body.minigame-open #screenXox > h3,
    body.minigame-open #screenXox > p{
      display:none !important;
    }
    body.minigame-open #screenXox > .card{
      width:min(980px, calc(100vw - 40px));
      height:min(620px, calc(100vh - 40px));
      margin:0;
      display:flex;
      flex-direction:column;
      position:relative;
      overflow:hidden;
      background: #050b14; /* odak penceresi tek renk */
      border:1px solid rgba(255,255,255,.12);
      border-radius: 18px;
      box-shadow: 0 18px 50px rgba(0,0,0,.45);
    }
body.minigame-open #screenAttention .sbTop{
      flex:0 0 auto;
    }
    body.minigame-open #screenAttention .sbBoard{
      flex:1 1 auto;
      overflow:hidden;
      align-content:start;
    }


    /* ✅ kritik düzeltme: minigame-open modunda bile .hidden olan ekran ZORLA gizlensin */
    body.minigame-open #screenAttention.hidden{ display:none !important; }
    body.minigame-open #screenXox.hidden{ display:none !important; }

    body.minigame-open #screenAttention .sbBoard{
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap:10px;
    }
    @media (max-width: 900px){
      body.minigame-open #screenAttention .sbBoard{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    @media (max-height: 700px){
      body.minigame-open #screenAttention .sbIcon{ width:58%; height:58%; }
      body.minigame-open #screenAttention .sbBoard{ gap:8px; }
    }
    body.minigame-open #screenAttention #sbMsg{
      flex:0 0 auto;
    }

    body.minigame-open #guideDock{
      position:absolute;
      left:max(14px, env(safe-area-inset-left));
      bottom:max(14px, env(safe-area-inset-bottom));
      z-index:10020;
    }
    body.minigame-open #lumiDock{
      animation:none !important;
      transform:none !important;
    }
    body.minigame-open #lumiImg{
      animation:none !important;
      transform:none !important;
    }
    body.minigame-open #lumoWrap{
      /* mini oyunlarda rehber mesajı "toast" gibi: kısa, sakin, ekrana yapışık */
      animation:none !important;
      transform:none !important;
      position:absolute;
      left:104px;
      bottom:auto;
      right:auto;
      top:0;
      max-width:300px;
      pointer-events:none;
      opacity:0;
      transition: opacity .18s ease, transform .18s ease;
    }
    body.minigame-open #lumoWrap.show{
      opacity:1;
      transform: translateY(-2px);
    }
    body.minigame-open #lumoBubble{
      font-size:13px;
      line-height:1.25;
      padding:10px 12px;
      max-height:72px;
      overflow:hidden;
      text-overflow: ellipsis;
    }
    body.minigame-open #lumoContinue{
      display:none !important;
    }
    body.minigame-open #lumoWrap.action{
      pointer-events:auto;
    }
    body.minigame-open #lumoWrap.action #lumoContinue{
      display:inline-flex !important;
    }

    body.minigame-open.attention-menu-visible .topbar,
    body.minigame-open.minigame-menu-visible .topbar{
      display:flex !important;
    }
    body.minigame-open.attention-menu-visible .nav,
    body.minigame-open.minigame-menu-visible .nav{
      display:block !important;
    }
    body.minigame-open.attention-menu-visible .wrap,
    body.minigame-open.minigame-menu-visible .wrap{
      min-height:calc(100vh - 79px);
    }
    body.minigame-open.attention-menu-visible .panel,
    body.minigame-open.minigame-menu-visible .panel{
      height:calc(100vh - 79px);
    }

    .app{
      position: relative;
      width:min(1100px, 100%);
      height:min(720px, calc(100dvh - 48px));
      min-height:0;
      border:1px solid var(--stroke);
      border-radius: 22px;
      background: rgba(255,255,255,.04);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .topbar{
      position:fixed;
      top:max(18px, env(safe-area-inset-top));
      left:max(18px, env(safe-area-inset-left));
      z-index:10040;
      display:flex; align-items:center; justify-content:flex-start;
      gap:12px; padding:0;
      border-bottom:0;
      background: transparent;
      backdrop-filter: none;
    }
    .topbarLead{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
    }
    .brand{display:flex; align-items:center; gap:12px; font-weight:900;}
    .brand > div:last-child{
      min-width:0;
    }
    .topbar .brand,
    .topbar > .pill{
      display:none !important;
    }
    .menuToggle,
    .homeToggle{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:56px;
      height:56px;
      min-width:56px;
      min-height:56px;
      padding:0;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.14);
      background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
      color:var(--text);
      cursor:pointer;
      font-weight:900;
      box-shadow: 0 12px 28px rgba(0,0,0,.18);
      transition: transform .16s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
      flex:0 0 auto;
    }
    .homeToggle{
      overflow:hidden;
    }
    .fullscreenToggle{
      display:inline-flex;
      align-items:center;
      gap:10px;
      min-height:52px;
      padding:12px 14px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.14);
      background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
      color:var(--text);
      cursor:pointer;
      font-weight:900;
      box-shadow: 0 12px 28px rgba(0,0,0,.16);
      transition: transform .16s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
      flex:0 0 auto;
    }
    .menuToggle:hover,
    .homeToggle:hover{
      transform: translateY(-1px);
      border-color: rgba(56,189,248,.35);
      background: linear-gradient(180deg, rgba(56,189,248,.18), rgba(255,255,255,.06));
    }
    .fullscreenToggle:hover{
      transform: translateY(-1px);
      border-color: rgba(56,189,248,.32);
      background: linear-gradient(180deg, rgba(56,189,248,.14), rgba(255,255,255,.05));
    }
    .menuToggle:focus-visible,
    .homeToggle:focus-visible,
    .fullscreenToggle:focus-visible,
    .navCloseBtn:focus-visible,
    .navItem:focus-visible{
      outline:2px solid rgba(56,189,248,.72);
      outline-offset:2px;
    }
    .menuToggleBars{
      display:grid;
      gap:4px;
      width:18px;
      flex:0 0 auto;
    }
    .menuToggleBars span{
      display:block;
      height:2px;
      border-radius:999px;
      background: currentColor;
      transform-origin:center;
      transition: transform .18s ease, opacity .18s ease;
    }
    .menuToggleLabel{
      display:none;
      font-size:14px;
      letter-spacing:.02em;
    }
    .homeToggleIcon{
      display:block;
      width:74px;
      height:74px;
      object-fit:cover;
      object-position:center center;
      border-radius:12px;
      transform:none;
      filter:none;
    }
    .fullscreenToggleIcon{
      font-size:17px;
      line-height:1;
    }
    .fullscreenToggleLabel{
      font-size:14px;
      letter-spacing:.02em;
      white-space:nowrap;
    }
    .fullscreenPrompt{
      position:fixed;
      inset:0;
      display:grid;
      place-items:center;
      padding:24px;
      z-index:2147483644;
      pointer-events:auto;
      background: rgba(3,8,20,.28);
      backdrop-filter: blur(12px) saturate(1.04);
    }
    .fullscreenPromptCard{
      position:relative;
      width:min(460px, calc(100vw - 32px));
      padding:22px 22px 18px;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.16);
      background:
        linear-gradient(180deg, rgba(8,13,28,.96), rgba(8,13,28,.86)),
        radial-gradient(circle at top, rgba(56,189,248,.16), transparent 44%);
      box-shadow: 0 28px 70px rgba(2,8,23,.42);
      backdrop-filter: blur(14px);
      color:var(--text);
      text-align:left;
    }
    .fullscreenPromptClose{
      position:absolute;
      top:12px;
      right:12px;
      width:34px;
      height:34px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.06);
      color:var(--text);
      cursor:pointer;
      font-weight:900;
    }
    .fullscreenPromptKicker{
      font-size:11px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:rgba(125,211,252,.92);
      margin-bottom:8px;
    }
    .fullscreenPromptTitle{
      font-size:24px;
      line-height:1.15;
      font-weight:900;
      margin-bottom:10px;
    }
    .fullscreenPromptText{
      color:rgba(226,232,240,.84);
      line-height:1.5;
      margin-bottom:16px;
    }
    .fullscreenPromptActions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .fullscreenPromptHint{
      margin-top:12px;
      color:rgba(191,219,254,.78);
      font-size:12px;
    }
    .entryIntro{
      position:fixed;
      inset:0;
      z-index:2147483646;
      display:grid;
      place-items:center;
      overflow:hidden;
      background:#030712;
    }
    .entryIntroVideo{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center center;
      background:#030712;
    }
    .entryIntroLoading{
      position:relative;
      z-index:2;
      display:flex;
      align-items:center;
      gap:12px;
      padding:14px 18px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(3,7,18,.74);
      color:#eaf2ff;
      font-size:15px;
      font-weight:900;
      box-shadow:0 18px 48px rgba(0,0,0,.34);
      backdrop-filter:blur(12px);
    }
    .entryIntroSpinner{
      width:18px;
      height:18px;
      border-radius:999px;
      border:3px solid rgba(255,255,255,.22);
      border-top-color:#7dd3fc;
      animation:entryIntroSpin .8s linear infinite;
      flex:0 0 auto;
    }
    .entryIntroStatus{
      white-space:nowrap;
    }
    .entryIntro.is-playing .entryIntroLoading{
      opacity:0;
      visibility:hidden;
      transition:opacity .18s ease, visibility .18s ease;
    }
    @keyframes entryIntroSpin{
      to{ transform:rotate(360deg); }
    }
    .logo{
      width:44px;height:44px;border-radius:14px;
      display:grid;place-items:center;
      background: rgba(34,197,94,.18);
      border:1px solid rgba(34,197,94,.35);
      font-weight:900;
    }
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      border:1px solid var(--stroke);
      background: rgba(255,255,255,.06);
      padding:10px 12px;
      border-radius:999px;
      color: var(--muted);
      font-weight:650;
      white-space:nowrap;
    }
    .wrap{
      display:grid;
      grid-template-columns: 1fr;
      height:100%;
      min-height:0;
      position:relative;
    }
    .nav{
      position:fixed;
      left:0;
      top:0;
      bottom:0;
      width:min(340px, calc(100vw - 32px));
      max-width:100%;
      padding:92px 14px 14px;
      border-right:1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, rgba(8,15,28,.94), rgba(11,23,39,.96));
      backdrop-filter: blur(18px);
      z-index:10030;
      overflow:auto;
      box-shadow: 22px 0 48px rgba(0,0,0,.32);
      transform: translateX(calc(-100% - 22px));
      transition: transform .24s ease;
    }
    .navHead{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:16px;
      padding:4px 2px 10px;
    }
    .navEyebrow{
      font-size:12px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      color: rgba(148,163,184,.92);
      margin-bottom:6px;
    }
    .navTitle{
      font-size:19px;
      line-height:1.25;
      font-weight:900;
      color:#f8fbff;
    }
    .navCloseBtn{
      width:42px;
      height:42px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color:var(--text);
      cursor:pointer;
      font-size:18px;
      flex:0 0 auto;
    }
    .navBackdrop{
      position:fixed;
      inset:0;
      border:0;
      background: rgba(3,11,24,.52);
      opacity:0;
      pointer-events:none;
      transition: opacity .22s ease;
      z-index:10020;
    }
    .app.studentMenuOpen .nav{
      transform: translateX(0);
    }
    .app.studentMenuOpen .navBackdrop{
      opacity:1;
      pointer-events:auto;
    }
    .app.studentMenuOpen .menuToggle{
      border-color: rgba(56,189,248,.35);
      background: linear-gradient(180deg, rgba(56,189,248,.2), rgba(255,255,255,.08));
      box-shadow: 0 14px 34px rgba(7,17,34,.28);
    }
    .app.studentMenuOpen .menuToggleBars span:nth-child(1){
      transform: translateY(6px) rotate(45deg);
    }
    .app.studentMenuOpen .menuToggleBars span:nth-child(2){
      opacity:0;
    }
    .app.studentMenuOpen .menuToggleBars span:nth-child(3){
      transform: translateY(-6px) rotate(-45deg);
    }
    .navItem{
      padding:12px 12px;
      border-radius: 14px;
      border:1px solid transparent;
      cursor:pointer;
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:10px;
      background: rgba(255,255,255,.03);
    }
    .navItem:hover{border-color: rgba(255,255,255,.16)}
    .navItem.active{
      background: rgba(56,189,248,.12);
      border-color: rgba(56,189,248,.35);
    }
    .chip{
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(56,189,248,.25);
      background: rgba(56,189,248,.10);
      color: rgba(234,242,255,.85);
      font-weight:700;
    }
    .panel{
      padding:88px 18px 16px;
      height:100%;
      overflow:hidden;
      min-height:0;
    }
    #screenTasks,
    #screenLibrary{
      height:100%;
      min-height:0;
      display:flex;
      flex-direction:column;
      gap:8px;
      overflow:hidden;
    }
    body.task-base-mode,
    body.library-base-mode,
    body.visual-reading-base-mode,
    body.reading-prep-base-mode,
    body.attention-base-mode,
    body.games-base-mode,
    body.guide-select-mode{
      padding:0;
      overflow:hidden;
      align-items:stretch;
      justify-content:stretch;
      background-position:center;
      background-size:cover;
      background-repeat:no-repeat;
      background-attachment:fixed;
    }
    body.task-base-mode{
      background:
        linear-gradient(180deg, rgba(4,9,18,.14), rgba(4,9,18,.36)),
        url("../görevleriç.png") center / cover no-repeat fixed;
    }
    body.library-base-mode{
      background:
        linear-gradient(180deg, rgba(4,9,18,.12), rgba(4,9,18,.34)),
        url("../kütüphaneiç.png") center / cover no-repeat fixed;
    }
    body.visual-reading-base-mode{
      background:
        linear-gradient(180deg, rgba(4,9,18,.12), rgba(4,9,18,.34)),
        url("../görselokumaiç.png") center / cover no-repeat fixed;
    }
    body.reading-prep-base-mode{
      background:
        linear-gradient(180deg, rgba(4,9,18,.12), rgba(4,9,18,.34)),
        url("../okumahazırlıkiç.png") center / cover no-repeat fixed;
    }
    body.attention-base-mode{
      background:
        linear-gradient(180deg, rgba(4,9,18,.12), rgba(4,9,18,.34)),
        url("../dikkatparkuruiç.png") center / cover no-repeat fixed;
    }
    body.games-base-mode{
      background:
        linear-gradient(180deg, rgba(4,9,18,.12), rgba(4,9,18,.34)),
        url("../oyunlariç.png") center / cover no-repeat fixed;
    }
    body.guide-select-mode{
      background:
        linear-gradient(180deg, rgba(4,9,18,.08), rgba(4,9,18,.28)),
        url("../arkaplantamamenboş.png") center / cover no-repeat fixed;
    }
    #appRoot.baseInteriorFocus{
      width:100vw;
      height:100dvh;
      border:0;
      border-radius:0;
      background:transparent;
      box-shadow:none;
    }
    #appRoot.baseInteriorFocus .wrap{
      min-height:100dvh;
      height:100dvh;
    }
    #appRoot.baseInteriorFocus .panel{
      padding:88px clamp(18px, 4vw, 54px) clamp(18px, 4vh, 42px);
      height:100dvh;
      background:transparent;
    }
    #appRoot.baseInteriorFocus #screenTasks,
    #appRoot.baseInteriorFocus #screenLibrary,
    #appRoot.baseInteriorFocus #screenVisualPuzzle,
    #appRoot.baseInteriorFocus #screenGames{
      width:min(920px, 100%);
      margin:0 auto;
    }
    #appRoot.taskBaseFocus #screenTasks{
      width:100%;
      align-items:center;
      justify-content:center;
    }
    #screenTasks.hidden,
    #screenLibrary.hidden{
      display:none !important;
    }
    #screenTasks > h3,
    #screenTasks > p,
    #screenLibrary > h3,
    #screenLibrary > p{
      flex:0 0 auto;
    }
    #screenTasks > .card,
    #screenLibrary > .card{
      flex:1 1 auto;
      min-height:0;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }
    #appRoot.baseInteriorFocus #screenTasks > h3,
    #appRoot.baseInteriorFocus #screenLibrary > h3,
    #appRoot.baseInteriorFocus #screenVisualPuzzle > h3,
    #appRoot.baseInteriorFocus #screenGames > h3{
      margin:0;
      font-size:clamp(24px, 3vw, 34px);
      line-height:1.05;
      text-shadow:0 2px 12px rgba(0,0,0,.42);
    }
    #appRoot.baseInteriorFocus #screenTasks > p,
    #appRoot.baseInteriorFocus #screenLibrary > p,
    #appRoot.baseInteriorFocus #screenVisualPuzzle > p,
    #appRoot.baseInteriorFocus #screenGames > p{
      margin:0;
      max-width:680px;
      color:rgba(234,242,255,.88);
      text-shadow:0 1px 10px rgba(0,0,0,.34);
    }
    .baseInteriorStartBtn{
      appearance:none;
      border:1px solid rgba(255,255,255,.28);
      border-radius:999px;
      padding:16px 30px;
      min-width:190px;
      min-height:58px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:#f8fbff;
      font:900 18px/1 var(--ui-font);
      letter-spacing:0;
      background:
        radial-gradient(circle at 50% 20%, rgba(255,255,255,.22), transparent 36%),
        linear-gradient(180deg, rgba(25,45,72,.78), rgba(8,18,34,.72));
      box-shadow:0 22px 64px rgba(0,0,0,.36), 0 0 28px rgba(255,214,110,.22), inset 0 1px 0 rgba(255,255,255,.2);
      backdrop-filter:blur(8px);
      cursor:pointer;
      text-shadow:0 2px 10px rgba(0,0,0,.45);
      transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    }
    .baseInteriorStartBtn:hover{
      transform:translateY(-2px);
      border-color:rgba(255,255,255,.42);
      box-shadow:0 28px 74px rgba(0,0,0,.42), 0 0 34px rgba(255,214,110,.3), inset 0 1px 0 rgba(255,255,255,.24);
    }
    #appRoot .baseInteriorClosed{
      position:relative;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
    }
    #appRoot.baseInteriorFocus .baseInteriorClosed{
      height:100%;
    }
    #appRoot .baseInteriorClosed > :not(.baseInteriorStartBtn){
      display:none !important;
    }
    #appRoot .baseInteriorOpen{
      position:relative;
    }
    #appRoot .baseInteriorOpen > .baseInteriorStartBtn{
      display:none !important;
    }
    #appRoot .baseInteriorOpen > .baseInteriorScreenClose{
      display:flex !important;
    }
    .baseInteriorContent{
      width:min(920px, 100%);
      max-height:min(680px, calc(100dvh - 132px));
      display:flex;
      flex-direction:column;
      gap:12px;
      min-height:0;
    }
    .baseInteriorHeader{
      flex:0 0 auto;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
    }
    .baseInteriorHeader h3{
      margin:0;
      font-size:clamp(24px, 3vw, 34px);
      line-height:1.05;
      text-shadow:0 2px 12px rgba(0,0,0,.42);
    }
    .baseInteriorHeader p{
      margin:6px 0 0;
      max-width:680px;
      color:rgba(234,242,255,.88);
      text-shadow:0 1px 10px rgba(0,0,0,.34);
    }
    .baseInteriorCloseBtn{
      flex:0 0 auto;
      width:42px;
      height:42px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.22);
      background:rgba(8,18,34,.68);
      color:#fff;
      font:900 24px/1 var(--ui-font);
      cursor:pointer;
      box-shadow:0 12px 30px rgba(0,0,0,.28);
    }
    .baseInteriorScreenClose{
      position:absolute;
      top:0;
      right:0;
      z-index:5;
      align-items:center;
      justify-content:center;
    }
    .baseInteriorContent > .card{
      flex:1 1 auto;
      min-height:0;
      display:flex;
      flex-direction:column;
      overflow:hidden;
      border-color:rgba(255,255,255,.16);
      background:linear-gradient(180deg, rgba(8,18,34,.78), rgba(8,18,34,.62));
      box-shadow:0 26px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter:blur(8px);
    }
    #appRoot.baseInteriorFocus #screenTasks > .card,
    #appRoot.baseInteriorFocus #screenLibrary > .card,
    #appRoot.baseInteriorFocus #screenVisualPuzzle > .card,
    #appRoot.baseInteriorFocus #screenGames .card{
      border-color:rgba(255,255,255,.16);
      background:linear-gradient(180deg, rgba(8,18,34,.78), rgba(8,18,34,.62));
      box-shadow:0 26px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
      backdrop-filter:blur(8px);
    }
    #studentTasksList,
    #studentLibraryList{
      flex:1 1 auto;
      min-height:0;
      overflow:auto;
      padding-right:8px;
      scrollbar-width:auto;
      scrollbar-color:rgba(56,189,248,.85) rgba(255,255,255,.08);
    }
    #studentTasksList::-webkit-scrollbar,
    #studentLibraryList::-webkit-scrollbar{
      width:16px;
    }
    #studentTasksList::-webkit-scrollbar-track,
    #studentLibraryList::-webkit-scrollbar-track{
      background:rgba(255,255,255,.08);
      border-radius:999px;
    }
    #studentTasksList::-webkit-scrollbar-thumb,
    #studentLibraryList::-webkit-scrollbar-thumb{
      min-height:58px;
      border-radius:999px;
      border:4px solid rgba(5,11,20,.55);
      background:linear-gradient(180deg, rgba(56,189,248,.92), rgba(34,197,94,.76));
    }
    #studentTasksEmpty,
    #studentLibraryEmpty{
      flex:0 0 auto;
    }
    @media (max-width: 780px){
      #appRoot.baseInteriorFocus .panel{
        padding:92px 12px 18px;
      }
      #appRoot.baseInteriorFocus #screenTasks > h3,
      #appRoot.baseInteriorFocus #screenLibrary > h3,
      #appRoot.baseInteriorFocus #screenVisualPuzzle > h3,
      #appRoot.baseInteriorFocus #screenGames > h3{
        font-size:24px;
      }
      #appRoot.baseInteriorFocus #screenTasks > p,
      #appRoot.baseInteriorFocus #screenLibrary > p,
      #appRoot.baseInteriorFocus #screenVisualPuzzle > p,
      #appRoot.baseInteriorFocus #screenGames > p{
        font-size:13px;
      }
    }
    @media (max-width: 780px){
      .topbar{
        padding:0;
        align-items:center;
        flex-direction:row;
      }
      .topbarLead{
        width:auto;
      }
      .brand{
        min-width:0;
      }
      .pill{
        width:100%;
        justify-content:center;
        white-space:normal;
        text-align:center;
      }
      .menuToggle{
        min-width:56px;
      }
      .menuToggleLabel{
        display:none;
      }
      .fullscreenToggle{
        min-width:52px;
      }
      .homeToggle{
        min-width:56px;
      }
      .fullscreenToggleLabel{
        display:none;
      }
      .fullscreenPrompt{
        padding:16px;
      }
      .fullscreenPromptCard{
        width:min(100%, 420px);
        padding:20px 18px 16px;
        border-radius:20px;
      }
      .fullscreenPromptTitle{
        font-size:20px;
      }
      .navBackdrop{
        inset:0;
      }
    }
    h3{margin: 6px 0 8px 0}
    p{margin: 0 0 10px 0; color: var(--muted); line-height:1.5}
    .card{
      border:1px solid var(--stroke);
      background: var(--card);
      border-radius: var(--r);
      padding: 14px;
    }
    .hidden{display:none !important}
    .btn{
      border:1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      color: var(--text);
      border-radius: 14px;
      padding: 10px 12px;
      cursor:pointer;
      font-weight:800;
    }
    .btn:hover{border-color: rgba(255,255,255,.25)}
    .btn.primary{
      background: rgba(34,197,94,.18);
      border-color: rgba(34,197,94,.35);
    }
    .btn.ghost{
      background: rgba(56,189,248,.10);
      border-color: rgba(56,189,248,.28);
    }
    .btn:disabled{
      opacity:.45;
      cursor:not-allowed;
      filter: grayscale(.2);
    }
    .small{font-size: 13px; color: rgba(234,242,255,.75)}
    .msg{
      border: 1px dashed rgba(255,255,255,.22);
      padding: 12px;
      border-radius: 14px;
      background: rgba(0,0,0,.12);
      color: rgba(234,242,255,.88);
    }
    input[type="text"], input[type="number"], input{
      width:100%;
      padding:10px 12px;
      border-radius: 12px;
      border:1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.22);
      color: var(--text);
      outline:none;
    }
    label{color: rgba(234,242,255,.88)}
    .row{display:flex; gap:10px; flex-wrap:wrap}
    .grow{flex:1}
    #ltReadingCard{
      display:flex;
      flex-direction:column;
      min-height:min(58vh, 620px);
      max-height:calc(100dvh - 190px);
      overflow:hidden;
    }
    #ltText:not(.hidden){
      display:block;
      flex:1 1 auto;
      min-height:clamp(320px, 52vh, 620px);
      max-height:62vh;
      overflow:auto;
      padding:18px 20px;
      border-radius:18px;
      background:rgba(3,7,18,.16);
      border:1px solid rgba(255,255,255,.08);
      touch-action:pan-y;
      overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;
    }
    #ltQuestions{
      display:flex;
      flex-direction:column;
      gap:12px;
      min-height:min(68vh, 640px);
      max-height:min(72vh, 700px);
      overflow:hidden;
      align-items:center;
    }
    #screenLevel.question-mode{
      height: calc(100vh - 32px);
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-height:0;
      overflow:hidden;
    }
    #screenLevel.question-mode > h3,
    #screenLevel.question-mode > p,
    #screenLevel.question-mode > .card:first-of-type{
      display:none !important;
    }
    #screenLevel.question-mode #ltQuestions{
      margin-top:0 !important;
      flex:1 1 auto;
      min-height:0;
      max-height:none;
      width:min(100%, 940px);
      margin-left:auto;
      margin-right:auto;
      padding:8px 0 12px;
      background:transparent;
      border:none;
      box-shadow:none;
      display:grid;
      grid-template-rows:auto auto minmax(0, 1fr) auto auto;
      align-content:center;
      justify-content:stretch;
      gap:10px;
    }
    .ltWizardHead{
      display:flex;
      flex-direction:column;
      gap:6px;
      width:min(100%, 760px);
      margin:0 auto;
      text-align:center;
    }
    .ltWizardTitle{
      font-weight:900;
      font-size: clamp(22px, 2vw, 28px);
      line-height:1.2;
      color: rgba(248,250,252,.98);
    }
    .ltWizardHint{
      font-size:14px;
      line-height:1.5;
      color: rgba(234,242,255,.76);
    }
    .ltWizardSteps{
      width:min(100%, 520px);
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-wrap:wrap;
      gap:8px;
    }
    .ltWizardStep{
      width:40px;
      min-width:40px;
      height:40px;
      border-radius:999px;
      padding:0;
      cursor:pointer;
      display:grid;
      place-items:center;
      font:inherit;
      color: rgba(234,242,255,.88);
      background: rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }
    .ltWizardStep:hover{
      transform: translateY(-1px);
      border-color: rgba(255,255,255,.18);
    }
    .ltWizardStep.is-current{
      background: linear-gradient(135deg, rgba(96,165,250,.18), rgba(52,211,153,.12));
      border-color: rgba(96,165,250,.34);
      box-shadow: 0 10px 24px rgba(15,23,42,.22);
    }
    .ltWizardStep.is-done{
      background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(16,185,129,.12));
      border-color: rgba(34,197,94,.30);
    }
    .ltWizardStepIndex{
      width:100%;
      height:100%;
      border-radius:999px;
      display:grid;
      place-items:center;
      font-weight:900;
      background: transparent;
    }
    .ltWizardStep.is-current .ltWizardStepIndex{
      background: rgba(96,165,250,.28);
    }
    .ltWizardStep.is-done .ltWizardStepIndex{
      background: rgba(16,185,129,.3);
    }
    .ltWizardStepState{
      display:none;
    }
    .ltWizardViewport{
      flex:1 1 auto;
      min-height:0;
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      width:100%;
    }
    .ltQCard{
      margin-top:10px;
      background: rgba(0,0,0,.14);
      border: 1px solid rgba(255,255,255,.12);
    }
    #ltQuestions .ltQCard{
      display:none;
      margin-top:0;
      width:min(100%, 860px);
      min-height:clamp(300px, 44vh, 500px);
      max-height:min(52vh, 560px);
      overflow:auto;
      padding:30px clamp(20px, 3vw, 36px) 26px;
      border-radius:28px;
      background:
        radial-gradient(circle at top right, rgba(96,165,250,.12), transparent 32%),
        linear-gradient(180deg, rgba(8,20,44,.88), rgba(11,32,58,.92));
      box-shadow: 0 24px 60px rgba(4,10,24,.34);
    }
    #ltQuestions .ltQCard.is-active{
      display:block;
    }
    .ltQEyebrow{
      display:inline-flex;
      align-items:center;
      padding:6px 10px;
      border-radius:999px;
      margin-bottom:10px;
      font-size:11px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color: rgba(191,219,254,.96);
      background: rgba(59,130,246,.14);
      border:1px solid rgba(96,165,250,.24);
    }
    .ltQTitle{
      font-weight:900;
      font-size: clamp(23px, 2vw, 30px);
      margin-bottom:8px;
      line-height:1.35;
      text-align:center;
    }
    .ltQPrompt{
      max-width: 640px;
      margin:0 auto 14px;
      margin-bottom:10px;
      color: rgba(234,242,255,.86);
      line-height:1.55;
      text-align:center;
      font-family: var(--reading-font);
      font-variant-ligatures: none;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .ltOption{
      position:relative;
      display:flex;
      align-items:flex-start;
      gap:10px;
      margin-top:8px;
      padding:10px 12px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.03);
      cursor:pointer;
      transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .12s ease;
    }
    .ltOption input[type="radio"]{
      position:absolute;
      opacity:0;
      pointer-events:none;
      width:1px;
      height:1px;
    }
    .ltOption::before{
      content:"";
      width:18px;
      height:18px;
      border-radius:999px;
      border:2px solid rgba(255,255,255,.35);
      margin-top:1px;
      flex:0 0 auto;
      box-shadow: inset 0 0 0 0 rgba(34,197,94,.95);
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .ltOption:hover{
      transform: translateY(-1px);
      border-color: rgba(255,255,255,.25);
      background: rgba(255,255,255,.05);
    }
    .ltOption.selected{
      border-color: rgba(34,197,94,.62);
      background: linear-gradient(135deg, rgba(34,197,94,.22), rgba(16,185,129,.16));
      box-shadow: 0 0 0 2px rgba(34,197,94,.20), 0 10px 24px rgba(0,0,0,.24);
    }
    .ltOption.selected::before{
      border-color: rgba(16,185,129,.98);
      background: rgba(16,185,129,.96);
      box-shadow: inset 0 0 0 3px rgba(6,78,59,.9);
    }
    .ltOptionText{
      line-height:1.45;
      color: rgba(234,242,255,.96);
      font-family: var(--reading-font);
      font-variant-ligatures: none;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .ltOptionsWrap{
      display:flex;
      flex-direction:column;
      gap:8px;
      max-width: 640px;
      margin:0 auto;
    }
    .ltAnswerInput{
      max-width: 640px;
      display:block;
      margin:4px auto 0;
      width:100%;
      min-height:44px;
      border-radius:12px;
      font-family: var(--reading-font);
      font-variant-ligatures: none;
      text-rendering: optimizeLegibility;
    }
    .ltQuestionActions{
      margin-top:0;
      align-items:center;
      justify-content:space-between;
      width:min(100%, 860px);
      margin-left:auto;
      margin-right:auto;
      padding:0 2px;
      flex:0 0 auto;
    }
    .ltQuestionActions .btn{
      min-width:132px;
    }
    .ltQuestionStatus{
      margin-top:0 !important;
      width:min(100%, 860px);
      margin-left:auto;
      margin-right:auto;
      text-align:center;
      flex:0 0 auto;
    }
    .ltOption.is-correct-answer{
      border-color: rgba(34,197,94,.72);
      background: linear-gradient(135deg, rgba(34,197,94,.24), rgba(16,185,129,.14));
      box-shadow: 0 0 0 2px rgba(34,197,94,.18);
    }
    .ltOption.is-correct-answer::before{
      border-color: rgba(16,185,129,.98);
      background: rgba(16,185,129,.96);
      box-shadow: inset 0 0 0 3px rgba(6,78,59,.92);
    }
    .ltOption.is-wrong-answer{
      border-color: rgba(248,113,113,.68);
      background: linear-gradient(135deg, rgba(248,113,113,.18), rgba(239,68,68,.10));
      box-shadow: 0 0 0 2px rgba(248,113,113,.14);
    }
    .ltOption.is-wrong-answer::before{
      border-color: rgba(248,113,113,.92);
      background: rgba(248,113,113,.82);
      box-shadow: inset 0 0 0 3px rgba(127,29,29,.74);
    }
    .ltWizardStep.is-reviewed.is-correct .ltWizardStepIndex{
      background: rgba(34,197,94,.36);
    }
    .ltWizardStep.is-reviewed.is-wrong .ltWizardStepIndex{
      background: rgba(248,113,113,.34);
    }
    .ltQuestionReview{
      width:min(100%, 860px);
      margin:0 auto;
      padding:10px 12px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.1);
      background: rgba(3,7,18,.32);
      color: rgba(234,242,255,.9);
      font-size:13px;
      line-height:1.35;
      max-height:86px;
      overflow:auto;
      text-align:left;
    }
    .ltQuestionReview.is-perfect{
      text-align:center;
      border-color: rgba(34,197,94,.24);
      background: rgba(22,101,52,.18);
    }
    .ltQuestionReviewTitle{
      font-weight:900;
      margin-bottom:6px;
    }
    .ltQuestionReviewItem{
      display:grid;
      gap:2px;
      padding:6px 0;
      border-top:1px solid rgba(255,255,255,.08);
    }
    .ltQuestionReviewItem:first-of-type{
      border-top:0;
    }
    #ltReadingCard.assessment-question-mode{
      gap:12px;
    }
    #ltReadingCard.assessment-question-mode #ltQuestions.assessment-inline-card{
      margin-top:0 !important;
      padding:0;
      background:transparent;
      border:none;
      box-shadow:none;
      min-height:auto;
      max-height:none;
    }
    #ltReadingCard.assessment-question-mode #ltQuestions.assessment-inline-card > .ltWizardViewport{
      min-height:320px;
    }
    #ltReadingCard.assessment-question-mode #ltQuestions.assessment-inline-card > .ltWizardViewport > .ltQCard{
      background:
        radial-gradient(circle at top right, rgba(96,165,250,.08), transparent 30%),
        rgba(0,0,0,.18);
    }
    @media (max-width: 780px){
      #ltQuestions{
        min-height:min(72vh, 680px);
        max-height:min(78vh, 760px);
      }
      .ltWizardSteps{
        width:100%;
      }
      .ltQuestionActions{
        display:grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #ltQuestions .ltQCard{
        min-height:clamp(280px, 48vh, 460px);
        max-height:50vh;
      }
    .ltQuestionActions #btnCheck,
    .ltQuestionActions #btnNextStage{
      grid-column: 1 / -1;
    }
  }
  .studentLibraryQuestionsWrap{
    display:grid;
    gap:10px;
  }
  .studentLibraryQuestionSteps{
    width:min(100%, 520px);
  }
  .studentLibraryQuestionViewport{
    min-height:clamp(300px, 42vh, 500px);
  }
  #studentLibraryReaderQuestions .studentLibraryQuestionCard{
    display:none !important;
    width:min(100%, 860px);
    min-height:clamp(300px, 42vh, 500px);
    max-height:min(52vh, 560px);
    overflow:auto;
    margin:0 auto;
  }
  #studentLibraryReaderQuestions .studentLibraryQuestionCard.is-active{
    display:block !important;
  }
  .studentLibraryQuestionActions{
    margin:0 auto;
  }
  #studentLibraryReaderQuestions .studentBlankInput{
    width:min(100%, 640px);
    margin:0 auto;
  }
  #screenLibraryReader{
    min-height:calc(100dvh - 120px);
  }
  .studentLibraryReaderShell{
    width:min(1180px, 100%);
    min-height:calc(100dvh - 122px);
    margin:0 auto;
    display:grid;
    grid-template-rows:auto minmax(0, 1fr) auto;
    gap:12px;
    overflow:visible;
  }
  .studentLibraryReaderTop{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
  }
  .studentLibraryReadingCard{
    min-height:0;
    display:grid;
    grid-template-rows:auto auto auto minmax(0, 1fr);
    gap:12px;
    overflow:hidden;
  }
  .libraryReaderBody.studentLibraryReaderBody,
  #studentLibraryReaderBody.studentLibraryReaderBody{
    height:clamp(430px, 58vh, 700px) !important;
    min-height:clamp(430px, 58vh, 700px) !important;
    max-height:clamp(430px, 58vh, 700px) !important;
    overflow-y:scroll !important;
    overflow-x:hidden !important;
    padding:22px 26px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(2,8,23,.24);
    font-size:clamp(20px, 2vw, 27px);
    line-height:1.72;
    scrollbar-width:auto !important;
    scrollbar-color:rgba(56,189,248,.9) rgba(255,255,255,.10) !important;
  }
  #studentLibraryReaderBody.studentLibraryReaderBody::-webkit-scrollbar{
    width:20px;
  }
  #studentLibraryReaderBody.studentLibraryReaderBody::-webkit-scrollbar-track{
    background:rgba(255,255,255,.08);
    border-radius:999px;
  }
  #studentLibraryReaderBody.studentLibraryReaderBody::-webkit-scrollbar-thumb{
    min-height:64px;
    border-radius:999px;
    border:4px solid rgba(5,11,20,.58);
    background:linear-gradient(180deg, rgba(56,189,248,.95), rgba(34,197,94,.82));
  }
  .studentLibraryPageBar{
    flex:0 0 auto;
  }
  .studentLibraryQuestionsWrap{
    height:calc(100dvh - 190px);
    min-height:clamp(540px, 70vh, 780px);
    grid-template-rows:auto auto minmax(0, 1fr) auto;
    align-content:start;
    overflow:visible;
    padding-top:10px;
  }
  #studentLibraryReaderQuestions{
    display:grid;
    gap:12px;
    min-height:0;
  }
  .studentLibraryQuestionViewport{
    height:100%;
    min-height:0;
    display:flex;
    align-items:flex-start;
    justify-content:center;
  }
  #studentLibraryReaderQuestions .studentLibraryQuestionCard{
    width:min(100%, 960px);
    min-height:100%;
    max-height:none;
    overflow:visible;
    padding:18px 24px 24px;
  }
  .studentLibraryQuestionActions{
    width:min(100%, 960px);
  }
    #readingPrepOverlay{
      position: fixed;
      inset: 0;
      z-index: 1200;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0;
      background: transparent;
      backdrop-filter: none;
      pointer-events:auto;
    }
    .prepCard{
      width:min(360px, calc(100vw - 28px));
      border:1px solid rgba(255,255,255,.14);
      border-radius:24px;
      background: linear-gradient(180deg, rgba(9,15,30,.94), rgba(7,12,24,.88));
      box-shadow: 0 18px 44px rgba(2,8,23,.28);
      padding:18px 18px 16px;
      text-align:center;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:10px;
      pointer-events:auto;
    }
    .prepTitle{ font-size:20px; font-weight:900; margin-bottom:6px; }
    .prepSub{ color: rgba(234,242,255,.82); line-height:1.45; margin-bottom:14px; }
    .prepCountdown{
      --pct: 1;
      width:124px;
      height:124px;
      margin: 0 auto 12px;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:
        conic-gradient(rgba(34,197,94,.95) calc(var(--pct) * 1turn), rgba(255,255,255,.14) 0turn);
      position:relative;
    }
    .prepCountdown::before{
      content:"";
      position:absolute;
      inset:10px;
      border-radius:999px;
      background: rgba(7,14,26,.96);
      border:1px solid rgba(255,255,255,.16);
    }
    .prepSec{
      position:relative;
      z-index:1;
      font-size:34px;
      font-weight:900;
      letter-spacing:.5px;
    }
    .prepBreath{
      margin: 0 0 8px;
      color: rgba(234,242,255,.92);
      font-weight:800;
    }

    body.reading-prep #guideDock,
    body.reading-prep #lumoWrap{
      display: none !important;
    }
    body.reading-prep #prepStartBtn{
      display: none !important;
    }
    body.reading-prep #readingPrepOverlay{
      pointer-events:auto !important;
    }
    body.prep-countdown #guideDock,
    body.prep-countdown #lumoWrap{
      display: none !important;
    }
    body.prep-countdown #readingPrepOverlay{
      align-items:center;
      justify-content:center;
      padding:0;
    }
    body.prep-countdown #prepCard{
      width:auto;
      border:none;
      border-radius:0;
      background:transparent;
      box-shadow:none;
      padding:0;
      gap:8px;
      pointer-events:none;
    }
    body.prep-countdown #prepStartBtn,
    body.prep-countdown .prepTitle,
    body.prep-countdown .prepSub{
      display:none !important;
    }
    body.prep-countdown .prepBreath{
      font-size:18px;
      font-weight:900;
      text-shadow: 0 8px 30px rgba(2,8,23,.28);
    }
    body.prep-countdown .prepCountdown{
      width:136px;
      height:136px;
      margin:0 auto;
      box-shadow: 0 0 0 10px rgba(255,255,255,.06), 0 18px 36px rgba(2,8,23,.24);
    }


    body.reading-prep #ltReadingCard{
      position:relative;
      overflow:hidden;
    }
    body.reading-prep #ltText{
      filter: blur(3px);
      opacity:.78;
      transition: filter .24s ease, opacity .24s ease;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-kerning: normal;
    }
    body.reading-prep #ltReadingCard::after{
      content:"";
      position:absolute;
      inset:0;
      background: rgba(2,8,20,.16);
      pointer-events:none;
    }
    @media (max-width: 640px){
      #readingPrepOverlay{
        padding:12px 12px 18px;
      }
      .prepCard{
        width:min(340px, calc(100vw - 20px));
        border-radius:20px;
        padding:16px 14px 14px;
      }
    }
    .charCard{
      transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
      user-select:none;
      padding:12px;
      width:160px;
    }
    .charCard.selected{
      border-color: rgba(34,197,94,.65) !important;
      box-shadow: 0 0 0 3px rgba(34,197,94,.18), 0 18px 50px rgba(0,0,0,.35);
      transform: translateY(-2px);
    }

    .readingFocus .topbar,
    .readingFocus .nav{ display:none !important; }
    body.readingFocus{ overflow: hidden; }
    .readingFocus .wrap{ grid-template-columns: 1fr; }
    .readingFocus .panel{ padding: 16px; overflow: hidden; }
    body.teacher-assessment-reading-shell .topbar,
    body.teacher-assessment-reading-shell .nav,
    body.teacher-assessment-reading-shell #guideDock,
    body.teacher-assessment-reading-shell #lumoWrap,
    body.teacher-assessment-reading-shell #helpLumoBtn{
      display:none !important;
    }
    body.teacher-assessment-reading-shell .wrap{
      grid-template-columns: 1fr;
      min-height:100vh;
    }
    body.teacher-assessment-reading-shell .panel{
      padding:16px;
    }
    body.teacher-assessment-reading-shell #screenLevel > h3,
    body.teacher-assessment-reading-shell #screenLevel > p{
      display:none !important;
    }
    body.teacher-assessment-reading-shell #screenLevel > .card{
      margin-top:0 !important;
    }
    .readingFocus #screenLevel{
      height: calc(100vh - 32px);
      display:flex;
      flex-direction:column;
      min-height:0;
      overflow:hidden;
    }
    .readingFocus #screenLevel > h3,
    .readingFocus #screenLevel > p{
      display:none !important;
    }
    .readingFocus #screenLevel > .card{
      margin-top:0 !important;
      flex:1 1 auto;
      min-height:0;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }
    .readingFocus #stageProgress,
    .readingFocus #ltMeta,
    .readingFocus #ltHelper,
    .readingFocus #ltControls,
    .readingFocus #ltMsg{ display:none !important; }

    #focusBar{
      display:none;
      align-items:center;
      justify-content:flex-end;
      gap:8px;
      margin-bottom:0;
    }
    .readingFocus #focusBar{
      display:flex !important;
      position:fixed !important;
      left:50% !important;
      right:auto !important;
      transform:translateX(-50%) !important;
      bottom:max(14px, env(safe-area-inset-bottom)) !important;
      z-index:2147483646 !important;
      margin:0 !important;
      padding:0 !important;
      background: transparent !important;
      border:none !important;
      border-radius:0 !important;
      box-shadow:none !important;
    }
    body.reading-prep #focusBar,
    body.prep-countdown #focusBar{ display:none !important; }
    .readingFocus #helpLumoBtn,
    body.reading-prep #helpLumoBtn,
    body.prep-countdown #helpLumoBtn{ display:none !important; }
    .readingFocus #focusBar .pill{
      display:inline-flex !important;
      align-items:center;
    }
    .readingFocus #ltTimerPill{ display:none !important; }
    .readingFocus #ltTitle{ margin-top:0 !important; margin-bottom:4px !important; }

    .readingFocus #ltReadingCard{
      margin-top: 2px !important;
      padding: 14px;
      background: rgba(0,0,0,.18) !important;
      display:flex;
      flex-direction:column;
      height: min(64vh, 620px);
      max-height: calc(100vh - 150px);
      overflow: hidden;
    }
    .readingFocus #ltText{
      font-size: 18px;
      line-height: 1.85;
      flex:1 1 auto;
      overflow: hidden;
      white-space: pre-wrap;
      font-family: var(--reading-font);
      font-variant-ligatures: none;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      letter-spacing: .01em;
    }
    #ltPager{
      display:none;
      align-items:center;
      justify-content:center;
      gap:8px;
      margin-top:10px;
    }
    #ltPager.on{ display:flex; }
    .ltPageBar{
      display:flex;
      flex-direction:column;
      gap:8px;
      margin-bottom:12px;
      padding:12px 14px;
      border-radius:16px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
    }
    .ltPageBar.hidden{ display:none; }
    .ltPageBarMeta{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      font-weight:800;
      color:rgba(234,242,255,.9);
    }
    .ltPageRemain{
      color:rgba(234,242,255,.68);
      font-weight:700;
    }
    .ltPageTrack{
      position:relative;
      height:8px;
      border-radius:999px;
      overflow:hidden;
      background:rgba(255,255,255,.1);
    }
    .ltPageFill{
      position:absolute;
      inset:0 auto 0 0;
      width:0%;
      border-radius:inherit;
      background:linear-gradient(90deg, rgba(96,165,250,.95), rgba(52,211,153,.95));
      transition:width .24s ease;
    }
    #ltPageInfo{
      min-width: 88px;
      text-align:center;
      font-weight:800;
      color: rgba(234,242,255,.88);
    }
    #ltPager .btn{ padding:8px 10px; min-width:66px; }

    .charArt{ width:120px; height:140px; margin:0 auto 8px; display:block; }
    .charName{font-weight:900;margin-top:6px}
    .charSub{font-size:12px;color:rgba(234,242,255,.72);font-weight:700}

    /* Oda kartları (Profil 3. adım) */
    .roomGrid{display:flex;gap:10px;flex-wrap:wrap}
    .roomCard{cursor:pointer;background:rgba(255,255,255,.04)}
    .roomThumb{
      width:160px;height:96px;border-radius:14px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.18);
      margin:0 auto 10px;
      position:relative; overflow:hidden;
    }
    .roomThumb::before{
      content:"";
      position:absolute; inset:-40%;
      background: radial-gradient(closest-side at 30% 30%, rgba(56,189,248,.35), transparent 60%),
                  radial-gradient(closest-side at 70% 70%, rgba(34,197,94,.28), transparent 58%),
                  linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
      transform: rotate(12deg);
    }
    .roomThumb.roomThumbPhoto::before{
      background-image: var(--roomPhoto);
      background-size: cover;
      background-position: center;
      opacity: .75;
    }

    .roomCard[data-room="room2"] .roomThumb::before{
      background: radial-gradient(closest-side at 30% 30%, rgba(34,197,94,.30), transparent 62%),
                  radial-gradient(closest-side at 70% 70%, rgba(245,158,11,.20), transparent 58%),
                  linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
    }
    .roomCard[data-room="room3"] .roomThumb::before{
      background: radial-gradient(closest-side at 30% 30%, rgba(168,85,247,.32), transparent 62%),
                  radial-gradient(closest-side at 70% 70%, rgba(56,189,248,.20), transparent 58%),
                  linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
    }
    .roomCard[data-room="room4"] .roomThumb::before{
      background: radial-gradient(closest-side at 30% 30%, rgba(245,158,11,.30), transparent 62%),
                  radial-gradient(closest-side at 70% 70%, rgba(239,68,68,.16), transparent 58%),
                  linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
    }



    .roomSvg .wall{ fill: var(--wallColor, #233a62); }
    .roomSvg .floor{ fill: rgba(0,0,0,.22); }
    .roomSvg .shelf{ fill: rgba(255,255,255,.10); stroke: rgba(255,255,255,.10); stroke-width:1; }
    .roomSvg .desk{ fill: rgba(255,255,255,.10); }
    .roomSvg .leg{ fill: rgba(255,255,255,.08); }
    .roomSvg .bed{ fill: rgba(255,255,255,.11); }
    .roomSvg .pillow{ fill: rgba(255,255,255,.18); }
    .roomSvg .board{ fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.10); stroke-width:1; }
    .roomSvg .badge{ fill: rgba(234,242,255,.22); }
    .roomSvg .book{ fill: rgba(234,242,255,.22); }

    
    /* =========================
       PROFILE STEP 3: ODA ÖNİZLEME (Premium)
       - Alan ne kadarsa o kadar büyük
       - Temiz: placeholder katmanlar görünmez
       ========================= */
    .roomPreview{
      width:320px; max-width:100%;
      aspect-ratio: 16/10;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.12);
      overflow:hidden;
    }

    /* Step 3'te önizlemeyi "hero" yap */
    #pfStep3 .roomPreview.big{
      width:100%;
      max-width:none;          /* container ne kadarsa o */
      aspect-ratio: 16/8.2;
      max-height: 360px;
      border-radius:24px;
      position:relative;
      background: rgba(0,0,0,.18);
      border:1px solid rgba(255,255,255,.16);
      box-shadow: 0 22px 70px rgba(0,0,0,.45);
      transform: translateZ(0);
    }

    /* Görsel tam doldursun */
    #pfStep3 .roomPreview.big img{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
      transform: scale(1.015);
      transition: transform .7s cubic-bezier(.2,.8,.2,1);
      will-change: transform;
    }

    /* Premium çerçeve + parlama */
    #pfStep3 .roomPreview.big::before{
      content:"";
      position:absolute; inset:0;
      border-radius:inherit;
      padding:1px;
      background: linear-gradient(135deg, rgba(56,189,248,.55), rgba(34,197,94,.45), rgba(255,255,255,.18));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      pointer-events:none;
      opacity:.85;
    }
    #pfStep3 .roomPreview.big::after{
      content:"";
      position:absolute;
      inset:-30% -40%;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 45%);
      transform: rotate(12deg);
      pointer-events:none;
      opacity:.35;
      mix-blend-mode: screen;
    }

    /* Hover: hafif yaklaşma */
    #pfStep3 .roomPreview.big:hover img{
      transform: scale(1.05);
    }

    
    /* Buddy picker (premium) */
    .buddyGrid{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      width:100%;
    }
    .buddyCard{
      display:flex;
      align-items:center;
      gap:12px;
      padding:10px 12px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      box-shadow: 0 16px 44px rgba(0,0,0,.28);
      cursor:pointer;
      user-select:none;
      transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
      min-width: 0;
      width: 100%;
      max-width: none;
    }
    .buddyCard:hover{
      transform: translateY(-2px);
      border-color: rgba(56,189,248,.35);
      background: rgba(255,255,255,.08);
      box-shadow: 0 22px 60px rgba(0,0,0,.34);
    }
    .buddyCard.selected{
      border-color: rgba(34,197,94,.45);
      background: rgba(34,197,94,.12);
      box-shadow: 0 26px 70px rgba(0,0,0,.38);
    }
    .buddyAvatar{
      width:54px;height:54px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.16);
      background: rgba(0,0,0,.10);
      overflow:hidden;
      flex:0 0 auto;
      position:relative;
    }
    .buddyAvatar::after{
      content:"";
      position:absolute; inset:-40% -60%;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.20), transparent 50%);
      transform: rotate(12deg);
      opacity:.45;
      pointer-events:none;
      mix-blend-mode: screen;
    }
    .buddyAvatar img{ width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02); }
    .buddyMeta{ min-width:0; flex:1 1 auto; }
    .buddyMeta .t{ font-weight:900; font-size:16px; line-height:1.15; margin-bottom:4px; }
    .buddyMeta .s{ font-size:12px; opacity:.9; margin-top:2px; line-height:1.25; }
@media (prefers-reduced-motion: reduce){
      #pfStep3 .roomPreview.big img{ transition:none; }
    }

    /* Önizlemede pano/rozet/kitap placeholderlarını gizle (sistem arkada kalsın) */
    .roomPreview .board, .roomPreview .badge, .roomPreview .book{ display:none !important; }
.chipBtn{ cursor:pointer; border-radius:999px; padding:8px 10px; font-weight:800; font-size:12px;
      border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: rgba(234,242,255,.92);
      display:flex; align-items:center; gap:8px; }

    /* Bölünmüş Dikkat: soru overlay */
    .sbOverlay{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(8px);
      z-index: 50;
      padding: 18px;
    
  pointer-events:none;
}
    .sbOverlay.hidden{ display:none; }
.sbOverlay:not(.hidden){ pointer-events:auto; }

    .sbQCard{
      width: min(520px, 92%);
      border:1px solid rgba(255,255,255,.16);
      border-radius: 18px;
      background: rgba(17,24,39,.92);
      box-shadow: 0 18px 50px rgba(0,0,0,.45);
      padding: 16px;
      text-align:center;
    }
    .sbQTitle{ font-weight: 1000; font-size: 16px; letter-spacing: .2px; }

    .sbQInputRow{ display:flex; gap:10px; align-items:center; margin-top:10px; }
    .sbQInputRow input{ flex:1; min-width: 140px; }
    .sbQInputRow .btn{ white-space:nowrap; }
    .sbQChoices{ margin-top: 12px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
    .sbQChoices .btn{ padding: 10px 14px; border-radius: 999px; font-weight: 900; }
    .sbQResult{ margin-top: 14px; display:flex; flex-direction:column; align-items:center; gap:8px; }
    .sbTick{
      width: 42px; height: 42px; border-radius: 999px;
      display:flex; align-items:center; justify-content:center;
      background: rgba(34,197,94,.25);
      border: 1px solid rgba(34,197,94,.55);
      font-size: 26px; font-weight: 1000; color: rgba(34,197,94,.95);
    }
    .sbQResultText{ opacity: .92; font-weight: 900; }

    .chipDot{ width:12px; height:12px; border-radius:999px; border:1px solid rgba(255,255,255,.25); }
    .chipBtn.active{ border-color: rgba(56,189,248,.55); box-shadow: 0 0 0 3px rgba(56,189,248,.16); }
    
    /* =========================
       PROFİL OLUŞTURMA ODAK MODU
       - Profil eksikse sadece adım kartı + ilerleme görünsün
       ========================= */
    
    /* =========================
       PROFİL OLUŞTURMA ODAK MODU
       - Tek kart + adım ilerleme
       - Scroll yok
       ========================= */
    body.profile-open{
      padding:0;
      overflow:hidden;
      align-items:stretch;
      justify-content:stretch;
    }
    body.profile-open .app{
      width:100vw;
      height:100vh;
      min-height:100vh;
      border-radius:0;
      box-shadow:none;
      background: rgba(255,255,255,.04);
    }
    body.profile-open .wrap{
      grid-template-columns: 1fr;
      min-height: 100vh;
    }

    #appRoot.profileFocus .topbar,
    #appRoot.profileFocus .nav{
      display:none !important;
    }
    #appRoot.profileFocus .wrap{ grid-template-columns: 1fr; min-height:100vh; }
    #appRoot.profileFocus .panel{
      padding: 16px 0 24px;
      height:100vh;
      overflow-y:auto;
      overflow-x:hidden;
      display:flex;
      align-items:flex-start;
      justify-content:center;
    }

    /* Profil ekranında kalabalığı azalt */
    #appRoot.profileFocus #screenProfile > h3,
    #appRoot.profileFocus #pfStats,
    #appRoot.profileFocus #pfSummary{
      display:none !important;
    }

    /* Wizard sahnesi */
    #appRoot.profileFocus #screenProfile{
      width:min(760px, calc(100vw - 40px));
      max-height: calc(100vh - 40px);
      margin:0 auto;
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
      gap: 12px;
    }

    #appRoot.profileManagedRoomOnly #screenProfile{
      width:min(880px, calc(100vw - 40px));
      max-height:none;
      gap: 10px;
    }

    #appRoot.profileManagedRoomOnly #pfTopDesc,
    #appRoot.profileManagedRoomOnly #pfStudentIdentity,
    #appRoot.profileManagedRoomOnly #pfSummary,
    #appRoot.profileManagedRoomOnly #pfStepBar{
      display:none !important;
    }

    /* Üst açıklama */
    #appRoot.profileFocus #pfTopDesc{
      text-align:center;
      margin: 0;
      opacity: .92;
    }

    /* Step bar: şık ve net */
    #appRoot.profileFocus #pfStepBar{
      gap:10px !important;
      flex-wrap:nowrap !important;
      justify-content:space-between !important;
      align-items:center;
      padding:10px;
      border-radius: 18px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.16);
      backdrop-filter: blur(6px);
      margin: 0 !important;
    }
    #appRoot.profileFocus #pfStepBar .pill{
      flex:1;
      justify-content:center;
      padding:10px 10px;
      font-weight:900;
      letter-spacing:.1px;
      border-radius: 14px;
      text-align:center;
    }
    @media (max-width: 560px){
      #appRoot.profileFocus #pfStepBar{ flex-wrap:wrap !important; }
      #appRoot.profileFocus #pfStepBar .pill{ flex: 0 0 auto; width: 100%; }
    }

    /* Adım kartları: tek kart hissi */
    #appRoot.profileFocus #pfStep1,
    #appRoot.profileFocus #pfStep2,
    #appRoot.profileFocus #pfStep3{
      max-width: 760px;
      margin: 0 auto;
      border-radius: 22px;
      padding: 14px 14px;
      box-shadow: 0 18px 50px rgba(0,0,0,.22);
      background: rgba(255,255,255,.055);
    }

    #appRoot.profileManagedRoomOnly #pfStep3{
      max-width: 880px;
      padding: 16px 18px;
    }

    #appRoot.profileManagedRoomOnly #pfStep3 .roomPreview.big{
      aspect-ratio: 16/8.9;
      max-height: 420px;
    }

    #appRoot.profileFocus #pfStep3 .row{
      gap: 10px;
    }

    #appRoot.profileFocus #pfStep3 .buddyBlock{
      margin-top: 10px !important;
    }

    #appRoot.profileFocus #pfStep3 #roomProgressHint{
      margin-top: 8px !important;
    }

    /* Oda seçimi: scroll olmasın -> grid'e çevir */
    #appRoot.profileFocus .roomGrid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      justify-items:stretch;
    }
    #appRoot.profileFocus .roomCard{
      width: auto !important;
      min-width: 0 !important;
    }
    #appRoot.profileFocus .roomThumb{
      width:100%;
      height:92px;
    }
    @media (max-width: 520px){
      #appRoot.profileFocus .roomGrid{ grid-template-columns: 1fr; }
      #appRoot.profileFocus .roomThumb{ height: 86px; }
    }

    /* Kart içi boşlukları sıkılaştır (ekrana sığsın) */
    #appRoot.profileFocus .card p{ margin-bottom: 8px; }
    #appRoot.profileFocus .row{ gap:10px; }


/* === REHBER SEÇİM EKRANI === */
    .guideSelectFocus .nav{ display:none !important; }
    .guideSelectFocus .wrap{ grid-template-columns: 1fr; }
    #appRoot.guideSelectFocus{
      width:100vw;
      height:100dvh;
      border:0;
      border-radius:0;
      background:transparent;
      box-shadow:none;
    }
    #appRoot.guideSelectFocus .wrap{
      min-height:100dvh;
      height:100dvh;
    }
    #appRoot.guideSelectFocus .panel{
      height:100dvh;
      padding:90px clamp(18px, 4vw, 54px) clamp(18px, 4vh, 42px);
      background:transparent;
    }
    #screenGuideSelect{
      height:100%;
      min-height:0;
      display:flex;
      flex-direction:column;
      gap:12px;
      padding:0 4px;
    }
    #appRoot.guideSelectFocus #screenGuideSelect{
      width:min(1360px, 100%);
      margin:0 auto;
    }
    #screenGuideSelect.hidden{
      display:none !important;
    }
    .guideSelectIntro{
      flex:0 0 auto;
      padding:0 24px;
    }
    .guideSelectIntro h3{
      margin:0 0 4px;
      font-size:24px;
      line-height:1.12;
    }
    .guideSelectIntro p{
      margin:0;
      max-width:820px;
      color:rgba(226,232,240,.84);
      font-size:17px;
      line-height:1.35;
    }
    .guideSelectBg{
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.14);
      border-radius: 22px;
      padding: 16px 22px 16px;
      position: relative;
      overflow:hidden;
      flex:1 1 auto;
      min-height:0;
      display:flex;
      flex-direction:column;
    }
    .guideSelectBg:before{
      content:"";
      position:absolute; inset:-40px;
      background:
        radial-gradient(800px 420px at 15% 15%, rgba(56,189,248,.18) 0%, transparent 60%),
        radial-gradient(800px 420px at 85% 85%, rgba(34,197,94,.16) 0%, transparent 60%),
        radial-gradient(2px 2px at 12% 20%, rgba(255,255,255,.25) 0 100%, transparent 0),
        radial-gradient(2px 2px at 35% 55%, rgba(255,255,255,.18) 0 100%, transparent 0),
        radial-gradient(2px 2px at 65% 25%, rgba(255,255,255,.20) 0 100%, transparent 0),
        radial-gradient(2px 2px at 80% 60%, rgba(255,255,255,.16) 0 100%, transparent 0);
      filter: blur(.0px);
      opacity: 1;
      pointer-events:none;
    }
    .guideSelectBg > *{ position: relative; z-index:1; }
    .guideGrid{
      display:grid;
      grid-template-columns: repeat(4, minmax(170px, 1fr));
      gap: 14px;
      margin-top: 0;
      align-items:stretch;
      flex:1 1 auto;
      min-height:0;
    }
    @media (max-width: 980px){
      .guideGrid{ grid-template-columns: repeat(2, minmax(170px, 1fr)); }
    }
    @media (max-width: 520px){
      .guideGrid{ grid-template-columns: 1fr; }
      .guideSelectBg{
        padding:18px 14px 16px;
      }
      .guideSelectIntro{
        padding:0 14px;
      }
    }

    .guideCard{
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.05);
      border-radius: 18px;
      padding: 12px;
      cursor:pointer;
      transition: border-color .14s ease, box-shadow .14s ease, background .14s ease, opacity .14s ease, filter .14s ease;
      min-height: 238px;
      position: relative;
      overflow:hidden;
    }
    .guideCard:hover{ border-color: rgba(255,255,255,.22); }
    .guideCard.selected{
      border-color: rgba(34,197,94,.65);
      box-shadow: 0 0 0 3px rgba(34,197,94,.18), 0 28px 86px rgba(0,0,0,.48);
      background: rgba(34,197,94,.08);
    }
    .guideCard .gImgWrap{
      width: 148px; height: 162px;
      margin: -4px auto 10px;
      display:grid; place-items:center;
      border-radius: 0;
      background: transparent;
      border:0;
      position: relative;
    }
    .guideCard .gImgWrap:after{
      content:none;
    }
    .guideCard.isLumi .gImgWrap:after{ opacity: 0; }
    .guideCard:not(.isLumi) .gImg{ filter: drop-shadow(0 14px 18px rgba(0,0,0,.34)); }
    .guideCard.selected .gImgWrap{ animation: none; }
    .gImg{
      width: 140px; height: 162px;
      object-fit: contain;
      image-rendering: auto;
      filter: drop-shadow(0 14px 18px rgba(0,0,0,.34));

      transform-origin: 50% 80%;
    }
    .guideCard[data-guide="lumi"] .gImg{
      transform: scale(1.18);
    }
    .guideCard[data-guide="karakter2"] .gImg{
      transform: scale(1.14);
    }
    .guideCard[data-guide="karakter4"] .gImg{
      transform: scale(1.22) translateY(-2px);
    }
    .guideCard.talk .gImgWrap{ animation: guideTalkWiggle .55s ease-in-out 1; }

    #lumiImg{
    }

    @keyframes guideIdle{
      0%{ transform: translateY(0); }
      50%{ transform: translateY(-6px); }
      100%{ transform: translateY(0); }
    }
    @keyframes guideTalkWiggle{
      0%{ transform: rotate(0deg) translateY(0); }
      25%{ transform: rotate(-2deg) translateY(-2px); }
      50%{ transform: rotate(2deg) translateY(-2px); }
      75%{ transform: rotate(-1deg) translateY(-1px); }
      100%{ transform: rotate(0deg) translateY(0); }
    }
    @keyframes guideSelectPop{
      0%{ transform: translateY(0) scale(1); }
      60%{ transform: translateY(-3px) scale(1.01); }
      100%{ transform: translateY(0) scale(1); }
    }

    /* Rehber secim ekraninda gorseller sabit durur; buyuklukler ilk acilista uygulanir. */
    .guideCard .gImgWrap{ animation: none; }

    /* Secince one cikarma + digerlerini hafif geri alma */
    .guideGrid.hasSelection .guideCard:not(.selected){
      opacity: .62;
      filter: saturate(.92);
    }
    .guideGrid.hasSelection .guideCard.selected{
      z-index: 4;
    }
    .guideGrid.hasSelection .guideCard.selected:before{
      content:"";
      position:absolute; inset:-2px;
      border-radius: 20px;
      background: radial-gradient(240px 140px at 50% 45%, rgba(255,255,255,.12) 0%, transparent 70%);
      pointer-events:none;
    }

    @keyframes idleLumi{ 0%{transform:translateY(0)} 50%{transform:translateY(-4px)} 100%{transform:translateY(0)} }
    @keyframes idleEnerji{ 0%{transform:translateY(0) rotate(0deg)} 40%{transform:translateY(-6px) rotate(-1.2deg)} 70%{transform:translateY(-2px) rotate(1deg)} 100%{transform:translateY(0) rotate(0deg)} }
    @keyframes idleOdak{ 0%{transform:translateY(0)} 50%{transform:translateY(-3px)} 100%{transform:translateY(0)} }
    @keyframes idleHayal{ 0%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-5px) rotate(1.2deg)} 100%{transform:translateY(0) rotate(0deg)} }


    .gName{ font-weight: 950; text-align:center; margin-top: 4px; }
    .gTags{
      font-size: 12px;
      color: rgba(234,242,255,.78);
      font-weight: 750;
      text-align:center;
      margin-top: 4px;
    }
    .gTone{
      margin-top: 8px;
      text-align:center;
      font-size: 12px;
      color: rgba(196,231,255,.88);
      font-weight: 850;
      letter-spacing: .01em;
    }
    .gPrompt{
      margin-top: 6px;
      text-align:center;
      font-size: 13px;
      line-height: 1.45;
      color: rgba(234,242,255,.88);
      min-height: 38px;
    }
    .guideCard.selected .gTone{
      color: rgba(222,255,231,.95);
    }
    .guideCard.selected .gPrompt{
      color: rgba(245,255,249,.95);
    }
    .gKeys{
      margin-top: 8px;
      display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
    }
    .gKey{
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.10);
      color: rgba(234,242,255,.88);
      font-weight: 750;
    }
    .gBubble{
      display:none;
      margin-top: 10px;
      border:1px dashed rgba(255,255,255,.22);
      background: rgba(0,0,0,.12);
      padding: 10px 10px;
      border-radius: 14px;
      color: rgba(234,242,255,.90);
      line-height: 1.45;
      font-size: 13px;
    }
    .guideCard.talk .gBubble{ display:block; animation: lumoPop .28s ease-out; }

    .guideActions{
      display:flex; align-items:center; justify-content:space-between;
      gap: 10px; flex-wrap:wrap;
      margin-top: 14px;
      padding-top:2px;
    }
    .miniHint{ color: rgba(234,242,255,.70); font-size: 13px; }

    /* profilde rehber değiştir */
    .btn.warn{
      background: rgba(245,158,11,.14);
      border-color: rgba(245,158,11,.35);
    }


    #ltMsg{ display:none !important; }

    /* =========================
       REHBERE GORE BUTON ISARETLEME (Lumi stili + mizac farklari)
       - Aynı mekanizma, farklı ritim/renk
       ========================= */

    .hlTarget{
      --hl: rgba(34,197,94,.85);      /* default (Lumi) */
      --hlSoft: rgba(34,197,94,.18);
      position: relative;
      outline: 3px solid var(--hl);
      box-shadow:
        0 0 0 7px var(--hlSoft),
        0 18px 50px rgba(0,0,0,.28);
      border-radius: 16px;
    }

    /* Lumi: dengeli, nazik */
    .hlLumi{ --hl: rgba(56,189,248,.86); --hlSoft: rgba(56,189,248,.16); }

    /* karakter2: enerji/cesaret -> daha hızlı, daha canlı */
    .hlG2{ --hl: rgba(245,158,11,.92); --hlSoft: rgba(245,158,11,.18); }

    /* karakter3: odak/sakin -> daha yavaş, daha yumuşak */
    .hlG3{ --hl: rgba(34,197,94,.85); --hlSoft: rgba(34,197,94,.18); }

    /* karakter4: merak/hayal -> dalgalı, rüya gibi */
    .hlG4{ --hl: rgba(236,72,153,.84); --hlSoft: rgba(236,72,153,.16); }

    @keyframes hlPulseFast {
      0%   { transform: translateY(0); box-shadow: 0 0 0 7px var(--hlSoft), 0 18px 50px rgba(0,0,0,.28); }
      50%  { transform: translateY(-2px); box-shadow: 0 0 0 12px color-mix(in srgb, var(--hlSoft) 70%, transparent), 0 26px 70px rgba(0,0,0,.36); }
      100% { transform: translateY(0); box-shadow: 0 0 0 7px var(--hlSoft), 0 18px 50px rgba(0,0,0,.28); }
    }

    @keyframes hlPulseSlow {
      0%   { transform: translateY(0); box-shadow: 0 0 0 7px var(--hlSoft), 0 18px 50px rgba(0,0,0,.28); }
      50%  { transform: translateY(-1px); box-shadow: 0 0 0 10px color-mix(in srgb, var(--hlSoft) 62%, transparent), 0 22px 60px rgba(0,0,0,.34); }
      100% { transform: translateY(0); box-shadow: 0 0 0 7px var(--hlSoft), 0 18px 50px rgba(0,0,0,.28); }
    }

    @keyframes hlWave {
      0%   { transform: translateY(0) rotate(0deg); box-shadow: 0 0 0 7px var(--hlSoft), 0 18px 50px rgba(0,0,0,.28); }
      33%  { transform: translateY(-1px) rotate(-0.35deg); box-shadow: 0 0 0 10px color-mix(in srgb, var(--hlSoft) 62%, transparent), 0 22px 60px rgba(0,0,0,.34); }
      66%  { transform: translateY(-2px) rotate(0.45deg); box-shadow: 0 0 0 12px color-mix(in srgb, var(--hlSoft) 70%, transparent), 0 26px 70px rgba(0,0,0,.36); }
      100% { transform: translateY(0) rotate(0deg); box-shadow: 0 0 0 7px var(--hlSoft), 0 18px 50px rgba(0,0,0,.28); }
    }

    .hlPulse{ animation: hlPulseSlow 1.2s ease-in-out infinite; }
    .hlTarget.hlG2.hlPulse{ animation: hlPulseFast .78s ease-in-out infinite; }
    .hlTarget.hlG3.hlPulse{ animation: hlPulseSlow 1.55s ease-in-out infinite; }
    .hlTarget.hlG4.hlPulse{ animation: hlWave 1.25s ease-in-out infinite; }

    .guidedOnboardingOverlay{
      position:fixed;
      inset:0;
      z-index:9700;
      background: rgba(3, 8, 20, .28);
      backdrop-filter: blur(1.5px);
      pointer-events:none;
    }
    .guidedOnboardingOverlay.universeTourOverlay{
      background: rgba(3, 8, 20, .64);
      backdrop-filter: blur(2px);
      pointer-events:auto;
    }
    body.universe-tour-open #screenRoom .roomWorldCanvas{
      isolation:isolate;
    }
    body.universe-tour-open #screenRoom .roomWorldCanvas::before{
      content:"";
      position:absolute;
      inset:-8%;
      z-index:6;
      pointer-events:none;
      background:rgba(3, 8, 20, .44);
      backdrop-filter:blur(1px);
    }
    body.universe-tour-open #screenRoom .roomRouteLayer,
    body.universe-tour-open #screenRoom .roomWorldAmbientLights,
    body.universe-tour-open #screenRoom .roomMeteorLayer{
      opacity:.34;
    }
    body.universe-tour-open #screenRoom .roomSatellite,
    body.universe-tour-open #screenRoom .roomSatelliteCountdown{
      z-index:5 !important;
      opacity:.12 !important;
      filter:brightness(.42) saturate(.5) !important;
      pointer-events:none !important;
    }
    body.universe-tour-open #screenRoom .roomWorldInfoOverlay{
      z-index:9804 !important;
    }
    body.universe-tour-open #screenRoom .roomWorldInfoOverlayItem{
      opacity:.28 !important;
      filter:brightness(.48) saturate(.65) !important;
    }
    body.universe-tour-open #screenRoom .roomWorldInfoOverlayItem.universeTourInfoTarget{
      opacity:1 !important;
      filter:none !important;
    }
    body.universe-tour-open #screenRoom .roomWorldHotspot.guidedTarget,
    body.universe-tour-open #screenRoom .roomWorldHotspot.universeTourTarget{
      z-index:9805 !important;
    }
    body.universe-tour-open #screenRoom .roomWorldHotspot:not(.universeTourTarget){
      filter:brightness(.68) saturate(.82);
    }
    .guidedOnboardingOverlay.hidden{
      display:none !important;
      pointer-events:none !important;
    }
    .guidedTarget{
      position:relative;
      z-index:9801 !important;
      pointer-events:auto !important;
    }
    .universeTourTarget{
      filter: saturate(1.12) brightness(1.08);
    }
    #screenRoom .roomWorldHotspot.universeTourTarget::before{
      opacity:1 !important;
      background:
        radial-gradient(circle at center, rgb(var(--guide-primary-rgb) / .72), transparent 34%),
        radial-gradient(circle at center, rgb(var(--guide-aura-rgb) / .42), transparent 68%) !important;
      filter: blur(18px) saturate(1.22) !important;
      transform: translate(-50%, -50%) scale(1.18) !important;
    }
    #screenRoom .roomWorldHotspot.universeTourTarget .roomWorldSlot::before,
    #screenRoom .roomWorldHotspot.universeTourTarget .roomWorldSlot::after{
      opacity:1 !important;
    }
    .guidedContextTarget{
      position:relative;
      z-index:9800 !important;
      box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 18px 48px rgba(0,0,0,.24);
    }
    .guidedContextTarget{
      position:relative;
      z-index:9800 !important;
    }

    .prepRewardOverlay{
      position: fixed;
      inset: 0;
      z-index: 11050;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(4, 10, 24, .44);
      backdrop-filter: blur(4px);
    }
    .prepRewardOverlay.hidden{
      display: none !important;
      pointer-events: none !important;
    }
    .prepRewardCard{
      width: min(560px, calc(100vw - 32px));
      display: grid;
      grid-template-columns: 156px minmax(0, 1fr);
      gap: 18px;
      align-items: center;
      padding: 22px 22px 20px;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,.16);
      background:
        radial-gradient(120% 120% at 16% 12%, rgba(255,196,87,.20) 0%, transparent 44%),
        linear-gradient(180deg, rgba(16,24,40,.98), rgba(11,18,33,.96));
      box-shadow: 0 28px 80px rgba(0,0,0,.42);
      color: #f8fbff;
    }
    .prepRewardGuide{
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 176px;
      border-radius: 22px;
      background:
        radial-gradient(64% 64% at 50% 38%, rgba(255,216,115,.26), transparent 72%),
        rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
    }
    .prepRewardGuideImg{
      width: 132px;
      height: 150px;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 14px 28px rgba(0,0,0,.34));
      animation: prepRewardGuideRise .55s ease-out both;
    }
    .prepRewardContent{
      display: grid;
      gap: 10px;
    }
    .prepRewardKicker{
      display: inline-flex;
      align-items: center;
      width: fit-content;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      color: rgba(255,247,219,.94);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .prepRewardTitle{
      font-size: clamp(28px, 3.2vw, 34px);
      font-weight: 900;
      line-height: 1.06;
      letter-spacing: -.02em;
    }
    .prepRewardText{
      color: rgba(234,242,255,.92);
      font-size: 15px;
      line-height: 1.6;
    }
    .prepRewardRate{
      color: rgba(255,227,149,.94);
      font-size: 14px;
      font-weight: 800;
    }
    .prepRewardStars{
      display: flex;
      align-items: center;
      gap: 14px;
      min-height: 64px;
      margin-top: 4px;
    }
    .prepRewardStar{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      width: 54px;
      height: 54px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color: transparent;
      font-size: 0;
      line-height: 0;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
      transform: translateY(8px) scale(.92);
      opacity: .82;
      transition: transform .26s ease, opacity .26s ease, color .26s ease, background .26s ease, box-shadow .26s ease;
    }
    .prepRewardStar::before,
    .prepRewardStar::after{
      content: "";
      position: absolute;
      inset: 11px;
      clip-path: polygon(50% 0%, 62% 35%, 100% 38%, 72% 59%, 82% 100%, 50% 76%, 18% 100%, 28% 59%, 0% 38%, 38% 35%);
      transition: transform .26s ease, opacity .26s ease, background .26s ease;
    }
    .prepRewardStar::before{
      inset: 9px;
      background: rgba(255,255,255,.22);
      opacity: .9;
    }
    .prepRewardStar::after{
      background: rgba(11,18,33,.94);
      transform: scale(.62);
      opacity: 1;
    }
    .prepRewardStar.filled{
      color: #ffd15f;
      background: rgba(255,209,95,.14);
      border-color: rgba(255,214,126,.36);
      box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 18px 40px rgba(255,193,67,.22);
      transform: translateY(0) scale(1.08);
      opacity: 1;
      animation: prepRewardStarFill .52s cubic-bezier(.2,.9,.2,1);
    }
    .prepRewardStar.empty{
      color: rgba(255,255,255,.18);
    }
    .prepRewardStar.filled::after{
      background: linear-gradient(180deg, #ffe493 0%, #ffc84d 100%);
      transform: scale(1);
      opacity: 1;
    }
    .prepRewardBtn{
      margin-top: 8px;
      min-height: 50px;
      border-radius: 16px;
      font-size: 15px;
      font-weight: 900;
      box-shadow: 0 16px 36px rgba(34,197,94,.22);
    }
    .satelliteRewardChoices{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 4px;
    }
    .satelliteRewardChoice{
      min-height: 48px;
      border-radius: 15px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.09);
      color: rgba(244,247,255,.96);
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 12px 26px rgba(2,8,23,.20);
    }
    .satelliteRewardChoice:hover,
    .satelliteRewardChoice:focus-visible{
      outline: none;
      border-color: rgba(125,232,255,.46);
      background: rgba(125,232,255,.16);
    }
    .satelliteTaskTest{
      margin-top: 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      flex-wrap:wrap;
      padding: 12px;
      border-radius: 16px;
      border: 1px solid rgba(125,232,255,.22);
      background: rgba(9,18,34,.34);
    }
    .satelliteTaskTest.hidden{
      display:none !important;
    }
    .satelliteTaskTest span{
      display:block;
      margin-top:4px;
      color: rgba(221,232,255,.82);
      font-size: 13px;
    }

    @keyframes prepRewardGuideRise{
      0%{ opacity:0; transform: translateY(18px) scale(.92); }
      100%{ opacity:1; transform: translateY(0) scale(1); }
    }
    @keyframes prepRewardStarFill{
      0%{ transform: translateY(10px) scale(.78) rotate(-10deg); }
      60%{ transform: translateY(-4px) scale(1.16) rotate(4deg); }
      100%{ transform: translateY(0) scale(1.08) rotate(0deg); }
    }

    #lumoIntro{ display:none !important; }

    /* =========================
       LUMI (rehber) UI
       - Lumi görseli ve konuşma balonu aynı ritimde hareket eder
       - Boyutlar birbirini etkilemez
       ========================= */

    #guideDock{
      position: fixed;
      left: max(14px, env(safe-area-inset-left));
      bottom: max(58px, calc(env(safe-area-inset-bottom) + 54px));
      z-index: 10020;
      display: flex;
      align-items: flex-end;
      gap: 0;
      width: 92px;
      min-height: 132px;
      pointer-events: none; /* sadece balon tıklanabilir */
      animation: none;
      filter: drop-shadow(0 0 22px rgb(var(--guide-primary-rgb) / .14));
    }

    @keyframes guideFloat{
      0%{ transform: translateY(0); }
      50%{ transform: translateY(-6px); }
      100%{ transform: translateY(0); }
    }

    #lumiDock{
      pointer-events: none;
      animation: guideFloat 2.6s ease-in-out infinite;
    }

    /* guideStatic */
    #appRoot.guideStatic #guideDock{ left: max(14px, env(safe-area-inset-left)) !important; bottom: max(58px, calc(env(safe-area-inset-bottom) + 54px)) !important; }
    #appRoot.guideStatic #lumiDock{ animation: none !important; }

    /* Işık Bahçesi (Seçici Dikkat) */
    .sbTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .sbBoard{
      display:grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap:10px;
      margin-top:12px;
    }
    @media (max-width: 980px){ .sbBoard{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    @media (max-width: 640px){ .sbBoard{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

    
    .sbTile{
      aspect-ratio: 1 / 1;
      border:1px solid rgba(255,255,255,.10);
      border-radius: 16px;
      background: rgba(255,255,255,.035);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      user-select:none;
      transition:
        transform .22s cubic-bezier(.2,.9,.2,1),
        border-color .22s cubic-bezier(.2,.9,.2,1),
        box-shadow .22s cubic-bezier(.2,.9,.2,1),
        background .22s cubic-bezier(.2,.9,.2,1),
        opacity .22s cubic-bezier(.2,.9,.2,1),
        filter .22s cubic-bezier(.2,.9,.2,1);
      position:relative;
      overflow:hidden;
      --c1: rgba(56,189,248,.35);
      --c2: rgba(34,197,94,.22);
      --icon: rgba(234,242,255,.92);
    }
    /* renkli ama sakin "ışık" hissi */
    .sbTile::before{
      content:"";
      position:absolute;
      inset:-35%;
      background:
        radial-gradient(closest-side at 35% 35%, var(--c1) 0%, transparent 60%),
        radial-gradient(closest-side at 70% 70%, var(--c2) 0%, transparent 62%);
      opacity:.55;
      filter: blur(14px);
      transform: rotate(8deg);
      pointer-events:none;
    }
    .sbTile::after{
      content:"";
      position:absolute;
      inset:0;
      background: radial-gradient(400px 260px at 30% 20%, rgba(255,255,255,.08), transparent 60%);
      opacity:.55;
      pointer-events:none;
    }

    /* mikro cila: doygunluk biraz düşürüldü (göz yormasın) */
    .sbTile[data-kind="star"]{ --c1: rgba(255,200,87,.54); --c2: rgba(255,123,84,.26); --icon: rgba(255,232,180,.98); }
    .sbTile[data-kind="spark"]{ --c1: rgba(255,170,72,.46); --c2: rgba(255,92,72,.24); --icon: rgba(255,235,210,.98); }
    .sbTile[data-kind="diamond"]{ --c1: rgba(255,128,54,.40); --c2: rgba(255,200,87,.22); --icon: rgba(255,240,220,.98); }

    .sbTile:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.16); }
    .sbTile:active{ transform: translateY(0px) scale(.99); }

    /* mikro cila: giriş animasyonu (yumuşak pop) */
    @keyframes sbSpawn{
      0%{ opacity:0; transform: scale(.92); filter: blur(2px); }
      100%{ opacity:1; transform: scale(1); filter: blur(0px); }
    }
    .sbTile.spawn{ animation: sbSpawn .26s cubic-bezier(.2,.9,.2,1) both; }

    /* çıkış animasyonu: hedef seçilince yumuşak kaybolma */
    .sbTile.gone{
      opacity:0;
      transform: scale(.92);
      filter: blur(1px);
      pointer-events:none;
    }

    /* mikro cila: doğru tıklama halo (çok kısa, yargısız) */
    @keyframes sbHalo{
      0%{ opacity:0; transform: scale(.86); }
      35%{ opacity:.9; transform: scale(1); }
      100%{ opacity:0; transform: scale(1.35); }
    }
    .sbTile.hit::after{
      content:"";
      position:absolute;
      inset:12%;
      border-radius: 999px;
      border: 2px solid rgba(255,232,180,.55);
      box-shadow: 0 0 22px rgba(255,200,87,.18);
      pointer-events:none;
      animation: sbHalo .38s cubic-bezier(.2,.9,.2,1) both;
      z-index: 2;
    }

    .sbIcon{
      width:62%; height:62%;
      color: var(--icon);
      opacity: .98;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
      position:relative;
      z-index:1;
    }

    /* yanlis secim: yargisiz, hafif iz */
    .sbTile.miss{
      border-color: rgba(255,255,255,.12);
      background: rgba(255,255,255,.030);
      box-shadow: inset 0 0 0 2px rgba(255,255,255,.04);
    }

    /* doğru seçimi yargılamadan hissettir */
    .sbTile.hit{
      border-color: rgba(255,255,255,.22);
      box-shadow: 0 0 0 3px rgba(255,255,255,.08), 0 0 28px rgba(255,200,87,.22);
      background: rgba(255,255,255,.045);
    }

    .sbRewardPop{
      position:absolute;
      right:16px;
      top:16px;
      padding:10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(17,24,39,.72);
      color: rgba(234,242,255,.94);
      box-shadow: 0 12px 34px rgba(0,0,0,.35);
      transform: translateY(8px);
      opacity:0;
      pointer-events:none;
      transition: opacity .18s ease, transform .18s ease;
      font-weight:900;
    }
    .sbRewardPop.show{ opacity:1; transform: translateY(0); }


    #lumiImg{
      width: 120px;
      height: 138px;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
      transform-origin: 50% 100%;
    }

    #guideDock[data-guide="lumi"] #lumiImg{
      transform: scale(1.18);
    }
    #guideDock[data-guide="karakter2"] #lumiImg{
      transform: scale(1.14);
    }
    #guideDock[data-guide="karakter4"] #lumiImg{
      transform: translateY(-2px) scale(1.22);
    }



    /* Rehbere gore mini "selam" animasyonu (rehber yardim acilinca) */
    #lumiImg.salute{ animation-duration: 600ms; animation-timing-function: ease-out; animation-iteration-count: 1; }
    #lumiImg.salute.salute-lumi{ animation-name: saluteLumi; }
    #lumiImg.salute.salute-karakter2{ animation-name: saluteEnerji; }
    #lumiImg.salute.salute-karakter3{ animation-name: saluteOdak; }
    #lumiImg.salute.salute-karakter4{ animation-name: saluteHayal; }

    @keyframes saluteLumi{ 0%{transform:translateY(0) scale(1)} 55%{transform:translateY(-6px) scale(1.02)} 100%{transform:translateY(0) scale(1)} }
    @keyframes saluteEnerji{ 0%{transform:translateY(0) scale(1) rotate(0deg)} 35%{transform:translateY(-9px) scale(1.04) rotate(-2deg)} 70%{transform:translateY(-2px) scale(1.02) rotate(2deg)} 100%{transform:translateY(0) scale(1) rotate(0deg)} }
    @keyframes saluteOdak{ 0%{transform:translateY(0) scale(1)} 60%{transform:translateY(-4px) scale(1.01)} 100%{transform:translateY(0) scale(1)} }
    @keyframes saluteHayal{ 0%{transform:translateY(0) scale(1) rotate(0deg)} 50%{transform:translateY(-7px) scale(1.03) rotate(1.6deg)} 100%{transform:translateY(0) scale(1) rotate(0deg)} }

    /* Hareket istemeyen cihazlarda animasyonlari kapat */
    @media (prefers-reduced-motion: reduce){
      .guideCard .gImgWrap{ animation: none !important; }
      #guideDock{ animation: none !important; }
      .hlPulse{ animation: none !important; }
      #lumiImg.salute{ animation: none !important; }
    }
    #lumoWrap{
      pointer-events: auto;
      display: none;
      position: absolute;
      left: 104px;
      top: 0;
      bottom: auto;
      width: min(340px, calc(100vw - 122px));
      max-width: 340px;
    }
    #guideDock[data-guided-bubble="left"] #lumoWrap{
      left:auto;
      right:104px;
    }

    #lumoBubble{
      background: rgba(17,24,39,.78);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.12);
      color:#eaf2ff;
      padding:12px 14px;
      border-radius:12px;
      font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      box-shadow:0 10px 30px rgba(0,0,0,.35);
      position: relative;
    }
    #lumoBubble::before{
      content:"";
      position:absolute;
      left:-8px;
      top:18px;
      width:16px;
      height:16px;
      background: rgba(17,24,39,.78);
      border-left: 1px solid rgba(255,255,255,.12);
      border-bottom: 1px solid rgba(255,255,255,.12);
      transform: rotate(45deg);
      border-bottom-left-radius: 4px;
    }
    #guideDock[data-guided-bubble="left"] #lumoBubble::before{
      left:auto;
      right:-8px;
      border-left:0;
      border-bottom:0;
      border-right: 1px solid rgba(255,255,255,.12);
      border-top: 1px solid rgba(255,255,255,.12);
      border-bottom-left-radius:0;
      border-top-right-radius:4px;
    }

    #lumoContinue{
      margin-top:10px;
      padding:10px 14px;
      border:0;
      border-radius:12px;
      cursor:pointer;
      background:#22c55e;
      color:#052e16;
      font-weight:800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      min-width: 140px;
      max-width: 240px;
    }

    #lumoContinue:hover{
      filter: brightness(1.06);
      transform: translateY(-1px);
    }

    @keyframes lumoPop {
      0%   { transform: translateY(6px) scale(.98); opacity: 0; }
      60%  { transform: translateY(0)   scale(1.02); opacity: 1; }
      100% { transform: translateY(0)   scale(1);    opacity: 1; }
    }
    #lumoWrap.show #lumoBubble{ animation: lumoPop .28s ease-out; }

    @media (max-width: 900px){
      #guideDock{
        left: 10px;
        bottom: max(56px, calc(env(safe-area-inset-bottom) + 52px));
        width: 84px;
      }
      #lumiImg{
        width: 104px;
        height: 120px;
        object-fit: contain;
      }
      #lumoWrap{
        left: 84px;
        top: 0;
        bottom: auto;
        width: min(280px, calc(100vw - 92px));
      }
      #guideDock[data-guided-bubble="left"] #lumoWrap{
        left:auto;
        right:84px;
      }
      #lumoBubble{
        font-size: 13px;
        line-height: 1.34;
        padding: 11px 12px;
      }
      .prepRewardCard{
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 14px;
        padding: 20px 18px 18px;
      }
      .prepRewardGuide{
        width: 100%;
        min-height: 136px;
      }
      .prepRewardStars{
        justify-content: center;
      }
      .prepRewardBtn{
        width: 100%;
      }
    }


    /* =========================
       DİKKAT PARKURU (Seçici Dikkat)
       ========================= */
    .attBoard{
      display:grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap:10px;
    }
    @media (max-width: 900px){
      .attBoard{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    .attTile{
      aspect-ratio: 1 / 1;
      border:1px solid var(--stroke);
      border-radius: 16px;
      background: rgba(255,255,255,.04);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      user-select:none;
      transition: transform .08s ease, background .15s ease, border-color .15s ease;
    }
    .attTile:hover{ transform: translateY(-1px); }
    .attTile.selected{
      border-color: rgba(34,197,94,.85);
      background: rgba(34,197,94,.12);
    }
    .attShape{ width:60%; height:60%; }
  
    /* =========================
       ODA (BASE + LAYER)
       ========================= */
    :root{
      --guide-primary-rgb: 110 231 255;
      --guide-route-rgb: 125 211 252;
      --guide-aura-rgb: 56 189 248;
      --guide-beam-rgb: 224 242 254;
      --guide-text-rgb: 240 249 255;
    }
    body.room-world-mode{
      overflow:hidden;
      padding:0;
      align-items:stretch;
      justify-content:stretch;
      background:#090f20 url("../arkaplantamamenboş.png") center 40% / cover no-repeat;
    }
    #screenRoom.roomWorldScreen{
      margin:0;
      width:100%;
      height:100dvh;
      min-height:100dvh;
    }
    #appRoot.roomWorldFocus{
      position:fixed;
      inset:0;
      width:100vw;
      min-height:100dvh;
      height:100dvh;
      border-radius:0;
      border:none;
      box-shadow:none;
    }
    #appRoot.roomWorldFocus .topbar{
      position:absolute;
      top:14px;
      left:14px;
      right:auto;
      z-index:10040;
      padding:0;
      border:none;
      background:transparent;
      backdrop-filter:none;
      box-shadow:none;
    }
    #appRoot.roomWorldFocus .topbarLead{
      gap:8px;
    }
    #appRoot.roomWorldFocus .brand,
    #appRoot.roomWorldFocus .pill{
      display:none !important;
    }
    #appRoot.roomWorldFocus .wrap{
      min-height:100dvh;
      height:100dvh;
    }
    #appRoot.roomWorldFocus .panel{
      padding:0;
      overflow:hidden;
      height:100dvh;
    }
    #appRoot.roomWorldFocus #guideDock{
      bottom:max(58px, calc(env(safe-area-inset-bottom) + 54px));
    }
    .roomWorldScene{
      position:relative;
      min-height:100dvh;
      height:100dvh;
      width:100%;
      overflow:hidden;
      background:#090f20 url("../arkaplantamamenboş.png") center 40% / cover no-repeat;
      border-radius:0;
    }
    .roomWorldCanvas{
      position:absolute;
      left:50%;
      top:50%;
      width:max(100%, calc(100dvh * 1.5));
      aspect-ratio: 3 / 2;
      transform:translate(-50%, -50%);
      overflow:visible;
      z-index:1;
      isolation:isolate;
    }
    .roomWorldCanvas::after{
      content:"";
      position:absolute;
      inset:0;
      z-index:2;
      pointer-events:none;
      background:
        radial-gradient(circle at 12% 28%, rgba(146,238,255,.76) 0 1.4px, transparent 1.8px),
        radial-gradient(circle at 38% 19%, rgba(93,214,255,.72) 0 1.2px, transparent 1.7px),
        radial-gradient(circle at 69% 22%, rgba(111,231,255,.72) 0 1.3px, transparent 1.8px),
        radial-gradient(circle at 78% 58%, rgba(145,236,255,.78) 0 1.4px, transparent 1.9px),
        radial-gradient(circle at 48% 76%, rgba(142,245,232,.68) 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 84% 74%, rgba(122,244,228,.7) 0 1.3px, transparent 1.9px);
      filter:none;
      opacity:.76;
      mix-blend-mode:screen;
      animation: roomAmbientFieldBreath 8s ease-in-out infinite;
    }
    .roomWorldScene::before{
      content:"";
      position:absolute;
      inset:-5%;
      background:
        radial-gradient(circle at 50% 44%, rgb(var(--guide-aura-rgb) / .18), transparent 24%),
        url("../arkaplantamamenboş.png") center 40% / cover no-repeat;
      filter: blur(26px) saturate(1.05);
      opacity:.42;
      transform: scale(1.04);
      pointer-events:none;
    }
    .roomWorldAmbientLights{
      position:absolute;
      inset:0;
      pointer-events:none;
      overflow:hidden;
      z-index:2;
      opacity:.95;
    }
    .roomMeteorLayer{
      position:absolute;
      inset:0;
      z-index:2;
      overflow:hidden;
      pointer-events:none;
    }
    .roomMeteor{
      position:absolute;
      left:0;
      top:0;
      width:var(--meteor-w, 140px);
      height:2.4px;
      border-radius:999px;
      background:linear-gradient(90deg, transparent 0%, rgba(180,244,255,.08) 12%, rgba(214,250,255,.92) 70%, rgba(255,255,255,.98) 100%);
      opacity:0;
      transform-origin:right center;
      filter:none;
      animation: roomMeteorFly var(--meteor-d, 1.6s) cubic-bezier(.28,.58,.22,1) forwards;
    }
    .roomMeteor::after{
      content:"";
      position:absolute;
      right:-2px;
      top:50%;
      width:5px;
      height:5px;
      border-radius:999px;
      background:rgba(255,255,255,.95);
      transform:translateY(-50%);
    }
    .roomWorldAmbientLights span{
      display:block;
      position:absolute;
      left:var(--x);
      top:var(--y);
      width:10px;
      height:10px;
      border-radius:999px;
      background:rgba(var(--c), .9);
      box-shadow:none;
      opacity:.96;
      mix-blend-mode:normal;
      transform:translate(-50%, -50%) scale(var(--s, 1));
      animation:
        roomAmbientDrift var(--d) ease-in-out infinite,
        roomAmbientTwinkle var(--d) ease-in-out infinite;
      animation-delay:var(--delay);
    }
    .roomWorldBg{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center 40%;
      transform: none;
      user-select:none;
      pointer-events:none;
      z-index:0;
    }
    .roomWorldInfoOverlay{
      position:absolute;
      inset:0;
      z-index:24;
      pointer-events:none;
    }
    .roomWorldInfoOverlayItem{
      position:absolute;
      left:0;
      top:0;
      transform:translate(-50%, -50%);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:1px;
      width:max-content;
      max-width:210px;
      pointer-events:none;
    }
    .roomWorldInfoOverlayLabel,
    .roomWorldInfoOverlayState{
      width:auto;
      max-width:100%;
      margin:0;
      font-family:var(--ui-font);
      text-align:center;
      white-space:normal;
      text-wrap:balance;
      pointer-events:none;
      text-shadow:
        0 0 12px rgb(var(--guide-route-rgb) / .26),
        0 2px 12px rgba(2,8,23,.74);
    }
    .roomWorldInfoOverlayLabel{
      padding:4px 9px 5px;
      border-radius:999px;
      border:1px solid rgb(var(--guide-route-rgb) / .26);
      background:
        linear-gradient(180deg, rgb(var(--guide-beam-rgb) / .14), transparent 52%),
        linear-gradient(180deg, rgba(10,18,38,.78), rgba(8,13,28,.54));
      box-shadow:
        0 10px 20px rgba(2,8,23,.2),
        0 0 0 1px rgba(255,255,255,.04),
        0 0 18px rgb(var(--guide-route-rgb) / .18);
      color:rgb(var(--guide-text-rgb) / .98);
      font-size:12px;
      line-height:1.02;
      font-weight:900;
      letter-spacing:.015em;
      backdrop-filter:blur(8px);
    }
    .roomWorldInfoOverlayState{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:2px 6px;
      border-radius:999px;
      border:1px solid rgb(var(--guide-route-rgb) / .18);
      background:rgba(8,13,28,.52);
      color:rgb(var(--guide-text-rgb) / 1);
      font-size:9px;
      line-height:1;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      box-shadow:0 8px 18px rgba(2,8,23,.18);
    }
    .roomWorldShade{
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(5,9,19,.14), rgba(5,9,19,.03) 24%, rgba(5,9,19,.08) 68%, rgba(5,9,19,.34)),
        radial-gradient(circle at center, rgb(var(--guide-aura-rgb) / .16), transparent 34%);
      pointer-events:none;
      z-index:1;
    }
    .roomRouteLayer{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      overflow:visible;
      pointer-events:none;
      z-index:3;
    }
    .roomRouteLine{
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
      vector-effect: non-scaling-stroke;
      pointer-events:none;
    }
    .roomRouteLineGlow{
      stroke: rgb(var(--guide-aura-rgb) / .34);
      stroke-width: calc(var(--route-width, 1.2) * 6.6px);
      opacity: calc(.68 * var(--route-glow, 1));
      mix-blend-mode: screen;
    }
    .roomRouteLineAura{
      stroke: rgb(var(--guide-route-rgb) / .92);
      stroke-width: calc(var(--route-width, 1.2) * 2.35px);
      opacity: calc(.94 * var(--route-glow, 1));
      mix-blend-mode: screen;
    }
    .roomRouteLineCore{
      stroke: rgb(var(--guide-beam-rgb) / 1);
      stroke-width: calc(var(--route-width, 1.2) * .72px);
      opacity:1;
      mix-blend-mode: screen;
      filter: drop-shadow(0 0 3px rgb(var(--guide-route-rgb) / .72));
    }
    .roomRouteFlowPath{
      fill:none;
      stroke: rgb(var(--guide-beam-rgb) / .96);
      stroke-width: calc(var(--route-width, 1.2) * .58px);
      stroke-linecap:round;
      stroke-dasharray: 3 18;
      animation: roomRouteGlide 1.5s linear infinite;
      opacity:1;
      mix-blend-mode: screen;
    }
    .roomRoutePulse{
      fill: rgb(var(--guide-beam-rgb) / .92);
      opacity:.96;
    }
    .roomRoutePulseTrail{
      fill: rgb(var(--guide-primary-rgb) / .24);
      opacity:.76;
    }
    .roomRouteHandle{
      position:absolute;
      width:18px;
      height:18px;
      border-radius:999px;
      border:2px solid rgba(255,255,255,.88);
      box-shadow: 0 0 0 2px rgba(8,13,28,.42), 0 0 16px rgba(56,189,248,.34);
      transform: translate(-50%, -50%);
      z-index:8;
      cursor:grab;
    }
    .roomRouteHandleStart{ background: rgba(34,197,94,.92); }
    .roomRouteHandleControl{ background: rgba(56,189,248,.92); }
    .roomRouteHandleEnd{ background: rgba(245,158,11,.96); }
    .roomSatellite{
      position:absolute;
      left:61%;
      top:28%;
      z-index:7;
      width:clamp(82px, 8.2vw, 132px);
      aspect-ratio:1.45 / 1;
      border:0;
      padding:0;
      background:transparent;
      cursor:pointer;
      transform:translate(-50%, -50%);
      filter: drop-shadow(0 18px 22px rgba(2,8,23,.34));
      animation: roomSatelliteDrift 5.4s ease-in-out infinite;
    }
    .roomSatellite.hidden{
      display:none !important;
      pointer-events:none !important;
    }
    .roomSatellite::before{
      content:"";
      position:absolute;
      left:50%;
      top:50%;
      width:76%;
      height:76%;
      transform:translate(-50%, -50%);
      border-radius:999px;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,218,112,.26), transparent 42%),
        radial-gradient(circle at 50% 50%, rgba(125,211,252,.16), transparent 70%);
      filter:blur(10px);
      opacity:.9;
      pointer-events:none;
    }
    .roomSatelliteImg{
      position:relative;
      z-index:2;
      display:block;
      width:100%;
      height:100%;
      object-fit:contain;
      pointer-events:none;
      user-select:none;
      animation: roomSatelliteTilt 3.2s ease-in-out infinite;
    }
    .roomSatelliteSignal{
      position:absolute;
      left:50%;
      top:50%;
      z-index:1;
      width:84%;
      height:84%;
      transform:translate(-50%, -50%);
      border-radius:999px;
      border:1px solid rgba(255,225,128,.34);
      box-shadow:
        0 0 24px rgba(255,210,96,.26),
        inset 0 0 18px rgba(255,238,180,.16);
      opacity:.86;
      animation: roomSatellitePing 1.8s ease-in-out infinite;
      pointer-events:none;
    }
    .roomSatelliteBadge{
      position:absolute;
      left:50%;
      bottom:-12px;
      z-index:3;
      transform:translateX(-50%);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:64px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(255,226,143,.34);
      background:linear-gradient(180deg, rgba(26,22,12,.86), rgba(10,16,32,.72));
      color:#fff6d7;
      font-size:11px;
      font-weight:900;
      letter-spacing:.04em;
      text-transform:uppercase;
      box-shadow:0 10px 24px rgba(2,8,23,.28);
      pointer-events:none;
    }
    .roomSatelliteCountdown{
      position:absolute;
      left:50%;
      top:47%;
      transform:translate(-50%, -50%);
      z-index: 9;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width: clamp(78px, 7.2vw, 108px);
      padding: 5px 9px;
      border-radius: 14px;
      border: 1px solid rgba(170,235,255,.42);
      background:
        radial-gradient(circle at 50% 0%, rgba(178,243,255,.30), transparent 54%),
        linear-gradient(180deg, rgba(6,22,42,.82), rgba(2,10,24,.72));
      color: rgba(237,249,255,.96);
      font-size: clamp(9px, .86vw, 11px);
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
      box-shadow:
        0 10px 22px rgba(2,8,23,.30),
        inset 0 1px 0 rgba(255,255,255,.22),
        0 0 18px rgba(125,232,255,.16);
      backdrop-filter: blur(10px);
      pointer-events:none;
      animation: roomSatelliteCountdownPulse 2.6s ease-in-out infinite;
    }
    .roomSatelliteCountdown.hidden{
      display:none !important;
    }
    .roomSatelliteCountdown::before,
    .roomSatelliteCountdown::after{
      content:"";
      position:absolute;
      top:50%;
      width:4px;
      height:4px;
      border-radius:999px;
      background: rgba(167,243,255,.92);
      box-shadow:0 0 10px rgba(125,232,255,.75);
      transform:translateY(-50%);
    }
    .roomSatelliteCountdown::before{ left:7px; }
    .roomSatelliteCountdown::after{ right:7px; }
    .roomSatellite:hover,
    .roomSatellite:focus-visible{
      outline:none;
      filter:
        drop-shadow(0 18px 24px rgba(2,8,23,.34))
        drop-shadow(0 0 20px rgba(255,215,112,.28));
    }
    @keyframes roomSatelliteDrift{
      0%, 100%{ transform:translate(-50%, -50%) translate3d(-6px, -4px, 0); }
      35%{ transform:translate(-50%, -50%) translate3d(8px, 4px, 0); }
      68%{ transform:translate(-50%, -50%) translate3d(2px, -9px, 0); }
    }
    @keyframes roomSatelliteTilt{
      0%, 100%{ transform:rotate(-3deg); }
      50%{ transform:rotate(4deg); }
    }
    @keyframes roomSatellitePing{
      0%, 100%{ opacity:.5; transform:translate(-50%, -50%) scale(.9); }
      50%{ opacity:1; transform:translate(-50%, -50%) scale(1.08); }
    }
    @keyframes roomSatelliteCountdownPulse{
      0%, 100%{ opacity:.88; filter: drop-shadow(0 0 0 rgba(125,232,255,0)); }
      50%{ opacity:1; filter: drop-shadow(0 0 10px rgba(125,232,255,.30)); }
    }
    .roomWorldBottomPanel{
      position:absolute;
      z-index:5;
      border:1px solid rgba(255,255,255,.1);
      background: linear-gradient(180deg, rgba(8,13,28,.6), rgba(8,13,28,.42));
      backdrop-filter: blur(8px);
      box-shadow: 0 12px 28px rgba(2,8,23,.2);
      display:grid;
      grid-template-columns: minmax(170px, max-content) minmax(260px, 1fr) auto;
      align-items:center;
      gap:10px;
    }
    .roomWorldEyebrow{
      display:none;
      font-size:12px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color: rgba(191,219,254,.92);
      margin-bottom:8px;
    }
    .roomWorldLead{
      margin:6px 0 0;
      max-width:720px;
      color: rgba(226,232,240,.82);
    }
    .roomWorldCompactLead{
      margin-top:1px;
      font-size:11px;
      line-height:1.2;
      color:rgb(var(--guide-text-rgb) / .92);
      max-width:300px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .roomWorldHotspot{
      position:absolute;
      z-index:4;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:flex-start;
      gap:4px;
      width: var(--node-width, 20%);
      min-width: 130px;
      border:0;
      padding:30px 34px 22px;
      background: transparent;
      color:#fff;
      cursor:pointer;
      text-align:center;
      left: var(--node-x, 50%);
      top: var(--node-y, 50%);
      --node-label-bottom: 30px;
      --node-state-bottom: 10px;
      transform: translate(-50%, -50%) scale(var(--node-scale, 1));
      transform-origin:center center;
    }
    .roomWorldHotspot::before{
      content:"";
      position:absolute;
      left:50%;
      top:42%;
      width:68%;
      height:40%;
      transform:translate(-50%, -50%);
      background:
        radial-gradient(circle at center, rgb(var(--guide-route-rgb) / .42), transparent 54%),
        radial-gradient(circle at center, rgb(var(--guide-aura-rgb) / .26), transparent 72%);
      filter: blur(18px) saturate(1.08);
      opacity:.86;
      pointer-events:none;
      z-index:0;
    }
    .roomWorldHotspot:not(.roomWorldHotspotCenter)::after{
      content:"";
      position:absolute;
      inset:-34% -42% -30%;
      z-index:5;
      background:transparent;
      pointer-events:auto;
    }
    .roomWorldSlot{
      position:relative;
      overflow:visible;
      top:-30px;
      width: min(11vw, 132px);
      height: min(7vw, 84px);
      min-width: 92px;
      min-height: 58px;
      border-radius:22px;
      border:1.5px dashed rgb(var(--guide-route-rgb) / .34);
      background: linear-gradient(180deg, rgb(var(--guide-beam-rgb) / .08), rgba(255,255,255,.02));
      box-shadow:
        0 0 0 1px rgb(var(--guide-route-rgb) / .08),
        0 0 24px rgb(var(--guide-aura-rgb) / .12),
        0 16px 28px rgba(2,8,23,.26);
      display:grid;
      place-items:center;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
      z-index:1;
    }
    .roomWorldSlotArt{
      display:block;
      width:100%;
      height:auto;
      min-width:0;
      min-height:0;
      border:none;
      border-radius:0;
      background:transparent;
      box-shadow:none;
    }
    .roomWorldSlotArt::before{
      inset:-10% 0;
      opacity:.58;
    }
    .roomWorldSlotArt::after{
      inset:-10% 2%;
    }
    .roomWorldSlotArtCenter{
      width:100%;
      min-width:0;
      min-height:0;
    }
    .roomWorldLayeredSlot{
      display:block;
      background:transparent;
      border:none;
      box-shadow:none;
    }
    .roomWorldFloatGroup{
      position:absolute;
      inset:0;
      z-index:3;
      pointer-events:none;
      animation: roomNodeFloat 5.8s ease-in-out infinite;
      animation-delay: var(--node-float-delay, 0s);
      will-change: transform;
    }
    .roomWorldSlot > *{
      position:relative;
      z-index:3;
    }
    .roomWorldSlot > .roomWorldFloatGroup{
      position:absolute;
      z-index:3;
    }
    .roomWorldSlot::before{
      content:"";
      position:absolute;
      inset:-8%;
      border-radius:999px;
      background:
        radial-gradient(circle at 50% 48%, rgb(var(--guide-primary-rgb) / .14), transparent 30%),
        radial-gradient(circle at 50% 60%, rgb(var(--guide-route-rgb) / .16), transparent 48%),
        radial-gradient(circle at 50% 52%, rgb(var(--guide-aura-rgb) / .12), transparent 64%);
      filter: blur(10px);
      opacity:.76;
      pointer-events:none;
      z-index:-1;
      transition: opacity .18s ease, transform .18s ease, filter .18s ease;
    }
    .roomWorldSlot::after{
      content:"";
      position:absolute;
      inset:auto 7% -5%;
      height:34%;
      pointer-events:none;
      z-index:2;
      opacity:0;
      border-radius:999px;
      background:
        radial-gradient(ellipse at 50% 72%, rgb(var(--guide-beam-rgb) / .46), transparent 58%),
        radial-gradient(ellipse at 50% 50%, rgb(var(--guide-primary-rgb) / .22), transparent 68%),
        linear-gradient(90deg, transparent, rgb(var(--guide-route-rgb) / .18) 46%, rgb(var(--guide-route-rgb) / .3) 50%, rgb(var(--guide-route-rgb) / .18) 54%, transparent);
      filter: blur(8px) saturate(1.08);
      transform-origin:center center;
      animation:none;
    }
    .roomWorldSlotHint{
      position:relative;
      z-index:3;
    }
    .roomWorldSlotCenter{
      width: min(24vw, 320px);
      height: min(16vw, 220px);
      min-width: 220px;
      min-height: 150px;
    }
    .roomWorldSlotCenter::before{
      content:"";
      position:absolute;
      inset:-10% 16% 8%;
      background:
        radial-gradient(circle at 50% 70%, rgb(var(--guide-primary-rgb) / .24), transparent 38%),
        radial-gradient(circle at 50% 44%, rgb(var(--guide-beam-rgb) / .24), transparent 28%),
        radial-gradient(circle at 50% 54%, rgb(var(--guide-aura-rgb) / .18), transparent 52%),
        linear-gradient(180deg, rgb(var(--guide-beam-rgb) / 0), rgb(var(--guide-beam-rgb) / .16) 18%, rgb(var(--guide-beam-rgb) / .04) 60%, transparent 100%);
      filter: blur(14px) saturate(1.04);
      pointer-events:none;
      z-index:-1;
    }
    .roomWorldSlotCenter::after{
      inset:auto 8% -4%;
      height:38%;
      opacity:0;
      border-radius:999px;
      background:
        radial-gradient(ellipse at 50% 68%, rgb(var(--guide-beam-rgb) / .54), transparent 58%),
        radial-gradient(ellipse at 50% 44%, rgb(var(--guide-primary-rgb) / .26), transparent 70%),
        linear-gradient(90deg, transparent, rgb(var(--guide-route-rgb) / .2) 44%, rgb(var(--guide-route-rgb) / .34) 50%, rgb(var(--guide-route-rgb) / .2) 56%, transparent);
      filter: blur(9px) saturate(1.1);
      transform-origin:center center;
      animation:none;
    }
    .roomWorldSlotHint{
      font-size:12px;
      font-weight:900;
      letter-spacing:.05em;
      text-transform:uppercase;
      color: rgb(var(--guide-text-rgb) / .8);
      text-shadow: 0 0 14px rgb(var(--guide-route-rgb) / .4);
    }
    .roomWorldNodeArt{
      width:100%;
      height:auto;
      object-fit:contain;
      object-position:center;
      filter: drop-shadow(0 10px 18px rgba(2,8,23,.26));
      pointer-events:none;
      user-select:none;
      display:block;
    }
    .roomWorldLayeredSlot .roomWorldNodeArt{
      position:absolute;
      left:50%;
      top:50%;
      max-width:none;
      transform: translate(-50%, -50%);
    }
    .roomWorldLayeredSlot .roomWorldIslandArt{
      z-index:1;
      top:58%;
      width:112%;
      opacity:.98;
      transform: translate(calc(-50% + var(--node-island-x, 0%)), calc(-50% + var(--node-island-y, 0%))) scale(var(--node-island-scale, 1));
      filter:
        drop-shadow(0 16px 24px rgba(2,8,23,.3))
        drop-shadow(0 0 18px rgb(var(--guide-route-rgb) / .1));
    }
    .roomWorldLayeredSlot .roomWorldBaseArt{
      z-index:2;
      top:50%;
      width:100%;
      transform: translate(calc(-50% + var(--node-base-x, 0%)), calc(-50% + var(--node-base-y, 0%))) scale(var(--node-base-scale, 1));
      filter:
        drop-shadow(0 12px 18px rgba(2,8,23,.25))
        drop-shadow(0 0 16px rgb(var(--guide-primary-rgb) / .1));
    }
    .roomWorldLayeredSlot .roomWorldIslandArtCenter{
      top:62%;
      width:126%;
    }
    .roomWorldLayeredSlot .roomWorldBaseArtCenter{
      top:39%;
      width:92%;
      filter:
        drop-shadow(0 18px 22px rgba(2,8,23,.2))
        drop-shadow(0 0 18px rgb(var(--guide-primary-rgb) / .18))
        drop-shadow(0 0 32px rgb(var(--guide-aura-rgb) / .16));
    }
    .roomWorldNodeArtCenter{
      position:relative;
      z-index:2;
      transform: scale(1.18) translateY(3%);
      mix-blend-mode:normal;
      opacity:1;
      filter:
        drop-shadow(0 18px 22px rgba(2,8,23,.18))
        drop-shadow(0 0 18px rgb(var(--guide-primary-rgb) / .16))
        drop-shadow(0 0 30px rgb(var(--guide-aura-rgb) / .14));
    }
    .roomWorldLabel{
      position:absolute;
      left:50%;
      top:auto;
      bottom:var(--node-label-bottom, 30px);
      z-index:7;
      width:max-content;
      max-width:min(210px, 128%);
      transform:translateX(-50%);
      pointer-events:none;
      font-size:12px;
      font-weight:900;
      letter-spacing:.015em;
      padding:5px 10px 6px;
      border-radius:999px;
      background:
        linear-gradient(180deg, rgb(var(--guide-beam-rgb) / .14), transparent 52%),
        linear-gradient(180deg, rgba(10,18,38,.78), rgba(8,13,28,.54));
      border:1px solid rgb(var(--guide-route-rgb) / .26);
      backdrop-filter: blur(8px);
      box-shadow:
        0 10px 20px rgba(2,8,23,.2),
        0 0 0 1px rgba(255,255,255,.04),
        0 0 18px rgb(var(--guide-route-rgb) / .18);
      color:rgb(var(--guide-text-rgb) / .98);
      line-height:1.05;
      white-space:normal;
      text-wrap:balance;
      overflow-wrap:normal;
      text-shadow:
        0 0 12px rgb(var(--guide-route-rgb) / .26),
        0 2px 12px rgba(2,8,23,.74);
    }
    .roomWorldMeta{
      display:none;
    }
    .roomWorldState{
      position:absolute;
      left:50%;
      top:auto;
      bottom:var(--node-state-bottom, 10px);
      z-index:7;
      transform:translateX(-50%);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      pointer-events:none;
      padding:3px 7px;
      border-radius:999px;
      border:1px solid rgb(var(--guide-route-rgb) / .18);
      background: rgba(8,13,28,.52);
      font-size:8px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      box-shadow: 0 8px 18px rgba(2,8,23,.18);
    }
    .roomWorldHotspot{
      --node-island-center-y: calc(clamp(58px, 7vw, 84px) * .50);
    }
    .roomWorldHotspot:not(.roomWorldHotspotCenter) .roomWorldInfoStack{
      left:50%;
      top:calc(clamp(58px, 7vw, 84px) * .50);
    }
    .roomWorldInfoStack{
      position:absolute;
      left:var(--node-info-x, 50%);
      top:var(--node-info-y, var(--node-island-center-y));
      z-index:7;
      transform:translate(-50%, -50%) scale(var(--node-info-counter-scale, 1));
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:2px;
      width:max-content;
      max-width:min(210px, 128%);
      pointer-events:none;
    }
    #screenRoom .roomWorldHotspot .roomWorldInfoStack{
      display:none !important;
      visibility:hidden !important;
      opacity:0 !important;
      pointer-events:none !important;
    }
    .roomWorldInfoStack > *{
      pointer-events:none;
    }
    .roomWorldInfoStack .roomWorldLabel{
      position:static;
      left:auto;
      top:auto;
      bottom:auto;
      transform:none;
      width:auto;
      max-width:100%;
      font-size:12px;
      line-height:1.05;
      margin:0;
    }
    .roomWorldInfoStack .roomWorldState{
      position:static;
      left:auto;
      top:auto;
      bottom:auto;
      transform:none;
      font-size:9px;
      line-height:1;
      margin:0;
    }
    .roomWorldTouchCta{
      position:absolute;
      left:50%;
      top:40%;
      transform:translate(-50%, -50%) scale(.94);
      z-index:6;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:58px;
      padding:8px 14px;
      border-radius:999px;
      border:1px solid rgb(var(--guide-primary-rgb) / .3);
      background: linear-gradient(180deg, rgb(var(--guide-primary-rgb) / .2), rgba(8,13,28,.78));
      box-shadow:
        0 0 0 1px rgb(var(--guide-primary-rgb) / .12),
        0 10px 24px rgba(2,8,23,.28),
        0 0 24px rgb(var(--guide-primary-rgb) / .18);
      backdrop-filter: blur(8px);
      font-size:12px;
      font-weight:900;
      letter-spacing:.03em;
      color:#f8fbff;
      opacity:0;
      pointer-events:none;
      transition: opacity .16s ease, transform .16s ease;
    }
    .roomWorldHotspot.show-touch-open .roomWorldTouchCta{
      opacity:1;
      transform:translate(-50%, -50%) scale(1);
    }
    .roomWorldHotspot:hover .roomWorldSlot,
    .roomWorldHotspot:focus-visible .roomWorldSlot,
    .roomWorldHotspot.show-touch-open .roomWorldSlot{
      transform: translateY(-2px) scale(1.018);
      border-color: rgb(var(--guide-route-rgb) / .68);
      background: linear-gradient(180deg, rgb(var(--guide-primary-rgb) / .14), rgba(255,255,255,.04));
      box-shadow:
        0 0 0 1px rgb(var(--guide-route-rgb) / .22),
        0 0 28px rgb(var(--guide-primary-rgb) / .16),
        0 18px 30px rgba(2,8,23,.28);
    }
    .roomWorldHotspot:hover .roomWorldSlot::before,
    .roomWorldHotspot:focus-visible .roomWorldSlot::before,
    .roomWorldHotspot.show-touch-open .roomWorldSlot::before{
      opacity:1;
      transform: scale(1.015);
      filter: blur(11px) saturate(1.06);
    }
    .roomWorldHotspot:hover .roomWorldSlot::after,
    .roomWorldHotspot:focus-visible .roomWorldSlot::after,
    .roomWorldHotspot.show-touch-open .roomWorldSlot::after{
      opacity:.92;
      animation: roomSlotAuraBreath 1.15s ease-out both;
    }
    .roomWorldHotspot:hover .roomWorldSlotArt,
    .roomWorldHotspot:focus-visible .roomWorldSlotArt{
      border:none;
      background:transparent;
      box-shadow:none;
    }
    .roomWorldHotspot:focus-visible{
      outline:none;
    }
    .roomWorldHotspot[data-state="done"] .roomWorldState{
      background: rgb(var(--guide-primary-rgb) / .18);
      border-color: rgb(var(--guide-primary-rgb) / .34);
      color:rgb(var(--guide-text-rgb) / 1);
    }
    .roomWorldHotspot[data-state="active"] .roomWorldState{
      background: rgb(var(--guide-aura-rgb) / .2);
      border-color: rgb(var(--guide-aura-rgb) / .34);
      color:rgb(var(--guide-text-rgb) / 1);
    }
    .roomWorldHotspot[data-state="locked"] .roomWorldState{
      background: rgba(148,163,184,.16);
      border-color: rgba(148,163,184,.28);
      color:#e2e8f0;
    }
    .roomWorldHotspotCenter{
      --node-y:46.2%;
      --node-x:50.8%;
      --node-width:28%;
      --node-island-center-y: calc(clamp(150px, 16vw, 220px) * .62);
      --node-label-bottom: 34px;
      --node-state-bottom: 14px;
      pointer-events:none;
    }
    .roomWorldHotspotCenter::before{
      top:46%;
      width:74%;
      height:46%;
      background:
        radial-gradient(circle at center, rgb(var(--guide-route-rgb) / .24), transparent 48%),
        radial-gradient(circle at center, rgb(var(--guide-aura-rgb) / .18), transparent 72%);
      filter: blur(24px) saturate(1.06);
      opacity:.76;
      z-index:0;
    }
    .roomWorldHotspotCenter .roomWorldSlot{
      border:none;
      background:transparent;
      box-shadow:none;
      pointer-events:auto;
    }
    .roomWorldHotspotCenter:hover .roomWorldSlot,
    .roomWorldHotspotCenter:focus-visible .roomWorldSlot{
      transform: translateY(-3px) scale(1.03);
      border:none;
      background:transparent;
      box-shadow:none;
    }
    .roomWorldHotspotCenter .roomWorldLabel{
      font-size:12px;
      pointer-events:auto;
    }
    .roomWorldHotspotCenter .roomWorldState{
      pointer-events:auto;
    }
    .roomWorldHotspotCenter .roomWorldInfoStack{
      pointer-events:auto;
    }
    .roomWorldHotspotLeftMid .roomWorldLabel{
      bottom:var(--node-label-bottom, 30px);
    }
    .roomWorldHotspotLeftMid .roomWorldState{
      bottom:var(--node-state-bottom, 10px);
    }
    .roomWorldHotspot.hlTarget{
      outline:none;
      box-shadow:none;
      border-radius:0;
      transform: translate(-50%, -50%) scale(var(--node-scale, 1)) !important;
      animation:none !important;
    }
    .roomWorldHotspot.hlTarget::before{
      background:
        radial-gradient(circle at center, rgb(var(--guide-primary-rgb) / .38), transparent 42%),
        radial-gradient(circle at center, rgb(var(--guide-aura-rgb) / .26), transparent 68%);
      filter: blur(26px) saturate(1.12);
      opacity:1;
      animation: roomGuideHalo 1.4s ease-in-out infinite;
    }
    .roomWorldHotspot.hlTarget .roomWorldSlot{
      border-color: rgb(var(--guide-primary-rgb) / .72);
      box-shadow:
        0 0 0 1px rgb(var(--guide-primary-rgb) / .26),
        0 0 34px rgb(var(--guide-primary-rgb) / .24),
        0 0 56px rgb(var(--guide-aura-rgb) / .18),
        0 18px 30px rgba(2,8,23,.28);
      background: linear-gradient(180deg, rgb(var(--guide-primary-rgb) / .18), rgba(255,255,255,.05));
      transform: none !important;
    }
    .roomWorldHotspot.hlTarget .roomWorldSlotArt{
      border:none;
      background:transparent;
      box-shadow:none;
    }
    .roomWorldHotspotCenter.hlTarget .roomWorldSlot{
      border:none;
      background:transparent;
      box-shadow:none;
    }
    .roomWorldHotspot.hlTarget .roomWorldSlot::before{
      opacity:1;
      transform: scale(1.03);
      filter: blur(13px) saturate(1.1);
    }
    .roomWorldHotspot.hlTarget .roomWorldSlot::after{
      opacity:.98;
      animation: roomSlotAuraGuide 1.8s ease-in-out infinite;
      filter: blur(8px) saturate(1.12);
    }
    .roomWorldHotspot.hlTarget .roomWorldLabel,
    .roomWorldHotspot.hlTarget .roomWorldState{
      text-shadow:
        0 0 20px rgb(var(--guide-primary-rgb) / .42),
        0 3px 16px rgba(2,8,23,.6);
    }
    .roomWorldHotspotTopLeft{ --node-y:22.4%; --node-x:14.5%; }
    .roomWorldHotspotLeftMid{ --node-y:46.5%; --node-x:14.7%; --node-float-delay:-.9s; }
    .roomWorldHotspotLeftBottom{ --node-y:74.2%; --node-x:16.5%; --node-float-delay:-1.5s; }
    .roomWorldHotspotTopRight{ --node-y:22.5%; --node-x:85.5%; --node-float-delay:-.5s; }
    .roomWorldHotspotRightMid{ --node-y:56.5%; --node-x:85%; --node-float-delay:-1.2s; }
    .roomWorldHotspotBottomCenter{ --node-y:76.8%; --node-x:50%; --node-float-delay:-.35s; }
    .roomWorldHotspotTopLeft .roomWorldSlot::after,
    .roomWorldHotspotRightMid .roomWorldSlot::after{
      animation-direction: reverse;
      animation-duration: 5.2s;
    }
    .roomWorldHotspotLeftMid .roomWorldSlot::after,
    .roomWorldHotspotBottomCenter .roomWorldSlot::after{
      animation-duration: 6.4s;
    }
    .roomWorldHotspotLeftBottom .roomWorldSlot::after{
      animation-duration: 4.9s;
    }
    .roomWorldHotspot.is-layout-selected .roomWorldLabel,
    .roomWorldHotspot.is-layout-selected .roomWorldState{
      text-shadow: 0 0 18px rgb(var(--guide-primary-rgb) / .42), 0 3px 16px rgba(2,8,23,.6);
    }
    .roomWorldHotspot.is-layout-selected::after{
      content:"";
      position:absolute;
      inset:4% 10% 28%;
      border:2px dashed rgb(var(--guide-primary-rgb) / .52);
      border-radius:26px;
      box-shadow: 0 0 0 1px rgb(var(--guide-primary-rgb) / .14);
      pointer-events:none;
      z-index:5;
    }
    @keyframes roomNodeFloat{
      0%, 100%{ transform: translate3d(0, -3px, 0); }
      50%{ transform: translate3d(0, 4px, 0); }
    }
    @keyframes roomOrbitRing{
      0%{ transform: rotate(0deg) scale(.985); }
      50%{ transform: rotate(180deg) scale(1.015); }
      100%{ transform: rotate(360deg) scale(.985); }
    }
    @keyframes roomSlotSparkle{
      0%, 100%{
        transform: translateX(-1.8%) scale(.992);
        filter: drop-shadow(0 0 5px rgb(var(--guide-primary-rgb) / .14));
      }
      35%{
        transform: translateX(.6%) scale(1);
        filter: drop-shadow(0 0 8px rgb(var(--guide-primary-rgb) / .22));
      }
      65%{
        transform: translateX(1.8%) scale(1.006);
        filter: drop-shadow(0 0 10px rgb(var(--guide-primary-rgb) / .28));
      }
    }
    @keyframes roomSlotAuraBreath{
      0%{ opacity:0; transform: translateY(5%) scaleX(.72) scaleY(.78); }
      42%{ opacity:.94; transform: translateY(0) scaleX(1.04) scaleY(1); }
      100%{ opacity:.64; transform: translateY(2%) scaleX(.96) scaleY(.9); }
    }
    @keyframes roomSlotAuraGuide{
      0%, 100%{ opacity:.62; transform: translateY(3%) scaleX(.9) scaleY(.86); }
      50%{ opacity:1; transform: translateY(0) scaleX(1.08) scaleY(1.02); }
    }
    @keyframes roomRouteGlide{
      to{ stroke-dashoffset:-36; }
    }
    @keyframes roomAmbientDrift{
      0%{ transform:translate(-50%, -50%) translate3d(-18px, 12px, 0) scale(var(--s, 1)); }
      28%{ transform:translate(-50%, -50%) translate3d(16px, -14px, 0) scale(var(--s, 1)); }
      58%{ transform:translate(-50%, -50%) translate3d(26px, 9px, 0) scale(var(--s, 1)); }
      100%{ transform:translate(-50%, -50%) translate3d(-18px, 12px, 0) scale(var(--s, 1)); }
    }
    @keyframes roomAmbientTwinkle{
      0%, 100%{ opacity:.58; filter:none; }
      42%{ opacity:.95; filter:none; }
      76%{ opacity:.74; filter:none; }
    }
    @keyframes roomAmbientFieldBreath{
      0%, 100%{ opacity:.52; filter:none; }
      50%{ opacity:.82; filter:none; }
    }
    @keyframes roomMeteorFly{
      0%{
        opacity:0;
        transform:translate3d(0, 0, 0) rotate(var(--meteor-angle, -18deg)) scaleX(.72);
      }
      12%{
        opacity:.9;
      }
      100%{
        opacity:0;
        transform:translate3d(var(--meteor-x, 260px), var(--meteor-y, 110px), 0) rotate(var(--meteor-angle, -18deg)) scaleX(.42);
      }
    }
    @keyframes roomGuideHalo{
      0%, 100%{ opacity:.88; filter: blur(24px) saturate(1.08); }
      50%{ opacity:1; filter: blur(30px) saturate(1.18); }
    }
    body.room-layout-editing .roomWorldHotspot{
      cursor:grab;
    }
    body.room-layout-editing .roomWorldHotspot:active{
      cursor:grabbing;
    }
    body.room-route-editing .roomRouteHandle{
      cursor:grab;
    }
    body.room-route-editing .roomRouteHandle:active{
      cursor:grabbing;
    }
    .roomLayoutEditorToggle{
      position:absolute;
      top:18px;
      right:18px;
      z-index:35;
      border:1px solid rgba(255,255,255,.14);
      border-radius:16px;
      padding:10px 14px;
      font:inherit;
      font-weight:900;
      color:#f8fbff;
      background: linear-gradient(180deg, rgba(8,13,28,.82), rgba(8,13,28,.58));
      backdrop-filter: blur(8px);
      box-shadow: 0 14px 34px rgba(2,8,23,.26);
      cursor:pointer;
    }
    .roomRouteEditorToggle{
      top:68px;
    }
    .roomLayoutEditor{
      position:absolute;
      top:66px;
      right:18px;
      z-index:36;
      width:min(320px, calc(100vw - 28px));
      padding:12px;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.14);
      background: linear-gradient(180deg, rgba(8,13,28,.92), rgba(8,13,28,.82));
      backdrop-filter: blur(10px);
      box-shadow: 0 24px 60px rgba(2,8,23,.34);
      display:flex;
      flex-direction:column;
      gap:12px;
      max-height:min(78dvh, 720px);
      overflow-y:auto;
      overscroll-behavior:contain;
    }
    .roomLayoutEditor::-webkit-scrollbar{
      width:8px;
    }
    .roomLayoutEditor::-webkit-scrollbar-thumb{
      border-radius:999px;
      background: rgb(var(--guide-route-rgb) / .32);
    }
    .roomLayoutEditor::-webkit-scrollbar-track{
      background: rgba(255,255,255,.04);
      border-radius:999px;
    }
    .roomRouteEditor{
      top:116px;
    }
    .roomLayoutEditorHead{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
    }
    .roomLayoutEditorHandle{
      display:flex;
      align-items:flex-start;
      gap:10px;
      cursor:move;
      user-select:none;
      flex:1 1 auto;
      min-width:0;
    }
    .roomLayoutEditorGrip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:20px;
      color:rgba(191,219,254,.72);
      font-size:18px;
      line-height:1;
      letter-spacing:-2px;
      transform: translateY(1px);
    }
    .roomLayoutEditorHeadActions{
      display:flex;
      align-items:center;
      gap:6px;
      flex:0 0 auto;
    }
    .roomLayoutEditorTitle{
      font-size:16px;
      font-weight:900;
      color:#f8fbff;
    }
    .roomLayoutEditorHint{
      margin-top:4px;
      font-size:12px;
      line-height:1.45;
      color:rgba(226,232,240,.74);
    }
    .roomLayoutEditorField{
      display:flex;
      flex-direction:column;
      gap:8px;
      font-size:12px;
      font-weight:800;
      color:rgba(226,232,240,.84);
    }
    .roomLayoutEditorField .authInput{
      width:100%;
      background: rgba(255,255,255,.06);
    }
    .roomLayoutEditorField input[type="range"]{
      width:100%;
    }
    .roomLayoutEditorValue,
    .roomLayoutEditorCoords{
      font-size:12px;
      color:rgba(191,219,254,.92);
      font-weight:800;
    }
    .roomLayoutEditorActions{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap:8px;
    }
    .roomLayoutEditorActions .btn{
      min-width:0;
      width:100%;
    }
    .roomLayoutJson{
      width:100%;
      min-height:140px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color:#eaf2ff;
      padding:10px 12px;
      resize:none;
      font: 12px/1.45 Consolas, Monaco, monospace;
    }
    .roomWorldBottomPanel{
      left:max(190px, calc(env(safe-area-inset-left) + 186px));
      right:22px;
      bottom:12px;
      min-height:56px;
      padding:7px 12px;
      border-radius:14px;
      box-shadow: 0 8px 20px rgba(2,8,23,.16);
    }
    .roomWorldBottomTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-bottom:0;
      min-width:0;
    }
    .roomWorldProgressTitle{
      font-size:13px;
      font-weight:900;
      color:rgb(var(--guide-text-rgb) / .98);
    }
    .roomWorldTopBadges{
      display:flex;
      align-items:center;
      gap:6px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .roomWorldPercentBadge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:44px;
      padding:4px 8px;
      border-radius:999px;
      border:1px solid rgb(var(--guide-route-rgb) / .28);
      background: rgb(var(--guide-aura-rgb) / .14);
      font-size:11px;
      font-weight:900;
      color:rgb(var(--guide-text-rgb) / 1);
    }
    .roomWorldSummary{
      display:none;
      max-width:160px;
      color: rgb(var(--guide-text-rgb) / .78);
      font-size:10px;
      line-height:1.15;
      text-align:right;
    }
    .roomWorldProgressRow{
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
    }
    .roomWorldProgressBar{
      flex:1 1 auto;
      height:5px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.1);
      background: rgba(0,0,0,.24);
      overflow:hidden;
    }
    .roomWorldProgressFill{
      height:100%;
      width:0%;
      border-radius:inherit;
      background: linear-gradient(90deg, rgb(var(--guide-route-rgb) / .7), rgb(var(--guide-primary-rgb) / .84), rgb(var(--guide-beam-rgb) / .92));
      transition: width .24s ease;
    }
    .roomWorldProgressMeta{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:6px;
      color: rgb(var(--guide-text-rgb) / .82);
      font-size:11px;
      white-space:nowrap;
      min-width:120px;
    }
    .roomWorldSteps{
      display:none;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap:6px;
      margin-top:6px;
    }
    .roomJourneyStep{
      min-height: auto;
      padding:5px 6px;
      border-radius:999px;
    }
    .roomJourneyStepIndex{
      font-size:8px;
      margin-bottom:1px;
    }
    .roomJourneyStepTitle{
      font-size:10px;
      line-height:1.2;
    }
    .roomJourneyStepMeta{
      display:none;
    }
    .roomWorldSteps .roomJourneyStep{
      min-height:auto;
      padding:5px 6px;
      border-radius:999px;
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.08);
      text-align:center;
    }
    .roomWorldSteps .roomJourneyStepIndex{
      font-size:8px;
      margin-bottom:1px;
    }
    .roomWorldSteps .roomJourneyStepTitle{
      font-size:10px;
      line-height:1.2;
    }
    .roomWorldSteps .roomJourneyStepMeta{
      display:none;
    }
    .roomWorldSteps .roomJourneyStep.is-current{
      border-color: rgb(var(--guide-primary-rgb) / .3);
      box-shadow: 0 0 0 1px rgb(var(--guide-primary-rgb) / .12), 0 0 22px rgb(var(--guide-primary-rgb) / .16);
      background: linear-gradient(180deg, rgb(var(--guide-primary-rgb) / .16), rgba(255,255,255,.03));
    }
    .roomWorldSteps .roomJourneyStep.is-done{
      border-color: rgb(var(--guide-route-rgb) / .22);
      background: linear-gradient(180deg, rgb(var(--guide-route-rgb) / .14), rgba(255,255,255,.03));
    }
    @media (max-width: 1100px){
      #appRoot.roomWorldFocus .panel{
        height:100dvh;
      }
    }
    @media (max-width: 860px){
      #screenRoom.roomWorldScreen{
        margin:0;
      }
      .roomWorldScene{
        min-height:100dvh;
        height:100dvh;
      }
      .roomWorldCanvas{
        width:max(100%, calc(100dvh * 1.5));
      }
      .roomWorldBottomPanel{
        left:max(176px, calc(env(safe-area-inset-left) + 172px));
        right:12px;
        border-radius:16px;
        padding:8px 10px;
        grid-template-columns:minmax(130px, max-content) minmax(160px, 1fr) auto;
      }
      .roomWorldBottomPanel{ bottom:12px; }
      .roomWorldProgressRow{
        flex-direction:row;
        align-items:center;
      }
      .roomWorldSummary{
        display:none;
      }
    }
    @media (max-width: 640px){
      .roomWorldScene{
        min-height:100dvh;
        height:100dvh;
      }
      .roomWorldCanvas{
        width:max(100%, calc(100dvh * 1.5));
      }
      .roomWorldBottomPanel{
        bottom:10px;
        left:10px;
        right:10px;
        transform:translateY(-54px);
        transform-origin:bottom center;
        grid-template-columns:1fr auto;
        gap:8px;
      }
      .roomWorldProgressRow{
        grid-column:1 / -1;
      }
      .roomWorldHotspot{
        gap:6px;
      }
      .roomWorldLabel{
        font-size:12px;
        max-width:min(170px, 130%);
        padding:4px 9px 5px;
      }
      .roomWorldState{
        font-size:7px;
        padding:2px 6px;
      }
      .roomWorldTopBadges,
      .roomWorldBottomTop,
      .roomWorldProgressMeta{
        align-items:flex-start;
      }
      .roomWorldSteps{
        display:none;
      }
      .roomWorldSummary{
        max-width: 120px;
      }
      .roomLayoutEditorToggle{
        top:12px;
        right:12px;
      }
      .roomRouteEditorToggle{
        top:62px;
      }
      .roomLayoutEditor{
        top:58px;
        right:10px;
        left:10px;
        width:auto;
      }
      .roomRouteEditor{
        top:108px;
      }
      .roomLayoutEditorActions{
        grid-template-columns:1fr;
      }
    }
    @media (prefers-reduced-motion: reduce){
      .roomWorldCanvas::after{
        animation:none;
        opacity:.64;
      }
      .roomWorldAmbientLights span{
        animation:none;
        opacity:.22;
      }
    }
    .roomHubShell{
      display:flex;
      flex-direction:column;
      gap:18px;
    }
    .roomHubHero{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:18px;
      padding:4px 2px 0;
    }
    .roomHubEyebrow{
      font-size:12px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color: rgba(148,163,184,.92);
      margin-bottom:8px;
    }
    .roomHubLead{
      margin:6px 0 0;
      max-width:760px;
      color: rgba(226,232,240,.84);
    }
    .roomHubHeroStats{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap:10px;
      width:min(460px, 100%);
      flex:0 0 auto;
    }
    .roomHubMiniStat{
      padding:12px 14px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(circle at top left, rgba(125,211,252,.18), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      box-shadow: 0 18px 36px rgba(4,12,26,.18);
    }
    .roomHubMiniStat .k{
      display:block;
      font-size:11px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      color: rgba(148,163,184,.9);
      margin-bottom:6px;
    }
    .roomHubMiniStat strong{
      display:block;
      font-size:15px;
      line-height:1.35;
      color:#f8fbff;
    }
    .roomHubMap{
      position:relative;
      overflow:hidden;
      padding:24px;
      min-height: 920px;
      display:grid;
      grid-template-columns: minmax(220px, 1fr) minmax(420px, 1.38fr) minmax(220px, 1fr);
      grid-template-rows: repeat(3, minmax(190px, auto));
      grid-template-areas:
        "level center report"
        "library center attention"
        "games center prep";
      gap:22px 26px;
      align-items:center;
      background:
        radial-gradient(circle at 50% 45%, rgba(56,189,248,.12), transparent 34%),
        radial-gradient(circle at 18% 18%, rgba(244,114,182,.12), transparent 26%),
        radial-gradient(circle at 84% 24%, rgba(34,197,94,.12), transparent 24%),
        linear-gradient(180deg, rgba(5,11,24,.96), rgba(12,18,36,.98));
    }
    .roomHubBackdrop{
      position:absolute;
      inset:-10%;
      pointer-events:none;
      background:
        radial-gradient(2px 2px at 8% 10%, rgba(255,255,255,.7) 0 100%, transparent 0),
        radial-gradient(2px 2px at 21% 33%, rgba(255,255,255,.5) 0 100%, transparent 0),
        radial-gradient(1.5px 1.5px at 36% 17%, rgba(255,255,255,.52) 0 100%, transparent 0),
        radial-gradient(2px 2px at 53% 7%, rgba(255,255,255,.65) 0 100%, transparent 0),
        radial-gradient(2px 2px at 77% 18%, rgba(255,255,255,.52) 0 100%, transparent 0),
        radial-gradient(2px 2px at 88% 39%, rgba(255,255,255,.55) 0 100%, transparent 0),
        radial-gradient(2px 2px at 17% 62%, rgba(255,255,255,.5) 0 100%, transparent 0),
        radial-gradient(1.5px 1.5px at 44% 76%, rgba(255,255,255,.52) 0 100%, transparent 0),
        radial-gradient(2px 2px at 69% 69%, rgba(255,255,255,.58) 0 100%, transparent 0),
        radial-gradient(2px 2px at 90% 82%, rgba(255,255,255,.52) 0 100%, transparent 0);
      opacity:.55;
    }
    .roomHubRoutes{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      pointer-events:none;
      z-index:1;
    }
    .roomHubRoutes path{
      fill:none;
      stroke: rgba(125,211,252,.44);
      stroke-width:4;
      stroke-linecap:round;
      filter: drop-shadow(0 0 14px rgba(56,189,248,.35));
      opacity:.9;
    }
    .roomHubCenter{
      grid-area:center;
      position:relative;
      z-index:3;
      padding:18px;
      border-radius:28px;
      border:1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(circle at top center, rgba(125,211,252,.16), transparent 42%),
        linear-gradient(180deg, rgba(16,25,46,.94), rgba(9,14,27,.96));
      box-shadow: 0 24px 60px rgba(2,8,23,.34);
      overflow:hidden;
    }
    .roomHubCenter::before{
      content:"";
      position:absolute;
      inset:auto 12% -24% 12%;
      height:170px;
      border-radius:999px;
      background: radial-gradient(circle, rgba(56,189,248,.2), transparent 72%);
      pointer-events:none;
    }
    .roomHubCenterHead,
    .roomHubCenterFoot{
      position:relative;
      z-index:2;
    }
    .roomHubCenterHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:14px;
    }
    .roomHubCenterBadge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      font-weight:900;
      color:#f8fbff;
    }
    .roomHubCenterMeta{
      font-size:13px;
      color: rgba(226,232,240,.78);
    }
    .hubNode{
      --node-transform: none;
      position:relative;
      z-index:3;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:8px;
      min-height: 176px;
      padding:18px;
      border-radius:26px;
      border:1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(circle at top left, rgba(255,255,255,.14), transparent 45%),
        linear-gradient(180deg, rgba(15,22,42,.92), rgba(9,15,29,.96));
      color:#f8fbff;
      text-align:left;
      cursor:pointer;
      overflow:hidden;
      box-shadow: 0 22px 48px rgba(2,8,23,.28);
      transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
      transform: var(--node-transform);
    }
    .hubNode::before{
      content:"";
      position:absolute;
      inset:auto -18% -38% auto;
      width:170px;
      height:170px;
      border-radius:999px;
      background: radial-gradient(circle, rgba(125,211,252,.18), transparent 72%);
      pointer-events:none;
    }
    .hubNode:hover,
    .hubNode:focus-visible{
      transform: var(--node-transform) translateY(-3px) scale(1.01);
      border-color: rgba(125,211,252,.38);
      box-shadow: 0 28px 56px rgba(2,8,23,.36);
      outline:none;
    }
    .hubNodeIcon{
      width:54px;
      height:54px;
      display:grid;
      place-items:center;
      font-size:26px;
      border-radius:18px;
      background: rgba(255,255,255,.12);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    }
    .hubNodeTitle{
      font-size:22px;
      font-weight:900;
      line-height:1.18;
    }
    .hubNodeMeta{
      font-size:14px;
      line-height:1.45;
      color: rgba(226,232,240,.8);
      max-width: 220px;
    }
    .hubNodeState{
      margin-top:auto;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.08);
      font-size:12px;
      font-weight:900;
      letter-spacing:.03em;
      text-transform:uppercase;
    }
    .hubNode[data-state="done"] .hubNodeState{
      background: rgba(34,197,94,.16);
      border-color: rgba(34,197,94,.28);
      color: #dcfce7;
    }
    .hubNode[data-state="active"] .hubNodeState{
      background: rgba(56,189,248,.16);
      border-color: rgba(56,189,248,.3);
      color:#dbeafe;
    }
    .hubNode[data-state="locked"] .hubNodeState{
      background: rgba(148,163,184,.14);
      border-color: rgba(148,163,184,.22);
      color:#e2e8f0;
    }
    .hubNodeLevel{ grid-area:level; --node-transform: translate(14px, 8px) rotate(-1.3deg); }
    .hubNodeReport{ grid-area:report; --node-transform: translate(-10px, 2px) rotate(1deg); }
    .hubNodeLibrary{ grid-area:library; --node-transform: translate(-4px, -8px) rotate(.6deg); }
    .hubNodeAttention{ grid-area:attention; --node-transform: translate(8px, -6px) rotate(-.8deg); }
    .hubNodeGames{ grid-area:games; --node-transform: translate(12px, -4px) rotate(1deg); }
    .hubNodePrep{ grid-area:prep; --node-transform: translate(-12px, 6px) rotate(-1deg); }
    .roomJourney{
      padding:18px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)),
        rgba(6,11,24,.72);
    }
    .roomJourneyHead{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:14px;
    }
    .roomJourneyEyebrow{
      font-size:12px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color: rgba(148,163,184,.9);
      margin-bottom:6px;
    }
    .roomJourneyTitle{
      font-size:22px;
      font-weight:900;
      color:#f8fbff;
    }
    .roomJourneySummary{
      max-width:420px;
      font-size:14px;
      line-height:1.45;
      color: rgba(226,232,240,.82);
      text-align:right;
    }
    .roomJourneyBar{
      height:14px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      overflow:hidden;
      background: rgba(0,0,0,.24);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    }
    .roomJourneyFill{
      height:100%;
      width:0%;
      border-radius:inherit;
      background: linear-gradient(90deg, rgba(34,197,94,.78), rgba(56,189,248,.85), rgba(244,114,182,.78));
      transition: width .24s ease;
    }
    .roomJourneyMeta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-top:10px;
      color: rgba(226,232,240,.84);
      font-size:14px;
    }
    .roomJourneySteps{
      display:grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap:10px;
      margin-top:16px;
    }
    .roomJourneyStep{
      padding:12px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      min-height:92px;
      display:flex;
      flex-direction:column;
      gap:6px;
      transition: border-color .18s ease, background .18s ease, transform .18s ease;
    }
    .roomJourneyStep.is-done{
      background: rgba(34,197,94,.1);
      border-color: rgba(34,197,94,.24);
    }
    .roomJourneyStep.is-current{
      background: rgba(56,189,248,.12);
      border-color: rgba(56,189,248,.28);
      transform: translateY(-2px);
    }
    .roomJourneyStepIndex{
      font-size:11px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color: rgba(148,163,184,.9);
    }
    .roomJourneyStepTitle{
      font-size:15px;
      font-weight:900;
      line-height:1.28;
      color:#f8fbff;
    }
    .roomJourneyStepMeta{
      font-size:12px;
      line-height:1.4;
      color: rgba(226,232,240,.78);
    }
    .roomHubTools{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      padding:4px 2px 0;
    }
    .roomHubToolsHint{
      flex:1 1 280px;
      color: rgba(226,232,240,.78);
    }
    @media (max-width: 1100px){
      .roomHubHero{
        flex-direction:column;
        align-items:flex-start;
      }
      .roomHubHeroStats{
        width:100%;
      }
      .roomHubMap{
        min-height: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
          "center center"
          "level report"
          "library attention"
          "games prep";
      }
      .roomHubRoutes{
        display:none;
      }
      .hubNodeLevel,
      .hubNodeReport,
      .hubNodeLibrary,
      .hubNodeAttention,
      .hubNodeGames,
      .hubNodePrep{
        --node-transform:none;
      }
    }
    @media (max-width: 760px){
      .roomHubHeroStats{
        grid-template-columns: 1fr;
      }
      .roomHubMap{
        padding:16px;
        grid-template-columns: 1fr;
        grid-template-areas:
          "center"
          "level"
          "prep"
          "attention"
          "library"
          "report"
          "games";
      }
      .roomHubCenterHead,
      .roomJourneyHead,
      .roomJourneyMeta,
      .roomHubTools{
        flex-direction:column;
        align-items:flex-start;
      }
      .roomJourneySummary{
        text-align:left;
      }
      .roomJourneySteps{
        grid-template-columns: 1fr;
      }
      .hubNode{
        min-height: 148px;
      }
      .hubNodeTitle{
        font-size:20px;
      }
    }
    #roomStage{
      position:relative;
      width:100%;
      margin: 0 auto;
      border-radius: 16px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.12);
    }
    #roomBase{ display:block; width:100%; height:auto; }

    

    /* ODA ARKADAŞI (Kedi) */
    .roomBuddy{
      position: absolute;
      left: 34%;
      top: 99%;

      /* Responsive ölçek (tüm oda arkadaşları için referans)
         NOT: En son onayladığın “biraz daha küçük” boyuta göre ayarlı */
      width: clamp(84px, 9vw, 132px);

      /* left/top noktasını alt-orta kabul et */
      transform: translate(-50%, -100%);

      pointer-events: auto;
      cursor: pointer;
      z-index: 30;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
      opacity: .98;
      animation: buddyBreath 7.2s ease-in-out infinite;
      will-change: transform;
    }
    @keyframes buddyBreath{
      0%{ transform: translate(-50%, -100%) scale(0.995) rotate(-0.2deg); }
      50%{ transform: translate(-50%, -101.5%) scale(1.01) rotate(0.2deg); }
      100%{ transform: translate(-50%, -100%) scale(0.995) rotate(-0.2deg); }
    }
    /* Kediye tıklayınca mini tepki (tek seferlik) */
    .roomBuddy.buddyTap{
      animation: buddyTap .22s ease-out 1;
    }
    @keyframes buddyTap{
      0%{ transform: translate(-50%, -100%) scale(1.0); }
      50%{ transform: translate(-50%, -104%) scale(1.02); }
      100%{ transform: translate(-50%, -100%) scale(1.0); }
    }


    /* Büyük masaüstü */
    @media (min-width: 1200px){
      .roomBuddy{ width: clamp(86px, 7vw, 132px); }
    }

    /* Tablet / küçük laptop */
    @media (max-width: 1024px){
      .roomBuddy{ width: clamp(84px, 10vw, 140px); }
    }

    /* Mobil */
    @media (max-width: 720px){
      .roomBuddy{ width: clamp(76px, 18vw, 130px); }
    }

    /* Çok küçük telefonlar */
    @media (max-width: 420px){
      .roomBuddy{ width: clamp(70px, 22vw, 120px); }
    }


    .roomWallSvgLayer{
      position:absolute;
      inset:0;
      z-index: 4;
      opacity: .82;
      transition: opacity .24s ease;
      mix-blend-mode: color;
    }
    #roomWallSvg{
      display:block;
      width:100%;
      height:100%;
    }
    #roomWallSvg path,
    #roomWallSvg polygon{
      transition: fill .22s ease, stroke .22s ease;
      shape-rendering: geometricPrecision;
    }
    .roomWindowLayer{
      position:absolute;
      left: 6.8%;
      top: 8.3%;
      width: 27.8%;
      height: auto;
      z-index: 9;
      display:block;
      user-select:none;
      -webkit-user-drag:none;
      filter: drop-shadow(0 6px 12px rgba(0,0,0,.08));
    }

    .roomWallPalette{
      position:absolute;
      top: 14px;
      right: 14px;
      width: min(260px, calc(100% - 28px));
      padding: 14px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(8,18,31,.94);
      box-shadow: 0 18px 44px rgba(0,0,0,.34);
      backdrop-filter: blur(10px);
      z-index: 36;
    }
    .roomWallPalette.hidden{ display:none; }
    .roomWallPaletteHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom: 10px;
    }
    .roomWallPaletteHead .t{
      font-weight: 900;
      font-size: 18px;
    }
    .roomWallPaletteSwatches{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .roomWallSwatch{
      appearance:none;
      border:1px solid rgba(255,255,255,.15);
      border-radius: 14px;
      padding: 10px 12px;
      min-height: 58px;
      cursor: pointer;
      position: relative;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
      text-align:left;
      color:#fff;
      overflow:hidden;
    }
    .roomWallSwatch:hover,
    .roomWallSwatch:focus-visible{
      transform: translateY(-1px);
      border-color: rgba(255,255,255,.3);
      box-shadow: 0 8px 18px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.12);
      outline:none;
    }
    .roomWallSwatchLabel{
      position:relative;
      z-index:2;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .02em;
      text-shadow: 0 1px 6px rgba(0,0,0,.28);
    }
    .roomWallSwatchPreview{
      position:absolute;
      inset:0;
      border-radius: inherit;
      overflow:hidden;
    }
    .roomWallSwatchPreview svg{
      width:100%;
      height:100%;
      display:block;
    }
    .roomWallSwatch.active::after{
      content:"✓";
      position:absolute;
      right:8px;
      bottom:6px;
      width:20px;
      height:20px;
      border-radius:999px;
      display:grid;
      place-items:center;
      background: rgba(8,18,31,.78);
      color:#fff;
      font-size: 12px;
      font-weight: 900;
      box-shadow: 0 4px 12px rgba(0,0,0,.24);
    }

    /* =========================
   KITAP/ROZET YERLEŞİMİ
   - Slotların alanı, dizilimi ve boyutu burada belirlenir.
   ========================= */

.roomBooks{
  position:absolute;
  transform-origin: top left;
  left: 76%;
  top: 40%;
  width: 18%;
  height: 34%;

  /* 5 raf x 10 kitap = 50 slot */
  display:grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(5, 1fr);

  /* tasarım ayarları (oda bazlı override edilebilir) */
  column-gap: var(--bookGapX, var(--bookGap, clamp(2px, .45vw, 8px)));
  row-gap: var(--bookGapY, var(--bookGap, clamp(2px, .45vw, 8px)));
  padding: var(--bookPad, clamp(2px, .6vw, 10px));

  pointer-events:none;
  z-index: 6;
}

.roomBook{
  width:100%;
  height:100%;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  pointer-events:none;
}
.roomBookImg{
  width:100%;
  height:100%;
  object-fit:contain;
  transform: scale(var(--bookScale, 2.0));
  transform-origin:center;
  opacity:0;
  transition: opacity .18s ease, transform .18s ease;
}
.roomBook.visible .roomBookImg{ opacity:1; }

/* sayfa kenarı + sırt çizgileri */
.roomBook::before{
  content:"";
  position:absolute; inset:0;

  background:
    /* sayfa kenarı (sağ) */
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 78%,
      rgba(255,255,255,.22) 88%,
      rgba(0,0,0,.06) 100%),
    /* sırt kabartma çizgileri (sol) */
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.16) 0px, rgba(255,255,255,.16) 1px,
      rgba(0,0,0,0) 8px, rgba(0,0,0,0) 12px),
    linear-gradient(90deg,
      rgba(255,255,255,.18) 6%,
      rgba(255,255,255,0) 16%,
      rgba(0,0,0,.18) 20%,
      rgba(255,255,255,0) 28%);

  mix-blend-mode: overlay;
  opacity:.62;
  pointer-events:none;
}

/* küçük “etiket” (sırtta minimal bant) */
.roomBook::after{
  content:"";
  position:absolute;
  left: 3%;
  top: 22%;
  width: 22%;
  height: 56%;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
    linear-gradient(90deg, rgba(0,0,0,.18), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  opacity:.65;
}

.roomBook.visible{
  opacity:1;
  transform: translateY(0) scale(1);
}

/* Kitaplara ufak “raf” çeşitliliği: çok hafif eğim */
#roomBooks .roomBook:nth-child(3n+1){ transform: translateY(2px) scale(0.965) rotate(-0.6deg); }
#roomBooks .roomBook:nth-child(3n+2){ transform: translateY(2px) scale(0.965) rotate(0.4deg); }
#roomBooks .roomBook:nth-child(3n+0){ transform: translateY(2px) scale(0.965) rotate(0deg); }
#roomBooks .roomBook.visible:nth-child(3n+1){ transform: translateY(0) scale(1) rotate(-0.6deg); }
#roomBooks .roomBook.visible:nth-child(3n+2){ transform: translateY(0) scale(1) rotate(0.4deg); }
#roomBooks .roomBook.visible:nth-child(3n+0){ transform: translateY(0) scale(1) rotate(0deg); }


/* Kitaplara otomatik renk şeridi (pastel / oda tonuna yakın) */
#roomBooks .roomBook:nth-child(10n+1){ --h: 24; }   /* kiremit */
#roomBooks .roomBook:nth-child(10n+2){ --h: 34; }   /* tarçın */
#roomBooks .roomBook:nth-child(10n+3){ --h: 16; }   /* mercan */
#roomBooks .roomBook:nth-child(10n+4){ --h: 92; }   /* adaçayı */
#roomBooks .roomBook:nth-child(10n+5){ --h: 140; }  /* yeşil */
#roomBooks .roomBook:nth-child(10n+6){ --h: 200; }  /* petrol */
#roomBooks .roomBook:nth-child(10n+7){ --h: 220; }  /* lacivert */
#roomBooks .roomBook:nth-child(10n+8){ --h: 260; }  /* mor */
#roomBooks .roomBook:nth-child(10n+9){ --h: 310; }  /* mürdüm */
#roomBooks .roomBook:nth-child(10n+10){ --h: 48; }  /* hardal */


.roomBadges{
  position:absolute;
  transform-origin: top left;
  left: 45%;
  top: 18%;
  width: 30%;
  height: 18%;

  /* 2 sıra x 8 rozet = 16 slot */
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(2, 1fr);

  gap: var(--badgeGap, clamp(4px, .8vw, 14px));
  padding: var(--badgePad, clamp(4px, .9vw, 14px));

  pointer-events:none;
  z-index: 6;
}

.roomBadge{
  width: 100%;
  height: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;

  /* slot hücresi dikdörtgen; pano perspektifi için ayrıca transform uygulanır */
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

.roomBadgeImg{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
  opacity: .0; /* görünürlük JS ile */
  transform: scale(1.05);
  transform-origin:center;
  transition: opacity .18s ease, transform .18s ease;
}
.roomBadge.on .roomBadgeImg{ opacity:1; }

.roomBadge::after{
  content: attr(data-icon);
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: clamp(10px, 1.2vw, 18px);
  opacity:.0;
  pointer-events:none;
}


/* İnce dış halka */
.roomBadge::after{
  content:"";
  position:absolute; inset: 10%;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  opacity:.85;
  pointer-events:none;
}

/* ikon (emoji yerine de kalabilir, şimdilik aynı data-icon'ı kullanıyoruz) */

/* badge kinds (16 slot: 8 çeşit x 2) */
.roomBadge[data-kind="star"]{ --b1: rgba(250,204,21,.85); --b2: rgba(245,158,11,.55); }
.roomBadge[data-kind="heart"]{ --b1: rgba(244,114,182,.82); --b2: rgba(236,72,153,.52); }
.roomBadge[data-kind="bolt"]{ --b1: rgba(125,211,252,.78); --b2: rgba(56,189,248,.50); }
.roomBadge[data-kind="book"]{ --b1: rgba(167,243,208,.78); --b2: rgba(34,197,94,.42); }
.roomBadge[data-kind="crown"]{ --b1: rgba(253,224,71,.78); --b2: rgba(234,179,8,.48); }
.roomBadge[data-kind="flame"]{ --b1: rgba(253,186,116,.78); --b2: rgba(249,115,22,.48); }
.roomBadge[data-kind="leaf"]{ --b1: rgba(134,239,172,.78); --b2: rgba(16,185,129,.42); }
.roomBadge[data-kind="moon"]{ --b1: rgba(196,181,253,.78); --b2: rgba(139,92,246,.42); }
.roomBadge::before{ content:none !important; }
.roomBadge.on{
  opacity:1;
  transform: scale(var(--badgeSize, 1));
  filter: saturate(1.15);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.40), rgba(255,255,255,.12) 55%, rgba(0,0,0,.14) 100%),
    radial-gradient(circle at 50% 65%, hsl(var(--bh, 48) 90% 60% / .40), transparent 60%);
}
.roomBadge.on::before{
  opacity: 1;
  transform: scale(var(--badgeSize, 1));
}

/* Rozetlere hafif renk çeşitliliği */
#roomBadges .roomBadge:nth-child(8n+1){ --bh: 48; }
#roomBadges .roomBadge:nth-child(8n+2){ --bh: 200; }
#roomBadges .roomBadge:nth-child(8n+3){ --bh: 140; }
#roomBadges .roomBadge:nth-child(8n+4){ --bh: 290; }
#roomBadges .roomBadge:nth-child(8n+5){ --bh: 20; }
#roomBadges .roomBadge:nth-child(8n+6){ --bh: 100; }
#roomBadges .roomBadge:nth-child(8n+7){ --bh: 240; }
#roomBadges .roomBadge:nth-child(8n+8){ --bh: 330; }

    .devTools{ display:flex; gap:8px; }
    .devTools .btn{ padding:8px 10px; }
    @media (max-width: 720px){
      .devTools{ width:100%; justify-content:flex-end; }
    }

  

    /* =========================
       REHBER ODA TURU
       ========================= */
    #guideDock.inRoom{
      position:absolute !important;
      left:0; top:0;
      bottom:auto !important;
      right:auto !important;
      transform:none;
      animation:none;
      z-index: 50;
    }
    #guideDock.inRoom.floating{
      animation: guideFloat 2.6s ease-in-out infinite;
    }
    .roomTourSpot{
      position:absolute;
      left:50%; top:50%;
      width: 240px;
      height: 180px;
      border-radius: 999px;
      pointer-events:none;
      transform: translate(-50%, -50%);
      z-index: 40;
      opacity: 1.00;
      background: radial-gradient(circle, rgba(var(--spot-rgb, 56,189,248), .88) 0%, rgba(var(--spot-rgb, 56,189,248), .38) 40%, rgba(var(--spot-rgb, 56,189,248), 0) 80%);
      box-shadow: 0 0 68px rgba(var(--spot-rgb, 56,189,248), .62);
      mix-blend-mode: screen;
      animation: spotBreath 1.7s ease-in-out infinite;
    }
    @keyframes spotBreath{
      0%{ transform: translate(-50%, -50%) scale(0.98); opacity: .90; }
      50%{ transform: translate(-50%, -50%) scale(1.03); opacity: 1.00; }
      100%{ transform: translate(-50%, -50%) scale(0.98); opacity: .90; }
    }


    /* =========================
       ODA ARKADASI SECIM MODALI
       ========================= */
    .buddyModal{
      position:fixed; inset:0;
      display:flex; align-items:center; justify-content:center;
      background: rgba(0,0,0,.55);
      z-index: 999;
    
  pointer-events:none;
}
    .buddyModal:not(.hidden){ pointer-events:auto; }

    #buddyModal .buddyCard{
      width:min(520px, 92vw);
      border-radius: 18px;
      background: rgba(12,28,45,.92);
      border:1px solid rgba(255,255,255,.14);
      box-shadow: 0 24px 70px rgba(0,0,0,.45);
      padding: 16px;
    }
    #buddyModal .buddyGrid{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-top: 12px;
    }
    .buddyOpt{
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.04);
      padding: 12px;
      cursor:pointer;
      display:flex;
      gap: 10px;
      align-items:center;
      transition: transform .08s ease, background .15s ease, border-color .15s ease;
      user-select:none;
    }
    .buddyOpt:hover{ transform: translateY(-1px); }
    .buddyOpt.selected{
      border-color: rgba(34,197,94,.75);
      background: rgba(34,197,94,.10);
    }
    .buddyThumb{
      width:72px; height:72px;
      border-radius: 14px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.12);
      flex: 0 0 auto;
    }
    .buddyThumb img{ width:100%; height:100%; object-fit:cover; display:block; }
    .buddyMeta b{ display:block; font-size: 15px; }
    .buddyMeta span{ display:block; font-size: 12px; opacity:.78; line-height:1.35; margin-top:4px; }


    /* Işık Bahçesi faz 1: pasif gözlem görseli */
    .sbBoard.passive{
      position:relative;
      background: radial-gradient(760px 360px at 18% 18%, rgba(56,189,248,.22), transparent 60%),
                  radial-gradient(740px 340px at 82% 76%, rgba(34,197,94,.20), transparent 62%),
                  radial-gradient(520px 260px at 55% 35%, rgba(167,139,250,.14), transparent 58%);
      border-radius: 14px;
      overflow:hidden;
    }
    .sbBoard.passive::before,
    .sbBoard.passive::after{
      content:"";
      position:absolute; inset:-20%;
      background:
        radial-gradient(circle at 18% 28%, rgba(56,189,248,.22) 0 7px, transparent 8px),
        radial-gradient(circle at 52% 32%, rgba(34,197,94,.18) 0 6px, transparent 7px),
        radial-gradient(circle at 78% 40%, rgba(167,139,250,.18) 0 6px, transparent 7px),
        radial-gradient(circle at 70% 72%, rgba(255,200,87,.16) 0 6px, transparent 7px),
        radial-gradient(circle at 32% 78%, rgba(255,255,255,.12) 0 5px, transparent 6px),
        radial-gradient(circle at 62% 62%, rgba(255,255,255,.10) 0 4px, transparent 5px);
      filter: blur(.2px);
      opacity:.9;
      animation: sbFloat 10s ease-in-out infinite;
    }
    .sbBoard.passive::after{
      opacity:.55;
      animation-duration: 14s;
      transform: scale(1.05);
    }
    @keyframes sbFloat{
      0%{ transform: translate3d(0,0,0) scale(1); }
      50%{ transform: translate3d(-2%, -3%, 0) scale(1.02); }
      100%{ transform: translate3d(0,0,0) scale(1); }
    }

    /* Pasif fazdaki canli isik noktaciklari (JS ile uretilir) */
    .sbLight{
      position:absolute;
      width: 12px; height: 12px;
      border-radius: 999px;
      opacity: .95;
      background: radial-gradient(circle, rgba(var(--rgb, 56,189,248), .95) 0%, rgba(var(--rgb, 56,189,248), .25) 55%, rgba(var(--rgb, 56,189,248), 0) 72%);
      box-shadow: 0 0 26px rgba(var(--rgb, 56,189,248), .55);
      mix-blend-mode: screen;
      transform: translate(-50%,-50%);
      animation: sbLightFloat var(--dur, 2.6s) ease-in-out infinite;
      pointer-events:none;
      filter: blur(.2px);
    }
    @keyframes sbLightFloat{
      0%{ transform: translate(-50%,-50%) scale(.92); opacity:.78; }
      50%{ transform: translate(-50%,-50%) scale(1.06); opacity:1; }
      100%{ transform: translate(-50%,-50%) scale(.92); opacity:.78; }
    }
    .gamesHubGrid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 12px;
      margin-top: 10px;
    }
    .gameHubCard{
      min-height: 170px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap: 10px;
    }
    .gameHubTitle{
      font-size: 18px;
      font-weight: 900;
      letter-spacing: .2px;
    }
    .gameHubActions{
      margin-top: 8px;
      justify-content:flex-start;
    }
    /* =========================
       XOX (TikTakToe) — Evren teması
       ========================= */
    .xoxBoard{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      width:min(420px, 92vw);
      margin: 0 auto;
      padding: 6px;
    }
    .xoxCell{
      aspect-ratio: 1 / 1;
      border: 1px solid rgba(234,242,255,.14);
      border-radius: 18px;
      background:
        radial-gradient(120% 120% at 20% 15%, rgba(56,189,248,.10), transparent 55%),
        radial-gradient(120% 120% at 80% 85%, rgba(34,197,94,.10), transparent 55%),
        rgba(0,0,0,.16);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      user-select:none;
      transition: transform .08s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
      box-shadow: 0 10px 24px rgba(0,0,0,.22);
    }
    .xoxCell:hover{
      transform: translateY(-1px);
      border-color: rgba(234,242,255,.22);
      background:
        radial-gradient(120% 120% at 20% 15%, rgba(56,189,248,.14), transparent 55%),
        radial-gradient(120% 120% at 80% 85%, rgba(34,197,94,.14), transparent 55%),
        rgba(255,255,255,.04);
    }
    .xoxCell:active{ transform: translateY(0px) scale(.99); }
    .xoxCell.locked{ cursor:not-allowed; opacity:.88; }

    .xoxMark{
      font-size: 56px;
      font-weight: 1000;
      letter-spacing: -1px;
      line-height: 1;
      transform: translateY(-1px);
      text-shadow: 0 10px 24px rgba(0,0,0,.35);
    }
    .xoxMark.x{ color: var(--accent2); }
    .xoxMark.o{ color: var(--accent); }

    .xoxCell.win{
      /* ortak kazanma vurgusu (renk sınıfları aşağıda) */
      box-shadow: 0 18px 50px rgba(0,0,0,.30);
      background: rgba(255,255,255,.05);
    }
    .xoxCell.winx{
      border-color: rgba(56,189,248,.42);
      box-shadow:
        0 0 0 3px rgba(56,189,248,.12),
        0 18px 50px rgba(0,0,0,.30);
      background:
        radial-gradient(120% 120% at 20% 15%, rgba(56,189,248,.22), transparent 58%),
        rgba(255,255,255,.05);
    }
    .xoxCell.wino{
      border-color: rgba(34,197,94,.42);
      box-shadow:
        0 0 0 3px rgba(34,197,94,.12),
        0 18px 50px rgba(0,0,0,.30);
      background:
        radial-gradient(120% 120% at 80% 85%, rgba(34,197,94,.22), transparent 58%),
        rgba(255,255,255,.05);
    }
    .gamesHubGrid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 12px;
      margin-top: 10px;
    }
    .gameHubCard{
      min-height: 170px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap: 10px;
    }
    .gameHubTitle{
      font-size: 18px;
      font-weight: 900;
      letter-spacing: .2px;
    }
    .gameHubActions{
      margin-top: 8px;
      justify-content:flex-start;
    }
    /* =========================
       XOX — Arcade Panel Layout (kare oyun + yan panel)
       ========================= */
    .xoxStage{
      padding: 14px;
      background: #050b14;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 18px;
      box-shadow: 0 18px 50px rgba(0,0,0,.45);
    }
    .xoxStageHead{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 14px;
      flex-wrap:wrap;
      margin-bottom: 12px;
    }
    .xoxTitleTop{
      font-weight: 1000;
      letter-spacing: .2px;
      font-size: 18px;
    }
    .xoxTitleSub{
      margin-top: 4px;
      font-size: 13px;
      color: rgba(234,242,255,.72);
      max-width: 48ch;
      line-height: 1.35;
    }
    .xoxHeadPills{
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:flex-end;
    }

    .xoxLayout{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 12px;
      align-items:stretch;
    }
    @media (max-width: 860px){
      .xoxLayout{ grid-template-columns: 1fr; }
      .xoxTitleSub{ max-width: none; }
      .xoxHeadPills{ justify-content:flex-start; }
    }

    .xoxPlayArea{
      display:flex;
      align-items:center;
      justify-content:center;
      min-height: 420px;
    }
    .xoxBoardWrap{
      width: min(460px, 92%);
      aspect-ratio: 1 / 1;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(420px 260px at 25% 18%, rgba(56,189,248,.18), transparent 60%),
        radial-gradient(420px 260px at 80% 80%, rgba(34,197,94,.16), transparent 62%),
        rgba(255,255,255,.03);
      box-shadow: 0 18px 60px rgba(0,0,0,.35);
      padding: 12px;
      display:flex;
      align-items:center;
      justify-content:center;
      position: relative;
    }

    /* board artık sarmalayıcıdan boyut alsın */
    .xoxBoard{
      width: 100%;
      height: 100%;
      max-width: none;
      margin: 0;
    }

    .xoxSide{
      display:flex;
      align-items:stretch;
    }
    .xoxSideCard{
      width:100%;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      padding: 12px;
      display:flex;
      flex-direction:column;
      gap: 10px;
      justify-content:flex-start;
    }
    .xoxRow{
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
    }
    .xoxPick{
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
    }
    .xoxPick .btn{
      flex: 1 1 160px;
      justify-content:center;
    }
    .xoxActions{
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
    }
    .xoxActions .btn{
      flex: 1 1 150px;
      justify-content:center;
    }

    /* ===== XOX POLISH (mikro animasyon + kazanma çizgisi) ===== */
    .xoxBoardWrap{ position:relative; overflow:hidden; }
    .xoxBoardWrap::before{
      content:"";
      position:absolute; inset:-20%;
      background:
        radial-gradient(40% 35% at 25% 25%, rgba(56,189,248,.14), transparent 60%),
        radial-gradient(40% 35% at 75% 75%, rgba(34,197,94,.12), transparent 62%);
      filter: blur(10px);
      opacity:.9;
      animation: xoxFog 10s ease-in-out infinite alternate;
      pointer-events:none;
    }
    @keyframes xoxFog{
      0%{ transform: translate(-2%, -1%) scale(1.02); opacity:.72; }
      100%{ transform: translate(2%, 1%) scale(1.06); opacity:.92; }
    }
    .xoxBoard{ position:relative; z-index:1; }
    .xoxCell{
      cursor:pointer;
      transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
      box-shadow: 0 10px 26px rgba(0,0,0,.28);
      backdrop-filter: blur(8px);
    }
    .xoxCell:hover{
      transform: translateY(-2px);
      border-color: rgba(234,242,255,.22);
      box-shadow: 0 14px 34px rgba(0,0,0,.34);
    }
    .xoxCell:active{ transform: translateY(0) scale(.98); }
    .xoxCell:focus-visible{
      outline: 2px solid rgba(56,189,248,.55);
      outline-offset: 2px;
    }
    .xoxCell.filled{ cursor:default; }
    .xoxCell.win{
      border-color: rgba(34,197,94,.55);
      box-shadow: 0 18px 48px rgba(34,197,94,.16), 0 18px 48px rgba(0,0,0,.32);
      transform: translateY(-2px) scale(1.02);
    }

    .xoxMark{
      display:inline-block;
      font-weight: 1000;
      font-size: 56px;
      line-height: 1;
      letter-spacing: .5px;
      transform: translateZ(0);text-shadow: 0 0 14px rgba(255,255,255,.18);
    }
    .xoxMark.x{
      color: var(--accent2);
      text-shadow: 0 0 18px rgba(56,189,248,.35), 0 0 34px rgba(56,189,248,.18);
    }
    .xoxMark.o{
      color: var(--accent);
      text-shadow: 0 0 18px rgba(34,197,94,.32), 0 0 34px rgba(34,197,94,.16);
    }
    @keyframes xoxPop{
      from{ transform: scale(.65); opacity:.0; }
      to{ transform: scale(1); opacity:1; }
    }

    .xoxWinLine{
      position:absolute;
      left: 8%;
      top: 50%;
      width: 84%;
      height: 7px;
      border-radius: 999px;
      --win: rgba(56,189,248,.85);
      --winShadow: rgba(56,189,248,.25);
      background: linear-gradient(90deg, rgba(0,0,0,0), var(--win), var(--win), rgba(0,0,0,0));
      box-shadow: 0 0 22px var(--winShadow);
      z-index: 3;
      transform-origin: 50% 50%;
      opacity: 0;
      animation: xoxLineIn .18s ease-out forwards;
      pointer-events:none;
    }
    .xoxWinLine.x{
      --win: rgba(56,189,248,.88);
      --winShadow: rgba(56,189,248,.28);
    }
    .xoxWinLine.o{
      --win: rgba(34,197,94,.88);
      --winShadow: rgba(34,197,94,.26);
    }
    @keyframes xoxLineIn{ to{ opacity: 1; } }

    /* row positions */
    .xoxWinLine[data-kind="row"][data-idx="0"]{ top: 17%; transform: none; }
    .xoxWinLine[data-kind="row"][data-idx="1"]{ top: 50%; transform: none; }
    .xoxWinLine[data-kind="row"][data-idx="2"]{ top: 83%; transform: none; }

    /* col positions */
    .xoxWinLine[data-kind="col"][data-idx="0"]{ left: 17%; top: 8%; width: 7px; height: 84%; }
    .xoxWinLine[data-kind="col"][data-idx="1"]{ left: 50%; top: 8%; width: 7px; height: 84%; }
    .xoxWinLine[data-kind="col"][data-idx="2"]{ left: 83%; top: 8%; width: 7px; height: 84%; }

    /* diag positions */
    .xoxWinLine[data-kind="diag"][data-idx="0"]{ left: 50%; top: 50%; width: 118%; height: 7px; transform: translate(-50%,-50%) rotate(45deg); }
    .xoxWinLine[data-kind="diag"][data-idx="1"]{ left: 50%; top: 50%; width: 118%; height: 7px; transform: translate(-50%,-50%) rotate(-45deg); }


  
/* === v26: ODA TURU TAMAMEN KAPALI === */
#guideDock.inRoom{ display:none !important; }
.roomTourSpot{ display:none !important; }
#roomTourStart,#roomTourRestart{ display:none !important; }

    /* === Click-Safe Overlay Guard (v29) === */
    /* Bazı cihazlarda görünmez overlay'ler tıklamayı yiyebiliyor. Gizliyken ZORLA kapat. */
    #buddyModal.hidden,
    #buddyModal[aria-hidden="true"],
    #sbOverlay.hidden,
    #sbOverlay[aria-hidden="true"]{
      display:none !important;
      pointer-events:none !important;
    }
    #buddyModal,
    #sbOverlay{
      pointer-events:auto;
    }


    /* Crash Guard (debug) */
    #crashGuard{
      position: fixed;
      top: 10px;
      right: 10px;
      max-width: min(420px, calc(100vw - 20px));
      background: rgba(20,20,20,.92);
      color: #fff;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 12px;
      padding: 10px 12px;
      font-size: 13px;
      line-height: 1.25;
      z-index: 99999;
      box-shadow: 0 12px 30px rgba(0,0,0,.35);
      display: none;
      pointer-events: auto;
      user-select: text;
    }
    #crashGuard .cg-title{ font-weight: 800; margin-bottom: 6px; }
    #crashGuard .cg-actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
    #crashGuard .cg-btn{
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.08);
      color:#fff;
      border-radius: 10px;
      padding: 6px 10px;
      cursor: pointer;
      font-weight: 700;
      font-size: 12px;
    }
    #crashGuard pre{
      margin: 8px 0 0;
      white-space: pre-wrap;
      word-break: break-word;
      max-height: 180px;
      overflow: auto;
      background: rgba(0,0,0,.25);
      border-radius: 10px;
      padding: 8px;
      border: 1px solid rgba(255,255,255,.12);
      display:none;
    }
    #crashGuard.show-details pre{ display:block; }

/* =========================
   PNG ASSET OVERRIDES (v41)
   Kitap & rozetler artık gerçek PNG asset kullanır.
   ========================= */
#roomBooks .roomBook{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#roomBooks .roomBook::before,
#roomBooks .roomBook::after{
  content: none !important;
  display: none !important;
}
#roomBooks .roomBook.visible{
  background-image: url('assets/books/book_teal_01.png') !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center bottom !important;
}

#roomBadges .roomBadge{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#roomBadges .roomBadge::before,
#roomBadges .roomBadge::after{
  content: none !important;
  display: none !important;
}

#roomBadges .roomBadge.on{
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center center !important;
  filter: none !important;
}


    #helpLumoBtn{
      position:fixed !important;
      left:max(18px, env(safe-area-inset-left)) !important;
      right:auto !important;
      bottom:max(12px, env(safe-area-inset-bottom)) !important;
      min-width:154px;
      min-height:36px;
      padding:6px 12px 6px 8px !important;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:5px;
      pointer-events:auto !important;
      box-shadow: 0 0 0 1px rgb(var(--guide-route-rgb) / .14), 0 12px 28px rgb(var(--guide-aura-rgb) / .14);
    }
    .helpLumoIconWrap{
      width:24px;
      height:24px;
      border-radius:999px;
      overflow:hidden;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      background:transparent;
      box-shadow:none;
    }
    .helpLumoIcon{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
      object-position:center 55%;
      transform:scale(2.15);
      transform-origin:center 55%;
      pointer-events:none;
    }
    #helpLumoLabel{
      line-height:1;
      white-space:nowrap;
    }
/* =========================
   MEMORY (Hafiza Bahcesi)
   ========================= */
body.minigame-open #screenMemory,
body.minigame-open #screenLightSequence{
  width:100%;
  height:100%;
  display:flex !important;
  align-items:center;
  justify-content:center;
}
body.minigame-open #screenMemory > h3,
body.minigame-open #screenMemory > p,
body.minigame-open #screenLightSequence > h3,
body.minigame-open #screenLightSequence > p{
  display:none !important;
}
body.minigame-open #screenMemory > .card,
body.minigame-open #screenLightSequence > .card{
  width:min(980px, calc(100vw - 40px));
  height:min(620px, calc(100vh - 40px));
  margin:0;
  display:flex;
  flex-direction:column;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
body.minigame-open #screenMemory.hidden,
body.minigame-open #screenLightSequence.hidden{ display:none !important; }

.memStage{
  padding:14px;
  background:#050b14;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.memStageHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.memTitleTop{
  font-weight:1000;
  letter-spacing:.2px;
  font-size:18px;
}
.memTitleSub{
  margin-top:4px;
  font-size:13px;
  color:rgba(234,242,255,.72);
  max-width:48ch;
  line-height:1.35;
}
.memHeadPills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.memLayout{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:12px;
  align-items:stretch;
}
@media (max-width: 860px){
  .memLayout{ grid-template-columns: 1fr; }
}
.memPlayArea{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:420px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:
    radial-gradient(60% 50% at 20% 20%, rgba(56,189,248,.12), transparent 60%),
    radial-gradient(50% 45% at 80% 75%, rgba(34,197,94,.12), transparent 60%),
    rgba(255,255,255,.03);
}
.memBoard{
  width:min(560px, 96%);
  display:grid;
  gap:10px;
}
.memBoard[data-size="easy"]{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.memBoard[data-size="mid"]{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.memBoard[data-size="hard"]{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.memCard{
  border:none;
  background:transparent;
  padding:0;
  aspect-ratio:1 / 1;
  cursor:pointer;
}
.memCardInner{
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform .22s ease;
}
.memCard.flipped .memCardInner,
.memCard.matched .memCardInner{
  transform:rotateY(180deg);
}
.memFace{
  position:absolute;
  inset:0;
  border-radius:16px;
  border:1px solid rgba(234,242,255,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.memBack{
  background:
    radial-gradient(120% 120% at 20% 15%, rgba(56,189,248,.18), transparent 55%),
    radial-gradient(130% 120% at 85% 90%, rgba(34,197,94,.18), transparent 60%),
    rgba(255,255,255,.05);
  color:rgba(234,242,255,.9);
  font-weight:900;
  font-size:24px;
}
.memFront{
  transform:rotateY(180deg);
  background:rgba(12,24,40,.95);
  font-size:34px;
  box-shadow:0 12px 24px rgba(0,0,0,.25);
}
.memCard.matched .memFront{
  border-color: rgba(34,197,94,.52);
  box-shadow:0 0 0 3px rgba(34,197,94,.15), 0 12px 24px rgba(0,0,0,.25);
}
.memCard:focus-visible{
  outline:2px solid rgba(56,189,248,.55);
  outline-offset:2px;
}
.memSide{ display:flex; align-items:stretch; }
.memSideCard{
  width:100%;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.memActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.memActions .btn{
  flex:1 1 150px;
  justify-content:center;
}
.memActions .btn.active{
  border-color:rgba(34,197,94,.55);
  box-shadow:0 0 0 2px rgba(34,197,94,.14) inset;
}

.memSequenceStage{
  width:min(420px, 100%);
  display:grid;
  gap:14px;
}
.memSequenceTop{
  display:grid;
  gap:6px;
  text-align:center;
}
.memSequencePrompt{
  font-size:18px;
  font-weight:900;
  color:#f8fbff;
}
.memSequenceMeta{
  color:rgba(191,227,255,.84);
  font-size:14px;
  font-weight:700;
}
.memPadGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.memPad{
  aspect-ratio:1 / 1;
  border:none;
  border-radius:22px;
  position:relative;
  cursor:pointer;
  transition:transform .14s ease, filter .18s ease, box-shadow .18s ease;
  box-shadow:0 18px 34px rgba(2,8,20,.22), inset 0 1px 0 rgba(255,255,255,.18);
}
.memPad:hover{
  transform:translateY(-2px);
}
.memPad:active,
.memPad.is-active{
  transform:scale(.98);
  filter:brightness(1.18) saturate(1.08);
}
.memPad::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  pointer-events:none;
}
.memPad.pad-0{
  background:radial-gradient(circle at 30% 30%, rgba(125,211,252,.95), rgba(14,116,144,.92));
}
.memPad.pad-1{
  background:radial-gradient(circle at 30% 30%, rgba(134,239,172,.95), rgba(22,101,52,.92));
}
.memPad.pad-2{
  background:radial-gradient(circle at 30% 30%, rgba(253,186,116,.95), rgba(194,65,12,.92));
}
.memPad.pad-3{
  background:radial-gradient(circle at 30% 30%, rgba(216,180,254,.96), rgba(126,34,206,.92));
}
.memPad.is-active::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:28px;
  box-shadow:0 0 0 4px rgba(255,255,255,.14), 0 0 28px rgba(255,255,255,.22);
}
.memPadStageWrap{
  position:relative;
}
.memRetryOverlay{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(5,10,18,.46);
  backdrop-filter:blur(4px);
}
.memRetryCard{
  width:min(100%, 300px);
  padding:18px 16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(10,20,34,.96), rgba(8,16,28,.98));
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  text-align:center;
}
.memRetryTitle{
  font-size:24px;
  font-weight:900;
  margin-bottom:8px;
}
.memRetryText{
  color:rgba(226,232,240,.84);
  line-height:1.45;
  margin-bottom:12px;
}
.memRetryCount{
  font-size:40px;
  font-weight:1000;
  line-height:1;
  color:#fde68a;
  text-shadow:0 0 14px rgba(253,224,71,.28);
}
.memMiniStats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px;
}
.memMiniStat{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  display:grid;
  gap:4px;
}
.memMiniStat span{
  font-size:12px;
  color:rgba(234,242,255,.72);
}
.memMiniStat b{
  font-size:16px;
  color:#fff;
}
@media (max-width: 860px){
  .memSequenceStage{
    width:100%;
  }
}
@media (max-width: 620px){
  .memPadGrid{
    gap:8px;
  }
  .memPad{
    border-radius:18px;
  }
  .memSequencePrompt{
    font-size:17px;
  }
  .memMiniStats{
    grid-template-columns:1fr;
  }
}

/* MEMORY HOTFIX: kart kutulari gorunur olsun */
.memPlayArea{
  padding:14px;
}
.memBoard{
  width:min(520px, 94%);
  gap:12px;
}
.memCard{
  width:100%;
  min-height:84px;
  display:block;
  position:relative;
  border-radius:16px;
  overflow:visible;
}
.memCardInner{
  position:absolute;
  inset:0;
  border-radius:16px;
}
.memBack{
  font-size:32px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.25);
}
.memFront{
  font-size:36px;
}
.memBoard > .memCard{
  justify-self:stretch;
  align-self:stretch;
}

/* =========================
   Gorsel Okuma + Puzzle
   ========================= */
.vsCard{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:560px;
}
.vsTopRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.vsKicker{
  font-weight:900;
  color:rgba(234,242,255,.92);
}
.vsPreviewImage{
  width:100%;
  max-height:420px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.vsReadCard{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  border-radius:14px;
  padding:12px;
}
.vsTextBody{
  line-height:1.6;
}
.vsTextBody p{
  margin:0 0 10px 0;
}
.vsPuzzleLayout{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap:12px;
  align-items:start;
}
.vsGridWrap, .vsTrayWrap{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  padding:10px;
}
.vsPuzzleGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:8px;
}
.vsSlot{
  aspect-ratio: 384 / 341;
  border:1px dashed rgba(234,242,255,.28);
  border-radius:10px;
  background:rgba(255,255,255,.03);
  position:relative;
  overflow:hidden;
}
.vsSlot.over{
  border-color:rgba(56,189,248,.72);
  background:rgba(56,189,248,.11);
}
.vsSlot.filled{
  border-style:solid;
  border-color:rgba(34,197,94,.52);
}
.vsPieceTray{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px;
}
.vsPiece{
  aspect-ratio: 384 / 341;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  cursor:grab;
  box-shadow:0 8px 18px rgba(0,0,0,.24);
  transition: transform .16s ease, box-shadow .16s ease;
}
.vsPiece:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(0,0,0,.3);
}
.vsPiece.dragging{
  opacity:.62;
  transform:scale(.98);
}
.vsPiece.placed{
  width:100%;
  height:100%;
  border:none;
  border-radius:0;
  box-shadow:none;
  cursor:default;
}
.okPulse{ animation:vsOkPulse .22s ease-out 1; }
.wrongShake{ animation:vsWrongShake .28s ease-in-out 1; }
.pieceBack{ animation:vsPieceBack .26s ease-out 1; }
@keyframes vsOkPulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.03); }
  100%{ transform:scale(1); }
}
@keyframes vsWrongShake{
  0%{ transform:translateX(0); }
  25%{ transform:translateX(-3px); }
  50%{ transform:translateX(3px); }
  75%{ transform:translateX(-2px); }
  100%{ transform:translateX(0); }
}
@keyframes vsPieceBack{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
  100%{ transform:translateY(0); }
}
.vsQuestionsWrap{
  display:grid;
  gap:10px;
}
.vsQCard{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  border-radius:12px;
  padding:10px;
}
.vsQCard.correct{
  border-color:rgba(34,197,94,.52);
  box-shadow:0 0 0 2px rgba(34,197,94,.12) inset;
}
.vsQCard.wrong{
  border-color:rgba(239,68,68,.52);
  box-shadow:0 0 0 2px rgba(239,68,68,.1) inset;
}
.vsQTitle{
  font-weight:800;
  margin-bottom:8px;
}
.vsOptWrap{
  display:grid;
  gap:8px;
}
.vsOptBtn{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-radius:10px;
  padding:10px;
  text-align:left;
  cursor:pointer;
}
.vsOptBtn.selected{
  border-color:rgba(56,189,248,.62);
  background:rgba(56,189,248,.12);
}
.vsFeedback{
  margin-top:8px;
}
@media (max-width: 980px){
  .vsPuzzleLayout{ grid-template-columns: 1fr; }
  .vsPieceTray{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

body.minigame-open #screenReadingPrep{
  width:100%;
  height:100%;
  display:flex !important;
  align-items:center;
  justify-content:center;
}
body.minigame-open #screenReadingPrep > h3,
body.minigame-open #screenReadingPrep > p{
  display:none !important;
}
body.minigame-open #screenReadingPrep > .card{
  width:min(1180px, calc(100vw - 28px));
  height:min(720px, calc(100vh - 28px));
  margin:0;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  background:#050b14;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
body.minigame-open #screenReadingPrep.hidden{ display:none !important; }

.rpHubCard{
  min-height:520px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.rpHubCard.stage-live .rpHubIntro{
  display:none;
}
.rpHubCard.stage-live{
  height:100%;
  min-height:0;
  padding-top:10px;
}
.rpHubIntro{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.rpHubTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.rpHubKicker{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(56,189,248,.10);
  color:rgba(234,242,255,.9);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  margin-bottom:10px;
}
.rpHubTitle{
  font-size:28px;
  font-weight:900;
  margin-bottom:8px;
}
.rpModuleGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
}
.rpModuleCardOptional{
  background:
    radial-gradient(280px 120px at 18% 16%, rgba(250,204,21,.12), transparent 68%),
    radial-gradient(220px 140px at 86% 84%, rgba(56,189,248,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
}
.rpModuleCard{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(280px 120px at 18% 16%, rgba(56,189,248,.10), transparent 68%),
    radial-gradient(220px 140px at 86% 84%, rgba(34,197,94,.10), transparent 70%),
    rgba(255,255,255,.035);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:190px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.rpModuleIcon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(15,23,42,.38);
  font-size:24px;
}
.rpModuleTitle{
  font-size:22px;
  font-weight:900;
}
.rpModuleText{
  color:rgba(226,232,240,.82);
  line-height:1.5;
  flex:1 1 auto;
}
.rpStage{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
  flex:1 1 auto;
}
.rpStageHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.rpTitleTop{
  font-size:24px;
  font-weight:900;
}
.rpTitleSub{
  margin-top:4px;
  color:rgba(234,242,255,.74);
}
.rpStats{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.rpPlayCard{
  display:grid;
  grid-template-columns:minmax(0, 1.9fr) minmax(210px, .48fr);
  gap:12px;
  min-height:0;
  flex:1 1 auto;
}
.rpBoardWrap{
  position:relative;
  min-height:0;
  height:100%;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(420px 220px at 16% 18%, rgba(56,189,248,.12), transparent 65%),
    radial-gradient(380px 220px at 82% 84%, rgba(34,197,94,.12), transparent 65%),
    linear-gradient(180deg, rgba(12,25,42,.92), rgba(7,14,24,.96));
  overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.haBoardWrap{
  position:relative;
  min-height:0;
  height:100%;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(360px 220px at 14% 18%, rgba(56,189,248,.10), transparent 64%),
    radial-gradient(320px 220px at 82% 84%, rgba(34,197,94,.10), transparent 68%),
    linear-gradient(180deg, rgba(12,25,42,.92), rgba(7,14,24,.96));
  overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.haBoard{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:flex-start;
}
.haBoard[data-rows="2"]{
  justify-content:center;
}
.haRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}
.haChip{
  min-width:56px;
  height:56px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(15,23,42,.48);
  color:#f8fbff;
  font-family:"Trebuchet MS","Verdana","Segoe UI",sans-serif;
  font-size:28px;
  font-weight:700;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.haChip:hover{
  transform:translateY(-1px);
}
.haChip.hit{
  background:linear-gradient(180deg, rgba(34,197,94,.26), rgba(56,189,248,.20));
  border-color:rgba(34,197,94,.42);
  box-shadow:0 0 0 1px rgba(34,197,94,.16), 0 0 18px rgba(56,189,248,.18);
  color:#ffffff;
  pointer-events:none;
}
.haChip.miss{
  animation:haMiss .22s ease;
  border-color:rgba(248,113,113,.44);
  box-shadow:0 0 0 1px rgba(248,113,113,.16);
}
.haTargetCard{
  margin-top:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035);
  padding:14px;
  text-align:center;
}
.haTargetBig{
  font-family:"Trebuchet MS","Verdana","Segoe UI",sans-serif;
  font-size:48px;
  font-weight:700;
  line-height:1;
  margin-top:6px;
}
.hyTargetBig{
  font-family:"Trebuchet MS","Verdana","Segoe UI",sans-serif;
  font-size:42px;
  font-weight:700;
  line-height:1;
  margin-top:8px;
  letter-spacing:.02em;
}
#hyBoard .haChip{
  min-width:84px;
  padding:0 14px;
  font-size:24px;
}
#haBoard[data-rows="5"],
#hyBoard[data-rows="5"]{
  padding:12px;
  gap:8px;
  justify-content:center;
}
#haBoard[data-rows="5"] .haRow,
#hyBoard[data-rows="5"] .haRow{
  gap:7px;
  padding:8px 10px;
}
#haBoard[data-rows="5"] .haChip{
  min-width:48px;
  height:48px;
  font-size:28px;
  border-radius:12px;
}
#hyBoard[data-rows="5"] .haChip{
  min-width:74px;
  height:48px;
  font-size:24px;
  border-radius:12px;
}
#haBoard[data-rows="8"],
#hyBoard[data-rows="8"]{
  padding:8px 10px;
  gap:5px;
  justify-content:center;
}
#haBoard[data-rows="8"] .haRow,
#hyBoard[data-rows="8"] .haRow{
  gap:5px;
  padding:5px 8px;
  border-radius:12px;
}
#haBoard[data-rows="8"] .haChip{
  min-width:38px;
  height:38px;
  font-size:28px;
  border-radius:10px;
}
#hyBoard[data-rows="8"] .haChip{
  min-width:60px;
  height:38px;
  font-size:24px;
  border-radius:10px;
}
@keyframes haMiss{
  0%, 100%{ transform:translateX(0); }
  25%{ transform:translateX(-3px); }
  50%{ transform:translateX(3px); }
  75%{ transform:translateX(-2px); }
}
.rpRoundPrompt{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(5,10,18,.34);
  backdrop-filter:blur(4px);
  z-index:8;
}
.rpRoundPrompt.hidden{
  display:none;
}
.rpRoundPromptCard{
  width:min(100%, 380px);
  padding:22px 20px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(10,20,34,.94), rgba(8,16,28,.98));
  box-shadow:
    0 18px 40px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.03);
  text-align:center;
}
.rpRoundPromptKicker{
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(148,163,184,.92);
  margin-bottom:8px;
}
.rpRoundPromptTitle{
  font-size:30px;
  font-weight:900;
  line-height:1.05;
}
.rpRoundPromptText{
  margin:10px auto 18px;
  max-width:30ch;
  color:rgba(226,232,240,.88);
}
.rpBoard{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
}
.lwBoardWrap{
  position:relative;
  min-height:0;
  height:100%;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(520px 280px at 50% 18%, rgba(250,204,21,.10), transparent 58%),
    radial-gradient(420px 280px at 50% 100%, rgba(56,189,248,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  overflow:hidden;
}
.lwBoard{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  place-items:center;
  padding:24px;
}
.lwFlashWord{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  width:min(620px, 100%);
  min-height:148px;
  padding:0 12px;
  color:#fff9d2;
  font-family:"Trebuchet MS","Verdana","Segoe UI",sans-serif;
  font-size:clamp(38px, 5vw, 64px);
  font-weight:900;
  line-height:1.14;
  text-align:center;
  letter-spacing:.01em;
  text-shadow:
    0 0 12px rgba(255,236,140,.30),
    0 0 26px rgba(255,196,87,.24),
    0 8px 28px rgba(0,0,0,.28);
}
.lwGlyph{
  display:inline-block;
  opacity:1;
  filter:blur(0);
  animation:lwGlyphFade var(--lw-glyph-duration, 420ms) ease forwards;
  animation-delay:var(--lw-glyph-delay, 0ms);
  will-change:opacity, filter;
}
.lwGlyph.is-space{
  min-width:.34em;
}
.lwFlashWord.hidden{
  display:none !important;
}
.lwChoiceCard{
  width:min(560px, 100%);
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(9,16,28,.92), rgba(9,16,28,.84));
  box-shadow:0 18px 42px rgba(0,0,0,.28);
  display:grid;
  gap:14px;
}
.lwChoiceCard.hidden{
  display:none !important;
}
.lwChoiceQuestion{
  text-align:center;
  font-size:18px;
  font-weight:900;
  color:#fff;
}
.lwChoiceGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.lwChoiceBtn{
  min-height:78px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(15,23,42,.56);
  color:#fff;
  font-size:26px;
  font-weight:900;
  line-height:1.2;
  transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.lwChoiceBtn:hover{
  transform:translateY(-1px);
}
.lwChoiceBtn.hit{
  background:linear-gradient(180deg, rgba(34,197,94,.24), rgba(56,189,248,.16));
  border-color:rgba(34,197,94,.40);
  box-shadow:0 0 0 1px rgba(34,197,94,.14), 0 0 18px rgba(56,189,248,.16);
  color:#fff;
}
.lwChoiceBtn.miss{
  border-color:rgba(248,113,113,.44);
  box-shadow:0 0 0 1px rgba(248,113,113,.16);
  animation:haMiss .22s ease;
}
.awBoardWrap{
  position:relative;
  min-height:0;
  height:100%;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(520px 260px at 50% 20%, rgba(251,191,36,.10), transparent 58%),
    radial-gradient(420px 280px at 50% 82%, rgba(34,211,238,.09), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  overflow:hidden;
}
.awBoard{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  place-items:center;
  padding:24px;
}
.awCountdown{
  display:grid;
  place-items:center;
  width:132px;
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:radial-gradient(circle, rgba(56,189,248,.18), rgba(15,23,42,.64) 62%);
  box-shadow:0 20px 42px rgba(0,0,0,.26), 0 0 42px rgba(56,189,248,.14);
  color:#fff;
  font-size:54px;
  font-weight:900;
  line-height:1;
  text-shadow:0 8px 28px rgba(0,0,0,.28);
}
.awCountdown.hidden{
  display:none !important;
}
.awWord{
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(760px, 100%);
  min-height:148px;
  padding:0 18px;
  color:#fff8dc;
  font-family:"Trebuchet MS","Verdana","Segoe UI",sans-serif;
  font-size:clamp(42px, 5.3vw, 68px);
  font-weight:900;
  line-height:1.14;
  text-align:center;
  letter-spacing:.01em;
  text-shadow:
    0 0 14px rgba(255,239,154,.26),
    0 0 26px rgba(56,189,248,.12),
    0 8px 28px rgba(0,0,0,.30);
  animation:awWordPop .12s ease;
}
.awWord.hidden{
  display:none !important;
}
.awContinueCard{
  width:min(560px, 100%);
  padding:20px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(9,16,28,.90), rgba(9,16,28,.82));
  box-shadow:0 18px 42px rgba(0,0,0,.28);
  display:grid;
  gap:14px;
  text-align:center;
  justify-items:center;
}
.awContinueCard.hidden{
  display:none !important;
}
.awContinueIcon{
  font-size:36px;
  line-height:1;
}
.awContinueTitle{
  font-size:28px;
  font-weight:900;
  color:#fff;
}
.awContinueText{
  max-width:34ch;
  color:rgba(226,232,240,.88);
  line-height:1.6;
}
@keyframes lwFlashFade{
  0%{ opacity:0; transform:scale(.92) translateX(0); filter:blur(0px); }
  10%{ opacity:1; transform:scale(1) translateX(0); filter:blur(0px); }
  62%{ opacity:1; transform:scale(1) translateX(0); filter:blur(0px); }
  100%{ opacity:.04; transform:scale(1.02) translateX(56px); filter:blur(4px); }
}
@keyframes awWordPop{
  0%{ opacity:0; transform:scale(.94); }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes lwGlyphFade{
  0%{
    opacity:1;
    filter:blur(0);
  }
  72%{
    opacity:1;
    filter:blur(0);
  }
  100%{
    opacity:0;
    filter:blur(4px);
  }
}
.rpLane{
  position:absolute;
  left:18px;
  right:18px;
  height:56px;
  transform:translateY(-50%);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.rpLane::before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:50%;
  height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.18), rgba(255,255,255,.06));
  border-radius:999px;
}
.rpLane.is-active{
  border-color:rgba(56,189,248,.26);
  box-shadow:0 0 0 1px rgba(56,189,248,.08), inset 0 0 20px rgba(56,189,248,.05);
}
.rpLaneDrop{
  position:absolute;
  right:16px;
  width:20px;
  transform:translateY(-50%);
  color:rgba(255,255,255,.18);
  font-size:20px;
  font-weight:900;
  text-align:center;
  pointer-events:none;
}
.rpTrailStar{
  position:absolute;
  width:10px;
  height:10px;
  transform:translate(-50%, -50%);
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(255,255,255,.72) 28%, var(--trail-mid, #ffd166) 52%, var(--trail-core, #ff9f43) 72%, rgba(255,255,255,0) 100%);
  clip-path: polygon(50% 0%, 62% 36%, 100% 36%, 70% 58%, 82% 100%, 50% 74%, 18% 100%, 30% 58%, 0% 36%, 38% 36%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 10px var(--trail-core, #ff9f43),
    0 0 20px var(--trail-glow, #ffe8a3);
  transition:transform .16s ease, opacity .16s ease;
}
.rpTrailStar.collected{
  opacity:0;
  transform:translate(-50%, -50%) scale(.2);
}
.rpComet{
  position:absolute;
  left:0;
  top:0;
  width:24px;
  height:24px;
  transform:translate(-50%, -50%);
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.98), rgba(255,255,255,.68) 20%, rgba(255,255,255,.08) 38%, transparent 42%),
    conic-gradient(from 220deg, #ff6b9f 0deg, #ff9f43 58deg, #ffe066 114deg, #34d399 176deg, #35d0ff 236deg, #7c5cff 300deg, #ff6bd6 360deg);
  clip-path: polygon(50% 0%, 61% 34%, 100% 34%, 69% 56%, 82% 100%, 50% 74%, 18% 100%, 31% 56%, 0% 34%, 39% 34%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16),
    0 0 26px rgba(255,214,102,.74),
    0 0 52px rgba(124,92,255,.26),
    0 0 86px rgba(53,208,255,.20);
  z-index:4;
}
.rpComet::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.42), rgba(255,214,102,.20) 20%, rgba(255,107,159,.14) 36%, rgba(53,208,255,.10) 56%, transparent 76%);
  opacity:.82;
}
.rpComet::after{
  content:"";
  position:absolute;
  left:-34px;
  top:50%;
  width:46px;
  height:12px;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,107,159,.20), rgba(255,159,67,.30), rgba(255,224,102,.28), rgba(53,208,255,.18), rgba(124,92,255,.10), rgba(255,255,255,0));
  filter:blur(1.4px);
  opacity:1;
}
.rpComet.pulse{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.22),
    0 0 34px rgba(255,214,102,.96),
    0 0 70px rgba(53,208,255,.38),
    0 0 120px rgba(124,92,255,.22);
  animation:rpCometPulse .9s ease-in-out infinite;
}
.rpComet.glow{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.34),
    0 0 46px rgba(255,214,102,1),
    0 0 94px rgba(53,208,255,.52),
    0 0 150px rgba(255,107,159,.24),
    0 0 190px rgba(124,92,255,.20);
  filter:brightness(1.42) saturate(1.4);
}
.rpOrb{
  position:absolute;
  left:0;
  top:0;
  width:46px;
  height:46px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  z-index:3;
  transition:filter .16s ease, transform .16s ease;
}
.rpOrb.gathering{
  filter:saturate(1.18) brightness(1.12);
  transform:translate(-50%, -50%) scale(1.08);
}
.rpOrb.offtrack{
  filter:saturate(.92) brightness(.92);
  }
.rpOrb::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--rp-guide-img, url("../Lumi.png")) center/contain no-repeat;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.22)) drop-shadow(0 0 8px rgba(255,255,255,.06));
}
.rpOrb::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(56,189,248,.10), rgba(34,197,94,.04) 42%, transparent 72%);
  z-index:-1;
}
.rpOrb.gathering::after{
  inset:-8px;
  background:
    radial-gradient(circle, rgba(255,255,255,.18), rgba(56,189,248,.18) 30%, rgba(34,197,94,.10) 52%, transparent 72%);
}
@keyframes rpCometPulse{
  0%, 100%{
    transform:translate(-50%, -50%) scale(1);
    filter:brightness(1.06) saturate(1.08);
  }
  50%{
    transform:translate(-50%, -50%) scale(1.18);
    filter:brightness(1.34) saturate(1.28);
  }
}
.rpSide{
  min-width:0;
  display:flex;
}
.rpControlCard{
  width:100%;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.rpTouchControls{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:14px;
}
.rpCtrlBtn{
  min-height:58px;
  font-weight:900;
}
.rpCtrlBtn.active{
  border-color:rgba(34,197,94,.35);
  background:rgba(34,197,94,.14);
  color:rgba(234,242,255,.96);
}
.rpActionRow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:auto;
  padding-top:18px;
}
@media (max-width: 940px){
  .rpPlayCard{
    grid-template-columns:1fr;
  }
  .rpModuleGrid{
    grid-template-columns:1fr;
  }
  .rpBoard{
    min-height:420px;
  }
  .haBoard{
    min-height:420px;
  }
  .lwChoiceGrid{
    grid-template-columns:1fr;
  }
}
.studentAnalysisCard{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 14px;
}

.studentAnalysisHint{
  color: rgba(234,242,255,.72);
  font-size: 12px;
  line-height: 1.35;
  margin-bottom: 10px;
}

.studentAnalysisBars{
  display: grid;
  gap: 10px;
}

.studentAnalysisBarRow{
  display: grid;
  grid-template-columns: 132px 1fr 58px;
  gap: 10px;
  align-items: center;
}

.studentAnalysisBarLabel{
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.studentAnalysisBarTrack{
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.studentAnalysisNormLine{
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border-left: 1px dashed rgba(15,23,42,.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
  pointer-events: none;
}

.studentAnalysisBarFill{
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #34d399);
}

.studentAnalysisBarFill.is-parent{
  background: linear-gradient(90deg, #60a5fa, #38bdf8);
}

.studentAnalysisBarFill.is-teacher{
  background: linear-gradient(90deg, #f59e0b, #f97316);
}

.studentAnalysisBarFill.is-system{
  background: linear-gradient(90deg, #22c55e, #14b8a6);
}

.studentAnalysisBarValue{
  color: rgba(234,242,255,.86);
  font-size: 12px;
  text-align: right;
  font-weight: 700;
}

.studentCorrelationCard{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 14px;
}

.studentCorrelationLegend{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.studentCorrelationLegend span{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(234,242,255,.82);
  font-size: 12px;
}

.studentCorrelationLegend i{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.studentCorrelationLegend .lg-parent{ background:#60a5fa; }
.studentCorrelationLegend .lg-teacher{ background:#f59e0b; }
.studentCorrelationLegend .lg-system{ background:#22c55e; }
.studentCorrelationLegend .lg-norm{
  width: 12px;
  height: 2px;
  border-radius: 0;
  background: rgba(255,255,255,.92);
  border-top: 1px dashed rgba(15,23,42,.55);
}

.studentCorrelationRow{
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.studentCorrelationStacks{
  display: grid;
  gap: 6px;
}

.studentCorrelationMeta{
  color: rgba(234,242,255,.78);
  font-size: 11px;
}

body.teacher-panel-mode #guideDock,
body.teacher-panel-mode #lumoWrap,
body.teacher-panel-mode #helpLumoBtn,
body.teacher-panel-mode .guidedOnboardingOverlay,
body.teacher-panel-mode .prepRewardOverlay,
body.teacher-panel-mode #attentionRewardOverlay,
body.admin-panel-mode #guideDock,
body.admin-panel-mode #lumoWrap,
body.admin-panel-mode #helpLumoBtn,
body.admin-panel-mode .guidedOnboardingOverlay,
body.admin-panel-mode .prepRewardOverlay,
body.admin-panel-mode #attentionRewardOverlay{
  display:none !important;
  pointer-events:none !important;
  opacity:0 !important;
}

/* Akan Kelimeler + daha dengeli hazirlik kartlari */
.rpModuleGrid{
  grid-template-columns:repeat(auto-fit, minmax(188px, 1fr));
  gap:12px;
}
.rpModuleCard{
  padding:14px;
  gap:8px;
  min-height:164px;
}
.rpModuleCard .rpModuleIcon{ font-size:28px; }
.rpModuleCard .rpModuleTitle{ font-size:22px; }
.rpModuleCard .rpModuleText{
  font-size:13px;
  line-height:1.5;
  min-height:54px;
}
.rpModuleCard .btn{ margin-top:auto; }

#awStage .rpStageHead{
  justify-content:flex-start;
}
#awStage #awStatus,
#awStage #awResult{
  display:none !important;
}
#awStage .rpPlayCard{
  grid-template-columns:1fr;
  align-items:stretch;
}
.awBoard{
  display:grid;
  gap:14px;
  padding:18px;
}
.awCompactActions{
  justify-content:flex-end;
  margin-top:2px;
}
.awStreamShell{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
}
.awStreamShell.hidden{ display:none !important; }
.awRingWrap{
  position:relative;
  width:min(420px, 84vw);
  aspect-ratio:1;
  display:grid;
  place-items:center;
}
.awRingSvg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}
.awRingTrack{
  fill:none;
  stroke:rgba(255,255,255,.12);
  stroke-width:6;
}
.awRingProgress{
  fill:none;
  stroke:rgba(56,189,248,.92);
  stroke-linecap:round;
  stroke-width:6;
  stroke-dasharray:578;
  stroke-dashoffset:578;
  transition:stroke-dashoffset .2s linear;
  filter:drop-shadow(0 0 14px rgba(56,189,248,.34));
}
.awCountdown{
  width:min(210px, 54vw);
  aspect-ratio:1;
  z-index:2;
  background:none;
  border:none;
  box-shadow:none;
}
.awWord{
  width:76%;
  min-height:110px;
  padding:0 8px;
  font-size:clamp(26px, 3.4vw, 48px);
  z-index:2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
}
.awContinueCard{
  width:min(560px, 100%);
}
.awReaderWrap{
  width:min(940px, 100%);
  display:grid;
  gap:14px;
}
.awReaderWrap.hidden{ display:none !important; }
.awReaderIntro{
  display:none;
}
.awReaderTitle{
  font-size:24px;
  font-weight:900;
  color:#fff;
  margin-bottom:4px;
}
.awReaderTextSmall{
  color:rgba(226,232,240,.86);
  line-height:1.55;
}
.awReaderCard{
  margin-top:2px;
  padding:16px 18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  min-height:360px;
  max-height:min(64vh, 620px);
  overflow:hidden;
}
.awReaderCard .ltPageBar,
.awReaderPager,
.awReaderControls #awReaderStart,
.awReaderControls #awGoQuestions,
#awQuestionBack{
  display:none !important;
}
.awReaderText{
  white-space:pre-wrap;
  font-size:18px;
  line-height:1.85;
  color:rgba(234,242,255,.94);
  flex:1 1 auto;
  overflow:auto;
  padding:2px 8px 4px 2px;
  scrollbar-width:thin;
  scrollbar-color:rgba(56,189,248,.55) rgba(255,255,255,.08);
}
.awReaderText.hidden{ display:none !important; }
.awReaderText::-webkit-scrollbar,
.awQuestionWrap::-webkit-scrollbar{
  width:10px;
}
.awReaderText::-webkit-scrollbar-track,
.awQuestionWrap::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06);
  border-radius:999px;
}
.awReaderText::-webkit-scrollbar-thumb,
.awQuestionWrap::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(56,189,248,.75), rgba(34,197,94,.6));
  border-radius:999px;
  border:2px solid rgba(5,11,20,.55);
}
.awReaderControls{
  margin-top:0;
  justify-content:flex-end;
}
.awQuestionWrap{
  width:min(940px, 100%);
  min-height:min(70vh, 720px);
  max-height:min(76vh, 760px);
  overflow:hidden;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  display:grid;
  grid-template-rows:auto auto minmax(0, 1fr) auto auto;
  gap:10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(56,189,248,.55) rgba(255,255,255,.08);
}
.awQuestionWrap.hidden{ display:none !important; }
.awQuestionHead{
  margin-bottom:10px;
}
.awQuestionTitle{
  font-weight:900;
  font-size:24px;
  color:#fff;
}
.awQuestionSub{
  margin-top:4px;
  opacity:.82;
}
.awQuestionCard{
  display:none;
  margin-top:0;
  min-height:clamp(300px, 42vh, 500px);
  max-height:min(50vh, 540px);
  overflow:auto;
}
.awQuestionCard.is-active{
  display:block;
}
.awQuestionActions{
  margin-top:0;
  justify-content:space-between;
}
.awScoreNote{ margin-top:0; text-align:center; }