/* ==================================
   Cyber Flip - style.css
   ================================== */

/* --- CSS Custom Properties (Variables) --- */
:root { /* Astral White Theme (Default) */
    --font-primary: "TheGoodMonolith", monospace;
    --font-size-base: 16px;

    --color-bg: #07070a; 
    --color-text-primary: #f0f0f5;
    --color-text-secondary: #d0d0d5;
    --color-text-muted: #b0b0b5;
    
    --color-accent: #ffffff; 
    --color-accent-rgb: 255,255,255; 
    --color-accent-dark: rgba(230, 230, 255, 0.8); 
    --color-accent-darker: rgba(200, 200, 230, 0.9);
    --color-accent-glow: rgba(255, 255, 255, 0.3);
    --color-accent-border: rgba(200, 200, 220, 0.35);
    --color-accent-border-light: rgba(230, 230, 255, 0.6);

    /* Panel Backgrounds (No Glassmorphism) */
    --panel-bg: rgba(25, 30, 55, 0.85); 
    --panel-border-color: var(--color-accent-border);
    --panel-shadow: rgba(0,0,0, 0.25); 
    
    --color-container-shadow: rgba(var(--color-accent-rgb), 0.2); 
    
    --color-disabled-bg-start: #4a4a55;
    --color-disabled-bg-end: #3a3a45;
    --color-disabled-border: #555560;
    --color-disabled-text: #888890;

    --color-heads: #ffd700; 
    --color-tails: #e8e8f0; 

    --corner-decoration-color: rgba(var(--color-accent-rgb), 0.6);

    /* Aurora Colors for Astral White */
    --aurora-color1: rgba(var(--color-accent-rgb), 0.3); 
    --aurora-color2: rgba(70, 70, 180, 0.35); 
    --aurora-color3: rgba(130, 50, 200, 0.3);
    --aurora-color4: rgba(50, 150, 200, 0.25);

    --transition-duration-fast: 0.15s;
    --transition-duration-medium: 0.3s;
    --transition-duration-slow: 0.4s;
    --animation-duration-icon: 0.3s;
    --animation-duration-highlight: 0.5s;
}

/* --- Theme Variants --- */
.theme-green {
    --color-accent: #00ff7f; --color-accent-rgb: 0,255,127;
    --color-accent-dark: rgba(0, 200, 100, 0.8); --color-accent-darker: rgba(0, 150, 75, 0.9);
    --color-accent-glow: rgba(0, 255, 127, 0.4); --color-accent-border: rgba(0, 200, 100, 0.35);
    --color-accent-border-light: rgba(0, 255, 127, 0.6); --color-container-shadow: rgba(0, 255, 127, 0.2);
    --corner-decoration-color: rgba(0, 255, 127, 0.7);
    --color-heads: #00ff7f; 
    --aurora-color1: rgba(0,255,127, 0.3); --aurora-color2: rgba(0,100,50, 0.35);
    --aurora-color3: rgba(70,200,150,0.3); --aurora-color4: rgba(30,150,100,0.25);
}
.theme-cyan { 
    --color-accent: #00ffff; --color-accent-rgb: 0,255,255;
    --color-accent-dark: rgba(0, 200, 200, 0.8); --color-accent-darker: rgba(0, 150, 150, 0.9);
    --color-accent-glow: rgba(0, 255, 255, 0.4); --color-accent-border: rgba(0, 200, 200, 0.35);
    --color-accent-border-light: rgba(0, 255, 255, 0.6); --color-container-shadow: rgba(0, 255, 255, 0.2);
    --corner-decoration-color: rgba(0, 255, 255, 0.7);
    --color-heads: #00ffff;
    --aurora-color1: rgba(0,255,255, 0.3); --aurora-color2: rgba(0,100,100, 0.35);
    --aurora-color3: rgba(50,200,200,0.3); --aurora-color4: rgba(0,150,150,0.25);
}
.theme-red {
    --color-accent: #ff4136; --color-accent-rgb: 255,65,54;
    --color-accent-dark: rgba(220, 50, 50, 0.8); --color-accent-darker: rgba(200, 40, 40, 0.9);
    --color-accent-glow: rgba(255, 65, 54, 0.4); --color-accent-border: rgba(220, 50, 50, 0.35);
    --color-accent-border-light: rgba(255, 65, 54, 0.6); --color-container-shadow: rgba(255, 65, 54, 0.2);
    --corner-decoration-color: rgba(255, 65, 54, 0.7);
    --color-heads: #ff4136; 
    --aurora-color1: rgba(255,65,54, 0.3); --aurora-color2: rgba(150,20,10, 0.35);
    --aurora-color3: rgba(255,100,80,0.3); --aurora-color4: rgba(200,50,40,0.25);
}
.theme-purple {
    --color-accent: #b100ff; --color-accent-rgb: 177,0,255;
    --color-accent-dark: rgba(150, 0, 200, 0.8); --color-accent-darker: rgba(120, 0, 170, 0.9);
    --color-accent-glow: rgba(177, 0, 255, 0.4); --color-accent-border: rgba(150, 0, 200, 0.35);
    --color-accent-border-light: rgba(177, 0, 255, 0.6); --color-container-shadow: rgba(177, 0, 255, 0.2);
    --corner-decoration-color: rgba(177, 0, 255, 0.7);
    --color-heads: #b100ff;
    --aurora-color1: rgba(177,0,255, 0.3); --aurora-color2: rgba(80,0,120, 0.35);
    --aurora-color3: rgba(200,70,255,0.3); --aurora-color4: rgba(120,30,180,0.25);
}

/* --- CSS Reset & Global Styles --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: var(--font-size-base);
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    overflow-x: hidden; /* Important for full-page aurora */
    padding: 20px;
    position: relative; /* For aurora positioning */
    transition: background-color var(--transition-duration-medium);
}

/* --- Aurora Background --- */
.aurora-background {
    position: fixed; /* Cover entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1; /* Behind all content */
    pointer-events: none;
}

.aurora-shape {
    position: absolute;
    border-radius: 50%; /* Soft shapes */
    filter: blur(80px); /* Strong blur for ethereal look */
    opacity: 0.6;
    mix-blend-mode: screen; 
    transition: background var(--transition-duration-slow) ease-in-out; /* For theme color changes */
}

.aurora-shape1 {
    width: 60vw; height: 60vw; min-width: 400px; min-height: 400px;
    background: var(--aurora-color1);
    top: -20%; left: -20%;
    animation: moveAurora1 45s linear infinite alternate;
}
.aurora-shape2 {
    width: 50vw; height: 50vw; min-width: 350px; min-height: 350px;
    background: var(--aurora-color2);
    top: 10%; right: -15%;
    animation: moveAurora2 55s linear infinite alternate;
}
.aurora-shape3 {
    width: 45vw; height: 45vw; min-width: 300px; min-height: 300px;
    background: var(--aurora-color3);
    bottom: -25%; left: 20%;
    animation: moveAurora3 50s linear infinite alternate;
}
.aurora-shape4 {
    width: 40vw; height: 40vw; min-width: 250px; min-height: 250px;
    background: var(--aurora-color4);
    bottom: 5%; right: 5%;
    animation: moveAurora4 60s linear infinite alternate;
}

@keyframes moveAurora1 {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    100% { transform: translate(30vw, 20vh) rotate(45deg) scale(1.3); }
}
@keyframes moveAurora2 {
    0% { transform: translate(0, 0) rotate(0deg) scale(1.2); }
    100% { transform: translate(-25vw, -15vh) rotate(-30deg) scale(1); }
}
@keyframes moveAurora3 {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    100% { transform: translate(15vw, -20vh) rotate(60deg) scale(1.4); }
}
@keyframes moveAurora4 {
    0% { transform: translate(0,0) rotate(0deg) scale(1.1); }
    100% { transform: translate(-20vw, 10vh) rotate(-50deg) scale(0.9); }
}

/* --- UI Panels (No Glassmorphism) --- */
.app-container,
.settings-panel,
.scoreboard,
.stats-area,
.coin-area {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border-color);
    box-shadow: 0 5px 25px var(--panel-shadow); 
    transition: background var(--transition-duration-medium), 
                border-color var(--transition-duration-medium), 
                box-shadow var(--transition-duration-medium);
}

.app-container {
    position: relative; 
    z-index: 1; /* Ensure app content is above the aurora background */
    width: 90vw; 
    max-width: 450px; 
    padding: 25px 30px;
    border-radius: 20px; 
    text-align: center;
    box-shadow: 0 0 30px var(--color-container-shadow), 0 0 10px rgba(0,0,0,0.3) inset; 
}

.settings-panel {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping if needed */
    justify-content: space-between; /* Controls left, credit right */
    align-items: flex-end; /* Align bottom edges */
    gap: 10px 15px;
    margin-bottom: 25px;
    padding: 15px;
    border-radius: 15px;
}

.scoreboard, 
.stats-area {
    margin: 0 auto 20px auto;
    padding: 15px;
    border-radius: 15px;
}

.coin-area {
    margin: 0 auto 25px auto;
    width: 200px;
    height: 200px;
    border-radius: 20px; 
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* --- Settings Panel Content --- */
.settings-controls { /* Wrapper for the actual controls */
    display: flex;
    flex-direction: column; /* Stack Theme and Classic Text */
    gap: 12px; /* Vertical gap between controls */
    align-items: flex-start; /* Align controls to the left */
}

.setting-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    width: 100%; /* Ensure groups take available width if needed */
    justify-content: space-between; /* Space label and control */
}

.settings-panel label {
    color: var(--color-text-secondary);
}

.settings-panel select,
.settings-panel input { /* For checkbox, though it's hidden by toggle */
    font-family: var(--font-primary);
    background: rgba(var(--color-accent-rgb), 0.05); /* Very subtle background */
    color: var(--color-text-primary);
    border: 1px solid var(--panel-border-color); 
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 0.85rem;
}

.settings-panel select {
    min-width: 120px; /* Give dropdown some minimum width */
}

.settings-panel select:focus,
.settings-panel input:focus { /* Focus for actual input if ever visible */
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 5px var(--color-accent-glow);
}

/* Toggle Switch Styles */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    gap: 8px; /* Add gap for spacing */
}
.toggle-switch input { /* Hide actual checkbox */
    opacity: 0;
    width: 0;
    height: 0;
}
.slider { /* The track */
    width: 34px;
    height: 18px;
    background-color: #333; /* Darker base for slider */
    border-radius: 18px;
    position: relative;
    transition: background-color var(--transition-duration-medium);
    border: 1px solid #555; /* Subtle border for slider */
}
.slider:before { /* The knob */
    content: "";
    position: absolute;
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
    background-color: #888; /* Knob color */
    border-radius: 50%;
    transition: transform var(--transition-duration-medium), background-color var(--transition-duration-medium);
}
.toggle-switch input:checked + .slider {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}
.toggle-switch input:checked + .slider:before {
    transform: translateX(16px);
    background-color: white; /* Knob color when active */
}

/* Designer Credit Styles */
.designer-credit {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--color-text-muted);
    text-align: right;
    /* margin-left: auto; No longer needed with space-between on parent */
    align-self: flex-end; 
    padding-left: 15px; 
}
.designer-name {
    font-style: italic;
    color: var(--color-accent);
    transition: color var(--transition-duration-medium);
    display: block; /* Ensures it's on the line below */
}

/* --- Heading --- */
h1 {
    font-size: 1.75rem;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 15px;
    text-shadow: 0 0 6px var(--color-accent),
                 0 0 12px var(--color-accent),
                 0 0 20px var(--color-accent-glow);
    transition: color var(--transition-duration-medium), text-shadow var(--transition-duration-medium);
}

/* --- Contextual Message --- */
.contextual-message {
    min-height: 20px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: var(--color-accent);
    opacity: 0;
    transition: opacity var(--transition-duration-medium) ease-in-out;
    font-style: italic;
}
.contextual-message.visible {
    opacity: 1;
}

/* --- Coin Area & Coin Visuals --- */
.coin {
    position: relative;
    width: 170px;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.coin-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 100px; 
    line-height: 1; 
    font-weight: bold; 
}
.coin-face-text {
    font-size: 3.5rem; 
    text-transform: uppercase;
}
.coin-face > i, 
.coin-face-text {
    display: inline-block;
    opacity: 0; 
    background: transparent !important; 
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    outline: none !important;
    padding: 0 !important;
}
.coin-face > i.fa-sun, 
.coin-face-text.heads-text { 
    color: var(--color-heads); 
    text-shadow: 0 0 12px var(--color-heads), 0 0 25px var(--color-heads); 
    transition: color var(--transition-duration-medium), text-shadow var(--transition-duration-medium);
}
.coin-face > i.fa-moon, 
.coin-face-text.tails-text { 
    color: var(--color-tails); 
    text-shadow: 0 0 12px var(--color-tails), 0 0 25px var(--color-tails); 
    transition: color var(--transition-duration-medium), text-shadow var(--transition-duration-medium);
}

/* --- Icon/Text Animations --- */
@keyframes disassembleOut {
    0% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); filter: blur(0px); }
    50% { opacity: 0.5; transform: scale(0.8) translateY(5px) rotate(15deg); filter: blur(2px); }
    100% { opacity: 0; transform: scale(0.6) translateY(15px) rotate(30deg); filter: blur(4px); }
}
.disassemble-out-active {
    animation: disassembleOut var(--animation-duration-icon) forwards ease-in;
}

@keyframes assembleIn {
    0% { opacity: 0; transform: scale(0.6) translateY(15px) rotate(-30deg); filter: blur(4px); }
    50% { opacity: 0.7; transform: scale(1.05) translateY(-3px) rotate(5deg); filter: blur(1.5px); }
    100% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); filter: blur(0px); }
}
.assemble-in-active {
    animation: assembleIn var(--animation-duration-icon) forwards ease-out;
    opacity: 0; 
}

@keyframes assembleInStreak {
    0% { opacity: 0; transform: scale(0.5) translateY(20px) rotate(-45deg) scale(0.8); filter: blur(5px); }
    30% { opacity: 0.6; transform: scale(1.2) translateY(-5px) rotate(10deg) scale(1.1); filter: blur(1px); }
    60% { opacity: 1; transform: scale(0.9) translateY(2px) rotate(-5deg) scale(0.95); filter: blur(0px); }
    100% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg) scale(1); filter: blur(0px); }
}
.assemble-in-streak-active {
    animation: assembleInStreak calc(var(--animation-duration-icon) * 1.2) forwards ease-out;
    opacity: 0;
}

/* --- Pulsing Grid Effect --- */
.pulsing-grid-effect-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0;
    overflow: hidden;
    transition: opacity var(--transition-duration-fast) ease-in-out;
}
.pulsing-grid-effect-container canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/* --- Flip Button --- */
.flip-button {
    padding: 14px 35px;
    font-size: 1.125rem;
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: linear-gradient(145deg, var(--color-accent-dark), var(--color-accent-darker));
    border: 1px solid var(--color-accent-border-light);
    border-radius: 10px;
    box-shadow: 0 0 12px var(--color-accent-glow),
                0 0 25px var(--color-accent-glow),
                0 2px 5px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: background var(--transition-duration-medium), 
                box-shadow var(--transition-duration-medium), 
                transform var(--transition-duration-fast), 
                border-color var(--transition-duration-medium);
    margin-bottom: 20px;
}
.flip-button:hover:not(:disabled) {
    background: linear-gradient(145deg, var(--color-accent-darker), var(--color-accent-dark)); 
    box-shadow: 0 0 18px var(--color-accent-glow),
                0 0 35px var(--color-accent-glow),
                0 3px 7px rgba(0,0,0,0.4);
    transform: translateY(-3px);
}
.flip-button:active:not(:disabled) {
    transform: translateY(-1px);
}
.flip-button:disabled {
    background: linear-gradient(145deg, var(--color-disabled-bg-start), var(--color-disabled-bg-end));
    border-color: var(--color-disabled-border);
    color: var(--color-disabled-text);
    cursor: not-allowed;
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* --- Scoreboard Centering & Styling --- */
.scoreboard {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    gap: 5px; 
}
.score-item {
    display: flex;
    align-items: center; 
    justify-content: center; 
    width: auto; 
    min-width: 180px; 
    text-align: left; 
    font-size: 1rem;
    color: var(--color-text-secondary);
    padding: 2px 0;
}
.score-item i.score-icon {
    font-size: 1.1em; 
    width: 1.5em; 
    text-align: center; 
    margin-right: 10px; 
    text-shadow: 0 0 5px currentColor;
    line-height: 1; 
    transition: color var(--transition-duration-medium);
}
.score-item span.score-text {
    line-height: 1.4; /* Align text better with icons */
}
.score-item .fa-sun { color: var(--color-heads); }
.score-item .fa-moon { color: var(--color-tails); }

/* --- Stats Area (Streak, History) --- */
.stats-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.streak-display, 
.flip-history-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}
.flip-history-container {
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}
.flip-history-item {
    font-size: 0.9em; 
    line-height: 1;
}
.flip-history-item .fa-sun {
    color: var(--color-heads);
    margin: 0 2px;
    transition: color var(--transition-duration-medium);
}
.flip-history-item .fa-moon {
    color: var(--color-tails);
    margin: 0 2px;
    transition: color var(--transition-duration-medium);
}

/* Update Animations for Score/History */
.score-value.updated {
    animation: valueUpdate var(--animation-duration-highlight) ease-out;
}
@keyframes valueUpdate {
    0% { transform: scale(1); opacity: 1; color: var(--color-accent); }
    50% { transform: scale(1.2); opacity: 0.7; color: var(--color-text-primary); }
    100% { transform: scale(1); opacity: 1; color: var(--color-text-secondary); }
}
.flip-history-display.updated { /* Applied to the span holding history items */
    animation: historyUpdate var(--animation-duration-highlight) ease-out;
}
@keyframes historyUpdate {
  0%, 100% { background-color: transparent; }
  50% { background-color: rgba(var(--color-accent-rgb), 0.1); }
}

/* Reset Button */
.reset-button {
    padding: 8px 20px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-family: var(--font-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    background: transparent;
    border: 1px solid var(--color-disabled-border); 
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-duration-medium);
}
.reset-button:hover:not(:disabled) {
    background: rgba(var(--color-accent-rgb), 0.1);
    color: var(--color-accent);
    border-color: var(--color-accent);
}
.reset-button:disabled {
    color: #666;
    border-color: #444;
    cursor: not-allowed;
}

/* --- Corner Decorations --- */
.corner {
    position: absolute;
    width: 16px;
    height: 16px;
    color: var(--corner-decoration-color);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-duration-slow) ease, 
                transform var(--transition-duration-slow) ease, 
                color var(--transition-duration-medium);
    z-index: 10;
}
.app-container:hover .corner {
    opacity: 1;
}
.corner.top-left { top: -8px; left: -8px; transition-delay: 0s; }
.app-container:hover .corner.top-left { transform: translate(-3px, -3px) rotate(0deg); }
.corner.top-right { top: -8px; right: -8px; transform: rotate(90deg); transition-delay: 0.1s; }
.app-container:hover .corner.top-right { transform: translate(3px, -3px) rotate(90deg); }
.corner.bottom-left { bottom: -8px; left: -8px; transform: rotate(-90deg); transition-delay: 0.2s; }
.app-container:hover .corner.bottom-left { transform: translate(-3px, 3px) rotate(-90deg); }
.corner.bottom-right { bottom: -8px; right: -8px; transform: rotate(180deg); transition-delay: 0.3s; }
.app-container:hover .corner.bottom-right { transform: translate(3px, 3px) rotate(180deg); }

/* --- Media Queries for Mobile Optimization --- */
@media (max-width: 480px) {
    .app-container {
        padding: 20px 15px;
        max-width: 95vw;
    }
    h1 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
    .settings-panel {
        flex-direction: column; 
        align-items: stretch; 
        gap: 12px; 
        margin-bottom: 20px;
    }
    .settings-controls { 
        width: 100%;
        gap: 12px; 
        flex-direction: column; 
        align-items: stretch;
    }
    .setting-group { 
        justify-content: space-between; 
    }
    .toggle-switch { 
        width: 100%; 
        justify-content: space-between;
    }
    .toggle-switch .slider { 
        margin-left: 0; 
    }
    .designer-credit { 
        text-align: center; 
        margin-left: 0; 
        padding-left: 0;
        padding-top: 10px; 
        align-self: center; 
        width: 100%;
    }
    .coin-area {
        width: 180px;
        height: 180px;
        margin-bottom: 20px;
        border-radius: 15px; 
    }
    .coin {
        width: 150px;
        height: 150px;
    }
    .coin-face {
        font-size: 90px;
    }
    .coin-face-text {
        font-size: 3rem;
    }
    .flip-button {
        padding: 12px 25px;
        font-size: 1rem;
        margin-bottom: 15px;
    }
    .scoreboard, 
    .stats-area {
        padding: 12px;
        margin-bottom: 12px;
        border-radius: 10px;
    }
    .score-item {
        font-size: 0.875rem;
        min-width: 160px; 
    }
    .score-item i.score-icon {
        font-size: 1em; 
        width: 1.4em; 
        margin-right: 8px;
    }
    .flip-history-item {
        font-size: 0.9em;
    }
    .reset-button {
        padding: 7px 18px;
        font-size: 0.85rem;
    }
    .contextual-message {
        margin-bottom: 10px;
        font-size: 0.8rem;
    }
}