/* --- Imports Poppins font --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');
:root {
  --bg: #0e0e0e;
  --fg: #f0f0f0;
  --muted: #aaa;

  /* Caribbean Palette */
  --accent-1: #00f2ea; /* Bright Teal */
  --accent-2: #00c9ff; /* Bright Cyan */
  --accent-visited: #d8aaff; /* Lavender */
  --accent-correct: #00f2a2; /* Bright Green */
  --accent-wrong: #ff8a8a; /* Bright Red */

  /* --- NEW: Caribbean Palette for Cards --- */
  --caribbean-bg-dark: #1a202c;  /* Dark Slate Blue */
  --caribbean-border: #3a4150; /* Muted Slate Border */
  --caribbean-example: var(--accent-1); /* Teal for example */
  --caribbean-translation: var(--accent-2); /* Cyan for translation */
  /* --- End NEW --- */

  --bg-card: #141414;
--border-card: #2a2a2a;
--border-btn: #333;
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2.5rem;

  /* Full height layout */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box; /* Ensures padding doesn't add to height */
}
header {
text-align: center;
margin-bottom: 1rem;
}
.logo {
font-family: 'Poppins', sans-serif;
font-size: 4.5rem;
font-weight: 900;
margin: 0 0 0.5rem 0;
background: linear-gradient(45deg, var(--accent-1), var(--accent-2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
.tagline {
font-style: italic;
color: var(--muted);
margin: 0;
}
/* --- Main Content Area --- */
main {
width: 100%;
max-width: 1000px;
margin: 1.5rem auto; /* Center main area */
flex-grow: 1; /* Takes up available space */
display: flex; /* Using flex for layout control */
flex-direction: column;
/* REMOVED justify-content: center; - This was causing the issue */
}
/* --- Grid and Cards --- */
/* --- Grid and Cards --- */
#grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 180px); /* <-- 1. CHANGED */
  justify-content: center; /* <-- 2. ADDED */
  gap: 1.2rem;
  width: 100%;
  /* Removed overflow-y: auto; Allow page scroll if needed */
  padding: 0 0.5rem; /* Padding for scrollbar */
}
.card {
perspective: 800px;
cursor: pointer;
}
.card-inner {
position: relative;
width: 100%;
padding-top: 100%; /* square */
transform-style: preserve-3d;
transition: transform 0.6s;
}
.card.flipped .card-inner { transform: rotateY(180deg); }
.card-front, .card-back {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
/* --- MODIFICATION: Use new palette --- */
background: var(--caribbean-bg-dark);
border: 1px solid var(--caribbean-border);
/* --- End MODIFICATION --- */
border-radius: 12px;
padding: 1rem;
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
transition: border-color 0.3s, box-shadow 0.3s;
}
.card:hover .card-front,
.card:hover .card-back {
border-color: var(--accent-1);
box-shadow: 0 0 15px rgba(0, 242, 234, 0.2);
}
.card-front strong {
font-size: 1.25rem;
color: var(--accent-1); /* Highlight color */
transition: color 0.3s;
}
.card-front em {
color: var(--muted);
font-size: 0.9rem;
margin-top: 0.25rem;
}
/* Visited state */
.card.visited .card-front strong {
color: var(--accent-visited);
}
.card-back {
transform: rotateY(180deg);
font-size: 0.9rem;
gap: 0.5rem;
justify-content: flex-start;
align-items: stretch; /* --- MODIFICATION: Align items to stretch --- */
text-align: left;
overflow-y: auto; /* --- FIX: Allow card content to scroll --- */
/* --- NEW: Add a colorful top border --- */
border-top: 3px solid var(--accent-1);
padding-top: 0.75rem; /* Adjust padding for new border */
}
.card-back p { margin: 0; }
.card-back .translation {
font-size: 1.1rem;
font-weight: bold;
color: var(--accent-2);
text-align: center; /* Center translation/immersion word */
/* --- NEW: Add space below main translation --- */
margin-bottom: 0.5rem;
}

/* --- MODIFICATION: Style for new card layout --- */
.card-back .definition {
color: var(--fg); /* Main definition text */
font-size: 0.9rem;
font-weight: normal;
font-style: normal;
margin-bottom: 0.5rem; /* Space before meta */
}
.card-back .example {
/* color: var(--fg); */ /* Was plain white */
color: var(--caribbean-example); /* NEW: Use Teal */
font-style: italic;
margin-top: 0.5rem; /* Space above example */
}
.card-back .example-translation {
color: var(--caribbean-translation); /* NEW: Use Cyan */
font-style: normal; /* Differentiate from example */
font-size: 0.85rem;
margin-top: 0.25rem;
}

.card-back .meta {
color: var(--muted);
font-size: 0.8rem;
padding-top: 0.5rem;
margin-top: 0.25rem; /* --- MODIFICATION: Added margin-top --- */
/* --- MODIFICATION: Use new border color --- */
border-top: 1px solid var(--caribbean-border);
width: 100%;
}
/* Style for romanization text */
.card-back .back-romanization {
color: var(--muted);
font-size: 0.9rem;
font-style: normal;
}
/* Center romanization for main word on back */
.card-back > .back-romanization {
text-align: center;
margin-top: -0.25rem; /* Pull it closer to the word */
}
/* --- MODIFICATION: Removed all .speak-btn and .speak-wrapper styles --- */
/* --- NEW: Style for speakable text --- */
.speakable {
cursor: pointer;
transition: color 0.2s;
}
.speakable:hover {
color: var(--accent-1);
}
/* --- Controls --- */
#controls {
flex-shrink: 0; /* Prevents footer from shrinking */
width: 100%;
max-width: 1000px;
margin: 1.5rem auto 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
}
.lang-row, .action-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start; /* Align to top */
gap: 0.8rem;
}
.select-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem; /* Space between label and select */
}
.select-group label {
font-size: 0.75rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0 0.25rem;
}
/* Hide the 'Tipo' and 'Tema' labels */
#tipo-group label,
#tema-group label {
display: none;
}
select, button {
background: transparent; /* Discreet style */
color: var(--muted);
border: 1px solid var(--border-btn);
border-radius: 8px;
padding: 0.6rem 1rem; /* Padding for width AND height */
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s;
min-width: 140px; /* Base width */
text-align: center;
-webkit-appearance: none; /* Fix for iOS styling */
-moz-appearance: none;
appearance: none;
}
/* Add arrow for selects */
select {
background-image: url("data:image/svg+xml;charset=UTF8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.7rem center;
background-size: 1em;
padding-right: 2rem; /* Space for arrow */
}
button:hover,
select:hover {
background: var(--bg-card);
color: var(--accent-1);
border-color: var(--accent-1);
}
button:disabled {
color: var(--muted);
background: #111;
border-color: var(--border-btn);
cursor: wait;
}
button:disabled:hover {
color: var(--muted);
background: #111;
border-color: var(--border-btn);
}
/* --- Loading / Empty States --- */
.loading-container {
display: flex;
justify-content: center;
align-items: center;
gap: 1.2rem;
width: 100%;
height: 100%;
grid-column: 1 / -1; /* Fix: Spans full grid */
}
.loading-card {
width: 180px;
height: 180px;
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: 12px;
opacity: 0.5;
animation: rhythmic-flip 1.8s infinite ease-in-out;
}
.loading-card:nth-child(2) { animation-delay: 0.3s; }
.loading-card:nth-child(3) { animation-delay: 0.6s; }
@keyframes rhythmic-flip {
0% { transform: rotateY(0deg); }
50% { transform: rotateY(180deg); }
100% { transform: rotateY(360deg); }
}
.empty-state {
color: var(--muted);
text-align: center;
font-style: italic;
/* Removed grid-column span as it's used in flex now too */
/* --- NEW: Add margin for empty state inside flex containers --- */
margin: 1rem 0;
}
.empty-state.error {
color: var(--accent-wrong);
}
/* --- NEW: Quiz Mode Styles --- */
#quiz-container {
display: none; /* Hidden by default */
flex-direction: column;
align-items: center;
justify-content: center; /* Center vertically */
width: 100%;
flex-grow: 1; /* Take remaining space */
gap: 1.5rem;
}
#quiz-header {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 600px;
color: var(--muted);
font-size: 0.9rem;
}
#quiz-question-card {
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: 12px;
padding: 2rem;
width: 100%;
max-width: 600px;
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
#quiz-question-text {
font-size: 1.25rem;
font-style: italic;
margin: 0;
}
#quiz-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
width: 100%;
max-width: 600px;
}
.quiz-option {
/* Use same style as other buttons */
background: transparent;
color: var(--muted);
border: 1px solid var(--border-btn);
border-radius: 8px;
padding: 1rem; /* Taller for quiz */
font-size: 1rem;
cursor: pointer;
transition: all 0.2s;
width: 100%;
}
.quiz-option:hover {
background: var(--bg-card);
color: var(--accent-1);
border-color: var(--accent-1);
}
.quiz-option:disabled {
cursor: default;
opacity: 0.7;
}
.quiz-option.correct,
.quiz-option.correct-answer {
background: rgba(0, 242, 162, 0.1);
color: var(--accent-correct);
border-color: var(--accent-correct);
}
.quiz-option.wrong {
background: rgba(255, 138, 138, 0.1);
color: var(--accent-wrong);
border-color: var(--accent-wrong);
}
/* Style for correct answer when wrong one is picked */
.quiz-option.correct-answer:disabled {
background: rgba(0, 242, 162, 0.1);
color: var(--accent-correct);
border-color: var(--accent-correct);
opacity: 1;
}
#quiz-feedback {
display: none; /* Hidden until answer */
text-align: center;
font-size: 1.1rem;
font-weight: bold;
}
#quiz-feedback-text.correct {
color: var(--accent-correct);
}
#quiz-feedback-text.wrong {
color: var(--accent-wrong);
}
#quiz-results {
display: none; /* Hidden by default */
flex-direction: column;
align-items: center;
gap: 1rem;
}
#quiz-results-score {
font-size: 1.25rem;
color: var(--muted);
}
.quiz-results-actions {
display: flex;
gap: 1rem;
/* --- NEW: Ensure actions container takes width for centering --- */
width: 100%;
justify-content: center;
}
#btnQuizRestart, #btnQuizExit {
/* Reuse button styles */
min-width: 140px;
}
/* --- NEW: Quiz Language Select Styles --- */
#quiz-lang-select {
/* display: none; */ /* JS handles this, but keep as fallback */
/* --- FIX: Use flex and justify content center ONLY WHEN DISPLAYED --- */
/* Default display is handled by JS inline style */
flex-direction: column; /* Stack vertically */
align-items: center; /* Center horizontally */
gap: 1.5rem; /* Space between elements */
width: 100%;
max-width: 450px; /* Constrain width */
margin: auto; /* Center block horizontally */
flex-grow: 1; /* Take remaining space */
text-align: center; /* Center text like title/empty state */
/* Added justify-content here */
justify-content: center;
}
/* Ensure it only justifies when visible (flex) */
#quiz-lang-select[style="display: flex"] {
justify-content: center;
}
#quiz-lang-title {
color: var(--fg);
font-size: 1.5rem;
margin-bottom: 0.5rem; /* Space below title */
}
#quiz-lang-options {
display: flex;
flex-direction: column; /* Stack buttons */
gap: 1rem; /* Space between buttons */
width: 100%; /* Take full width of parent */
}
/* Style for language buttons and the empty state generate button */
.quiz-lang-option, #btnGenerateFromEmptyQuiz {
/* Reuse button styles */
background: transparent;
color: var(--muted);
border: 1px solid var(--border-btn);
border-radius: 8px;
padding: 1rem; /* Make buttons taller */
font-size: 1rem;
cursor: pointer;
transition: all 0.2s;
width: 100%; /* Make buttons full width */
min-width: 0; /* Override min-width */
}
.quiz-lang-option:hover, #btnGenerateFromEmptyQuiz:hover {
background: var(--bg-card);
color: var(--accent-1);
border-color: var(--accent-1);
}
/* Ensure back button fits in nicely */
#quiz-lang-select .quiz-results-actions {
margin-top: 1rem; /* Space above back button */
}
/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 600px) {
body {
padding: 1.5rem 1rem;
min-height: -webkit-fill-available; /* Fix for mobile safari viewport height */
}
.logo {
font-size: 3.5rem;
}
main {
margin-top: 1rem;
/* --- FIX: Ensure main doesn't always center on mobile either --- */
/* justify-content: initial; Remove if still present */
}
#grid {
grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
gap: 0.8rem;
padding: 0;
}
.card-front strong {
font-size: 1rem; /* Smaller text for smaller cards */
}
.card-back {
font-size: 0.75rem; /* Smaller text */
gap: 0.25rem;
}
.card-back .translation { font-size: 0.9rem; }
.card-back .meta { font-size: 0.7rem; padding-top: 0.25rem; }
.card-back .back-romanization { font-size: 0.8rem; } /* Romanization on mobile */
.loading-card {
width: 45%; /* Use percentage for mobile */
height: 0; /* Height is 0 */
padding-top: 45%; /* Use padding-top to maintain aspect ratio */
}
/* --- MODIFICATION: Removed mobile speak-btn styles --- */
/* Quiz Mobile */
#quiz-question-card {
min-height: 100px;
padding: 1.5rem;
}
#quiz-question-text {
font-size: 1rem;
}
#quiz-options {
grid-template-columns: 1fr; /* Stack options */
}
.quiz-option {
font-size: 1rem;
}
.quiz-results-actions {
flex-direction: column;
width: 100%;
align-items: center; /* Center buttons in column */
}
#btnQuizRestart, #btnQuizExit, #btnQuizLangBack /* Apply full width to back btn */ {
width: 100%;
max-width: 350px; /* Limit width on mobile */
margin-left: auto; /* Ensure centering works */
margin-right: auto;
}
/* Quiz Lang Select Mobile */
#quiz-lang-select {
max-width: 90%; /* Allow more width */
}
#quiz-lang-title {
font-size: 1.25rem;
}
#controls {
gap: 0.8rem;
margin-top: 1rem;
/* --- FIX: Controls should take full width for stacking --- */
width: 100%;
}
.lang-row, .action-row {
flex-direction: column; /* Stack controls vertically */
align-items: center;
width: 100%;
gap: 1rem; /* Increased gap for labels */
}
.select-group {
width: 90%;
max-width: 350px;
}
select {
height: auto;
padding: 0.8rem; /* Taller for tapping */
}
select, button {
width: 100%; /* Make controls fill the select-group */
max-width: none; /* remove max-width */
min-width: 0; /* Override min-width */
padding: 0.8rem; /* Taller for tapping */
font-size: 1rem;
}
select {
padding-right: 2.5rem; /* Ensure space for arrow */
}
}