: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; margin-top:20px; }
.tinder-card { position: absolute; 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; }
.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;}}