/* MeteorBall public pages (server-rendered): the game's palette and type, laid out for reading. */

html:has(body.public), body.public {
    background-color: #07060c;
    height: auto;
    min-height: 100%;
    overflow: auto;
    -webkit-user-select: text;
    user-select: text;
}
body.public {
    background: #07060c radial-gradient(ellipse at 50% -10%, #241a3a 0%, #07060c 60%) no-repeat;
    line-height: 1.55;
    font-size: 1.05rem;
}
body.public a { color: var(--mb-accent); }
body.public a:hover { text-decoration-thickness: 2px; }
body.public :focus-visible { outline: 3px solid var(--mb-accent); outline-offset: 2px; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 50; padding: 8px 14px; background: var(--mb-accent); color: #111 !important; border-radius: 8px; font-weight: 700; }
.skip-link:focus { top: 12px; }

/* ---------- Header and footer ---------- */
.site-header {
    position: relative; z-index: 20;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
    padding: 10px 20px;
    background: rgba(7, 6, 12, 0.85);
    border-bottom: 1px solid #2a2433;
}
.site-brand { line-height: 0; }
.site-brand img { width: 120px; height: auto; }
.site-nav { flex: 1; }
.site-nav ul, .site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.site-nav a, .site-account a { text-decoration: none; font-weight: 600; padding: 6px 0; display: inline-block; }
.site-nav a:hover, .site-account a:hover { text-decoration: underline; }
.site-account { display: flex; gap: 14px; align-items: center; }
.site-account-name { color: #d8cccc; }
.site-main { display: block; min-height: 60vh; }
.site-main:focus { outline: none; }
.site-footer { margin-top: 48px; padding: 24px 20px 32px; border-top: 1px solid #2a2433; color: #bfb3b3; font-size: 0.95rem; }
.site-footer ul { justify-content: center; margin-bottom: 10px; }
.site-footer p { text-align: center; margin: 0; }
.site-footer .site-copyright { margin-top: 8px; font-size: 0.85rem; }

/* ---------- Home: the original title screen ---------- */
body.public:has(.home-hero) .site-header { position: absolute; inset: 0 0 auto 0; background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); border: 0; }
/* At least a screen tall, and taller when its content needs it, so nothing in it is ever cut off. */
.home-hero { position: relative; min-height: max(100svh, 640px); padding-bottom: 64px; box-sizing: border-box; overflow: hidden; }
.home-hero .menu-content { padding-top: max(7vh, 80px); gap: 12px; }
.hero-brand { display: flex; flex-direction: column; align-items: center; }
.home-hero .menu-logo { width: min(86vw, 600px); height: auto; }
/* The free-to-play badge arrives once like a meteor coming at you: a far-off blur from the upper right (where its trail
   comes from) that speeds up as it gets closer, overshoots as if about to hit the screen, recoils and settles, then
   stays still. Its box is reserved by its width and aspect ratio, and the animation only transforms it, so nothing
   around it moves (the hero clips the start position). */
.hero-badge { width: 300px; height: auto; aspect-ratio: 400 / 251; margin-top: -34px; animation: badge-incoming 1100ms 150ms 1 both; }
@keyframes badge-incoming {
    0% { transform: translate(160px, -110px) scale(0.04); opacity: 0; filter: blur(4px); animation-timing-function: cubic-bezier(0.6, 0, 1, 0.6); }
    12% { opacity: 1; }
    72% { transform: scale(1.22); filter: blur(0) brightness(1.3); animation-timing-function: ease-out; }
    86% { transform: scale(0.96); filter: none; animation-timing-function: ease-in-out; }
    100% { transform: none; opacity: 1; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-badge { animation: none; } }
.hero-tagline, .hero-checks, .hero-depth { text-shadow: 0 1px 3px #000, 0 0 12px #000; text-align: center; }
.hero-tagline { margin: 0; font-size: clamp(1.1rem, 2.6vw, 1.4rem); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
/* Play now: the original game's Play button, larger than the others, with a warm glow. Now and then a glint of light
   sweeps across it and a small star twinkles in its corner; on hover it brightens and lifts. */
.hero-play {
    position: relative; display: block; width: 300px; border-radius: 16px; overflow: hidden;
    box-shadow: 0 0 0 2px rgba(255, 211, 77, 0.6), 0 0 28px rgba(255, 160, 60, 0.45);
    transition: transform 160ms ease-out, filter 160ms ease-out, box-shadow 160ms ease-out;
}
.hero-play:hover { transform: translateY(-2px); filter: brightness(1.12); box-shadow: 0 0 0 2px rgba(255, 221, 110, 0.9), 0 0 36px rgba(255, 170, 70, 0.65); }
.hero-play::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 236, 190, 0.25) 53%, transparent 62%);
    animation: play-glint 7s ease-in-out 1.5s infinite;
}
.hero-play::before {
    content: "✦"; position: absolute; top: 9%; right: 6%; z-index: 1; pointer-events: none;
    color: #fff3c4; font-size: 22px; line-height: 1; text-shadow: 0 0 8px #ffd34d, 0 0 16px #ff9a3c; transform: scale(0); opacity: 0;
    animation: play-twinkle 7s ease-out 1.5s infinite;
}
@keyframes play-glint { 0% { transform: translateX(-130%); } 16%, 100% { transform: translateX(130%); } }
@keyframes play-twinkle {
    0%, 13% { transform: scale(0) rotate(0deg); opacity: 0; }
    17% { transform: scale(1.15) rotate(45deg); opacity: 1; }
    24%, 100% { transform: scale(0) rotate(90deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-play, .hero-play::after, .hero-play::before { animation: none; transition: none; }
    .hero-play:hover { transform: none; }
}
.hero-checks { list-style: none; margin: 0; padding: 0 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; font-weight: 600; }
.hero-checks span { color: #8ee69a; font-weight: 800; }
.hero-depth { margin: 0; padding: 0 12px; font-size: 0.98rem; }
.hero-depth a { color: var(--mb-text); font-weight: 600; }
.hero-more-buttons { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 4px; }
.hero-more-buttons .menu-creator, .menu-island .menu-options { display: block; width: 170px; }
.menu-island { min-width: 170px; min-height: calc(170px * 300 / 630); display: flex; justify-content: center; }
.menu-island .overlay { position: fixed; }
.settings-island .overlay { position: fixed; z-index: 100; }

/* Level boards drawn as pictures (BoardPreview), and the official level guide. */
.board-preview { margin: 16px 0 20px; }
.board-preview-area { width: min(100%, 440px); padding: 8%; box-sizing: border-box; background: #05040a; border-radius: 12px; }
.board-preview .board { pointer-events: none; }
.board-preview .preview-tile img { position: absolute; inset: 0; width: 100%; height: 100%; }
.board-preview figcaption { margin-top: 8px; color: #d8cccc; font-size: 0.93rem; max-width: 440px; }
@media (prefers-reduced-motion: reduce) { .board-preview .sprite img { animation: none !important; } }
.level-layout { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 8px 28px; align-items: start; }
@media (max-width: 800px) { .level-layout { grid-template-columns: minmax(0, 1fr); } }
.toolbox-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.toolbox-list li { display: flex; align-items: center; gap: 8px; }
.toolbox-list .help-legend-art { width: 40px; height: 40px; position: relative; flex: none; }
.toolbox-list .help-legend-art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tutorial-card { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 16px; background: rgba(36, 31, 43, 0.85); border-radius: 12px; }
.tutorial-card img { width: 100%; height: auto; background: #fff; border-radius: 8px; }
.tutorial-card blockquote { margin: 0; font-size: 1.1rem; }
@media (max-width: 640px) { .tutorial-card { grid-template-columns: minmax(0, 1fr); } .tutorial-card img { max-width: 240px; } }
.official-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.official-list li { padding: 12px 14px; background: rgba(36, 31, 43, 0.85); border-radius: 12px; }
.official-list .level-number { color: var(--mb-accent); font-weight: 700; margin-right: 6px; }
.official-list p { margin: 4px 0 0; color: #d8cccc; font-size: 0.93rem; }
.level-pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
.leaderboard-table { border-collapse: collapse; margin: 8px 0 12px; min-width: min(100%, 420px); }
.leaderboard-table th, .leaderboard-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid #4a4242; }
.leaderboard-table .number { text-align: right; }
@media (max-width: 640px) {
    .score-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .score-table, .score-table tbody, .score-table tr, .score-table td { display: block; width: 100%; box-sizing: border-box; }
    .score-table tr { padding: 8px 0; border-bottom: 2px solid #4a4242; }
    .score-table td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 0; text-align: left; }
    .score-table td[data-label=Plan] { display: block; font-weight: 600; }
    .score-table td:not([data-label=Plan])::before { content: attr(data-label); color: #d8cccc; }
}
.home-more {
    position: absolute; right: 18px; bottom: 18px; white-space: nowrap;
    padding: 8px 18px; border-radius: 999px; background: rgba(7, 6, 12, 0.8); font-weight: 600; text-decoration: none;
}
/* The clouds drift over the whole title screen, however tall its content makes it on a phone. */
.home-hero .menu-cloud { height: max(120vh, 100%); }

/* ---------- Content ---------- */
.page-content { max-width: 960px; margin: 0 auto; padding: 8px 20px 0; box-sizing: border-box; }
.page-content h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.2; margin: 12px 0 10px; }
.page-content h2 { font-size: 1.35rem; margin: 30px 0 10px; }
.page-content h3 { font-size: 1.1rem; margin: 0; }
.lead { font-size: 1.15rem; color: #e8dfdf; }
.prose p, .prose li { max-width: 72ch; }
.prose li { margin: 6px 0; }
.prose code { background: #241f2b; padding: 1px 6px; border-radius: 4px; }
.fact-list li { margin: 8px 0; }
.fact-table { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 16px 0; padding: 16px 20px; background: rgba(36, 31, 43, 0.7); border-radius: 12px; }
.fact-table dt { font-weight: 700; color: #d8cccc; }
.fact-table dd { margin: 0; }
.link-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 24px 0; }
.plain-list { list-style: none; padding: 0; }
.notice, .result-count { color: #e0d6d6; }
.home-sections { padding-top: 24px; }
.home-sections h3 { margin: 22px 0 6px; }
.page-toc { margin: 16px 0; padding: 10px 16px; background: rgba(36, 31, 43, 0.7); border-radius: 12px; }
.page-toc p { margin: 0 0 4px; }
.page-toc ul { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.page-toc li { margin: 0; }

.button {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 18px; box-sizing: border-box;
    border-radius: 10px; border: 2px solid var(--mb-accent); background: var(--mb-accent); color: #1a1414 !important;
    font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.button-secondary { background: #2a2626; color: var(--mb-text) !important; border-color: #5a5252; }
.button-large { min-height: 52px; font-size: 1.15rem; padding: 10px 26px; }

.breadcrumbs { max-width: 960px; margin: 0 auto; padding: 14px 20px 0; box-sizing: border-box; font-size: 0.92rem; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs li + li::before { content: "›"; margin-right: 6px; color: #9a8f8f; }
.breadcrumbs [aria-current] { color: #d8cccc; }

/* ---------- Community ---------- */
.community-search { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 12px; }
.community-search input {
    flex: 1; min-width: 200px; min-height: 44px; padding: 8px 12px; box-sizing: border-box;
    font: inherit; color: var(--mb-text); background: #2a2626; border: 2px solid #5a5252; border-radius: 10px;
}
.community-sorts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.community-sort { padding: 6px 14px; border-radius: 999px; border: 2px solid #5a5252; background: #2a2626; color: var(--mb-text) !important; text-decoration: none; font-weight: 600; }
.community-sort.active { border-color: var(--mb-accent); background: #4a3a1f; }
.level-list { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 10px; }
.level-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; background: rgba(36, 31, 43, 0.85); border-radius: 12px; }
.level-card-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font-size: 0.93rem; color: #d8cccc; }
.level-card-name a { text-decoration: none; }
.level-card-name a:hover { text-decoration: underline; }
.player-rating { color: #ffe08a; }
.level-progress { display: inline-block; margin: 6px 0 0; padding: 2px 10px; border-radius: 999px; font-size: 0.9rem; font-weight: 700; }
.level-progress-beaten { background: #1f4a2e; color: #b9f5c8; }
.level-progress-earlier { background: #3a3a1f; color: #f2eba6; }
.level-progress-played { background: #2e2a3a; color: #d6cdf0; }
.community-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 14px; }
.played-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.played-table th, .played-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #4a4242; vertical-align: top; }
.played-table th { color: #d8cccc; }
.played-table .number { text-align: right; white-space: nowrap; }
.played-table .muted { color: #b8adad; font-size: 0.9rem; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0; }

.level-header { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.level-header h1 { margin-bottom: 0; }
.level-byline { margin: 0 0 10px; font-size: 1.1rem; }
.team-role { margin: -8px 0 8px; color: #bfb3b3; font-style: italic; }
.guide-byline { margin: -6px 0 16px; color: #bfb3b3; font-size: 0.95rem; }
.level-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.version-list li { margin: 6px 0; }

/* ---------- Contact form ---------- */
.contact-form { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.contact-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.contact-field label { font-weight: 700; }
.contact-field input, .contact-field select, .contact-field textarea {
    width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 10px; font: inherit; color: var(--mb-text);
    background: #1c1824; border: 2px solid #5a5252; border-radius: 8px;
}
.contact-field textarea { resize: vertical; }
.contact-field input:focus-visible, .contact-field select:focus-visible, .contact-field textarea:focus-visible { outline: 3px solid var(--mb-accent); }
.contact-field [aria-invalid="true"] { border-color: #ff8a7a; }
.contact-field small, .contact-recaptcha { color: #d8cccc; font-size: 0.88rem; }
.contact-error { margin: 0; color: #ffb3a8; font-weight: 600; }
.contact-error::before { content: "⚠ "; }
.contact-form .button { align-self: flex-start; }
.contact-problem { padding: 10px 14px; border-radius: 8px; background: #3a1f1f; border-left: 4px solid #ff8a7a; }
.contact-problem ul { margin: 4px 0 0; }
.contact-sent { padding: 12px 16px; border-radius: 8px; background: #1f3a2a; border-left: 4px solid #6fd08a; }
.contact-sent p { margin: 4px 0; }
/* The honeypot field: off-screen for sighted users, aria-hidden and unfocusable for everyone else. */
.contact-website { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* reCAPTCHA v3's floating badge: Google's text notice is shown in the form instead, as Google permits. */
.grecaptcha-badge { visibility: hidden; }

/* ---------- Social community (Phase 8B) ---------- */
.creator-heading { display: flex; align-items: center; gap: 14px; }
.creator-heading h1 { margin: 0; }
.follow-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 12px 0; }
.follower-count { font-weight: 700; }
.follow-self { color: #d8cccc; }
.button-small { padding: 4px 10px; font-size: 0.85rem; min-height: 32px; }
.button-danger { background: #8a2a1f; border-color: #c0392b; color: #fff !important; }

.discussion { margin: 28px 0; scroll-margin-top: 12px; }
.discussion-count { margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: #2a2626; border: 1px solid #5a5252; font-size: 0.9rem; font-weight: 600; vertical-align: middle; }
.discussion-signin { margin: 12px 0 18px; padding: 12px 16px; border-radius: 10px; background: rgba(36, 31, 43, 0.85); border-left: 4px solid var(--mb-accent); }
.discussion-signin p { margin: 4px 0; }
.discussion-signin-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
.discussion-guidance, .comment-help { color: #d8cccc; font-size: 0.93rem; }
.discussion-status { padding: 8px 12px; border-radius: 8px; background: #1f3a2a; border-left: 4px solid #6fd08a; }
.discussion-status.problem { background: #3a1f1f; border-left-color: #ff8a7a; }
.comment-form, .comment-action form { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 16px; max-width: 100%; }
.comment-form label, .comment-action label { font-weight: 600; }
.comment-form textarea, .comment-action textarea {
    width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit; color: var(--mb-text);
    background: #1c1824; border: 2px solid #5a5252; border-radius: 8px; resize: vertical;
}
.comment-form textarea:focus-visible, .comment-action textarea:focus-visible { outline: 3px solid var(--mb-accent); }
.comment-form .button, .comment-action .button { align-self: flex-start; }
.comment-list, .comment-replies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.comment-replies { margin: 8px 0 0 24px; padding-left: 12px; border-left: 2px solid #3a3346; }
.comment { padding: 10px 14px; background: rgba(36, 31, 43, 0.85); border-radius: 12px; min-width: 0; }
.comment.by-creator { border: 1px solid var(--mb-accent); }
.comment-header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.9rem; color: #d8cccc; }
.comment-author { font-weight: 700; color: var(--mb-text); overflow-wrap: anywhere; }
.comment-badge { padding: 1px 8px; border-radius: 999px; background: var(--mb-accent); color: #1a1400; font-weight: 700; font-size: 0.8rem; }
.comment-edited { font-style: italic; }
.comment-body { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.comment-placeholder { margin: 0; font-style: italic; color: #bfb3b3; }
.comment-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 14px; font-size: 0.9rem; }
.comment-action { min-width: 0; max-width: 100%; }
.comment-action[open] { flex-basis: 100%; }
.comment-action summary { cursor: pointer; color: var(--mb-accent); text-decoration: underline; }
.comment-action summary:focus-visible { outline: 3px solid var(--mb-accent); outline-offset: 2px; }
.comment-action fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.comment-action legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.report-reason { font-weight: 400 !important; }
.comment-reported { color: #d8cccc; font-style: italic; }

.site-notifications { position: relative; text-decoration: none; }
.notification-count { display: inline-block; min-width: 1.4em; margin-left: 2px; padding: 0 5px; border-radius: 999px; background: #c0392b; color: #fff; font-size: 0.8rem; font-weight: 700; text-align: center; }
.notifications-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.notification-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.notification { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; background: rgba(36, 31, 43, 0.6); border-radius: 12px; }
.notification.unread { background: rgba(58, 47, 24, 0.85); border-left: 4px solid var(--mb-accent); }
.notification-new { padding: 1px 8px; border-radius: 999px; background: var(--mb-accent); color: #1a1400; font-weight: 700; font-size: 0.8rem; }
.notification-text { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.notification-text time { color: #d8cccc; font-size: 0.85rem; }
.notification-open { text-align: left; color: var(--mb-text) !important; }

/* ---------- How to Play piece reference (PieceHelp) ---------- */
.piece-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.piece-list > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 14px; background: rgba(36, 31, 43, 0.85); border-radius: 12px; }
.piece-list h4 { margin: 0 0 4px; font-size: 1.05rem; }
.piece-list p { margin: 0 0 6px; }
.piece-list ul { margin: 0; padding-left: 1.1em; font-size: 0.93rem; color: #e0d6d6; }
.piece-art { position: relative; display: block; width: 48px; height: 48px; }
.piece-art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.piece-list .piece-orientations { list-style: none; padding: 0; margin-top: 8px; display: grid; gap: 6px; }
.piece-orientations li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: center; }
.piece-orientations .piece-art { width: 32px; height: 32px; }

/* ---------- Rankings and creator milestones (Phase 8A) ---------- */
.ranking-section { margin: 26px 0; }
.ranking-rule, .fact-note { color: #d8cccc; font-size: 0.93rem; }
.ranking-list { margin: 12px 0; padding-left: 2.2em; display: flex; flex-direction: column; gap: 8px; }
.ranking-item { padding: 10px 14px; background: rgba(36, 31, 43, 0.85); border-radius: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ranking-item::marker { color: var(--mb-accent); font-weight: 700; }
.ranking-name { font-weight: 700; font-size: 1.05rem; }
.ranking-creator { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; }
.level-byline .avatar, .level-card-creator .avatar { margin: 0 2px; }
.notification > .avatar { align-self: flex-start; }
.ranking-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.93rem; color: #d8cccc; flex: 1 1 260px; }
.ranking-item .button-play { margin-left: auto; }
.badge-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.creator-badge { padding: 6px 12px; border-radius: 999px; border: 2px solid var(--mb-accent); background: #3a2f18; font-weight: 600; }
.badge-mark { color: var(--mb-accent); }

/* ---------- Owner review and status pages ---------- */
.owner-review { margin: 16px 0; padding: 12px 16px; border: 2px dashed var(--mb-accent); border-radius: 10px; background: rgba(74, 58, 31, 0.35); }
.status-page { padding-top: 40px; text-align: center; }
.status-page .link-row { justify-content: center; }
.request-id { text-align: center; color: #bfb3b3; }

@media (max-width: 640px) {
    .site-header { padding: 8px 16px; }
    /* On phones the wrapped navigation sits above the title screen instead of over the logo. */
    body.public:has(.home-hero) .site-header { position: relative; background: rgba(7, 6, 12, 0.95); border-bottom: 1px solid #2a2433; }
    .home-hero .menu-content { padding-top: 3vh; gap: 10px; }
    .home-hero { min-height: 0; }
    .home-hero .menu-logo { width: min(80vw, 320px); }
    .hero-badge { width: 190px; margin-top: -16px; }
    .hero-play { width: 240px; border-radius: 13px; }
    .hero-checks { gap: 2px 14px; font-size: 0.95rem; }
    .hero-depth { font-size: 0.92rem; }
    .hero-more-buttons .menu-creator, .menu-island .menu-options { width: 132px; }
    .menu-island { min-width: 132px; min-height: calc(132px * 300 / 630); }
    .home-more { right: 50%; transform: translateX(50%); }
    .site-nav { flex-basis: 100%; order: 3; }
    .page-content, .breadcrumbs { padding-left: 16px; padding-right: 16px; }
    .level-card { flex-direction: column; align-items: stretch; }
    .played-table thead { display: none; }
    .played-table tr { display: block; padding: 10px 0; border-bottom: 1px solid #4a4242; }
    .played-table td { display: block; padding: 2px 0; border: 0; text-align: left; }
    .played-table .number { text-align: left; }
    .played-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: #d8cccc; }
    .ranking-item .button-play { margin-left: 0; }
    .comment-replies { margin-left: 8px; padding-left: 8px; }
    .fact-table { grid-template-columns: 1fr; gap: 2px; }
    .fact-table dd { margin-bottom: 8px; }
}

/* Advertising slots (docs/ADVERTISING.md): a fixed-height box, so an ad that loads late, is blocked or isn't
   filled never moves the content around it. */
.ad-slot { max-width: 960px; margin: 20px auto; padding: 0 20px; box-sizing: border-box; }
.page-content .ad-slot { padding: 0; }
.ad-label { display: block; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: #9a8f8f; margin-bottom: 4px; }
.ad-slot .ad-unit { display: block; width: 100%; height: 250px; overflow: hidden; }
.ad-placeholder { min-height: 0; }
.ad-placeholder .ad-label { display: flex; align-items: center; justify-content: center; height: 250px; border: 2px dashed #5a5252; border-radius: 10px; color: #bfb3b3; text-transform: none; }
@media (max-width: 640px) {
    .ad-slot .ad-unit, .ad-placeholder .ad-label { height: 280px; }
}

/* ---------- Community restriction notice (Phase 8D) ---------- */
.restriction-notice { margin: 12px 0 18px; padding: 12px 16px; border-radius: 10px; background: rgba(58, 47, 24, 0.85); border-left: 4px solid var(--mb-accent); overflow-wrap: anywhere; }
.restriction-notice p { margin: 4px 0; }

/* ---------- Admin area (Phase 8D) ---------- */
.admin-page { overflow-wrap: anywhere; }
.admin-page a:focus-visible, .admin-page button:focus-visible, .admin-page select:focus-visible, .admin-page input:focus-visible,
.admin-page textarea:focus-visible, .admin-page summary:focus-visible { outline: 3px solid var(--mb-accent); outline-offset: 2px; }
.admin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; background: rgba(36, 31, 43, 0.85); }
.admin-nav a { font-weight: 700; }
.admin-nav a[aria-current="page"] { text-decoration: none; border-bottom: 3px solid var(--mb-accent); }
.admin-role { margin-left: auto; font-size: 0.9rem; color: #d8cccc; }
.admin-cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.admin-cards a { display: flex; flex-direction: column; gap: 4px; min-height: 44px; padding: 12px 14px; border-radius: 12px; background: rgba(36, 31, 43, 0.85); text-decoration: none; color: var(--mb-text) !important; }
.admin-cards a:hover { outline: 2px solid #5a5252; }
.admin-stat { display: flex; flex-direction: column; gap: 4px; min-height: 44px; padding: 12px 14px; border-radius: 12px; background: rgba(36, 31, 43, 0.85); }
.stats-table .number, .admin-table .number { text-align: right; white-space: nowrap; }
.stats-table td[data-label=People] { min-width: 140px; }
.stat-number { display: inline-block; min-width: 3ch; margin-right: 8px; }
.stat-bar { display: inline-block; height: 10px; border-radius: 5px; background: var(--mb-accent); vertical-align: middle; max-width: calc(100% - 5ch); }
.admin-count { font-size: 1.8rem; font-weight: 800; color: var(--mb-accent); margin: 0; }
.admin-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0 0 14px; }
.admin-filters label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; min-width: 0; }
.admin-filters select, .admin-filters input, .admin-form textarea, .admin-form select, .admin-form input[type=text], .admin-form input[type=password], .admin-decisions textarea {
    min-height: 44px; padding: 8px 10px; box-sizing: border-box; max-width: 100%; font: inherit; color: var(--mb-text); background: #1c1824; border: 2px solid #5a5252; border-radius: 8px;
}
.admin-filters input[type=search] { min-width: min(320px, 100%); }
.admin-filter-note { color: #d8cccc; }
.admin-queue, .admin-history, .admin-content-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.admin-queue-item { padding: 12px 14px; border-radius: 12px; background: rgba(36, 31, 43, 0.85); }
.admin-queue-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.admin-queue-title { font-weight: 700; }
.admin-kind, .admin-state { padding: 1px 8px; border-radius: 999px; border: 1px solid #5a5252; font-size: 0.85rem; }
.admin-meta { color: #d8cccc; font-size: 0.92rem; }
p.admin-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.admin-meta .avatar { margin-right: 4px; }
.admin-excerpt { margin: 6px 0; white-space: pre-line; }
.admin-section { margin: 22px 0; }
.admin-body { margin: 10px 0; padding: 10px 14px; border-radius: 10px; background: #1c1824; border: 1px solid #4a4444; white-space: pre-line; }
.admin-context { margin: 10px 0; padding: 8px 14px; border-left: 4px solid #5a5252; color: #d8cccc; }
.admin-context p { margin: 4px 0; }
.admin-context p:last-child { white-space: pre-line; }
.admin-note { margin: 4px 0 0; white-space: pre-line; }
.admin-told { color: #ffe08a; }
.admin-history li, .admin-content-list li { padding: 10px 14px; border-radius: 10px; background: rgba(36, 31, 43, 0.6); }
.admin-table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.admin-table th, .admin-table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid #4a4444; }
.admin-table input[type=checkbox], .admin-confirm input { width: 22px; height: 22px; accent-color: var(--mb-accent); }
.admin-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.admin-form, .admin-decisions { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.admin-decisions { max-width: none; }
.admin-decisions textarea { max-width: 640px; }
.admin-table th { white-space: nowrap; overflow-wrap: normal; }
.admin-form .button, .admin-decisions .button { align-self: flex-start; }
.admin-confirm { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.admin-action { margin: 8px 0; padding: 8px 14px; border-radius: 10px; background: rgba(36, 31, 43, 0.6); }
.admin-action summary { cursor: pointer; font-weight: 700; min-height: 32px; display: flex; align-items: center; }
.admin-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.admin-columns h3 { margin: 0 0 4px; }
.admin-breakdown { display: grid; grid-template-columns: auto auto; gap: 2px 14px; justify-content: start; margin: 6px 0; }
.admin-breakdown dd { margin: 0; font-weight: 700; }
.admin-toc ul { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; list-style: none; }
.admin-handbook section h2 { scroll-margin-top: 12px; }
.admin-handbook li { margin: 6px 0; }
.admin-defs dt { font-weight: 700; margin-top: 10px; }
.admin-defs dd { margin: 2px 0 0 0; }
/* Phones: tables become labelled stacks, so nothing scrolls sideways. */
@media (max-width: 640px) {
    .admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; box-sizing: border-box; }
    .admin-table tr { margin: 0 0 10px; padding: 6px 0; border-bottom: 2px solid #4a4444; }
    .admin-table td { border: 0; padding: 4px 6px; }
    .admin-table td::before { content: attr(data-label) ": "; font-weight: 700; color: #d8cccc; }
    .admin-role { margin-left: 0; }
}

/* ---------- Engagement: Today's Challenge, Featured Puzzle, hints, sharing ---------- */
/* Today's Challenge on the title screen: the original game's dark options panel, the meteor's own sprite (first frame)
   and the original round Play button. Its text box keeps one line for the browser's own status, so nothing moves. */
.hero-daily {
    display: grid; grid-template-columns: 56px minmax(0, 1fr) 64px; align-items: center; gap: 12px;
    width: min(92vw, 520px); box-sizing: border-box; margin-top: 4px; padding: 10px 14px;
    background: rgba(12, 11, 11, 0.88); border: 3px solid #3a3535; border-radius: 16px; text-align: left;
}
.hero-daily-meteor { width: 56px; height: 56px; background: no-repeat 0 0 / auto 100%; transform: rotate(-18deg); }
.hero-daily-body { min-width: 0; }
.hero-daily-label { margin: 0; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mb-accent); }
.hero-daily-name { margin: 2px 0 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.hero-daily-by { color: #d8cccc; font-size: 0.95rem; }
.hero-daily-status { margin: 2px 0 0; min-height: 1.5em; font-size: 0.9rem; color: #e0d6d6; }
.hero-daily-status[data-state="won"] { color: #b9f5c8; }
.hero-daily-play { display: block; width: 64px; border-radius: 50%; }
.hero-daily-play:hover img { filter: brightness(1.15); }

.featured-puzzle {
    display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: start; margin: 32px 0;
    padding: 16px 18px; background: rgba(12, 11, 11, 0.85); border: 3px solid #3a3535; border-radius: 16px;
}
.featured-wormhole { width: 72px; height: 72px; background: no-repeat 0 0 / auto 100%; }
.featured-label { margin: 0; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mb-accent); }
.featured-name { margin: 4px 0; font-size: 1.35rem; font-weight: 700; }
.featured-name a { color: var(--mb-text); text-decoration: none; }
.featured-name a:hover { text-decoration: underline; }
.featured-note { margin: 6px 0; padding: 0 0 0 12px; border-left: 3px solid #5a5252; font-style: italic; color: #e0d6d6; }
.featured-meta { margin: 4px 0 10px; color: #d8cccc; }

.level-difficulty { color: #f2c9a0; }

/* Hints: closed until opened, one at a time. */
.level-hints .hint { margin: 10px 0; padding: 0 16px; background: rgba(36, 31, 43, 0.85); border-radius: 12px; border: 2px solid transparent; }
.level-hints .hint[open] { border-color: #4a3a1f; padding-bottom: 6px; }
.level-hints summary { cursor: pointer; padding: 12px 0; font-weight: 700; min-height: 24px; }
.level-hints summary:hover { color: var(--mb-accent); }
.level-hints .hint p { margin: 0 0 10px; }
.level-hints .hint-solution { border: 2px dashed #5a5252; }
.hint-score { color: #d8cccc; font-size: 0.95rem; }
.level-hints h2 { scroll-margin-top: 12px; }

.share-panel { margin: 14px 0 0; padding: 10px 14px; background: rgba(36, 31, 43, 0.7); border-radius: 12px; }
.share-title { margin: 0 0 8px; }
.share-text { color: #d8cccc; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share-url {
    flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; box-sizing: border-box;
    font: inherit; font-size: 0.92rem; color: var(--mb-text); background: #2a2626; border: 2px solid #5a5252; border-radius: 10px;
}
.share-status { margin: 6px 0 0; min-height: 1.2em; font-size: 0.92rem; color: #b9f5c8; }

@media (max-width: 640px) {
    .hero-daily { grid-template-columns: 44px minmax(0, 1fr) 52px; gap: 10px; padding: 8px 10px; }
    .hero-daily-meteor { width: 44px; height: 44px; }
    .hero-daily-play { width: 52px; }
    .hero-daily-name { font-size: 1rem; }
    .featured-puzzle { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 12px 14px; }
    .featured-wormhole { width: 48px; height: 48px; }
    .share-url { flex-basis: 100%; }
}