:root {
  --ink: #10201c;
  --muted: #6f7f78;
  --cream: #f5f1e7;
  --paper: #fffdf8;
  --green: #0d493d;
  --green-2: #146653;
  --mint: #d9eee5;
  --gold: #e0ac3b;
  --coral: #e66950;
  --line: #dedfd7;
  --shadow: 0 24px 70px rgba(18, 58, 48, .12);
}

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); background: var(--cream);
  font-family: "Noto Sans Arabic", Tahoma, sans-serif; overflow-x: hidden;
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
}
button { font: inherit; }
button:focus-visible { outline: 3px solid rgba(224,172,59,.55); outline-offset: 3px; }
.ambient { position: fixed; border-radius: 50%; filter: blur(2px); pointer-events: none; z-index: -1; }
.ambient-one { width: 480px; height: 480px; background: radial-gradient(circle, rgba(59,151,119,.15), transparent 70%); top: -160px; right: -90px; }
.ambient-two { width: 520px; height: 520px; background: radial-gradient(circle, rgba(224,172,59,.12), transparent 70%); bottom: -250px; left: -120px; }

.topbar { max-width: 1200px; margin: auto; padding: 25px 28px; display: flex; align-items: center; justify-content: space-between; }
.brand { border: 0; background: none; display: flex; align-items: center; gap: 12px; color: var(--ink); cursor: pointer; text-align: right; }
.brand-mark { width: 48px; height: 48px; border-radius: 15px 15px 15px 5px; background: var(--green); color: white; display: grid; place-items: center; font-family: "Noto Kufi Arabic"; font-weight: 800; font-size: 23px; box-shadow: 0 8px 20px rgba(13,73,61,.2); }
.brand strong, .brand small { display: block; }
.brand strong { font-family: "Noto Kufi Arabic"; font-size: 20px; line-height: 1.2; }
.brand small { font-size: 10px; letter-spacing: .7px; color: var(--muted); margin-top: 3px; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.record-pill { height: 45px; padding: 0 16px; border: 1px solid rgba(13,73,61,.12); background: rgba(255,255,255,.55); border-radius: 15px; display: flex; align-items: center; gap: 10px; }
.record-pill span { font-size: 11px; color: var(--muted); }
.record-pill strong { color: var(--green); font-family: "Noto Kufi Arabic"; }
.icon-btn { width: 45px; height: 45px; border: 1px solid rgba(13,73,61,.12); background: rgba(255,255,255,.55); border-radius: 15px; color: var(--green); cursor: pointer; font-size: 20px; }
.icon-btn.muted { opacity: .45; }
.view-switch-btn { height: 45px; border: 1px solid rgba(13,73,61,.12); background: rgba(255,255,255,.62); border-radius: 15px; color: var(--green); padding: 0 13px; display: flex; align-items: center; gap: 7px; cursor: pointer; }
.view-switch-btn b { font-size: 10px; white-space: nowrap; }

main { max-width: 1200px; margin: auto; padding: 0 28px 70px; }
.screen { display: none; animation: screenIn .5s ease both; }
.screen.active { display: block; }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } }
.hero { text-align: center; padding: 70px 0 55px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(13,73,61,.12); background: rgba(255,255,255,.55); color: var(--green); border-radius: 30px; padding: 8px 14px; font-weight: 700; font-size: 12px; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(224,172,59,.15); }
.hero h1 { margin: 24px 0 14px; font-family: "Noto Kufi Arabic"; font-size: clamp(37px, 6vw, 72px); line-height: 1.35; letter-spacing: -2.5px; }
.hero h1 em { color: var(--green-2); font-style: normal; position: relative; }
.hero h1 em::after { content: ""; position: absolute; right: 4%; left: 4%; bottom: -7px; height: 7px; background: url("data:image/svg+xml,%3Csvg width='200' height='8' viewBox='0 0 200 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5C55 1 138 1 198 4' stroke='%23E0AC3B' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.hero > p { max-width: 650px; margin: 22px auto; color: var(--muted); font-size: 16px; line-height: 2; }
.hero-badges { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; color: #45645b; font-size: 12px; font-weight: 700; }
.hero-badges span { display: flex; gap: 6px; align-items: center; }

.setup-panel { background: rgba(255,253,248,.88); border: 1px solid rgba(255,255,255,.85); border-radius: 32px; padding: 34px; box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 25px; }
.section-heading span { color: var(--coral); font-size: 11px; font-weight: 800; }
.section-heading h2 { font-family: "Noto Kufi Arabic"; font-size: 22px; margin: 3px 0 0; }
.text-btn { color: var(--green); border: 0; border-bottom: 1px solid currentColor; background: none; cursor: pointer; font-weight: 700; padding: 3px 0; font-size: 12px; }
.category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.category-card { border: 1px solid var(--line); background: #fff; border-radius: 18px; min-height: 112px; padding: 15px; cursor: pointer; text-align: right; transition: .22s ease; position: relative; overflow: hidden; color: var(--ink); }
.category-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(22,68,56,.09); border-color: #b7cfc5; }
.category-card.selected { color: white; background: var(--cat-color, var(--green)); border-color: transparent; box-shadow: 0 13px 25px color-mix(in srgb, var(--cat-color, var(--green)) 25%, transparent); }
.category-card .check { position: absolute; left: 12px; top: 12px; width: 20px; height: 20px; border: 1px solid #d8ddd9; color: transparent; border-radius: 50%; display: grid; place-items: center; font-size: 10px; }
.category-card.selected .check { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.45); color: white; }
.category-card .emoji { display: block; font-size: 25px; margin-bottom: 11px; filter: saturate(.8); }
.category-card strong { display: block; font-family: "Noto Kufi Arabic"; font-size: 13px; }
.category-card small { color: var(--muted); font-size: 10px; }
.category-card.selected small { color: rgba(255,255,255,.72); }

.game-options { margin-top: 28px; padding-top: 25px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 25px; }
.option-block label { display: block; font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 9px; }
.segmented { background: #f0eee7; padding: 5px; border-radius: 14px; display: flex; gap: 4px; }
.segmented button { flex: 1; border: 0; background: transparent; border-radius: 10px; padding: 9px 10px; cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 700; }
.segmented button.selected { background: white; color: var(--green); box-shadow: 0 4px 12px rgba(25,59,50,.08); }
.segmented button:disabled { opacity: .28; cursor: not-allowed; }
.segmented.compact { min-width: 250px; }
.mode-setup { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.mode-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.mode-heading span { color: var(--coral); font-size: 11px; font-weight: 800; }
.mode-heading h3 { margin: 3px 0 0; font-family: "Noto Kufi Arabic"; font-size: 16px; }
.teams-config { margin-top: 18px; padding: 18px; border-radius: 18px; background: #f2f0e9; }
.team-count-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.team-count-row > label { color: var(--muted); font-size: 11px; font-weight: 700; }
.team-inputs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.team-rules { margin: 13px 0 0; color: var(--muted); font-size: 10px; line-height: 1.9; }
.team-input-wrap { position: relative; }
.team-input-wrap i { position: absolute; right: 12px; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--team-color); transform: translateY(-50%); }
.team-input-wrap input { width: 100%; border: 1px solid #d7dbd4; background: white; color: var(--ink); border-radius: 12px; padding: 11px 31px 11px 12px; outline: none; font-size: 12px; font-weight: 700; }
.team-input-wrap input:focus { border-color: var(--team-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-color) 15%, transparent); }
.points-guide { margin-top: 15px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 10px; }
.points-guide span { display: flex; align-items: center; gap: 5px; }
.points-guide i { width: 7px; height: 7px; border-radius: 50%; }
.points-guide b { color: var(--ink); }
.easy-dot { background: #52a779; }.medium-dot { background: var(--gold); }.hard-dot { background: var(--coral); }
.points-guide .speed-bonus { margin-right: auto; color: #8a6a2c; font-weight: 700; }
.start-row { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; }
.source-note { max-width: 760px; margin: 18px auto 0; text-align: center; color: #849189; font-size: 9px; line-height: 1.8; }
.source-note a { color: var(--green); }
.selection-summary { display: flex; align-items: center; gap: 9px; }
.selection-summary strong { font-family: "Noto Kufi Arabic"; font-size: 24px; color: var(--green); }
.selection-summary span { font-size: 12px; color: var(--muted); }
.primary-btn { min-width: 210px; border: 0; border-radius: 16px; padding: 15px 21px; color: white; background: var(--green); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 30px; font-weight: 800; box-shadow: 0 12px 26px rgba(13,73,61,.22); transition: .2s; }
.primary-btn:hover { background: #0a5949; transform: translateY(-2px); }
.primary-btn:disabled { cursor: not-allowed; opacity: .4; transform: none; box-shadow: none; }
.primary-btn b { font-size: 18px; }

.team-board { max-width: 1180px; margin: 28px auto 0; overflow: hidden; border-radius: 28px; background: #1f3458; box-shadow: 0 24px 70px rgba(23,49,85,.24); }
.team-board[hidden], .game-shell[hidden] { display: none; }
.board-header { min-height: 126px; padding: 20px 24px; display: grid; grid-template-columns: 240px 1fr 110px; align-items: center; gap: 20px; color: white; background: linear-gradient(135deg, #1b2f51, #29456f); }
.board-header-actions { justify-self: start; display: flex; align-items: center; gap: 8px; }
.board-end-btn { justify-self: start; min-height: 44px; border: 1px solid rgba(255,255,255,.62); border-radius: 13px; background: transparent; color: white; padding: 10px 16px; cursor: pointer; font-size: 11px; font-weight: 800; }
.board-view-btn { border: 1px solid rgba(255,255,255,.38); border-radius: 13px; background: rgba(255,255,255,.1); color: white; min-height: 44px; padding: 9px 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; }
.board-view-btn b { white-space: nowrap; }
.iphone-board-nav { min-height: 50px; padding: 7px 10px; background: #edf0f3; border-bottom: 1px solid #d8dee6; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.iphone-board-nav[hidden] { display: none; }
.iphone-board-nav strong { color: #314968; text-align: center; font-family: "Noto Kufi Arabic"; font-size: 10px; white-space: nowrap; }
.iphone-board-nav button { min-height: 44px; border: 1px solid #9aabc3; border-radius: 11px; background: white; color: #234268; padding: 7px 11px; cursor: pointer; font-size: 10px; font-weight: 800; }
.iphone-board-nav button:first-child { justify-self: start; }
.iphone-board-nav button:last-child { justify-self: end; }
.iphone-board-nav button:disabled { opacity: .35; cursor: not-allowed; }
.team-board.paged-board .board-grid-wrap { overflow-x: hidden; }
.team-board.paged-board .board-grid { grid-template-columns: repeat(var(--board-columns, 1), minmax(0, 1fr)); min-width: 0; }
.board-turn { text-align: center; }
.board-turn small { color: #f2c771; font-size: 10px; font-weight: 800; }
.board-turn h2 { margin: 2px 0 0; font-family: "Noto Kufi Arabic"; font-size: clamp(20px, 3vw, 32px); }
.board-turn p { margin: 2px 0 0; color: rgba(255,255,255,.66); font-size: 10px; }
.board-progress { justify-self: end; width: 86px; height: 72px; border: 1px solid rgba(255,255,255,.22); border-radius: 17px; display: grid; place-items: center; align-content: center; background: rgba(255,255,255,.08); }
.board-progress strong, .board-progress span { display: block; text-align: center; }
.board-progress strong { color: #f3c86f; font-family: "Noto Kufi Arabic"; font-size: 22px; line-height: 1.2; }
.board-progress span { color: rgba(255,255,255,.72); font-size: 9px; }
.board-grid-wrap { overflow-x: auto; padding: 16px; background: #f7f5ef; scrollbar-color: #93a5c2 transparent; }
.board-grid { display: grid; grid-template-columns: repeat(var(--board-columns, 1), minmax(150px, 1fr)); gap: 10px; min-width: calc(var(--board-columns, 1) * 160px); direction: rtl; }
.board-column { min-width: 0; display: grid; align-content: start; gap: 8px; }
.board-category-head { min-height: 76px; padding: 12px 10px; border-radius: 15px; color: white; background: var(--cat-color, var(--green)); display: grid; place-items: center; align-content: center; text-align: center; box-shadow: inset 0 -16px 28px rgba(0,0,0,.08); }
.board-category-head span { font-size: 21px; line-height: 1; }
.board-category-head strong { margin-top: 5px; font-family: "Noto Kufi Arabic"; font-size: 12px; line-height: 1.5; }
.board-question { min-height: 72px; border: 1px solid #9eacc2; border-radius: 14px; background: linear-gradient(145deg, #becbe0, #aebcd3); color: #1c3459; cursor: pointer; display: grid; place-items: center; align-content: center; transition: .18s; }
.board-question:hover:not(:disabled) { transform: translateY(-2px); border-color: #5f789e; box-shadow: 0 8px 18px rgba(36,62,99,.16); }
.board-question strong { font-family: "Noto Kufi Arabic"; font-size: 19px; line-height: 1.25; }
.board-question small { color: #506887; font-size: 8px; font-weight: 800; }
.board-question:disabled { cursor: default; color: #8b989f; border-color: #d9ddd9; background: #e4e5df; }
.board-question:disabled strong { font-size: 16px; }
.board-team-scores { display: grid; grid-template-columns: repeat(var(--team-count, 2), 1fr); gap: 10px; padding: 14px; background: #c87540; }
.board-team-card { min-width: 0; padding: 13px 16px; border: 2px solid transparent; border-radius: 16px; background: rgba(255,255,255,.28); color: white; display: flex; align-items: center; gap: 10px; }
.board-team-card.active { border-color: white; background: rgba(255,255,255,.38); box-shadow: 0 6px 18px rgba(95,46,19,.16); }
.board-team-card i { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 50%; background: var(--team-color); border: 2px solid rgba(255,255,255,.72); }
.board-team-card div { min-width: 0; }
.board-team-card span, .board-team-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-team-card span { color: rgba(255,255,255,.72); font-size: 9px; }
.board-team-card strong { font-family: "Noto Kufi Arabic"; font-size: 13px; }
.board-team-card b { margin-right: auto; font-family: "Noto Kufi Arabic"; font-size: 19px; }
.game-shell { max-width: 850px; margin: 45px auto; }
.team-scoreboard { display: grid; grid-template-columns: repeat(var(--team-count, 2), 1fr); gap: 8px; margin-bottom: 18px; }
.team-scoreboard[hidden] { display: none; }
.team-score { min-width: 0; border: 1px solid #dce0d9; background: rgba(255,255,255,.64); border-radius: 15px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; transition: .22s; }
.team-score i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--team-color); }
.team-score div { min-width: 0; }
.team-score span, .team-score strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-score span { color: var(--muted); font-size: 9px; }
.team-score strong { color: var(--ink); font-family: "Noto Kufi Arabic"; font-size: 13px; }
.team-score b { margin-right: auto; color: var(--green); font-family: "Noto Kufi Arabic"; font-size: 16px; }
.team-score.active { background: white; border-color: var(--team-color); transform: translateY(-2px); box-shadow: 0 9px 20px rgba(23,66,55,.1); }
.game-status { display: grid; grid-template-columns: 100px 1fr 100px; gap: 25px; align-items: end; margin-bottom: 22px; }
.status-item small { display: block; color: var(--muted); font-size: 10px; font-weight: 700; }
.status-item strong { font-family: "Noto Kufi Arabic"; font-size: 22px; color: var(--green); }
.status-item.streak { text-align: left; }
.progress-copy { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); font-weight: 700; margin-bottom: 7px; }
.progress-track { height: 7px; border-radius: 20px; background: #dfe2db; overflow: hidden; }
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), #45a278); transition: width .35s ease; }
.question-card { background: var(--paper); border-radius: 30px; border: 1px solid white; box-shadow: var(--shadow); padding: 38px; position: relative; }
.question-card::before { content: ""; position: absolute; width: 75px; height: 7px; border-radius: 0 0 8px 8px; background: var(--gold); top: 0; right: 50%; transform: translateX(50%); }
.turn-banner { margin: -13px 0 23px; padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--turn-color) 11%, white); display: flex; align-items: center; gap: 8px; }
.turn-banner[hidden] { display: none; }
.turn-banner span { width: 9px; height: 9px; border-radius: 50%; background: var(--turn-color); }
.turn-banner strong { font-size: 12px; }
.turn-banner small { margin-right: auto; color: var(--muted); font-size: 9px; }
.question-meta { display: flex; align-items: center; gap: 9px; }
.category-tag, .difficulty-tag, .points-tag { border-radius: 20px; padding: 6px 11px; font-size: 10px; font-weight: 800; }
.category-tag { color: white; background: var(--green); }
.difficulty-tag { background: #f0ece2; color: #7b6b46; }
.points-tag { color: #8a5b16; background: #fff1ca; border: 1px solid #efd590; }
.timer { margin-right: auto; width: 49px; height: 49px; position: relative; display: grid; place-items: center; }
.timer svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.timer path { fill: none; stroke-width: 2.5; }
.timer-bg { stroke: #e3e5df; }
.timer-path { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear, stroke .2s; }
.timer strong { font-family: "Noto Kufi Arabic"; font-size: 12px; }
.timer.urgent .timer-path { stroke: var(--coral); }
.question-card h2 { font-family: "Noto Kufi Arabic"; font-size: clamp(19px, 3vw, 27px); line-height: 1.7; margin: 30px 0; min-height: 80px; }
.audio-quiz-panel { margin: -9px 0 22px; padding: 15px; border: 1px solid #d6c18b; border-radius: 17px; background: linear-gradient(135deg, #fff8e5, #f3ecdc); display: flex; align-items: center; gap: 13px; overflow: hidden; }
.audio-quiz-panel[hidden] { display: none; }
.audio-quiz-panel > div { min-width: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; }
.audio-quiz-panel > div > span { grid-row: 1 / 3; font-size: 25px; }
.audio-quiz-panel strong, .audio-quiz-panel small { display: block; }
.audio-quiz-panel strong { font-size: 12px; }
.audio-quiz-panel small { color: var(--muted); font-size: 9px; line-height: 1.7; }
.audio-quiz-panel button { margin-right: auto; flex: 0 0 auto; min-height: 44px; border: 0; border-radius: 12px; background: #725c99; color: white; padding: 10px 15px; cursor: pointer; font-size: 11px; font-weight: 800; }
.audio-player-frame { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; }
.charades-panel { margin: -6px 0 21px; padding: 20px; border: 1px solid #dec98f; border-radius: 18px; background: linear-gradient(135deg, #fff8e5, #f6efe0); text-align: center; }
.charades-panel[hidden], .charades-panel strong[hidden] { display: none; }
.charades-panel p { margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.charades-panel strong { display: block; margin: 8px 0 15px; color: var(--green); font-family: "Noto Kufi Arabic"; font-size: clamp(22px, 4vw, 34px); }
.charades-panel button { border: 0; border-radius: 12px; background: var(--green); color: white; padding: 11px 19px; cursor: pointer; font-weight: 800; font-size: 12px; }
.charades-panel button:disabled { opacity: .55; cursor: wait; }
.team-answer-panel { margin: -5px 0 20px; padding: 16px; border: 1px solid #dfe4dc; border-radius: 16px; background: #f7f6f1; text-align: center; }
.team-answer-panel[hidden] { display: none; }
.solo-answer-panel { margin: -5px 0 20px; padding: 16px; border: 1px solid #dfe4dc; border-radius: 16px; background: #f7f6f1; text-align: center; }
.solo-answer-panel[hidden] { display: none; }
.solo-answer-panel > p { margin: 0 0 12px; color: var(--muted); font-size: 11px; }
.solo-answer-panel .reveal-answer-btn { border: 0; min-height: 46px; border-radius: 12px; color: white; padding: 10px 17px; cursor: pointer; font-weight: 800; }
.solo-judge-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.solo-judge-actions[hidden] { display: none; }
.solo-judge-actions button { min-height: 46px; border: 0; border-radius: 12px; color: white; cursor: pointer; font-weight: 800; }
.solo-correct-btn { background: #3c9870; }
.solo-wrong-btn { background: #b76652; }
.oral-answer-copy strong { display: block; color: var(--ink); font-size: 13px; }
.oral-answer-copy p { margin: 4px 0 12px; color: var(--muted); font-size: 10px; }
.team-answer-panel button { border: 0; border-radius: 12px; color: white; min-height: 42px; padding: 10px 17px; cursor: pointer; font-size: 11px; font-weight: 800; }
.team-answer-panel button:disabled { opacity: .48; cursor: not-allowed; }
.reveal-answer-btn { width: 100%; background: #78644b; }
.host-answer { margin: 11px 0; padding: 12px; border: 1px dashed #d4b35d; border-radius: 13px; background: #fff8e5; }
.host-answer[hidden] { display: none; }
.host-answer small { display: block; color: var(--muted); font-size: 9px; margin-bottom: 4px; }
.host-answer strong { display: block; color: var(--green); font-size: 16px; }
.host-award-panel { margin-top: 11px; }
.host-award-panel > small { display: block; margin-bottom: 8px; color: var(--muted); font-size: 9px; font-weight: 800; }
.award-team-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.award-team-btn { background: var(--team-color, #3c9870); }
.phase-action-btn { width: 100%; margin-top: 8px; background: #78644b; }
.answer-hint { margin: -7px 0 18px; padding: 12px 14px; border: 1px dashed #ddb75b; border-radius: 13px; background: #fff7df; color: #805b17; text-align: center; font-weight: 800; font-size: 13px; }
.answer-hint[hidden] { display: none; }
.feedback { display: none; margin-top: 20px; padding: 15px; border-radius: 14px; background: #edf6f1; align-items: start; gap: 12px; }
.feedback.show { display: flex; animation: screenIn .25s ease; }
.feedback.wrong { background: #fff1ed; }
.feedback-icon { width: 31px; height: 31px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: white; background: #3c9870; font-weight: 800; }
.feedback.wrong .feedback-icon { background: var(--coral); }
.feedback strong { font-size: 13px; }
.feedback p { color: var(--muted); font-size: 11px; line-height: 1.8; margin: 3px 0 0; }
.next-btn { display: none; margin: 18px 0 0 auto; border: 0; background: var(--green); color: white; border-radius: 12px; padding: 11px 16px; cursor: pointer; font-weight: 800; font-size: 12px; }
.next-btn.show { display: block; }
.next-btn span { margin-right: 15px; }
.lifelines { display: flex; justify-content: center; gap: 10px; align-items: center; margin-top: 18px; color: var(--muted); font-size: 10px; }
.lifelines[hidden] { display: none; }
.lifelines button { border: 1px solid #d9ddd5; background: rgba(255,255,255,.65); color: var(--ink); border-radius: 12px; padding: 8px 12px; cursor: pointer; font-size: 10px; }
.lifelines button b { color: var(--coral); margin-left: 5px; }
.lifelines button:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.result-card { max-width: 620px; margin: 55px auto 0; text-align: center; background: var(--paper); border-radius: 32px; box-shadow: var(--shadow); padding: 35px 55px; position: relative; overflow: hidden; }
.result-confetti { color: var(--gold); letter-spacing: 28px; font-size: 16px; }
.result-confetti span { color: var(--coral); }
.result-icon { width: 72px; height: 72px; border-radius: 23px; display: grid; place-items: center; background: #f3ead3; font-size: 35px; margin: 20px auto 10px; transform: rotate(-4deg); }
.result-kicker { color: var(--coral); font-size: 11px; font-weight: 800; margin-bottom: 2px; }
.result-card h2 { font-family: "Noto Kufi Arabic"; margin: 0; font-size: 28px; }
.result-card > p:not(.result-kicker):not(.fresh-note) { color: var(--muted); font-size: 12px; }
.score-ring { width: 145px; height: 145px; margin: 23px auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--green) 0%, #e4e5df 0); position: relative; }
.score-ring::after { content: ""; position: absolute; inset: 10px; background: var(--paper); border-radius: 50%; }
.score-ring div { z-index: 1; }
.score-ring strong, .score-ring span { display: block; }
.score-ring strong { font-family: "Noto Kufi Arabic"; color: var(--green); font-size: 26px; }
.score-ring span { color: var(--muted); font-size: 9px; }
.result-stats { display: grid; grid-template-columns: repeat(3,1fr); background: #f2f0e9; border-radius: 16px; padding: 14px; margin-bottom: 22px; }
.result-stats div + div { border-right: 1px solid #d9dbd4; }
.result-stats span, .result-stats strong { display: block; }
.result-stats span { color: var(--muted); font-size: 9px; }
.result-stats strong { font-family: "Noto Kufi Arabic"; color: var(--green); font-size: 18px; }
.team-results { margin: -8px 0 22px; display: grid; gap: 8px; }
.team-results[hidden] { display: none; }
.team-result-row { display: grid; grid-template-columns: 35px 1fr auto auto; align-items: center; gap: 10px; padding: 11px 13px; background: #f5f3ed; border-radius: 13px; text-align: right; }
.team-result-row.winner { background: #ecf5ef; border: 1px solid #a8cdbc; }
.team-rank { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: white; color: var(--green); font-weight: 800; font-size: 11px; }
.team-result-row i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--team-color); margin-left: 6px; }
.team-result-row strong { font-size: 12px; }
.team-result-row span:not(.team-rank) { color: var(--muted); font-size: 9px; }
.team-result-row b { color: var(--green); font-family: "Noto Kufi Arabic"; font-size: 15px; }
.result-actions { display: flex; gap: 10px; }
.result-actions .primary-btn { flex: 1; min-width: 0; }
.secondary-btn { flex: 1; border: 1px solid #ccd4ce; color: var(--green); background: white; border-radius: 16px; cursor: pointer; font-weight: 800; }
.fresh-note { font-size: 9px !important; color: #749087 !important; margin: 15px 0 0 !important; }
.toast { position: fixed; bottom: 25px; right: 50%; transform: translate(50%, 20px); background: #102c25; color: white; padding: 11px 18px; border-radius: 12px; font-size: 11px; opacity: 0; pointer-events: none; transition: .25s; z-index: 20; box-shadow: 0 8px 30px rgba(0,0,0,.2); }
.toast.show { opacity: 1; transform: translate(50%, 0); }

@media (max-width: 850px) {
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .hero { padding-top: 45px; }
}
@media (min-width: 700px) and (max-width: 1180px) {
  .topbar { padding: 20px max(22px, env(safe-area-inset-left)) 15px max(22px, env(safe-area-inset-right)); }
  main { padding-right: max(22px, env(safe-area-inset-right)); padding-left: max(22px, env(safe-area-inset-left)); }
  .hero { padding: 42px 0 38px; }
  .hero h1 { font-size: clamp(42px, 7vw, 62px); }
  .setup-panel { padding: 28px; }
  .category-grid { grid-template-columns: repeat(4, 1fr); gap: 11px; }
  .category-card { min-height: 118px; }
  .segmented button, .text-btn, .board-end-btn { min-height: 48px; }
  .team-board { margin-top: 18px; border-radius: 24px; }
  .board-header { min-height: 108px; grid-template-columns: 225px 1fr 100px; padding: 17px 20px; }
  .board-grid-wrap { padding: 13px; -webkit-overflow-scrolling: touch; }
  .board-grid { grid-template-columns: repeat(var(--board-columns, 1), minmax(145px, 1fr)); min-width: calc(var(--board-columns, 1) * 154px); }
  .board-question { min-height: 78px; touch-action: manipulation; }
  .board-question strong { font-size: 21px; }
  .board-team-card { min-height: 66px; }
  .game-shell { max-width: 920px; margin: 25px auto; }
  .question-card { padding: 34px; }
  .question-card h2 { font-size: clamp(23px, 3.2vw, 30px); min-height: 88px; }
  .team-answer-panel button, .solo-answer-panel button, .lifelines button, .next-btn, .audio-quiz-panel button { min-height: 50px; font-size: 12px; }
  .award-team-buttons { gap: 10px; }
}
@media (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {
  .board-grid { grid-template-columns: repeat(var(--board-columns, 1), 160px); min-width: calc(var(--board-columns, 1) * 170px); }
  .board-team-scores { position: sticky; bottom: env(safe-area-inset-bottom); z-index: 3; }
  .question-card { padding: 30px 25px; }
}
@media (min-width: 900px) and (max-width: 1180px) and (orientation: landscape) {
  .topbar { padding-top: 9px; padding-bottom: 9px; }
  .brand-mark { width: 40px; height: 40px; }
  .brand strong { font-size: 17px; }
  .team-board { margin-top: 7px; }
  .board-header { min-height: 80px; padding: 9px 17px; }
  .board-turn h2 { font-size: 25px; }
  .board-progress { height: 58px; }
  .board-grid-wrap { padding: 8px; }
  .board-column { gap: 6px; }
  .board-category-head { min-height: 54px; padding: 6px; }
  .board-category-head span { font-size: 18px; }
  .board-category-head strong { margin-top: 2px; font-size: 10px; }
  .board-question { min-height: 52px; }
  .board-question strong { font-size: 17px; }
  .board-team-scores { padding: 8px; }
  .board-team-card { min-height: 52px; padding: 8px 13px; }
}
@media (min-width: 900px) {
  body.team-board-active .topbar { display: none; }
  body.team-board-active main { padding-top: 8px; }
  body.team-board-active .team-board { margin-top: 0; }
  body.team-board-active .board-header { min-height: 82px; padding: 9px 18px; }
  body.team-board-active .board-turn h2 { font-size: 25px; }
  body.team-board-active .board-progress { height: 58px; }
  body.team-board-active .board-grid-wrap { padding: 8px; }
  body.team-board-active .board-column { gap: 6px; }
  body.team-board-active .board-category-head { min-height: 54px; padding: 5px; }
  body.team-board-active .board-category-head span { font-size: 18px; }
  body.team-board-active .board-category-head strong { margin-top: 2px; font-size: 10px; }
  body.team-board-active .board-question { min-height: 52px; }
  body.team-board-active .board-question strong { font-size: 17px; }
  body.team-board-active .board-team-scores { padding: 8px; }
  body.team-board-active .board-team-card { min-height: 52px; padding: 8px 13px; }
}
@media (max-width: 600px) {
  .topbar, main { padding-left: 15px; padding-right: 15px; }
  .record-pill { display: none; }
  .hero { padding: 35px 0; }
  .hero h1 { font-size: 34px; letter-spacing: -1.5px; }
  .hero > p { font-size: 13px; }
  .setup-panel { padding: 22px 15px; border-radius: 23px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .category-card { min-height: 103px; }
  .game-options { grid-template-columns: 1fr; gap: 16px; }
  .mode-heading, .team-count-row { align-items: stretch; flex-direction: column; }
  .segmented.compact { min-width: 0; width: 100%; }
  .team-inputs { grid-template-columns: 1fr; }
  .points-guide { gap: 9px 13px; }
  .points-guide .speed-bonus { margin-right: 0; width: 100%; }
  .start-row { align-items: stretch; flex-direction: column; gap: 14px; }
  .selection-summary { justify-content: center; }
  .game-shell { margin-top: 20px; }
  .team-board { margin-top: 14px; border-radius: 20px; }
  .board-header { grid-template-columns: 1fr auto; min-height: 0; padding: 15px; }
  .board-turn { grid-column: 1 / -1; grid-row: 1; }
  .board-header-actions { grid-column: 1; grid-row: 2; }
  .board-progress { grid-column: 2; grid-row: 2; width: 72px; height: 58px; }
  .board-grid-wrap { padding: 10px; }
  .board-grid { grid-template-columns: repeat(var(--board-columns, 1), 142px); min-width: calc(var(--board-columns, 1) * 152px); }
  .board-category-head { min-height: 68px; }
  .board-question { min-height: 66px; }
  .board-team-scores { grid-template-columns: repeat(2, 1fr); padding: 10px; }
  .board-team-card { padding: 10px; }
  .board-team-card b { font-size: 15px; }
  .game-status { grid-template-columns: 67px 1fr 67px; gap: 10px; }
  .team-scoreboard { grid-template-columns: repeat(2, 1fr); }
  .team-score { padding: 8px; gap: 6px; }
  .team-score b { font-size: 13px; }
  .question-card { padding: 26px 17px; border-radius: 23px; }
  .question-card h2 { min-height: 92px; margin: 25px 0; font-size: 18px; }
  .question-meta { gap: 6px; flex-wrap: wrap; }
  .timer { margin-right: auto; }
  .award-team-buttons { grid-template-columns: 1fr; }
  .team-answer-panel button { min-height: 44px; }
  .audio-quiz-panel { align-items: stretch; flex-direction: column; }
  .audio-quiz-panel button { width: 100%; }
  .solo-judge-actions { grid-template-columns: 1fr; }
  .lifelines > span { display: none; }
  .result-card { padding: 28px 18px; margin-top: 20px; }
  .result-actions { flex-direction: column; }
  .secondary-btn { padding: 13px; }
  .team-result-row { grid-template-columns: 31px 1fr auto; }
  .team-result-row span:not(.team-rank) { display: none; }
}

body.iphone-view .ambient { display: none; }
body.iphone-view .topbar,
body.iphone-view main { width: 100%; max-width: 430px; padding-left: 15px; padding-right: 15px; }
body.iphone-view .topbar { margin: auto; padding-top: 14px; padding-bottom: 12px; }
body.iphone-view .record-pill { display: none; }
body.iphone-view .view-switch-btn { width: 45px; padding: 0; justify-content: center; }
body.iphone-view .view-switch-btn b { display: none; }
body.iphone-view .brand-mark { width: 42px; height: 42px; }
body.iphone-view .brand strong { font-size: 17px; }
body.iphone-view .hero { padding: 35px 0; }
body.iphone-view .hero h1 { font-size: 34px; letter-spacing: -1.5px; }
body.iphone-view .hero > p { font-size: 13px; }
body.iphone-view .setup-panel { padding: 22px 15px; border-radius: 23px; }
body.iphone-view .category-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
body.iphone-view .category-card { min-height: 103px; }
body.iphone-view .game-options { grid-template-columns: 1fr; gap: 16px; }
body.iphone-view .mode-heading,
body.iphone-view .team-count-row { align-items: stretch; flex-direction: column; }
body.iphone-view .segmented.compact { min-width: 0; width: 100%; }
body.iphone-view .team-inputs { grid-template-columns: 1fr; }
body.iphone-view .start-row { align-items: stretch; flex-direction: column; gap: 14px; }
body.iphone-view .selection-summary { justify-content: center; }
body.iphone-view .game-shell { margin-top: 20px; }
body.iphone-view .team-board { margin-top: 14px; border-radius: 20px; }
body.iphone-view.team-board-active .topbar { display: none; }
body.iphone-view.team-board-active main { padding-top: 0; }
body.iphone-view .board-header { grid-template-columns: 1fr auto; min-height: 0; padding: 15px; }
body.iphone-view .board-turn { grid-column: 1 / -1; grid-row: 1; }
body.iphone-view .board-header-actions { grid-column: 1; grid-row: 2; }
body.iphone-view .board-header-actions { gap: 6px; }
body.iphone-view .board-end-btn,
body.iphone-view .board-view-btn { padding: 9px 10px; font-size: 9px; }
body.iphone-view .board-progress { grid-column: 2; grid-row: 2; width: 72px; height: 58px; }
body.iphone-view .board-grid-wrap { padding: 10px; }
body.iphone-view .board-grid { grid-template-columns: repeat(var(--board-columns, 1), 142px); min-width: calc(var(--board-columns, 1) * 152px); }
body.iphone-view .board-category-head { min-height: 68px; }
body.iphone-view .board-question { min-height: 66px; }
body.iphone-view .board-team-scores { grid-template-columns: repeat(2, 1fr); padding: 10px; }
body.iphone-view .board-team-card { min-height: 0; padding: 10px; }
body.iphone-view .board-team-card b { font-size: 15px; }
body.iphone-view .game-status { grid-template-columns: 67px 1fr 67px; gap: 10px; }
body.iphone-view .team-scoreboard { grid-template-columns: repeat(2, 1fr); }
body.iphone-view .team-score { padding: 8px; gap: 6px; }
body.iphone-view .team-score b { font-size: 13px; }
body.iphone-view .question-card { padding: 26px 17px; border-radius: 23px; }
body.iphone-view .question-card h2 { min-height: 92px; margin: 25px 0; font-size: 18px; }
body.iphone-view .question-meta { gap: 6px; flex-wrap: wrap; }
body.iphone-view .award-team-buttons,
body.iphone-view .solo-judge-actions { grid-template-columns: 1fr; }
body.iphone-view .audio-quiz-panel { align-items: stretch; flex-direction: column; }
body.iphone-view .audio-quiz-panel button { width: 100%; }
body.iphone-view .lifelines > span { display: none; }
body.iphone-view .result-card { padding: 28px 18px; margin-top: 20px; }
body.iphone-view .result-actions { flex-direction: column; }
body.iphone-view .secondary-btn { padding: 13px; }
body.iphone-view .team-result-row { grid-template-columns: 31px 1fr auto; }
body.iphone-view .team-result-row span:not(.team-rank) { display: none; }
body.phone-board-layout.team-board-active .topbar { display: none; }
body.phone-board-layout.team-board-active main { padding-top: 0; padding-right: max(15px, env(safe-area-inset-right)); padding-left: max(15px, env(safe-area-inset-left)); }

@media (orientation: landscape) {
  body.phone-board-layout.team-board-active main { width: 100%; max-width: none; padding-right: max(8px, env(safe-area-inset-right)); padding-left: max(8px, env(safe-area-inset-left)); }
  body.phone-board-layout.team-board-active .team-board { width: 100%; max-width: 1180px; margin: 0 auto; border-radius: 22px; }
  body.phone-board-layout.team-board-active .board-header { min-height: 80px; padding: 8px 15px; grid-template-columns: minmax(190px, 220px) 1fr 82px; gap: 10px; }
  body.phone-board-layout.team-board-active .board-header-actions { grid-column: auto; grid-row: auto; justify-self: start; }
  body.phone-board-layout.team-board-active .board-turn { grid-column: auto; grid-row: auto; }
  body.phone-board-layout.team-board-active .board-turn h2 { font-size: clamp(19px, 3vw, 25px); }
  body.phone-board-layout.team-board-active .board-progress { grid-column: auto; grid-row: auto; width: 76px; height: 56px; }
  body.phone-board-layout.team-board-active .board-grid-wrap { padding: 7px; overflow-x: hidden; }
  body.phone-board-layout.team-board-active .board-grid { grid-template-columns: repeat(var(--board-columns, 1), minmax(0, 1fr)); min-width: 0; gap: 5px; }
  body.phone-board-layout.team-board-active .board-column { gap: 5px; }
  body.phone-board-layout.team-board-active .board-category-head { min-height: 50px; padding: 4px; }
  body.phone-board-layout.team-board-active .board-category-head span { font-size: 16px; }
  body.phone-board-layout.team-board-active .board-category-head strong { margin-top: 1px; font-size: 9px; line-height: 1.35; }
  body.phone-board-layout.team-board-active .board-question { min-height: 48px; }
  body.phone-board-layout.team-board-active .board-question strong { font-size: 16px; }
  body.phone-board-layout.team-board-active .board-team-scores { padding: 7px; }
  body.phone-board-layout.team-board-active .board-team-card { padding: 7px 10px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }