/* --- 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;
}
/* --- Grid and Cards --- */
#grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 180px); 
  justify-content: center; 
  gap: 1.2rem;
  width: 100%;
  padding: 0 0.5rem; 
}
.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;
background: var(--caribbean-bg-dark);
border: 1px solid var(--caribbean-border);
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); 
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; 
text-align: left;
overflow-y: auto; 
border-top: 3px solid var(--accent-1);
padding-top: 0.75rem; 
}
.card-back p { margin: 0; }
.card-back .translation {
font-size: 1.1rem;
font-weight: bold;
color: var(--accent-2);
text-align: center; 
margin-bottom: 0.5rem;
}

.card-back .definition {
color: var(--fg); 
font-size: 0.9rem;
font-weight: normal;
font-style: normal;
margin-bottom: 0.5rem; 
}
.card-back .example {
color: var(--caribbean-example); 
font-style: italic;
margin-top: 0.5rem; 
}
.card-back .example-translation {
color: var(--caribbean-translation); 
font-style: normal; 
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; 
border-top: 1px solid var(--caribbean-border);
width: 100%;
}
.card-back .back-romanization {
color: var(--muted);
font-size: 0.9rem;
font-style: normal;
}
.card-back > .back-romanization {
text-align: center;
margin-top: -0.25rem; 
}
.speakable {
cursor: pointer;
transition: color 0.2s;
}
.speakable:hover {
color: var(--accent-1);
}
/* --- Controls (MODIFIED) --- */
#controls {
flex-shrink: 0; 
width: 100%;
max-width: 1000px;
margin: 1.5rem auto 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
}
/* MODIFIED: Added .filter-row and .danger-row */
.lang-row, .action-row, .filter-row, .danger-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start; 
gap: 0.8rem;
width: 100%; /* Ensure rows take full width for centering */
}
.select-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem; /* This gap is for the labels in .lang-row */
}
.select-group label {
font-size: 0.75rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0 0.25rem;
}

/* REMOVED the rule that hid labels, as labels were removed from HTML */

select, button {
background: transparent; 
color: var(--muted);
border: 1px solid var(--border-btn);
border-radius: 8px;
padding: 0.6rem 1rem; 
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s;
min-width: 140px; 
text-align: center;
-webkit-appearance: none; 
-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; 
}
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);
}

/* --- NEW: Style for filter row selects to be equal width --- */
.filter-row .select-group {
  flex-grow: 1;
  max-width: 300px; /* Adjust max-width as needed */
}
.filter-row select {
  width: 100%;
}
/* --- NEW: Style for danger row to be offset --- */
.danger-row {
  justify-content: center;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-btn);
}
.danger-row button {
  min-width: 200px;
  color: var(--accent-wrong);
  border-color: var(--border-btn);
}
.danger-row button:hover {
  background: rgba(255, 138, 138, 0.1);
  border-color: var(--accent-wrong);
  color: var(--accent-wrong);
}


/* --- Loading / Empty States --- */
.loading-container {
display: flex;
justify-content: center;
align-items: center;
gap: 1.2rem;
width: 100%;
height: 100%;
grid-column: 1 / -1; 
}
.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;
margin: 1rem 0;
}
.empty-state.error {
color: var(--accent-wrong);
}
/* --- NEW: Quiz Mode Styles --- */
#quiz-container {
display: none; 
flex-direction: column;
align-items: center;
justify-content: center; 
width: 100%;
flex-grow: 1; 
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 {
background: transparent;
color: var(--muted);
border: 1px solid var(--border-btn);
border-radius: 8px;
padding: 1rem; 
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);
}
.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; 
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; 
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;
width: 100%;
justify-content: center;
}
#btnQuizRestart, #btnQuizExit {
min-width: 140px;
}
/* --- NEW: Quiz Language Select Styles --- */
#quiz-lang-select {
flex-direction: column; 
align-items: center; 
gap: 1.5rem; 
width: 100%;
max-width: 450px; 
margin: auto; 
flex-grow: 1; 
text-align: center; 
justify-content: center;
}
#quiz-lang-select[style*="display: flex"] {
justify-content: center;
}
#quiz-lang-title {
color: var(--fg);
font-size: 1.5rem;
margin-bottom: 0.5rem; 
}
#quiz-lang-options {
display: flex;
flex-direction: column; 
gap: 1rem; 
width: 100%; 
}
.quiz-lang-option, #btnGenerateFromEmptyQuiz {
background: transparent;
color: var(--muted);
border: 1px solid var(--border-btn);
border-radius: 8px;
padding: 1rem; 
font-size: 1rem;
cursor: pointer;
transition: all 0.2s;
width: 100%; 
min-width: 0; 
}
.quiz-lang-option:hover, #btnGenerateFromEmptyQuiz:hover {
background: var(--bg-card);
color: var(--accent-1);
border-color: var(--accent-1);
}
#quiz-lang-select .quiz-results-actions {
margin-top: 1rem; 
}

/* --- NEW: Tap Mode Styles --- */
#tap-container {
  display: none; /* Hidden by default */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 500px; /* Max width for the card */
  margin: auto; /* Center container */
  flex-grow: 1;
  gap: 1rem;
  text-align: center;
}

#tap-title {
  color: var(--accent-1);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

#tap-card {
  background: var(--caribbean-bg-dark);
  border: 1px solid var(--caribbean-border);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  width: 100%;
  min-height: 150px; /* Ensure minimum height */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer; /* Make card tappable */
  transition: border-color 0.3s, box-shadow 0.3s;
}
#tap-card:hover {
  border-color: var(--accent-2);
  box-shadow: 0 0 15px rgba(0, 201, 255, 0.2);
}

#tap-word {
  font-size: 2rem;
  font-weight: bold;
  color: var(--accent-1);
  margin-bottom: 0.5rem;
}

#tap-details {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--caribbean-border);
  width: 100%;
  font-size: 0.9rem;
  text-align: left; /* Details usually look better left-aligned */
  color: var(--fg);
}
#tap-details p {
  margin: 0.4rem 0;
}
#tap-translation { /* Inherits from existing .translation */
   text-align: center; /* Center translation */
   font-size: 1.2rem;
   margin-bottom: 0.8rem;
}
#tap-pos { /* Inherits from existing .meta */
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
}
#tap-example { /* Inherits from existing .example */
   margin-top: 0.8rem;
   color: var(--caribbean-example);
}
#tap-notes { /* Inherits from existing .definition */
    font-style: italic;
    color: var(--muted);
     margin-top: 0.8rem;
}


#tap-feedback {
    min-height: 1.2em; /* Reserve space for feedback */
    font-size: 0.9rem;
    font-style: italic;
    color: var(--muted);
}
#tap-progress {
    font-size: 0.8rem;
    color: var(--muted);
}

#tap-actions button {
    min-width: 150px;
}
/* Style Tap buttons like other action buttons */


/* --- Mobile adjustments for Tap Mode --- */
@media (max-width: 600px) {
  #tap-container {
    max-width: 90%;
    gap: 0.8rem;
  }
  #tap-card {
    padding: 1.5rem 1rem;
    min-height: 120px;
  }
  #tap-word {
    font-size: 1.5rem;
  }
  #tap-details {
    font-size: 0.8rem;
  }
  #tap-translation { font-size: 1rem; }
  #tap-actions {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 0.8rem;
     align-items: center;
  }
  #tap-actions button {
     width: 90%;
     max-width: 350px;
  }
}

/* --- Ensure Bank/Quiz/Tap controls visibility --- */
#controls .filter-row, #controls .danger-row {
  /* Default hidden, shown by JS based on mode */
  display: none;
}
/* Ensure controls footer itself is hidden in Tap mode */
body:has(#tap-container[style*="display: flex"]) #controls {
    display: none;
}

/* --- MOBILE OPTIMIZATION (MODIFIED) --- */
@media (max-width: 600px) {
body {
padding: 1.5rem 1rem;
min-height: -webkit-fill-available; 
}
.logo {
font-size: 3.5rem;
}
main {
margin-top: 1rem;
}
#grid {
grid-template-columns: repeat(2, 1fr); 
gap: 0.8rem;
padding: 0;
}
.card-front strong {
font-size: 1rem; 
}
.card-back {
font-size: 0.75rem; 
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; } 
.loading-card {
width: 45%; 
height: 0; 
padding-top: 45%; 
}
/* Quiz Mobile */
#quiz-question-card {
min-height: 100px;
padding: 1.5rem;
}
#quiz-question-text {
font-size: 1rem;
}
#quiz-options {
grid-template-columns: 1fr; 
}
.quiz-option {
font-size: 1rem;
}
.quiz-results-actions {
flex-direction: column;
width: 100%;
align-items: center; 
}
#btnQuizRestart, #btnQuizExit, #btnQuizLangBack {
width: 100%;
max-width: 350px; 
margin-left: auto; 
margin-right: auto;
}
/* Quiz Lang Select Mobile */
#quiz-lang-select {
max-width: 90%; 
}
#quiz-lang-title {
font-size: 1.25rem;
}
#controls {
gap: 0.8rem;
margin-top: 1rem;
width: 100%;
}
/* MODIFIED: Added .filter-row and .danger-row */
.lang-row, .action-row, .filter-row, .danger-row {
flex-direction: column; 
align-items: center;
width: 100%;
gap: 1rem; 
}
/* NEW: Make filter groups full width on mobile */
.filter-row .select-group {
  width: 90%;
  max-width: 350px;
}
.danger-row {
  margin-top: 0.5rem;
  padding-top: 0.8rem; /* Match gap */
}
.danger-row button {
  width: 90%;
  max-width: 350px;
}

.select-group {
width: 90%;
max-width: 350px;
}
select {
height: auto;
padding: 0.8rem; 
}
select, button {
width: 100%; 
max-width: none; 
min-width: 0; 
padding: 0.8rem; 
font-size: 1rem;
}
select {
padding-right: 2.5rem; 
}
}