:root {
    --bg-dark: #030406;
    --bg-panel: #0a0d14;
    --bg-card: #121620;
    --bg-card-hover: #171c28;
    --primary: #ff2e63;
    --primary-hover: #ff4d79;
    --primary-glow: rgba(255, 46, 99, 0.5);
    --secondary: #00f5d4;
    --secondary-glow: rgba(0, 245, 212, 0.4);
    --warning: #f5a623;
    --danger: #ef4444;
    --text-main: #f0f6fc;
    --text-muted: #8b949e;
    --border-color: #242b3b;
    --border-light: #303645;
    --shadow-lg: 0 15px 50px rgba(0,0,0,0.9);
    --shadow-sm: 0 4px 15px rgba(0,0,0,0.5);
    --nav-height: 85px;
    --border-radius-lg: 28px;
    --border-radius-md: 18px;
    --safe-top: env(safe-area-inset-top, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-family: 'Outfit', sans-serif; }

body { 
    background: var(--bg-dark); 
    color: var(--text-main); 
    display: flex; justify-content: center; height: 100vh; overflow: hidden; 
    overscroll-behavior-y: none; touch-action: pan-x pan-y;
    padding-top: 0;
}

#app-shell {
    width: 100%; max-width: 520px; height: 100%; background: var(--bg-panel);
    position: relative; display: flex; flex-direction: column;
    border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg); overscroll-behavior-y: none; 
}


#pack-chip{position:fixed; top:calc(var(--safe-top) + 12px); left:50%; transform:translateX(-50%); max-width:min(92vw, 360px);}
@supports not (top: env(safe-area-inset-top)){
  #pack-chip{top:12px;}
}

#global-loader {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(3, 4, 6, 0.95); z-index: 9999; display: none;
    flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(10px);
}
.spinner { width: 70px; height: 70px; border: 6px solid var(--border-color); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

#toast-container { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; gap: 10px; width: 90%; max-width: 400px; pointer-events: none; }
.toast { background: var(--bg-card); border-left: 5px solid var(--primary); color: white; padding: 16px 20px; border-radius: 12px; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-lg); animation: slideDown 0.3s ease forwards; pointer-events: all; }
.toast.success { border-left-color: var(--secondary); }
.toast.error { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

.screen { display: none; flex: 1; overflow-y: auto; padding: 25px; padding-bottom: 130px; scrollbar-width: none; }
.screen::-webkit-scrollbar { display: none; }
.screen.active { display: flex; flex-direction: column; animation: slideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes slideIn { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } }

h1 { font-size: 46px; font-weight: 900; letter-spacing: -2px; margin-bottom: 10px; line-height: 1.1; }
h2 { font-size: 30px; font-weight: 800; letter-spacing: -1px; margin-bottom: 25px; }
h3 { font-size: 22px; font-weight: 700; margin-bottom: 15px; color: var(--text-main); }
.gradient-text { background: linear-gradient(90deg, var(--primary), #ff7a9a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

input, textarea, select { width: 100%; padding: 20px 22px; background: var(--bg-card); border: 2px solid var(--border-color); border-radius: var(--border-radius-md); color: white; font-size: 16px; margin-bottom: 18px; transition: all 0.3s ease; outline: none; font-family: 'Outfit', sans-serif;}
input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 20px var(--primary-glow); transform: translateY(-2px); }

.btn { width: 100%; padding: 20px; border-radius: var(--border-radius-md); border: none; font-weight: 800; cursor: pointer; transition: all 0.2s ease; font-size: 16px; text-transform: uppercase; letter-spacing: 1.5px; }
.btn-primary { background: var(--primary); color: white; box-shadow: 0 6px 20px var(--primary-glow); }
.btn-primary:active { transform: scale(0.96); box-shadow: 0 2px 10px var(--primary-glow); }
.btn-outline { background: transparent; border: 2px solid var(--border-color); color: var(--text-main); }
.btn-outline:active { background: var(--border-color); }
.btn-success { background: var(--secondary); color: #000; box-shadow: 0 6px 20px var(--secondary-glow); }

.bottom-nav { position: absolute; bottom: 0; width: 100%; height: var(--nav-height); background: rgba(10, 13, 20, 0.95); backdrop-filter: blur(25px); border-top: 1px solid var(--border-color); display: none; justify-content: space-around; align-items: center; z-index: 1000; }
.bottom-nav{ left:0; right:0; max-width:100%; box-sizing:border-box; }
.bottom-nav .nav-item{ min-width: 0; }
.bottom-nav .nav-item span{ white-space:nowrap; }

/* === Tournament exam UI === */
.tourn-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin:6px 0 10px;}
.tourn-qno{font-size:12px; font-weight:900; opacity:.75;}
.tourn-time{font-size:12px; font-weight:900; opacity:.8;}
.tourn-qcard{background:var(--bg-card); border:1px solid var(--border-color); border-radius:22px; padding:18px 18px; box-shadow: var(--shadow-sm); margin:10px 0 14px;}
.tourn-q{font-size:16px; font-weight:700; line-height:1.5;}
.tourn-opts{display:flex; flex-direction:column; gap:10px; margin-top:14px;}
.tourn-opt{display:flex; align-items:flex-start; gap:12px; padding:14px 14px; border-radius:18px; border:1px solid var(--border-color); background:rgba(255,255,255,0.02); cursor:pointer; transition:.15s; user-select:none;}
.tourn-opt:hover{transform:translateY(-1px); border-color: rgba(255,255,255,0.22);}
.tourn-opt .opt-badge{width:28px; height:28px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:900; background:rgba(255,255,255,0.06); flex:0 0 auto;}
.tourn-opt .opt-text{flex:1; font-size:15px; line-height:1.45;}
.tourn-opt.selected{border-color: rgba(78,253,207,0.55); box-shadow: 0 0 0 3px rgba(78,253,207,0.12);}
.tourn-progress{width:100%; height:12px; background:#1a2233; border-radius:8px; overflow:hidden; box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); margin:10px 0 14px;}
.tourn-progress > div{height:100%; width:0%; background: linear-gradient(90deg, var(--primary), #ff5e84); transition: width .2s;}
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; cursor: pointer; opacity: 0.35; transition: 0.3s; color: white; }
.nav-item.active { opacity: 1; color: var(--primary); transform: translateY(-3px); }
.nav-item i { font-size: 26px; margin-bottom: 6px; font-style: normal; }
.nav-item span { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; }

.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 20px; background: var(--bg-card); border-radius: 18px; border: 1px solid var(--border-color); cursor: pointer; transition: 0.2s; }
.setting-row:hover { border-color: var(--primary); }
.toggle-btn { background: var(--border-color); padding: 8px 15px; border-radius: 12px; font-size: 13px; font-weight: 800; color: var(--text-muted); transition: 0.3s; }
.toggle-btn.on { background: var(--danger); color: white; }

.search-result-item { display:flex; align-items:center; gap:10px; padding:12px 15px; background:var(--bg-card); border-radius:14px; border:1px solid var(--border-color); cursor:pointer; transition:0.2s; }
.search-result-item:hover { border-color:var(--primary); transform:translateX(5px); }

.post-composer { background: var(--bg-card); padding: 22px; border-radius: var(--border-radius-lg); border: 2px dashed var(--border-color); margin-bottom: 35px; transition: 0.3s; }
.post-composer:focus-within { border-color: var(--primary); }
.post-card { background: var(--bg-card); border-radius: var(--border-radius-lg); margin-bottom: 30px; border: 1px solid var(--border-color); overflow: hidden; box-shadow: var(--shadow-sm); position: relative; }
.post-header { display: flex; align-items: center; padding: 18px 22px; gap: 15px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.03); transition: 0.2s; position: relative;}
.post-header:hover { background: rgba(255,255,255,0.02); }
.avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #ff7a9a); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 20px; color: white; border: 3px solid var(--bg-panel); box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.post-img { width: 100%; max-height: 500px; object-fit: cover; }
.post-body { padding: 22px; font-size: 16px; line-height: 1.7; color: #e2e8f0; word-wrap: break-word; }
.post-footer { display: flex; padding: 18px 22px; background: rgba(0,0,0,0.25); gap: 30px; font-size: 15px; font-weight: 700; color: var(--text-muted); }
.action-btn { cursor: pointer; display: flex; align-items: center; gap: 10px; transition: 0.2s; user-select: none; }
.action-btn:hover { color: var(--primary); transform: scale(1.05); }
.delete-btn { position: absolute; right: 22px; top: 22px; color: var(--danger); font-size: 20px; cursor: pointer; opacity: 0.6; transition: 0.2s; z-index: 10; }
.delete-btn:hover { opacity: 1; transform: scale(1.1); }
        
.comment-box { padding: 18px 22px; border-top: 1px solid var(--border-color); display: none; background: #080b11; }
.comment-item { font-size: 14px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.04); line-height: 1.5; }

.chat-row { display: flex; align-items: center; gap: 18px; padding: 18px 22px; background: var(--bg-card); border-radius: var(--border-radius-lg); margin-bottom: 15px; cursor: pointer; border: 1px solid var(--border-color); transition: all 0.2s ease; box-shadow: var(--shadow-sm); }
.chat-row:hover { border-color: var(--primary); transform: translateX(5px); background: var(--bg-card-hover); }
.bubble { max-width: 85%; padding: 16px 20px; border-radius: 22px; font-size: 15px; margin-bottom: 15px; line-height: 1.6; word-wrap: break-word; box-shadow: var(--shadow-sm); }
.bubble-me { background: linear-gradient(135deg, var(--primary), #ff5e84); align-self: flex-end; color: white; border-bottom-right-radius: 4px; }
.bubble-them { background: var(--border-light); align-self: flex-start; color: white; border-bottom-left-radius: 4px; }
.empty-state { text-align: center; color: var(--text-muted); font-size: 15px; padding: 30px; background: var(--bg-card); border-radius: 20px; border: 1px dashed var(--border-color); }

.rank-card { display: flex; align-items: center; gap: 18px; padding: 18px 22px; background: var(--bg-card); border-radius: var(--border-radius-lg); margin-bottom: 15px; border: 2px solid transparent; cursor: pointer; transition: 0.3s; box-shadow: var(--shadow-sm); }
.rank-card:hover { transform: scale(1.02); border-color: var(--primary); }

.category-card { background: linear-gradient(145deg, #161b22, #0a0d14); padding: 30px 25px; border-radius: var(--border-radius-lg); margin-bottom: 18px; border: 2px solid var(--border-color); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; box-shadow: var(--shadow-sm); }
.category-card:hover { border-color: var(--secondary); transform: translateY(-4px); box-shadow: 0 15px 30px rgba(0, 245, 212, 0.15); }
        
.radar-box { position: relative; width: 150px; height: 150px; margin: 40px auto; display: flex; align-items: center; justify-content: center; }
.radar-core { width: 40px; height: 40px; background: var(--primary); border-radius: 50%; z-index: 2; box-shadow: 0 0 20px var(--primary-glow); }
.radar-pulse { position: absolute; width: 100%; height: 100%; background: var(--primary); border-radius: 50%; opacity: 0; animation: pulse 2s infinite ease-out; }
.radar-pulse:nth-child(2) { animation-delay: 0.5s; }
.radar-pulse:nth-child(3) { animation-delay: 1s; }
@keyframes pulse { 0% { transform: scale(0.3); opacity: 0.8; } 100% { transform: scale(2); opacity: 0; } }

.timer-header { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; }
.timer-text { font-size: 32px; font-weight: 900; color: var(--warning); letter-spacing: 2px; }
.timer-bg { width: 100%; height: 14px; background: #1a2233; border-radius: 7px; margin-bottom: 25px; overflow: hidden; box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); }
.timer-fill { width: 100%; height: 100%; background: linear-gradient(90deg, var(--warning), var(--danger)); transition: width 1s linear; }
.quiz-opt { background: var(--bg-card); border: 2px solid var(--border-color); padding: 20px; border-radius: var(--border-radius-md); margin-bottom: 12px; cursor: pointer; font-size: 16px; transition: 0.2s; font-weight: 500; text-align: left; }
.quiz-opt:hover:not(:disabled) { border-color: var(--primary); background: rgba(255,46,99,0.05); transform: translateX(5px); }
.quiz-opt:disabled { cursor: not-allowed; opacity: 0.9; }

#wait-overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(3, 4, 6, 0.98); z-index: 100; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; }

.prof-avatar-big { width: 140px; height: 140px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #ff7a9a); margin: 0 auto 25px; display: flex; align-items: center; justify-content: center; font-size: 55px; font-weight: 900; border: 6px solid var(--bg-panel); box-shadow: 0 15px 40px rgba(255,46,99,0.5); }

.prof-avatar-big .upload-hint{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:15px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:.8px;
  padding:10px 12px;
  border-radius:18px;
  background: rgba(0,0,0,.18);
  border: 1px dashed rgba(255,255,255,.38);
  text-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.prof-avatar-big:not(.has-photo) .upload-hint{ opacity:.92; }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin: 35px 0; }
.stat-card { background: linear-gradient(145deg, var(--bg-card), #0d1117); padding: 20px 10px; border-radius: var(--border-radius-lg); text-align: center; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); cursor: pointer; transition: 0.2s; }
.stat-card:hover { border-color: var(--primary); background: var(--bg-card-hover); }

.friend-row { display: flex; align-items: center; gap: 15px; padding: 12px 15px; background: var(--bg-card); border-radius: 18px; margin-bottom: 10px; cursor: pointer; border: 1px solid var(--border-color); transition: 0.2s; }
.friend-row:hover { border-color: var(--primary); transform: translateX(5px); background: var(--bg-card-hover); }
        
#friends-modal, #events-modal, #invite-cat-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(15px); z-index: 2000; align-items: center; justify-content: center; }
.modal-content { background: var(--bg-panel); width: 90%; max-width: 450px; border-radius: 28px; border: 1px solid var(--border-color); height: 70vh; display: flex; flex-direction: column; overflow: hidden; }
.modal-header { padding: 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.modal-body { flex: 1; overflow-y: auto; padding: 20px; }

/* Base modal overlay (missing earlier caused half-screen/inline modals) */
.modal{
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(12px);
    z-index: 2200;
    padding: 18px;
    align-items:center;
    justify-content:center;
}

/* Pack modal should not take layout space; open via JS */
#pack-modal{
    display:none;
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(12px);
    z-index: 2300;
    padding: 18px;
    align-items:center;
    justify-content:center;
}

/* ETKİNLİK KARTLARI */
.event-card { background: linear-gradient(145deg, var(--bg-card), #10141d); border: 1px solid var(--border-color); border-radius: 18px; padding: 20px; text-align: center; }
.event-card h4 { font-size:18px; margin-bottom:5px; color:var(--text-main); }
.event-card .progress-bar { width: 100%; height: 8px; background: var(--bg-panel); border-radius: 4px; margin: 15px 0; overflow: hidden; }
.event-card .progress-fill { height: 100%; background: var(--secondary); width: 0%; transition: 0.3s; }

/* YENİ: TİNDER KARTLARI CSS (DOKUNMA HATASI İÇİN TOUCH-ACTION EKLENDİ) */
.tinder-cards { position: relative; width: 100%; height: 350px; min-height: 350px; margin-top:20px; }
.tinder-card { position: absolute; inset: 0; width: 100%; height: 100%; background: linear-gradient(145deg, #161b22, #0a0d14); border-radius: 20px; box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 18px; border: 2px solid var(--border-color); user-select: none; cursor: grab; transform-origin: 50% 100%; transition: transform 0.3s ease; color: var(--text-main); font-weight:600; line-height:1.6; touch-action: none; box-sizing:border-box; overflow:hidden; }
.tinder-card:active { cursor: grabbing; }

/* RÜTBE (LİG) SİSTEMİ GÖRSELLİKLERİ VE ANİMASYONLARI */
@keyframes scaleIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.rank-rookie { border-color: #a0a0a0 !important; box-shadow: 0 0 8px rgba(160,160,160,0.6) !important; }
.rank-novice { border-color: #8bc34a !important; box-shadow: 0 0 10px rgba(139,195,74,0.7) !important; }
.rank-master { border-color: #03a9f4 !important; box-shadow: 0 0 12px rgba(3,169,244,0.7) !important; }
.rank-master-plus { border-color: #00bcd4 !important; box-shadow: 0 0 14px rgba(0,188,212,0.8) !important; }
.rank-champion { border-color: #ff9800 !important; box-shadow: 0 0 16px rgba(255,152,0,0.8) !important; }
.rank-champion-plus { border-color: #ff5722 !important; box-shadow: 0 0 18px rgba(255,87,34,0.9) !important; }
.rank-legend { border-color: #e91e63 !important; box-shadow: 0 0 20px rgba(233,30,99,0.9) !important; }
.rank-legend-plus { border-color: #c2185b !important; box-shadow: 0 0 22px rgba(194,24,91,1) !important; }
.rank-lol { border-color: #9c27b0 !important; box-shadow: 0 0 25px rgba(156,39,176,1) !important; }
.rank-lol-plus { border-color: #673ab7 !important; box-shadow: 0 0 28px rgba(103,58,183,1) !important; }
.rank-lol-elite { border-color: #3f51b5 !important; box-shadow: 0 0 30px rgba(63,81,181,1) !important; }
.rank-lol-master { border-color: #f44336 !important; box-shadow: 0 0 32px rgba(244,67,54,1) !important; }
.rank-lol-grandmaster { border-color: #d32f2f !important; box-shadow: 0 0 35px rgba(211,47,47,1) !important; }
.rank-lol-legend { border-color: #ffd700 !important; box-shadow: 0 0 38px rgba(255,215,0,1) !important; }
.rank-lol-mythic { border-color: #00ffff !important; box-shadow: 0 0 45px rgba(0,255,255,1) !important; }
.rank-infinite { border-color: #fff !important; box-shadow: 0 0 50px rgba(255,255,255,1) !important; animation: infiniteGlow 2s linear infinite !important; }

@keyframes infiniteGlow { 
    0% { box-shadow: 0 0 20px #f00; border-color: #f00; } 
    33% { box-shadow: 0 0 30px #0f0; border-color: #0f0; } 
    66% { box-shadow: 0 0 40px #00f; border-color: #00f; } 
    100% { box-shadow: 0 0 20px #f00; border-color: #f00; } 
}

.avatar-wrapper { position: relative; display: inline-block; }
.status-dot { position: absolute; bottom: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg-card); background: #4b5563; z-index: 5; }
.status-dot.online { background: #00f5d4; box-shadow: 0 0 5px #00f5d4; }

/* =============================
   DUEL INVITE MODAL (APK SAFE)
   ============================= */
#duel-invite-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:6000;
  background:rgba(0,0,0,.78);
  backdrop-filter: blur(10px);
  align-items:center;
  justify-content:center;
  padding:18px;
}
#duel-invite-modal .modal-card{
  width:min(720px, 94vw);
  border-radius:24px;
  background:rgba(16,18,24,.92);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  overflow:hidden;
}
.invite-header{
  display:flex;
  align-items:center;
  gap:14px;
}
.invite-avatar{
  width:54px;
  height:54px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:22px;
  color:#fff;
  background:linear-gradient(135deg, rgba(0,220,255,.35), rgba(255,0,130,.35));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  flex:0 0 auto;
}
.invite-name{
  font-size:22px;
  font-weight:900;
  letter-spacing:.2px;
  line-height:1.1;
  margin:0;
}
.invite-sub{
  opacity:.88;
  margin-top:2px;
  font-size:15px;
}
.invite-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.invite-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  font-weight:700;
  font-size:14px;
}
.invite-pill b{ font-weight:900; }
.invite-pack{
  background:rgba(0, 220, 255, .10);
  border-color:rgba(0, 220, 255, .22);
}
.invite-cat{
  background:rgba(255, 255, 255, .04);
}

body.modal-open{
  overflow:hidden !important;
  height:100vh !important;
}


/* === TOURNAMENT EXAM FULLSCREEN === */
#tourn-play-modal.modal { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; }
#tourn-play-modal .modal-content { 
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display:flex;
  flex-direction:column;
}
#ui-tourn-play-body{ flex:1; overflow:auto; padding-bottom: 18px; }
body.exam-open .bottom-nav, body.exam-open .nav-bottom, body.exam-open #bottom-nav { 
  pointer-events: none !important; 
  opacity: .25 !important;
  filter: grayscale(1);
}
body.exam-open .bottom-nav button, body.exam-open .nav-bottom button { pointer-events:none !important; }
body.exam-open .screen { pointer-events:none; }
body.exam-open #tourn-play-modal, body.exam-open #tourn-play-modal * { pointer-events:auto; }

/* nicer options */
.tourn-q{
  font-size: 16px;
  line-height: 1.45;
}
.tourn-opt{
  display:flex;
  gap:12px;
  align-items:center;
}
.tourn-opt .opt-badge{
  width:34px; height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.10);
}
.tourn-opt:hover{ transform: translateY(-1px); }


/* ===== Fullscreen modals (tournament play/detail) ===== */
.modal.modal-full{align-items:stretch; justify-content:stretch;}
.modal.modal-full .modal-content{width:100vw; max-width:none !important; height:100vh; max-height:none; border-radius:0; margin:0;}
.modal.modal-full .modal-header{position:sticky; top:0; z-index:5; background:linear-gradient(180deg, rgba(12,14,20,.98), rgba(12,14,20,.86)); backdrop-filter: blur(10px);}

/* Tournament results badge + simple confetti */
.reward-badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; font-weight:900; background:rgba(0,255,200,.12); border:1px solid rgba(0,255,200,.35); box-shadow:0 10px 30px rgba(0,255,200,.12); animation:rewardPulse 1.4s ease-in-out infinite;}
@keyframes rewardPulse{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-1px) scale(1.02);}}
.confetti{position:relative; overflow:hidden;}
.confetti:before, .confetti:after{content:''; position:absolute; inset:-30px -30px auto -30px; height:120px; background:radial-gradient(circle at 20% 30%, rgba(255,90,150,.9) 0 3px, transparent 4px),
radial-gradient(circle at 40% 70%, rgba(0,255,200,.9) 0 3px, transparent 4px),
radial-gradient(circle at 70% 40%, rgba(255,210,0,.9) 0 3px, transparent 4px),
radial-gradient(circle at 85% 75%, rgba(120,160,255,.9) 0 3px, transparent 4px);
opacity:.55; animation:confettiDrop 1.8s ease-out forwards;}
.confetti:after{inset:-60px -60px auto -60px; height:160px; opacity:.35; animation-duration:2.4s;}
@keyframes confettiDrop{0%{transform:translateY(-40px);}100%{transform:translateY(0);}}


/* Tournament modal body should scroll so all results are visible */
#ui-tourn-modal-body{
  flex:1;
  overflow:auto;
  padding:16px;
  -webkit-overflow-scrolling: touch;
}


/* ===========================
   ODALAR (OKEY MASASI)
=========================== */
.okey-table{
  position:relative;
  width:100%;
  min-height:340px;
  background: radial-gradient(ellipse at center, rgba(20,25,35,.95) 0%, rgba(10,12,18,.95) 65%, rgba(6,7,10,.98) 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:28px;
  overflow:hidden;
}

/* When a question/discuss is open, grow the table so the question can fit on screen */
.okey-table.center-open{
  height:72vh;
  min-height:520px;
  max-height:76vh;
}
.okey-table.center-open .okey-seat{ height:66px; }

@media (max-width: 480px){
  .okey-table.center-open{ height:74vh; min-height:500px; max-height:78vh; }
}
.okey-seats{
  position:absolute;
  inset:0;
  display:grid;
  gap:12px;
  padding:14px;
  pointer-events:auto;
}

.okey-seats.cap-2{ grid-template-columns: repeat(2, 1fr); }
.okey-seats.cap-3{ grid-template-columns: repeat(3, 1fr); }
.okey-seats.cap-4{ grid-template-columns: repeat(2, 1fr); }
.okey-seats.cap-6{ grid-template-columns: repeat(3, 1fr); }
.okey-seats.cap-8{ grid-template-columns: repeat(4, 1fr); }

/* When a question/discussion is active: hide empty seats and move remaining seats to the top */
.okey-seats.compact{
  inset: 12px 12px auto 12px;
  padding: 0;
  gap: 10px;
  align-items: start;
}
.okey-seats.compact.compact-n-1{ grid-template-columns: repeat(1, 1fr); }
.okey-seats.compact.compact-n-2{ grid-template-columns: repeat(2, 1fr); }
.okey-seats.compact.compact-n-3{ grid-template-columns: repeat(3, 1fr); }
.okey-seats.compact.compact-n-4{ grid-template-columns: repeat(4, 1fr); }
.okey-seats.compact.compact-n-5{ grid-template-columns: repeat(3, 1fr); }
.okey-seats.compact.compact-n-6{ grid-template-columns: repeat(3, 1fr); }
.okey-seats.compact.compact-n-7{ grid-template-columns: repeat(4, 1fr); }
.okey-seats.compact.compact-n-8{ grid-template-columns: repeat(4, 1fr); }
.okey-seats.compact .okey-seat{
  height: 60px;
  padding: 10px 12px;
}
.okey-seat.mini{ justify-content: center; }
.okey-seat.mini .meta{ display: none; }
.okey-seat.mini .avatar{ width: 42px; height: 42px; font-size: 18px; }
.okey-seat{
  width:auto;
  min-width:0;
  max-width:none;
  height:72px;
  border-radius:22px;
  background:rgba(255,255,255,.06);
  border:1px dashed rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
.okey-seat:hover{ transform:translateY(-2px); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }
.okey-seat.filled{ border-style:solid; background:rgba(255,255,255,.07); cursor:pointer; }
.okey-seat .avatar{
  width:34px; height:34px; border-radius:12px;
  background:linear-gradient(145deg, rgba(255,46,99,.35), rgba(0,255,209,.22));
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
}
.okey-seat .meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.okey-seat .name{ font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.okey-seat .rank{ font-size:12px; opacity:.8; }
.okey-seat .dot{
  width:10px; height:10px; border-radius:50%;
  background:#6b7280; box-shadow:none;
  margin-left:auto;
}
.okey-seat.online .dot{ background:#22c55e; box-shadow:0 0 10px rgba(34,197,94,.45); }
.okey-seat.afk{ opacity:.55; }
.okey-seat.empty{
  justify-content:center;
  font-weight:900;
  color:rgba(255,255,255,.55);
}
.okey-center{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index: 9000;
  padding: 12px;
}
.okey-center-content{
  width:min(940px, 98%);
  min-height:130px;
  border-radius:22px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  padding:20px;
  backdrop-filter: blur(12px);
  max-height: calc(100% - 24px);
  overflow: auto;
  pointer-events:none;
}
.okey-center.center-active .okey-center-content{ pointer-events:auto; }
.okey-center.center-idle{ align-items:flex-start; justify-content:flex-start; }
.okey-center.center-idle .okey-center-content{ width:min(520px, 92%); padding:12px 14px; border-radius:18px; background:rgba(0,0,0,.28); }
.room-ready{ pointer-events:none; }
.room-ready-title{ font-weight:900; font-size:14px; }

.room-table-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;
}
.room-table-row:hover{ background:rgba(255,255,255,.08); }
.room-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.room-tag{
  font-size:11px; font-weight:900; letter-spacing:.3px;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  opacity:.9;
}

@keyframes flyEmoji{
  0%{ transform:translate(var(--x0), var(--y0)) scale(.75) rotate(-8deg); opacity:.0; }
  12%{ opacity:1; }
  58%{ transform:translate(calc((var(--x0) + var(--x1)) / 2), calc(min(var(--y0), var(--y1)) - 70px)) scale(1.18) rotate(10deg); opacity:1; }
  100%{ transform:translate(var(--x1), var(--y1)) scale(1.36) rotate(0deg); opacity:0; }
}
.fly-emoji{
  position:fixed;
  z-index:9999;
  font-size:42px;
  animation:flyEmoji 980ms cubic-bezier(.2,.75,.2,1) forwards;
  pointer-events:none;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.45));
  text-shadow:0 0 14px rgba(255,255,255,.45), 0 10px 30px rgba(0,0,0,.45);
}
.fly-emoji::before{
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 72%);
  z-index:-1;
}
@keyframes emojiSeatPulse{
  0%{ transform:scale(1); box-shadow:0 0 0 rgba(255,255,255,0); }
  25%{ transform:scale(1.08); box-shadow:0 0 0 8px rgba(255,255,255,.06); }
  60%{ transform:scale(1.16); box-shadow:0 0 0 16px rgba(255,94,132,.14); }
  100%{ transform:scale(1); box-shadow:0 0 0 rgba(255,255,255,0); }
}
@keyframes emojiProfileBadge{
  0%{ transform:translate(-50%, 12px) scale(.4); opacity:0; }
  20%{ transform:translate(-50%, -6px) scale(1.1); opacity:1; }
  75%{ transform:translate(-50%, -30px) scale(1.02); opacity:1; }
  100%{ transform:translate(-50%, -44px) scale(.92); opacity:0; }
}
.okey-seat.emoji-hit .avatar{
  animation:emojiSeatPulse 760ms cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 0 0 rgba(255,94,132,.0), 0 0 26px rgba(255,226,92,.45), 0 10px 24px rgba(0,0,0,.32);
  position:relative;
}
.okey-seat .avatar{ overflow:visible; }
.seat-emoji-badge{
  position:absolute;
  left:50%;
  top:-8px;
  transform:translateX(-50%);
  min-width:42px;
  height:42px;
  padding:0 10px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.98), rgba(255,235,173,.92));
  box-shadow:0 12px 28px rgba(0,0,0,.35), 0 0 24px rgba(255,233,121,.45);
  border:2px solid rgba(255,255,255,.75);
  pointer-events:none;
  z-index:3;
  animation:emojiProfileBadge 1050ms cubic-bezier(.2,.75,.2,1) forwards;
}
.okey-seat.emoji-hit{ overflow:visible; }

#pack-modal{display:none; position:fixed; inset:0; z-index:2500; align-items:center; justify-content:center; background:rgba(0,0,0,.75); backdrop-filter:blur(10px);} 


/* ===== Rooms: AFK + Emoji picker + Chat tweaks ===== */
.okey-seat.afk { filter: grayscale(1); opacity: .55; }
.okey-seat.afk .dot { opacity: 0; }
.emoji-picker{
  position: fixed;
  z-index: 9999;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.emoji-picker .emoji-btn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-panel);
  font-size: 22px;
  cursor: pointer;
}
.emoji-picker .emoji-btn:active{ transform: scale(.96); }

#ui-room-chat::-webkit-scrollbar{ width: 10px; }
#ui-room-chat::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.12); border-radius: 10px; }
#ui-room-chat{ scroll-behavior: smooth; }



/* Small utility buttons */
.btn-small{ padding:8px 12px !important; font-size:13px !important; }
.icon-btn{
  width:34px; height:34px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border-color);
  background:rgba(255,255,255,.04);
  color:var(--text-main);
  cursor:pointer;
}
.icon-btn:hover{ background:rgba(255,255,255,.07); }

/* AFK visual */
.okey-seat.afk .avatar{ filter:grayscale(1); opacity:.7; }
.okey-seat.afk .meta{ opacity:.75; }

/* Gift market */
.gift-card{
  border:1px solid var(--border-color);
  background:rgba(255,255,255,.04);
  border-radius:16px;
  padding:12px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:pointer;
  user-select:none;
}
.gift-card:hover{ background:rgba(255,255,255,.07); }
.gift-icon{ font-size:28px; line-height:1; }
.gift-label{ font-weight:900; font-size:12px; opacity:.9; text-align:center; }
.gift-cost{ font-size:12px; opacity:.7; font-weight:800; }


/* Room center overlay interactivity */
.okey-center.center-active{
  pointer-events:auto;
  background:rgba(0,0,0,.25);
}
.okey-center.center-active .okey-center-content{
  pointer-events:auto;
}

.okey-center.center-active, .okey-center.center-active *{ pointer-events:auto !important; }
.okey-center-content{
  max-height: calc(100vh - 210px);
  overflow:auto;
}

.okey-center-content .btn{ min-height:52px; }

/* Room header tweaks */
.room-header{ position:relative; padding-right:56px; }
.room-title{
  margin:0;
  font-size:22px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.95;
}
.room-exit{
  position:absolute;
  top:10px;
  right:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:var(--text-main);
  padding:8px 10px;
  border-radius:14px;
  font-weight:900;
  font-size:12.5px;
  cursor:pointer;
}
.room-exit:hover{ background:rgba(255,255,255,.08); }

.room-throw{
  position:absolute;
  top:10px;
  right:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:var(--text-main);
  padding:8px 10px;
  border-radius:14px;
  font-weight:900;
  font-size:12.5px;
  cursor:pointer;
}
.room-throw:hover{ background:rgba(255,255,255,.08); }


/* Story bar (shown during active question/discuss) */
.okey-seats.story-bar{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:12px;
  align-items:flex-start;
  justify-content:flex-start;
  overflow-x:auto;
  overflow-y:hidden;
  padding: 10px 10px 6px 10px;
  margin-bottom: 6px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.okey-seats.story-bar::-webkit-scrollbar{ height:8px; }
.okey-seats.story-bar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 999px; }
.okey-seats.story-bar .story-item{
  width:72px;
  flex: 0 0 auto;
  scroll-snap-align: start;
  text-align:center;
  cursor:pointer;
  user-select:none;
  position:relative;
}
.okey-seats.story-bar .story-ring{
  width:56px;
  height:56px;
  margin:0 auto;
  border-radius:999px;
  border:2.5px solid var(--ring, rgba(255,255,255,.35));
  background: rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.okey-seats.story-bar .story-img{
  width:100%;
  height:100%;
  border-radius:999px;
  object-fit:cover;
}
.okey-seats.story-bar .story-initial{
  width:100%;
  height:100%;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  font-size:18px;
  background: rgba(0,0,0,.25);
}
.okey-seats.story-bar .story-name{
  margin-top:6px;
  font-size:11px;
  opacity:.92;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.okey-seats.story-bar .story-crown{
  position:absolute;
  top:-10px;
  right:-8px;
  font-size:14px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.okey-seats.story-bar .dot{
  position:absolute;
  bottom:3px;
  right:3px;
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.35);
  border:1px solid rgba(0,0,0,.35);
}
.okey-seats.story-bar .story-item.online .dot{ background: #27ae60; }
.okey-seats.story-bar .story-item.afk{ opacity:.55; filter: grayscale(1); }
/* Question options: ensure clickable even under overlays */
.okey-center.center-active{ z-index: 6500; }
.okey-center.center-active .okey-center-content{ position:relative; z-index: 6501; }

/* Make room chat toggle more visible */
.chat-toggle-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px !important;
  border-radius:14px;
  font-weight:900;
  width: 190px;
  justify-content:center;
}

/* Fixed bottom chat bar for room question/discuss (prevents "SOHBET" button from scrolling away) */
.room-chatbar{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: calc(var(--nav-height) + 14px);
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:22px;
  background: rgba(10, 13, 20, 0.88);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  z-index: 1200;
  pointer-events:auto;
}
.room-chatbar-left{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  opacity:.92;
  white-space:nowrap;
}
.room-chatbar-btn{
  flex:1;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.92);
  color:#0a0d14;
  font-weight:900;
  letter-spacing:1px;
  cursor:pointer;
}
.room-chatbar-btn:active{ transform: scale(.98); }
.room-chatbar-mini{
  width:58px;
  height:46px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text-main);
  font-weight:900;
  cursor:pointer;
}
.room-chatbar-mini:disabled{ opacity:.35; filter: grayscale(1); cursor:not-allowed; }

.chat-system{
  align-self:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  padding:8px 10px;
  border-radius:14px;
  font-size:12.5px;
  font-weight:800;
}

.room-throw:disabled{opacity:.35;filter:grayscale(1);cursor:not-allowed;}


/* ===== Room Question UI (clickable + scrollable) ===== */
.room-q{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  height:100%;
  max-height:100%;
}
.room-q-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.room-q-title{
  font-weight:900;
  font-size:16px;
  letter-spacing:.2px;
}
.room-q-timer{
  font-weight:900;
  font-size:13px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  white-space:nowrap;
}
.room-q-body{
  font-weight:800;
  line-height:1.35;
  word-break:break-word;
  overflow:auto;
  max-height:none;
  flex: 1 1 auto;
  min-height: 110px;
  padding-right:8px;
  -webkit-overflow-scrolling: touch;
}
.room-q-options{
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
  max-height:46%;
  flex: 0 0 auto;
  padding-right:8px;
  -webkit-overflow-scrolling: touch;
}
.room-opt{
  width:100%;
  border:0;
  border-radius:20px;
  padding:16px 16px;
  cursor:pointer;
  display:flex;
  gap:10px;
  align-items:flex-start;
  text-align:left;
  background:rgba(255,255,255,.92);
  color:#111827;
  font-weight:900;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.room-opt:active{ transform:scale(.99); }
.room-opt.selected{
  outline:3px solid rgba(34,197,94,.75);
  box-shadow:0 0 0 2px rgba(0,0,0,.35), 0 12px 30px rgba(34,197,94,.12);
  background:rgba(34,197,94,.14);
}

/* Seat feedback after a round */
.okey-seat.ans-correct{
  border-style:solid;
  border-color: rgba(34,197,94,.75);
  background: rgba(34,197,94,.12);
}
.okey-seat.ans-wrong{
  border-style:solid;
  border-color: rgba(239,68,68,.75);
  background: rgba(239,68,68,.12);
}
.room-opt.disabled{ opacity:.55; }
.room-opt-letter{ min-width:34px; }
.room-opt-text{ flex:1; }


/* ===== Mobile room layout tweaks (Android APK) ===== */
.room-chat-headline{ font-size:15px; }

@media (max-width: 480px){
  #scr-room.screen{ padding: 14px; padding-bottom: 118px; }
  #ui-room-table-wrap.card{ padding: 12px !important; }
  .okey-center{ padding: 8px; }
  .okey-center-content{ width: 100%; padding: 14px; border-radius: 18px; }
}

@media (max-width: 420px){
  .room-chat-headline{ font-size:12.5px; }
  .chat-toggle-btn{
    padding:7px 8px !important;
    border-radius:12px;
    font-size:11px;
    width: 120px;
    letter-spacing:.3px;
  }
  .room-chatbar{
    left: 10px;
    right: 10px;
    gap:8px;
    padding:8px 10px;
    border-radius:18px;
  }
  .room-chatbar-left{ font-size:11px; }
  .room-chatbar-btn{ height:38px; font-size:11px; letter-spacing:.4px; }
  .room-chatbar-mini{ width:46px; height:38px; border-radius:14px; font-size:12px; }
}

@media (max-width: 360px){
  .room-chatbar-left{ display:none; }
  .chat-toggle-btn{ width: 108px; }
}


/* ===== UI PATCH v8 ===== */

/* Sarı profil çerçevesi (odadaki kullanıcı kartları) */
.okey-seat{ position:relative; }
.okey-seat.filled{
  border-color: rgba(241, 196, 15, .55) !important;
  box-shadow: 0 0 0 1px rgba(241, 196, 15, .10) inset;
}
.okey-seat.ans-blank{
  border-color: rgba(241, 196, 15, .70) !important;
  background: rgba(241, 196, 15, .06) !important;
}

/* Doğru sayacı badge (minimal) */
.mini-correct{
  position:absolute;
  top:-8px;
  right:12px;
  padding:3px 7px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  z-index:2;
  line-height:1;
  pointer-events:none;
}
.mini-correct.story-badge{
  top:-6px;
  right:-6px;
  transform: scale(.92);
}

.mini-blank{
  font-size:11px;
  color: var(--text-muted);
  opacity:.9;
}

/* Story ring: sarı çerçeve hissi */
.story-ring{
  border:1px solid rgba(241, 196, 15, .25);
}

/* Profile avatar çerçevesi sarı */
.prof-avatar-big{
  box-shadow: 0 0 0 2px rgba(241, 196, 15, .35) inset;
}

/* ===== Room Invite Modal ===== */
#room-invite-modal{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.65);
  z-index:9999;
  align-items:center;
  justify-content:center;
  padding:18px;
}
#room-invite-modal .invite-card{
  width:min(520px, 94vw);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  padding:18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  backdrop-filter: blur(16px);
}
#room-invite-modal .invite-top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}
#room-invite-modal .invite-avatar{
  width:56px; height:56px;
  border-radius:18px;
  border:1px solid rgba(241,196,15,.35);
  background: rgba(241,196,15,.08);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  font-weight:900;
  font-size:20px;
}
#room-invite-modal .invite-avatar img{
  width:100%; height:100%; object-fit:cover;
}
#room-invite-modal .invite-meta b{ font-size:18px; }
#room-invite-modal .invite-meta .muted{ color: var(--text-muted); font-size:12px; margin-top:4px; }
#room-invite-modal .invite-actions{
  display:flex;
  gap:10px;
  margin-top:16px;
}
#room-invite-modal .invite-actions .btn{
  flex:1;
}

/* ===== Announcement Modal ===== */
#announcement-modal{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.68);
  z-index:9998;
  align-items:center;
  justify-content:center;
  padding:18px;
}
#announcement-modal .ann-card{
  width:min(640px, 94vw);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  padding:18px;
  box-shadow: 0 20px 55px rgba(0,0,0,.6);
  backdrop-filter: blur(16px);
}
#announcement-modal .ann-title{
  font-size:20px;
  font-weight:900;
  margin-bottom:8px;
}
#announcement-modal .ann-body{
  color: rgba(255,255,255,.86);
  font-size:14px;
  line-height:1.45;
  white-space:pre-wrap;
  margin-top:8px;
}

.avatar-upload-badge{
  position:absolute;
  left:8px;
  bottom:8px;
  width:34px;
  height:34px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  cursor:pointer;
  z-index:2;
}

/* ==============================
   Custom Dialog Modal (No native confirm/alert)
   ============================== */
.dialog-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.82);
    backdrop-filter: blur(16px);
    z-index:3000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
}
.dialog-card{
    width:min(520px, 94vw);
    border:1px solid rgba(255,255,255,0.10);
    background:linear-gradient(180deg, rgba(18,22,32,0.98), rgba(8,10,14,0.98));
    border-radius:22px;
    box-shadow: var(--shadow-lg);
    padding:18px 18px 16px;
}
.dialog-title{
    font-size:20px;
    font-weight:950;
    letter-spacing:.2px;
    margin-bottom:10px;
}
.dialog-body{
    color:var(--text-main);
    opacity:.92;
    line-height:1.45;
    font-size:15px;
    margin-bottom:14px;
}
.dialog-input{
    width:100%;
    background:rgba(0,0,0,0.35);
    border:1px solid var(--border-color);
    border-radius:14px;
    padding:12px 14px;
    color:var(--text-main);
    outline:none;
}
.dialog-actions{
    display:flex;
    gap:10px;
    justify-content:flex-end;
    flex-wrap:wrap;
    margin-top:14px;
}


/* Avatar with photo */
.avatar.has-photo{
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: transparent;
}


#room-invite-modal .modal-content{
  width:min(92vw, 440px) !important;
  max-width:440px !important;
  max-height:min(82vh, 560px) !important;
  height:auto !important;
}
#room-invite-modal .modal-body{ padding:16px !important; }
#room-invite-modal .invite-card{ padding:14px !important; border-radius:18px !important; }
#room-invite-modal .invite-name{ font-size:18px !important; }
#room-invite-modal .invite-sub{ font-size:13px !important; }
#room-invite-modal .invite-pill{ padding:8px 10px !important; font-size:13px !important; }
#room-invite-modal .invite-avatar{ width:54px !important; height:54px !important; font-size:20px !important; }
@media (max-width: 480px){
  #room-invite-modal{ padding:12px !important; }
  #room-invite-modal .modal-content{
    width:min(94vw, 380px) !important;
    max-width:380px !important;
    max-height:78vh !important;
    border-radius:22px !important;
  }
  #room-invite-modal .modal-header{ padding:14px 16px !important; }
  #room-invite-modal .modal-body{ padding:14px !important; gap:10px !important; }
  #room-invite-modal .invite-card{ padding:12px !important; }
  #room-invite-modal .invite-top, #room-invite-modal .invite-header{ gap:10px !important; }
  #room-invite-modal .invite-name{ font-size:16px !important; }
  #room-invite-modal .invite-sub{ font-size:12px !important; }
  #room-invite-modal .invite-pill{ width:100%; justify-content:flex-start; }
  #room-invite-modal .invite-actions .btn,
  #room-invite-modal #room-invite-decline-btn,
  #room-invite-modal #room-invite-accept-btn{ padding:12px 14px !important; font-size:15px !important; }
}

#seat-action-modal .modal-content{ width:min(92vw,420px) !important; height:auto !important; max-height:70vh !important; }
#seat-action-modal .modal-body{ padding:16px !important; }
#seat-action-modal .modal-close{ cursor:pointer; }
#seat-action-modal #seat-action-buttons .btn{ position:relative; z-index:1; }


/* pass20 invite + seat action fixes */
#room-invite-modal .modal-content{
  width:min(88vw, 360px) !important;
  max-width:360px !important;
  max-height:76vh !important;
}
#room-invite-modal .modal-header{ padding:12px 14px !important; }
#room-invite-modal .modal-body{ padding:12px !important; gap:8px !important; }
#room-invite-modal .invite-card{ padding:10px !important; border-radius:16px !important; }
#room-invite-modal .invite-avatar{ width:46px !important; height:46px !important; font-size:18px !important; }
#room-invite-modal .invite-name{ font-size:15px !important; }
#room-invite-modal .invite-sub{ font-size:11px !important; }
#room-invite-modal .invite-pills{ gap:8px !important; margin-top:10px !important; }
#room-invite-modal .invite-pill{
  width:100%;
  min-width:0;
  justify-content:flex-start;
  padding:7px 9px !important;
  font-size:12px !important;
  overflow:hidden;
}
#room-invite-modal .invite-pill span,
#room-invite-modal .invite-pill b,
#room-invite-modal .invite-headtext,
#room-invite-modal .invite-headtext > div,
#room-invite-modal .invite-truncate{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#room-invite-modal small{ font-size:11px !important; line-height:1.3 !important; }
#room-invite-modal #room-invite-decline-btn,
#room-invite-modal #room-invite-accept-btn{
  padding:10px 12px !important;
  font-size:14px !important;
}
@media (max-width: 480px){
  #room-invite-modal{ padding:10px !important; }
  #room-invite-modal .modal-content{
    width:min(86vw, 330px) !important;
    max-width:330px !important;
    max-height:72vh !important;
  }
}
#seat-action-modal .modal-close,
#seat-action-modal [data-seat-action]{
  pointer-events:auto !important;
  touch-action:manipulation;
}
#gift-market-modal .modal-close,
#gift-market-modal .gift-card{
  pointer-events:auto !important;
  touch-action:manipulation;
}

#room-member-action-panel [data-role="overlay"],
#room-member-action-panel #room-member-action-close,
#room-member-action-panel .btn,
#seat-action-sheet-close{
  pointer-events:auto !important;
  touch-action:manipulation;
}
#seat-action-modal #seat-action-buttons .btn{
  pointer-events:auto !important;
  position:relative;
  z-index:5;
}


/* pass21 tighter invite modal */
#room-invite-modal .modal-content{ width:min(82vw,300px) !important; max-width:300px !important; max-height:72vh !important; }
#room-invite-modal .modal-body{ padding:10px !important; gap:10px !important; }
#room-invite-modal .invite-card{ padding:10px !important; }
#room-invite-modal .invite-pills{ display:flex !important; flex-direction:column !important; gap:6px !important; }
#room-invite-modal .invite-pill{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; }
#room-invite-modal .invite-pill > span:last-child{ flex:1 1 auto !important; min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
@media (max-width:480px){
  #room-invite-modal .modal-content{ width:min(80vw,292px) !important; max-width:292px !important; }
}
#seat-action-modal .modal-content{ width:min(88vw,360px) !important; max-width:360px !important; }
#seat-action-modal #seat-action-buttons{ display:flex !important; flex-direction:column !important; gap:10px !important; }


/* Chat interaction hardening */
body.exam-open #scr-msgs.active,
body.exam-open #scr-msgs.active *,
body.exam-open #scr-chat-room.active,
body.exam-open #scr-chat-room.active *{
  pointer-events:auto !important;
}
#scr-msgs.active, #scr-chat-room.active{
  pointer-events:auto !important;
}
#chat-list-container, #chat-list-container *{
  pointer-events:auto;
}
#chat-list-container .chat-row,
#chat-list-container [data-chat-uid],
#chat-list-container [data-delete-chat-uid],
#ui-chat-del-btn{
  touch-action:manipulation;
  pointer-events:auto !important;
  position:relative;
  z-index:5;
}


.loader-brand-wrap{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px;}
.loader-brand-title{font-size:34px; font-weight:900; letter-spacing:1.4px; color:#fff; text-shadow:0 8px 30px rgba(255,46,99,.25); animation: loaderGlow 1.8s ease-in-out infinite alternate;}
.loader-brand-sub{margin-top:10px; color:rgba(255,255,255,.72); font-size:14px; letter-spacing:1.2px; text-transform:uppercase;}

.auth-brand-hero{ text-align:center; margin-top:72px; margin-bottom:10px; }
.auth-brand-chip{ display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; border-radius:999px; margin-bottom:18px; background:linear-gradient(135deg, rgba(255,46,99,.16), rgba(108,92,231,.18)); border:1px solid rgba(255,255,255,.10); color:#fff; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; box-shadow:0 10px 35px rgba(255,46,99,.12); }
@keyframes loaderGlow{from{transform:translateY(0); opacity:.9;}to{transform:translateY(-3px); opacity:1;}}


/* Kelime öğrenme modülleri */
.learn-card{background:linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--border-color); border-radius:22px; padding:18px; box-shadow:var(--shadow-sm); margin-bottom:16px;}
.learn-card h3{margin:0 0 10px; font-size:20px;}
.learn-muted{color:var(--text-muted); font-size:13px;}
.word-day-card{background:linear-gradient(145deg, rgba(255,193,7,.14), rgba(255,152,0,.07)); border:1px solid rgba(255,193,7,.20);}
.word-levels{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.word-chip{border:1px solid var(--border-color); background:var(--bg-panel); color:var(--text-muted); border-radius:999px; padding:8px 12px; font-weight:800; font-size:12px; cursor:pointer;}
.word-chip.active{background:var(--primary); color:white; border-color:transparent; box-shadow:0 0 18px rgba(255,46,99,.2);}
.word-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:14px;}
.word-mini-item{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:12px;}
.word-mini-item b{display:block; margin-bottom:4px; font-size:16px;}
.example-sentence{font-size:15px; line-height:1.6; background:rgba(255,255,255,.03); border:1px dashed rgba(255,255,255,.1); border-radius:16px; padding:14px; margin-top:12px;}
.learn-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.quiz-choice{display:block; width:100%; margin-top:10px; padding:14px 16px; border-radius:16px; border:1px solid var(--border-color); background:var(--bg-panel); color:var(--text-main); text-align:left; font-weight:700; cursor:pointer;}
.quiz-choice.correct{border-color:#1fbf75; background:rgba(31,191,117,.10);}
.quiz-choice.wrong{border-color:#ff5c72; background:rgba(255,92,114,.10);}
.learn-score{font-size:13px; font-weight:800; color:var(--warning); letter-spacing:.4px;}
@media (max-width:640px){.word-grid{grid-template-columns:1fr;}}

/* AI language coach */
.ai-hero-card{background:linear-gradient(135deg, rgba(87,90,255,.20), rgba(18,228,215,.10)); border-color:rgba(136,146,255,.35); overflow:hidden;}
.ai-hero-top{display:flex; justify-content:space-between; gap:18px; align-items:flex-start; flex-wrap:wrap;}
.ai-hero-badge{padding:12px 16px; border-radius:18px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); font-weight:900; color:#fff; box-shadow:var(--shadow-sm);}
.ai-metrics{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px;}
.ai-metric{padding:14px; border-radius:18px; background:rgba(8,12,32,.36); border:1px solid rgba(255,255,255,.08);}
.ai-metric span{display:block; color:var(--text-muted); font-size:12px; margin-bottom:6px;}
.ai-metric b{font-size:15px; color:#fff;}
.ai-chat-card{background:linear-gradient(145deg, rgba(255,255,255,.04), rgba(90,94,255,.04));}
.ai-panel-head{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap;}
.ai-scenario-bar{display:flex; justify-content:space-between; gap:12px; align-items:center; background:rgba(255,255,255,.04); border:1px solid var(--border-color); border-radius:18px; padding:14px 16px; margin-top:14px;}
.ai-chat-window{display:flex; flex-direction:column; gap:12px; margin-top:16px; max-height:460px; overflow:auto; padding-right:4px;}
.ai-message{display:flex;}
.ai-message.user{justify-content:flex-end;}
.ai-message.bot{justify-content:flex-start;}
.ai-bubble{max-width:min(720px, 88%); padding:14px 16px; border-radius:20px; border:1px solid var(--border-color); background:rgba(255,255,255,.045); box-shadow:var(--shadow-sm);}
.ai-message.user .ai-bubble{background:linear-gradient(145deg, rgba(255,46,99,.16), rgba(255,46,99,.08)); border-color:rgba(255,46,99,.22);}
.ai-message.bot .ai-bubble{background:linear-gradient(145deg, rgba(87,90,255,.16), rgba(18,228,215,.08)); border-color:rgba(87,90,255,.22);}
.ai-message-head{font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.6px; margin-bottom:8px; color:rgba(255,255,255,.7);}
.ai-message-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.mini-btn{border:1px solid var(--border-color); background:var(--bg-panel); color:var(--text-main); border-radius:999px; padding:8px 12px; font-size:12px; font-weight:800; cursor:pointer;}
.mini-btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm);}
.ai-feedback-box{margin-top:16px; padding:16px; border-radius:18px; background:rgba(19,31,61,.55); border:1px solid rgba(119,141,255,.20);}
.ai-feedback-tag{padding:9px 12px; border-radius:999px; font-size:12px; font-weight:900; border:1px solid rgba(255,92,114,.30); background:rgba(255,92,114,.12); color:#ffd9de;}
.ai-feedback-tag.ok{border-color:rgba(31,191,117,.30); background:rgba(31,191,117,.12); color:#d8ffea;}
.ai-input-row{margin-top:16px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:end;}
.ai-input-row textarea{min-height:110px; resize:vertical;}
.ai-input-actions{display:flex; gap:10px; flex-direction:column;}
.saved-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px;}
.saved-list{display:flex; flex-direction:column; gap:10px; margin-top:10px;}
.saved-item{display:flex; justify-content:space-between; gap:10px; align-items:flex-start; padding:12px 14px; background:rgba(255,255,255,.04); border:1px solid var(--border-color); border-radius:16px;}
.word-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px;}
.word-mini-item{padding:14px; border-radius:16px; border:1px solid var(--border-color); background:rgba(255,255,255,.04);}
.word-levels{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
@media (max-width: 900px){
  .ai-metrics, .saved-grid, .word-grid{grid-template-columns:1fr;}
  .ai-input-row{grid-template-columns:1fr;}
  .ai-input-actions{flex-direction:row;}
  .ai-bubble{max-width:100%;}
}

.level-swipe-track{
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:8px 2px 4px;
  margin-top:14px;
}
.level-swipe-track::-webkit-scrollbar{height:8px;}
.level-swipe-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12); border-radius:999px;}
.level-swipe-card{
  min-width:220px;
  flex:0 0 220px;
  scroll-snap-align:start;
  text-align:left;
  border:1px solid var(--border-color);
  background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  color:var(--text-main);
  border-radius:22px;
  padding:16px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:8px;
  box-shadow:var(--shadow-sm);
}
.level-swipe-card b{font-size:18px;}
.level-swipe-card small{color:var(--text-muted); line-height:1.45; min-height:38px;}
.level-swipe-card.active{
  border-color:rgba(255,46,99,.45);
  box-shadow:0 18px 40px rgba(255,46,99,.14);
  transform:translateY(-2px);
}
.level-pill{
  display:inline-flex;
  align-self:flex-start;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  font-weight:900;
  font-size:12px;
}
.level-swipe-card.active .level-pill{background:var(--primary); color:#fff;}
.level-count{font-size:12px; color:var(--text-muted); font-weight:800;}
.word-save-grid{grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:16px;}
.word-save-item{display:flex; flex-direction:column; justify-content:space-between; gap:14px; min-height:190px;}
.learn-actions.compact{gap:8px; flex-wrap:wrap;}
.learn-actions.compact .mini-btn{margin-top:0;}
.words-level-card{margin-top:18px;}
@media (max-width:640px){
  .level-swipe-card{min-width:82%; flex-basis:82%;}
  .word-save-grid{grid-template-columns:1fr;}
}

.learn-word-deck{position:relative; min-height:680px; margin-top:16px; overflow:visible; isolation:isolate;}
.learn-word-card{
  justify-content:space-between;
  align-items:stretch;
  text-align:left;
  padding:22px;
  background:linear-gradient(145deg, rgba(255,255,255,.06), rgba(87,90,255,.06));
  border-color:rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
}
.learn-word-card.active{z-index:2;}
.learn-word-card.stacked{
  z-index:1;
  transform:scale(.965) translateY(18px);
  opacity:.26;
  pointer-events:none;
  filter:blur(.2px);
}
.learn-word-card.preview .word-card-topline{margin-bottom:0;}
.word-card-preview-body{flex:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:8px; opacity:.95;}
.word-card-preview-label{font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:rgba(255,255,255,.45); font-weight:800;}
.word-card-preview-word{font-size:clamp(24px, 5.5vw, 34px); font-weight:900; color:rgba(255,255,255,.72); line-height:1.05;}
.word-card-topline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.word-card-body{display:flex; flex-direction:column; gap:14px; flex:1; justify-content:center; min-height:0;}
.word-card-word{font-size:clamp(34px, 7vw, 46px); font-weight:900; line-height:1.05; color:#fff; word-break:break-word;}
.word-card-meaning{font-size:18px; color:rgba(255,255,255,.82); font-weight:700; line-height:1.35;}
.word-card-example{font-size:16px; min-height:0; display:flex; flex-direction:column; align-items:flex-start; gap:12px; line-height:1.6; padding:18px; border-radius:18px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06); overflow:visible;}
.word-card-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; position:relative; z-index:3; align-items:center;}
.word-card-actions .mini-btn{background:rgba(10,13,20,.92); min-height:46px; position:relative; z-index:4;}
.word-card-swipe-hint{margin-top:12px; color:rgba(255,255,255,.48); font-size:12px; font-weight:700; text-align:center; letter-spacing:.4px;}
.words-layout-stack{display:flex; flex-direction:column; gap:16px;}
.deck-progress-row{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:16px; padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);}
.practice-focus-card{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px; padding:16px; border-radius:18px; background:linear-gradient(145deg, rgba(255,46,99,.10), rgba(87,90,255,.08)); border:1px solid rgba(255,255,255,.08);}
#word-practice-section{position:relative; z-index:8;}
#word-practice-section .quiz-choice,
#word-practice-section .btn,
#word-practice-section .mini-btn{position:relative; z-index:9; pointer-events:auto;}
.profile-saved-card{margin-top:22px;}
@media (max-width:640px){
  .learn-word-deck{min-height:760px;}
  .learn-word-card{padding:18px;}
  .word-card-word{font-size:34px;}
  .word-card-example{min-height:0; padding:16px;}
  .word-card-actions .mini-btn{width:100%; justify-content:center; text-align:center;}
}


.rush-hud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.rush-chip{background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;min-height:74px;box-shadow: var(--shadow-sm);}
.rush-chip span{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);font-weight:800;}
.rush-chip b{font-size:24px;line-height:1;font-weight:900;color:#fff;}
.rush-chip small{font-size:12px;color:var(--text-muted);font-weight:700;}
.rush-chip-opp b{color:var(--warning);}
.rush-word-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%;}
.rush-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(99,102,241,.16);border:1px solid rgba(99,102,241,.26);font-size:12px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;color:#dbe4ff;}
.rush-word-main{font-size:48px;line-height:1;font-weight:900;color:#fff;letter-spacing:-1px;word-break:break-word;}
.rush-helper{font-size:16px;color:var(--text-muted);font-weight:700;}
.rush-subhelper{font-size:14px;color:rgba(255,255,255,.72);font-weight:600;}
.rush-status-good{color:var(--secondary)!important;}
.rush-status-bad{color:var(--danger)!important;}
@media (max-width: 720px){
  .rush-hud{grid-template-columns:1fr 1fr;}
  .rush-chip b{font-size:20px;}
  .rush-word-main{font-size:42px;}
}


.story-hero-card{background:linear-gradient(135deg, rgba(43,63,124,.28), rgba(18,228,215,.08), rgba(255,46,99,.08)); border-color:rgba(120,144,255,.35);} 
.story-progress-bar{height:10px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; margin-top:16px;}
.story-progress-bar span{display:block; height:100%; background:linear-gradient(90deg, var(--primary), #7f8cff, var(--secondary)); border-radius:999px;}
.story-note{margin-top:16px; padding:14px 16px; border-radius:16px; background:rgba(5,8,18,.45); border:1px solid rgba(255,255,255,.08); color:var(--text-main);}
.story-note b{display:block; margin-bottom:6px; color:#d9e3ff;}
.story-note.success{border-color:rgba(46,204,113,.28); background:rgba(46,204,113,.10);} 
.story-note.error{border-color:rgba(255,107,107,.24); background:rgba(255,107,107,.10);} 
.chapter-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px;}
.chapter-card{padding:16px; text-align:left; border-radius:18px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(8,12,24,.66)); color:var(--text-main); cursor:pointer;}
.chapter-card b{display:block; font-size:18px; margin:8px 0 6px;}
.chapter-card small{display:block; color:var(--text-muted); line-height:1.45; min-height:58px;}
.chapter-card.locked{opacity:.48; cursor:not-allowed; filter:saturate(.7);}
.chapter-card.active{border-color:rgba(120,144,255,.55); box-shadow:0 10px 28px rgba(88,103,255,.18);} 
.chapter-card.completed{border-color:rgba(46,204,113,.38);} 
.chapter-badge{display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:6px 10px; font-size:11px; font-weight:900; letter-spacing:.8px; background:rgba(127,140,255,.14); color:#d9e3ff;}
.chapter-meta{display:flex; justify-content:space-between; gap:8px; margin-top:12px; color:var(--text-muted); font-size:11px; font-weight:800; letter-spacing:.6px;}
.mystery-scene{border-color:rgba(18,228,215,.22);}
.saved-item{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.05); border-radius:14px; padding:12px;}
@media (max-width: 768px){ .chapter-grid{grid-template-columns:1fr;} }


/* Kanıt panosu ve anlatı seçimleri */
.evidence-board-grid{display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:16px;margin-top:16px;}
.evidence-column{display:flex;flex-direction:column;gap:12px;}
.evidence-panel{background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:16px;box-shadow:var(--shadow-sm);}
.evidence-panel h4{margin:0 0 10px;font-size:16px;}
.evidence-clue-card{position:relative;padding:14px 14px 12px;border-radius:16px;background:rgba(7,10,20,.68);border:1px solid rgba(130,146,255,.18);display:flex;flex-direction:column;gap:8px;}
.evidence-clue-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;}
.evidence-thread{height:2px;border-radius:999px;background:linear-gradient(90deg, rgba(255,46,99,.0), rgba(255,46,99,.75), rgba(18,228,215,.0));margin:6px 0 2px;}
.evidence-tag-row{display:flex;gap:8px;flex-wrap:wrap;}
.evidence-tag{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.07);font-size:11px;font-weight:900;color:#dce6ff;letter-spacing:.4px;text-transform:uppercase;}
.evidence-link-list{display:flex;flex-direction:column;gap:10px;}
.evidence-link-item{padding:12px 14px;border-radius:14px;border:1px dashed rgba(255,255,255,.12);background:rgba(255,255,255,.025);}
.story-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px;}
.story-choice-card{padding:14px;border-radius:16px;border:1px solid var(--border-color);background:rgba(255,255,255,.04);text-align:left;color:var(--text-main);cursor:pointer;}
.story-choice-card.active{border-color:rgba(255,46,99,.42);box-shadow:0 12px 30px rgba(255,46,99,.12);background:rgba(255,46,99,.08);}
.story-ending-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px;}
.story-ending-card{padding:16px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));display:flex;flex-direction:column;gap:10px;}
.story-ending-card.recommended{border-color:rgba(18,228,215,.44);box-shadow:0 14px 34px rgba(18,228,215,.12);}
.story-ending-card.unlocked{border-color:rgba(255,193,7,.34);}
.room-dossier-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;}
.room-dossier-clues{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
.room-dossier-note{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);margin-top:10px;}
@media (max-width: 900px){.evidence-board-grid,.room-dossier-grid,.story-ending-grid,.story-choice-grid{grid-template-columns:1fr;}}



/* Story mode visual overhaul */
.story-mode-shell{display:flex;flex-direction:column;gap:16px;}
.story-cinematic-hero{position:relative;overflow:hidden;border-radius:28px;padding:24px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:18px;background:var(--story-backdrop);border:1px solid color-mix(in srgb, var(--story-accent) 36%, rgba(255,255,255,.08));box-shadow:0 26px 60px rgba(3,8,20,.38);}
.story-cinematic-overlay,.story-stage-overlay,.chapter-cover-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18));pointer-events:none;}
.story-cinematic-copy,.story-cinematic-side,.story-stage-card{position:relative;z-index:1;}
.story-kicker-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.story-status-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15);font-size:11px;font-weight:900;letter-spacing:.9px;text-transform:uppercase;color:#eef3ff;}
.story-status-pill.alt{background:rgba(8,12,24,.36);} 
.story-status-pill.level{background:rgba(8,12,24,.40);} 
.story-status-pill.difficulty-pill{border-width:1px;font-weight:900;letter-spacing:.4px;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;}
.difficulty-pill-icon{font-size:12px;line-height:1;display:inline-flex;align-items:center;justify-content:center;filter:drop-shadow(0 1px 2px rgba(0,0,0,.28));}
.story-status-pill.difficulty-pill.easy{background:rgba(52,199,118,.18);border-color:rgba(52,199,118,.34);color:#dffff0;}
.story-status-pill.difficulty-pill.medium{background:rgba(255,159,10,.18);border-color:rgba(255,159,10,.34);color:#fff0d2;}
.story-status-pill.difficulty-pill.hard{background:rgba(255,69,58,.18);border-color:rgba(255,69,58,.34);color:#ffe1de;}
.detective-case-badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px;}
.story-headline{font-size:40px;line-height:1.05;margin:12px 0 10px;color:#fff;max-width:9ch;}
.story-subline{max-width:680px;color:rgba(233,240,255,.84);font-size:15px;line-height:1.65;margin:0;}
.story-meta-ribbon{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.story-meta-ribbon span,.chapter-location,.story-ambient-line,.story-scene-label{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.09);font-size:12px;font-weight:800;color:#edf2ff;}
.story-progress-bar.cinematic{margin-top:18px;height:12px;background:rgba(255,255,255,.10);} 
.story-progress-bar.compact{margin-top:10px;height:8px;}
.story-quick-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px;}
.story-stat-box{padding:14px 16px;border-radius:18px;background:rgba(4,8,18,.36);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(8px);}
.story-stat-box span{display:block;font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:rgba(226,234,255,.72);}
.story-stat-box b{display:block;margin-top:6px;font-size:18px;color:#fff;line-height:1.25;}
.story-hero-actions{margin-top:18px;}
.story-scene-window{position:relative;border-radius:24px;overflow:hidden;background:rgba(4,8,18,.42);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(10px);box-shadow:0 18px 48px rgba(0,0,0,.28);}
.story-scene-window-top{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:#dfe8ff;}
.story-window-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);}
.story-scene-window-body{padding:18px;display:flex;flex-direction:column;gap:12px;}
.story-scene-title{font-size:26px;font-weight:900;color:#fff;line-height:1.1;}
.story-scene-text{color:rgba(236,242,255,.86);line-height:1.7;font-size:14px;}
.story-secondary-card{padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);}
.story-secondary-card span{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.64);font-weight:900;}
.story-secondary-card b{display:block;font-size:28px;margin:6px 0;color:#fff;}
.story-secondary-card div{font-size:13px;line-height:1.6;color:rgba(235,241,255,.78);}
.story-character-column{display:flex;flex-direction:column;gap:12px;margin-top:12px;}
.story-portrait-card{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:20px;background:rgba(4,8,18,.40);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(10px);}
.story-portrait-orb{width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg, var(--story-accent), var(--story-secondary));display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(0,0,0,.26);flex:0 0 auto;}
.story-portrait-orb span{font-size:22px;font-weight:900;color:#fff;}
.story-portrait-name{font-size:18px;font-weight:900;color:#fff;}
.story-portrait-role{font-size:12px;font-weight:800;color:#d9e4ff;text-transform:uppercase;letter-spacing:.8px;margin-top:2px;}
.story-portrait-note{font-size:13px;line-height:1.5;color:rgba(226,235,255,.76);margin-top:6px;}
.story-section-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;}
.chapter-grid.cinematic{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.chapter-card.visual{padding:0;overflow:hidden;background:linear-gradient(145deg, rgba(255,255,255,.04), rgba(8,12,24,.70));}
.chapter-cover-art{position:relative;padding:16px;min-height:176px;display:flex;flex-direction:column;justify-content:space-between;background:var(--story-backdrop);}
.chapter-cover-top,.chapter-cover-bottom{position:relative;z-index:1;display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap;}
.chapter-character-mini{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(4,8,18,.40);border:1px solid rgba(255,255,255,.10);}
.chapter-character-mini span{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg, var(--story-accent), var(--story-secondary));font-size:11px;font-weight:900;color:#fff;}
.chapter-character-mini b{font-size:12px;color:#fff;margin:0;}
.chapter-body-copy{padding:16px;}
.chapter-body-copy b{font-size:22px;line-height:1.2;}
.chapter-body-copy small{min-height:72px;font-size:13px;line-height:1.6;}
.story-scene-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:18px;margin-top:14px;}
.story-stage-card{position:relative;overflow:hidden;border-radius:26px;padding:22px;background:var(--story-backdrop);min-height:440px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid color-mix(in srgb, var(--story-accent) 36%, rgba(255,255,255,.08));box-shadow:0 24px 56px rgba(0,0,0,.28);}
.story-stage-head{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.story-stage-title{font-size:34px;font-weight:900;color:#fff;line-height:1.05;max-width:9ch;margin-top:16px;}
.story-stage-copy{max-width:92%;margin-top:10px;color:rgba(236,242,255,.88);line-height:1.75;font-size:15px;}
.story-dialogue-frame{display:flex;align-items:flex-end;gap:12px;margin-top:24px;}
.story-dialogue-avatar{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, var(--story-accent), var(--story-secondary));font-size:20px;font-weight:900;color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.26);}
.story-dialogue-bubble{padding:16px 18px;border-radius:22px 22px 22px 8px;background:rgba(4,8,18,.44);border:1px solid rgba(255,255,255,.12);max-width:520px;}
.story-dialogue-bubble b{display:block;color:#fff;font-size:16px;}
.story-dialogue-bubble span{display:block;color:#cfdcff;font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;margin-top:2px;}
.story-dialogue-bubble p{margin:10px 0 0;color:rgba(236,242,255,.84);line-height:1.7;font-size:14px;}
.story-stage-footer{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:18px;}
.story-dossier-card{padding:20px;border-radius:26px;background:linear-gradient(180deg, rgba(14,17,28,.95), rgba(10,13,22,.88));border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 46px rgba(0,0,0,.24);display:flex;flex-direction:column;gap:14px;}
.story-dossier-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;}
.story-dossier-top h4{margin:6px 0 0;font-size:24px;line-height:1.25;color:#fff;max-width:420px;}
.story-choice-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.story-option-btn{min-height:74px;display:flex;align-items:center;justify-content:flex-start;text-align:left;padding:16px 18px;border-radius:18px;}
.story-note.compact{margin-top:0;}
.cinematic-result{box-shadow:0 14px 30px rgba(0,0,0,.16);}
.story-inline-actions{margin-top:0;}
.story-choice-selected{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#dbe6ff;font-size:13px;}
.evidence-desk-hero{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px;}
.evidence-board-grid.cinematic{position:relative;}
.evidence-panel.desk{background:linear-gradient(180deg, rgba(33,25,12,.36), rgba(15,12,9,.72));border-color:rgba(209,163,94,.16);box-shadow:0 16px 38px rgba(0,0,0,.22);}
.evidence-clue-card.cinematic{background:linear-gradient(180deg, rgba(255,248,223,.92), rgba(232,222,195,.95));border-color:rgba(166,128,64,.24);color:#1d1509;}
.evidence-clue-card.cinematic .learn-muted,.evidence-clue-card.cinematic b{color:#24180d;}
.evidence-clue-card.cinematic .evidence-tag{background:rgba(36,24,13,.08);color:#24180d;}
.evidence-panel.desk .evidence-link-item{background:rgba(255,255,255,.03);}
.desk-note{background:rgba(255,248,223,.10);border-color:rgba(209,163,94,.16);}
@media (max-width: 980px){
  .story-cinematic-hero,.story-scene-layout{grid-template-columns:1fr;}
  .story-headline{font-size:34px;max-width:none;}
}
@media (max-width: 720px){
  .story-quick-stats{grid-template-columns:1fr 1fr;}
  .story-choice-panel,.chapter-grid.cinematic{grid-template-columns:1fr;}
  .story-stage-title{font-size:30px;max-width:none;}
  .story-dossier-top h4{font-size:22px;}
}


.story-file-reveal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;background:rgba(2,4,10,0.18);backdrop-filter:blur(2px);opacity:0;z-index:2500;transition:opacity .28s ease;}
.story-file-reveal.visible{opacity:1;}
.story-file-reveal-card{width:min(92vw,760px);border-radius:30px;overflow:hidden;background:linear-gradient(180deg, rgba(9,12,20,.98), rgba(9,12,20,.90));border:1px solid rgba(255,255,255,.10);box-shadow:0 30px 80px rgba(0,0,0,.45);transform:translateY(26px) scale(.97);transition:transform .38s ease;position:relative;}
.story-file-reveal.visible .story-file-reveal-card{transform:translateY(0) scale(1);}
.story-file-reveal-art{height:240px;background-size:cover;background-position:center;position:relative;}
.story-file-reveal-art::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(4,8,18,.35));}
.story-file-reveal-copy{padding:20px 22px 24px;position:relative;}
.story-file-reveal-copy::before{content:'';position:absolute;left:22px;right:22px;top:0;height:1px;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--story-accent, #7c9bff) 60%, white 20%), transparent);}
.story-file-reveal-kicker{font-size:11px;letter-spacing:2px;font-weight:900;text-transform:uppercase;color:#cfe0ff;opacity:.8;margin-bottom:10px;}
.story-file-reveal-copy h4{margin:0;color:#fff;font-size:28px;line-height:1.15;}
.story-file-reveal-copy p{margin:10px 0 0;color:rgba(233,240,255,.78);font-size:14px;}
.story-scene-poster{height:220px;border-radius:18px;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:space-between;padding:16px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 -80px 120px rgba(2,6,16,.30);}
.story-scene-poster::after,.story-stage-poster::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));pointer-events:none;}
.story-scene-poster-stamp,.story-stage-poster-stamp,.chapter-cover-poster-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(4,8,18,.55);border:1px solid rgba(255,255,255,.12);color:#f5f8ff;font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;position:relative;z-index:1;width:max-content;}
.story-scene-poster-caption{margin-top:auto;align-self:flex-start;padding:10px 14px;border-radius:18px;background:rgba(4,8,18,.48);border:1px solid rgba(255,255,255,.10);color:#f7fbff;font-size:13px;font-weight:700;position:relative;z-index:1;backdrop-filter:blur(4px);}
.story-portrait-media{width:92px;height:116px;border-radius:22px;overflow:hidden;flex:0 0 auto;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);box-shadow:0 12px 30px rgba(0,0,0,.24);}
.story-portrait-media img{width:100%;height:100%;object-fit:cover;display:block;}
.chapter-cover-art{background-size:cover !important;background-position:center !important;}
.chapter-cover-art::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(3,6,15,.32));}
.chapter-cover-poster-badge{position:relative;z-index:1;margin-bottom:auto;}
.chapter-card.visual.active{transform:translateY(-2px);box-shadow:0 20px 42px rgba(0,0,0,.28);}
.story-stage-poster{height:208px;border-radius:20px;background-size:cover;background-position:center;margin-bottom:16px;display:flex;align-items:flex-start;padding:16px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.10);}
.story-dialogue-avatar.rich{padding:0;overflow:hidden;background:rgba(255,255,255,.06);}
.story-dialogue-avatar.rich img{width:100%;height:100%;object-fit:cover;display:block;}
.story-dossier-card{position:relative;overflow:hidden;}
.story-dossier-card::before{content:'';position:absolute;right:-40px;top:-40px;width:200px;height:200px;background:radial-gradient(circle, rgba(124,155,255,.10), transparent 64%);pointer-events:none;}
.story-cinematic-hero::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0 1px, transparent 1px 5px);mix-blend-mode:screen;opacity:.18;pointer-events:none;}
.story-stage-card::before{content:'';position:absolute;right:20px;bottom:20px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle, color-mix(in srgb, var(--story-secondary) 18%, transparent) 0, transparent 70%);pointer-events:none;}
@media (max-width: 720px){
  .story-file-reveal-art{height:180px;}
  .story-file-reveal-copy h4{font-size:22px;}
  .story-scene-poster,.story-stage-poster{height:180px;}
  .story-portrait-media{width:78px;height:98px;}
}

/* story cinematic upgrade v3 */
.story-character-column{display:grid;gap:12px;}
.story-portrait-card.support{background:rgba(8,14,28,.46);}
.story-portrait-card.speaker{width:100%;text-align:left;cursor:pointer;transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;}
.story-portrait-card.speaker:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18);}
.story-portrait-card.speaker.active{border-color:color-mix(in srgb, var(--story-accent, #7c9bff) 68%, white 12%);box-shadow:0 18px 36px rgba(2,8,20,.36), 0 0 0 1px color-mix(in srgb, var(--story-accent, #7c9bff) 30%, transparent);background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(4,8,18,.48));}
.story-speaker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;}
.story-dialogue-frame.cinematic{align-items:stretch;margin-top:16px;}
.story-dialogue-bubble.cinematic{flex:1;position:relative;overflow:hidden;}
.story-dialogue-bubble.cinematic::after{content:'';position:absolute;inset:auto -10% -40% -10%;height:120px;background:radial-gradient(circle, color-mix(in srgb, var(--story-accent, #7c9bff) 22%, transparent) 0%, transparent 70%);opacity:.28;pointer-events:none;}
.story-dialogue-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:14px;}
.story-dialogue-index{font-size:12px;font-weight:900;letter-spacing:1px;color:#d8e3ff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);padding:8px 12px;border-radius:999px;}
.story-sound-banner{position:relative;overflow:hidden;border-radius:20px;padding:14px 16px;margin:14px 0 12px;background:linear-gradient(135deg, rgba(6,12,24,.82), rgba(11,19,36,.64));border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 30px rgba(0,0,0,.22);}
.story-sound-banner.compact{margin-top:14px;padding:12px 14px;border-radius:18px;}
.story-sound-banner::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg, color-mix(in srgb, var(--story-accent, #7c9bff) 18%, transparent), transparent 32%, color-mix(in srgb, var(--story-secondary, #2ee6d6) 16%, transparent));pointer-events:none;}
.story-sound-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;position:relative;z-index:1;margin-bottom:10px;}
.story-sound-meta b{font-size:13px;color:#fff;letter-spacing:.6px;text-transform:uppercase;}
.story-sound-meta span{font-size:11px;font-weight:800;color:#cfe0ff;text-transform:uppercase;letter-spacing:1px;opacity:.8;}
.story-eq-bars{display:flex;align-items:flex-end;gap:6px;height:42px;position:relative;z-index:1;}
.story-eq-bars span{display:block;flex:1;min-width:6px;border-radius:999px 999px 4px 4px;background:linear-gradient(180deg, color-mix(in srgb, var(--story-secondary, #2ee6d6) 92%, white 8%), color-mix(in srgb, var(--story-accent, #7c9bff) 92%, #06111d 8%));box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 10px 20px rgba(0,0,0,.18);animation:storyEqPulse var(--story-tempo, 1.4s) ease-in-out infinite;height:28%;transform-origin:bottom center;}
.story-wave-line{height:24px;margin-top:10px;border-radius:999px;background:
  radial-gradient(circle at 8px 50%, color-mix(in srgb, var(--story-accent, #7c9bff) 68%, white 12%) 0 2px, transparent 3px),
  repeating-linear-gradient(90deg, transparent 0 10px, rgba(255,255,255,.05) 10px 11px),
  linear-gradient(90deg, color-mix(in srgb, var(--story-accent, #7c9bff) 18%, transparent), color-mix(in srgb, var(--story-secondary, #2ee6d6) 26%, transparent), color-mix(in srgb, var(--story-accent, #7c9bff) 18%, transparent));
  background-size:24px 100%, auto, 240% 100%;
  background-position:0 0,0 0,0 0;
  animation:storyWaveMove calc(var(--story-tempo, 1.4s) * 3) linear infinite;
  opacity:.82;
}
@keyframes storyEqPulse{0%,100%{transform:scaleY(.42);opacity:.66}25%{transform:scaleY(1)}50%{transform:scaleY(.62)}75%{transform:scaleY(.86)}}
@keyframes storyWaveMove{0%{background-position:0 0,0 0,0 0}100%{background-position:24px 0,0 0,240px 0}}
.detective-desk-surface{position:relative;padding:18px;border-radius:28px;background:
  radial-gradient(circle at 12% 16%, rgba(255,242,214,.18), transparent 18%),
  radial-gradient(circle at 84% 14%, rgba(255,228,163,.14), transparent 16%),
  radial-gradient(circle at 24% 78%, rgba(0,0,0,.16), transparent 20%),
  linear-gradient(180deg, rgba(115,82,48,.22), rgba(57,41,26,.36)),
  repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 3px, rgba(0,0,0,.03) 3px 8px),
  linear-gradient(135deg, #2f2318 0%, #20160f 34%, #3b2c1d 67%, #18120d 100%);
  border:1px solid rgba(214,171,102,.16);
  box-shadow:0 30px 70px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06);
}
.detective-desk-surface::before{content:'';position:absolute;inset:18px;border-radius:22px;border:1px dashed rgba(255,236,204,.08);pointer-events:none;}
.evidence-panel.desk{position:relative;background:
  linear-gradient(180deg, rgba(251,241,220,.10), rgba(39,29,18,.74)),
  linear-gradient(135deg, rgba(39,29,18,.68), rgba(15,12,9,.74));
  border-color:rgba(209,163,94,.18);
}
.evidence-panel.desk::before{content:'';position:absolute;top:14px;right:18px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%, #ffe4a6 0 25%, #8c5a22 35% 100%);box-shadow:0 2px 8px rgba(0,0,0,.24);opacity:.9;}
.evidence-board-pinboard{background:
  linear-gradient(180deg, rgba(247,236,214,.12), rgba(28,22,15,.78)),
  radial-gradient(circle at 10% 16%, rgba(255,255,255,.08), transparent 18%),
  repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 2px, transparent 2px 14px),
  linear-gradient(135deg, #39281c 0%, #201710 100%) !important;
}
.evidence-clue-card.cinematic{background:linear-gradient(180deg, rgba(255,247,229,.10), rgba(21,17,13,.72));border:1px solid rgba(230,198,142,.16);box-shadow:0 18px 38px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);}
.evidence-thread{background:linear-gradient(90deg, rgba(214,64,64,.26), rgba(214,64,64,.78), rgba(214,64,64,.26));height:2px;border-radius:999px;position:relative;overflow:visible;}
.evidence-thread::before,.evidence-thread::after{content:'';position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:#d8963a;transform:translateY(-50%);box-shadow:0 2px 6px rgba(0,0,0,.2);}
.evidence-thread::before{left:12px;}.evidence-thread::after{right:12px;}
#scr-evidence-board{background:
  radial-gradient(circle at 10% 12%, rgba(255,236,186,.06), transparent 18%),
  linear-gradient(180deg, rgba(8,11,18,.92), rgba(14,10,7,.96));}
@media (max-width: 820px){
  .story-speaker-grid{grid-template-columns:1fr;}
  .story-dialogue-controls{justify-content:flex-start;}
}


/* story mobile layout hotfix */
@media (max-width: 1400px), (hover: none) and (pointer: coarse) {
  .story-cinematic-hero,
  .story-scene-layout,
  .evidence-board-grid.cinematic,
  .story-ending-grid,
  .story-choice-grid,
  .room-dossier-grid,
  .room-dossier-grid,
  .evidence-board-grid,
  .story-dossier-grid {
    grid-template-columns: 1fr !important;
  }
  .story-cinematic-copy,
  .story-cinematic-side,
  .story-stage-card,
  .story-dossier-card {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  .story-mode-shell {
    gap: 14px;
  }
  .story-cinematic-hero,
  .story-stage-card,
  .story-dossier-card,
  .detective-desk-surface {
    border-radius: 22px;
  }
  .story-cinematic-hero {
    padding: 16px;
    gap: 14px;
  }
  .story-cinematic-copy,
  .story-cinematic-side {
    width: 100%;
  }
  .story-headline,
  .story-stage-title,
  .story-scene-title {
    max-width: none;
    word-break: break-word;
  }
  .story-headline { font-size: 28px; }
  .story-stage-title { font-size: 26px; }
  .story-scene-title { font-size: 22px; }
  .story-subline,
  .story-stage-copy,
  .story-scene-text,
  .story-portrait-note,
  .story-secondary-card div {
    max-width: none;
    font-size: 14px;
    line-height: 1.6;
  }
  .story-meta-ribbon,
  .story-kicker-row,
  .story-stage-head,
  .story-stage-footer,
  .story-dialogue-controls,
  .story-dossier-top,
  .evidence-desk-hero {
    flex-direction: column;
    align-items: stretch;
  }
  .story-meta-ribbon span,
  .story-status-pill,
  .chapter-location,
  .story-ambient-line,
  .story-scene-label {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  .story-quick-stats,
  .story-choice-panel,
  .story-speaker-grid,
  .chapter-grid.cinematic,
  .story-ending-grid,
  .story-choice-grid {
    grid-template-columns: 1fr !important;
  }
  .story-stat-box b { font-size: 16px; }
  .story-hero-actions,
  .learn-actions.story-hero-actions,
  .story-inline-actions,
  .story-dossier-top .btn,
  .story-dialogue-controls .mini-btn,
  .story-choice-panel .story-option-btn {
    width: 100%;
  }
  .story-dialogue-frame,
  .story-dialogue-frame.cinematic {
    flex-direction: column;
    align-items: stretch;
  }
  .story-dialogue-avatar,
  .story-dialogue-avatar.rich {
    width: 56px;
    height: 56px;
    align-self: flex-start;
  }
  .story-dialogue-bubble,
  .story-dialogue-bubble.cinematic {
    max-width: none;
  }
  .story-portrait-card,
  .story-portrait-card.speaker {
    width: 100%;
    min-width: 0;
    padding: 14px;
  }
  .story-portrait-media {
    width: 72px;
    height: 92px;
    border-radius: 18px;
  }
  .story-scene-poster,
  .story-stage-poster,
  .story-file-reveal-art {
    height: 160px;
  }
  .story-file-reveal-copy h4 { font-size: 22px; }
  .story-file-reveal-copy,
  .story-scene-window-body,
  .story-dossier-card,
  .story-stage-card,
  .detective-desk-surface {
    padding: 16px;
  }
  .story-sound-banner,
  .story-sound-banner.compact,
  .story-note,
  .story-secondary-card,
  .evidence-panel,
  .evidence-clue-card,
  .evidence-link-item {
    border-radius: 16px;
  }
  .evidence-panel,
  .evidence-clue-card,
  .detective-desk-surface,
  .story-stage-card,
  .story-dossier-card,
  .story-cinematic-hero {
    overflow: hidden;
  }
  .story-choice-selected {
    word-break: break-word;
  }
}


/* story mobile rebuild v5 */
.story-mobile-hero,.story-mobile-stage{display:flex;flex-direction:column;gap:14px;background:linear-gradient(180deg, rgba(8,13,25,.96), rgba(9,18,38,.98));border:1px solid rgba(255,255,255,.08);border-radius:22px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.24);}
.story-mobile-cover,.story-mobile-stage-art{height:190px;background-size:cover !important;background-position:center !important;position:relative;padding:14px;display:flex;flex-direction:column;justify-content:space-between;}
.story-mobile-cover::after,.story-mobile-stage-art::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(3,6,14,.56));pointer-events:none;}
.story-mobile-cover-badge,.story-mobile-cover-meta{position:relative;z-index:1;align-self:flex-start;display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(5,10,20,.58);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;}
.story-mobile-copy,.story-mobile-stage-body{padding:0 16px 16px;display:flex;flex-direction:column;gap:12px;}
.story-mobile-kicker{font-size:11px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;color:#b9cfff;opacity:.9;}
.story-mobile-copy h3,.story-mobile-stage-body h3{margin:0;color:#fff;font-size:28px;line-height:1.1;word-break:break-word;}
.story-mobile-copy p,.story-mobile-scene{margin:0;color:rgba(235,241,255,.82);font-size:14px;line-height:1.65;}
.story-mobile-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.story-mobile-stat{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);min-width:0;}
.story-mobile-stat span{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#aebcde;font-weight:900;}
.story-mobile-stat b{display:block;margin-top:6px;color:#fff;font-size:16px;line-height:1.25;word-break:break-word;}
.story-mobile-actions,.story-inline-actions.mobile{display:flex;flex-direction:column;gap:10px;}
.story-mobile-actions .btn,.story-inline-actions.mobile .mini-btn,.story-inline-actions.mobile .btn{width:100%;}
.story-mobile-portraits{display:grid;grid-template-columns:1fr;gap:10px;}
.story-portrait-card.compact{padding:12px;border-radius:18px;align-items:center;}
.story-portrait-card.compact .story-portrait-media{width:64px;height:82px;border-radius:16px;}
.story-mobile-stage-top{display:flex;flex-wrap:wrap;gap:8px;}
.story-mobile-task{display:flex;flex-direction:column;gap:12px;margin-top:6px;}
.story-mobile-task-kicker{font-size:11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:#b9cfff;}
.story-choice-panel.mobile{display:grid;grid-template-columns:1fr;gap:10px;}
.story-choice-panel.mobile .story-option-btn{width:100%;min-height:56px;}
@media (max-width: 860px){
  #ai-chat-section,#word-day-section{display:none !important;}
  .story-mode-shell{display:flex;flex-direction:column;gap:14px;}
  .story-mode-shell > .learn-card{padding:14px;border-radius:18px;}
  .story-section-head{display:block;}
  .story-section-head .learn-score{margin-top:10px;display:inline-flex;}
  .chapter-grid.cinematic{grid-template-columns:1fr !important;}
  .chapter-card.visual{display:block;}
  .chapter-cover-art{min-height:180px;}
  .chapter-body-copy{padding:14px;}
}


/* tower climbing */
.tower-hub-card{background:linear-gradient(180deg, rgba(12,17,33,.95), rgba(10,22,50,.98)); border-color:rgba(116,140,255,.22);}
.tower-shell{display:flex;flex-direction:column;gap:16px;}
.tower-hero{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;}
.tower-kicker{font-size:11px;font-weight:900;letter-spacing:1.8px;text-transform:uppercase;color:#9bb4ff;margin-bottom:8px;}
.tower-hero h3{margin:0;color:#fff;font-size:28px;}
.tower-hero p{margin:10px 0 0;color:rgba(232,239,255,.8);line-height:1.6;max-width:720px;}
.tower-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:min(320px,100%);}
.tower-stat{padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);} 
.tower-stat span{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#a9b8de;font-weight:900;}
.tower-stat b{display:block;margin-top:6px;color:#fff;font-size:20px;}
.tower-progress{height:12px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;}
.tower-progress span{display:block;height:100%;background:linear-gradient(90deg,#667eea,#00d4ff,#7cf29a);border-radius:inherit;}
.tower-path{display:grid;grid-template-columns:1fr;gap:12px;position:relative;}
.tower-path::before{content:'';position:absolute;left:20px;top:18px;bottom:18px;width:4px;border-radius:999px;background:linear-gradient(180deg, rgba(103,126,234,.9), rgba(0,212,255,.25));}
.tower-floor-card,.tower-future-card{position:relative;margin-left:34px;padding:16px 16px 16px 18px;border-radius:20px;background:linear-gradient(180deg, rgba(18,27,51,.96), rgba(8,16,34,.98));border:1px solid rgba(255,255,255,.08);color:#fff;text-align:left;box-shadow:0 12px 32px rgba(0,0,0,.18);} 
.tower-floor-card::before,.tower-future-card::before{content:'';position:absolute;left:-26px;top:26px;width:16px;height:16px;border-radius:50%;background:#6f8cff;box-shadow:0 0 0 6px rgba(111,140,255,.14);} 
.tower-floor-card.locked{opacity:.56;filter:saturate(.7);} 
.tower-floor-card.done::before{background:#40d98a;box-shadow:0 0 0 6px rgba(64,217,138,.18);} 
.tower-floor-top{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px;}
.tower-floor-badge{display:inline-flex;padding:7px 10px;border-radius:999px;background:rgba(103,126,234,.16);border:1px solid rgba(103,126,234,.3);font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:#dce6ff;}
.tower-floor-no{font-size:12px;color:#aab7d9;font-weight:800;letter-spacing:1px;text-transform:uppercase;}
.tower-floor-card b{display:block;font-size:20px;margin-bottom:4px;}
.tower-floor-type{color:rgba(233,240,255,.74);line-height:1.5;}
.tower-floor-foot{margin-top:10px;font-size:13px;color:#cfe1ff;font-weight:800;}
.tower-modal{position:fixed;inset:0;background:rgba(3,6,16,.76);backdrop-filter:blur(10px);z-index:2300;display:flex;align-items:flex-end;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:.25s ease;}
.tower-modal.visible{opacity:1;pointer-events:auto;}
.tower-modal-card{width:min(680px,100%);background:linear-gradient(180deg,#0f1932,#0a1226);border:1px solid rgba(255,255,255,.08);border-radius:28px;padding:18px;box-shadow:0 28px 70px rgba(0,0,0,.4);} 
.tower-modal-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.tower-modal-top h3{margin:8px 0 6px;color:#fff;font-size:28px;}
.tower-modal-top p{margin:0;color:#afbddf;}
.tower-close{width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;font-size:28px;cursor:pointer;}
.tower-chip{display:inline-flex;padding:7px 10px;border-radius:999px;background:rgba(255,86,135,.14);border:1px solid rgba(255,86,135,.26);color:#ffd9e5;font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;}
.tower-sentence-card{margin-top:14px;padding:16px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);} 
.tower-sentence-label{font-size:11px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:#9bb4ff;}
.tower-sentence{margin-top:8px;font-size:24px;font-weight:800;color:#fff;line-height:1.3;}
.story-pronunciation{margin-top:8px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.12);font-size:13px;line-height:1.55;color:#dbe6ff;}
.story-pronunciation span{display:block;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#9bb4ff;font-weight:900;margin-bottom:4px;}
.tower-question{margin-top:16px;font-size:16px;font-weight:700;color:#fff;line-height:1.5;}
.tower-options{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px;}
.tower-option{border:none;border-radius:18px;padding:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#fff;text-align:left;font-weight:700;cursor:pointer;}
.tower-option.correct{background:rgba(52,199,89,.18);border-color:rgba(52,199,89,.38);} .tower-option.wrong{background:rgba(255,59,48,.18);border-color:rgba(255,59,48,.38);} 
.tower-helper{margin-top:12px;color:#9db0d6;font-size:13px;line-height:1.5;}
.tower-result{margin-top:14px;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.08);} 
.tower-result.success{background:rgba(52,199,89,.12);}.tower-result.error{background:rgba(255,59,48,.12);} 
.tower-reward{margin-top:10px;color:#fff;font-weight:700;}
.tower-result-actions{margin-top:14px;display:flex;justify-content:flex-end;}
@media (max-width:860px){
  .tower-hero h3{font-size:24px;}
  .tower-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tower-floor-card,.tower-future-card{margin-left:26px;}
  .tower-path::before{left:14px;}
  .tower-floor-card::before,.tower-future-card::before{left:-20px;}
  .tower-modal{padding:10px;align-items:flex-end;}
  .tower-modal-card{padding:16px;border-radius:22px;max-height:92vh;overflow:auto;}
  .tower-sentence{font-size:22px;}
}


.tower-floor-card.locked{position:relative;}
.tower-floor-card.locked::after{content:'🔒'; position:absolute; right:16px; bottom:14px; font-size:18px; opacity:.92;}
.tower-floor-card.unlocked.checkpoint,.tower-floor-card.done.checkpoint{border-color:rgba(255,205,84,.34); background:linear-gradient(180deg, rgba(48,34,12,.96), rgba(18,14,8,.98));}
.tower-floor-card.checkpoint .tower-floor-badge{background:rgba(255,205,84,.14); border-color:rgba(255,205,84,.34); color:#ffe7a7;}
.tower-helper strong{color:#fff;}
.story-pronunciation{margin-top:10px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:#dfe8ff; font-size:13px; line-height:1.55;}
.story-pronunciation span{display:block; font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:#9fb0d9; margin-bottom:4px; font-weight:900;}
@media (max-width: 720px){
  #admin-tower-list .admin-mini-row, #admin-story-list .admin-mini-row{flex-direction:column; align-items:flex-start;}
}

.tower-level-up{display:inline-flex;align-self:flex-start;margin-bottom:10px;padding:6px 12px;border-radius:999px;background:linear-gradient(135deg,rgba(255,215,116,.2),rgba(124,155,255,.18));border:1px solid rgba(255,215,116,.38);color:#fff0c4;font-size:11px;font-weight:900;letter-spacing:1.3px;text-transform:uppercase;box-shadow:0 8px 20px rgba(0,0,0,.18);}
.tower-floor-card.level-transition{border-color:rgba(255,215,116,.38);box-shadow:0 16px 34px rgba(255,215,116,.10),0 10px 24px rgba(0,0,0,.24);}
.tower-cefr-inline,.tower-cefr-chip{display:inline-flex;align-items:center;justify-content:center;padding:5px 10px;border-radius:999px;background:rgba(70,227,183,.12);border:1px solid rgba(70,227,183,.24);font-size:11px;font-weight:900;letter-spacing:1px;color:#cffff1;text-transform:uppercase;}
.tower-chip-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:6px;}
.tower-level-up-chip{display:inline-flex;margin-bottom:10px;padding:7px 12px;border-radius:999px;background:rgba(255,215,116,.16);border:1px solid rgba(255,215,116,.34);color:#ffe7a7;font-size:11px;font-weight:900;letter-spacing:1.25px;text-transform:uppercase;}


.tower-floor-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.tower-floor-meta span{font-size:11px;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);color:#dfe8ff;}
.tower-activity-chip,.tower-grammar-chip{font-size:12px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);color:#f5f8ff;}
.tower-grammar-chip{background:rgba(100,170,255,.14);border-color:rgba(100,170,255,.25);}
.tower-step-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#9fb6ff;margin-bottom:8px;}
.tower-lesson-step h4{margin:0 0 8px;font-size:18px;}
.tower-lesson-step p{margin:0;line-height:1.65;color:#d8e0f5;}
.tower-step-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;}
.tower-modal-actions{display:flex;gap:10px;align-items:flex-start;}
.tower-step-counter{font-size:12px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.06);color:#dfe8ff;margin-top:6px;}
@media (max-width:768px){
  .tower-modal-actions{align-items:center;}
  .tower-chip-row{flex-wrap:wrap;}
  .tower-step-nav{flex-direction:column;}
  .tower-step-nav .btn{width:100%;}
}


.tower-checkpoint-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:14px;border-radius:22px;background:linear-gradient(135deg, rgba(255,205,84,.18), rgba(103,126,234,.14));border:1px solid rgba(255,205,84,.32);box-shadow:0 12px 28px rgba(255,205,84,.10);} 
.tower-checkpoint-hero b{display:block;color:#fff7d1;font-size:20px;line-height:1.2;}
.tower-checkpoint-hero span{display:block;color:#f5eed0;line-height:1.55;font-size:13px;max-width:420px;}
.tower-checkpoint-kicker{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);font-size:10px;font-weight:900;letter-spacing:1.3px;text-transform:uppercase;color:#ffe7a7;margin-bottom:8px;}
@media (max-width: 768px){ .tower-checkpoint-hero{flex-direction:column;align-items:flex-start;} }

.tower-theme-chip{display:inline-flex;align-items:center;justify-content:center;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#f6f8ff;font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;}
.tower-checkpoint-hero.block-final{background:linear-gradient(135deg, rgba(255,178,73,.24), rgba(255,94,98,.14), rgba(103,126,234,.16));border-color:rgba(255,191,96,.42);box-shadow:0 16px 40px rgba(255,163,61,.12);}
.tower-floor-card.checkpoint.level-transition{box-shadow:0 18px 38px rgba(255,215,116,.12),0 10px 24px rgba(0,0,0,.24);}
.tower-floor-card .tower-floor-meta span:last-child{background:rgba(255,191,96,.10);border-color:rgba(255,191,96,.18);}


.tower-gate-card{position:relative;margin-left:34px;padding:18px 18px 18px 18px;border-radius:24px;border:1px solid rgba(255,255,255,.12);color:#fff;overflow:hidden;}
.tower-gate-card::before{content:'';position:absolute;left:-26px;top:30px;width:18px;height:18px;border-radius:50%;background:#ffd773;box-shadow:0 0 0 7px rgba(255,215,115,.14);}
.tower-gate-kicker{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);font-size:10px;font-weight:900;letter-spacing:1.3px;text-transform:uppercase;color:#fff2c4;margin-bottom:8px;}
.tower-gate-card b{display:block;font-size:24px;line-height:1.2;margin-bottom:6px;}
.tower-gate-card span{display:block;max-width:560px;line-height:1.6;color:rgba(244,248,255,.86);}
.tower-floor-card,.tower-future-card,.tower-gate-card,.tower-modal-card,.tower-checkpoint-hero,.tower-hero{background-blend-mode:screen,normal;}
.tower-floor-card{overflow:hidden;}
.tower-floor-card::after,.tower-gate-card::after,.tower-future-card::after,.tower-modal-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg, rgba(255,255,255,.10), transparent 28%, transparent 72%, rgba(255,255,255,.06));pointer-events:none;}
.tower-hero{padding:18px;border-radius:26px;border:1px solid rgba(255,255,255,.08);}
.tower-reward-overlay{position:fixed;inset:0;background:rgba(4,7,18,.78);backdrop-filter:blur(10px);z-index:2400;display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;pointer-events:none;transition:.22s ease;}
.tower-reward-overlay.visible{opacity:1;pointer-events:auto;}
.tower-reward-card{width:min(620px,100%);border-radius:28px;padding:22px;border:1px solid rgba(255,255,255,.12);position:relative;overflow:hidden;color:#fff;}
.tower-reward-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg, rgba(255,255,255,.14), transparent 28%, transparent 70%, rgba(255,255,255,.08));pointer-events:none;}
.tower-reward-kicker{display:inline-flex;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font-size:10px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:#fff0c4;margin-bottom:10px;}
.tower-reward-card h3{margin:0 0 8px;font-size:30px;line-height:1.15;max-width:540px;}
.tower-reward-card p{margin:0;color:rgba(241,247,255,.88);line-height:1.65;max-width:540px;}
.tower-reward-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 16px;}
.tower-reward-metrics div{padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);} 
.tower-reward-metrics span{display:block;font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:#dbe7ff;font-weight:900;}
.tower-reward-metrics b{display:block;margin-top:6px;font-size:18px;color:#fff;}
.tower-reward-actions{display:flex;justify-content:flex-end;gap:10px;}
.tower-reward-crown{width:68px;height:68px;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:32px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);box-shadow:0 14px 30px rgba(0,0,0,.16);margin-bottom:12px;}
.tower-special-badge-banner{margin:18px 0 8px;padding:14px 16px;border-radius:22px;background:linear-gradient(135deg, rgba(255,215,115,.20), rgba(255,122,89,.16));border:1px solid rgba(255,215,115,.34);box-shadow:0 14px 28px rgba(255,170,62,.10);}
.tower-special-badge-banner span{display:block;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#fff2c4;font-weight:900;margin-bottom:6px;}
.tower-special-badge-banner b{display:block;font-size:18px;line-height:1.35;color:#fff;}
.tower-special-badge-chip{display:inline-flex;align-self:flex-start;margin-bottom:10px;padding:6px 12px;border-radius:999px;background:rgba(255,215,115,.16);border:1px solid rgba(255,215,115,.34);color:#fff1c8;font-size:10px;font-weight:900;letter-spacing:1.25px;text-transform:uppercase;}
.tower-floor-card.badge-floor{border-color:rgba(255,215,115,.30);box-shadow:0 18px 36px rgba(255,185,72,.10),0 12px 28px rgba(0,0,0,.22);}
.tower-floor-card.badge-floor::before{background:#ffd773;box-shadow:0 0 0 6px rgba(255,215,115,.18);}
@media (max-width: 768px){
  .tower-gate-card b{font-size:21px;}
  .tower-reward-metrics{grid-template-columns:1fr;}
}

.tower-reply-card{margin-top:14px;padding:16px;border-radius:20px;background:rgba(124,155,255,.10);border:1px solid rgba(124,155,255,.24);}
.tower-reply-card .tower-sentence{font-weight:700;}

.story-pron-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap;position:relative;z-index:3;}
.story-pron-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;position:relative;z-index:4;pointer-events:auto;}
.story-pron-text{font-weight:700;letter-spacing:.2px;word-break:break-word;position:relative;z-index:2;}
.story-pron-play{border:none;border-radius:999px;padding:8px 12px;background:rgba(124,155,255,.16);border:1px solid rgba(124,155,255,.28);color:#eef3ff;font-weight:800;font-size:12px;cursor:pointer;position:relative;z-index:5;pointer-events:auto;touch-action:manipulation;}
.story-pron-play.secondary{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);}
.story-pron-play:hover{background:rgba(124,155,255,.24);} 
.word-card-pron{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(124,155,255,.12);border:1px solid rgba(124,155,255,.24);color:#dce6ff;font-weight:800;letter-spacing:.4px;font-size:13px;width:max-content;max-width:100%;}
.learn-word-card{background:linear-gradient(180deg, rgba(18,24,42,.98), rgba(10,14,26,.98));border:1px solid rgba(124,155,255,.18);box-shadow:0 18px 48px rgba(0,0,0,.28);} 
.word-card-example .story-pronunciation{margin-top:12px;}
.word-card-actions .mini-btn[data-word-action="save"]{background:linear-gradient(135deg, rgba(83,227,183,.22), rgba(124,155,255,.16));}
.word-card-actions .mini-btn[data-word-action="listen"]{background:linear-gradient(135deg, rgba(124,155,255,.22), rgba(0,212,255,.16));}
.tower-auto-advance{margin-top:10px;font-size:12px;font-weight:800;opacity:.9;}


.word-card-toptools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.word-card-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:rgba(83,227,183,.12);border:1px solid rgba(83,227,183,.28);color:#dffcf3;font-weight:800;font-size:12px;letter-spacing:.3px;}
.mini-btn-ghost{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.12)!important;}
.word-card-actions .mini-btn[data-word-action="list"]{background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(124,155,255,.12));}
.story-pron-play{box-shadow:0 6px 18px rgba(124,155,255,.18);} 
.tower-question{font-size:16px;font-weight:800;color:#f5f8ff;margin:12px 0 14px;line-height:1.5;}
.tower-options{display:grid;gap:10px;}
.tower-option{width:100%;text-align:left;}


.tower-phone-shell,.tower-slide-shell,.tower-objection-shell{margin-top:14px;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.10);}
.tower-phone-shell{background:linear-gradient(180deg,rgba(18,26,43,.98),rgba(10,15,28,.98));box-shadow:0 18px 40px rgba(0,0,0,.28);}
.tower-phone-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:rgba(124,155,255,.14);font-size:12px;color:#cfe0ff;}
.tower-phone-dot{width:9px;height:9px;border-radius:999px;background:#46e3b7;box-shadow:0 0 12px rgba(70,227,183,.7);display:inline-block;}
.tower-phone-bottom{display:flex;gap:10px;justify-content:center;padding:12px 16px;background:rgba(255,255,255,.03);}
.tower-phone-bottom button,.tower-slide-footer span{border:none;border-radius:999px;padding:9px 14px;background:rgba(255,255,255,.07);color:#eef3ff;font-weight:700;}
.tower-phone-bottom .danger{background:rgba(255,95,120,.18);color:#ffd8df;}
.tower-slide-shell{background:linear-gradient(180deg,rgba(16,19,33,.98),rgba(8,11,22,.98));box-shadow:0 18px 40px rgba(0,0,0,.24);}
.tower-slide-header{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between;gap:12px;color:#eef3ff;}
.tower-slide-tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9fb6ff;}
.tower-slide-body{padding:18px;}
.tower-slide-footer{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 18px;}
.tower-objection-shell{background:linear-gradient(180deg,rgba(37,13,18,.98),rgba(19,10,12,.98));box-shadow:0 18px 44px rgba(80,10,20,.28);}
.tower-objection-top{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07);display:grid;gap:6px;color:#ffe8eb;}
.tower-objection-top span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#ffb8c5;}
.tower-objection-timer{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;}
.tower-objection-timer span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff8a9f,#ffd166,#46e3b7);animation:towerTimerShrink 4.6s linear infinite;}
@keyframes towerTimerShrink{0%{width:100%}100%{width:18%}}
@media (max-width:768px){.tower-phone-top,.tower-slide-header{flex-direction:column;align-items:flex-start}.tower-phone-bottom{flex-wrap:wrap}.tower-slide-footer{padding-bottom:14px}}


.tower-beginner-card{margin:14px 0 10px;border-radius:22px;padding:16px 18px;border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:10px;color:#f5f8ff}.tower-beginner-card b{font-size:18px}.tower-beginner-card p{margin:0;color:rgba(245,248,255,.86);line-height:1.5}.tower-beginner-kicker{font-size:11px;letter-spacing:.18em;font-weight:800;opacity:.78}.tower-beginner-pills{display:flex;gap:8px;flex-wrap:wrap}.tower-beginner-pills span{padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);font-size:12px;font-weight:700}
.tower-floor-card .tower-special-badge-chip{margin-bottom:8px}
.tower-floor-card .tower-level-up{margin-bottom:8px}
@media (max-width: 640px){.tower-beginner-card{padding:14px 14px 15px}.tower-beginner-card b{font-size:16px}.tower-beginner-card p{font-size:13px}}

.tower-floor-card.starter-floor{border-color:rgba(255,255,255,.14);box-shadow:0 16px 36px rgba(0,0,0,.24),0 0 0 1px rgba(255,255,255,.02) inset;}
.tower-floor-card.starter-floor::after{background:linear-gradient(135deg, rgba(255,255,255,.16), transparent 22%, transparent 72%, rgba(255,255,255,.08));}
.tower-floor-icon-wrap{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:18px;background:linear-gradient(135deg,var(--starter-glow,rgba(111,140,255,.16)),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);margin-bottom:12px;}
.tower-floor-icon{width:50px;height:50px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 22px rgba(0,0,0,.16);}
.tower-floor-icon-copy{display:flex;flex-direction:column;gap:4px;min-width:0;}
.tower-floor-icon-copy span{font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#fff;}
.tower-floor-icon-copy small{font-size:12px;color:rgba(233,240,255,.74);line-height:1.4;}
.tower-starter-chip{display:inline-flex;align-items:center;gap:10px;padding:9px 12px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);margin-bottom:12px;color:#fff;}
.tower-starter-chip span{font-size:20px;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.08);}
.tower-starter-chip b{font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
.tower-starter-chip small{display:block;color:#cfe1ff;font-size:12px;}
.tower-reward-card.starter-reward{border-color:rgba(255,255,255,.16);box-shadow:0 22px 60px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.03) inset;}
.tower-starter-ribbon{display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:center;padding:12px 14px;border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.16);margin-bottom:14px;}
.tower-starter-ribbon span{grid-row:1 / span 2;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;background:rgba(255,255,255,.12);}
.tower-starter-ribbon b{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:#fff;}
.tower-starter-ribbon small{color:#d7e6ff;font-size:12px;line-height:1.45;}
@media (max-width:640px){.tower-floor-icon{width:44px;height:44px;font-size:22px}.tower-floor-icon-copy span{font-size:12px}.tower-floor-icon-copy small{font-size:11px}.tower-starter-ribbon{grid-template-columns:auto 1fr}.tower-starter-chip{padding:10px 12px;flex-wrap:wrap}}


.story-pron-beat{margin-top:10px;padding:10px 12px;border-radius:14px;background:rgba(124,155,255,.10);border:1px solid rgba(124,155,255,.18);font-size:12px;font-weight:800;line-height:1.6;color:#d7e3ff;}
.story-pron-coach{margin-top:10px;font-size:12px;line-height:1.6;color:#b8c8ee;font-weight:700;}

.tower-coach-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.tower-coach-card,.tower-roadmap-board,.word-insight-card,.word-card-microtask,.sentence-learning-card{background:linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-sm);}
.tower-coach-card{padding:16px 18px;border-radius:22px;display:flex;flex-direction:column;gap:6px;}
.tower-coach-card span,.tower-roadmap-item span,.word-insight-card span,.word-card-microtask span,.sentence-learning-card span{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:#9fb4ff;font-weight:900;}
.tower-coach-card b,.tower-roadmap-item b{font-size:20px;color:#fff;line-height:1.2;}
.tower-coach-card small,.tower-roadmap-item small,.word-insight-card small,.sentence-learning-card small{font-size:12px;line-height:1.55;color:rgba(232,239,255,.74);}
.tower-roadmap-board{padding:18px;border-radius:24px;display:flex;flex-direction:column;gap:16px;}
.tower-section-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;}
.tower-section-head h4{margin:6px 0 0;font-size:22px;color:#fff;}
.tower-roadmap-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.tower-roadmap-item{padding:16px;border-radius:20px;background:rgba(5,8,18,.38);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:8px;}
.tower-roadmap-note{padding:14px 16px;border-radius:18px;background:rgba(124,155,255,.10);border:1px dashed rgba(124,155,255,.24);line-height:1.6;color:#e7edff;}

.word-card-coach{padding:14px 16px;border-radius:18px;background:rgba(124,155,255,.10);border:1px solid rgba(124,155,255,.18);color:#eef3ff;font-size:14px;font-weight:700;line-height:1.6;}
.word-card-insights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.word-insight-card{padding:14px;border-radius:18px;display:flex;flex-direction:column;gap:6px;}
.word-insight-card b{font-size:18px;line-height:1.25;color:#fff;}
.word-card-microtask{padding:14px 16px;border-radius:18px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(145deg, rgba(83,227,183,.12), rgba(124,155,255,.12));}
.word-card-microtask b{font-size:16px;color:#fff;line-height:1.45;}

.sentence-learning-frame{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0;}
.sentence-learning-card{padding:14px 16px;border-radius:18px;display:flex;flex-direction:column;gap:6px;}
.sentence-learning-card b{font-size:16px;line-height:1.35;color:#fff;}

@media (max-width: 768px){
  .tower-coach-strip,.tower-roadmap-grid,.word-card-insights,.sentence-learning-frame{grid-template-columns:1fr;}
  .tower-section-head h4{font-size:20px;}
}


.story-pronunciation.compact{padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);margin-top:12px;}
.story-pronunciation.compact .story-pron-head{align-items:flex-start;}
.story-pronunciation.compact .story-pron-actions{width:100%;justify-content:flex-start;}
.story-pronunciation.compact .story-pron-text{font-size:13px;line-height:1.55;}
.story-pronunciation.compact .story-pron-coach{font-size:12px;line-height:1.45;margin-top:8px;opacity:.9;}
.word-card-insights.compact{grid-template-columns:repeat(3,minmax(0,1fr));}
.compact-practice-pron{padding:0;background:none;border:none;}
.tower-inline-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.tower-inline-actions .mini-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);}
@media (max-width: 768px){
  .word-card-insights.compact{grid-template-columns:1fr;}
  .story-pronunciation.compact .story-pron-play{flex:1 1 calc(50% - 8px);justify-content:center;text-align:center;}
  .story-pronunciation.compact .story-pron-actions{gap:8px;}
  .story-pronunciation.compact .story-pron-head span{display:block;width:100%;}
  .tower-inline-actions .mini-btn{width:100%;justify-content:center;}
}

.bottom-nav .nav-item span{ font-size:10px; letter-spacing:0.3px; }
.bottom-nav .nav-item i{ font-size:24px; }
.tower-mode-shell{display:grid;gap:18px;margin-bottom:22px;}
.detective-mode-shell{display:grid;gap:18px;}


/* detective premium v9 */
.detective-screen{display:flex;flex-direction:column;gap:18px;}
.detective-premium-intro{margin-bottom:0;}
.detective-cinematic-intro{display:grid;grid-template-columns:minmax(260px,.92fr) minmax(0,1.08fr);gap:18px;padding:18px;border-radius:30px;overflow:hidden;position:relative;background:var(--story-backdrop);border:1px solid color-mix(in srgb, var(--story-accent, #7c9bff) 34%, rgba(255,255,255,.08));box-shadow:0 28px 70px rgba(2,8,20,.38);}
.detective-cinematic-intro::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 0% 0%, rgba(255,255,255,.08), transparent 26%), repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0 1px, transparent 1px 5px);opacity:.72;pointer-events:none;mix-blend-mode:screen;}
.detective-intro-cover{min-height:280px;border-radius:24px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 -120px 140px rgba(2,6,16,.42), 0 20px 40px rgba(0,0,0,.22);}
.detective-intro-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(1,5,14,.62));pointer-events:none;}
.detective-intro-top,.detective-intro-bottom{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.detective-alert-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:rgba(25,8,14,.72);border:1px solid rgba(255,108,132,.42);color:#ffe2e8;font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;box-shadow:0 12px 28px rgba(255,66,103,.18);}
.detective-alert-pill i,.nav-alert-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#ff4267;box-shadow:0 0 0 5px rgba(255,66,103,.18), 0 0 18px rgba(255,66,103,.46);}
.detective-intro-code{display:inline-flex;align-items:center;padding:10px 14px;border-radius:16px;background:rgba(4,8,18,.54);border:1px solid rgba(255,255,255,.12);font-size:24px;font-weight:900;color:#fff;letter-spacing:.3px;}
.detective-intro-meta{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(4,8,18,.54);border:1px solid rgba(255,255,255,.10);font-size:12px;font-weight:800;color:#dfe7ff;}
.detective-intro-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;min-width:0;}
.detective-intro-title{margin:0;color:#fff;font-size:clamp(28px, 4vw, 42px);line-height:1.05;max-width:12ch;}
.detective-intro-text{margin:0;color:rgba(232,239,255,.82);line-height:1.65;font-size:15px;max-width:62ch;}
.detective-case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.detective-case-card{padding:16px;border-radius:20px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(8,12,24,.42));border:1px solid rgba(255,255,255,.09);min-width:0;}
.detective-case-card.accent{border-color:rgba(255,108,132,.28);background:linear-gradient(180deg, rgba(255,108,132,.12), rgba(8,12,24,.42));}
.detective-case-card span{display:block;font-size:11px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase;color:#b9c8ea;}
.detective-case-card b{display:block;margin-top:8px;color:#fff;font-size:20px;line-height:1.18;word-break:break-word;}
.detective-case-card small{display:block;margin-top:6px;color:rgba(228,236,255,.72);line-height:1.5;}
.detective-intro-actions{margin-top:2px;}
.nav-detective{position:relative;}
.nav-alert-dot{position:absolute;top:14px;right:18px;width:8px;height:8px;}

.detective-intro-compact{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:22px;background:linear-gradient(135deg, rgba(8,13,25,.96), rgba(10,18,34,.92));border:1px solid color-mix(in srgb, var(--story-accent, #7c9bff) 28%, rgba(255,255,255,.08));box-shadow:0 18px 42px rgba(2,8,20,.28);}
.detective-intro-compact-copy{display:flex;flex-direction:column;gap:6px;min-width:0;}
.detective-intro-compact-copy b{color:#fff;font-size:18px;line-height:1.2;word-break:break-word;}
.detective-intro-compact-copy small{color:rgba(228,236,255,.74);line-height:1.5;word-break:break-word;}
.detective-intro-compact-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.detective-intro-compact-actions .mini-btn{margin:0;}
#story-puzzle-section,#story-chapters-section,#detective-screen-intro{scroll-margin-top:12px;}
.story-pronunciation{position:relative;z-index:2;pointer-events:auto;}
.story-pronunciation *{pointer-events:auto;}
.story-pron-play:active{transform:translateY(1px);}
.story-pron-play:focus-visible{outline:2px solid rgba(255,255,255,.65);outline-offset:2px;}
@media (max-width: 960px), (hover:none) and (pointer:coarse){
  .detective-intro-compact{flex-direction:column;align-items:stretch;}
  .detective-intro-compact-actions{justify-content:stretch;}
  .detective-intro-compact-actions .mini-btn{width:100%;justify-content:center;}
}
@media (max-width: 960px), (hover:none) and (pointer:coarse){
  .detective-cinematic-intro{grid-template-columns:1fr;padding:14px;border-radius:24px;}
  .detective-intro-cover{min-height:220px;padding:14px;border-radius:20px;}
  .detective-intro-title{max-width:none;font-size:30px;}
  .detective-case-grid{grid-template-columns:1fr;}
  .detective-intro-actions .btn{width:100%;}
  .nav-alert-dot{top:12px;right:16px;}
}
@media (max-width: 960px){
  #scr-detective .story-cinematic-hero,
  #scr-detective .story-scene-layout,
  #scr-detective .evidence-board-grid,
  #scr-detective .story-speaker-grid,
  #scr-detective .story-choice-grid,
  #scr-detective .story-ending-grid,
  #scr-detective .detective-desk-surface,
  #scr-detective .chapter-grid.cinematic{grid-template-columns:1fr !important;}
  #scr-detective .story-cinematic-copy,
  #scr-detective .story-cinematic-side,
  #scr-detective .story-stage-card,
  #scr-detective .story-dossier-card,
  #scr-detective .evidence-column{min-width:0;width:100%;}
  #scr-detective .story-meta-ribbon,
  #scr-detective .story-kicker-row,
  #scr-detective .story-stage-head,
  #scr-detective .story-stage-footer,
  #scr-detective .story-dialogue-controls,
  #scr-detective .story-dossier-top,
  #scr-detective .chapter-cover-top,
  #scr-detective .chapter-cover-bottom{flex-direction:column;align-items:stretch;}
  #scr-detective .chapter-cover-top > *,
  #scr-detective .chapter-cover-bottom > *,
  #scr-detective .story-meta-ribbon span,
  #scr-detective .story-status-pill,
  #scr-detective .chapter-location,
  #scr-detective .chapter-character-mini,
  #scr-detective .story-ambient-line,
  #scr-detective .story-scene-label{width:100%;justify-content:center;text-align:center;white-space:normal;}
  #scr-detective .story-dialogue-frame,
  #scr-detective .story-dialogue-frame.cinematic{flex-direction:column;align-items:stretch;}
  #scr-detective .story-dialogue-avatar,
  #scr-detective .story-dialogue-avatar.rich{width:60px;height:60px;align-self:flex-start;}
  #scr-detective .story-portrait-card,
  #scr-detective .story-portrait-card.speaker,
  #scr-detective .chapter-card.visual,
  #scr-detective .story-stage-card,
  #scr-detective .story-dossier-card{width:100%;min-width:0;}
  #scr-detective .chapter-body-copy,
  #scr-detective .story-file-reveal-copy,
  #scr-detective .story-scene-window-body{padding:14px;}
  #scr-detective .chapter-body-copy small,
  #scr-detective .story-stage-copy,
  #scr-detective .story-scene-text,
  #scr-detective .story-portrait-note{font-size:14px;line-height:1.6;min-height:0;word-break:break-word;}
}

/* detective simpler english v12 */
#scr-detective .story-mode-shell.detective-mode-shell{gap:18px;padding-bottom:110px;}
#scr-detective .detective-v2-intro{margin-bottom:18px;}
#scr-detective .detective-v2-hero{position:relative;overflow:hidden;border-radius:30px;padding:28px;border:1px solid rgba(255,255,255,.10);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);gap:18px;box-shadow:0 18px 50px rgba(0,0,0,.28);}
#scr-detective .detective-v2-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(6,10,18,.12), rgba(6,10,18,.58));pointer-events:none;}
#scr-detective .detective-v2-copy,#scr-detective .detective-v2-side{position:relative;z-index:1;}
#scr-detective .detective-v2-copy h3{font-size:34px;line-height:1.15;margin:12px 0 10px;}
#scr-detective .detective-v2-copy p{color:rgba(255,255,255,.78);line-height:1.7;max-width:720px;}
#scr-detective .detective-v2-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px;}
#scr-detective .detective-v2-stat{padding:14px 16px;border-radius:20px;background:rgba(6,12,22,.48);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:6px;}
#scr-detective .detective-v2-stat span{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:800;}
#scr-detective .detective-v2-stat b{font-size:24px;color:#fff;}
#scr-detective .detective-v2-stat.accent{box-shadow:0 0 0 1px rgba(255,66,103,.25) inset, 0 12px 30px rgba(255,66,103,.12);}
#scr-detective .detective-v2-actions .btn{width:auto;min-width:180px;}
#scr-detective .detective-v2-file-card{height:100%;border-radius:26px;background:linear-gradient(180deg, rgba(7,12,22,.76), rgba(12,20,34,.88));border:1px solid rgba(255,255,255,.10);padding:18px;display:flex;flex-direction:column;gap:14px;justify-content:space-between;box-shadow:0 16px 34px rgba(0,0,0,.26);}
#scr-detective .detective-v2-file-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
#scr-detective .detective-v2-file-code{font-size:26px;font-weight:900;color:#fff;}
#scr-detective .detective-v2-file-note{color:rgba(255,255,255,.72);line-height:1.6;}
#scr-detective .detective-case-grid-v2{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
#scr-detective .detective-case-card-v2{min-width:0;}
#scr-detective .detective-case-card-v2.completed .chapter-cover-art::after{content:'✓';position:absolute;right:14px;bottom:14px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(54,215,183,.92);color:#08131f;font-weight:900;box-shadow:0 12px 24px rgba(54,215,183,.26);}
#scr-detective .detective-suspect-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
#scr-detective .detective-suspect-card{padding:16px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(8,14,24,.38));display:flex;gap:12px;align-items:flex-start;min-width:0;}
#scr-detective .detective-suspect-avatar{width:46px;height:46px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(124,155,255,.38), rgba(46,230,214,.24));font-size:20px;font-weight:900;color:#fff;flex:none;}
#scr-detective .detective-suspect-card b{display:block;font-size:18px;color:#fff;}
#scr-detective .detective-suspect-card span{display:block;color:#cfe0ff;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-top:3px;}
#scr-detective .detective-suspect-card small{display:block;color:rgba(255,255,255,.72);line-height:1.6;margin-top:8px;}
#scr-detective .detective-step-shell{display:block;}
#scr-detective .detective-step-card{border-radius:28px;padding:22px;background:linear-gradient(180deg, rgba(8,14,24,.94), rgba(12,20,34,.88));border:1px solid rgba(255,255,255,.10);box-shadow:0 22px 50px rgba(0,0,0,.26);}
#scr-detective .detective-step-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
#scr-detective .detective-step-title{font-size:28px;line-height:1.45;color:#fff;margin:16px 0 10px;}
#scr-detective .detective-guide-box,#scr-detective .detective-question-box{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);}
#scr-detective .detective-audio-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 18px;}
#scr-detective .detective-audio-bar.compact{margin:4px 0 0;}
#scr-detective .detective-dialogue-list{display:grid;gap:12px;margin-top:14px;}
#scr-detective .detective-dialogue-card{padding:16px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);}
#scr-detective .detective-dialogue-card p{margin:10px 0 0;color:#fff;line-height:1.7;font-size:18px;}
#scr-detective .detective-dialogue-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
#scr-detective .detective-option-grid{display:grid;gap:12px;margin-top:16px;}
#scr-detective .detective-option-btn{display:flex;align-items:flex-start;gap:12px;text-align:left;min-height:unset;padding:16px 18px;white-space:normal;}
#scr-detective .detective-option-btn span:last-child{display:block;line-height:1.6;}
#scr-detective .detective-option-letter{width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);font-weight:900;color:#fff;flex:none;}
#scr-detective .detective-feedback-box{margin-top:18px;}
#scr-detective .detective-journal-grid{grid-template-columns:1.1fr .9fr;}
#scr-detective .detective-mini-brief{line-height:1.8;}
@media (max-width: 960px){
  #scr-detective .detective-v2-hero{grid-template-columns:1fr;padding:20px;border-radius:24px;}
  #scr-detective .detective-v2-copy h3{font-size:28px;}
  #scr-detective .detective-v2-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  #scr-detective .detective-case-grid-v2,
  #scr-detective .detective-suspect-grid,
  #scr-detective .detective-journal-grid{grid-template-columns:1fr;}
  #scr-detective .detective-step-card{padding:18px;border-radius:22px;}
  #scr-detective .detective-step-title{font-size:22px;}
  #scr-detective .detective-dialogue-card p{font-size:16px;}
  #scr-detective .detective-v2-actions .btn{width:100%;min-width:0;}
}

/* v13 detective modal + audio stability */
.detective-v2-intro-hidden{display:none !important;}
#ai-hero-section[style*="display: none"]{display:none !important;}
.detective-case-preview{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);gap:16px;align-items:start;padding:18px;border-radius:24px;background:linear-gradient(180deg, rgba(8,14,24,.92), rgba(10,18,32,.86));border:1px solid rgba(255,255,255,.08);}
.detective-mini-suspects{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:14px;}
.detective-mini-suspect{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:4px;}
.detective-mini-suspect b{font-size:14px;color:#fff;}
.detective-mini-suspect span{font-size:12px;color:#aebddd;font-weight:700;}
.detective-case-modal{position:fixed;inset:0;z-index:3200;display:none;}
.detective-case-modal.visible{display:block;}
.detective-case-backdrop{position:absolute;inset:0;background:rgba(3,6,16,.72);backdrop-filter:blur(10px);}
.detective-case-window{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(920px, calc(100vw - 20px));max-height:min(88vh, 980px);display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:linear-gradient(180deg, rgba(6,12,22,.98), rgba(9,18,34,.96));border:1px solid rgba(255,255,255,.10);box-shadow:0 30px 90px rgba(0,0,0,.48);}
.detective-case-window::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg, color-mix(in srgb, var(--detective-accent, #7c9bff) 14%, transparent), transparent 36%, color-mix(in srgb, var(--detective-secondary, #2ee6d6) 14%, transparent));pointer-events:none;}
.detective-case-top{position:relative;z-index:1;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.08);}
.detective-case-top h3{margin-top:6px;font-size:28px;line-height:1.1;}
.detective-case-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.detective-case-chat{position:relative;z-index:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:14px;}
.detective-chat-stream{display:flex;flex-direction:column;gap:10px;}
.detective-chat-bubble{padding:14px 16px;border-radius:18px;max-width:min(100%, 720px);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);box-shadow:0 10px 26px rgba(0,0,0,.18);}
.detective-chat-bubble p{margin:6px 0 0;line-height:1.6;color:#eef3ff;word-break:break-word;}
.detective-chat-bubble.guide{background:rgba(255,255,255,.05);}
.detective-chat-bubble.narrator{background:rgba(124,155,255,.10);border-color:rgba(124,155,255,.24);}
.detective-chat-bubble.suspect{align-self:flex-start;background:rgba(255,255,255,.05);}
.detective-chat-bubble.system{align-self:flex-end;background:rgba(46,230,214,.10);border-color:rgba(46,230,214,.22);}
.detective-chat-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.detective-chat-question{padding:16px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);}
.detective-chat-question h4{margin-top:8px;font-size:20px;line-height:1.4;color:#fff;}
.detective-chat-options{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px;}
.detective-chat-option{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:#fff;font-weight:800;cursor:pointer;}
.detective-chat-option span{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 28px;border-radius:999px;background:rgba(124,155,255,.14);border:1px solid rgba(124,155,255,.24);}
.detective-chat-option b{font-size:15px;line-height:1.5;}
.detective-chat-option.correct{border-color:rgba(61,210,125,.45);background:rgba(61,210,125,.12);}
.detective-chat-option.wrong{border-color:rgba(255,96,96,.42);background:rgba(255,96,96,.12);}
.detective-chat-option:disabled{opacity:1;cursor:default;}
.detective-chat-feedback{padding:16px;border-radius:18px;border:1px solid rgba(255,255,255,.08);}
.detective-chat-feedback p{margin-top:8px;line-height:1.6;}
.detective-chat-feedback.success{background:rgba(61,210,125,.12);border-color:rgba(61,210,125,.35);}
.detective-chat-feedback.error{background:rgba(255,96,96,.12);border-color:rgba(255,96,96,.30);}
#scr-detective .detective-audio-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;position:relative;z-index:5;}
#scr-detective .detective-audio-bar .mini-btn,#scr-detective .story-pron-play{pointer-events:auto;touch-action:manipulation;position:relative;z-index:6;}
@media (max-width: 820px){
  .detective-case-preview{grid-template-columns:1fr;}
  .detective-case-window{width:min(100vw - 12px, 100vw - 12px);max-height:calc(100vh - 20px);border-radius:22px;}
  .detective-case-top{padding:16px 14px 12px;}
  .detective-case-top h3{font-size:22px;}
  .detective-case-chat{padding:14px;}
}


/* v14 detective visibility + simpler layout */
#scr-detective.screen.detective-screen{display:none;flex-direction:column;gap:18px;}
#scr-detective.screen.detective-screen.active{display:flex;}
#scr-detective:not(.active){display:none !important;}
#scr-detective #story-puzzle-section,
#scr-detective #ai-chat-section,
#scr-detective #word-day-section{display:none !important;}
#scr-detective .story-chapter-card{padding:18px 16px 24px;}
#scr-detective .detective-case-grid-v2{grid-template-columns:1fr !important;gap:14px !important;}
#scr-detective .detective-case-card-v2{width:100%;min-width:0;position:relative;z-index:2;cursor:pointer;}
#scr-detective .detective-case-card-v2 .chapter-body-copy{padding:18px 18px 20px;}
#scr-detective .detective-case-card-v2 .chapter-cover-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-wrap:wrap;}
#scr-detective .detective-case-card-v2 .chapter-cover-top .difficulty-pill{max-width:100%;font-size:10px;padding:8px 10px;}
#scr-detective .detective-case-card-v2 .chapter-meta{align-items:center;flex-wrap:wrap;}
#scr-detective .detective-case-card-v2 b{font-size:34px;line-height:1.05;display:block;word-break:break-word;}
#scr-detective .detective-case-card-v2 small{display:block;margin-top:10px;line-height:1.75;font-size:15px;color:rgba(239,244,255,.82);}
#scr-detective .detective-case-card-v2 .chapter-cover-art{min-height:230px;}
#scr-detective .story-section-head{align-items:flex-start;}
#scr-detective .story-section-head .learn-muted{max-width:680px;line-height:1.6;}
.detective-case-modal.visible{display:block !important;}
.detective-case-modal .mini-btn,.detective-case-modal .btn,.detective-case-modal button{pointer-events:auto;touch-action:manipulation;}
@media (max-width: 768px){
  #scr-detective .detective-case-card-v2 b{font-size:28px;}
  #scr-detective .detective-case-card-v2 .chapter-cover-art{min-height:190px;}
  #scr-detective .detective-case-card-v2 .chapter-cover-top .difficulty-pill{font-size:9px;padding:7px 9px;}
  .detective-case-badges{gap:6px;}
}


/* v15 interaction + mobile layout fixes */
.word-card-example > .story-pronunciation{width:100%;}
.word-card-example > .story-pronunciation.compact .story-pron-actions{justify-content:flex-start;}
.word-card-example > .story-pronunciation .story-pron-play{white-space:nowrap;}
#scr-flashcards .learn-word-card{height:100%;overflow:hidden;}
#scr-flashcards .word-card-body{justify-content:flex-start;}
#scr-flashcards .word-card-actions{margin-top:14px;}
#scr-flashcards .story-pron-text,#scr-flashcards .story-pron-coach,#scr-flashcards .story-pron-beat{word-break:break-word;}
#scr-flashcards .story-pronunciation.compact{margin-top:8px;}
#scr-flashcards .tinder-card.learn-word-card{touch-action:pan-y;}
#scr-detective .detective-case-card-v2{pointer-events:auto;touch-action:manipulation;}
#scr-detective .detective-case-card-v2 *{pointer-events:none;}
#scr-detective .detective-case-card-v2{pointer-events:auto;}
.detective-case-modal.visible{display:block;pointer-events:auto;}
.detective-case-window{pointer-events:auto;}
.detective-case-top .mini-btn,.detective-case-chat .mini-btn,.detective-chat-option{touch-action:manipulation;}
.tower-modal .story-pron-play,.tower-modal .mini-btn,.tower-modal .tower-option,.tower-modal .btn{touch-action:manipulation;}
.tower-modal .story-pron-actions{position:relative;z-index:8;}
.tower-modal .story-pron-play{position:relative;z-index:9;}
@media (max-width:640px){
  .tinder-cards{min-height:760px;}
  #scr-flashcards .story-pronunciation.compact .story-pron-actions{width:100%;}
  #scr-flashcards .story-pronunciation.compact .story-pron-play{flex:1 1 100%;}
}


/* v16 flashcards + detective interaction/audio fixes */
#scr-flashcards .tinder-cards{
  height:auto !important;
  min-height:0 !important;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:visible;
}
#scr-flashcards .tinder-card.learn-word-card{
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  min-height:0;
  overflow:visible;
}
#scr-flashcards .learn-word-card.stacked.preview{
  transform:none;
  opacity:.22;
  filter:none;
  pointer-events:none;
  min-height:120px;
}
#scr-flashcards .word-card-body{gap:12px;}
#scr-flashcards .word-card-example{overflow:visible;}
#scr-flashcards .story-pronunciation.compact{
  width:100%;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
#scr-flashcards .story-pronunciation.compact .story-pron-head{
  align-items:flex-start;
}
#scr-flashcards .story-pronunciation.compact .story-pron-actions{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
#scr-flashcards .story-pronunciation.compact .story-pron-play{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.15;
  white-space:normal;
}
#scr-flashcards .story-pron-text,
#scr-flashcards .story-pron-coach,
#scr-flashcards .story-pron-beat{
  width:100%;
}
#scr-detective [data-case-open],
#scr-detective .detective-chat-option{
  pointer-events:auto !important;
  cursor:pointer;
}
#scr-detective .detective-chat-options{
  position:relative;
  z-index:8;
}
#scr-detective .detective-chat-option{
  position:relative;
  z-index:9;
}
@media (max-width:640px){
  #scr-flashcards .story-pronunciation.compact .story-pron-actions{
    grid-template-columns:1fr 1fr;
  }
  #scr-flashcards .story-pronunciation.compact .story-pron-play:last-child{
    grid-column:1 / -1;
  }
}


/* v17 detective word meanings */
#scr-detective .detective-chat-bubble p{font-size:16px;}
.detective-word-hint{
  display:inline;
  color:#ffffff;
  font-weight:800;
  border-bottom:1px dashed rgba(255,214,102,.55);
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
  border-radius:8px;
  padding:0 1px;
}
.detective-word-hint:hover,
.detective-word-hint:focus{
  color:#ffd666;
  border-bottom-color:#ffd666;
  background:rgba(255,214,102,.08);
  outline:none;
}
.detective-word-tooltip{
  position:fixed;
  z-index:4000;
  min-width:190px;
  max-width:280px;
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(8,14,24,.98), rgba(12,20,34,.96));
  border:1px solid rgba(255,214,102,.35);
  box-shadow:0 18px 40px rgba(0,0,0,.42);
  color:#eef3ff;
  opacity:0;
  pointer-events:none;
  transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease;
}
.detective-word-tooltip.visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.detective-word-tooltip-word{
  font-size:12px;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:#ffd666;
  font-weight:900;
  margin-bottom:6px;
}
.detective-word-tooltip-meaning{
  font-size:16px;
  line-height:1.35;
  font-weight:800;
  color:#fff;
}

/* v18 detective locks + long case styling */
#scr-detective .detective-case-card-v2.locked{
  opacity:.78;
  filter:saturate(.72);
  cursor:not-allowed;
}
#scr-detective .detective-case-card-v2.locked .chapter-cover-art::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(5,8,18,.16), rgba(5,8,18,.42));
}
#scr-detective .detective-case-card-v2.locked .chapter-body-copy{
  border-top:1px solid rgba(255,255,255,.06);
}
#scr-detective .detective-case-card-v2.locked .story-progress-bar span{
  opacity:.35;
}
.detective-lock-pill{
  position:absolute;
  left:16px;
  bottom:18px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(8,12,20,.84);
  border:1px solid rgba(255,255,255,.16);
  color:#f3f6ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.3px;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
#scr-detective .detective-case-card-v2.locked:disabled{
  pointer-events:none;
}


/* v22 mobile flashcard dock */
#scr-flashcards .tinder-cards{
  height:min(76vh, 820px) !important;
  min-height:min(76vh, 820px) !important;
  overflow:hidden;
}
#scr-flashcards .learn-word-card.stacked.preview{display:none;}
#scr-flashcards .tinder-card.learn-word-card{height:100%; max-height:100%; overflow:hidden;}
#scr-flashcards .word-card-body{flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:6px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;}
#scr-flashcards .word-card-body::-webkit-scrollbar{width:6px;}
#scr-flashcards .word-card-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:999px;}
#scr-flashcards .word-card-actions{margin-top:10px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); position:sticky; bottom:0; background:linear-gradient(180deg, rgba(10,14,26,.15), rgba(10,14,26,.98) 28%); backdrop-filter:blur(10px);}
#scr-flashcards .word-card-swipe-hint{position:sticky; bottom:0; padding-top:8px; background:linear-gradient(180deg, rgba(10,14,26,0), rgba(10,14,26,.96) 48%);}
#scr-flashcards .story-pronunciation.compact .story-pron-actions{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:640px){
  #scr-flashcards .tinder-cards{height:72vh !important; min-height:72vh !important;}
  #scr-flashcards .learn-word-card{padding:16px;}
  #scr-flashcards .word-card-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  #scr-flashcards .word-card-actions .mini-btn{width:100%; min-height:44px;}
  #scr-flashcards .word-card-actions .mini-btn:last-child{grid-column:1 / -1;}
  #scr-flashcards .story-pronunciation.compact .story-pron-actions{grid-template-columns:1fr 1fr;}
}

.detective-case-top .difficulty-pill{max-width:100%;}
@media (max-width:640px){
  .detective-case-badges .learn-score,
  .detective-case-badges .story-status-pill{font-size:10px;padding:7px 10px;}
}


@keyframes speechPulseGlow{
  0%{box-shadow:0 0 0 rgba(124,155,255,0), 0 12px 28px rgba(0,0,0,.18); transform:translateY(0);}
  50%{box-shadow:0 0 0 1px rgba(124,155,255,.18), 0 20px 44px rgba(74,122,255,.22); transform:translateY(-1px);}
  100%{box-shadow:0 0 0 rgba(124,155,255,0), 0 12px 28px rgba(0,0,0,.18); transform:translateY(0);}
}
.story-pronunciation.speech-active,
.tower-sentence-card.speech-active,
.tower-reply-card.speech-active,
.learn-word-card.speech-active,
.word-card-example.speech-active,
.sentence-learning-card.speech-active,
.story-dialogue-bubble.speech-active,
.detective-chat-bubble.speech-active{
  border-color:rgba(124,155,255,.34) !important;
  box-shadow:0 0 0 1px rgba(124,155,255,.18), 0 20px 44px rgba(74,122,255,.18) !important;
  animation:speechPulseGlow 1.35s ease-in-out infinite;
}
.detective-chat-bubble.narrator.speech-active{
  background:linear-gradient(180deg, rgba(124,155,255,.16), rgba(124,155,255,.10));
}
.story-pron-play.speech-button-active,
.mini-btn.speech-button-active{
  background:linear-gradient(135deg, rgba(124,155,255,.32), rgba(46,230,214,.18)) !important;
  border-color:rgba(124,155,255,.44) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(74,122,255,.24) !important;
}
#scr-detective .detective-chat-bubble.narrator .detective-audio-bar{
  margin:14px 0 0;
}
#scr-detective .detective-chat-bubble.narrator > b{
  display:flex;
  align-items:center;
  gap:8px;
}

.detective-word-tooltip-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.detective-tip-btn{
  width:auto;
  padding:8px 10px;
  border-radius:12px;
}


.feed-top-tabs{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
.feed-top-tab{appearance:none;border:1px solid rgba(255,255,255,.10);background:rgba(13,21,41,.7);color:var(--text-main);padding:12px 16px;border-radius:999px;font-weight:800;cursor:pointer;transition:.2s ease;box-shadow:var(--shadow-sm);}
.feed-top-tab.active{background:linear-gradient(135deg, rgba(99,102,241,.24), rgba(59,130,246,.18));border-color:rgba(99,102,241,.38);box-shadow:0 12px 28px rgba(37,99,235,.18);}
.feed-top-tab:hover{transform:translateY(-1px);}
.feed-tab-panel{display:block;}
.feed-tab-panel:not(.active){display:none;}


/* v123 static flashcards */
#scr-flashcards .flashcards-list-shell{position:relative;height:auto !important;min-height:0 !important;display:flex;flex-direction:column;gap:14px;overflow:visible;}
#scr-flashcards .learn-word-card.static-mode{position:relative;inset:auto;width:100%;height:auto !important;max-height:none !important;overflow:visible !important;touch-action:auto;cursor:default;transform:none !important;transition:none;box-sizing:border-box;}
#scr-flashcards .learn-word-card.static-mode .word-card-body{overflow:visible;}
#scr-flashcards .learn-word-card.static-mode .word-card-actions{position:sticky;bottom:0;z-index:2;background:linear-gradient(180deg, rgba(10,14,26,0), rgba(10,14,26,.98) 35%);padding-top:10px;}
#scr-flashcards .word-card-next-note{margin-top:10px;color:rgba(255,255,255,.72);font-size:13px;font-weight:700;}