:root {
    --primary: #3b82f6;
    --primary-glow: rgba(59, 130, 246, 0.5);
    --secondary: #ec4899;
    --bg-dark: #020617;
    --glass-bg: rgba(15, 23, 42, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --font-heading: 'Outfit', sans-serif;
    --font-base: 'Inter', sans-serif;

    /* Country Colors */
    --color-kr: #3b82f6; /* Korea - Blue */
    --color-us: #ef4444; /* USA - Red */
    --color-jp: #f8fafc; /* Japan - White */
    --color-cn: #facc15; /* China - Yellow */
    --color-vn: #f97316; /* Vietnam - Orange */
    --color-eu: #8b5cf6; /* Europe - Purple */
    /* Victory Variables - Dynamically updated via JS */
    --victory-accent: var(--primary);
    --victory-glow: var(--primary-glow);
}

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

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-base);
    overflow-x: hidden;
    min-height: 100vh;
    transition: background-color 0.5s ease;
}

/* Background Globals */
.bg-glow { position: fixed; width: 50vw; height: 50vw; border-radius: 50%; filter: blur(120px); z-index: -1; opacity: 0.15; transition: background 1s ease; }
.blob-1 { top: -15%; left: -10%; background: var(--victory-accent); animation: pulse 15s infinite alternate; }
.blob-2 { bottom: -15%; right: -10%; background: var(--secondary); animation: pulse 18s infinite alternate-reverse; }

@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.3); } }

.app-container { max-width: 1400px; margin: 0 auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }

/* Components */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 1.5rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}

/* Header */
header { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem 2.5rem; position: relative; overflow: hidden; }
.header-top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
header::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(to right, transparent, var(--victory-accent), transparent); transition: background 0.5s ease; }

.logo { display: flex; align-items: center; gap: 0.75rem; }
.logo-text { font-family: var(--font-heading); font-weight: 800; font-size: 1.8rem; letter-spacing: -0.02em; background: linear-gradient(to right, #60a5fa, #f472b6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Language Selector - Top Level */
.language-selector-top {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 0;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none; /* Hide scrollbar */
}
.language-selector-top::-webkit-scrollbar { display: none; }

.lang-btn {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    color: var(--text-main);
    border: 1px solid var(--glass-border);
    padding: 0.6rem 1.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    border: 1.5px solid var(--glass-border);
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--victory-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--victory-glow);
}

.lang-btn.active {
    background: var(--victory-accent);
    color: white;
    border-color: var(--victory-accent);
    box-shadow: 0 0 20px var(--victory-glow);
    transform: scale(1.05);
}

/* Motivational Phrase */
.motivational-phrase {
    padding: 0.8rem 1.5rem;
    text-align: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--victory-accent);
    box-shadow: 0 0 15px var(--victory-glow);
    animation: bounce-subtle 3s infinite ease-in-out;
}
.motivational-phrase p {
    font-weight: 700;
    font-size: 1.1rem;
    background: linear-gradient(to right, #fff, var(--victory-accent), #fff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.05em;
}

@keyframes bounce-subtle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Victory Badge */
.top-country-badge { 
    background: rgba(255, 255, 255, 0.08); 
    padding: 0.6rem 1.2rem; 
    border-radius: 999px; 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    font-weight: 800; 
    border: 2px solid var(--victory-accent);
    box-shadow: 0 0 20px var(--victory-glow);
    animation: victory-glow 2s infinite alternate;
}

@keyframes victory-glow {
    from { box-shadow: 0 0 10px var(--victory-glow); transform: scale(1); }
    to { box-shadow: 0 0 25px var(--victory-glow); transform: scale(1.05); }
}

.icon-victory { color: #fbbf24; animation: rotate-crown 3s infinite linear; }
@keyframes rotate-crown { 0% { transform: rotate(0deg); } 20% { transform: rotate(15deg); } 40% { transform: rotate(-15deg); } 60% { transform: rotate(0deg); } }

.color-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: 0 0 10px currentColor; }
.color-dot.kr { background-color: var(--color-kr); color: var(--color-kr); }
.color-dot.us { background-color: var(--color-us); color: var(--color-us); }
.color-dot.jp { background-color: var(--color-jp); color: var(--color-jp); border: 1px solid #ccc; }
.color-dot.cn { background-color: var(--color-cn); color: var(--color-cn); }
.color-dot.vn { background-color: var(--color-vn); color: var(--color-vn); }
.color-dot.eu { background-color: var(--color-eu); color: var(--color-eu); }
.color-dot.un { background-color: var(--color-un); color: var(--color-un); }

.top-country-badge { background: rgba(255, 255, 255, 0.05); padding: 0.5rem 1rem; border-radius: 999px; display: flex; align-items: center; gap: 0.75rem; font-weight: 700; border: 1px solid var(--glass-border); }
.user-badge { padding: 0.6rem 1.2rem; display: flex; align-items: center; gap: 0.8rem; }

/* Main Content: 50/50 Split */
.main-content.grid-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.ad-placeholder { height: 100px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.3em; }

/* Grid Board */
.board-section { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; min-height: 600px; }
.board-header { display: flex; flex-direction: column; gap: 0.4rem; }
.board-header h2 { font-family: var(--font-heading); font-size: 1.7rem; }
.board-header p { color: var(--text-muted); font-size: 0.9rem; }

/* Board Footer */
.board-footer {
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.language-selector {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.lang-btn {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    border: 1px solid var(--glass-border);
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: 0.2s;
}

.lang-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--primary); }
.lang-btn.active { background: var(--victory-accent); border-color: var(--victory-accent); color: white; box-shadow: 0 0 15px var(--victory-glow); }

.board-info {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.grid-board {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-template-rows: repeat(15, 1fr);
    gap: 4px;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px;
    border-radius: 1rem;
    overflow: hidden;
}

.grid-cell {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.02);
}

.grid-cell:hover { transform: scale(1.1); background: rgba(255, 255, 255, 0.1); z-index: 10; }
.grid-cell.active-kr { background-color: var(--color-kr); box-shadow: 0 0 15px var(--color-kr); }
.grid-cell.active-us { background-color: var(--color-us); box-shadow: 0 0 15px var(--color-us); }
.grid-cell.active-jp { background-color: var(--color-jp); box-shadow: 0 0 15px rgba(255,255,255,0.5); }
.grid-cell.active-cn { background-color: var(--color-cn); box-shadow: 0 0 15px var(--color-cn); }
.grid-cell.active-vn { background-color: var(--color-vn); box-shadow: 0 0 15px var(--color-vn); }
.grid-cell.active-eu { background-color: var(--color-eu); box-shadow: 0 0 15px var(--color-eu); }

/* Cheer Board */
.cheer-board { display: flex; flex-direction: column; height: 550px; }
.cheers-list { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.cheer-item { background: rgba(255, 255, 255, 0.05); padding: 1rem; border-radius: 1rem; border: 1px solid var(--glass-border); animation: slideIn 0.3s ease-out; position: relative; }

.cheer-user { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 0.85rem; margin-bottom: 0.4rem; color: var(--victory-accent); transition: color 0.5s ease; }
.cheer-text { font-size: 0.95rem; line-height: 1.45; }

.expiry-badge {
    background: rgba(236, 72, 153, 0.15);
    color: #f472b6;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid rgba(236, 72, 153, 0.3);
    display: inline-block;
    align-self: flex-start;
    margin-top: 0.5rem;
}
.cheer-original { font-size: 0.75rem; color: var(--text-muted); font-style: italic; margin-top: 0.4rem; display: block; }

.cheer-input-area { padding: 1.25rem; display: flex; gap: 0.75rem; border-top: 1px solid var(--glass-border); }
#cheer-input { flex: 1; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--glass-border); padding: 0.8rem 1.2rem; border-radius: 1rem; color: white; font-family: var(--font-base); }

.btn-primary { background: var(--primary); color: white; border: none; padding: 0.8rem 1.5rem; border-radius: 1rem; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
.btn-primary:hover { background: #2563eb; transform: translateY(-2px); box-shadow: 0 4px 15px var(--primary-glow); }

/* Info Section & Footer Enrichment */
.info-section { padding: 2.5rem; margin-top: 1.5rem; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.info-card h3 { font-family: var(--font-heading); font-style: normal; font-weight: 800; font-size: 1.3rem; margin-bottom: 0.75rem; color: var(--victory-accent); transition: color 0.5s ease; }
.info-card p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.7; }

footer { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2.5rem; gap: 2rem; flex-wrap: wrap; }
.footer-left { display: flex; flex-direction: column; gap: 0.75rem; min-width: 300px; }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; transition: color 0.2s; font-weight: 600; }
.footer-links a:hover { color: var(--primary); }

.country-card { padding: 1.5rem; border-radius: 1.5rem; border: 1px solid var(--glass-border); cursor: pointer; transition: 0.3s; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; background: rgba(255, 255, 255, 0.03); }
.country-card:hover { transform: translateY(-8px); background: rgba(255, 255, 255, 0.1); border-color: var(--primary); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); }
.country-card .color-dot { width: 40px; height: 40px; margin-bottom: 0.5rem; }
.country-card span { font-weight: 800; font-size: 1.1rem; }

@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* Mobile */
@media (max-width: 1024px) {
    .main-content.grid-layout { grid-template-columns: 1fr; }
    .app-container { padding: 0.75rem; }
    header { padding: 1rem; flex-direction: column; gap: 1rem; }
}