/* The site's own pages (About, Contact, Terms, Privacy, Refunds, and the verify-email and reset-password pages the
   emails link to) in the game's window look: the ornate gold frame (assets/ui/frame.png?v=705fc0f9) on dark wood, the page title
   on the red ribbon (assets/ui/ribbon.png?v=138efc01) over the frame's top edge, Cinzel headings with the engraved divider, and
   the wax and parchment button. Kept the same in web/mobile and web/desktop (rtshuffle.com serves the email pages). */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    min-height: 100vh;
    padding: 64px 16px 32px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    color: #f1e3c4;
    background: radial-gradient(ellipse at 50% 0%, rgba(120, 70, 20, 0.35), transparent 60%), #0d0705;
}

.container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 72px 36px 36px;
    background: linear-gradient(135deg, rgba(44, 24, 16, 0.97), rgba(26, 15, 10, 0.97));
    background-clip: padding-box;
    border: 13px solid transparent;
    border-image: url('assets/ui/frame.png?v=705fc0f9') 24% / 44px stretch;
    border-radius: 6px;
    box-shadow: 0 0 40px rgba(255, 200, 80, 0.25), 0 12px 40px rgba(0, 0, 0, 0.7);
}
.container.narrow { max-width: 500px; text-align: center; }

/* The page title rides the ribbon over the frame's top edge */
h1 {
    position: absolute;
    top: -62px;
    left: 50%;
    transform: translateX(-50%);
    width: min(380px, 94vw);
    aspect-ratio: 720 / 207;
    padding: 0 calc(min(380px, 94vw) * 0.2) calc(min(380px, 94vw) * 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('assets/ui/ribbon.png?v=138efc01') center / contain no-repeat;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.7));
    font-family: 'Cinzel', serif;
    font-size: clamp(15px, 4.6vw, 21px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1px;
    text-align: center;
    color: #ffe9a8;
    text-shadow: 0 2px 0 #4a0d0d, 0 0 12px rgba(255, 200, 80, 0.45);
}

h2 {
    margin: 34px 0 12px;
    font-family: 'Cinzel', serif;
    font-size: 1.25em;
    font-weight: 700;
    color: #ffd98a;
    letter-spacing: 0.5px;
}
/* the engraved flourish under section titles */
h2::after {
    content: '';
    display: block;
    width: min(200px, 60%);
    aspect-ratio: 440 / 93;
    margin-top: 6px;
    background: url('assets/ui/divider.png?v=c926aec4') left center / contain no-repeat;
}
h3 { margin: 22px 0 8px; font-family: 'Cinzel', serif; font-size: 1.02em; font-weight: 600; color: #e8c27a; }
p { margin-bottom: 14px; }
ul, ol { margin: 0 0 16px 26px; }
li { margin-bottom: 8px; }
strong { color: #ffe9a8; font-weight: 600; }
a { color: #ffd700; }
a:hover { color: #ffe9a8; }
hr { margin: 28px 0; border: none; height: 1px; background: linear-gradient(90deg, transparent, #8b6914, transparent); }

.hero { margin-bottom: 18px; text-align: center; }
.hero p { font-size: 1.15em; font-style: italic; color: #e8c27a; }
.last-updated { margin-bottom: 20px; text-align: center; font-style: italic; color: #b89c70; }

/* boxes: notices, cards */
.important-notice, .highlight, .info-box, .contact-info, .response-time, .password-requirements, .next-step {
    margin: 18px 0;
    padding: 16px 20px;
    border: 1px solid #8b6914;
    border-left: 4px solid #d4af37;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    text-align: left;
}
.important-notice { border-color: #7a1f14; border-left-color: #b0302a; background: rgba(110, 20, 12, 0.3); }
.important-notice p:last-child, .highlight p:last-child, .info-box p:last-child, .contact-info p:last-child { margin-bottom: 0; }

.feature-grid, .stats-grid, .contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 14px;
    margin: 16px 0 22px;
}
.feature-card, .stat-card, .contact-card, .contact-section {
    padding: 16px;
    border: 1px solid #8b6914;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.28);
}
.feature-card h3, .contact-card h3 { margin-top: 0; }
.feature-card p { margin-bottom: 0; }
.stat-card { text-align: center; }
.stat-number { font-family: 'Cinzel', serif; font-size: 1.8em; font-weight: 700; color: #ffd98a; }
.stat-label { color: #b89c70; }
.contact-title { margin-bottom: 6px; font-family: 'Cinzel', serif; font-weight: 700; color: #ffd98a; }
.contact-email { font-weight: 600; word-break: break-all; }
.contact-section { margin: 16px 0; }
.timeline { margin: 16px 0; border-left: 2px solid #8b6914; padding-left: 18px; }
.timeline-item { margin-bottom: 14px; }
.timeline-date { font-family: 'Cinzel', serif; font-size: 0.9em; color: #d4af37; }

/* the wax and parchment button (as the game's .modal-btn) */
.button, .back-link {
    display: inline-block;
    min-width: 200px;
    margin-top: 24px;
    padding: 12px 28px;
    border: 1px solid #8a6a2a;
    border-radius: 6px;
    background: linear-gradient(180deg, #f8ecc8, #e3c98c);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 0 #6b4a16, 0 6px 12px rgba(0, 0, 0, 0.5);
    font-family: 'Cinzel', serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    color: #3a2410;
    cursor: pointer;
}
.button:hover, .back-link:hover { color: #3a2410; filter: brightness(1.06); }
.button:disabled { opacity: 0.6; cursor: not-allowed; }
.back-link { display: block; width: fit-content; margin: 30px auto 0; }

/* forms (reset password) */
.form-group { margin-bottom: 18px; text-align: left; }
label { display: block; margin-bottom: 6px; font-family: 'Cinzel', serif; font-size: 14px; font-weight: 600; color: #d4af37; }
input[type="password"], input[type="text"], input[type="email"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #8b6914;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    color: #f1e3c4;
    font-family: inherit;
    font-size: 17px;
}
input:focus { outline: none; border-color: #ffd700; box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.25); }

.message { margin-bottom: 20px; }
.success { color: #9fe39f; }
.error { margin: 14px 0; padding: 12px 16px; border: 1px solid #b0302a; border-radius: 6px; background: rgba(110, 20, 12, 0.35); color: #ffb3a8; }
.status-title { margin: 6px 0 12px; font-family: 'Cinzel', serif; font-size: 1.35em; font-weight: 700; color: #ffd98a; }
.status-title.good { color: #9fe39f; }
.status-title.bad { color: #ff9b8f; }

.spinner {
    width: 46px;
    height: 46px;
    margin: 20px auto;
    border: 4px solid #4a2c17;
    border-top-color: #ffd700;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 520px) {
    body { padding: 62px 10px 20px; font-size: 17px; }
    .container { padding: 64px 18px 24px; }
}