/* ══════════════════════════════════════════════════════════════════════════
   PANELS — Level Select, Stats, Settings, Album, Streak, Cat Unlock, Premium
   Layer: WorldProgressView / RoomProgressPanel / UnlockCard
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Next Goal Widget (Main Menu) ─────────────────────────── */
.ls-next-goal {
    background: linear-gradient(135deg, rgba(255,215,0,.06), rgba(255,165,0,.04));
    border: 1px solid rgba(255,215,0,.15);
    border-radius: 12px;
    padding: .7rem 1rem;
    margin-top: .6rem;
    display: flex; align-items: center; gap: .7rem;
    cursor: pointer;
    transition: border-color .2s;
}
.ls-next-goal:hover { border-color: rgba(255,215,0,.3); }
.ls-next-goal-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 0 6px rgba(255,215,0,.3));
}
.ls-next-goal-info { flex: 1; text-align: left; }
.ls-next-goal-label {
    font-size: .55rem; letter-spacing: 1.5px;
    color: rgba(255,215,0,.5);
    text-transform: uppercase;
    margin-bottom: .1rem;
}
.ls-next-goal-name {
    font-size: .8rem; font-weight: 600;
    color: rgba(255,255,255,.7);
    margin-bottom: .25rem;
}
.ls-next-goal-bar {
    height: 4px;
    background: rgba(255,255,255,.08);
    border-radius: 2px;
    overflow: hidden;
}
.ls-next-goal-fill {
    height: 100%;
    background: linear-gradient(90deg, #FFD700, #FFA500);
    border-radius: 2px;
    width: 0;
    transition: width .5s ease;
}
.ls-next-goal-count {
    font-size: .7rem;
    color: rgba(255,215,0,.6);
    font-weight: 600;
}
.ls-next-goal.all-done {
    justify-content: center;
    gap: .4rem;
}
.ls-next-goal.all-done .ls-next-goal-info,
.ls-next-goal.all-done .ls-next-goal-count { display: none; }

/* ── Level Select ───────────────────────────────────── */
.level-select {
    position: fixed; inset: 0; z-index: 9100;
    display: flex; align-items: flex-start; justify-content: center;
    overflow-y: auto;
    background: rgba(20,10,35,.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 2rem 1rem 4rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
    transform: translateY(0);
}
.level-select.show { opacity: 1; pointer-events: auto; }

.ls-inner {
    width: 100%;
    max-width: 480px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ls-logo-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: .25rem;
    isolation: isolate;
}

/* Soft colour halo glowing from behind the wordmark — grounds the logo in
   the scene instead of letting it float as a pasted-on rectangle. */
.ls-logo-wrap::before {
    content: '';
    position: absolute;
    left: 50%; top: 40%;
    width: 116%; height: 150%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(ellipse 52% 46% at 44% 50%, rgba(255,122,170,.34), transparent 72%),
        radial-gradient(ellipse 46% 40% at 64% 48%, rgba(255,184,82,.30), transparent 72%);
    filter: blur(26px);
    z-index: -1;
    pointer-events: none;
    animation: lsHaloPulse 6s ease-in-out infinite;
}

.ls-title-logo {
    width: clamp(210px, 62vw, 360px);
    height: auto;
    display: block;
    margin: 0 auto;
    filter:
        drop-shadow(0 3px 8px rgba(0,0,0,.40))
        drop-shadow(0 16px 28px rgba(110,35,80,.34));
    animation: lsLogoFloat 5.5s ease-in-out infinite;
    transform-origin: 50% 80%;
    will-change: transform;
}

.ls-tagline {
    font-size: .68rem;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: rgba(255, 238, 230, .58);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    text-align: center;
    margin-top: .35rem;
}

/* Build-Badge im Menü — beim Deploy via tools/stamp-build.mjs gestempelt */
.ls-build {
    margin-top: 1rem;
    font-size: .58rem;
    letter-spacing: .1em;
    text-align: center;
    color: rgba(255, 238, 230, .3);
    font-variant-numeric: tabular-nums;
}

@keyframes lsLogoFloat {
    0%, 100% { transform: translateY(0) rotate(-.4deg); }
    50%      { transform: translateY(-7px) rotate(.5deg); }
}
@keyframes lsHaloPulse {
    0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
    .ls-title-logo, .ls-logo-wrap::before { animation: none; }
}
.ls-club-badge {
    text-align: center;
    font-size: .65rem;
    letter-spacing: .15em;
    margin-top: -.3rem;
    margin-bottom: .3rem;
    font-weight: 700;
}
.ls-club-badge.founder {
    color: #C0C0C0;
    text-shadow: 0 0 8px rgba(192,192,192,.4);
}
.ls-club-badge.club {
    color: #FFD700;
    text-shadow: 0 0 8px rgba(255,215,0,.5);
    animation: clubPulse 3s ease-in-out infinite;
}
@keyframes clubPulse {
    0%, 100% { text-shadow: 0 0 8px rgba(255,215,0,.5); }
    50%      { text-shadow: 0 0 14px rgba(255,215,0,.8); }
}
.ls-inner.premium::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 20%, rgba(255,215,0,.06) 0%, transparent 65%);
    pointer-events: none; z-index: -1;
}

.ls-tier {
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.1);
}
.ls-tier-connector {
    width: 2px; height: 15px;
    background: rgba(255,255,255,.1);
    margin: 0 auto;
}

.ls-tier-label {
    font-family: 'Fredoka', sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    text-align: center;
}
.ls-tier-label.easy   { color: #d4873f; }
.ls-tier-label.medium { color: #b07baa; }
.ls-tier-label.hard   { color: #6ba3a0; }
.ls-tier-label.expert { color: #c96b4f; }
.ls-tier-label.master { color: #c9a84c; }
.ls-tier.easy   { background: rgba(212,135,63,.08); border-color: rgba(212,135,63,.2); }
.ls-tier.medium { background: rgba(176,123,170,.08); border-color: rgba(176,123,170,.2); }
.ls-tier.hard   { background: rgba(107,163,160,.08); border-color: rgba(107,163,160,.2); }
.ls-tier.expert { background: rgba(201,107,79,.08); border-color: rgba(201,107,79,.2); }
.ls-tier.master { background: rgba(201,168,76,.08); border-color: rgba(201,168,76,.2); }
.ls-tier.tier-locked { opacity: .5; }

.ls-tut-btn {
    position: absolute;
    top: 1.4rem;
    right: 1.5rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.70);
    font-size: .85rem;
    font-family: var(--f-mono);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.ls-tut-btn:hover { background: rgba(255,255,255,.15); }

/* ── Level Select action buttons ───────────────────────── */
.ls-actions {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin: .8rem 0 1rem;
}
.ls-actions-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-top: .3rem;
}

.ls-action-btn {
    font-family: 'Fredoka', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    padding: .75rem 1.4rem;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    transition: transform .1s, box-shadow .1s;
    text-transform: uppercase;
}
.ls-action-btn:active { transform: translateY(2px); }
.ls-action-btn:disabled { opacity: .38; cursor: default; }

.ls-action-btn--play {
    font-size: 1.25rem;
    padding: 1rem 1.8rem;
    background: linear-gradient(135deg, #00E676 0%, #00C853 50%, #00BFA5 100%);
    color: #003d20;
    box-shadow: 0 5px 0 #00894a, 0 8px 20px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.35);
    animation: playPulse 2s ease-in-out infinite;
}
.ls-action-btn--play:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #00894a, 0 12px 28px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.35); }
.ls-action-btn--play:active { box-shadow: 0 2px 0 #00894a, 0 3px 8px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.35); }
@keyframes playPulse {
    0%, 100% { box-shadow: 0 5px 0 #00894a, 0 8px 20px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.35); }
    50% { box-shadow: 0 5px 0 #00894a, 0 8px 28px rgba(0,230,118,.4), inset 0 2px 0 rgba(255,255,255,.35); }
}

.ls-actions-modes {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.ls-actions-modes .ls-action-btn {
    font-size: 1.25rem;
    padding: 1rem 1.8rem;
}

.ls-action-btn--daily {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
    color: #4a2000;
    box-shadow: 0 4px 0 #B8860B, 0 6px 15px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3);
}
.ls-action-btn--daily:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #B8860B, 0 8px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3); }
.ls-action-btn--daily:active { box-shadow: 0 2px 0 #B8860B, 0 3px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3); }

.ls-action-btn--shop {
    background: linear-gradient(135deg, #A855F7 0%, #8B5CF6 50%, #6D28D9 100%);
    color: #fff;
    box-shadow: 0 4px 0 #4C1D95, 0 6px 15px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
.ls-action-btn--shop:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #4C1D95, 0 8px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2); }
.ls-action-btn--shop:active { box-shadow: 0 2px 0 #4C1D95, 0 3px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2); }

.ls-action-btn--secondary {
    font-size: .8rem;
    font-weight: 500;
    padding: .6rem .8rem;
    border-radius: 100px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,215,0,.18);
    color: rgba(255,255,255,.65);
    box-shadow: none;
    text-transform: uppercase;
    transition: background .15s, border-color .15s, transform .1s;
}
.ls-action-btn--secondary:hover { background: rgba(255,255,255,.12); border-color: rgba(255,215,0,.35); transform: none; }
.ls-action-btn--secondary:active { transform: scale(.97); }

.ls-action-btn--album { border-color: rgba(255,215,0,.4); color: rgba(255,215,0,.8); }

/* ── Level grid ────────────────────────────────────────── */
.ls-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .6rem;
}

.ls-card {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    font-family: 'Fredoka', sans-serif;
    border: none;
}
.ls-card:hover:not(:disabled) { transform: scale(1.1); }
.ls-card:active:not(:disabled){ transform: scale(.93); }

.ls-card.solved {
    background: linear-gradient(135deg, #FFD700, #FF8C00);
    box-shadow: 0 3px 0 #B8860B, 0 0 15px rgba(255,200,0,.2);
    color: #4a2000;
}
.ls-card.locked {
    background: rgba(255,255,255,.05);
    border: 2px solid rgba(255,255,255,.1);
    cursor: default;
    color: rgba(255,255,255,.2);
}
.ls-card.current {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    box-shadow: 0 3px 0 #4C1D95, 0 0 20px rgba(139,92,246,.3);
    color: #fff;
    animation: nodeGlow 2s infinite alternate;
}
.ls-card:not(.solved):not(.locked):not(.current) {
    background: rgba(255,255,255,.08);
    border: 2px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.7);
}

@keyframes nodeGlow {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .ls-card.current { animation: none; }
}

.ls-num   { font-size: .8rem; font-weight: 800; line-height: 1; }
.ls-stars { font-size: .4rem; letter-spacing: 0; line-height: 1; }

/* ── Stats Screen ──────────────────────────────────────── */
.screen-overlay {
    position: fixed;
    inset: 0;
    z-index: 9250;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Keep cards & close buttons clear of notches / home indicator */
    padding:
        env(safe-area-inset-top)
        env(safe-area-inset-right)
        env(safe-area-inset-bottom)
        env(safe-area-inset-left);
    background: rgba(45,28,15,.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.screen-overlay.hidden:not(.sheet-panel) { display: none; }

/* Sheet-style slide-up panels */
.sheet-panel {
    opacity: 0;
    pointer-events: none;
    transform: translateY(40px);
    transition: opacity .35s ease, transform .35s cubic-bezier(.2,.9,.3,1);
}
.sheet-panel:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.stats-card {
    background: linear-gradient(145deg, rgba(85,50,28,.95), rgba(58,34,20,.95));
    border: 1px solid rgba(255,215,0,.12);
    border-radius: 24px;
    padding: 2rem 2.5rem;
    max-width: 360px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,240,220,.08);
}
.stats-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.3rem;
    letter-spacing: 3px;
    margin: 0 0 1.2rem;
    background: linear-gradient(180deg, #FFD700, #d4873f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.stats-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .35rem 1.5rem;
    margin-bottom: 1.4rem;
    text-align: left;
}
.stats-label { color: rgba(255,255,255,.55); font-size: .85rem; }
.stats-value { color: var(--gold); font-size: .85rem; font-weight: 600; text-align: right; }
.stats-sub {
    font-family: var(--f-mono);
    font-size: .75rem;
    letter-spacing: 2px;
    color: rgba(255,255,255,.45);
    margin: 0 0 .8rem;
}
.ach-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    justify-content: center;
    margin-bottom: 1.6rem;
}
.ach-icon         { font-size: 1.4rem; opacity: .2; cursor: default; transition: opacity .2s; }
.ach-icon.unlocked { opacity: 1; filter: drop-shadow(0 0 6px rgba(255,215,0,.3)); }

/* ── Settings ──────────────────────────────────────── */
.settings-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .6rem 1rem;
  align-items: center;
  margin-bottom: 1.4rem;
  text-align: left;
}
.settings-label { color: rgba(255,255,255,.8); font-size: .85rem; font-weight: 500; }
.settings-control { display: flex; align-items: center; gap: .5rem; }
.settings-slider {
  flex: 1; height: 4px;
  -webkit-appearance: none; appearance: none;
  background: rgba(255,215,0,.15); border-radius: 2px; outline: none;
}
.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: linear-gradient(135deg, #FFD700, #FF8C00);
    box-shadow: 0 2px 4px rgba(0,0,0,.3);
    cursor: pointer;
}
.settings-toggle {
  background: none; border: none;
  font-size: 1.1rem; cursor: pointer; padding: 2px;
}

/* ── Cat Album ─────────────────────────────────────────── */
.album-card {
  background: linear-gradient(145deg, rgba(82,52,32,.92), rgba(58,36,22,.92));
  border: 1px solid rgba(255,215,0,.12);
  border-radius: 24px;
  padding: 1.5rem 2rem;
  max-width: 400px; width: 92%;
  text-align: center;
  max-height: 80vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,240,220,.08);
}
.album-count { font-size: .8rem; color: rgba(255,255,255,.5); margin: -.5rem 0 1rem; letter-spacing: 2px; }
.album-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-bottom: 1.2rem; }
.album-cell {
  aspect-ratio: 1; border-radius: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,215,0,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; cursor: pointer;
  transition: transform .1s, background .15s;
}
.album-cell:hover { background: rgba(255,255,255,.12); transform: scale(1.05); }
.album-cell.locked { opacity: .25; cursor: default; font-size: 1rem; }
.album-cell.locked:hover { transform: none; background: rgba(255,255,255,.06); }
.album-cell.premium-locked { border-color: rgba(212,135,63,.3); opacity: .5; }
.album-cell.mascot {
    border: 2px solid rgba(255,200,50,.8);
    box-shadow: 0 0 8px rgba(255,200,50,.3);
}
.album-cell.premium-unlocked {
  border-color: rgba(255,215,0,.5);
  background: linear-gradient(180deg, rgba(255,215,0,.08), rgba(255,140,0,.04));
  box-shadow: 0 0 12px rgba(255,215,0,.2);
}
.album-cell.founder-cat {
  position: relative;
}
.album-cell.founder-cat::after {
  content: 'FOUNDER';
  position: absolute; top: 4px; right: 4px;
  background: linear-gradient(135deg, #C0C0C0, #E8E8E8);
  color: #333; font-size: .5rem; font-weight: 700;
  padding: 2px 6px; border-radius: 100px;
  letter-spacing: .1em;
}
.album-cell.season-cat {
  background: linear-gradient(180deg, rgba(255,183,197,.1), rgba(255,105,180,.05));
  border-color: rgba(255,183,197,.5);
}

.mascot-btn {
    display: block;
    margin: .8rem auto .4rem;
    padding: .55rem 1.4rem;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
    border: none;
    border-radius: 100px;
    color: #4a2000;
    font-family: 'Fredoka', sans-serif;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 0 #B8860B, 0 5px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.3);
    transition: transform .1s, box-shadow .1s;
}
.mascot-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 0 #B8860B, 0 7px 15px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.3);
}
.mascot-btn.active {
    background: rgba(255,200,50,.1);
    border-color: rgba(255,200,50,.3);
    color: rgba(255,220,150,.7);
    cursor: default;
}

/* ── Cat Detail ────────────────────────────────────────── */
.cat-detail { max-width: 280px; }
.cat-detail-emoji { font-size: 3.5rem; margin-bottom: .5rem; }
.cat-breed { font-size: .75rem; color: rgba(255,255,255,.5); letter-spacing: 2px; text-transform: uppercase; margin: -.3rem 0 .8rem; }
.cat-fact { font-size: .85rem; color: rgba(255,255,255,.7); font-style: italic; margin-bottom: 1.2rem; }

/* ── Serie Display ─────────────────────────────────────── */
.ls-serie-display {
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
    font-size: .8rem; font-weight: 500;
    color: rgba(255,215,0,.8);
    padding: .6rem .8rem;
    border-radius: 100px;
    border: 1px solid rgba(255,215,0,.18);
    background: rgba(255,255,255,.06);
    text-transform: uppercase;
}

/* ── Premium Banner ────────────────────────────────────── */
.premium-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  padding: .5rem max(1rem, env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: rgba(60,40,25,.92);
  border-top: 1px solid rgba(255,215,0,.3);
  box-shadow: 0 -4px 20px rgba(0,0,0,.3);
  font-size: .7rem; color: rgba(255,255,255,.6);
  z-index: 100;
}
.premium-banner.hidden { display: none; }
.premium-btn {
    font-family: 'Fredoka', sans-serif; font-size: .7rem; font-weight: 600;
    padding: .35rem .9rem;
    background: linear-gradient(135deg, #FFD700, #FF8C00);
    border: none;
    border-radius: 100px; color: #4a2000; cursor: pointer;
    box-shadow: 0 2px 0 #B8860B, 0 3px 8px rgba(0,0,0,.3);
    transition: transform .1s, box-shadow .1s;
}
.premium-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 0 #B8860B, 0 5px 12px rgba(0,0,0,.3); }
.premium-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #B8860B; }
.premium-dismiss {
    background: none; border: none; color: rgba(255,255,255,.4);
    font-size: .9rem; cursor: pointer; padding: .2rem .4rem;
    line-height: 1; transition: color .15s;
}
.premium-dismiss:hover { color: rgba(255,255,255,.8); }

/* ══════════════════════════════════════════════════════
   CAT UNLOCK CELEBRATION
   ══════════════════════════════════════════════════════ */
.cat-unlock-overlay {
    position: fixed; inset: 0; z-index: 9500;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8,4,20,.92);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    opacity: 0; pointer-events: none;
    transition: opacity .5s ease;
}
.cat-unlock-overlay.show { opacity: 1; pointer-events: auto; }

.confetti-canvas {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
}

.cat-unlock-content {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    gap: .6rem; padding: 2rem; text-align: center;
}

.cat-unlock-label {
    font-family: 'Fredoka', var(--f-head), sans-serif;
    font-size: clamp(.8rem, 3vw, 1rem);
    letter-spacing: .35em; text-transform: uppercase;
    color: rgba(255,200,100,.7);
    opacity: 0; transform: translateY(20px);
    animation: unlockFadeUp .6s ease-out .3s forwards;
}

.cat-unlock-ring {
    width: clamp(160px, 48vw, 220px); height: clamp(160px, 48vw, 220px);
    border-radius: 50%;
    padding: 6px;
    background: conic-gradient(from 0deg, #ffd700, #ff8c00, #ff4500, #ff69b4, #ba55d3, #4169e1, #00ced1, #32cd32, #ffd700);
    box-shadow: 0 0 40px rgba(255,200,50,.4), 0 0 80px rgba(255,150,50,.2);
    opacity: 0; transform: scale(.3) rotate(-180deg);
    animation: unlockRingReveal .8s cubic-bezier(.34,1.56,.64,1) .1s forwards;
}
.cat-unlock-ring canvas {
    width: 100%; height: 100%; border-radius: 50%;
    background: radial-gradient(circle at 50% 60%, #5a3d2b, #3a2518 70%, #2a1810);
}
@keyframes unlockRingReveal {
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.cat-unlock-name {
    font-family: 'Fredoka', var(--f-head), sans-serif;
    font-size: clamp(2rem, 8vw, 3.2rem);
    font-weight: 700; color: #fff;
    text-shadow: 0 0 30px rgba(255,200,50,.3), 0 2px 0 rgba(200,150,50,.5);
    opacity: 0; transform: translateY(20px) scale(.8);
    animation: unlockNamePop .6s cubic-bezier(.34,1.56,.64,1) .7s forwards;
}
@keyframes unlockNamePop {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.cat-unlock-breed {
    font-size: clamp(.7rem, 2.5vw, .85rem);
    letter-spacing: .25em; text-transform: uppercase;
    color: rgba(255,200,150,.5);
    opacity: 0; animation: unlockFadeUp .5s ease-out .9s forwards;
}

.cat-unlock-fact {
    font-size: clamp(.8rem, 2.8vw, .95rem);
    color: rgba(255,255,255,.65);
    font-style: italic; max-width: 340px; line-height: 1.5;
    opacity: 0; animation: unlockFadeUp .5s ease-out 1.1s forwards;
}

.cat-unlock-hint {
    color: rgba(255,220,150,.9);
    font-size: .85rem;
    font-weight: 600;
    margin-top: .5rem;
    opacity: 0;
    animation: unlockFadeUp .5s ease-out 1.3s forwards;
}

.cat-unlock-btn {
    font-family: 'Fredoka', var(--f-head), sans-serif;
    font-weight: 600; font-size: 1rem;
    letter-spacing: .1em; text-transform: uppercase;
    color: #fff; border: none;
    padding: .7em 2.5em; border-radius: 100px; cursor: pointer;
    background: linear-gradient(135deg, #ffc040, #e8a020);
    box-shadow: 0 3px 0 #b07818, 0 5px 15px rgba(0,0,0,.4),
                inset 0 1px 0 rgba(255,255,255,.3);
    opacity: 0; transform: translateY(15px);
    animation: unlockFadeUp .5s ease-out 1.4s forwards;
    transition: transform .12s, box-shadow .12s;
}
.cat-unlock-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 #b07818, 0 8px 20px rgba(0,0,0,.4),
                inset 0 1px 0 rgba(255,255,255,.3);
}
.cat-unlock-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #b07818, 0 2px 6px rgba(0,0,0,.3);
}

@keyframes unlockFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* Shimmer on the ring */
.cat-unlock-ring::after {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,.15) 10%, transparent 20%);
    animation: ringShimmer 3s linear infinite;
}
@keyframes ringShimmer { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════
   ROOM PROGRESS — Cat Café decoration system
   Layer: WorldProgressView / RoomProgressPanel / DecorSlotGrid
   ══════════════════════════════════════════════════════════════════════════ */

.room-panel {
    margin-top: .5rem;
    margin-bottom: .5rem;
    padding: .8rem;
    background: linear-gradient(145deg, rgba(85,55,32,.60), rgba(60,38,22,.50));
    border: 1px solid rgba(255,215,0,.15);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,240,220,.06);
}

/* ── Room Header ── */
.room-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .6rem;
}
.room-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    background: linear-gradient(180deg, #FFD700, #d4873f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgba(255,200,0,.2));
}
.room-count {
    font-size: .8rem;
    color: rgba(255,215,0,.7);
    font-weight: 700;
    letter-spacing: 1px;
    background: rgba(255,215,0,.08);
    padding: .15rem .5rem;
    border-radius: 8px;
    border: 1px solid rgba(255,215,0,.15);
}

/* ── Next Reward Card ── */
.room-next-card {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 1rem;
    background: linear-gradient(135deg, rgba(255,215,0,.12), rgba(255,165,0,.06));
    border: 1px solid rgba(255,215,0,.25);
    border-radius: 14px;
    margin-bottom: .7rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,240,200,.06);
    transition: border-color .3s, box-shadow .3s;
}
.room-next-card--close {
    border-color: rgba(255,215,0,.45);
    box-shadow: 0 0 20px rgba(255,215,0,.15), 0 4px 16px rgba(0,0,0,.2);
    animation: roomNextPulse 2s ease-in-out infinite alternate;
}
@keyframes roomNextPulse {
    from { box-shadow: 0 0 12px rgba(255,215,0,.10), 0 4px 16px rgba(0,0,0,.2); }
    to   { box-shadow: 0 0 28px rgba(255,215,0,.25), 0 4px 16px rgba(0,0,0,.2); }
}
.room-next-icon {
    font-size: 1.8rem;
    filter: drop-shadow(0 0 8px rgba(255,215,0,.35));
}
.room-next-info { flex: 1; }
.room-next-label {
    font-size: .55rem;
    letter-spacing: 2px;
    color: rgba(255,215,0,.65);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: .2rem;
}
.room-next-name {
    font-size: .85rem;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    margin-bottom: .25rem;
}
.room-next-bar {
    height: 5px;
    background: rgba(255,255,255,.10);
    border-radius: 3px;
    overflow: hidden;
}
.room-next-fill {
    height: 100%;
    background: linear-gradient(90deg, #FFD700, #FFA500);
    border-radius: 3px;
    transition: width .6s ease;
    box-shadow: 0 0 6px rgba(255,215,0,.3);
}
.room-next-dist {
    font-size: .75rem;
    color: rgba(255,215,0,.75);
    font-weight: 700;
    white-space: nowrap;
}

/* ── Decor Slot Grid ── */
.room-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .5rem;
}

.room-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: .5rem .25rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    position: relative;
    transition: transform .15s, background .2s, border-color .2s;
}

.room-slot-icon {
    font-size: 1.4rem;
    line-height: 1;
    transition: filter .3s;
}
.room-slot-name {
    font-size: .5rem;
    color: rgba(255,255,255,.5);
    text-align: center;
    line-height: 1.2;
    letter-spacing: .3px;
    font-weight: 600;
}
.room-slot-lock {
    position: absolute;
    top: 2px; right: 2px;
    font-size: .4rem;
    opacity: .5;
}

/* Locked state */
.room-slot--locked {
    opacity: .40;
}
.room-slot--locked .room-slot-icon {
    filter: grayscale(1) brightness(0.6);
}

/* Unlockable state (close to unlocking) */
.room-slot--unlockable {
    border-color: rgba(255,215,0,.35);
    background: rgba(255,215,0,.08);
    box-shadow: 0 0 10px rgba(255,215,0,.08);
}
.room-slot--unlockable .room-slot-icon {
    filter: grayscale(0.3) brightness(0.9);
    animation: slotPeek 2.5s ease-in-out infinite;
}
@keyframes slotPeek {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

.room-slot-bar {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,.10);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 2px;
}
.room-slot-fill {
    height: 100%;
    background: linear-gradient(90deg, #FFD700, #FFA500);
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(255,215,0,.3);
}

/* Unlocked state */
.room-slot--unlocked {
    border-color: rgba(255,215,0,.30);
    background: rgba(255,215,0,.10);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.room-slot--unlocked .room-slot-icon {
    filter: drop-shadow(0 0 6px rgba(255,215,0,.35));
}
.room-slot--unlocked .room-slot-name {
    color: rgba(255,215,0,.75);
}

@media (prefers-reduced-motion: reduce) {
    .room-slot--unlockable .room-slot-icon { animation: none; }
    .room-next-card--close { animation: none; }
}

/* ── Win Screen Room Hint ── */
.room-win-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-size: .75rem;
    color: rgba(255,255,255,.55);
    padding-top: .6rem;
    border-top: 1px solid rgba(255,255,255,.10);
    margin-top: .4rem;
    font-weight: 600;
}
.room-win-hint--unlock {
    color: rgba(255,215,0,.85);
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255,215,0,.2);
}
.room-win-hint--done {
    color: rgba(255,215,0,.65);
    font-weight: 700;
}
.room-win-icon {
    font-size: .85rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   SHOP
   ══════════════════════════════════════════════════════════════════════════ */

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .6rem;
}
.shop-balance {
    font-family: var(--f-head);
    font-size: .9rem;
    color: var(--gold);
    font-weight: 700;
}
.shop-tabs {
    display: flex;
    gap: .4rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid rgba(255,215,0,.15);
    padding-bottom: .4rem;
}
.shop-tab {
    flex: 1;
    font-family: var(--f-head);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(255,215,0,.4);
    background: none;
    border: none;
    padding: .5rem .3rem;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color .2s, border-color .2s;
}
.shop-tab.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .7rem;
    margin-bottom: 1.2rem;
    max-height: 55vh;
    overflow-y: auto;
    padding-right: .2rem;
}
.shop-item {
    background: rgba(255,255,255,.06);
    border: 2px solid rgba(255,215,0,.12);
    border-radius: 12px;
    padding: .6rem;
    text-align: center;
    transition: border-color .2s, opacity .2s;
}
.shop-item.active {
    border-color: rgba(100,200,100,.6);
    box-shadow: 0 0 10px rgba(100,200,100,.2);
}
.shop-item.locked {
    opacity: .45;
}
.shop-item-preview {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    margin-bottom: .5rem;
    background: rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 8px rgba(0,0,0,.4);
}
.shop-item-preview canvas {
    width: 100%;
    height: 100%;
}
.shop-item-name {
    font-family: var(--f-head);
    font-size: .75rem;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    margin-bottom: .3rem;
}
.shop-item-status {
    font-family: var(--f-head);
    font-size: .65rem;
    min-height: 1.6rem;
}
.shop-btn {
    font-family: var(--f-head);
    font-size: .65rem;
    font-weight: 700;
    border: none;
    border-radius: 100px;
    padding: .3rem .8rem;
    cursor: pointer;
    transition: transform .1s;
}
.shop-btn:active { transform: scale(.95); }
.shop-btn--buy {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #4a2000;
}
.shop-btn--select {
    background: linear-gradient(135deg, #66BB6A, #43A047);
    color: #fff;
}
.shop-btn--active {
    background: rgba(100,200,100,.2);
    color: #66BB6A;
    cursor: default;
}
.shop-btn--locked {
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.4);
    cursor: default;
}

/* ── Leaderboard ────────────────────────────────────────── */
.ls-action-btn--rank {
  background: linear-gradient(135deg, #FFD54F, #FFA000);
  color: #3a2000;
  box-shadow: 0 4px 0 #8a6400, 0 6px 16px rgba(0,0,0,.35);
}
.lb-timer {
  text-align: center; font-size: .75rem;
  color: rgba(255,255,255,.55);
  margin: 0 0 1rem;
}
.lb-user-banner {
  background: linear-gradient(135deg, rgba(255,215,0,.15), rgba(255,140,0,.08));
  border: 1px solid rgba(255,215,0,.3);
  border-radius: 12px;
  padding: .8rem 1rem;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem;
  margin-bottom: .8rem;
}
.lb-user-banner .lb-rank  { font-size: 1.3rem; font-weight: 700; color: #FFD700; }
.lb-user-banner .lb-nick  { color: rgba(255,255,255,.9); font-weight: 600; }
.lb-user-banner .lb-score { color: rgba(255,255,255,.7); }

.lb-list { display: flex; flex-direction: column; gap: .25rem; max-height: 55vh; overflow-y: auto; }
.lb-row {
  display: grid;
  grid-template-columns: 36px 1fr 60px;
  padding: .45rem .6rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 8px;
  font-size: .75rem;
  align-items: center;
}
.lb-row.user {
  background: linear-gradient(135deg, rgba(255,215,0,.15), rgba(255,140,0,.06));
  border-color: rgba(255,215,0,.4);
}
.lb-rank-col  { text-align: center; font-weight: 700; color: rgba(255,255,255,.7); }
.lb-nick-col  { color: rgba(255,255,255,.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-score-col { text-align: right; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.lb-row.top3 .lb-rank-col { color: #FFD700; }
.lb-separator {
  padding: .25rem 0; text-align: center;
  color: rgba(255,255,255,.3); font-size: .7rem;
}

/* ── Menu felt-texture overlay ───────────────────────────── */
.ls-inner::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.15 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  opacity: .1;
  mix-blend-mode: overlay;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.ls-inner > * { position: relative; z-index: 1; }

.menu-ambient {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: .35;
}