@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
    --bg-color: #0d0d1a;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --primary: #8b5cf6;
    --primary-hover: #7c3aed;
    --text-main: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.6);
    --radius-md: 16px;
    --radius-lg: 24px;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: 'Pretendard', sans-serif; 
}

/* 텍스트 드래그 방지 */
html, body, div, span, p, h1, h2, h3, h4, h5, h6, a, button, label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 입력창은 예외 */
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    overflow-x: hidden;
    min-height: 100vh;
}

/* 하단 카카오 광고에 콘텐츠가 가려지지 않도록 메인 여백 추가 */
main {
    padding-bottom: 80px !important;   /* 70~120px 정도가 보통 적당 */
}

/* Background Orbs (Apple Glass Style) */
.orb {
    position: fixed; 
    border-radius: 50%; 
    filter: blur(100px); 
    z-index: -1; 
    opacity: 0.5; 
    animation: drift 20s infinite alternate ease-in-out;
}
.orb-1 { width: 30vw; height: 30vw; background: #6366f1; top: -10%; left: -10%; }
.orb-2 { width: 40vw; height: 40vw; background: #ec4899; bottom: -10%; right: -10%; animation-delay: -5s;}
.orb-3 { width: 25vw; height: 25vw; background: #10b981; top: 40%; left: 40%; transform: translateX(-50%); animation-delay: -10s;}

@keyframes drift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(30px, 50px); }
}

/* =========================================
   Header & Main Logo Animation (bkit.ai 스타일)
   h-16 sm:h-20 flex items-center justify-center px-4
========================================= */
.header { 
    position: relative;
    height: 4rem; /* h-16 (64px) */
    display: flex; 
    align-items: center; 
    justify-content: center;   /* 내부 inner를 중앙 정렬 */
    padding: 0 1rem;
    z-index: 10;
}
@media (min-width: 640px) {
    .header { height: 5rem; }
}

/* 헤더 내부 래퍼 — 컨텐츠 max-width와 동일하게 제한 */
.header-inner {
    width: 100%;
    max-width: 600px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* 상단 로고 완벽한 중앙 정렬 */
.header-inner .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 언어 스위치 — header-inner 우측 끝 */
.lang-switch { 
    margin-left: auto; 
    display: flex; gap: 4px; background: rgba(0,0,0,0.3); padding: 4px; border-radius: 20px; border: 1px solid var(--glass-border); 
}

/* 빛이 흘러가는 그라데이션 텍스트 (bkit.ai 애니메이션) */
.logo, .hero h1 { 
    font-weight: 800; 
    background: linear-gradient(
        to right, 
        #a855f7 0%, 
        #ec4899 25%, 
        #8b5cf6 50%, 
        #3b82f6 75%, 
        #a855f7 100%
    );
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: text-shine 3s linear infinite;
}

.logo { font-size: 1.5rem; }
.hero h1 { font-size: 2.5rem; margin-bottom: 1rem; }

@keyframes text-shine {
    to { background-position: 200% center; }
}

/* Lang buttons */
.lang-btn { background: transparent; border: none; color: var(--text-muted); padding: 4px 12px; border-radius: 16px; cursor: pointer; transition: 0.3s; font-weight: bold;}
.lang-btn.active { background: var(--glass-bg); color: var(--text-main); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

/* Base UI & Typography */
.main-container { padding: 20px; max-width: 600px; margin: 0 auto; position: relative; z-index: 1;}
.hidden { display: none !important; }
.text-center { text-align: center; }
.mb-lg { margin-bottom: 2rem; }

/* Sections */
.game-section { display: none; flex-direction: column; }
.game-section.active { display: flex; animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }
.hero { text-align: center; margin: 2rem 0; }
.hero p { color: var(--text-muted); line-height: 1.6; }

/* Glass Card */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Menu */
.menu-grid { display: flex; flex-direction: column; gap: 16px; margin-top: 1rem; }
.menu-card { display: flex; align-items: center; cursor: pointer; transition: transform 0.2s, background 0.3s; }
.menu-card:hover { background: rgba(255,255,255,0.1); }
.menu-card:active { transform: scale(0.98); }
.menu-icon { font-size: 2rem; margin-right: 16px; }
.menu-content { flex: 1; }
.menu-content h3 { font-size: 1.1rem; margin-bottom: 4px;}
.menu-content p { font-size: 0.85rem; color: var(--text-muted); }
.menu-arrow { opacity: 0.5; font-size: 1.2rem; }

/* Forms & Buttons */
.form-group { margin-bottom: 1.5rem; }
.form-label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; color: var(--text-muted); }
.form-input, .form-textarea {
    width: 100%; padding: 16px; border-radius: var(--radius-md); border: 1px solid var(--glass-border);
    background: rgba(0,0,0,0.3); color: white; outline: none; transition: border 0.3s, box-shadow 0.3s;
    font-size: 1rem;
}
.form-textarea { resize: vertical; min-height: 100px; }
.form-input:focus, .form-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3); }
.char-count { text-align: right; font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }

.btn {
    padding: 16px; border-radius: var(--radius-md); border: none; font-weight: bold; font-size: 1rem; cursor: pointer;
    width: 100%; transition: background 0.3s, transform 0.1s; display: inline-flex; justify-content: center; align-items: center;
}
.btn-primary { background: var(--primary); color: white; box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--glass-bg); color: white; border: 1px solid var(--glass-border); }
.btn-secondary:hover { background: rgba(255,255,255,0.1); }
.btn:active { transform: scale(0.96); }

/* =========================================
   Modals (팝업 UI/UX 개선사항 반영)
========================================= */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px); display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 1000;
    padding-bottom: 60px; /* 하단 카카오 애드핏 광고 높이 고려한 여백 */
}
.modal-overlay.active { opacity: 1; pointer-events: all; }

.modal-content {
    background: rgba(20, 20, 35, 0.95); width: 90%; max-width: 400px; border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border); 
    display: flex; flex-direction: column; /* 헤더/바디/푸터 분리를 위한 Flex 구조 */
    max-height: calc(100vh - 120px); /* 화면 전체 높이에서 여백을 제외하여 최대 높이 제한 */
    transform: translateY(20px); transition: transform 0.3s;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.modal-overlay.active .modal-content { transform: translateY(0); }

.modal-header { 
    flex-shrink: 0; /* 제목 영역 높이 고정 */
    padding: 20px; display: flex; justify-content: space-between; align-items: center; 
    border-bottom: 1px solid var(--glass-border); 
}
.modal-header h2 { font-size: 1.25rem; }
.modal-close { background: transparent; border: none; color: white; font-size: 1.5rem; cursor: pointer; opacity: 0.6; }

.modal-body { 
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px; 
}
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }

@media (max-width: 480px) {
    .modal-overlay {
        align-items: flex-start;
        padding-top: 56px;
        padding-bottom: 70px;
    }
    .modal-content {
        width: 95%;
        max-height: calc(100vh - 130px);
    }
    .modal-body {
        min-height: 280px;
    }

    /* Fix 1: 문제 박스(EN 패턴 카드) 모바일 최소 높이 확보 */
    .pattern-display {
        min-height: 100px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* Fix 3: 자판 좌우 잘림 방지 — min-width 제거, gap·폰트 축소 */
    .keyboard {
        overflow: hidden;
        width: 100%;
    }
    .keyboard-row {
        gap: 4px;
        flex-wrap: nowrap;
    }
    .key {
        min-width: 0;
        height: 44px;
        font-size: 0.8rem;
    }
    .key.wide {
        font-size: 0.7rem;
    }
}

.modal-footer { 
    flex-shrink: 0; /* 버튼 영역 높이 고정 */
    padding: 20px; border-top: 1px solid var(--glass-border); display: flex; gap: 10px; 
}

/* Share Grid */
.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.share-btn {
    padding: 12px; border-radius: 12px; border: none; color: white; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.9rem; transition: transform 0.2s;
}
.share-btn:active { transform: scale(0.95); }
.share-kakao { background: #FEE500; color: #000; }
.share-facebook { background: #1877F2; }
.share-x { background: #000000; border: 1px solid #333; }
.share-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.share-threads { background: #000000; border: 1px solid #333; }
.share-copy { background: #374151; }

/* Play Section */
.pattern-display { text-align: center; margin: 1rem 0 2rem; overflow: hidden; }
.pattern-text { font-size: 2.5rem; font-weight: 900; letter-spacing: 5px; margin-bottom: 10px; word-break: break-all; }
.pattern-hint { color: var(--text-muted); font-size: 0.9rem; }

/* Attempts Dots */
.attempts-box { display: flex; justify-content: center; gap: 12px; margin-bottom: 10px; }
.attempt-dot { width: 12px; height: 12px; border-radius: 50%; transition: 0.3s; }
.attempt-dot.remaining { background: #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); }
.attempt-dot.used { background: #374151; }

/* Answer Section */
.answer-section { margin-top: auto; flex-shrink: 0; }
.answer-input-group { display: flex; gap: 10px; margin-bottom: 20px; }
.answer-input-group .form-input { flex: 1; font-size: 1.2rem; text-align: center; overflow-x: auto; }
.answer-input-group .btn { width: auto; padding: 0 24px; }

/* EN Play Scroll Section: pattern-display ~ wordle-grid 묶음 */
.play-scroll-section {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
    padding-bottom: 0.5rem;
}
.play-scroll-section::-webkit-scrollbar { width: 4px; }
.play-scroll-section::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* play-scroll-section 있는 경우에만 section-play 고정 높이 적용 */
#section-play:has(.play-scroll-section).active {
    max-height: calc(100vh - 144px);
    overflow: hidden;
}

/* Wordle Grid */
.wordle-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 1.5rem;
    width: 100%;
    overflow-x: hidden;
}

/* 행 전체 래퍼 (번호 + 셀 행) */
.wordle-row-wrap {
    display: flex;
    align-items: flex-start; /* 여러 줄 시도 행: 위 정렬 */
    gap: 4px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible; /* 여러 줄 허용 */
}

/* 왼쪽 시도 번호 */
.wordle-row-label {
    width: 22px;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 900;
    flex-shrink: 0;
}
.wordle-row-wrap:nth-child(1) .wordle-row-label { background: rgba(139,92,246,0.35); color: #c4b5fd; border: 1px solid rgba(139,92,246,0.5); }
.wordle-row-wrap:nth-child(2) .wordle-row-label { background: rgba(245,158,11,0.25); color: #fcd34d; border: 1px solid rgba(245,158,11,0.4); }
.wordle-row-wrap:nth-child(3) .wordle-row-label { background: rgba(239,68,68,0.2);   color: #fca5a5; border: 1px solid rgba(239,68,68,0.35); }
.wordle-row-wrap:nth-child(4) .wordle-row-label { background: rgba(16,185,129,0.2);  color: #6ee7b7; border: 1px solid rgba(16,185,129,0.35); }
.wordle-row-wrap:nth-child(5) .wordle-row-label { background: rgba(59,130,246,0.2);  color: #93c5fd; border: 1px solid rgba(59,130,246,0.35); }
.wordle-row-wrap:nth-child(6) .wordle-row-label { background: rgba(236,72,153,0.2);  color: #f9a8d4; border: 1px solid rgba(236,72,153,0.35); }

.wordle-row {
    display: flex;
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
    overflow: visible; /* 여러 줄(단어별 줄바꿈) 허용 */
    flex: 1;
}

/* 행별 좌측 강조 보더 */
.wordle-row-1 { border-left: 3px solid rgba(139,92,246,0.5); padding-left: 3px; border-radius: 2px; }
.wordle-row-2 { border-left: 3px solid rgba(245,158,11,0.5); padding-left: 3px; border-radius: 2px; }
.wordle-row-3 { border-left: 3px solid rgba(239,68,68,0.4);  padding-left: 3px; border-radius: 2px; }

.wordle-cell {
    border: 2px solid var(--glass-border);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-transform: uppercase;
    background: rgba(0,0,0,0.2);
    flex-shrink: 0;
}
.wordle-cell.correct { background: #10b981; border-color: #10b981; animation: flip-in-diag-1-tr 0.5s both; }
.wordle-cell.present { background: #f59e0b; border-color: #f59e0b; animation: flip-in-diag-1-tr 0.5s both; }
.wordle-cell.absent  { background: #374151; border-color: #374151; animation: flip-in-diag-1-tr 0.5s both; }
.wordle-cell.wordle-space { background: transparent; border-color: transparent; flex-shrink: 0; }

/* Virtual Keyboard */
.keyboard { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; width: 100%; overflow: hidden; }
.keyboard-row { display: flex; justify-content: center; gap: 6px; width: 100%; }
.key {
    background: rgba(255,255,255,0.1); border: 1px solid var(--glass-border); color: white; border-radius: 8px;
    height: 48px; min-width: 0; font-weight: bold; cursor: pointer; transition: 0.1s; flex: 1; display: flex; align-items: center; justify-content: center;
}
.key:active { background: rgba(255,255,255,0.3); transform: scale(0.95); }
.key.wide { flex: 1.5; font-size: 0.8rem; }

/* Leaderboard */
.leaderboard { background: var(--glass-bg); border-radius: var(--radius-lg); padding: 20px; border: 1px solid var(--glass-border); }
.leaderboard-title { margin-bottom: 1rem; color: #fcd34d; font-size: 1.1rem; }
.leaderboard-list { display: flex; flex-direction: column; gap: 10px; }
.leaderboard-item { display: flex; align-items: center; background: rgba(0,0,0,0.2); padding: 12px; border-radius: 12px; gap: 12px; }
.rank { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; }
.rank-1 { background: linear-gradient(45deg, #fbbf24, #f59e0b); color: #000; }
.rank-2 { background: linear-gradient(45deg, #9ca3af, #6b7280); }
.rank-3 { background: linear-gradient(45deg, #b45309, #78350f); }
.rank-other { background: #374151; }
.leaderboard-name { flex: 1; font-weight: bold; }
.leaderboard-time { font-size: 0.8rem; color: var(--text-muted); }

/* Result Elements */
.result-message { text-align: center; padding: 2rem 0; }
.result-icon { font-size: 4rem; margin-bottom: 1rem; }
.result-title { font-size: 2rem; margin-bottom: 1rem; }
.result-title.success { color: #10b981; }
.result-title.fail { color: #ef4444; }
.secret-message { background: rgba(139, 92, 246, 0.2); border: 1px solid rgba(139, 92, 246, 0.5); padding: 20px; border-radius: var(--radius-lg); margin-bottom: 2rem; font-size: 1.2rem; line-height: 1.5; color: #e879f9; white-space: pre-line; word-break: break-word; }

/* Promo & Ads */
.promo-banner {
    margin-top: 2rem;
    padding: 1.5rem 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.promo-banner h4 {
    margin-bottom: 1.2rem;
    color: var(--text-main);
    font-size: 1.1rem;
}

.promo-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.promo-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 4px 0;
    scrollbar-width: none;
}

.promo-grid::-webkit-scrollbar {
    display: none;
}

.promo-nav {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    color: white;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.promo-nav:hover {
    background: rgba(255,255,255,0.15);
    transform: scale(1.08);
}

.promo-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* 개별 프로모션 카드 */
.promo-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90px;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-main);
    transition: all 0.2s ease;
}

.promo-card:active, .promo-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.promo-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.promo-text {
    font-size: 0.75rem;
    text-align: center;
    line-height: 1.3;
    word-break: keep-all;
    opacity: 0.9;
}
.promo-link { display: inline-block; color: white; text-decoration: none; font-weight: bold; background: var(--primary); padding: 8px 16px; border-radius: 20px; transition: 0.3s; }
.promo-link:hover { background: var(--primary-hover); }

/* Ad Container */
.ad-container { position: fixed; bottom: 0; left: 0; width: 100%; display: flex; justify-content: center; background: rgba(0,0,0,0.8); z-index: 500; }

/* =========================================
   EN Pattern Box Display
========================================= */
.pattern-boxes-en {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
    width: 100%;
    row-gap: 4px;
}

.pattern-box {
    /* 크기는 JS에서 inline style로 지정 */
    border: 2.5px solid rgba(139, 92, 246, 0.7);
    background: rgba(139, 92, 246, 0.12);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
    flex-shrink: 0;
    /* 글자 중앙 정렬 (correct 표시 시) */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pattern-box-space {
    flex-shrink: 0;
}

/* Correct letter revealed in pattern display */
.pattern-box-correct {
    background: #10b981;
    border-color: #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
    color: white;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   Scratch Card
========================================= */
.scratch-wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 0.5rem;
    min-height: 60px;
}

.scratch-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='12' fill='%23ffd700' stroke='%23c0a000' stroke-width='2'/%3E%3C/svg%3E") 16 16, crosshair;
    touch-action: none;
    border-radius: 16px;
    z-index: 10;
}

.scratch-hint {
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.4rem;
    animation: pulse-hint 1.5s ease-in-out infinite;
}

@keyframes pulse-hint {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1; }
}

/* Logo click */
.header-inner .logo { cursor: pointer; }

/* =========================================
   Existing styles below
========================================= */
@keyframes slide-in-up {
    0%   { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}
.slide-in-up { animation: slide-in-up 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

/* =========================================
   Results Page Layout
========================================= */
#section-result.active,
#section-results.active {
    max-height: calc(100vh - 144px);
    overflow: hidden;
}
.results-scroll-body {
    flex: 1; min-height: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.results-scroll-body::-webkit-scrollbar { width: 4px; }
.results-scroll-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.results-fixed-footer {
    flex-shrink: 0;
    padding: 0.75rem 0 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(13, 13, 26, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.results-footer-row { display: flex; flex-direction: column; gap: 8px; }
.leaderboard-empty { text-align: center; color: rgba(255,255,255,0.38); font-size: 0.875rem; padding: 1.25rem 0; }
.secret-message-placeholder {
    background: rgba(139, 92, 246, 0.07);
    border: 1px dashed rgba(139, 92, 246, 0.35);
    border-radius: var(--radius-lg);
    padding: 20px; text-align: center;
    color: rgba(255,255,255,0.38);
    font-size: 0.875rem; line-height: 1.6; margin-top: 0.5rem;
}

/* =========================================
   Creator Share Section
========================================= */
.creator-share-section {
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 1.5rem;
}
.creator-share-link {
    display: flex; gap: 8px; align-items: center; margin-top: 0.75rem;
}

/* =========================================
   Game History List
========================================= */
.game-history-list {
    max-height: 220px; overflow-y: auto; margin-top: 0.25rem;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.game-history-list::-webkit-scrollbar { width: 4px; }
.game-history-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
.history-section-label {
    font-size: 0.75rem; font-weight: 700; color: rgba(255,255,255,0.4);
    letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 6px; padding-left: 2px;
}
.history-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; border-radius: 10px; cursor: pointer;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 6px; transition: background 0.18s, border-color 0.18s; gap: 8px;
}
.history-item:hover { background: rgba(139,92,246,0.15); border-color: rgba(139,92,246,0.3); }
.history-item.selected { background: rgba(139,92,246,0.22); border-color: rgba(139,92,246,0.5); }
.history-id { font-size: 0.82rem; font-family: monospace; color: rgba(255,255,255,0.88); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.history-date { font-size: 0.72rem; color: rgba(255,255,255,0.38); white-space: nowrap; flex-shrink: 0; }
.history-empty { text-align: center; color: rgba(255,255,255,0.35); font-size: 0.85rem; padding: 1.2rem 0 0.5rem; }

/* Toast */
.toast {
    position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
    background: white; color: black; padding: 12px 24px; border-radius: 30px;
    font-weight: bold; z-index: 2000; display: none; box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.toast.show { display: block; }

/* Confetti */
.confetti { position: fixed; top: -10px; width: 10px; height: 10px; z-index: 9999; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(100vh) rotate(720deg); } }

/* ANIMISTA KEYFRAMES */
.fade-in { animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }
.slide-in-bottom { animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }
.fade-out { animation: fade-out 0.5s ease-out both; }
.shake-horizontal { animation: shake-horizontal 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; }
.flip-in-diag-1-tr { animation: flip-in-diag-1-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }
.btn-jelly { animation: jello-horizontal 0.9s both; }
.heartbeat { animation: heartbeat 1.5s ease-in-out infinite both; }

@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fade-out { 0% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 20px); } }
@keyframes slide-in-bottom { 0% { transform: translate(-50%, 50px); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } }
@keyframes shake-horizontal {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}
@keyframes flip-in-diag-1-tr {
  0% { transform: rotate3d(1, 1, 0, -80deg); opacity: 0; }
  100% { transform: rotate3d(1, 1, 0, 0deg); opacity: 1; }
}
@keyframes jello-horizontal {
  0% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  100% { transform: scale3d(1, 1, 1); }
}
@keyframes heartbeat {
  from { transform: scale(1); transform-origin: center center; animation-timing-function: ease-out; }
  10% { transform: scale(0.91); animation-timing-function: ease-in; }
  17% { transform: scale(0.98); animation-timing-function: ease-out; }
  33% { transform: scale(0.87); animation-timing-function: ease-in; }
  45% { transform: scale(1); animation-timing-function: ease-out; }
}