/* This surface contains no drama artwork or media references. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body.age-pending, body.safe-page { margin: 0; min-height: 100dvh; background: #09070e; color: #fffaff; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "PingFang TC", sans-serif; }
.age-screen, .safe-screen { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: max(28px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.age-card, .safe-card { width: min(100%, 600px); padding: clamp(24px, 5vw, 42px); background: #15111d; border: 1px solid #3a2c43; border-radius: 24px; }
.age-brand { display: block; width: min(250px, 100%); height: auto; margin: 0 auto 30px; }
.age-badge { display: block; width: fit-content; margin: 0 auto 16px; padding: 7px 14px; border: 1px solid #ff4fd8; border-radius: 999px; color: #ff8be7; font-weight: 800; font-size: 1rem; letter-spacing: .08em; }
.age-card h1, .safe-card h1 { margin: 0 0 24px; font-size: clamp(1.4rem, 4.5vw, 1.9rem); line-height: 1.4; text-align: center; }
.age-copy, .safe-card p { font-size: 1rem; line-height: 1.85; color: #d1c9dc; }
.age-copy p { margin: 0 0 16px; }
.age-copy strong { color: #fffaff; }
.age-consent { display: flex; align-items: flex-start; gap: 12px; margin: 26px 0; padding: 16px; background: #21182a; border: 1px solid #4b3655; border-radius: 12px; cursor: pointer; font-size: 1rem; line-height: 1.65; }
.age-consent input { flex: 0 0 auto; width: 22px; height: 22px; margin: 3px 0 0; accent-color: #ff4fd8; cursor: pointer; }
.age-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.age-enter, .age-leave, .safe-link { min-height: 52px; display: flex; align-items: center; justify-content: center; padding: 13px 16px; border-radius: 12px; font: inherit; font-size: 1rem; font-weight: 800; line-height: 1.5; text-align: center; text-decoration: none; cursor: pointer; }
.age-enter { border: 1px solid #ff4fd8; background: #ff4fd8; color: #200b1d; }
.age-enter:disabled { border-color: #685064; background: #4d3549; color: #c9b4c4; cursor: not-allowed; }
.age-enter:not(:disabled):hover { background: #ff84e4; }
.age-leave, .safe-link { border: 1px solid #a89aaf; background: transparent; color: #fffaff; }
.age-leave:hover, .safe-link:hover { background: #2b2034; }
.age-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; color: #95899e; font-size: .875rem; line-height: 1.5; }
.age-footer a { color: #d1c9dc; text-underline-offset: 4px; padding: 7px 2px; }
.age-footer span { padding-block: 7px; }
.age-error { color: #ffb3c4; font-size: .9375rem; line-height: 1.6; margin: 0 0 16px; }
.age-screen :focus-visible, .safe-screen :focus-visible { outline: 3px solid #32e7ff; outline-offset: 4px; }
.safe-card h2 { margin: 26px 0 8px; font-size: 1.1rem; line-height: 1.6; }
.safe-card .safe-note { font-size: .875rem; color: #bdb5c8; }
@media (min-width: 640px) { .age-actions { grid-template-columns: 1.25fr 1fr; } }