/* Base page styles */
@font-face{font-family:Pretendard;src:url('../PretendardVariable.woff2') format('woff2');font-display:swap}
    :root{--ink:var(--text-primary);--muted:var(--text-secondary);--line:var(--border-default);--bg:var(--bg-page);--card:var(--bg-surface);--blue:var(--brand);--sky:var(--brand-weak)}
    *{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Pretendard,system-ui,sans-serif;font-weight:430;letter-spacing:-.012em;line-height:1.68}
    .wrap{max-width:920px;margin:auto;padding:22px 18px 60px}
    .hero{padding:26px 24px;border-radius:22px;background:linear-gradient(128deg,#143049,#253f66);color:#fff}
    .eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;color:#c9ddff}
    .hero h1{margin:8px 0;font-size:clamp(26px,5vw,36px);font-weight:680;letter-spacing:-.04em;line-height:1.2}
    .hero p{margin:0;max-width:56ch;color:#e4dcfa;font-size:14.5px}
    .rule{display:inline-flex;margin-top:14px;padding:6px 10px;border-radius:999px;border:1px solid #ffffff33;background:#ffffff16;font-size:12px}
    .card{margin-top:14px;padding:18px;border:1px solid #e1e7f0;border-radius:18px;background:#fff;color:#14233b}
    .card h2{margin:0 0 6px;font-size:18px;font-weight:660;color:#14233b}
    .muted{color:#5d6f88;font-size:13px;line-height:1.55}
    .screen{margin-top:12px;padding:14px;border:1px solid #e1e7f0;border-radius:16px;background:#fff;color:#14233b}
    .screen figcaption{margin-top:8px;color:#5d6f88;font-size:12px;line-height:1.5}
    .src-badge{display:inline-flex;padding:3px 8px;border-radius:999px;background:#f0ebfa;color:#6c4ac6;font-size:11px;font-weight:700}
    .chart{display:block;width:100%;height:auto;max-height:220px}
    .prompt{margin:12px 0 0;padding:12px 13px;border-left:4px solid #8b5bd5;border-radius:0 12px 12px 0;background:#6c4ac6;color:#fff;font-size:14px;line-height:1.55}.prompt b{color:#fff}
    label{display:block;margin-top:12px;font-size:13px;font-weight:620}
    textarea{display:block;width:100%;min-height:110px;margin-top:6px;padding:11px 12px;border:1px solid #e1e7f0;border-radius:12px;background:#fff;color:#14233b;font:inherit;font-size:14px;line-height:1.6;resize:vertical}
    .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
    .btn{min-height:44px;padding:10px 14px;border:0;border-radius:12px;background:#6c4ac6;color:#fff;font:650 13px Pretendard,system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
    .btn.ghost{background:#fff;color:#6c4ac6;border:1px solid #8b5bd5}
    .btn:disabled{opacity:.55;cursor:not-allowed}
    .feedback{display:none;margin-top:14px;padding:14px;border-radius:14px;background:#fff;border:1px solid #e1e7f0;color:#14233b;font-size:13.5px;line-height:1.6}
    .feedback.on{display:block}
    .counter{margin-top:12px;padding:12px 13px;border-radius:12px;border:1px solid var(--accent-violet);background:var(--accent-violet-weak);color:var(--text-primary);font-size:13px;line-height:1.55}
    .ghost-box{margin-top:12px;padding:13px;border:1px dashed #e1e7f0;border-radius:14px;background:#fff;color:#14233b}
    .ghost-box h3{margin:0 0 6px;font-size:14px;color:#14233b}
    .ghost-box p{margin:0;color:#5d6f88;font-size:13px;line-height:1.55}
    .ghost-box .tag{display:inline-flex;margin-bottom:6px;padding:3px 8px;border-radius:999px;background:#f0ebfa;color:#6c4ac6;font-size:11px;font-weight:700}
    .mine{margin-top:10px;padding:11px 12px;border-radius:12px;background:#fff;border:1px solid #e1e7f0;color:#14233b;font-size:13px;line-height:1.55}
    .links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
    .links a{display:inline-flex;align-items:center;min-height:40px;padding:8px 12px;border-radius:10px;background:#fff;color:#6c4ac6;border:1px solid #8b5bd5;text-decoration:none;font-size:12.5px;font-weight:650}
    .status{margin-top:8px;font-size:12px;color:#5d6f88}
    .foot{margin-top:18px;color:#5d6f88;font-size:12px;line-height:1.6;text-align:center}
    @media(max-width:520px){.wrap{padding:14px 12px 48px}.hero{padding:20px 16px}.actions .btn{width:100%;justify-content:center}}

/* Final light/dark card-tier overrides */
/* After product-theme.css: white/violet two-tier (academy pattern). */
    .card,.screen,.ghost-box,.mine,.feedback,textarea{background:var(--bg-surface)!important;color:var(--text-primary)!important;border-color:var(--border-default)!important}
    .card h2,.ghost-box h3{color:var(--text-primary)!important}
    .muted,.screen figcaption,.ghost-box p,.status,.foot{color:var(--text-secondary)!important}
    .prompt{background:var(--brand-action)!important;color:#fff!important;border-left-color:#8b5bd5!important}
    .prompt b{color:#fff!important}
    .btn{background:var(--brand-action)!important;color:#fff!important}
    .btn.ghost,.links a{background:var(--bg-surface)!important;color:var(--accent-violet)!important;border-color:var(--accent-violet)!important}
    .src-badge,.ghost-box .tag{background:var(--accent-violet-weak)!important;color:var(--accent-violet)!important}
    /* Caution counter-example box — keep amber semantic */
    .counter{background:var(--accent-violet-weak)!important;color:var(--text-primary)!important;border-color:var(--accent-violet)!important}

/* Consolidated from #observationGameCardTierPatch; keep in page CSS, never inline. */
/* After product-theme.css: white/violet two-tier (academy pattern). */
    .card,.screen,.ghost-box,.mine,.feedback,textarea{background:var(--bg-surface)!important;color:var(--text-primary)!important;border-color:var(--border-default)!important}
    .card h2,.ghost-box h3{color:var(--text-primary)!important}
    .muted,.screen figcaption,.ghost-box p,.status,.foot{color:var(--text-secondary)!important}
    .prompt{background:var(--brand-action)!important;color:#fff!important;border-left-color:#8b5bd5!important}
    .card p.prompt,.prompt b,.prompt *{color:#fff!important}
    .btn{background:var(--brand-action)!important;color:#fff!important}
    .btn.ghost,.links a{background:var(--bg-surface)!important;color:#6c4ac6!important;border-color:var(--accent-violet)!important}
    .src-badge,.ghost-box .tag{background:var(--accent-violet-weak)!important;color:#6c4ac6!important}
    .counter{background:var(--bg-surface)8eb!important;color:#7a5a1d!important;border-color:#f0d7a8!important}
    .card p.muted{color:var(--text-secondary)!important}
    .foot{color:var(--text-secondary)!important}
    .links a{color:var(--accent-violet)!important}