@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
    margin: 0;
    overflow: hidden;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: radial-gradient(circle at 60% 30%, #fdfbfb 0%, #ebedee 100%);
    color: #2d3436;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

* {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.controls-top-right {
    position: absolute;
    top: 30px;
    right: 30px;
    /* Aligned with lang button originally, but we'll move lang button to be inside or relative */
    z-index: 200;
    display: flex;
    gap: 12px;
}

.icon-btn {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    width: 44px;
    /* Matches height of lang btn roughly */
    height: 44px;
    border-radius: 12px;
    cursor: pointer;
    color: #2d3436;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

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

/* Move lang-btn into the flow or adjust its position if it stays absolute. 
   Actually, let's keep lang-btn absolute but move it to the left of the icons if needed, 
   OR just let the new container take over the top right. 
   
   Wait, the user sees "English" button at top right. 
   I will modify #lang-btn to be relative so we can put them in a flex container. */

#lang-btn {
    /* REMOVED absolute positioning to sit in flex container */
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 0 20px;
    /* Horizontal padding */
    height: 44px;
    /* Match icon-btn height */
    border-radius: 12px;
    /* Match icon-btn radius */
    cursor: pointer;
    font-weight: 600;
    color: #2d3436;
    /* z-index: 200; Handled by container */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-size: 14px;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lang-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

#lang-btn:active {
    transform: translateY(0);
}

#info-card {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%) scale(0.95);
    width: 440px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#info-card.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

#card-title {
    margin-top: 0;
    color: #1a202c;
    font-size: 1.8em;
    font-weight: 700;
    border-bottom: 2px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 15px;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

#card-desc {
    color: #4a5568;
    line-height: 1.75;
    white-space: pre-line;
    font-size: 1.05em;
    text-align: left;
}

.close-btn {
    cursor: pointer;
    position: absolute;
    top: 25px;
    right: 25px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
    font-size: 18px;
    color: #718096;
    transition: all 0.2s ease;
}

.close-btn:hover {
    background: rgba(229, 62, 62, 0.1);
    color: #e53e3e;
    transform: rotate(90deg);
}

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(45, 52, 54, 0.3);
    backdrop-filter: blur(4px);
    z-index: 90;
    opacity: 0;
    transition: opacity 0.4s ease;
}

#overlay.active {
    opacity: 1;
}

#instructions {
    position: absolute;
    bottom: 30px;
    width: 100%;
    text-align: center;
    color: #718096;
    pointer-events: none;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.view-controls {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    padding: 6px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 100;
    gap: 4px;
}

.view-btn {
    background: transparent;
    border: none;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #718096;
    transition: all 0.2s ease;
}

.view-btn:hover {
    color: #2d3436;
    background: rgba(255, 255, 255, 0.5);
}

.view-btn.active {
    background: #fff;
    color: #2d3436;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    font-weight: 600;
}