[data-game=observe]{--game-accent-h: 185;--game-accent-s: 72%;--game-accent-l: 42%;--game-accent: hsl(var(--game-accent-h), var(--game-accent-s), var(--game-accent-l));--game-accent-hover: hsl(var(--game-accent-h), var(--game-accent-s), 48%);--game-accent-muted: hsl(var(--game-accent-h), 55%, 28%);--game-accent-subtle: hsl(var(--game-accent-h), 35%, 15%);--game-accent-glow: hsla(var(--game-accent-h), var(--game-accent-s), var(--game-accent-l), .3)}.observe-container{display:flex;flex-direction:column;align-items:center;width:100%;max-width:520px;margin:0 auto;padding:var(--space-4);box-sizing:border-box}.observe-intro{max-width:440px;margin:0 auto;padding:var(--space-6);text-align:center}.observe-progress{display:flex;justify-content:space-between;width:100%;max-width:320px;margin:var(--space-4) auto var(--space-6);position:relative}.observe-progress:before{content:"";position:absolute;top:50%;left:0;right:0;height:3px;background:var(--color-surface-overlay);z-index:1;transform:translateY(-50%);border-radius:var(--radius-full)}.observe-progress-bar{position:absolute;top:50%;left:0;height:3px;background:var(--game-accent);z-index:2;transform:translateY(-50%);transition:width var(--duration-normal) var(--ease-out);border-radius:var(--radius-full)}.observe-step{width:28px;height:28px;border-radius:var(--radius-full);background:var(--color-surface-sunken);border:2px solid var(--color-border-default);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:var(--text-xs);color:var(--color-text-secondary);z-index:3;transition:all var(--duration-normal) var(--ease-spring)}.observe-step[data-active]{background:var(--game-accent-subtle);border-color:var(--game-accent);color:var(--game-accent);box-shadow:0 0 12px var(--game-accent-glow);transform:scale(1.15)}.observe-step[data-complete]{background:var(--game-accent);border-color:var(--game-accent);color:#fff}.observe-board{width:100%;background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-card);padding:var(--space-6);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 8px 30px #0006}.observe-header{text-align:center;margin-bottom:var(--space-5)}.observe-header h2{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;color:var(--color-text-primary);margin-bottom:var(--space-1)}.observe-header p{font-size:var(--text-sm);color:var(--color-text-secondary)}.observe-image-frame{width:100%;max-width:440px;aspect-ratio:16/9;border-radius:var(--radius-xl);overflow:hidden;border:1.5px solid var(--color-border-default);background:var(--color-surface-sunken);position:relative;box-shadow:0 8px 24px #00000059;margin-bottom:var(--space-4)}.observe-image-frame img,.observe-image-frame video{width:100%;height:100%;object-fit:cover;transition:filter var(--duration-normal) var(--ease-out);display:block}.observe-image-frame.hidden img,.observe-image-frame.hidden video{filter:blur(40px) brightness(.25)}.observe-image-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0b0914d9;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--duration-normal) ease;z-index:5;text-align:center;padding:var(--space-4);box-sizing:border-box}.observe-image-frame.hidden .observe-image-overlay{opacity:1}.observe-image-overlay svg{color:var(--game-accent);margin-bottom:var(--space-2)}.observe-image-overlay p{font-family:var(--font-display);font-size:var(--text-base);font-weight:700;color:var(--color-text-primary)}.observe-countdown-wrap{width:100%;max-width:440px;display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}.observe-timer-bar{flex:1;height:8px;background:var(--color-surface-sunken);border-radius:var(--radius-full);overflow:hidden;border:1px solid var(--color-border-subtle)}.observe-timer-fill{width:100%;height:100%;background:var(--game-accent);box-shadow:0 0 10px var(--game-accent-glow);transition:width .1s linear;border-radius:var(--radius-full)}.observe-timer-text{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:700;color:var(--game-accent);width:32px;text-align:right}.observe-question-container{width:100%;display:flex;flex-direction:column;align-items:center}.observe-question-text{font-family:var(--font-display);font-size:var(--text-base);font-weight:700;text-align:center;margin-bottom:var(--space-4);line-height:1.5;color:var(--color-text-primary)}.observe-choices{display:grid;grid-template-columns:1fr;gap:var(--space-3);width:100%;max-width:440px}@media (min-width: 480px){.observe-choices{grid-template-columns:repeat(2,1fr)}}.observe-choice-btn{background:var(--color-surface-overlay);border:1.5px solid var(--color-border-default);color:var(--color-text-primary);padding:var(--space-3-5) var(--space-4);border-radius:var(--radius-lg);font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);text-align:left;transition:all var(--duration-normal) ease;display:flex;align-items:center}.observe-choice-btn:hover:not(:disabled){border-color:var(--game-accent);background:var(--game-accent-subtle);transform:translateY(-2px)}.observe-choice-btn:active:not(:disabled){transform:translateY(0)}.observe-choice-btn.correct{background:#34d39926!important;border-color:var(--color-status-success)!important;color:var(--color-status-success)!important}.observe-choice-btn.wrong{background:#ef444426!important;border-color:var(--color-status-error)!important;color:var(--color-status-error)!important}.observe-choice-letter{display:inline-flex;width:22px;height:22px;border-radius:var(--radius-md);background:var(--color-surface-sunken);color:var(--color-text-secondary);align-items:center;justify-content:center;font-weight:700;font-size:11px;margin-right:var(--space-3);border:1px solid var(--color-border-subtle)}.observe-choice-btn:hover:not(:disabled) .observe-choice-letter{background:var(--game-accent-muted);color:#fff;border-color:var(--game-accent)}.observe-choice-btn.correct .observe-choice-letter{background:var(--color-status-success);color:#fff;border-color:var(--color-status-success)}.observe-choice-btn.wrong .observe-choice-letter{background:var(--color-status-error);color:#fff;border-color:var(--color-status-error)}.observe-next-wrap{margin-top:var(--space-5);width:100%;display:flex;justify-content:center}