/* ============================================================================
   DeeDee hub (home page)
   Sky scene, brand bar, hero greeting, "Who's playing?", Today's challenge,
   section nav, game cards, For Parents, footer and the profile dialog.
   ============================================================================ */

/* ---------- Page scene ---------- */
#hub-screen { position: relative; min-height: 100dvh; }

.sky-bg {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, var(--c-hub-sky-top) 0%, var(--c-hub-sky) 50%, var(--c-hub-sky-bottom) 100%);
    z-index: -3;
}
.cloud {
    position: fixed;
    z-index: -2;
    opacity: 0.75;
    pointer-events: none;
}
.cloud::before, .cloud::after, .cloud .puff {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 50%;
}
.cloud-1 { top: 7%; left: 6%; }
.cloud-1::before { width: 110px; height: 42px; border-radius: 42px; }
.cloud-1::after  { width: 54px; height: 54px; top: -22px; left: 22px; }
.cloud-1 .puff   { width: 64px; height: 64px; top: -26px; left: 48px; }
.cloud-2 { top: 14%; right: 8%; }
.cloud-2::before { width: 150px; height: 54px; border-radius: 54px; }
.cloud-2::after  { width: 74px; height: 74px; top: -32px; left: 28px; }
.cloud-2 .puff   { width: 86px; height: 74px; top: -30px; left: 64px; }
.cloud-3 { top: 36%; left: 52%; opacity: 0.5; }
.cloud-3::before { width: 80px; height: 32px; border-radius: 32px; }
.cloud-3::after  { width: 40px; height: 40px; top: -16px; left: 15px; }
.cloud-3 .puff   { width: 45px; height: 42px; top: -18px; left: 38px; }
@media (max-width: 600px) { .cloud-3 { display: none; } .cloud-2 { right: -30px; } }

/* ---------- Brand bar ---------- */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4) 0;
    position: relative;
    z-index: 1;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    text-decoration: none;
    color: var(--c-ink);
    border-radius: var(--r-md);
}
.brand-mark { height: 44px; width: auto; }
.brand-word { height: 34px; width: auto; }
.brand-tag {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--c-ink-soft);
}

/* ---------- Hero: DeeDee greets the player ---------- */
.hero {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    padding: var(--sp-3) var(--sp-4) 0;
}
.hero-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--sp-4);
}
.hero-dog {
    background: none;
    border: none;
    padding: 0;
    border-radius: var(--r-lg);
    align-self: end;
    line-height: 0;
}
.hero-dog img {
    height: clamp(120px, 26vw, 180px);
    width: auto;
    transform-origin: 50% 90%;
    transition: transform var(--t-med);
    filter: drop-shadow(0 8px 14px rgba(26, 43, 74, 0.18));
}
.hero-dog:hover img,
.hero-dog:focus-visible img,
.hero-dog.is-waving img { animation: deedeeWave 0.9s ease-in-out; }
@keyframes deedeeWave {
    0%, 100% { transform: rotate(0) translateY(0); }
    20%  { transform: rotate(-7deg) translateY(-6px); }
    40%  { transform: rotate(6deg) translateY(-10px); }
    60%  { transform: rotate(-5deg) translateY(-6px); }
    80%  { transform: rotate(4deg) translateY(-2px); }
}
.hero-bubble {
    position: relative;
    background: var(--c-surface);
    border: 3px solid var(--blue-line);
    border-radius: var(--r-lg);
    padding: var(--sp-4) var(--sp-5);
    box-shadow: var(--sh-card);
    min-width: 0;
}
.hero-bubble::before {
    content: '';
    position: absolute;
    left: -16px;
    bottom: 26px;
    width: 26px;
    height: 26px;
    background: var(--c-surface);
    border-left: 3px solid var(--blue-line);
    border-bottom: 3px solid var(--blue-line);
    transform: rotate(45deg);
    border-radius: 0 0 0 6px;
}
.hero-bubble h1 {
    font-size: var(--fs-2xl);
    color: var(--c-ink);
    overflow-wrap: anywhere;
}
.hero-sub {
    margin-top: var(--sp-1);
    color: var(--c-ink-soft);
    font-weight: 700;
    font-size: var(--fs-md);
}
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}
.hero-stats:empty { display: none; }
.hero-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--gold-bg);
    border: 2px solid var(--gold-line);
    color: var(--gold-ink);
    font-weight: 800;
    font-size: var(--fs-sm);
}
.hero-stat.is-blue { background: var(--blue-bg); border-color: var(--blue-line); color: var(--blue-ink); }
@media (max-width: 600px) {
    .hero { padding-top: var(--sp-4); }
    .hero-inner { gap: var(--sp-2); }
    .hero-bubble { padding: var(--sp-3) var(--sp-4); }
    .hero-bubble::before { bottom: 18px; left: -13px; width: 20px; height: 20px; }
}

/* ---------- Who's playing? (profiles.js renders the chips) ---------- */
.players {
    text-align: center;
    padding: var(--sp-3) 0 0;
}
.players-title {
    font-size: var(--fs-lg);
    font-weight: 900;
    color: var(--c-ink);
}
.players-hint {
    color: var(--c-ink-soft);
    font-weight: 600;
    font-size: var(--fs-sm);
    margin: 2px 0 var(--sp-3);
}
.player-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--sp-3);
    min-height: 96px;      /* chips render from JS; reserve their height so nothing jumps */
}
.player-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 96px;
    min-height: 96px;
    padding: 10px 14px;
    border-radius: 22px;
    border: 3px solid var(--blue-line);
    background: var(--c-surface);
    color: var(--c-ink);
    font-weight: 800;
    box-shadow: var(--sh-clay);
    transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.player-chip:hover { transform: translateY(-3px); box-shadow: var(--sh-clay-hover); }
.player-chip.active {
    background: var(--blue-bg);
    border-color: var(--c-brand-dark);
    box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.18), var(--sh-clay);
}
.player-chip .chip-avatar { font-size: 2.2rem; line-height: 1.1; }
.player-chip .chip-name { font-size: var(--fs-md); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-chip .chip-year {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--c-brand-dark);
    background: #fff;
    border-radius: var(--r-pill);
    padding: 1px 8px;
}
.player-chip.active .chip-year { background: var(--c-brand-dark); color: #fff; }
.player-chip-add { border-style: dashed; border-color: var(--green-line); color: var(--green-ink); background: var(--green-bg); }
.player-chip-add .chip-avatar { font-size: 1.8rem; padding-top: 6px; }
.player-edit {
    min-height: var(--tap);
    padding: 8px 16px;
    border-radius: var(--r-pill);
    border: 2px solid var(--gold-line);
    background: var(--gold-bg);
    color: var(--gold-ink);
    font-weight: 800;
    font-size: var(--fs-sm);
    box-shadow: var(--sh-clay);
}
.player-edit:hover { background: #FFECB3; }
@media (max-width: 600px) {
    .player-chips { gap: var(--sp-2); min-height: 88px; }
    .player-chip { min-width: 84px; min-height: 88px; padding: 8px 10px; }
}

/* ---------- Today's challenge ---------- */
.challenge-wrap {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: var(--sp-4) auto 0;
    padding: 0 var(--sp-4);
}
.hub-card.challenge {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "icon body streak" "icon body cta";
    align-items: center;
    column-gap: var(--sp-4);
    row-gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, #FFF8E1 0%, #FFE082 100%);
    border: 1px solid var(--gold-line);
    box-shadow: var(--sh-clay);
    color: var(--gold-ink);
    text-align: left;
    text-decoration: none;
    overflow: visible;
    transition: transform var(--t-med), box-shadow var(--t-med);
}
.challenge:hover { transform: translateY(-3px); box-shadow: var(--sh-clay-hover); }
.challenge-icon {
    grid-area: icon;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 2rem;
    background: #fff;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.08);
}
.challenge-body { grid-area: body; min-width: 0; }
.challenge-kicker {
    display: block;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.challenge-body h3 { font-size: var(--fs-xl); color: var(--c-ink); }
.challenge-body p { font-weight: 600; font-size: var(--fs-sm); margin-top: 2px; }
.challenge-streak {
    grid-area: streak;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: #fff;
    font-weight: 800;
    font-size: var(--fs-sm);
    color: var(--gold-ink);
}
.challenge-streak b { font-size: var(--fs-lg); }
.challenge-cta {
    grid-area: cta;
    justify-self: end;
    pointer-events: none;      /* the whole card is the link */
    font-size: var(--fs-md);
    padding: 0.5rem 1.2rem;
}
.hub-card.challenge.is-done { background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%); border-color: var(--green-line); color: var(--green-ink); }
.challenge.is-done .challenge-streak { color: var(--green-ink); }
@media (max-width: 600px) {
    .hub-card.challenge {
        grid-template-columns: auto 1fr;
        grid-template-areas: "icon body" "streak cta";
        padding: var(--sp-4);
        column-gap: var(--sp-3);
    }
    .challenge-icon { width: 52px; height: 52px; font-size: 1.6rem; }
    .challenge-streak { justify-self: start; }
    .challenge-cta { width: 100%; }
}

/* ---------- Section nav (sticky chips) ---------- */
.section-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-4);
    background: color-mix(in srgb, var(--c-hub-sky-top) 70%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    overflow-x: auto;
    scrollbar-width: none;
}
.section-nav::-webkit-scrollbar { display: none; }
.nav-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--tap);
    padding: 0 var(--sp-5);
    border-radius: var(--r-pill);
    background: var(--c-surface);
    border: 2px solid var(--c-line);
    color: var(--c-ink);
    font-weight: 800;
    font-size: var(--fs-md);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--sh-clay);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.nav-chip:hover { border-color: var(--c-brand-dark); }
.nav-chip[aria-current="true"] {
    background: var(--c-brand-dark);
    border-color: var(--c-brand-dark);
    color: #fff;
}
@media (max-width: 600px) {
    .section-nav { justify-content: flex-start; padding-left: var(--sp-4); padding-right: var(--sp-4); }
    .nav-chip { padding: 0 var(--sp-4); font-size: var(--fs-sm); }
}

/* ---------- Game sections and cards ---------- */
.games-section {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    padding: var(--sp-2) var(--sp-4) var(--sp-6);
}
.hub-section { scroll-margin-top: 76px; padding-top: var(--sp-4); }
.category-label {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xl);
    font-weight: 900;
    color: var(--c-ink);
    margin: var(--sp-2) 0 var(--sp-2);
}
.category-note {
    color: var(--c-ink-soft);
    font-weight: 600;
    font-size: var(--fs-sm);
    margin: -4px 0 var(--sp-3);
    max-width: 640px;
}
.games-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
}

/* One card per row: icon on the left, name and a line beside it, the tag (or stars) on the right */
.hub-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: var(--sp-4);
    align-items: center;
    text-align: left;
    min-height: 92px;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-lg);
    border: 1px solid var(--card-line, var(--c-line));
    background: var(--card-bg, var(--c-surface));
    color: var(--card-ink, var(--c-ink));
    box-shadow: var(--sh-clay);
    text-decoration: none;
    overflow: hidden;
    transition: transform var(--t-med), box-shadow var(--t-med);
}
.hub-card:hover { transform: translateY(-4px); box-shadow: var(--sh-clay-hover); }
.hub-card:active { transform: translateY(-1px); }
.hub-card-icon {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    font-size: 1.8rem;
    line-height: 1;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.06);
}
.hub-card h3 {
    grid-column: 2;
    align-self: end;
    font-size: var(--fs-lg);
    font-weight: 900;
    color: var(--c-ink);
}
.hub-card p {
    grid-column: 2;
    align-self: start;
    margin-top: 2px;
    font-size: var(--fs-sm);
    line-height: 1.35;
    font-weight: 600;
}
.card-soon > .btn { grid-column: 2; justify-self: start; }
/* Two-emoji icons (❌⭕) fit inside the circle */
.hub-card[data-mode="noughts"] .hub-card-icon { font-size: 1.05rem; letter-spacing: -1px; }
#paths-section { margin-top: var(--sp-5); }
.nq-badge, .card-meta { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
.nq-badge {
    font-size: var(--fs-sm);
    letter-spacing: 2px;
    min-height: 1.4em;
}
.card-meta {
    padding: 2px 10px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    font-weight: 800;
}

/* Card palettes (packs may declare any of these via `card`) */
.card-green  { --card-bg: var(--green-bg);  --card-line: var(--green-line);  --card-ink: var(--green-ink); }
.card-blue   { --card-bg: var(--blue-bg);   --card-line: var(--blue-line);   --card-ink: var(--blue-ink); }
.card-purple { --card-bg: var(--purple-bg); --card-line: var(--purple-line); --card-ink: var(--purple-ink); }
.card-orange { --card-bg: var(--orange-bg); --card-line: var(--orange-line); --card-ink: var(--orange-ink); }
.card-gold   { --card-bg: linear-gradient(135deg, #FFF8E1, #FFE082); --card-line: var(--gold-line); --card-ink: var(--gold-ink); }
.card-red    { --card-bg: var(--red-bg);    --card-line: var(--red-line);    --card-ink: var(--red-ink); }
.card-yellow { --card-bg: var(--gold-bg);   --card-line: #FFD54F;            --card-ink: var(--gold-ink); }
.card-teal   { --card-bg: var(--teal-bg);   --card-line: var(--teal-line);   --card-ink: var(--teal-ink); }
.card-pink   { --card-bg: var(--pink-bg);   --card-line: var(--pink-line);   --card-ink: var(--pink-ink); }
.card-slate  { --card-bg: var(--slate-bg);  --card-line: var(--slate-line);  --card-ink: var(--slate-ink); }
.card-soon {
    --card-bg: #FAFAFA; --card-line: #B0BEC5; --card-ink: #455A64;
    border-style: dashed;
    cursor: default;
    grid-column: 1 / -1;
    min-height: 0;
}
.card-soon:hover { transform: none; box-shadow: var(--sh-clay); }
.card-soon .btn { margin-top: var(--sp-3); }

@media (max-width: 600px) {
    .games-section { padding: var(--sp-2) var(--sp-3) var(--sp-6); }
    .hero, .challenge-wrap, .parents-section { padding-left: var(--sp-3); padding-right: var(--sp-3); }
    .games-grid { gap: var(--sp-2); }
    /* Phones: the tag (or stars) sits under the text so the name keeps the width */
    .hub-card { grid-template-columns: auto 1fr; column-gap: var(--sp-3); min-height: 76px; padding: 10px var(--sp-3); }
    .hub-card-icon { grid-row: 1 / span 3; width: 44px; height: 44px; font-size: 1.4rem; }
    .nq-badge, .card-meta { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 4px; }
    .nq-badge:empty { display: none; }
}

/* ---------- For Parents ---------- */
.parents-section {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 var(--sp-4);
}
.parents-section details {
    background: rgba(255, 255, 255, 0.88);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-clay);
    padding: var(--sp-2) var(--sp-5) var(--sp-2);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--c-ink);
}
.parents-section summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--tap);
    font-size: var(--fs-lg);
    font-weight: 900;
}
.parents-section summary::-webkit-details-marker { display: none; }
.parents-section summary::after { content: '▾'; margin-left: auto; transition: transform var(--t-fast); }
.parents-section details[open] summary::after { transform: rotate(180deg); }
.parents-section p { margin: 0 0 var(--sp-3); }
.parents-section p:last-child { margin-bottom: var(--sp-2); }
.parents-section a { color: var(--c-brand-dark); font-weight: 700; }
.parents-section details + details { margin-top: var(--sp-3); }
.free-links ul { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.free-links li + li { border-top: 1px solid rgba(0, 0, 0, 0.08); }
.free-links li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--tap);
    padding: var(--sp-2) 0;
}
.free-links li small { font-weight: 400; color: var(--c-ink-soft); }

/* ---------- Footer: grass, trees and DeeDee ---------- */
.footer-scene { position: relative; margin-top: var(--sp-8); overflow: hidden; z-index: 1; }
.footer-grass {
    height: 90px;
    margin-top: 40px;
    background: linear-gradient(180deg, transparent 0%, #66BB6A 30%, var(--c-grass) 100%);
    position: relative;
}
.footer-grass::before {
    content: '\1F338 \1F33C \1F33B \1F337 \1F33A \1F338 \1F33C \1F33B \1F337 \1F33A \1F338 \1F33C \1F33B';
    position: absolute;
    top: -14px; left: 0; right: 0;
    text-align: center;
    font-size: 32px;
    letter-spacing: 14px;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0.8;
}
footer {
    background: linear-gradient(180deg, var(--c-grass-dark) 0%, var(--c-grass-deep) 100%);
    color: #fff;
    padding: var(--sp-8) var(--sp-4) var(--sp-10);
    text-align: center;
}
.footer-trees { font-size: 1.6rem; letter-spacing: 8px; opacity: 0.7; margin-bottom: var(--sp-2); }
.footer-mascot img { height: 56px; width: auto; margin: 0 auto var(--sp-2); }
.footer-brand img { height: 32px; width: auto; margin: 0 auto 6px; }
.footer-tagline { color: var(--c-ink-muted-on-dark); font-size: var(--fs-sm); font-weight: 700; }
.footer-links { margin-top: var(--sp-4); display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-3); }
.footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 var(--sp-5);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: var(--fs-sm);
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--r-pill);
    transition: background var(--t-fast);
}
.footer-links a:hover { background: rgba(255, 255, 255, 0.18); }
.footer-copy { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--c-ink-muted-on-dark); }
.footer-paws { margin-top: var(--sp-2); font-size: var(--fs-md); letter-spacing: 6px; opacity: 0.5; }

/* ---------- Profile dialog (add / edit a player) ---------- */
.pf-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(26, 43, 74, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-3);
}
body.pf-open { overflow: hidden; }
.pf-card {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    border: 3px solid var(--blue-line);
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
    width: 100%;
    max-width: 440px;
    max-height: 100%;
    overflow-y: auto;
    box-shadow: var(--sh-pop);
    animation: fadeIn 0.25s ease;
}
.pf-card h2 { font-size: var(--fs-xl); text-align: center; margin-bottom: var(--sp-2); }
.pf-label { display: block; font-weight: 800; color: var(--c-ink-soft); font-size: var(--fs-sm); margin: var(--sp-3) 0 6px; }
.pf-input {
    width: 100%;
    font-size: 1.3rem;
    font-weight: 800;
    padding: 10px 14px;
    min-height: 52px;
    border-radius: 14px;
    border: 3px solid var(--blue-line);
    color: var(--c-ink);
    outline: none;
}
.pf-input:focus { border-color: var(--c-brand-dark); box-shadow: var(--focus-ring); }
.pf-error { color: var(--c-danger); font-weight: 700; font-size: var(--fs-sm); min-height: 1.2em; margin-top: 4px; }
.pf-avatars, .pf-years { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.pf-avatar {
    font-size: 2rem;
    min-height: 60px;
    border-radius: var(--r-md);
    border: 3px solid var(--blue-bg);
    background: var(--c-surface-soft);
    transition: transform var(--t-fast), border-color var(--t-fast);
}
.pf-avatar:hover { transform: scale(1.06); }
.pf-avatar.selected { border-color: var(--c-brand-dark); background: var(--blue-bg); box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.2); }
.pf-year {
    font-weight: 900;
    font-size: var(--fs-md);
    min-height: 52px;
    border-radius: 14px;
    border: 3px solid var(--green-bg);
    background: #F6FBF6;
    color: var(--green-ink);
}
.pf-year.selected { background: var(--c-success); color: #fff; border-color: var(--c-success-dark); }
.pf-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.pf-btn {
    flex: 1;
    min-height: 54px;
    font-weight: 900;
    font-size: var(--fs-lg);
    border-radius: var(--r-pill);
    border: none;
}
.pf-save { background: linear-gradient(135deg, #66BB6A, var(--c-success)); color: #fff; box-shadow: 0 4px 0 var(--c-success-dark); }
.pf-save:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--c-success-dark); }
.pf-cancel { background: #F1F3F5; color: var(--c-ink); }
.pf-remove {
    display: block;
    margin: var(--sp-3) auto 0;
    min-height: 44px;
    padding: 6px 14px;
    background: none;
    border: none;
    color: var(--c-danger);
    font-weight: 800;
    text-decoration: underline;
}
@media (max-width: 600px) { .pf-card { padding: var(--sp-4) var(--sp-3) var(--sp-3); } }

/* ----- Classic games archive (collapsible) ----- */
.archive { margin-top: var(--space-6, 2rem); border: 2px dashed var(--c-line, #C9DCEB); border-radius: var(--radius-lg, 24px); padding: 0 1rem; background: rgba(255, 255, 255, 0.55); }
.archive[open] { padding-bottom: 1rem; }
.archive-summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; min-height: var(--tap, 48px); padding: 0.75rem 0; }
.archive-summary::-webkit-details-marker { display: none; }
.archive-summary::after { content: '▾'; margin-left: auto; font-weight: 900; color: var(--c-ink-soft, #4A5B70); transition: transform 0.2s; }
.archive[open] .archive-summary::after { transform: rotate(180deg); }
.archive-title { font-size: 1.15rem; font-weight: 900; color: var(--c-ink, #1A2B4A); }
.archive-note { font-size: 0.9rem; color: var(--c-ink-soft, #4A5B70); }

/* ---------- Computer screens: the whole hub (sky, clouds, grass) is a rounded panel ---------- */
@media (min-width: 768px) {
    body:has(#hub-screen:not(.hidden)) { background: var(--c-page); }
    #hub-screen {
        max-width: 900px;
        width: calc(100% - 48px);
        margin: 24px auto;
        border-radius: 50px;
        overflow: clip;
        box-shadow: 0 2px 6px rgba(26, 43, 74, 0.08), 0 24px 60px rgba(26, 43, 74, 0.18);
        isolation: isolate;
    }
    #hub-screen .sky-bg, #hub-screen .cloud { position: absolute; }
}