:root{
  --bg:#eef6ff;
  --card:#ffffff;
  --ink:#152242;
  --muted:#64708a;
  --primary:#5b6cff;
  --primary-dark:#3547d2;
  --secondary:#00bfa6;
  --warning:#ffb629;
  --danger:#ff5d73;
  --good:#10b981;
  --shadow:0 24px 70px rgba(25,43,85,.16);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Tahoma,Arial,sans-serif;background:radial-gradient(circle at top left,#fff7d6,transparent 28%),radial-gradient(circle at top right,#e3e6ff,transparent 30%),var(--bg);color:var(--ink);min-height:100vh}
a{color:inherit;text-decoration:none}.stars-bg:before,.stars-bg:after{content:"✦ ✧ ✦ ✧ ✦";position:fixed;color:rgba(91,108,255,.22);font-size:34px;letter-spacing:28px;top:7%;left:8%;z-index:-1;animation:float 8s ease-in-out infinite}.stars-bg:after{top:auto;bottom:9%;left:auto;right:5%;animation-delay:1.8s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.landing{min-height:100vh;display:grid;place-items:center;padding:24px}.hero-card{width:min(1040px,100%);display:grid;grid-template-columns:330px 1fr;gap:34px;align-items:center;background:rgba(255,255,255,.78);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow);border-radius:36px;padding:44px;overflow:hidden;position:relative}.hero-card:before{content:"";position:absolute;width:290px;height:290px;border-radius:50%;background:linear-gradient(135deg,#ffe78a,#ff94c2);right:-120px;top:-120px;opacity:.5}.eyebrow{display:inline-block;background:#fff0c2;color:#8a5a00;border-radius:999px;padding:8px 14px;font-weight:700}.hero-card h1{font-size:clamp(36px,6vw,72px);line-height:1.08;margin:12px 0}.hero-card h1 span{color:var(--primary)}.lead{font-size:20px;color:var(--muted);line-height:1.8}.mascot{width:160px;height:160px;border-radius:42% 58% 52% 48%;background:linear-gradient(145deg,#6d7cff,#33d5bb);display:grid;place-items:center;color:white;position:relative;box-shadow:0 22px 55px rgba(91,108,255,.35);animation:bounce 2.9s ease-in-out infinite}.mascot.big{width:280px;height:280px;font-size:108px;margin:auto}.mascot .face{font-size:90px;font-weight:900;line-height:1}.mascot.big .face{font-size:124px}.mascot .smile{position:absolute;width:44px;height:21px;border-bottom:7px solid white;border-radius:0 0 100px 100px;bottom:42px}.mascot.big .smile{width:76px;height:34px;bottom:64px;border-bottom-width:10px}.horns{position:absolute;top:28px;left:35px;font-size:44px;color:#fff2a0}@keyframes bounce{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.start-form,.form-grid{display:grid;gap:12px}.start-form label,.form-grid label{font-weight:700;color:var(--ink)}input,select{width:100%;border:2px solid #e2e8f0;border-radius:18px;padding:15px 16px;font-size:18px;outline:none;background:white;color:var(--ink)}input:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(91,108,255,.12)}.avatar-row{display:flex;gap:10px;flex-wrap:wrap}.avatar{width:62px;height:62px;border-radius:20px;border:2px solid #e2e8f0;background:white;font-size:28px;cursor:pointer}.avatar.active{border-color:var(--primary);box-shadow:0 10px 24px rgba(91,108,255,.18);transform:translateY(-2px)}.btn{border:0;border-radius:18px;padding:14px 20px;font-size:17px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.2s;min-height:52px}.btn:hover{transform:translateY(-2px)}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;box-shadow:0 14px 28px rgba(91,108,255,.26)}.secondary{background:linear-gradient(135deg,var(--secondary),#00a2c7);color:white}.ghost{background:#f4f7ff;color:var(--primary-dark);border:1px solid #e5e9ff}.mini-note{color:var(--muted);font-size:14px}.continue-btn{margin-top:14px;width:max-content}.install-body{display:grid;place-items:center;padding:22px}.install-card,.report-card{width:min(880px,100%);background:white;border-radius:var(--radius);box-shadow:var(--shadow);padding:32px}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid .btn{grid-column:1/-1}.alert{padding:14px 16px;border-radius:16px;margin:14px 0;font-weight:700}.alert.error{background:#ffe8ed;color:#9b1028}.alert.success{background:#e7fbf3;color:#08724d}
.topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:14px 22px;background:rgba(255,255,255,.76);backdrop-filter:blur(14px);border-bottom:1px solid rgba(226,232,240,.8)}.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:900}.brand-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:white}.topbar nav{display:flex;gap:12px;align-items:center}.topbar nav a{color:var(--primary-dark);font-weight:800;background:#f4f7ff;border-radius:999px;padding:10px 14px}.game-shell{width:min(1120px,100%);margin:0 auto;padding:24px;display:grid;grid-template-columns:1fr 330px;gap:20px}.status-card,.game-card,.tips-card{background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.status-card{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}.student-badge{display:flex;align-items:center;gap:14px}.student-badge small,.score-grid small{color:var(--muted);display:block;margin-bottom:5px}.student-badge strong,.score-grid strong{font-size:25px}.avatar-mini{width:62px;height:62px;border-radius:22px;background:#fff5cf;display:grid;place-items:center;font-size:30px}.score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.score-grid div{background:#f8faff;border-radius:20px;min-width:115px;padding:13px;text-align:center}.lesson-tools{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap}.lesson-tools label{font-weight:800}.teacher-zone{display:flex;align-items:center;gap:18px;margin:24px 0}.mascot.talk{width:126px;height:126px;flex:0 0 auto}.mascot.talk .face{font-size:68px}.mascot.talk .smile{bottom:31px}.speech-bubble{background:#f7fbff;border:2px solid #e1ebff;border-radius:24px 24px 8px 24px;padding:18px 20px;line-height:1.8;font-size:20px;font-weight:700;min-height:86px;flex:1}.question-box{display:flex;justify-content:center;align-items:center;gap:16px;background:linear-gradient(135deg,#fff8d7,#fff);border-radius:28px;padding:30px 14px;font-size:clamp(46px,9vw,92px);font-weight:900;color:#263063;border:2px dashed #ffd86b}.question-mark{color:var(--primary)}.answer-form{display:grid;grid-template-columns:1fr auto;gap:12px;margin-top:18px}.answer-form input{text-align:center;font-size:30px;font-weight:900}.button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.listening{background:linear-gradient(135deg,#ff5d73,#ffb629)!important;color:white;animation:pulse 1s infinite}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}.feedback{margin-top:18px;padding:16px 18px;border-radius:20px;background:#f4f7ff;color:var(--ink);font-weight:800;line-height:1.7;min-height:60px}.feedback.good{background:#e7fbf3;color:#08724d}.feedback.try{background:#fff3d9;color:#895a00}.tips-card h2,.report-card h2{margin-top:0}.tips-card p{color:var(--muted);line-height:1.8}.mini-progress{height:16px;border-radius:999px;background:#e8eeff;overflow:hidden}.mini-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--secondary),var(--primary));border-radius:inherit;transition:.35s}.report-shell{padding:24px}.report-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}.report-summary div{background:#f8faff;border-radius:18px;padding:16px}.report-summary small{display:block;color:var(--muted);margin-bottom:5px}.report-summary strong{font-size:24px}.table-wrap{overflow:auto;border-radius:18px;border:1px solid #e6ecf7}table{width:100%;border-collapse:collapse;background:white}th,td{padding:14px 16px;text-align:right;border-bottom:1px solid #edf2f7}th{background:#f7f9ff;color:#34405f}tr:last-child td{border-bottom:0}
@media (max-width:850px){.hero-card{grid-template-columns:1fr;padding:26px}.mascot.big{width:210px;height:210px}.game-shell{grid-template-columns:1fr;padding:14px}.status-card{display:grid;gap:16px}.score-grid{grid-template-columns:repeat(3,1fr)}.score-grid div{min-width:auto}.answer-form{grid-template-columns:1fr}.teacher-zone{align-items:flex-start}.speech-bubble{font-size:17px}.form-grid{grid-template-columns:1fr}.topbar{align-items:flex-start;gap:10px}.topbar nav{flex-wrap:wrap;justify-content:flex-end}.report-summary{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.landing{padding:14px}.hero-card{border-radius:26px}.mascot.big{width:170px;height:170px}.mascot.big .face{font-size:92px}.hero-card h1{font-size:42px}.lead{font-size:17px}.question-box{font-size:54px;gap:8px}.button-row .btn{width:100%}.lesson-tools{display:grid}.score-grid{grid-template-columns:1fr}.report-summary{grid-template-columns:1fr}.topbar{position:relative}.topbar nav a{font-size:13px;padding:9px 10px}}

/* ===== Darboush V2: Friends Challenge ===== */
.hidden { display: none !important; }
.challenge-body { background: radial-gradient(circle at top right, rgba(255, 219, 88, .25), transparent 28%), radial-gradient(circle at bottom left, rgba(111, 95, 255, .18), transparent 30%), #f8fbff; }
.challenge-shell { width: min(1160px, calc(100% - 28px)); margin: 24px auto 54px; }
.challenge-hero { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 22px; border-radius: 30px; background: rgba(255,255,255,.82); box-shadow: 0 24px 70px rgba(34, 48, 99, .12); margin-bottom: 20px; border: 1px solid rgba(255,255,255,.9); }
.challenge-hero h1 { margin: 4px 0 8px; font-size: clamp(30px, 5vw, 56px); }
.challenge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.compact-form { gap: 12px; }
.lobby-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.room-code { font-size: clamp(34px, 7vw, 72px); letter-spacing: 9px; direction: ltr; font-weight: 900; color: #25346d; background: linear-gradient(135deg, #fff8d8, #e8f6ff); border: 3px dashed rgba(37,52,109,.25); border-radius: 24px; padding: 12px 24px; display: inline-block; }
.player-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 18px 0; }
.player-pill { display: grid; grid-template-columns: 28px 38px 1fr; align-items: center; gap: 8px; padding: 12px; border-radius: 18px; background: #f7f9ff; border: 2px solid rgba(67, 97, 238, .08); box-shadow: inset 0 -2px 0 rgba(0,0,0,.03); }
.player-pill.me { background: #fff9df; border-color: rgba(255, 189, 46, .48); }
.player-pill .rank { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #eef2ff; font-weight: 900; color: #25346d; }
.avatar-dot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 23px; box-shadow: 0 8px 20px rgba(24, 35, 82, .08); }
.player-pill small { grid-column: 3; color: #65708f; }
.arena-layout { display: grid; grid-template-columns: 1.55fr .9fr; gap: 18px; align-items: start; }
.challenge-question-card { min-height: 560px; }
.round-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.timer-pill { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 24px; color: #25346d; background: #fff3b5; border: 3px solid rgba(255, 189, 46, .5); box-shadow: 0 12px 22px rgba(255, 189, 46, .24); }
.timer-pill.danger { animation: pulseDanger .8s infinite; background: #ffe0e0; color: #c51c38; border-color: rgba(197, 28, 56, .25); }
@keyframes pulseDanger { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.compact-teacher { margin-bottom: 12px; }
.mega-question { font-size: clamp(48px, 10vw, 92px); margin: 24px 0; }
.scoreboard-card { position: sticky; top: 90px; border-radius: 28px; background: rgba(255,255,255,.92); padding: 20px; box-shadow: 0 24px 70px rgba(34, 48, 99, .12); border: 1px solid rgba(255,255,255,.9); }
.scoreboard-card h2 { margin-top: 0; }
.scoreboard { display: grid; gap: 10px; }
.score-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 13px; border-radius: 18px; background: #f7f9ff; border: 2px solid rgba(67, 97, 238, .08); }
.score-row.me { background: linear-gradient(135deg, #fff9df, #eefcff); border-color: rgba(255, 189, 46, .5); }
.score-row em { font-style: normal; font-weight: 900; color: #25346d; font-size: 22px; }
.score-row small { grid-column: 2 / 4; color: #65708f; }
.final-board { margin: 18px 0; }
.bounce { animation: softBounce 2.5s ease-in-out infinite; }
@keyframes softBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 850px) {
  .challenge-hero, .challenge-grid, .arena-layout { grid-template-columns: 1fr; }
  .scoreboard-card { position: static; }
  .challenge-hero .mascot.big { margin: 0 auto; }
  .room-code { width: 100%; text-align: center; letter-spacing: 5px; }
}

/* ===== Darboush V3.1 Challenge Stability & Fun Modes ===== */
.challenge-mini-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.btn.tiny{font-size:13px;padding:8px 12px;border-radius:999px}.no-margin{margin:0}.mode-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 12px;background:#fff7d6;color:#5d4700;font-size:13px;font-weight:800;box-shadow:0 8px 24px rgba(255,203,67,.20)}.mode-rocket .challenge-question-card{background:linear-gradient(180deg,#ffffff 0%,#eef5ff 100%)}.mode-monster .challenge-question-card{background:linear-gradient(180deg,#ffffff 0%,#f4eeff 100%)}.mode-treasure .challenge-question-card{background:linear-gradient(180deg,#ffffff 0%,#ecfff6 100%)}.mode-classic .challenge-question-card{background:linear-gradient(180deg,#ffffff 0%,#fff6ef 100%)}.mode-rocket .mode-badge{background:#eaf2ff;color:#2555b8}.mode-monster .mode-badge{background:#f0e8ff;color:#6932a8}.mode-treasure .mode-badge{background:#e8fff3;color:#087a4a}.mode-classic .mode-badge{background:#fff2e8;color:#a55312}.fun-animation{position:relative;height:0;pointer-events:none}.fun-animation span{position:absolute;left:50%;bottom:20px;font-size:28px;animation:emoji-pop 1s ease-out forwards;animation-delay:var(--d,0s);transform:translateX(-50%)}@keyframes emoji-pop{0%{opacity:0;transform:translate(-50%,0) scale(.35) rotate(0deg)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x,0px)),-120px) scale(1.25) rotate(28deg)}}.diagnostic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:16px 0}.diagnostic-card{background:#f6f9ff;border:1px solid #dfe8ff;border-radius:18px;padding:14px}.diagnostic-card strong{display:block;margin-bottom:6px}.diagnostic-ok{color:#0a7a43}.diagnostic-warn{color:#a95b00}.diagnostic-bad{color:#b00020}.admin-actions{display:flex;gap:8px;flex-wrap:wrap}.admin-actions form{display:inline}.status-pill{display:inline-flex;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800}.status-waiting{background:#fff7d6;color:#7a5b00}.status-active{background:#e9f4ff;color:#1261a6}.status-finished{background:#eaf8ef;color:#087a43}.challenge-admin-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:16px 0}.challenge-admin-cards .stat-card{background:#fff;border:1px solid #e5edfb;border-radius:20px;padding:16px;box-shadow:0 10px 30px rgba(20,40,80,.07)}.challenge-admin-cards .stat-card b{font-size:28px;display:block;margin-top:8px}.wide-report{max-width:1120px}.copyable-code{font-family:ui-monospace,Consolas,monospace;font-weight:900;letter-spacing:3px;color:#3852c7}@media(max-width:700px){.lobby-header{align-items:flex-start}.lobby-header .button-row{width:100%}.mode-badge{order:3;width:100%;justify-content:center}.challenge-mini-actions .btn{width:auto}}