/* --- FONT IMPORTS FOR THEMES --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Poppins:wght@400;500;700&family=Special+Elite&family=Pacifico&family=Cinzel+Decorative:wght@700&family=Lora:wght@400;500&display=swap');

/* --- THEME DEFINITIONS (WCAG Compliant) --- */
:root { /* Normcore Theme */
    --font-body: 'Inter', sans-serif; --font-header: 'Inter', sans-serif; --primary-color: #5865f2; --secondary-color: #57f287; --background-color: #f6f7fb; --surface-color: #ffffff; --text-color: #2e3338; --text-muted-color: #6a7480; --border-color: #e3e5e8; --danger-color: #ed4245; --shadow-color: rgba(0, 0, 0, 0.08); --header-transform: none; --focus-ring-color: #5865f2;
}
body[data-theme="dark"] {
    --primary-color: #7289da; --secondary-color: #43b581; --background-color: #2c2f33; --surface-color: #36393f; --text-color: #f2f3f5; --text-muted-color: #99aab5; --border-color: #40444b; --danger-color: #f04747; --shadow-color: rgba(0, 0, 0, 0.2); --focus-ring-color: #7289da;
}
body[data-theme="punk"] {
    --font-body: 'Special Elite', monospace; --font-header: 'Special Elite', monospace; --primary-color: #ff00ff; --secondary-color: #00ff00; --background-color: #111111; --surface-color: #1a1a1a; --text-color: #ffffff; --text-muted-color: #bbbbbb; --border-color: #444444; --danger-color: #ff0000; --shadow-color: rgba(255, 0, 255, 0.2); --header-transform: uppercase; --focus-ring-color: #00ff00;
}
body[data-theme="princess"] {
    --font-body: 'Poppins', sans-serif; --font-header: 'Pacifico', cursive; --primary-color: #ff69b4; --secondary-color: #1e90ff; --background-color: #fff0f5; --surface-color: #ffffff; --text-color: #5c3c4c; --text-muted-color: #a76e88; --border-color: #fddde6; --danger-color: #e57373; --shadow-color: rgba(255, 105, 180, 0.15); --focus-ring-color: #ff69b4;
}
/* MODIFIED: New theme definition for Witchcraft */
body[data-theme="witchcraft"] {
    --font-body: 'Lora', serif;
    --font-header: 'Cinzel Decorative', serif;
    --primary-color: #00ff9b;      /* Mystical Green */
    --secondary-color: #f1c40f;    /* Alchemical Gold */
    --background-color: #1a1228;   /* Deep Midnight Purple */
    --surface-color: #2a213f;      /* Dark Grimoire Page */
    --text-color: #e0d8f0;         /* Pale Lavender Ink */
    --text-muted-color: #8c7eab;   /* Muted Purple */
    --border-color: #4a415f;       /* Subtle Rune Etching */
    --danger-color: #e94f37;       /* Fiery Potion Red */
    --shadow-color: rgba(0, 255, 155, 0.1); /* Faint Green Glow */
    --header-transform: none;
    --focus-ring-color: #00ff9b;
}

/* --- GENERAL & ACCESSIBILITY STYLES --- */
body {
    font-family: var(--font-body); background-color: var(--background-color); color: var(--text-color); line-height: 1.6; margin: 0; padding: 10px; display: flex; justify-content: center; transition: background-color 0.3s, color 0.3s;
}
.container {
    max-width: 800px; width: 100%; background-color: var(--surface-color); padding: 20px; border-radius: 12px; box-shadow: 0 8px 30px var(--shadow-color); transition: background-color 0.3s;
}
:is(button, a, input, select):focus-visible {
    outline: 3px solid var(--focus-ring-color); outline-offset: 2px; box-shadow: none;
}
input:focus-visible { border-color: var(--primary-color); }
.site-header {
    text-align: center; margin-bottom: 20px;
}
h1 { 
    text-align: center; border: none; font-size: 1.8em; margin-bottom: 15px;
}
.theme-switcher {
    font-size: 0.9em;
}
.theme-switcher label { margin-right: 8px; }
.theme-switcher select { padding: 4px 8px; border: 1px solid var(--border-color); background-color: var(--surface-color); color: var(--text-color); border-radius: 6px; }

/* --- First Player Flicker Animation --- */
.first-player-chooser { text-align: center; margin-bottom: 30px; padding: 20px; background-color: var(--background-color); border-radius: 8px; }
#first-player-result {
    height: 80px; line-height: 80px; font-size: 1.8em; font-weight: bold;
    color: var(--text-muted-color); margin-top: 15px; background: linear-gradient(145deg, var(--surface-color), color-mix(in srgb, var(--background-color) 50%, var(--surface-color)));
    border-radius: 8px; box-shadow: inset 5px 5px 10px color-mix(in srgb, var(--background-color) 60%, var(--surface-color)), inset -5px -5px 10px var(--surface-color);
    transition: all 0.3s;
    text-align: center;
}
#first-player-result.flickering { opacity: 0.8; }
#first-player-result.winner { color: var(--primary-color); transform: scale(1.1); text-shadow: 0 0 15px color-mix(in srgb, var(--primary-color) 40%, transparent); }

/* --- Other Styles --- */
.method-explainer { font-family: var(--font-body); white-space: normal; font-size: 0.9em; font-style: italic; opacity: 0.8; }
.method-explainer a { color: var(--primary-color); text-decoration: none; }
.method-explainer a:hover { text-decoration: underline; }
h2, h3 { font-family: var(--font-header); color: var(--text-color); border-bottom: 1px solid var(--border-color); padding-bottom: 10px; font-weight: 700; text-transform: var(--header-transform); }
.view { display: none; }
.view.active { display: block; animation: fadeIn 0.5s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
input[type="text"] { width: 100%; padding: 12px 15px; font-size: 16px; border: 1px solid var(--border-color); border-radius: 8px; box-sizing: border-box; margin-bottom: 15px; background-color: var(--background-color); color: var(--text-color); transition: border-color 0.2s, box-shadow 0.2s; }
button { background-color: var(--primary-color); color: white; padding: 12px 25px; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 500; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
button.secondary { background-color: var(--text-muted-color); }
#game-search-container { position: relative; }
#autocomplete-results { position: absolute; width: 100%; border: 1px solid var(--border-color); border-top: none; max-height: 250px; overflow-y: auto; background-color: var(--surface-color); z-index: 1000; box-shadow: 0 4px 15px var(--shadow-color); border-radius: 0 0 8px 8px; }
.autocomplete-item { padding: 12px 15px; cursor: pointer; border-bottom: 1px solid var(--border-color); }
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background-color: var(--background-color); }
.autocomplete-item .year, .game-item .year { color: var(--text-muted-color); }
.autocomplete-add-custom { font-weight: 500; color: var(--primary-color); }
#selected-games-list { list-style: none; padding: 0; }
.game-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background-color: var(--background-color); border-radius: 8px; margin-bottom: 8px; }
.remove-game-btn { background: none; color: var(--danger-color); font-size: 24px; font-weight: bold; cursor: pointer; padding: 0 10px; line-height: 1; transition: color 0.2s; width: auto; }
.voting-layout { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.voting-column { flex: 1; }
.candidate-list, .ranked-list { list-style: none; padding: 10px; min-height: 200px; background-color: var(--background-color); border-radius: 8px; border: 1px solid var(--border-color); }
.candidate-list li, .ranked-list li { padding: 12px 15px; margin: 8px 0; background-color: var(--surface-color); border: 1px solid var(--border-color); border-radius: 8px; cursor: grab; box-shadow: 0 2px 4px var(--shadow-color); transition: box-shadow 0.2s, transform 0.2s; }
#ballot-status { font-weight: bold; font-size: 1.2em; text-align: center; background-color: var(--secondary-color); color: var(--background-color); padding: 10px; border-radius: 8px; margin: 20px 0; }
li.dragging { opacity: 0.5; background: color-mix(in srgb, var(--primary-color) 30%, transparent); }
.results-box { background-color: var(--background-color); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; font-family: 'Courier New', Courier, monospace; word-break: break-all; }
.results-box .winner { color: var(--secondary-color); font-weight: bold; font-size: 1.5em; text-shadow: 0 0 10px color-mix(in srgb, var(--secondary-color) 50%, transparent); }
.results-box .round { margin-top: 15px; border-top: 1px solid var(--text-muted-color); padding-top: 10px; }
#all-calculations-output { margin-top: 20px; }
.alternate-result { margin-top: 15px; border-top: 1px dashed var(--border-color); padding-top: 15px; }

/* --- Media Query for Larger Screens (Tablet & Up) --- */
@media (min-width: 768px) {
    body { padding: 20px; }
    .container { padding: 30px 40px 40px; }
    .site-header { display: flex; justify-content: space-between; align-items: center; text-align: left; }
    h1 { font-size: 2.2em; margin-bottom: 0; }
    button { width: auto; }
    .voting-layout { flex-direction: row; gap: 30px; }
    #first-player-result { font-size: 2.5em; }
}