:root { --af-bg: #f7f8fc; --af-surface: #ffffff; --af-ink: #1a1d2e; --af-ink-soft: #6b7280; --af-border: rgba(26,29,46,0.10); --af-green: #58cc02; --af-green-dark: #46a302; --af-green-light: rgba(88,204,2,0.12); --af-yellow: #ffd900; --af-yellow-dark: #e6c300; --af-red: #ff4b4b; --af-red-dark: #e03e3e; --af-blue: #1cb0f6; --af-purple: #ce82ff; --af-orange: #ff9600; --af-dark: #131f2e; --af-dark-2: #1c2e42; --af-dark-surface: #243447; --af-dark-surface-2: #2d4159; --af-dark-border: rgba(255,255,255,0.08); --af-dark-border-2: rgba(255,255,255,0.14); --af-dark-text: rgba(255,255,255,0.92); --af-dark-soft: rgba(255,255,255,0.48); --af-dark-muted: rgba(255,255,255,0.28); --af-shadow-xs: 0 1px 4px rgba(26,29,46,0.06); --af-shadow-sm: 0 2px 8px rgba(26,29,46,0.08); --af-shadow-md: 0 8px 24px rgba(26,29,46,0.12); --af-shadow-lg: 0 20px 48px rgba(26,29,46,0.16); --af-shadow-xl: 0 32px 64px rgba(26,29,46,0.20); --af-shadow-game: 0 4px 20px rgba(0,0,0,0.40); --af-r-xs: 8px; --af-r-sm: 12px; --af-r-md: 18px; --af-r-lg: 24px; --af-r-xl: 32px; --af-r-full: 999px; --af-space-xs: 4px; --af-space-sm: 8px; --af-space-md: 16px; --af-space-lg: 24px; --af-space-xl: 40px; --af-space-2xl: 64px; --opt-bg: #1e293b; --opt-border: #0f172a; --opt-text: #FFFFFF; --tenant-primary: #1cb0f6; --tenant-accent: #58cc02; --tenant-accent-contrast: #0d1b28; --tenant-lobby-bg-start: #101b2a; --tenant-lobby-bg-end: #0f1a27; --tenant-game-bg-start: #0f1928; --tenant-game-bg-end: #0b141f; --tenant-surface-bg: rgba(26,38,53,0.94); --tenant-surface-border: rgba(255,255,255,0.14); --tenant-hud-bg: rgba(8,13,21,0.86); --tenant-hud-border: rgba(255,255,255,0.14); --tenant-text-color: rgba(255,255,255,0.94); --tenant-soft-text-color: rgba(255,255,255,0.64); --z-base: 1; --z-content: 2; --z-sticky: 10; --z-header: 20; --z-cta-bar: 50; --z-nav: 100; --z-modal: 200; --z-loading: 300; --af-font: "Nunito",system-ui,-apple-system,sans-serif; --af-font-mono: ui-monospace,monospace; --af-surface-hover: #f0f1f6; }
:root { --af-hud-blur: 14px; }
h1.game-question-text { font-size: inherit; font-weight: inherit; margin: 0px; }
*, ::before, ::after { box-sizing: border-box; margin: 0px; padding: 0px; }
html { font-size: 16px; text-size-adjust: 100%; }
html, body { background: rgb(13, 24, 38); }
body { font-family: var(--af-font); font-size: 1rem; line-height: 1.5; color: var(--af-ink); min-height: min(100svh, 100dvh); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body:has(main.page-shell) { background: var(--af-bg); }
h1, h2, h3, h4, h5, h6 { font-family: var(--af-font); font-weight: 800; line-height: 1.2; color: var(--af-ink); }
p { line-height: 1.6; }
a { color: var(--af-blue); text-decoration: none; }
button { font-family: var(--af-font); cursor: pointer; border: none; background: none; }
img, svg { display: block; max-width: 100%; }
body:has(main.game-app-shell), body:has(main.tenant-app-lobby) { background: rgb(5, 13, 28); padding: 0px; overflow: hidden; height: min(100svh, 100dvh); }
@keyframes slideUpFade { 
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes slideDownFade { 
  0% { opacity: 0; transform: translateY(-28px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes correctPulse { 
  0% { transform: scale(1); outline: rgba(88, 204, 2, 0.5) solid 0px; }
  50% { transform: scale(1.02); outline: rgba(88, 204, 2, 0) solid 10px; }
  100% { transform: scale(1); outline: rgba(88, 204, 2, 0) solid 0px; }
}
@keyframes incorrectShake { 
  0%, 100% { transform: translateX(0px); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
@keyframes bounceIn { 
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.08); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes popIn { 
  0% { opacity: 0; transform: scale(0.88) translateY(8px); }
  70% { transform: scale(1.02) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}
@keyframes statSlideUp { 
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes floatOrb { 
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-18px) scale(1.04); }
}
@keyframes fadeIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
@keyframes progressFill { 
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@keyframes shimmer { 
  0% { background-position: 200% 0px; }
  100% { background-position: -200% 0px; }
}
@keyframes lobby-sync-slide { 
  0% { transform: translateX(-250%); }
  100% { transform: translateX(550%); }
}
.game-app-shell { display: flex; flex-direction: column; height: 100%; min-height: 100%; background: var(--af-dark); overflow: hidden; font-family: var(--af-font); position: relative; }
.game-header { display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top,8px) + 8px) 16px 14px; background: linear-gradient(180deg,color-mix(in srgb,var(--tenant-primary,var(--af-dark)) 16%,var(--af-dark)) 0%,var(--af-dark) 100% ); border-bottom: 1px solid color-mix(in srgb,var(--tenant-primary,transparent) 22%,var(--af-dark-border)); flex-shrink: 0; z-index: var(--z-sticky); }
.game-progress-wrap { flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0px; }
.game-progress-track { height: 14px; background: var(--af-dark-surface); border-radius: var(--af-r-full); overflow: hidden; }
.game-progress-fill { height: 100%; background: linear-gradient( 90deg,var(--tenant-primary) 0%,color-mix(in srgb,var(--tenant-primary) 60%,var(--tenant-accent)) 60%,var(--tenant-accent) 100% ); border-radius: var(--af-r-full); transition: width 0.4s; min-width: 10px; will-change: width; box-shadow: 0 0 12px color-mix(in srgb,var(--tenant-accent) 40%,transparent); }
.game-elapsed-timer { font-size: 1rem; font-weight: 900; color: rgba(255, 255, 255, 0.92); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; line-height: 1; text-align: center; transition: color 0.3s; }
@keyframes timerPulse { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
.game-score-badge { display: flex; flex-direction: row; align-items: center; gap: 3px; background: color-mix(in srgb,var(--tenant-primary,var(--af-dark-surface)) 18%,var(--af-dark-surface)); border: 1px solid color-mix(in srgb,var(--tenant-primary,var(--af-dark-border)) 30%,var(--af-dark-border)); border-radius: var(--af-r-full); padding: 6px 12px; flex-shrink: 0; }
.game-score-star { font-size: 0.75rem; color: var(--opt-text,#fff); line-height: 1; }
.game-score-num { font-size: 1rem; font-weight: 900; color: var(--opt-text,#fff); line-height: 1; }
.game-score-label { font-size: 0.6rem; font-weight: 700; color: color-mix(in srgb,var(--opt-text,#fff) 55%,transparent); text-transform: uppercase; letter-spacing: 0.06em; align-self: flex-end; margin-bottom: 1px; }
.game-body { position: relative; z-index: 1; flex: 1 1 0%; min-height: 0px; overflow: hidden auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; overscroll-behavior-y: contain; }
.game-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.game-share-icon-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--af-dark-soft); background: var(--af-dark-surface); border: 1px solid var(--af-dark-border); border-radius: var(--af-r-full); cursor: pointer; transition: 0.15s; font-family: var(--af-font); }
.game-question-card { background: var(--af-dark-surface); border: 1px solid var(--af-dark-border); border-radius: var(--af-r-lg); padding: 24px 20px; animation: 0.25s ease 0s 1 normal none running slideDownFade; display: flex; flex-direction: column; gap: 6px; }
.game-question-text { font-size: clamp(1.0625rem, 4vw, 1.3125rem); font-weight: 800; color: var(--af-dark-text); line-height: 1.4; letter-spacing: -0.01em; }
.game-options { display: flex; flex-direction: column; gap: 10px; }
.game-option { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border-radius: var(--af-r-md); border: 2.5px solid; cursor: pointer; font-size: 0.9375rem; font-weight: 700; color: rgb(255, 255, 255); text-align: left; transition: transform 0.12s, opacity 0.2s; animation: 0.25s ease 0s 1 normal both running popIn; will-change: transform, opacity; font-family: var(--af-font); position: relative; overflow: hidden; }
.game-option:nth-child(1) { animation-delay: 0.04s; }
.game-option:nth-child(2) { animation-delay: 0.08s; }
.game-option:nth-child(3) { animation-delay: 0.12s; }
.game-option:nth-child(4) { animation-delay: 0.16s; }
.game-option-key { width: 30px; height: 30px; border-radius: var(--af-r-xs); background: color-mix(in srgb,var(--tenant-accent,#D4AF37) 22%,transparent); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 900; flex-shrink: 0; letter-spacing: 0px; }
.game-option-text { flex: 1 1 0%; line-height: 1.3; }
.game-option[data-key] { background: var(--opt-bg); border-color: var(--opt-border); color: var(--opt-text,#fff); box-shadow: rgba(0, 0, 0, 0.2) 0px 7px 0px; }
@keyframes authSpinner { 
  100% { transform: rotate(360deg); }
}
@keyframes hintLoadPulse { 
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.25; }
}
.game-hint-in-card { padding: 8px 12px; background: color-mix(in srgb,var(--opt-text,#fff) 6%,transparent); border-left: 2px solid color-mix(in srgb,var(--opt-text,#fff) 22%,transparent); border-radius: 0 var(--af-r-sm) var(--af-r-sm) 0; font-size: 0.8125rem; color: color-mix(in srgb,var(--opt-text,#fff) 72%,transparent); font-weight: 500; line-height: 1.5; animation: 0.2s ease 0s 1 normal none running slideUpFade; }
.game-feedback-explanation { font-size: 0.8125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.7); margin: 0px; }
.game-feedback-explanation { font-size: 0.9rem; color: var(--af-dark-soft); line-height: 1.6; padding: 12px 14px; background: rgba(255, 255, 255, 0.04); border-radius: var(--af-r-sm); border: 1px solid var(--af-dark-border); }
@keyframes loadingDot { 
  0%, 80%, 100% { transform: scale(0.5); opacity: 0.3; }
  40% { transform: scale(1); opacity: 1; }
}
@keyframes afSoftFloat { 
  0%, 100% { transform: translate3d(0px, 0px, 0px) scale(1); }
  50% { transform: translate3d(0px, -18px, 0px) scale(1.06); }
}
@keyframes afHudPulse { 
  0%, 100% { filter: saturate(1); }
  50% { filter: saturate(1.35); }
}
@keyframes afShineSweep { 
  0% { transform: translateX(-120%); }
  100% { transform: translateX(140%); }
}
.tenant-app-lobby, .game-app-shell { position: relative; overflow: hidden; color: var(--tenant-text-color); background: radial-gradient(ellipse at 18% 0%,color-mix(in srgb,var(--tenant-accent) 32%,transparent) 0%,transparent 46%),radial-gradient(ellipse at 82% 12%,color-mix(in srgb,var(--tenant-primary) 44%,transparent) 0%,transparent 52%),linear-gradient(180deg,color-mix(in srgb,var(--tenant-primary) 84%,#030609) 0%,color-mix(in srgb,var(--tenant-primary) 42%,#040a14) 22%,color-mix(in srgb,var(--tenant-primary) 12%,#050d1c) 50%,#050d1c 100% ); }
@keyframes lobbyHistoryShimmer { 
  0% { background-position: 200% 0px; }
  100% { background-position: -200% 0px; }
}
@keyframes lobbyPulse { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
@keyframes lobbyRefreshSpin { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.game-header { gap: 9px; padding: calc(env(safe-area-inset-top,8px) + 6px) 10px 10px; background: color-mix(in srgb,var(--tenant-primary) 18%,#080d15); border-bottom: 1px solid color-mix(in srgb,var(--tenant-primary) 22%,var(--tenant-hud-border)); }
.game-progress-wrap { flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0px; }
.game-elapsed-timer { font-size: 1.05rem; font-weight: 900; color: rgba(255, 255, 255, 0.92); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; line-height: 1; text-align: center; }
.game-progress-track { width: 100%; height: 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08); }
.game-progress-fill { background: linear-gradient(90deg,var(--tenant-accent) 0%,color-mix(in srgb,var(--tenant-primary) 78%,#fff) 100%); animation: 1.8s ease-in-out 0s infinite normal none running afHudPulse; }
.game-score-badge { padding: 6px 10px; border-radius: 14px; background: color-mix(in srgb,var(--tenant-primary) 26%,var(--tenant-surface-bg)); border-color: color-mix(in srgb,var(--tenant-primary) 30%,var(--tenant-surface-border)); }
.game-score-label { color: color-mix(in srgb,var(--opt-text,#fff) 50%,transparent); }
.game-share-icon-btn { border-radius: 12px; width: 32px; height: 32px; }
.game-body { padding: 16px; gap: 14px; }
.game-question-card { border-radius: 20px; padding: 18px 14px; gap: 12px; border-color: color-mix(in srgb,var(--tenant-primary) 36%,var(--tenant-surface-border)); background: linear-gradient(165deg,color-mix(in srgb,var(--tenant-primary) 18%,var(--tenant-surface-bg)) 0%,color-mix(in srgb,var(--tenant-primary) 16%,var(--tenant-surface-bg)) 100%); box-shadow: rgba(0, 0, 0, 0.28) 0px 14px 28px, rgba(255, 255, 255, 0.06) 0px 1px 0px inset; }
.game-question-text { font-size: clamp(1.08rem, 4.8vw, 1.28rem); line-height: 1.34; color: var(--tenant-text-color); }
.game-options { gap: 11px; }
.game-option { min-height: 62px; padding: 14px; border-radius: 18px; box-shadow: rgba(0, 0, 0, 0.2) 0px 7px 0px; }
.game-option > * { position: relative; z-index: 1; }
.game-feedback-explanation { font-size: 0.8rem; line-height: 1.45; }
.ad-slot { width: 100%; display: flex; justify-content: center; overflow: hidden; min-height: 0px; max-height: 0px; opacity: 0; flex-shrink: 0; padding: 0px; transition: 0.3s; }
.ad-slot ins.adsbygoogle { display: block; width: 100%; max-width: 728px; max-height: 100px; }
.game-timer-row { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; }
@keyframes afShimmer { 
  0% { background-position: 200% 0px; }
  100% { background-position: -200% 0px; }
}
@keyframes afShimmer { 
  0% { background-position: 200% 0px; }
  100% { background-position: -200% 0px; }
}