:root {
    --primary: #ff5e7e;
    --primary-hover: #e04867;
    --secondary: #4ea8de;
    --accent: #ffd166;
    --purple: #9d4edd;
    --mint: #06d6a0;
    --bg-pink: #fff4f6;
    --bg-cream: #fffdf9;
    --text-dark: #2c3e50;
    --text-muted: #64748b;
    --card-shadow: 0 15px 35px rgba(255, 94, 126, 0.12), 0 5px 15px rgba(0, 0, 0, 0.04);
    --glow-shadow: 0 0 25px rgba(255, 94, 126, 0.3);
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-full: 999px;
}

html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Outfit', sans-serif;
    background: linear-gradient(135deg, #fff0f4 0%, #f0f7ff 50%, #fff9e6 100%);
    background-attachment: fixed;
    color: var(--text-dark);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: clip;
    position: relative;
}

h1, h2, h3, h4, .logo-text, .gender-ribbon, .cat-name, .screen-pop-banner, .arena-cat-title, .callout-badge, .callout-badge-gallery, .play-pill, .score-pill, .trophy-btn, .btn-back-menu {
    font-family: 'Fredoka', cursive, sans-serif;
}

/* Background floating decorations */
.bg-decorations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.floating-paw {
    position: absolute;
    font-size: 2rem;
    opacity: 0.25;
    animation: floatAnim 12s infinite ease-in-out;
}

.paw-1 { top: 10%; left: 8%; animation-delay: 0s; font-size: 2.5rem; }
.paw-2 { top: 25%; right: 10%; animation-delay: 2s; font-size: 2.2rem; }
.paw-3 { top: 60%; left: 5%; animation-delay: 4s; font-size: 3rem; }
.paw-4 { top: 75%; right: 12%; animation-delay: 1s; font-size: 2.4rem; }
.paw-5 { top: 85%; left: 45%; animation-delay: 5s; font-size: 2rem; }
.paw-6 { top: 40%; right: 40%; animation-delay: 3s; font-size: 1.8rem; }

@keyframes floatAnim {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-25px) rotate(15deg); }
}

/* Page Layout */
.page-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header Navigation Bar (Full Width Fixed Top Bar) */
.header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
    width: 100%;
    position: relative;
    padding-top: 75px;
}

/* Row 1: Full-Width White Box Fixed at Top: 0 on ALL DEVICES (Zero Layout Shift) */
.header-row-1 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    z-index: 100000 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 2px solid rgba(255, 94, 126, 0.12) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.header-row-1-inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Logo Styling - Enlarged & Fixed Dimensions */
.logo {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-sizing: border-box !important;
}

.logo:hover {
    transform: scale(1.04) !important;
}

.logo-avatar-img {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.15)) !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.logo:hover .logo-avatar-img {
    transform: scale(1.1) rotate(-4deg) !important;
}

.logo-text {
    font-size: 2.05rem !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    letter-spacing: -0.5px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 48px !important;
}

.logo-text .highlight {
    color: var(--text-dark) !important;
}

/* Designer Badge - Fixed Desktop Dimensions, Font & Positioning */
.designer-badge {
    font-family: 'Outfit', 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    background: linear-gradient(135deg, #fff0f5, #ffe5ec) !important;
    padding: 0 16px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    width: 252px !important;
    min-width: 252px !important;
    max-width: 252px !important;
    border-radius: 50px !important;
    border: 2px dashed var(--primary) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 0.94rem !important;
    line-height: 1 !important;
    letter-spacing: -0.1px !important;
    box-shadow: 0 4px 12px rgba(255, 94, 126, 0.12) !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.badge-icon {
    font-size: 1.2rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.badge-text {
    font-family: 'Outfit', 'Fredoka', sans-serif !important;
    font-size: 0.94rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.badge-text strong {
    font-family: 'Outfit', 'Fredoka', sans-serif !important;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
}

/* Row 2: Navigation Bar with 4 Buttons (Clean Floating Pill Buttons) */
.header-row-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    box-shadow: none;
    border: none;
}

/* Subpage Navigation Buttons (Equal Width & Dimensions) */
.nav-gallery-btn,
.nav-games-btn,
.nav-draw-btn,
.nav-stories-btn,
.nav-likes-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fredoka', cursive, sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    padding: 0 20px;
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    min-width: 220px;
    box-sizing: border-box;
    text-align: center;
}

.nav-gallery-btn {
    background: linear-gradient(135deg, #06d6a0 0%, #00b4d8 100%);
    color: white;
    box-shadow: 0 6px 18px rgba(6, 214, 160, 0.3);
}

.nav-games-btn {
    background: linear-gradient(135deg, #ff5e7e 0%, #9d4edd 100%);
    color: white;
    box-shadow: 0 6px 18px rgba(255, 94, 126, 0.3);
}

.nav-draw-btn {
    background: linear-gradient(135deg, #ffb703 0%, #fb8500 100%);
    color: white;
    box-shadow: 0 6px 18px rgba(251, 133, 0, 0.3);
}

.nav-stories-btn {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    color: white;
    box-shadow: 0 6px 18px rgba(236, 72, 153, 0.3);
}

.nav-likes-btn {
    background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%);
    color: white;
    box-shadow: 0 6px 18px rgba(168, 85, 247, 0.3);
}

.nav-gallery-btn:hover,
.nav-games-btn:hover,
.nav-draw-btn:hover,
.nav-stories-btn:hover,
.nav-likes-btn:hover {
    transform: translateY(-2px) scale(1.04);
}

/* Hero Section (Homepage) */
.card-hero {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(15px);
    border-radius: 36px;
    padding: 40px 35px;
    box-shadow: var(--card-shadow);
    border: 3px solid #ffffff;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff0f3;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.8px;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    margin-bottom: 20px;
    border: 1px solid rgba(255, 94, 126, 0.2);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 94, 126, 0.7);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 94, 126, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(255, 94, 126, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 94, 126, 0); }
}

.main-title {
    font-size: 2.6rem;
    line-height: 1.25;
    color: var(--text-dark);
    margin-bottom: 35px;
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary) 0%, var(--purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Mascot Showcase Container */
.mascot-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 25px;
    margin-bottom: 25px;
    background: linear-gradient(180deg, #fff7f9 0%, #f0f7ff 100%);
    padding: 30px;
    border-radius: 30px;
    border: 2px solid #ffe3ec;
    position: relative;
}

.mascot-frame-wrapper {
    position: relative;
    width: 210px;
    height: 210px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mascot-frame-wrapper:hover {
    transform: scale(1.06) rotate(-2deg);
}

.mascot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    border-radius: 50%;
    border: 6px solid #ffffff;
    box-shadow: 0 12px 30px rgba(255, 94, 126, 0.25);
    transition: transform 0.3s ease;
}

.mascot-img.happy-jump {
    animation: catJump 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes catJump {
    0% { transform: scale(1) translateY(0); }
    30% { transform: scale(1.22, 0.82) translateY(-25px) rotate(6deg); }
    50% { transform: scale(0.92, 1.15) translateY(-40px) rotate(-6deg); }
    70% { transform: scale(1.08, 0.92) translateY(0); }
    100% { transform: scale(1) translateY(0); }
}

.mascot-sparkle {
    position: absolute;
    font-size: 1.5rem;
    animation: sparklePulse 2s infinite ease-in-out alternate;
}

.sparkle-tl { top: -5px; left: -5px; }
.sparkle-tr { top: -5px; right: -5px; animation-delay: 0.5s; }
.sparkle-bl { bottom: 10px; left: -10px; animation-delay: 1s; }
.sparkle-br { bottom: 10px; right: -10px; animation-delay: 1.5s; }

@keyframes sparklePulse {
    0% { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(1.3); opacity: 1; }
}

.mascot-hover-hint {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--purple);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(157, 78, 221, 0.3);
}

.mascot-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.name-tag {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.name-tag h2 {
    font-size: 1.8rem;
    color: var(--text-dark);
}

.cat-name {
    color: var(--primary);
}

.gender-ribbon {
    background: linear-gradient(135deg, #ff7597, #ff497c);
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 4px 14px;
    border-radius: var(--radius-full);
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(255, 73, 124, 0.3);
}

.gender-notice {
    background: #fff0f5;
    border-left: 5px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    display: flex;
    gap: 12px;
    align-items: center;
    box-shadow: 0 4px 15px rgba(255, 94, 126, 0.08);
}

.notice-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.notice-text {
    font-size: 0.95rem;
    color: #4a2c35;
    line-height: 1.45;
}

.notice-text u {
    text-decoration-color: var(--primary);
    text-decoration-thickness: 2px;
}

.petting-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 5px;
}

.btn-pet {
    background: linear-gradient(135deg, #ff7597 0%, #ff4757 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-full);
    font-family: 'Fredoka', cursive, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(255, 71, 87, 0.3);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-pet:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 12px 25px rgba(255, 71, 87, 0.4);
}

.btn-pet:active {
    transform: translateY(1px) scale(0.98);
}

.pet-count-display {
    font-size: 0.95rem;
    color: var(--text-muted);
}

.pet-count-display strong {
    font-size: 1.3rem;
    color: var(--primary);
}

/* Interactive Toys Bar */
.interactive-toys {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 25px;
}

.toy-btn {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    padding: 14px 26px;
    border-radius: var(--radius-full);
    font-family: 'Fredoka', cursive, sans-serif;
    font-size: 1.08rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 6px 16px rgba(0,0,0,0.05);
}

.toy-btn:hover {
    border-color: var(--primary);
    transform: translateY(-3px) scale(1.06);
    background: #fff0f3;
}

.toy-btn:active {
    transform: translateY(1px) scale(0.96);
}

.toy-feedback {
    margin-bottom: 25px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--purple);
    min-height: 28px;
}

/* Designer Story Card */
.designer-story {
    background: linear-gradient(135deg, #fffbe6 0%, #fff4e6 100%);
    border: 2px solid #ffe8b5;
    border-radius: 24px;
    padding: 24px 28px;
    text-align: left;
    margin-bottom: 35px;
    box-shadow: 0 6px 18px rgba(255, 209, 102, 0.15);
}

.story-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: #946200;
}

.story-header h3 {
    font-size: 1.3rem;
}

.story-body {
    font-size: 1rem;
    color: #5c4515;
    line-height: 1.6;
}

/* GALLERY CALLOUT CARD ON HOMEPAGE */
.gallery-callout-card {
    background: linear-gradient(135deg, #e6fffa 0%, #eef7ff 100%);
    border: 3px solid #b2f5ea;
    border-radius: 28px;
    padding: 30px 25px;
    margin-bottom: 35px;
    box-shadow: 0 10px 30px rgba(6, 214, 160, 0.15);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.callout-badge-gallery {
    display: inline-block;
    background: #06d6a0;
    color: white;
    font-size: 0.85rem;
    padding: 4px 14px;
    border-radius: var(--radius-full);
    margin-bottom: 12px;
}

.gallery-callout-card h2 {
    font-size: 1.8rem;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.gallery-callout-card p {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.btn-gallery-cta {
    display: inline-block;
    background: linear-gradient(135deg, #06d6a0 0%, #00b4d8 100%);
    color: white;
    font-family: 'Fredoka', cursive, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: var(--radius-full);
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(6, 214, 160, 0.35);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-gallery-cta:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 14px 30px rgba(6, 214, 160, 0.45);
}

/* GAMES CALLOUT CARD LOWER DOWN ON HOMEPAGE */
.games-callout-card {
    background: linear-gradient(135deg, #fff3f6 0%, #eef7ff 100%);
    border: 3px solid #ffd8e4;
    border-radius: 28px;
    padding: 30px 25px;
    margin-bottom: 35px;
    box-shadow: 0 10px 30px rgba(255, 94, 126, 0.15);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.callout-badge {
    display: inline-block;
    background: var(--purple);
    color: white;
    font-size: 0.85rem;
    padding: 4px 14px;
    border-radius: var(--radius-full);
    margin-bottom: 12px;
}

.games-callout-card h2 {
    font-size: 1.8rem;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.games-callout-card p {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.btn-games-cta {
    display: inline-block;
    background: linear-gradient(135deg, #ff7597 0%, #9d4edd 100%);
    color: white;
    font-family: 'Fredoka', cursive, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: var(--radius-full);
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(255, 117, 151, 0.35);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    border: none;
}

.btn-games-cta:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 14px 30px rgba(157, 78, 221, 0.45);
}

/* DRAWING CALLOUT CARD LOWER DOWN ON HOMEPAGE */
.draw-callout-card {
    background: linear-gradient(135deg, #fff7ed 0%, #fff0f5 100%);
    border: 3px solid #ffd8a8;
    border-radius: 28px;
    padding: 30px 25px;
    margin-bottom: 35px;
    box-shadow: 0 10px 30px rgba(251, 133, 0, 0.15);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.callout-badge-draw {
    display: inline-block;
    background: #fb8500;
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: var(--radius-full);
    margin-bottom: 12px;
}

.draw-callout-card h2 {
    font-size: 1.8rem;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.draw-callout-card p {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.btn-draw-cta {
    display: inline-block;
    background: linear-gradient(135deg, #ffb703 0%, #fb8500 100%);
    color: white;
    font-family: 'Fredoka', cursive, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: var(--radius-full);
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(251, 133, 0, 0.35);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-draw-cta:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 14px 30px rgba(251, 133, 0, 0.45);
}

/* STORIES CALLOUT CARD ON HOMEPAGE */
.stories-callout-card {
    background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 50%, #f5d0fe 100%) !important;
    border: 3px solid #f0abfc !important;
    border-radius: 28px !important;
    padding: 30px 25px !important;
    margin-bottom: 35px !important;
    box-shadow: 0 10px 30px rgba(217, 70, 239, 0.15) !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.callout-badge-stories {
    display: inline-block !important;
    background: #c026d3 !important;
    color: white !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    padding: 4px 14px !important;
    border-radius: var(--radius-full) !important;
    margin-bottom: 12px !important;
}

.stories-callout-card h2 {
    font-size: 1.8rem !important;
    color: #701a75 !important;
    margin-bottom: 10px !important;
}

.stories-callout-card p {
    font-size: 1.05rem !important;
    color: #86198f !important;
    margin-bottom: 20px !important;
}

.btn-stories-cta,
.btn-write-story {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #c026d3 0%, #8b5cf6 100%) !important;
    color: #ffffff !important;
    font-family: 'Fredoka', cursive, sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    padding: 14px 32px !important;
    border-radius: var(--radius-full) !important;
    text-decoration: none !important;
    box-shadow: 0 10px 25px rgba(192, 38, 211, 0.35) !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: pointer !important;
    border: none !important;
}

.btn-stories-cta:hover,
.btn-write-story:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 14px 30px rgba(192, 38, 211, 0.45) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.btn-stories-cta:visited,
.btn-write-story:visited {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Email Notify Form */
.notify-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
    border: 2px solid #f1f5f9;
    margin-bottom: 30px;
}

.notify-card h3 {
    font-size: 1.25rem;
    margin-bottom: 18px;
    color: var(--text-dark);
}

.notify-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.input-email {
    flex-grow: 1;
    min-width: 250px;
    padding: 14px 20px;
    border-radius: var(--radius-full);
    border: 2px solid #e2e8f0;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
}

.input-email:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 4px rgba(78, 168, 222, 0.15);
}

.btn-submit {
    background: linear-gradient(135deg, var(--secondary) 0%, #3a86ff 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: var(--radius-full);
    font-family: 'Fredoka', cursive, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(78, 168, 222, 0.3);
    transition: all 0.2s ease;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(78, 168, 222, 0.4);
}

.notify-message {
    margin-top: 15px;
    padding: 12px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    background: #e6fffa;
    color: #047857;
    border: 1px solid #a7f3d0;
}

/* Footer */
.footer {
    text-align: center;
    padding: 25px;
    margin-top: auto;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ---------------------------------------------------- */
/* GAMES PAGE STYLING (games.html)                      */
/* ---------------------------------------------------- */

.score-trophy-bar {
    display: flex;
    align-items: center;
    gap: 14px;
}

.score-pill {
    background: linear-gradient(135deg, #fff0f3 0%, #fffbe6 100%);
    border: 2px solid #ffd166;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(255, 209, 102, 0.3);
}

.coin-icon {
    font-size: 1.3rem;
    animation: bounce 2s infinite ease-in-out;
}

.trophy-btn {
    background: linear-gradient(135deg, #9d4edd 0%, #7209b7 100%);
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(157, 78, 221, 0.3);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.trophy-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 22px rgba(157, 78, 221, 0.4);
}

.category-menu-card {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(15px);
    border-radius: 36px;
    padding: 35px 30px;
    box-shadow: var(--card-shadow);
    border: 3px solid #ffffff;
}

.menu-title-box {
    text-align: center;
    margin-bottom: 35px;
}

.cat-hero-emoji {
    font-size: 3.2rem;
    display: block;
    margin-bottom: 10px;
}

.menu-title-box h1 {
    font-size: 2.3rem;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.menu-title-box p {
    font-size: 1.08rem;
    color: var(--text-muted);
}

/* Categories Grid */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}

.category-card {
    background: #ffffff;
    border-radius: 26px;
    padding: 25px 22px;
    border: 3px solid #f1f5f9;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    position: relative;
}

.category-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.09);
}

.cat-icon-badge {
    font-size: 2.4rem;
    margin-bottom: 12px;
}

.category-card h3 {
    font-size: 1.35rem;
    color: #0f172a;
    margin-bottom: 8px;
}

.category-card p {
    font-size: 0.95rem;
    color: #334155;
    margin-bottom: 20px;
    line-height: 1.45;
    flex-grow: 1;
    font-weight: 500;
}

.play-pill {
    align-self: flex-start;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Individual Category Theme Colors & Rich Gradients for ALL Cards */
.math-card { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important; border-color: #ffb6c1; }
.math-card .play-pill { background: linear-gradient(135deg, #ff7597, #ff4757); }

.spelling-card { background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%) !important; border-color: #93c5fd; }
.spelling-card .play-pill { background: linear-gradient(135deg, #4ea8de, #3a86ff); }

.english-card { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important; border-color: #fdba74; }
.english-card .play-pill { background: linear-gradient(135deg, #ffb703, #fb8500); }

.riddles-card { background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%) !important; border-color: #c084fc; }
.riddles-card .play-pill { background: linear-gradient(135deg, #9d4edd, #7209b7); }

.nature-card { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%) !important; border-color: #6ee7b7; }
.nature-card .play-pill { background: linear-gradient(135deg, #06d6a0, #0096c7); }

.geo-card { background: linear-gradient(135deg, #fccb90 0%, #d57eeb 100%) !important; border-color: #f472b6; }
.geo-card .play-pill { background: linear-gradient(135deg, #ff5e7e, #b5179e); }

.memory-card { background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%) !important; border-color: #86efac; }
.memory-card .play-pill { background: linear-gradient(135deg, #10b981, #047857); }

/* Game Arena Card */
.game-arena-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border-radius: 36px;
    padding: 30px;
    box-shadow: var(--card-shadow);
    border: 3px solid #ffffff;
}

/* Fullscreen Single Header Button */
.btn-fullscreen {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
    border: 2px solid #818cf8;
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

.btn-fullscreen:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.45);
}

.btn-fullscreen:active {
    transform: translateY(0);
}

.btn-fullscreen.active-fullscreen {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-color: #f87171;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}

.btn-fullscreen.active-fullscreen:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.btn-fullscreen .fs-icon {
    font-size: 1.15rem;
}

/* Fullscreen Mode Styling */
body.arena-fullscreen-active {
    overflow: hidden !important;
}

.game-arena-card.is-fullscreen,
.game-arena-card:fullscreen,
.game-arena-card:-webkit-full-screen,
.game-arena-card:-moz-full-screen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    width: 100dvw !important;
    height: 100dvh !important;
    z-index: 999999 !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #fff5f8 0%, #eef2ff 100%) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* In fullscreen: header is compact and sticky */
.game-arena-card.is-fullscreen .arena-header,
.game-arena-card:fullscreen .arena-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 0;
    padding: 10px 16px;
    margin-bottom: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 2px solid #f1f5f9;
}

/* In fullscreen: hide the redundant back-to-menu button */
.game-arena-card.is-fullscreen #backToMenuBtn,
.game-arena-card:fullscreen #backToMenuBtn {
    display: none !important;
}

/* In fullscreen: content area fills remaining space */
.game-arena-card.is-fullscreen .arena-content-grid,
.game-arena-card:fullscreen .arena-content-grid {
    flex: 1 1 auto;
    padding: 16px 20px 24px;
}

/* In fullscreen on mobile: hide the sidebar mascot, show popup instead */
@media (max-width: 719px) {
    .game-arena-card.is-fullscreen .mascot-companion-column,
    .game-arena-card:fullscreen .mascot-companion-column {
        display: none !important;
    }
    .game-arena-card.is-fullscreen .arena-content-grid,
    .game-arena-card:fullscreen .arena-content-grid {
        grid-template-columns: 1fr !important;
    }
}

/* In fullscreen: ensure hidden elements are strictly hidden */
.game-arena-card.is-fullscreen [hidden],
.game-arena-card:fullscreen [hidden],
.game-arena-card.is-fullscreen .arcade-game-container[hidden],
.game-arena-card:fullscreen .arcade-game-container[hidden] {
    display: none !important;
}

/* In fullscreen on desktop (≥720px): expand actual game board/field to take maximum width and height */
@media (min-width: 720px) {
    .game-arena-card.is-fullscreen .arena-content-grid,
    .game-arena-card:fullscreen .arena-content-grid {
        grid-template-columns: 1fr 260px !important;
        max-width: 1400px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 16px 24px 32px !important;
    }

    .game-arena-card.is-fullscreen .quiz-column,
    .game-arena-card:fullscreen .quiz-column {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .game-arena-card.is-fullscreen .arcade-game-container:not([hidden]),
    .game-arena-card:fullscreen .arcade-game-container:not([hidden]) {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 1. Status bar */
    .game-arena-card.is-fullscreen .arcade-status-bar,
    .game-arena-card:fullscreen .arcade-status-bar {
        max-width: 700px !important;
        margin-bottom: 16px !important;
    }

    .game-arena-card.is-fullscreen .arcade-status-badge,
    .game-arena-card:fullscreen .arcade-status-badge {
        font-size: 1.15rem !important;
        padding: 8px 20px !important;
    }

    .game-arena-card.is-fullscreen .btn-arcade-reset,
    .game-arena-card:fullscreen .btn-arcade-reset,
    .game-arena-card.is-fullscreen .btn-arcade-pause,
    .game-arena-card:fullscreen .btn-arcade-pause {
        font-size: 1.05rem !important;
        padding: 8px 20px !important;
    }

    /* 2. Tic-Tac-Toe Game Board */
    .game-arena-card.is-fullscreen .tictactoe-grid,
    .game-arena-card:fullscreen .tictactoe-grid {
        grid-template-columns: repeat(3, min(22vh, 175px)) !important;
        grid-template-rows: repeat(3, min(22vh, 175px)) !important;
        gap: 16px !important;
        margin: 10px auto !important;
    }

    .game-arena-card.is-fullscreen .ttt-cell,
    .game-arena-card:fullscreen .ttt-cell {
        width: 100% !important;
        height: 100% !important;
        font-size: min(12vh, 5.5rem) !important;
        border-radius: 26px !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
    }

    /* 3. Snake & Tetris Canvas wrapper */
    .game-arena-card.is-fullscreen .canvas-wrapper,
    .game-arena-card:fullscreen .canvas-wrapper {
        border-radius: 28px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .game-arena-card.is-fullscreen #snakeCanvas,
    .game-arena-card:fullscreen #snakeCanvas {
        width: min(76vh, calc(100vw - 320px), 740px) !important;
        height: min(76vh, calc(100vw - 320px), 740px) !important;
        max-width: 100% !important;
        border-radius: 26px !important;
        border: 4px solid #0f172a !important;
        box-shadow: 0 16px 45px rgba(15, 23, 42, 0.4) !important;
    }

    .game-arena-card.is-fullscreen #tetrisCanvas,
    .game-arena-card:fullscreen #tetrisCanvas {
        height: min(75vh, 700px) !important;
        width: auto !important;
        max-width: 100% !important;
        border-radius: 26px !important;
        border: 4px solid #0f172a !important;
        box-shadow: 0 16px 45px rgba(15, 23, 42, 0.4) !important;
    }

    /* 4. Whack-a-Fish Game Board */
    .game-arena-card.is-fullscreen .whack-grid,
    .game-arena-card:fullscreen .whack-grid {
        grid-template-columns: repeat(3, min(22vh, 175px)) !important;
        grid-template-rows: repeat(3, min(22vh, 175px)) !important;
        gap: 18px !important;
        margin: 10px auto !important;
    }

    .game-arena-card.is-fullscreen .whack-hole,
    .game-arena-card:fullscreen .whack-hole {
        width: 100% !important;
        height: 100% !important;
        border-width: 5px !important;
    }

    .game-arena-card.is-fullscreen .whack-item,
    .game-arena-card:fullscreen .whack-item {
        font-size: min(11vh, 5.2rem) !important;
        bottom: -90px !important;
    }

    .game-arena-card.is-fullscreen .whack-hole.up .whack-item,
    .game-arena-card:fullscreen .whack-hole.up .whack-item {
        bottom: 18px !important;
    }

    /* 5. Bubbles Box */
    .game-arena-card.is-fullscreen .bubbles-box,
    .game-arena-card:fullscreen .bubbles-box {
        width: min(85vw, 750px) !important;
        height: min(62vh, 520px) !important;
        border-radius: 28px !important;
        border-width: 5px !important;
        box-shadow: 0 16px 40px rgba(56, 189, 248, 0.3) !important;
    }

    .game-arena-card.is-fullscreen .floating-bubble,
    .game-arena-card:fullscreen .floating-bubble {
        width: 80px !important;
        height: 80px !important;
        font-size: 2.8rem !important;
        border-width: 3px !important;
    }

    /* 6. Mini Cat Chess Game Board */
    .game-arena-card.is-fullscreen .chess-board-grid,
    .game-arena-card:fullscreen .chess-board-grid {
        width: min(65vh, 580px) !important;
        height: min(65vh, 580px) !important;
        max-width: none !important;
        border-radius: 24px !important;
        border-width: 5px !important;
        box-shadow: 0 16px 45px rgba(0, 0, 0, 0.22) !important;
        margin: 10px auto !important;
    }

    .game-arena-card.is-fullscreen .chess-board-grid.grid-5x5,
    .game-arena-card:fullscreen .chess-board-grid.grid-5x5 {
        width: min(68vh, 620px) !important;
        height: min(68vh, 620px) !important;
        max-width: none !important;
    }

    .game-arena-card.is-fullscreen .chess-square,
    .game-arena-card:fullscreen .chess-square {
        font-size: min(9vh, 3.2rem) !important;
    }

    .game-arena-card.is-fullscreen .chess-board-grid.grid-5x5 .chess-square,
    .game-arena-card:fullscreen .chess-board-grid.grid-5x5 .chess-square {
        font-size: min(7.5vh, 2.6rem) !important;
    }

    .game-arena-card.is-fullscreen .chess-piece-wrapper,
    .game-arena-card:fullscreen .chess-piece-wrapper {
        font-size: min(8vh, 3rem) !important;
        padding: 6px 12px !important;
        border-radius: 20px !important;
    }

    /* 7. Cat Solitaire Game Board */
    .game-arena-card.is-fullscreen .solitaire-board-wrapper,
    .game-arena-card:fullscreen .solitaire-board-wrapper {
        width: min(88vw, 750px) !important;
        max-width: none !important;
        gap: 20px !important;
        margin: 10px auto !important;
    }

    .game-arena-card.is-fullscreen .solitaire-foundations-row,
    .game-arena-card:fullscreen .solitaire-foundations-row {
        gap: 16px !important;
    }

    .game-arena-card.is-fullscreen .solitaire-foundation-basket,
    .game-arena-card:fullscreen .solitaire-foundation-basket {
        height: 140px !important;
        border-radius: 22px !important;
        border-width: 4px !important;
        font-size: 1.8rem !important;
    }

    .game-arena-card.is-fullscreen .solitaire-foundation-basket small,
    .game-arena-card:fullscreen .solitaire-foundation-basket small {
        font-size: 1rem !important;
    }

    .game-arena-card.is-fullscreen .solitaire-columns-row,
    .game-arena-card:fullscreen .solitaire-columns-row {
        gap: 16px !important;
    }

    .game-arena-card.is-fullscreen .solitaire-column-stack,
    .game-arena-card:fullscreen .solitaire-column-stack {
        min-height: 280px !important;
        border-radius: 22px !important;
        border-width: 4px !important;
    }

    .game-arena-card.is-fullscreen .solitaire-card-item,
    .game-arena-card:fullscreen .solitaire-card-item {
        height: 140px !important;
        border-radius: 20px !important;
        border-width: 3px !important;
    }

    .game-arena-card.is-fullscreen .solitaire-card-item .card-suit,
    .game-arena-card:fullscreen .solitaire-card-item .card-suit {
        font-size: 2.6rem !important;
    }

    .game-arena-card.is-fullscreen .solitaire-card-item .card-val,
    .game-arena-card:fullscreen .solitaire-card-item .card-val {
        font-size: 1.15rem !important;
    }

    /* 8. Memory Game Board */
    .game-arena-card.is-fullscreen .memory-board,
    .game-arena-card:fullscreen .memory-board {
        width: min(90vw, 850px) !important;
        max-width: none !important;
        gap: 18px !important;
        margin: 10px auto !important;
    }

    .game-arena-card.is-fullscreen .memory-card-tile,
    .game-arena-card:fullscreen .memory-card-tile {
        height: min(18vh, 160px) !important;
    }

    .game-arena-card.is-fullscreen .memory-card-front,
    .game-arena-card.is-fullscreen .memory-card-back,
    .game-arena-card:fullscreen .memory-card-front,
    .game-arena-card:fullscreen .memory-card-back {
        font-size: min(9vh, 3.4rem) !important;
        border-radius: 24px !important;
    }
}

/* ---- Mascot Popup (mobile / fullscreen answer reaction) ---- */
.mascot-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999999;
    display: flex;
    justify-content: center;
    pointer-events: none;
    padding: 0 16px 24px;
    animation: mascotPopupSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.mascot-popup[hidden] {
    display: none !important;
}

@keyframes mascotPopupSlideUp {
    from { transform: translateY(120px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.mascot-popup.pop-hide {
    animation: mascotPopupSlideDown 0.25s ease-in both;
}

@keyframes mascotPopupSlideDown {
    from { transform: translateY(0);     opacity: 1; }
    to   { transform: translateY(120px); opacity: 0; }
}

.mascot-popup-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 24px;
    padding: 14px 22px 14px 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
    border: 2px solid #ffe3ec;
    max-width: 420px;
    width: 100%;
}

.mascot-popup-inner.pop-correct {
    border-color: #86efac;
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
}

.mascot-popup-inner.pop-wrong {
    border-color: #fca5a5;
    background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
}

.mascot-popup-cat-frame {
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 4px 14px rgba(255, 94, 126, 0.25);
}

.mascot-popup-cat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
}

.mascot-popup-msg {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.4;
    font-family: inherit;
}

.arena-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 18px;
    border-bottom: 2px dashed #f1f5f9;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-back-menu {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-back-menu:hover {
    background: #fff0f3;
    border-color: var(--primary);
}

/* Solitaire Reshuffle button */
.solitaire-reshuffle-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-color: #764ba2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 0.95rem;
    box-shadow: 0 3px 10px rgba(118, 75, 162, 0.35);
    transition: all 0.2s ease;
}
.solitaire-reshuffle-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
    border-color: #5a3d8a;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(118, 75, 162, 0.45);
}
.solitaire-reshuffle-btn.reshuffle-exhausted,
.solitaire-reshuffle-btn:disabled {
    background: #e2e8f0;
    color: #94a3b8;
    border-color: #cbd5e1;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    opacity: 0.65;
}

.arena-cat-title {
    font-size: 1.6rem;
    color: var(--text-dark);
}

.arena-streak {
    background: #fffbe6;
    border: 1.5px solid #ffe8b5;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    color: #946200;
}

/* Arena Grid Layout */
.arena-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

@media (min-width: 720px) {
    .arena-content-grid {
        grid-template-columns: 1fr 240px;
    }
}

.question-card {
    background: linear-gradient(135deg, #fff0f4 0%, #f0f7ff 100%);
    border: 2px solid #ffe3ec;
    border-radius: 24px;
    padding: 25px;
    margin-bottom: 22px;
    text-align: center;
}

.q-number {
    display: inline-block;
    background: var(--purple);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: var(--radius-full);
    margin-bottom: 12px;
}

.question-card h2 {
    font-size: 1.8rem;
    color: var(--text-dark);
    line-height: 1.35;
}

.visual-helper {
    margin-top: 12px;
    font-size: 1.6rem;
    letter-spacing: 2px;
}

.btn-hint-toggle {
    background: #fffbe6;
    color: #946200;
    border: 1.5px solid #ffe8b5;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-family: 'Fredoka', cursive, sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
}

.btn-hint-toggle:hover {
    background: #fff3c4;
    transform: scale(1.04);
    border-color: #ffd166;
}

.hint-text-box[hidden] {
    display: none !important;
}

.hint-text-box {
    margin-top: 10px;
    font-size: 1.4rem;
    color: var(--primary);
    background: #ffffff;
    padding: 8px 18px;
    border-radius: var(--radius-md);
    border: 2px dashed #fbc2eb;
    display: inline-block;
    box-shadow: 0 4px 12px rgba(255, 94, 126, 0.1);
    animation: fadeIn 0.3s ease;
}

.memory-attempts-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: var(--primary);
    padding: 8px 22px;
    border-radius: var(--radius-full);
    font-size: 1.15rem;
    font-weight: 800;
    border: 2px solid var(--primary);
    box-shadow: 0 4px 14px rgba(255, 94, 126, 0.15);
    margin-top: 6px;
}

.bubbles-instructions {
    background: #ffffff;
    color: #334155;
    padding: 10px 18px;
    border-radius: 16px;
    font-size: 0.98rem;
    line-height: 1.45;
    border: 2px dashed #38bdf8;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.12);
    margin-top: 6px;
    display: inline-block;
}

.bomb-bubble {
    background: rgba(254, 226, 226, 0.95) !important;
    border-color: #ef4444 !important;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.3) !important;
}

.whack-instructions {
    background: #ffffff;
    color: #334155;
    padding: 10px 18px;
    border-radius: 16px;
    font-size: 0.98rem;
    line-height: 1.45;
    border: 2px dashed #8b5cf6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12);
    margin-top: 6px;
    display: inline-block;
}

/* Options Grid */
.options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

.options-grid.opts-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.options-grid.opts-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

.options-grid.opts-4 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.option-btn, .quiz-option-btn {
    background: #ffffff;
    border: 3px solid #e2e8f0;
    border-radius: 20px;
    padding: 18px 20px;
    font-family: 'Fredoka', cursive, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.03);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.option-btn:hover, .quiz-option-btn:hover {
    border-color: var(--secondary);
    transform: translateY(-3px) scale(1.02);
    background: #f0f7ff;
}

.option-btn.correct-pop, .quiz-option-btn.correct {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    border-color: #059669 !important;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45) !important;
    animation: correctPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.option-btn.wrong-pop, .quiz-option-btn.wrong {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white !important;
    border-color: #dc2626 !important;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.45) !important;
    animation: wrongShake 0.4s ease-in-out;
}

@keyframes correctPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@keyframes wrongShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

/* ---------------------------------------------------- */
/* MEMORY GAME 3D TILES & CARDS (🧩)                    */
/* ---------------------------------------------------- */
.memory-board {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 15px !important;
    max-width: 520px;
    margin: 0 auto;
}

.memory-card-tile {
    perspective: 1000px !important;
    height: 115px !important;
    width: 100% !important;
    cursor: pointer !important;
}

.memory-card-inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    transform-style: preserve-3d !important;
    border-radius: 22px !important;
    box-shadow: 0 8px 20px rgba(157, 78, 221, 0.15) !important;
}

.memory-card-tile:hover .memory-card-inner {
    transform: translateY(-4px) scale(1.04);
}

.memory-card-tile.flipped .memory-card-inner {
    transform: rotateY(180deg) !important;
}

.memory-card-front, .memory-card-back {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    border-radius: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.memory-card-back {
    background: linear-gradient(135deg, #ff7597 0%, #9d4edd 100%) !important;
    border: 3.5px solid #ffffff !important;
    box-shadow: inset 0 0 15px rgba(255,255,255,0.4) !important;
}

.memory-paw {
    font-size: 2.5rem !important;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)) !important;
    animation: pulse 2s infinite;
}

.memory-card-front {
    background: #ffffff !important;
    border: 3.5px solid #ff7597 !important;
    transform: rotateY(180deg) !important;
    box-shadow: inset 0 0 20px rgba(255, 117, 151, 0.1) !important;
}

.memory-emoji {
    font-size: 3.8rem !important;
    line-height: 1 !important;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15)) !important;
    animation: popMatched 0.4s ease-out;
}

.memory-card-tile.matched .memory-card-front {
    border-color: #06d6a0 !important;
    background: #e6fffa !important;
    box-shadow: 0 0 20px rgba(6, 214, 160, 0.4) !important;
}

@keyframes popMatched {
    0% { transform: scale(0.5); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Mascot Companion Column & Reactions */
.mascot-companion-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.companion-box {
    background: linear-gradient(180deg, #fff4f6 0%, #f0f7ff 100%);
    border: 2px solid #ffe3ec;
    border-radius: 28px;
    padding: 20px;
    width: 100%;
    text-align: center;
    position: relative;
}

.mascot-crown {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.2rem;
    animation: bounce 2s infinite ease-in-out;
}

.companion-cat-frame {
    width: 130px;
    height: 130px;
    margin: 10px auto 15px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #ffffff;
    box-shadow: 0 8px 20px rgba(255, 94, 126, 0.2);
    transition: all 0.3s ease;
}

.companion-cat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    transition: transform 0.3s ease;
}

.companion-cat-img.happy-cat-jump {
    animation: joyfulCatBounce 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
}

@keyframes joyfulCatBounce {
    0% { transform: scale(1) translateY(0); }
    25% { transform: scale(1.25, 0.8) translateY(-20px) rotate(-6deg); }
    50% { transform: scale(0.9, 1.2) translateY(-35px) rotate(6deg); }
    75% { transform: scale(1.1, 0.9) translateY(-10px) rotate(-2deg); }
    100% { transform: scale(1) translateY(0); }
}

.companion-cat-img.sad-cat-wiggle {
    animation: sadCatWiggle 0.6s ease-in-out !important;
}

@keyframes sadCatWiggle {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    20% { transform: translateX(-10px) rotate(-8deg); }
    40% { transform: translateX(10px) rotate(8deg); }
    60% { transform: translateX(-6px) rotate(-4deg); }
    80% { transform: translateX(6px) rotate(4deg); }
}

.companion-cat-frame.cat-halo-correct {
    box-shadow: 0 0 25px rgba(6, 214, 160, 0.85), 0 0 50px rgba(0, 180, 216, 0.5) !important;
    border-color: #06d6a0 !important;
}

.companion-cat-frame.cat-halo-wrong {
    box-shadow: 0 0 25px rgba(255, 71, 87, 0.75) !important;
    border-color: #ff4757 !important;
}

.cat-speech-bubble {
    background: #ffffff;
    border-radius: 18px;
    padding: 14px 16px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-dark);
    box-shadow: 0 6px 15px rgba(0,0,0,0.04);
    border: 2px solid #f1f5f9;
    line-height: 1.4;
    transition: all 0.3s ease;
}

.cat-speech-bubble.bubble-correct {
    background: #e6fffa !important;
    border-color: #06d6a0 !important;
    color: #047857 !important;
    box-shadow: 0 8px 20px rgba(6, 214, 160, 0.25) !important;
}

.cat-speech-bubble.bubble-wrong {
    background: #fff0f3 !important;
    border-color: #ffccd5 !important;
    color: #9f1239 !important;
    box-shadow: 0 8px 20px rgba(255, 94, 126, 0.15) !important;
}

.companion-particle {
    position: fixed !important;
    pointer-events: none !important;
    font-size: 2.2rem !important;
    z-index: 9999999 !important;
    animation: companionParticleFly 1.2s ease-out forwards !important;
}

@keyframes companionParticleFly {
    0% { opacity: 1; transform: translate(0, 0) scale(0.6); }
    100% { opacity: 0; transform: translate(0, -90px) scale(1.5); }
}

/* Trophy Modal Items */
.trophies-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
    text-align: left;
}

.trophy-item {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 20px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.t-icon {
    font-size: 2.4rem;
}

.t-info {
    flex-grow: 1;
}

.t-info h4 {
    font-size: 1.1rem;
    color: var(--text-dark);
}

.t-info p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.t-status {
    font-size: 0.82rem;
    font-weight: 700;
    color: #94a3b8;
    background: #e2e8f0;
    padding: 6px 14px;
    border-radius: var(--radius-full);
}

.t-status.unlocked {
    background: linear-gradient(135deg, #06d6a0, #00b4d8);
    color: white;
}

/* ---------------------------------------------------- */
/* HUGE SCREEN-WIDE OVERLAY ANIMATIONS FOR HOMEPAGE TOYS */
/* ---------------------------------------------------- */

.screen-overlay-item {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9999999 !important;
    pointer-events: none !important;
    font-size: 6.5rem !important;
    line-height: 1 !important;
    filter: drop-shadow(0 12px 25px rgba(0, 0, 0, 0.3)) !important;
}

.overlay-hand-stroke {
    animation: strokeCatAcrossScreen 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

@keyframes strokeCatAcrossScreen {
    0% { opacity: 0; transform: translate(calc(var(--targetX) + 80px), calc(var(--targetY) - 300px)) scale(0.5) rotate(35deg); }
    35% { opacity: 1; transform: translate(calc(var(--targetX) - 40px), calc(var(--targetY) - 100px)) scale(1.3) rotate(-10deg); }
    60% { transform: translate(calc(var(--targetX) - 20px), calc(var(--targetY) - 70px)) scale(1.25) rotate(15deg); }
    80% { transform: translate(calc(var(--targetX) - 40px), calc(var(--targetY) - 90px)) scale(1.3) rotate(-5deg); }
    100% { opacity: 0; transform: translate(calc(var(--targetX) - 60px), calc(var(--targetY) - 180px)) scale(0.8) rotate(45deg); }
}

.overlay-ball-fly {
    animation: ballFlyFromSide 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

@keyframes ballFlyFromSide {
    0% { opacity: 0; transform: translate(-120px, 60vh) scale(0.4) rotate(0deg); }
    35% { opacity: 1; transform: translate(calc(var(--targetX) - 120px), calc(var(--targetY) - 100px)) scale(1.4) rotate(360deg); }
    55% { transform: translate(calc(var(--targetX) - 40px), calc(var(--targetY) - 40px)) scale(1.1) rotate(600deg); }
    75% { transform: translate(calc(var(--targetX) + 60px), calc(var(--targetY) - 80px)) scale(1) rotate(780deg); }
    100% { opacity: 0; transform: translate(calc(100vw + 60px), calc(var(--targetY) + 20px)) scale(0.5) rotate(1080deg); }
}

.overlay-yarn-roll {
    animation: yarnRollFromSide 1.6s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

@keyframes yarnRollFromSide {
    0% { opacity: 0; transform: translate(calc(100vw + 100px), 65vh) scale(0.4) rotate(0deg); }
    40% { opacity: 1; transform: translate(calc(var(--targetX) + 50px), calc(var(--targetY) + 20px)) scale(1.4) rotate(-540deg); }
    70% { transform: translate(calc(var(--targetX) - 40px), calc(var(--targetY) - 40px)) scale(1.15) rotate(-900deg); }
    100% { opacity: 0; transform: translate(-140px, calc(var(--targetY) - 60px)) scale(0.5) rotate(-1200deg); }
}

.overlay-fish-swim {
    animation: fishSwimFromSide 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

@keyframes fishSwimFromSide {
    0% { opacity: 0; transform: translate(-120px, 30vh) scale(0.4) rotate(-25deg); }
    35% { opacity: 1; transform: translate(calc(var(--targetX) * 0.4), calc(var(--targetY) - 100px)) scale(1.4) rotate(15deg); }
    70% { transform: translate(calc(var(--targetX) - 40px), calc(var(--targetY) - 40px)) scale(1.3) rotate(-10deg); }
    85% { transform: translate(calc(var(--targetX) - 30px), calc(var(--targetY) - 30px)) scale(1.6) rotate(5deg); }
    100% { opacity: 0; transform: translate(calc(var(--targetX) - 30px), calc(var(--targetY) - 30px)) scale(0) rotate(45deg); }
}

.screen-pop-banner {
    position: fixed !important;
    top: 35vh !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10000000 !important;
    pointer-events: none !important;
    font-family: 'Fredoka', cursive, sans-serif;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #ff5e7e 0%, #9d4edd 100%) !important;
    padding: 14px 36px !important;
    border-radius: 999px !important;
    box-shadow: 0 15px 40px rgba(255, 94, 126, 0.45) !important;
    border: 4px solid #ffffff !important;
    animation: screenBannerAnim 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    white-space: nowrap !important;
}

@keyframes screenBannerAnim {
    0% { opacity: 0; transform: translate(-50%, -30%) scale(0.2) rotate(-10deg); }
    25% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(3deg); }
    75% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    100% { opacity: 0; transform: translate(-50%, -80%) scale(0.7) rotate(5deg); }
}

.floating-heart {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    pointer-events: none !important;
    font-size: 2.2rem !important;
    z-index: 9999999 !important;
    animation: heartFly 1.2s ease-out forwards !important;
}

@keyframes heartFly {
    0% { opacity: 1; transform: translate(var(--startX), var(--startY)) scale(0.6); }
    100% { opacity: 0; transform: translate(calc(var(--startX) + var(--tx, 0px)), calc(var(--startY) - 120px)) scale(1.6); }
}

/* ---------------------------------------------------- */
/* GALLERY SUBPAGE STYLING (gallery.html)               */
/* ---------------------------------------------------- */

.gallery-nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-upload-cat {
    background: linear-gradient(135deg, #06d6a0 0%, #00b4d8 100%);
    color: white;
    font-family: 'Fredoka', cursive, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(6, 214, 160, 0.3);
    transition: all 0.2s ease;
}

.btn-upload-cat:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(6, 214, 160, 0.4);
}

.admin-link-btn {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all 0.2s ease;
}

.admin-link-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.gallery-main-card {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(15px);
    border-radius: 36px;
    padding: 35px 28px;
    box-shadow: var(--card-shadow);
    border: 3px solid #ffffff;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 25px;
    margin-top: 25px;
}

.cat-gallery-card {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    border: 3px solid #f1f5f9;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}

.cat-gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: #ffd8e4;
}

.cat-card-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    /* Shimmer skeleton while image loads */
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmerLoad 1.4s infinite;
}

@keyframes shimmerLoad {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Stop shimmer once image is loaded */
.cat-card-img-wrapper:has(img[src]) {
    animation: none;
    background: #f8fafc;
}

.cat-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, opacity 0.3s ease;
    /* Start invisible, fade in when loaded */
    opacity: 0;
}

.cat-card-img.loaded,
.cat-card-img[complete] {
    opacity: 1;
}

.cat-gallery-card:hover .cat-card-img {
    transform: scale(1.05);
}

.cat-card-ribbon {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 1.4rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}

.cat-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.cat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.cat-card-header h3 {
    font-size: 1.35rem;
    color: var(--text-dark);
}

.owner-badge {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary);
    background: #fff0f3;
    padding: 4px 10px;
    border-radius: var(--radius-full);
}

.cat-card-bio {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 15px;
    font-style: italic;
    flex-grow: 1;
}

.cat-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed #f1f5f9;
}

.btn-like-cat {
    background: #fff0f5;
    border: 1px solid #ffccd5;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-like-cat:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.btn-like-cat.already-liked {
    background: linear-gradient(135deg, #ff7597 0%, #ff4757 100%) !important;
    color: #ffffff !important;
    border-color: #ff4757 !important;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3) !important;
}

.btn-like-cat.heart-pop {
    animation: heartPopAnim 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes heartPopAnim {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

.cat-date {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.empty-gallery-card {
    text-align: center;
    padding: 50px 20px;
}

.empty-icon {
    font-size: 3.5rem;
    display: block;
    margin-bottom: 12px;
}

/* MODAL OVERLAY & UPLOAD MODAL SOLID OPACITY FIX */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 99999999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.modal-overlay[hidden] {
    display: none !important;
}

.modal-card {
    background: #ffffff !important;
    border-radius: 32px !important;
    padding: 35px 30px !important;
    max-width: 520px;
    width: 100%;
    text-align: center;
    position: relative;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4) !important;
    border: 4px solid #fff0f5 !important;
    opacity: 1 !important;
    z-index: 1000000 !important;
}

.upload-modal-card {
    max-width: 550px;
    text-align: left !important;
    background: #ffffff !important;
}

.upload-modal-card h2 {
    color: #1e293b !important;
    font-size: 1.8rem;
    margin-bottom: 6px;
}

.upload-modal-card p {
    color: #475569 !important;
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.upload-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: #1e293b !important;
}

.input-field {
    padding: 14px 18px !important;
    border-radius: var(--radius-md) !important;
    border: 2px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-family: inherit;
    font-size: 1rem !important;
    outline: none;
    transition: border-color 0.2s ease;
}

.input-field:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(255, 94, 126, 0.15) !important;
}

.input-file {
    padding: 12px !important;
    border: 2px dashed #cbd5e1 !important;
    border-radius: var(--radius-md) !important;
    cursor: pointer;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 0.95rem !important;
}

.file-hint {
    font-size: 0.85rem !important;
    color: #475569 !important;
    font-weight: 600 !important;
}

.image-preview-box {
    width: 100%;
    max-height: 200px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid #e2e8f0;
}

.image-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn-submit-upload {
    background: linear-gradient(135deg, #06d6a0 0%, #00b4d8 100%) !important;
    color: #ffffff !important;
    border: none;
    padding: 16px 24px !important;
    border-radius: var(--radius-full) !important;
    font-family: 'Fredoka', cursive, sans-serif;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(6, 214, 160, 0.35) !important;
    transition: all 0.2s ease;
    margin-top: 10px;
}

.btn-submit-upload:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(6, 214, 160, 0.45) !important;
}

/* Success Modal */
.success-modal-card {
    text-align: center !important;
}

.success-icon {
    font-size: 4rem;
    margin-bottom: 10px;
}

.success-msg-text {
    font-size: 1.1rem;
    color: #1e293b !important;
    line-height: 1.5;
    margin-bottom: 25px;
}

/* ---------------------------------------------------- */
/* ADMIN PANEL STYLING (admin.html)                    */
/* ---------------------------------------------------- */

.admin-badge-label {
    background: #fff0f5;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 94, 126, 0.3);
}

.admin-login-card {
    max-width: 480px;
    margin: 40px auto;
}

.admin-login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

.login-error-msg {
    color: #c53030;
    background: #fff5f5;
    border: 1px solid #feb2b2;
    padding: 10px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
}

.admin-dashboard-card {
    padding: 35px 28px;
}

.admin-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 25px;
    border-bottom: 2px dashed #f1f5f9;
    padding-bottom: 15px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.admin-tab-btn {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    padding: 10px 20px;
    border-radius: var(--radius-full);
    font-family: 'Fredoka', cursive, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.admin-tab-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

@media (max-width: 768px) {
    .admin-dashboard-card {
        padding: 20px 14px;
    }

    .admin-tabs {
        gap: 8px;
        margin-bottom: 20px;
        padding-bottom: 12px;
    }

    .admin-tab-btn {
        flex: 1 1 calc(50% - 8px);
        min-width: 120px;
        padding: 10px 8px;
        font-size: 0.86rem;
        border-radius: 20px;
        white-space: normal;
        line-height: 1.3;
    }
}

.section-title {
    font-size: 1.25rem;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.admin-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.admin-cat-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}

.admin-cat-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: #f8fafc;
}

.admin-cat-info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
}

.admin-cat-info h4 {
    font-size: 1.2rem;
    color: var(--text-dark);
}

.admin-card-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.btn-approve {
    flex-grow: 1;
    background: #06d6a0;
    color: white;
    border: none;
    padding: 8px;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
}

.btn-reject {
    flex-grow: 1;
    background: #ff4757;
    color: white;
    border: none;
    padding: 8px;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
}

.close-modal-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: #f1f5f9;
    border: 2px solid #cbd5e1;
    color: #334155;
    font-size: 1.2rem;
    font-weight: bold;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.close-modal-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: scale(1.1);
}

/* ---------------------------------------------------- */
/* TABLET & NARROW DESKTOP NAVBAR BREAKPOINT (UNDER 1180px) */
/* Forces 2-column Grid (2 Row 1, 2 Row 2, 1 Centered Row 3) with identical sizes */
@media (max-width: 1180px) {
    .header-row-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-auto-rows: 50px !important;
        gap: 10px 12px !important;
        padding: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        max-width: 760px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .nav-gallery-btn,
    .nav-games-btn,
    .nav-draw-btn,
    .nav-stories-btn,
    .nav-likes-btn {
        font-size: 0.98rem !important;
        padding: 0 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        line-height: 1 !important;
        border-radius: 20px !important;
        letter-spacing: -0.1px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* 5th Button (Row 3, centered, identical width to 1 column) */
    .header-row-2 > a:nth-child(5),
    .header-row-2 > :nth-child(5):last-child {
        grid-column: 1 / -1 !important;
        justify-self: center !important;
        width: calc((100% - 12px) / 2) !important;
    }
}

/* MOBILE RESPONSIVE REDESIGN (SMARTPHONES & TABLETS)  */
/* ---------------------------------------------------- */

@media (max-width: 768px) {
    .page-wrapper {
        padding: 12px !important;
    }

    /* Header Mobile Rules */
    .header {
        position: relative !important;
        gap: 8px !important;
        margin-bottom: 15px !important;
        padding-top: 62px !important;
    }

    .header-row-1 {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 100000 !important;
        border-radius: 0 !important;
    }

    .header-row-1-inner {
        padding: 8px 16px !important;
        justify-content: center !important;
    }

    .logo-avatar-img {
        height: 44px !important;
    }

    .logo-text {
        font-size: 1.5rem !important;
    }

    .designer-badge {
        display: none !important;
    }
}

/* SMARTPHONES / MOBILE PHONES (UNDER 600px) */
@media (max-width: 600px) {
    .header-row-2 {
        gap: 8px 6px !important;
        max-width: 100% !important;
        grid-auto-rows: 50px !important;
    }

    .nav-gallery-btn,
    .nav-games-btn,
    .nav-draw-btn,
    .nav-stories-btn,
    .nav-likes-btn {
        font-size: 0.80rem !important;
        padding: 0 4px !important;
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        white-space: normal !important;
        line-height: 1.15 !important;
        border-radius: 18px !important;
        letter-spacing: -0.2px !important;
    }

    /* 5th Button on Mobile (Row 3, centered, identical width to 1 column) */
    .header-row-2 > a:nth-child(5),
    .header-row-2 > :nth-child(5):last-child {
        grid-column: 1 / -1 !important;
        justify-self: center !important;
        width: calc((100% - 6px) / 2) !important;
    }

    /* Drawing Studio Canvas Mobile Height Fix */
    .canvas-wrapper {
        height: 600px !important;
        min-height: 600px !important;
        aspect-ratio: auto !important;
    }

    /* Hero & Card Padding */
    .card-hero, .category-menu-card, .game-arena-card, .gallery-main-card {
        padding: 24px 16px !important;
        border-radius: 26px !important;
    }

    .main-title {
        font-size: 1.7rem !important;
        line-height: 1.3 !important;
        margin-bottom: 25px !important;
    }

    .mascot-container {
        padding: 20px 14px !important;
        border-radius: 24px !important;
        gap: 18px !important;
    }

    .mascot-frame-wrapper {
        width: 160px !important;
        height: 160px !important;
    }

    .name-tag {
        justify-content: center !important;
    }

    .name-tag h2 {
        font-size: 1.45rem !important;
    }

    .gender-notice {
        padding: 12px 14px !important;
        font-size: 0.88rem !important;
    }

    .petting-box {
        justify-content: center !important;
    }

    .btn-pet {
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 1.05rem !important;
    }

    .interactive-toys {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .toy-btn {
        width: 100% !important;
        padding: 12px 18px !important;
        font-size: 1rem !important;
    }

    /* Games & Gallery Mobile Grids */
    .categories-grid, .gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .category-card {
        padding: 20px 16px !important;
    }

    .score-trophy-bar {
        width: 100% !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    .score-pill, .trophy-btn {
        font-size: 0.88rem !important;
        padding: 6px 14px !important;
    }

    .arena-header {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
        gap: 10px !important;
    }

    .arena-cat-title {
        font-size: 1.35rem !important;
    }

    .arena-content-grid {
        grid-template-columns: 1fr !important;
    }

    .question-card {
        padding: 18px 14px !important;
    }

    .question-card h2 {
        font-size: 1.35rem !important;
    }

    .option-btn, .quiz-option-btn {
        padding: 14px 16px !important;
        font-size: 1.1rem !important;
    }

    .memory-board {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
    }

    .memory-card-tile {
        height: 80px !important;
    }

    .memory-paw {
        font-size: 1.8rem !important;
    }

    .memory-emoji {
        font-size: 2.5rem !important;
    }

    .modal-card {
        padding: 25px 18px !important;
        border-radius: 24px !important;
    }

    .screen-pop-banner {
        font-size: 1.4rem !important;
        padding: 10px 20px !important;
        white-space: normal !important;
        text-align: center !important;
        max-width: 90vw !important;
    }
}

/* ---------------------------------------------------- */
/* CAT PHOTO ALBUM MODAL & MULTI-PHOTO GALLERY CAROUSEL */
/* ---------------------------------------------------- */

.btn-view-album {
    background: linear-gradient(135deg, #4ea8de 0%, #3a86ff 100%) !important;
    color: #ffffff !important;
    font-family: 'Fredoka', cursive, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    border-radius: var(--radius-full) !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(78, 168, 222, 0.3) !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    margin-top: 10px;
    width: 100%;
}

.btn-view-album:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 18px rgba(78, 168, 222, 0.45) !important;
}

.album-modal-card {
    max-width: 620px !important;
    padding: 30px 24px !important;
    background: #ffffff !important;
}

.album-modal-header {
    text-align: center;
    margin-bottom: 20px;
}

.album-modal-header h2 {
    font-size: 1.7rem !important;
    color: #1e293b !important;
    margin-bottom: 6px;
}

.album-featured-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 360px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    margin-bottom: 18px !important;
}

.album-featured-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transition: opacity 0.3s ease;
}

.album-nav-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.85) !important;
    color: #1e293b !important;
    border: none !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    font-size: 1.4rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
    transition: all 0.2s ease !important;
}

.album-nav-arrow:hover {
    background: #ffffff !important;
    transform: translateY(-50%) scale(1.12) !important;
    color: var(--primary) !important;
}

.arrow-left { left: 14px !important; }
.arrow-right { right: 14px !important; }

.album-counter {
    position: absolute !important;
    bottom: 14px !important;
    right: 18px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    color: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    padding: 4px 14px !important;
    border-radius: var(--radius-full) !important;
    backdrop-filter: blur(6px) !important;
}

.album-thumbnails-strip {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding: 6px 2px 10px !important;
    scrollbar-width: thin;
}

.album-thumb {
    width: 72px !important;
    height: 72px !important;
    flex-shrink: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    border: 3px solid transparent !important;
    opacity: 0.65 !important;
    transition: all 0.2s ease !important;
    background: #f1f5f9;
}

.album-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.album-thumb:hover {
    opacity: 1 !important;
    transform: scale(1.05) !important;
}

.album-thumb.active-thumb {
    border-color: var(--primary) !important;
    opacity: 1 !important;
    box-shadow: 0 0 12px rgba(255, 94, 126, 0.5) !important;
}

.preview-count-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--purple);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--radius-full);
}

.admin-photo-delete-bar {
    margin-top: 10px;
    margin-bottom: 15px;
    text-align: center;
}

.btn-delete-single-photo {
    background: linear-gradient(135deg, #ff4757 0%, #d63031 100%) !important;
    color: white !important;
    font-family: 'Fredoka', cursive, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    border-radius: var(--radius-full) !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(255, 71, 87, 0.35) !important;
    transition: all 0.2s ease !important;
}

.btn-delete-single-photo:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 8px 20px rgba(255, 71, 87, 0.5) !important;
}

/* ---------------------------------------------------- */
/* ARCADE GAMES: TIC-TAC-TOE, CAT SNAKE, CAT TETRIS    */
/* ---------------------------------------------------- */

.tictactoe-card { background: linear-gradient(135deg, #ff758c 0%, #ff7eb3 100%) !important; }
.snake-card { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important; color: #1e293b !important; }
.snake-card h3, .snake-card p { color: #0f172a !important; }
.tetris-card { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important; color: #1e293b !important; }
.tetris-card h3, .tetris-card p { color: #0f172a !important; }

.arcade-game-container[hidden] {
    display: none !important;
}

.arcade-game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 0;
}

.arcade-status-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 420px;
    margin-bottom: 16px;
    gap: 10px;
}

.arcade-status-badge {
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
    font-family: 'Fredoka', cursive, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-arcade-reset {
    background: linear-gradient(135deg, #ff5e7e 0%, #ff8099 100%) !important;
    color: white !important;
    font-family: 'Fredoka', cursive, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    border-radius: var(--radius-full) !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(255, 94, 126, 0.3) !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.btn-arcade-reset:hover {
    transform: scale(1.05) !important;
}

.btn-arcade-pause {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
    color: white !important;
    font-family: 'Fredoka', cursive, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    border-radius: var(--radius-full) !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.btn-arcade-pause:hover {
    transform: scale(1.05) !important;
}

.btn-arcade-pause.is-paused {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45) !important;
}

.bubbles-box.is-paused .floating-bubble {
    animation-play-state: paused !important;
    pointer-events: none !important;
}

/* FIRST MOVE SELECTOR FOR TIC-TAC-TOE */
.first-move-btn {
    background: #ffffff;
    border: 2px solid #cbd5e1;
    color: var(--text-dark);
    padding: 6px 14px;
    border-radius: 20px;
    font-family: 'Fredoka', cursive, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.first-move-btn:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.first-move-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(255, 94, 126, 0.25);
}

/* 1. TIC-TAC-TOE GRID */
.tictactoe-grid {
    display: grid;
    grid-template-columns: repeat(3, 90px);
    grid-template-rows: repeat(3, 90px);
    gap: 12px;
    margin: 10px auto;
}

.ttt-cell {
    width: 90px;
    height: 90px;
    background: #ffffff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
    border: 3px solid #f1f5f9;
}

.ttt-cell:hover {
    transform: scale(1.06);
    border-color: var(--primary);
    box-shadow: 0 12px 25px rgba(255, 94, 126, 0.25);
}

.ttt-cell.winning-cell {
    background: #e0f2fe !important;
    border-color: #38bdf8 !important;
    animation: tttGlow 0.8s infinite alternate ease-in-out;
}

@keyframes tttGlow {
    from { transform: scale(1); box-shadow: 0 0 10px #38bdf8; }
    to { transform: scale(1.08); box-shadow: 0 0 24px #0284c7; }
}

/* 2. CANVAS & D-PAD FOR SNAKE & TETRIS */
.canvas-wrapper {
    background: #0f172a;
    border-radius: 24px;
    padding: 10px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 4px solid #1e293b;
}

#snakeCanvas, #tetrisCanvas {
    background: #1e293b;
    border-radius: 16px;
    display: block;
}

/* D-Pad & Controls for Mobile */
.dpad-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
}

.dpad-row {
    display: flex;
    gap: 8px;
}

.dpad-btn {
    width: 54px;
    height: 54px;
    background: #ffffff;
    color: #1e293b;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
    transition: all 0.15s ease;
    touch-action: manipulation;
}

.dpad-btn:active {
    transform: scale(0.92);
    background: var(--primary);
    color: white;
}

.tetris-controls-bar {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    justify-content: center;
}

.tetris-ctrl-btn {
    width: 60px;
    height: 54px;
    background: #ffffff;
    color: #1e293b;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
    transition: all 0.15s ease;
    touch-action: manipulation;
}

.tetris-ctrl-btn:active {
    transform: scale(0.92);
    background: #3b82f6;
    color: white;
}

/* ---------------------------------------------------- */
/* NEW MINI GAMES: WHACK-A-FISH, BUBBLES, CHESS, SOLITAIRE */
/* ---------------------------------------------------- */

.whack-card { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%) !important; color: #0f172a !important; }
.whack-card h3, .whack-card p { color: #0f172a !important; }

.bubble-card { background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%) !important; color: #0f172a !important; }
.bubble-card h3, .bubble-card p { color: #0f172a !important; }

.chess-card { background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%) !important; color: #0f172a !important; }
.chess-card h3, .chess-card p { color: #0f172a !important; }

.solitaire-card { background: linear-gradient(135deg, #fdcbf1 0%, #e6dee9 100%) !important; color: #0f172a !important; }
.solitaire-card h3, .solitaire-card p { color: #0f172a !important; }

/* GAME START OVERLAYS */
.game-start-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 16px;
    box-sizing: border-box;
    animation: fadeInOverlay 0.25s ease-out;
}

@keyframes fadeInOverlay {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.game-start-overlay[hidden],
.game-start-overlay.is-hidden {
    display: none !important;
}

.start-overlay-content {
    background: rgba(255, 255, 255, 0.96);
    padding: 22px 26px;
    border-radius: 26px;
    text-align: center;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    border: 3px solid #ffccd5;
    max-width: 320px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.start-overlay-icon {
    font-size: 3rem;
    line-height: 1;
    display: inline-block;
    animation: bounceOverlayIcon 2s ease-in-out infinite;
}

@keyframes bounceOverlayIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.start-overlay-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
}

.start-overlay-desc {
    font-size: 0.92rem;
    color: #475569;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.btn-overlay-start {
    background: linear-gradient(135deg, #ff5e7e 0%, #ff9a76 100%) !important;
    color: white !important;
    font-size: 1.12rem !important;
    font-weight: 800 !important;
    padding: 11px 28px !important;
    border-radius: 30px !important;
    border: 2.5px solid #ffffff !important;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(255, 94, 126, 0.45);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-overlay-start:hover {
    transform: scale(1.06) translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 94, 126, 0.6);
}

.btn-overlay-start:active {
    transform: scale(0.96);
}

/* 11. WHACK A FISH GRID */
.whack-grid {
    display: grid;
    grid-template-columns: repeat(3, 90px);
    grid-template-rows: repeat(3, 90px);
    gap: 14px;
    margin: 10px auto;
}

.whack-hole {
    width: 90px;
    height: 90px;
    background: #334155;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 8px 16px rgba(0,0,0,0.5), 0 6px 12px rgba(0,0,0,0.1);
    border: 4px solid #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whack-item {
    font-size: 2.8rem;
    position: absolute;
    bottom: -60px;
    transition: bottom 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    user-select: none;
}

.whack-hole.up .whack-item {
    bottom: 12px;
}

/* Feedback highlights: green = caught fish, red = wrong click */
.whack-hole.hit-correct {
    border-color: #22c55e !important;
    box-shadow: inset 0 8px 16px rgba(0,0,0,0.4), 0 0 0 5px #22c55e, 0 0 18px 8px rgba(34,197,94,0.55) !important;
    background: #15803d !important;
    transition: border-color 0.08s, box-shadow 0.08s, background 0.08s;
}

.whack-hole.hit-wrong {
    border-color: #ef4444 !important;
    box-shadow: inset 0 8px 16px rgba(0,0,0,0.4), 0 0 0 5px #ef4444, 0 0 18px 8px rgba(239,68,68,0.55) !important;
    background: #991b1b !important;
    transition: border-color 0.08s, box-shadow 0.08s, background 0.08s;
}


/* 12. BUBBLES BOX */
.bubbles-box {
    position: relative;
    width: min(600px, 90vw);
    height: min(520px, 70vh);
    background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%);
    border-radius: 24px;
    overflow: hidden;
    border: 4px solid #38bdf8;
    box-shadow: 0 10px 25px rgba(56, 189, 248, 0.2);
}

.floating-bubble {
    position: absolute;
    bottom: -60px;
    width: 54px;
    height: 54px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), inset 0 0 8px rgba(255, 255, 255, 0.9);
    border: 2px solid #ffffff;
    user-select: none;
    animation: floatUp 3.5s linear infinite;
    transition: transform 0.1s ease;
}

.floating-bubble:active {
    transform: scale(1.3);
}

@keyframes floatUp {
    0% { bottom: -60px; opacity: 1; }
    90% { opacity: 1; }
    100% { bottom: 340px; opacity: 0; }
}

/* 13. MINI CHESS GRID (4x4 & 5x5) */
.chess-board-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 4px solid #1e293b;
    margin: 10px auto;
}

.chess-board-grid.grid-5x5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
    max-width: 340px !important;
    aspect-ratio: 1 / 1 !important;
}

.chess-square {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.chess-board-grid.grid-5x5 .chess-square {
    font-size: 1.6rem;
}

.chess-square.light { background: #f8fafc; }
.chess-square.dark { background: #cbd5e1; }

.chess-square.selected-sq {
    background: #fef08a !important;
    box-shadow: inset 0 0 10px #eab308;
}

.chess-square.valid-move {
    background: #bbf7d0 !important;
}

.chess-piece-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    border-radius: 16px;
    font-size: 1.8rem;
    line-height: 1;
    transition: all 0.2s ease;
    user-select: none;
}

.chess-piece-wrapper.cat-piece {
    background: rgba(255, 94, 126, 0.15);
    border: 2.5px solid #ff5e7e;
    box-shadow: 0 4px 12px rgba(255, 94, 126, 0.3);
}

.chess-piece-wrapper.fish-piece {
    background: rgba(56, 189, 248, 0.15);
    border: 2.5px solid #38bdf8;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}

/* 14. CAT SOLITAIRE */
.solitaire-board-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    max-width: 360px;
    margin: 10px auto;
}

.solitaire-foundations-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
}

.solitaire-foundation-basket {
    flex: 1;
    height: 110px;
    background: #ffffff;
    border-radius: 20px;
    border: 3px dashed #cbd5e1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
    transition: all 0.2s ease;
    position: relative;
    padding: 6px;
}

.solitaire-foundation-basket small {
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 4px;
}

.solitaire-columns-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    min-height: 180px;
}

.solitaire-column-stack {
    flex: 1;
    background: rgba(241, 245, 249, 0.7);
    border-radius: 20px;
    border: 2px solid #e2e8f0;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 180px;
    cursor: pointer;
}

.solitaire-card-item {
    width: 66px;
    height: 84px;
    background: #ffffff;
    border-radius: 16px;
    border: 3px solid #e2e8f0;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.solitaire-card-item .card-suit {
    font-size: 1.6rem;
    line-height: 1;
}

.solitaire-card-item .card-val {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
}

.solitaire-card-item.selected-card {
    border-color: var(--primary) !important;
    transform: scale(1.12) translateY(-6px) !important;
    box-shadow: 0 10px 24px rgba(255, 94, 126, 0.45) !important;
    background: #fff0f3 !important;
    z-index: 10 !important;
}

.solitaire-instructions {
    background: #ffffff;
    color: #334155;
    padding: 10px 18px;
    border-radius: 16px;
    font-size: 0.98rem;
    line-height: 1.45;
    border: 2px dashed #ff7597;
    box-shadow: 0 4px 12px rgba(255, 117, 151, 0.12);
    margin-top: 6px;
    display: inline-block;
}

.basket-placeholder {
    font-size: 1.4rem;
    opacity: 0.45;
    font-weight: bold;
    color: #64748b;
}

.empty-col-text {
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: bold;
    margin-top: auto;
    margin-bottom: auto;
}

.solitaire-card-item.stacked-card {
    margin-top: -50px;
    opacity: 0.88;
}

.solitaire-card-item.top-card {
    margin-top: -50px;
    border-color: #ff7597;
    box-shadow: 0 8px 18px rgba(255, 117, 151, 0.2);
    z-index: 5;
}

.solitaire-column-stack .solitaire-card-item:first-child {
    margin-top: 0 !important;
}

.solitaire-card-item.card-in-basket {
    margin-top: 0 !important;
    border-color: #06d6a0;
    background: #f0fdf4;
}

/* ---------------------------------------------------- */
/* DIFFICULTY BAR, PHOTO GROUPING & 5x5 CHESS GRID     */
/* ---------------------------------------------------- */

.difficulty-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: var(--radius-full);
    border: 1.5px solid #cbd5e1;
}

.diff-btn {
    background: transparent;
    border: none;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.diff-btn.active {
    background: #ffffff;
    color: var(--primary);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* Quiz Stats & Arena Header Counter */
.arena-stats-box {
    display: flex;
    align-items: center;
    gap: 12px;
}

.arena-stat-item {
    background: rgba(255, 255, 255, 0.85);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: inline-flex;
    align-items: center;
}

.quiz-score-stats {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
}

/* Quiz End Result Modal & Tiers */
.quiz-result-card {
    text-align: center;
    padding: 30px 25px !important;
    max-width: 480px !important;
    border-radius: 32px !important;
    transition: all 0.3s ease;
}

.quiz-result-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
}

.quiz-result-emoji {
    font-size: 4.5rem;
    line-height: 1;
    margin-bottom: 10px;
    animation: correctPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.quiz-result-hero h2 {
    font-size: 1.9rem;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.quiz-result-score-badge {
    background: var(--bg-pink);
    color: var(--primary);
    padding: 6px 18px;
    border-radius: var(--radius-full);
    font-size: 1.1rem;
    font-weight: 800;
    border: 2px solid var(--primary);
    display: inline-block;
}

.quiz-result-message {
    font-size: 1.15rem;
    color: #475569;
    line-height: 1.55;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: #ffffff;
    border-radius: 22px;
    border: 1.5px dashed #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.quiz-result-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Modal Themes by Tier */
.quiz-result-card.result-sad {
    border-top: 8px solid #ff4757;
    background: linear-gradient(180deg, #fff5f5 0%, #ffffff 100%);
}
.quiz-result-card.result-sad .quiz-result-score-badge {
    background: #ffe3e3;
    color: #d63031;
    border-color: #ff4757;
}

.quiz-result-card.result-ok {
    border-top: 8px solid #ffa502;
    background: linear-gradient(180deg, #fffdf0 0%, #ffffff 100%);
}
.quiz-result-card.result-ok .quiz-result-score-badge {
    background: #fffae6;
    color: #d97706;
    border-color: #f59e0b;
}

.quiz-result-card.result-good {
    border-top: 8px solid #06d6a0;
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}
.quiz-result-card.result-good .quiz-result-score-badge {
    background: #dcfce7;
    color: #15803d;
    border-color: #16a34a;
}

.quiz-result-card.result-great {
    border-top: 8px solid #8b5cf6;
    background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 100%);
}
.quiz-result-card.result-great .quiz-result-score-badge {
    background: #ede9fe;
    color: #6d28d9;
    border-color: #7c3aed;
}

.quiz-result-card.result-almost-perfect {
    border-top: 8px solid #eab308;
    background: linear-gradient(180deg, #fefce8 0%, #ffffff 100%);
}
.quiz-result-card.result-almost-perfect .quiz-result-score-badge {
    background: #fef08a;
    color: #854d0e;
    border-color: #ca8a04;
}

.quiz-result-card.result-perfect {
    border-top: 8px solid #ff5e7e;
    background: linear-gradient(180deg, #fff0f4 0%, #ffffff 100%);
    box-shadow: 0 0 35px rgba(255, 94, 126, 0.35) !important;
}
.quiz-result-card.result-perfect .quiz-result-score-badge {
    background: linear-gradient(135deg, #ff5e7e 0%, #9d4edd 100%);
    color: white;
    border-color: #ff5e7e;
}

.btn-group-cat {
    background: #8b5cf6;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 6px;
    transition: all 0.2s ease;
}

.btn-group-cat:hover {
    background: #7c3aed;
    transform: translateY(-2px);
}

.btn-edit-cat {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 6px;
    transition: all 0.2s ease;
}

.btn-edit-cat:hover {
    background: #2563eb;
    transform: translateY(-2px);
}

/* ---------------------------------------------------- */
/* DESKTOP GAME WINDOW ENLARGEMENT (50% LARGER DIMENSIONS) */
/* ---------------------------------------------------- */

@media (min-width: 900px) {
    .page-wrapper {
        max-width: 1200px !important;
    }

    .game-arena-card {
        padding: 40px !important;
        border-radius: 44px !important;
    }

    .arena-cat-title {
        font-size: 2.1rem !important;
    }

    .arena-content-grid {
        grid-template-columns: 1fr 290px !important;
        gap: 35px !important;
    }

    .question-card {
        padding: 35px !important;
        border-radius: 30px !important;
    }

    .question-card h2 {
        font-size: 2.3rem !important;
    }

    .quiz-option-btn {
        padding: 18px 26px !important;
        font-size: 1.35rem !important;
        border-radius: 22px !important;
    }

    /* 1. Tic-Tac-Toe 50% Enlarged - Locked Dimensions to Prevent Layout Shift */
    .tictactoe-grid, #tttGrid {
        grid-template-columns: repeat(3, 135px) !important;
        grid-template-rows: repeat(3, 135px) !important;
        gap: 16px !important;
        margin: 15px auto !important;
        width: 437px !important;
        height: 437px !important;
        box-sizing: border-box !important;
    }

    .ttt-cell {
        width: 135px !important;
        height: 135px !important;
        font-size: 4.5rem !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 26px !important;
    }

    /* 2. Whack-a-Fish 50% Enlarged - Locked Dimensions */
    .whack-grid {
        grid-template-columns: repeat(3, 135px) !important;
        grid-template-rows: repeat(3, 135px) !important;
        gap: 20px !important;
        margin: 15px auto !important;
        width: 445px !important;
        height: 445px !important;
        box-sizing: border-box !important;
    }

    .whack-hole {
        width: 135px !important;
        height: 135px !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    .whack-item {
        font-size: 4.2rem !important;
        bottom: -80px !important;
        line-height: 1 !important;
    }

    .whack-hole.up .whack-item {
        bottom: 18px !important;
    }

    /* 3. Bubbles Box - desktop is handled by default min() sizing */
    .bubbles-box {
        width: min(650px, 90vw) !important;
        height: min(560px, 72vh) !important;
        border-radius: 32px !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }

    .floating-bubble {
        width: 78px !important;
        height: 78px !important;
        font-size: 2.6rem !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
    }

    /* 4. Mini Cat Chess Responsive Grid */
    .chess-board-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 400px !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        box-sizing: border-box !important;
    }

    .chess-square {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        font-size: 2.6rem !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .chess-piece-wrapper {
        font-size: 1.8rem !important;
        padding: 4px 6px !important;
        border-radius: 18px !important;
    }

    .chess-board-grid.grid-5x5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(5, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 400px !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        box-sizing: border-box !important;
    }

    .chess-board-grid.grid-5x5 .chess-square {
        font-size: 2.2rem !important;
    }

    .chess-board-grid.grid-5x5 .chess-piece-wrapper {
        font-size: 1.4rem !important;
        padding: 2px 4px !important;
    }

    /* 5. Cat Solitaire 50% Enlarged */
    .solitaire-board-wrapper {
        max-width: 540px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .solitaire-foundation-basket {
        height: 160px !important;
        border-radius: 26px !important;
        box-sizing: border-box !important;
    }

    .solitaire-foundation-basket small {
        font-size: 1.05rem !important;
    }

    .solitaire-column-stack {
        min-height: 270px !important;
        border-radius: 26px !important;
        box-sizing: border-box !important;
    }

    .solitaire-card-item {
        width: 96px !important;
        height: 124px !important;
        border-radius: 22px !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
    }

    .solitaire-card-item .card-suit {
        font-size: 2.4rem !important;
        line-height: 1 !important;
    }

    .solitaire-card-item .card-val {
        box-sizing: border-box !important;
    }

    .memory-card-tile {
        width: 115px !important;
        height: 145px !important;
        border-radius: 22px !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    .memory-emoji, .memory-paw {
        font-size: 3.4rem !important;
        line-height: 1 !important;
    }
}
/* Subscribers Table & Admin Styles */
.subscribers-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.subscribers-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.copy-notification {
    background: #ecfdf5;
    color: #047857;
    border: 2px solid #10b981;
    padding: 10px 16px;
    border-radius: 14px;
    font-weight: 700;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.subscribers-table-wrapper {
    width: 100%;
    overflow-x: auto;
    background: #ffffff;
    border-radius: 20px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.subscribers-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.subscribers-table th {
    background: #f8fafc;
    color: #475569;
    padding: 14px 18px;
    font-size: 0.95rem;
    font-weight: 800;
    border-bottom: 2px solid #e2e8f0;
}

.subscribers-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    font-size: 0.95rem;
}

.subscribers-table tr:hover {
    background: #f8fafc;
}

/* Discreet Fixed Bottom-Left Admin Link */
.discreet-admin-link {
    position: fixed;
    bottom: 12px;
    left: 14px;
    z-index: 9999;
    font-size: 0.78rem;
    font-weight: 700;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid #cbd5e1;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.22s ease-in-out;
    opacity: 0.65;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.discreet-admin-link:hover {
    opacity: 1;
    color: #ff5e7e;
    border-color: #ff5e7e;
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 94, 126, 0.2);
}



/* DRAWING STUDIO CANVAS & TOOLBOX STYLES */
.drawing-main-card {
    background: #ffffff;
    border-radius: 28px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    border: 3px solid #ffccd5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.stencils-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    padding: 12px;
    background: #fff5f7;
    border-radius: 20px;
    border: 2px dashed #ffb3c1;
}

.stencil-btn {
    background: white;
    border: 2px solid #ffb3c1;
    color: #4a4a4a;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 8px 16px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.stencil-btn:hover, .stencil-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 94, 126, 0.3);
}

.drawing-main-card .canvas-wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    aspect-ratio: 4 / 3;
    background: #ffffff;
    border-radius: 24px;
    border: 4px solid #334155;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    overflow: hidden;
    touch-action: none;
    margin: 0 auto;
    padding: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
}

.drawing-main-card #drawingCanvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    cursor: crosshair;
    object-fit: fill !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.toolbox-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 900px;
    background: #f8fafc;
    border-radius: 24px;
    padding: 20px;
    border: 2px solid #e2e8f0;
    margin: 0 auto;
}

.color-palette {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.color-swatch {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.color-swatch:hover {
    transform: scale(1.18);
}

.color-swatch.active {
    transform: scale(1.25);
    box-shadow: 0 0 0 4px #0f172a, 0 4px 12px rgba(0,0,0,0.25);
}

.rainbow-swatch {
    background: linear-gradient(135deg, #ff5e7e, #ffb703, #06d6a0, #00b4d8, #9d4edd);
}

.tools-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tool-btn {
    background: #ffffff;
    border: 2px solid #cbd5e1;
    color: #334155;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 10px 18px;
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.tool-btn:hover {
    background: #f1f5f9;
    transform: translateY(-2px);
}

.tool-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(255, 94, 126, 0.3);
}

.brush-sizes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

.size-btn {
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.size-btn:hover {
    border-color: var(--primary);
    transform: scale(1.1);
}

.size-btn.active {
    border-color: var(--primary);
    background: #fff0f3;
    box-shadow: 0 0 0 3px rgba(255, 94, 126, 0.3);
}

.size-dot {
    background: #334155;
    border-radius: 50%;
}

.size-btn.active .size-dot {
    background: var(--primary);
}

.save-draw-action-bar {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
}

.btn-save-drawing {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    font-size: 1.25rem;
    font-weight: 800;
    padding: 14px 36px;
    border-radius: var(--radius-full);
    border: none;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-save-drawing:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.45);
}

/* DRAWING STUDIO FULLSCREEN STYLES */
body.draw-fullscreen-active {
    overflow: hidden !important;
}

.drawing-main-card.is-fullscreen,
.drawing-main-card:fullscreen,
.drawing-main-card:-webkit-full-screen,
.drawing-main-card:-moz-full-screen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    width: 100dvw !important;
    height: 100dvh !important;
    z-index: 999999 !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding: 8px 12px 24px 12px !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #fff5f8 0%, #eef2ff 100%) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

/* In fullscreen: hide EVERYTHING above canvas */
.drawing-main-card.is-fullscreen .menu-title-box,
.drawing-main-card:fullscreen .menu-title-box,
.drawing-main-card.is-fullscreen .stencils-bar,
.drawing-main-card:fullscreen .stencils-bar {
    display: none !important;
}

/* Maximize Canvas Area in Fullscreen without any margins or letterboxing */
.drawing-main-card.is-fullscreen .canvas-wrapper,
.drawing-main-card:fullscreen .canvas-wrapper {
    width: min(calc((100vh - 190px) * 4 / 3), calc((100dvh - 190px) * 4 / 3), calc(100vw - 20px), 1400px) !important;
    height: min(calc(100vh - 190px), calc(100dvh - 190px), calc((100vw - 20px) * 3 / 4)) !important;
    aspect-ratio: 4 / 3 !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 190px) !important;
    max-height: calc(100dvh - 190px) !important;
    border-radius: 18px !important;
    border: 4px solid #334155 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    margin: 0 auto !important;
    display: block !important;
    padding: 0 !important;
    background: #ffffff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.drawing-main-card.is-fullscreen #drawingCanvas,
.drawing-main-card:fullscreen #drawingCanvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: fill !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Compact Toolbox & Save Action Bar at the bottom */
.drawing-main-card.is-fullscreen .toolbox-container,
.drawing-main-card:fullscreen .toolbox-container {
    max-width: min(98vw, 1400px) !important;
    width: 100% !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    border-radius: 18px !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
}

.drawing-main-card.is-fullscreen .color-palette,
.drawing-main-card:fullscreen .color-palette {
    gap: 7px !important;
}

.drawing-main-card.is-fullscreen .color-swatch,
.drawing-main-card:fullscreen .color-swatch {
    width: 30px !important;
    height: 30px !important;
}

.drawing-main-card.is-fullscreen .tools-bar,
.drawing-main-card:fullscreen .tools-bar {
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.drawing-main-card.is-fullscreen .tool-btn,
.drawing-main-card:fullscreen .tool-btn,
.drawing-main-card.is-fullscreen .btn-fullscreen,
.drawing-main-card:fullscreen .btn-fullscreen {
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
    border-radius: 12px !important;
}

.drawing-main-card.is-fullscreen .save-draw-action-bar,
.drawing-main-card:fullscreen .save-draw-action-bar {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    flex-shrink: 0 !important;
}

.drawing-main-card.is-fullscreen .btn-save-drawing,
.drawing-main-card:fullscreen .btn-save-drawing {
    padding: 9px 24px !important;
    font-size: 1rem !important;
}

/* Mobile specific fullscreen adjustments (≤ 768px) */
@media (max-width: 768px) {
    .drawing-main-card.is-fullscreen,
    .drawing-main-card:fullscreen {
        padding: 6px 8px 28px 8px !important;
        gap: 6px !important;
    }

    .drawing-main-card.is-fullscreen .canvas-wrapper,
    .drawing-main-card:fullscreen .canvas-wrapper {
        width: min(calc((100dvh - 250px) * 4 / 3), calc(100vw - 16px), 500px) !important;
        height: min(calc(100dvh - 250px), calc((100vw - 16px) * 3 / 4)) !important;
        max-height: calc(100dvh - 250px) !important;
        border-radius: 16px !important;
        border-width: 3px !important;
    }

    .drawing-main-card.is-fullscreen .toolbox-container,
    .drawing-main-card:fullscreen .toolbox-container {
        padding: 6px 8px !important;
        gap: 6px !important;
        border-radius: 16px !important;
    }

    .drawing-main-card.is-fullscreen .color-palette,
    .drawing-main-card:fullscreen .color-palette {
        gap: 5px !important;
    }

    .drawing-main-card.is-fullscreen .color-swatch,
    .drawing-main-card:fullscreen .color-swatch {
        width: 26px !important;
        height: 26px !important;
    }

    .drawing-main-card.is-fullscreen .tools-bar,
    .drawing-main-card:fullscreen .tools-bar {
        gap: 4px !important;
    }

    .drawing-main-card.is-fullscreen .tool-btn,
    .drawing-main-card:fullscreen .tool-btn,
    .drawing-main-card.is-fullscreen .btn-fullscreen,
    .drawing-main-card:fullscreen .btn-fullscreen {
        padding: 5px 9px !important;
        font-size: 0.78rem !important;
        border-radius: 10px !important;
    }

    .drawing-main-card.is-fullscreen .brush-sizes,
    .drawing-main-card:fullscreen .brush-sizes {
        gap: 4px !important;
    }

    .drawing-main-card.is-fullscreen .size-btn,
    .drawing-main-card:fullscreen .size-btn {
        transform: scale(0.82) !important;
    }

    .drawing-main-card.is-fullscreen .btn-save-drawing,
    .drawing-main-card:fullscreen .btn-save-drawing {
        padding: 8px 18px !important;
        font-size: 0.92rem !important;
    }
}

/* PUBLIC DRAWINGS GALLERY STYLES */
.drawings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
    width: 100%;
    margin-top: 20px;
}

.drawing-card {
    background: #ffffff;
    border-radius: 24px;
    border: 3px solid #f1f5f9;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.drawing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(255, 94, 126, 0.15);
    border-color: #ffccd5;
}

.drawing-img-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid #f1f5f9;
}

.drawing-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #ffffff;
}

.drawing-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.drawing-author {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-dark);
}

.drawing-date {
    font-size: 0.8rem;
    color: #94a3b8;
}

.drawing-like-btn {
    align-self: flex-start;
    background: #fff0f3;
    border: 2px solid #ffccd5;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    margin-top: 4px;
}

.drawing-like-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: scale(1.05);
}

/* Responsive CTA button for Drawings Gallery */
.btn-draw-cta-responsive {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap !important;
    max-width: 100% !important;
    font-family: 'Fredoka', cursive, sans-serif;
    font-size: clamp(0.85rem, 3.8vw, 1.1rem) !important;
    font-weight: 700;
    padding: 12px 22px !important;
    background: linear-gradient(135deg, #ffb703 0%, #fb8500 100%) !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    border: none;
    box-shadow: 0 6px 18px rgba(251, 133, 0, 0.35);
    text-decoration: none;
    transition: all 0.2s ease;
    box-sizing: border-box !important;
    word-break: keep-all !important;
    overflow: hidden;
}

.btn-draw-cta-responsive:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(251, 133, 0, 0.45);
}

@media (max-width: 480px) {
    .btn-draw-cta-responsive {
        padding: 9px 14px !important;
        font-size: clamp(0.8rem, 3.6vw, 0.95rem) !important;
        gap: 4px;
    }
}



/* ==================================================== */
/* 4th FEATURE CARD: CAT LIKES CALLOUT ON HOMEPAGE      */
/* ==================================================== */
.likes-callout-card {
    background: linear-gradient(135deg, #f3e8ff 0%, #fce7f3 100%);
    border: 3px solid #e9d5ff;
    border-radius: 28px;
    padding: 30px 25px;
    margin-bottom: 35px;
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.15);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.callout-badge-likes {
    display: inline-block;
    background: #a855f7;
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: var(--radius-full);
    margin-bottom: 12px;
}

.likes-callout-card h2 {
    font-size: 1.8rem;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.likes-callout-card p {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.btn-likes-cta {
    display: inline-block;
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    color: white;
    font-family: 'Fredoka', cursive, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: var(--radius-full);
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(168, 85, 247, 0.35);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-likes-cta:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 14px 30px rgba(236, 72, 153, 0.45);
}

/* ==================================================== */
/* CAT LIKES PAGE STYLES (cat-likes.html)              */
/* ==================================================== */
.cat-likes-page-body {
    background: #faf5ff;
}

.cat-likes-hero-card {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(15px);
    border-radius: 36px;
    padding: 35px 30px;
    box-shadow: var(--card-shadow);
    border: 3px solid #ffffff;
    text-align: center;
    margin-bottom: 35px;
}

.ariadni-intro-box {
    background: linear-gradient(135deg, #fffbe6 0%, #fff0f5 100%);
    border: 2px dashed #fbc2eb;
    border-radius: 24px;
    padding: 22px 26px;
    text-align: left;
    margin-top: 20px;
    box-shadow: 0 6px 18px rgba(251, 194, 235, 0.25);
}

.ariadni-intro-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: #9d4edd;
}

.ariadni-intro-header h3 {
    font-size: 1.35rem;
    font-family: 'Fredoka', cursive, sans-serif;
}

.ariadni-intro-body {
    font-size: 1.05rem;
    color: #4a5568;
    line-height: 1.65;
}

/* Grid of Categories */
.cat-likes-grid {
    display: flex;
    flex-direction: column;
    gap: 35px;
    margin-bottom: 40px;
}

.likes-category-card {
    background: #ffffff;
    border-radius: 32px;
    padding: 30px;
    box-shadow: 0 12px 35px rgba(157, 78, 221, 0.08);
    border: 3px solid #f3e8ff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.likes-category-card:hover {
    box-shadow: 0 16px 45px rgba(157, 78, 221, 0.14);
}

.likes-card-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 30px;
    align-items: center;
}

@media (max-width: 850px) {
    .likes-card-grid {
        grid-template-columns: 1fr;
    }
}

/* Left Notebook Note Box */
.ariadni-note-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.note-badge {
    display: inline-block;
    align-self: flex-start;
    color: white;
    font-family: 'Fredoka', cursive, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: var(--radius-full);
    letter-spacing: 0.5px;
}

.badge-food { background: linear-gradient(135deg, #ff7597, #ff477e); }
.badge-play { background: linear-gradient(135deg, #06d6a0, #118ab2); }
.badge-sleep { background: linear-gradient(135deg, #7209b7, #3a0ca3); }
.badge-petting { background: linear-gradient(135deg, #f72585, #b5179e); }

.note-title {
    font-size: 1.7rem;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.note-paper {
    background: #fffdf5;
    border: 2px solid #ffe8b5;
    border-radius: 20px;
    padding: 22px 24px;
    position: relative;
    box-shadow: 0 6px 18px rgba(255, 232, 181, 0.4);
}

.note-paper-tape {
    position: absolute;
    top: -12px;
    left: 24px;
    font-size: 1.2rem;
}

.note-quote {
    font-size: 1.08rem;
    line-height: 1.7;
    color: #2d3748;
}

.note-signature {
    margin-top: 14px;
    font-family: 'Fredoka', cursive, sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary);
    text-align: right;
}

/* Right Interactive Cat Showcase Column */
.cat-action-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #fcf4ff 0%, #f5f3ff 100%);
    border: 2px solid #e9d5ff;
    border-radius: 24px;
    padding: 22px 18px;
    text-align: center;
}

.speech-bubble {
    background: #ffffff;
    border: 2px solid #d8b4fe;
    border-radius: 18px;
    padding: 10px 18px;
    font-size: 1rem;
    font-weight: 700;
    color: #6b21a8;
    box-shadow: 0 4px 12px rgba(107, 33, 168, 0.08);
    transition: all 0.3s ease;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.speech-highlight {
    animation: pulseBubble 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: #fdf4ff;
    border-color: #c084fc;
    color: #7e22ce;
}

@keyframes pulseBubble {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.likes-cat-frame {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #ffffff;
    box-shadow: 0 10px 25px rgba(157, 78, 221, 0.25);
    position: relative;
    background: #ffffff;
}

.likes-cat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Action Trigger Buttons */
.btn-action-trigger {
    width: 100%;
    font-family: 'Fredoka', cursive, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: white;
    padding: 14px 22px;
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0,0,0,0.15);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-food-action { background: linear-gradient(135deg, #ff7597 0%, #ff477e 100%); box-shadow: 0 8px 22px rgba(255, 117, 151, 0.35); }
.btn-food-action:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 28px rgba(255, 117, 151, 0.45); }

.btn-play-action { background: linear-gradient(135deg, #06d6a0 0%, #118ab2 100%); box-shadow: 0 8px 22px rgba(6, 214, 160, 0.35); }
.btn-play-action:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 28px rgba(6, 214, 160, 0.45); }

.btn-sleep-action { background: linear-gradient(135deg, #7209b7 0%, #3a0ca3 100%); box-shadow: 0 8px 22px rgba(114, 9, 183, 0.35); }
.btn-sleep-action:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 28px rgba(114, 9, 183, 0.45); }

.btn-petting-action { background: linear-gradient(135deg, #f72585 0%, #b5179e 100%); box-shadow: 0 8px 22px rgba(247, 37, 133, 0.35); }
.btn-petting-action:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 28px rgba(247, 37, 133, 0.45); }

.btn-action-trigger:active {
    transform: translateY(1px) scale(0.97);
}

.back-home-bottom-box {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 40px;
}

.btn-back-home-lg {
    display: inline-block;
    background: #ffffff;
    border: 3px solid #e2e8f0;
    color: var(--text-dark);
    font-family: 'Fredoka', cursive, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    padding: 14px 32px;
    border-radius: var(--radius-full);
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    transition: all 0.25s ease;
}

.btn-back-home-lg:hover {
    background: #fff0f3;
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 94, 126, 0.2);
}

/* Slower Flying Item Animation for Cat Likes Page */
.cat-likes-item-fly {
    position: fixed !important;
    z-index: 9999999 !important;
    font-size: 3.5rem !important;
    pointer-events: none !important;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25)) !important;
    animation: slowFlyToCat 2.0s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

@keyframes slowFlyToCat {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.4) rotate(0deg);
    }
    20% {
        opacity: 1;
        transform: translate(calc((var(--targetX) - var(--startX)) * 0.2), calc((var(--targetY) - var(--startY)) * 0.2 - 50px)) scale(1.3) rotate(45deg);
    }
    55% {
        opacity: 1;
        transform: translate(calc((var(--targetX) - var(--startX)) * 0.6), calc((var(--targetY) - var(--startY)) * 0.6 - 70px)) scale(1.5) rotate(180deg);
    }
    85% {
        opacity: 1;
        transform: translate(calc(var(--targetX) - var(--startX)), calc(var(--targetY) - var(--startY))) scale(1.2) rotate(320deg);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--targetX) - var(--startX)), calc(var(--targetY) - var(--startY))) scale(0.2) rotate(360deg);
    }
/* SHOW ALL ("ΕΜΦΑΝΙΣΗ ΟΛΩΝ") BUTTON STYLES - PROMINENT & CENTERED */
.show-more-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 45px auto 30px auto !important;
    width: 100% !important;
    grid-column: 1 / -1 !important;
    clear: both !important;
}

.btn-show-all {
    background: linear-gradient(135deg, #ff5e7e 0%, #a855f7 50%, #00b4d8 100%);
    background-size: 200% auto;
    color: #ffffff !important;
    font-family: 'Fredoka', cursive, sans-serif;
    font-weight: 700;
    font-size: 1.3rem !important;
    padding: 18px 45px !important;
    border-radius: 50px !important;
    border: 3px solid #ffffff !important;
    cursor: pointer;
    box-shadow: 0 10px 32px rgba(168, 85, 247, 0.45);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px;
    letter-spacing: 0.3px;
    animation: pulseShowBtn 3s infinite ease-in-out;
}

.btn-show-all:hover {
    transform: translateY(-4px) scale(1.06) !important;
    box-shadow: 0 15px 40px rgba(236, 72, 153, 0.6) !important;
    background-position: right center;
}

@keyframes pulseShowBtn {
    0%, 100% {
        box-shadow: 0 10px 30px rgba(168, 85, 247, 0.45);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 15px 40px rgba(255, 94, 126, 0.65);
        transform: scale(1.04);
    }
}