/* --- THEME, COLOR PALETTE & TYPOGRAPHY --- */
:root {
  /* Font Families */
  --font-family-body: 'Winky Rough', sans-serif;
  --font-family-title: 'Grand Hotel', cursive;

  /* --- "Cosy Kitchen" Color Palette --- */

  /* Primary & Accent Colors */
  --color-brand-primary: #D9534F;      /* Tomato Red (Main Brand) */
  --color-brand-accent: #8A9A5B;       /* Sage Green (For success, highlights) */
  --color-brand-secondary: #F5E8DC;   /* Creamy Parchment (Cards, secondary buttons) */
  --color-brand-secondary-hover: #E8D9C9; /* Darker Parchment */

  /* Text Colors */
  --color-text-default: #3D2B1F;      /* Wooden Spoon Brown (Main text) */
  --color-text-brand: var(--color-brand-primary);
  --color-text-muted: #7A6A5D;       /* Muted Brown (Subheadings, less important text) */
  --color-text-subtle: #A19286;      /* Faded Brown (Placeholders, subtle details) */
  --color-text-on-dark: #FFFFFF;
  --color-text-on-brand-secondary: #3D2B1F; /* Wooden Spoon Brown on Parchment */
  --color-text-on-brand-secondary-hover: #2F2016; /* Darker Brown */
  
  /* Background Colors */
  --color-bg-body: #F9F6F2;           /* Warm Off-White (Like flour dust) */
  --color-bg-shell: #F7F2EC;          /* Clean White (Like a fresh plate) */
  --color-bg-light: #F9F9F9;           /* Light Dough (For light panels, cards) */
  --color-bg-medium: #EAE3DC;         /* Medium Dough (For hover states, dividers) */
  --color-bg-dark: #eadee0;           /* Darker Dough (For share summary bg) */
  --color-bg-highlight: #FFF8E1;      /* Soft Butter Yellow (For highlighting recipes) */
  --color-bg-white: #FFFFFF;

  /* Border Colors */
  --color-border-light: #EAE3DC;
  --color-border-primary: #eadee0;
  --color-border-medium: #D9D1C9;
  --color-border-dark: #C0B5AB;
  --color-border-dashed: #C0B5AB;

  /* State Colors */
  --color-state-success: var(--color-brand-accent); /* Sage Green for success */
  --color-state-success-text: #FFFFFF;
  --color-state-success-bg: #E8EEDF;
  --color-state-warning: #ffc107;     /* Keep Bootstrap yellow for warning */
  --color-state-warning-text: #333;
  --color-state-eliminated-text: var(--color-text-subtle);
  --color-state-eliminated-bg: #f5f5f5;
  --color-state-eliminated-help-bg: #f2f2f2;
  --color-state-eliminated-help-text: #888;

  /* Font Sizes */
  --font-size-post-game-title: 1.2rem;
}


/* --- CORE APP LAYOUT --- */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--color-bg-body);
  font-family: var(--font-family-body);
}

.main-app-shell {
  width: 100%;
  height: 100vh; /* Use vh for full viewport height */
  max-height: 100vh; /* Prevent resizing from pushing content out */
  background: var(--color-bg-shell);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent the shell itself from scrolling */
}

@media (min-width: 600px) {
  body {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .main-app-shell {
    width: 420px;
    height: 85vh; /* Adjust height on desktop */
    max-height: 900px;
    margin: 0 auto;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    border: 1px solid var(--color-border-light);
  }
}

/* --- HEADER --- */
.app-header {
  border-bottom: 1px solid var(--color-border-primary);
}
.app-header .brand-title {
  font-family: var(--font-family-title);
  color: var(--color-brand-primary);
  font-size: 2.5rem; /* Increased size for the new font */
  font-weight: normal; /* Grand Hotel doesn't need bold */
  line-height: 1;
}
.app-header .brand-title .brand-dotcom {
  font-family: var(--font-family-body);
  font-size: 0.32em;
  font-weight: 500;
  color: var(--color-brand-primary);
  margin-left: 0.2em;
  letter-spacing: 0.01em;
  vertical-align: super;
  opacity: 0.85;
  font-style: italic;
}
.app-header .brand-subtitle {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  margin-top: -2px; /* Adjusted for new title font */
  padding-left: 4.5em; /* Adjusted for new title font */
}
.app-header .brand-title .logo {
    height: 1em; /* Adjusted for new title font */
    vertical-align: baseline;
    margin-right: 0.3em;
}
.header-actions .btn {
  color: var(--color-text-muted);
  padding: 0.25rem 0.5rem;
}
.header-actions .btn:hover {
  color: var(--color-brand-primary);
}

/* --- FOOTER --- */
.app-footer {
  background: none;
  font-size: 0.65em;
  color: #aaa; /* Kept as specific gray for subtlety */
  font-family: var(--font-family-body);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* --- MAIN CONTENT AREA --- */
.main-content {
    overflow-y: auto;
}

/* --- TOAST NOTIFICATIONS --- */
#toast-container {
    z-index: 9999;
}


/* --- GAME PAGE STYLES (kitsniff_game.html) --- */
.hint-bar {
  background-color: var(--color-bg-shell);
  border-bottom: 1px solid var(--color-border-medium);
  position: relative;
  min-height: 80px; /* Set a minimum height */
  display: flex; /* Make the bar itself a flex container */
  align-items: center; /* Vertically center all direct children */
}
.hint-bar .hint-display {
  font-family: var(--font-family-body);
  font-size: 2rem;
  font-weight: normal;
  letter-spacing: 0.05em;
  color: var(--color-brand-primary);
  vertical-align: middle;
}
.hint-bar .hint-controls {
    min-width: 90px;
}
.hint-bar .hint-unlock-status {
    font-size: 0.65rem;
    line-height: 1;
    margin-top: 2px;
}
.hint-bar .hint-button-icon {
    font-size: 1em;
}
.guess-input-area {
  background-color: var(--color-bg-shell);
}

.visual-feedback-panel {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.feedback-category {
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--color-bg-white);
}
.feedback-category h6 {
  margin: 0 0 6px;
  font-size: 0.65rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  color: #5a5a5a;
  letter-spacing: 0.5px;
}
.feedback-items-container {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
}
.feedback-item {
  padding: 2px 6px;
  font-size: 0.75rem;
  border-radius: 12px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
}
.feedback-item.state-available { background: var(--color-bg-medium); color: var(--color-text-default); }
.feedback-item.state-eliminated { background: var(--color-state-eliminated-bg); color: var(--color-state-eliminated-text); text-decoration: line-through; }
.feedback-item.state-partial { background: var(--color-state-warning); color: var(--color-state-warning-text); font-weight: 600; }
.feedback-item.state-confirmed { background: var(--color-state-success); color: var(--color-text-on-dark); font-weight: 600; }
.feedback-subcategory {
  border-top: 1px dashed var(--color-border-dashed);
  margin-top: 8px;
  padding-top: 8px;
}

.guess-history-wrapper {
  padding: 0 0.5rem;
}
.guess-entry {
  padding: 0.5rem;
  border-bottom: 1px solid var(--color-border-primary);
}
.guess-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.guess-num {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-state-eliminated-text);
}
.guess-name {
  font-weight: 600;
}
.guess-feedback-pills {
  display: flex;
  gap: 5px;
  justify-content: space-around;
}
.guess-feedback-pills .pill {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
  flex-grow: 1;
  text-align: center;
}
.subtype-pill {
  font-weight: normal;
  color: #888;
  font-size: 0.95em;
}

/* Post-game styles */
.post-game-answer-label {
    font-size: 0.9rem;
    font-weight: 600;
}
.post-game-answer {
    font-family: var(--font-family-title);
    font-size: 3rem;
    color: var(--color-brand-primary);
}
.unlock-notifications {
    background-color: var(--color-bg-light);
}
.unlock-notifications-title {
    font-family: var(--font-family-body);
    font-size: var(--font-size-post-game-title);
    color: var(--color-brand-primary);
}
.chef-insight-card h6 {
    font-family: var(--font-family-body);
    font-size: var(--font-size-post-game-title);
}
.chef-insight-card {
    background-color: var(--color-bg-light);
    border-color: var(--color-border-dark);
}
.share-summary {
  background-color: var(--color-bg-dark);
}
.share-summary-text {
    white-space: pre-wrap;
    word-break: break-all;
}
.leaderboard {
  background-color: var(--color-bg-white);
}
.leaderboard h6 {
    font-family: var(--font-family-body);
    font-size: var(--font-size-post-game-title);
}
.modal-history-body {
    background-color: var(--color-bg-shell);
}
.modal-title {
    font-family: var(--font-family-title);
    font-size: 2.2rem;
}


/* --- STATS PAGE STYLES (stats.html & partials) --- */
.sticky-tabs {
    top: -1px;
    z-index: 100;
}
.tab-navigation-wrapper {
    background-color: var(--color-bg-shell) !important;
}
.nav-tabs .nav-link {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    font-weight: 600;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: var(--color-brand-primary);
    background-color: transparent;
    border-color: var(--color-brand-primary);
    font-weight: 700;
}

/* REPLACE the .highlighted-recipe rule with these two new rules */
.highlighted-item {
    transition: background-color 0.5s ease-in-out;
    background-color: var(--color-bg-highlight) !important;
    border-radius: 8px;
    /* This makes sure the achievement badge itself gets the highlight */
    overflow: hidden; 
}

/* Specificity for recipe list items */
.list-group-item.highlighted-item {
    border-radius: 8px !important;
}

/* Profile Tab */
.profile-title-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.title-line {
    flex-grow: 1;
    height: 1px;
    background-color: #e0e0e0;
}
.title-text {
    text-align: center;
    padding: 0 1rem;
    line-height: 1.2;
    font-family: var(--font-family-title);
    font-size: 1.4rem;
    font-weight: 300;
}
/* --- Culinary Honours Styles --- */
.culinary-honours {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-subtle);
    margin-top: 4px;
    font-family: var(--font-family-body);
}
.culinary-honours .honours-separator {
    margin: 0 0.5em;
    color: var(--color-border-medium);
}
.key-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
}
.key-stat-value .percent-sign {
    font-size: 0.8em;
    color: var(--color-text-subtle);
}
.key-stat-title {
    font-size: 0.65rem;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}
.guess-distribution-chart {
    font-size: 0.7rem;
}
.dist-row {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
}
.dist-label {
    width: 25px;
    text-align: right;
    margin-right: 8px;
    font-weight: 700;
    color: var(--color-text-subtle);
}
.dist-bar-wrapper {
    flex-grow: 1;
    background-color: var(--color-bg-medium);
    border-radius: 4px;
}
.dist-bar {
    background-color: var(--color-text-default);
    color: white;
    padding: 1px 4px;
    border-radius: 4px;
    text-align: right;
    white-space: nowrap;
    min-height: 20px;
    transition: width 0.5s ease-in-out;
}
/* Condensed Guess Distribution Chart */
.guess-distribution-chart.condensed .dist-row {
    margin-bottom: 0;        /* Remove extra space between rows */
    min-height: 18px;        /* Reduce row height */
    padding: 0 0 2px 0;      /* Less padding */
}
.guess-distribution-chart.condensed .dist-label {
    font-size: 0.65rem;      /* Smaller label */
    margin-right: 4px;       /* Less space */
    width: 18px;             /* Narrower label */
}
.guess-distribution-chart.condensed .dist-bar-wrapper {
    min-height: 14px;        /* Reduce bar wrapper height */
}
.guess-distribution-chart.condensed .dist-bar {
    min-height: 14px;        /* Reduce bar height */
    font-size: 0.65rem;      /* Smaller text */
    padding: 0 4px;          /* Less padding */
}
.milestone-progress {
    height: 10px;
}
.milestone-progress .progress-bar-brand {
    background-color: var(--color-brand-primary);
}
/* --- Connoisseur Chart Styles --- */
.connoisseur-chart .chart-bar-container {
    position: relative;
    height: 12px;
    background-color: var(--color-bg-medium);
    border-radius: 6px;
    width: 100%;
}
.connoisseur-chart .chart-bar-user {
    position: absolute;
    height: 100%;
    background-color: var(--color-brand-primary);
    border-radius: 6px;
    transition: width 0.5s ease-in-out;
}
.connoisseur-chart .chart-marker-global {
    position: absolute;
    height: 100%;
    width: 3px;
    background-color: var(--color-text-default);
    border-radius: 2px;
    transform: translateX(-50%);
    cursor: pointer;
}
.connoisseur-chart .chart-marker-global-legend {
    display: inline-block;
    width: 3px;
    height: 1em;
    background-color: var(--color-text-default);
    border-radius: 2px;
    vertical-align: middle;
}

/* Pantry Tab */
.collection-progress .progress {
    height: 6px;
}
.collection-progress .progress-bar-pantry {
    background-color: var(--color-brand-primary);
}
.collection-progress .progress-bar-recipes {
    background-color: var(--color-state-success);
}
.pantry-item-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    font-family: var(--font-family-title);
    font-size: 1rem;
    min-height: 60px;
    white-space: normal;
    line-height: 1.2;
}
.pantry-item-btn.collected {
    border: 1px solid var(--color-state-success);
    background-color: var(--color-state-success-bg);
    color: var(--color-text-default);
    font-weight: 450;
    font-size:1.25rem;
    cursor: pointer;
}
.pantry-item-btn.not-collected {
    border: 1px solid #e0e0e0;
    background-color: var(--color-bg-light);
    cursor: not-allowed;
}
.pantry-item-locked {
    font-size: 1.5rem;
    color: var(--color-state-eliminated-text);
}
#showAnswerCardBtn {
    font-size: 2.8rem;  /* pick the size you want */
}

/* --- PROFILE ACCORDION STYLES --- */
#profileAccordion .accordion-button {
    font-family: var(--font-family-title);
    font-size: 1.5rem;
    font-weight: normal;
    padding: 0.75rem 1rem;
    color: var(--color-text-default);
}

#profileAccordion .accordion-button:not(.collapsed) {
    color: var(--color-brand-primary);
    background-color: var(--color-bg-light);
}
/* Standalone brand color for progress bars */
.progress-bar-brand {
    background-color: var(--color-brand-primary);
}

/* Recipes Tab */
.recipe-title {
    font-family: var(--font-family-title);
    font-size: 1.25rem;
    font-weight: 500;
}
.unlocked-recipe {
    background-color: var(--color-state-success-bg);
    border-color: var(--color-border-medium) !important;
}
.unlocked-recipe-date {
    font-size: 0.75rem;
}
.recipe-requirements, .recipe-description {
    font-size: 0.75rem;
    line-height: 0.4; /* Add or adjust this line */
}

/* --- COMMUNITY TAB --- */
.news-feed-container {
  max-height: 250px; /* Adjust height as needed */
  overflow-y: auto;
}

/* --- Progress Ring Styles --- */
.progress-ring {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto;
}
.progress-ring__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.progress-ring__circle-bg {
    fill: none;
    stroke: var(--color-bg-medium);
    stroke-width: 6;
}
.progress-ring__circle {
    fill: none;
    stroke: var(--color-brand-primary);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 251.327; /* 2 * PI * 54 */
    stroke-dashoffset: 251.327;
    transition: stroke-dashoffset 1s ease-out;
}
.progress-ring__text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.progress-ring__value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}
.progress-ring__label {
    font-size: 0.7rem;
    color: var(--color-text-subtle);
}

/* --- HELP MODAL --- */
.help-modal-logo {
    height: 1.2em;
    vertical-align: text-bottom;
    margin-right: 0.4em;
}
.help-modal-eliminated-badge {
    background: var(--color-state-eliminated-help-bg);
    color: var(--color-state-eliminated-help-text);
    text-decoration: line-through;
    font-weight: 400;
}

/* --- ANIMATIONS --- */
@keyframes state-change-anim {
  0% { transform: scale(1.0); }
  50% { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.0); opacity: 1; }
}
.is-changing {
  animation: state-change-anim 0.4s ease-in-out;
}

@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-8px); }
  80% { transform: translateX(8px); }
  100% { transform: translateX(0); }
}
.shake {
  animation: shake 0.4s;
}

/* --- ENHANCED FOURTH WALL BREAK ANIMATIONS --- */

/* Main screen shake - more violent than before */
@keyframes fourth-wall-shake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-10px, 5px) rotate(-1deg); }
  20% { transform: translate(10px, -5px) rotate(1deg); }
  30% { transform: translate(-8px, -8px) rotate(-0.5deg); }
  40% { transform: translate(8px, 8px) rotate(0.5deg); }
  50% { transform: translate(-12px, 2px) rotate(-1deg); }
  60% { transform: translate(12px, -2px) rotate(1deg); }
  70% { transform: translate(-6px, -6px) rotate(-0.5deg); }
  80% { transform: translate(6px, 6px) rotate(0.5deg); }
  90% { transform: translate(-3px, 3px) rotate(-0.25deg); }
}

/* Color inversion flash */
@keyframes reality-invert {
  0%, 100% { filter: invert(0) hue-rotate(0deg); }
  25% { filter: invert(1) hue-rotate(180deg); }
  50% { filter: invert(0.8) hue-rotate(120deg); }
  75% { filter: invert(1) hue-rotate(240deg); }
}

/* Scanline sweep effect */
@keyframes scanline-sweep {
  0% { top: -100%; }
  100% { top: 100%; }
}

/* Red/blue chromatic aberration flash */
@keyframes chromatic-aberration {
  0%, 100% { 
    text-shadow: none;
    filter: none;
  }
  25% { 
    text-shadow: -3px 0 red, 3px 0 blue;
    filter: blur(0.5px);
  }
  50% { 
    text-shadow: 3px 0 red, -3px 0 cyan;
    filter: blur(1px);
  }
  75% { 
    text-shadow: -2px 0 magenta, 2px 0 lime;
    filter: blur(0.5px);
  }
}

/* Apply the main shake effect */
.fourth-wall-effect {
  animation: fourth-wall-shake 0.6s ease-in-out;
}

/* Apply color inversion to the whole shell */
.fourth-wall-invert {
  animation: reality-invert 1.2s ease-in-out;
}

/* Apply chromatic aberration to text content */
.fourth-wall-glitch-text {
  animation: chromatic-aberration 0.8s ease-in-out;
}

/* Scanline overlay */
.scanline-overlay {
  position: fixed;
  top: -100%;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 0, 0, 0.1) 48%,
    rgba(0, 255, 255, 0.1) 50%,
    rgba(255, 0, 0, 0.1) 52%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 9999;
  animation: scanline-sweep 0.8s ease-in-out;
  box-shadow: 0 0 100px 50px rgba(255, 255, 255, 0.1);
}

/* --- POISON EFFECT ANIMATIONS --- */

/* Violent screen shake for poison */
@keyframes poison-screen-shake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-8px, 6px) rotate(-1deg); }
  20% { transform: translate(8px, -6px) rotate(1deg); }
  30% { transform: translate(-10px, -8px) rotate(-1.5deg); }
  40% { transform: translate(10px, 8px) rotate(1.5deg); }
  50% { transform: translate(-12px, 4px) rotate(-1deg); }
  60% { transform: translate(12px, -4px) rotate(1deg); }
  70% { transform: translate(-6px, -10px) rotate(-0.5deg); }
  80% { transform: translate(6px, 10px) rotate(0.5deg); }
  90% { transform: translate(-4px, 6px) rotate(-0.5deg); }
}

/* Green/purple poison color distortion */
@keyframes poison-color-distortion {
  0%, 100% { 
    filter: none;
  }
  25% { 
    filter: hue-rotate(90deg) saturate(1.5);
  }
  50% { 
    filter: hue-rotate(270deg) saturate(2);
  }
  75% { 
    filter: hue-rotate(90deg) saturate(1.5);
  }
}

/* Apply poison shake */
.poison-screen-shake {
  animation: poison-screen-shake 1s ease-in-out;
}

/* Apply poison color distortion */
.poison-color-distortion {
  animation: poison-color-distortion 1s ease-in-out;
}

/* --- MISC & UTILITIES --- */
.btn-pale-brown {
    background-color: var(--color-brand-secondary);
    color: var(--color-text-on-brand-secondary) !important;
    border: none;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(90,62,27,0.08);
    transition: background 0.2s;
}
.btn-pale-brown:hover, .btn-pale-brown:focus {
    background-color: var(--color-brand-secondary-hover);
    color: var(--color-text-on-brand-secondary-hover) !important;
}

/* New style for profile insights emoji/text layout */
.insight-item-content {
    display: flex;
    align-items: center; /* Vertically align items */
    gap: 10px; /* Space between emoji and text */
}

.insight-item-emoji {
    font-size: 2.5rem; /* Make emoji larger */
    line-height: 1; /* Adjust line-height for better vertical alignment */
}

.insight-item-text {
    text-align: left; /* Align text to the left */
    flex-grow: 1; /* Allow text to take up remaining space */
}
/* --- NEW: SHARE IMAGE STYLES --- */
#share-image-container {
    position: absolute; 
    left: -9999px; 
    top: auto; 
    width: 450px; 
    padding: 20px;
    background-color: var(--color-bg-shell);
    color: var(--color-text-default);
    font-family: var(--font-family-body);
    border: 1px solid var(--color-border-medium);
}
.share-image-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.share-image-logo {
    height: 2.5rem;
    margin-right: 0.5rem;
}
.share-image-brand-title {
    font-family: var(--font-family-title);
    color: var(--color-brand-primary);
    font-size: 2.5rem;
    line-height: 1;
}
.share-image-brand-dotcom {
    font-family: var(--font-family-body);
    font-size: 0.32em;
    font-weight: 500;
    color: var(--color-brand-primary);
    margin-left: 0.2em;
    letter-spacing: 0.01em;
    vertical-align: super;
    opacity: 0.85;
    font-style: italic;
}
.share-image-main-content {
    text-align: center;
}
.share-image-puzzle-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}
.share-image-result-text {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}
.share-image-recipe-unlocks {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}
.share-image-divider {
    height: 1px;
    background-color: var(--color-border-medium);
    margin: 1.5rem 2rem;
}
.share-image-profile-title-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.share-image-title-line {
    flex-grow: 1;
    height: 1px;
    background-color: var(--color-border-light);
}
.share-image-title-text {
    padding: 0 1rem;
    line-height: 1.2;
    font-family: var(--font-family-title);
    font-size: 1.4rem;
}
.share-image-culinary-honours {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-subtle);
    margin-top: 4px;
    font-family: var(--font-family-body);
}
.share-image-honours-separator {
    margin: 0 0.5em;
    color: var(--color-border-medium);
}
.share-image-progress-rings {
    display: flex;
    justify-content: space-around;
    margin-bottom: 1.5rem;
}
.share-image-ring-item {
    text-align: center;
}
#share-image-container .progress-ring {
    width: 110px;
    height: 110px;
}
#share-image-container .progress-ring__circle {
    stroke-width: 8;
    transition: none !important; /* Disable animation for instant capture */
}
#share-image-container .progress-ring__circle-bg {
    stroke-width: 8;
}
#share-image-container .progress-ring__text {
    justify-content: center;
}
#share-image-container .progress-ring__label {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1;
}
.share-image-ring-label {
    font-size: 0.7rem;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-top: 0.5rem;
}
.share-image-signature-guesses {
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    padding: 0.75rem;
    margin-top: 1rem;
}
.share-image-section-title {
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}
.share-image-guess-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}
.share-image-guess-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--color-border-light);
}
.share-image-guess-list li:last-child {
    border-bottom: none;
}
.share-image-guess-count {
    font-weight: 700;
    color: var(--color-brand-primary);
}

/* --- NEW: Style for smaller hint emojis in stats --- */
.hint-emoji-small {
    font-size: 0.8em; /* Adjust as needed */
    vertical-align: middle; /* Helps with alignment */
}

/* --- NEW: Provenance Modal Styles --- */
.provenance-section {
    font-size: 0.9rem;
}

.provenance-location {
    font-size: 0.75rem;
    font-weight: 500;
}

/* --- Ingredient Card Enhancements --- */
.ingredient-card {
  /* MODIFIED: Changed gradient from neutral to subtle tomato red tones */
  background: linear-gradient(135deg, #fff5f5 0%, #fef8f7 100%);
  border: none;
  border-radius: 16px;
  box-shadow: 
    0 4px 6px rgba(0,0,0,0.07),
    0 10px 20px rgba(0,0,0,0.08),
    0 0 1px rgba(217, 83, 79, 0.3);
  position: relative;
  overflow: visible;
}

/* Subtle border gradient - MODIFIED to use tomato red accent */
.ingredient-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(135deg, 
    rgba(217, 83, 79, 0.3) 0%, 
    rgba(217, 83, 79, 0.15) 50%, 
    rgba(138, 154, 91, 0.2) 100%);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Subtle texture overlay */
.ingredient-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  background-image: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.03) 2px,
      rgba(255,255,255,0.03) 4px
    );
  pointer-events: none;
  z-index: 0;
}

/* Decorative dividers */
.ingredient-card-divider {
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(212, 175, 55, 0.3) 20%,
    rgba(217, 83, 79, 0.2) 50%,
    rgba(138, 154, 91, 0.3) 80%,
    transparent
  );
  margin: 1.5rem 0;
  position: relative;
}

.ingredient-card-divider::before {
  content: '✦';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-bg-shell);
  padding: 0 0.5rem;
  color: rgba(212, 175, 55, 0.5);
  font-size: 0.8rem;
}

/* Embossed background ID */
.ingredient-card-id-emboss {
  position: absolute;
  bottom: -20px;
  right: -1px;
  font-size: 8rem;
  font-weight: 900;
  color: var(--color-border-light);
  opacity: 0.65;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  font-family: var(--font-family-title);
  z-index: 0;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.05);
  background: linear-gradient(135deg, transparent 0%, var(--color-border-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Ensure modal content sits above embossed ID and corner accents */
.ingredient-card .modal-header,
.ingredient-card .modal-body {
  position: relative;
  z-index: 3;
}

.ingredient-card .modal-header {
  align-items: flex-start;
  border: none;
  padding-bottom: 0;
}

.ingredient-card .modal-title {
  color: var(--color-brand-primary);
  line-height: 1.1;
  font-size: 2.8rem;
}

.ingredient-card .ingredient-id-display {
  display: none;
}

.ingredient-card-subtitle {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 0.3rem !important;
}

/* --- POISON CARD VARIANT --- */
.ingredient-card.poison-card {
  background: linear-gradient(135deg, #f5fff5 0%, #fef9f7 100%);
  border: none;
  box-shadow: 
    0 4px 6px rgba(0,0,0,0.07),
    0 10px 20px rgba(0,0,0,0.08),
    0 0 1px rgba(220, 53, 69, 0.4);
}

/* Poison card border gradient */
.ingredient-card.poison-card::before {
  background: linear-gradient(135deg, 
    rgba(220, 53, 69, 0.4) 0%, 
    rgba(220, 53, 69, 0.2) 50%, 
    rgba(138, 154, 91, 0.2) 100%);
}

/* Poison card title */
.ingredient-card.poison-card .modal-title {
  color: #dc3545;
  font-family: var(--font-family-title);
  font-size: 2rem;
}

/* Poison card embossed ID shows skull */
.ingredient-card.poison-card .ingredient-card-id-emboss {
  font-size: 12rem;
  bottom: -40px;
  right: -20px;
  opacity: 0.4;
  color: #dc3545;
}

/* --- CULINARY MAP TAB --- */
.discovery-log .accordion-button {
    font-family: var(--font-family-title);
    font-size: 1.5rem;
    color: var(--color-text-default);
}

.discovery-log .accordion-button:not(.collapsed) {
    background-color: var(--color-bg-light);
    color: var(--color-brand-primary);
    box-shadow: none;
}

.discovery-log .accordion-body {
    background-color: var(--color-bg-shell);
}

.discovery-log .list-group-item {
    background-color: transparent;
    border-color: var(--color-border-light);
}

.discovery-log .list-group-item-action {
    cursor: pointer;
}

/* Standalone brand color for progress bars */
.progress-bar-brand {
    background-color: var(--color-brand-primary);
}
/* Accent color (sage green) for progress bars */
.progress-bar-accent {
    background-color: var(--color-brand-accent);
}

/* --- Achievements --- */
.achievement-badge {
    border: 1px solid var(--color-border-light);
    transition: all 0.2s ease-in-out;
}
.achievement-badge.locked {
    background-color: var(--color-bg-light);
    filter: grayscale(90%);
    opacity: 0.7;
}
.achievement-badge .achievement-emoji {
    font-size: 2.5rem;
    line-height: 1;
}
.achievement-badge .achievement-name {
    font-weight: 700;
    color: var(--color-text-default);
}
.achievement-badge.locked .achievement-name {
    color: var(--color-text-muted);
}
.achievement-badge .achievement-desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
.achievement-badge .achievement-rarity {
    font-size: 0.65rem;
    color: var(--color-text-subtle);
    font-style: italic;
    margin-top: 4px;
    opacity: 0.8;
}
/* --- OPTION 1: Subtle Sage Highlight --- */
.achievement-badge:not(.locked) {
    background-color: var(--color-state-success-bg);
    border-color: #d8e4cb; /* A slightly darker shade of the success background */
}
.accordion-button {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.continent-progress-container {
    width: 100px;
    text-align: right;
    flex-shrink: 0;
    margin-right: 1rem;
}

.accordion-button.collapsed .continent-progress-container {
    margin-right: 0;
}

.progress-label {
    font-size: 0.7rem;
    line-height: 1;
    display: block;
    margin-top: 2px;
}


/* --- NEW: Nutrition Tag Styles --- */
.nutrition-tag {
    font-size: 0.75rem;
    font-weight: 500;
    /* You could give it a unique color to differentiate it */
    background-color: #E0F2F1 !important; /* A light teal, for example */
    border-color: #B2DFDB !important;
}

/* --- Pantry Nutrition Filters --- */
#nutritionFilterContainer {
    overflow-x: auto;  /* Creates a horizontal scrollbar only when needed */
    padding-bottom: 8px; /* Adds a little space so the scrollbar doesn't feel cramped */
    -webkit-overflow-scrolling: touch; /* Ensures smooth, native-like scrolling on iOS */
}
#nutritionFilterContainer::-webkit-scrollbar {
    height: 4px;
    background-color: transparent; /* Make the track invisible */
}
#nutritionFilterContainer::-webkit-scrollbar-thumb {
    background-color: var(--color-border-medium); /* Use your theme's medium border color */
    border-radius: 4px;
}

.nutrition-filter-pill {
    transition: all 0.2s ease-in-out;
    font-size: 0.85rem;
    padding: 0.15rem 0.4rem;
    line-height: 1.3;
    white-space: nowrap;
    
    background-color: var(--color-bg-light);
    border-color: var(--color-border-light);
    color: var(--color-text-muted);
}

/* NEW HOVER RULE: This fixes the "sticky hover" bug on touchscreens */
/* It applies a subtle hover effect only to pills that are not currently active */
.nutrition-filter-pill:not(.active):hover {
    background-color: var(--color-bg-medium); /* Use your theme's medium dough color */
    border-color: var(--color-border-medium);
    color: var(--color-text-default);
}

.nutrition-filter-pill.active {
    background-color: var(--color-brand-accent) !important; /* Sage Green */
    color: var(--color-text-on-dark) !important;           /* White text */
    border-color: var(--color-brand-accent) !important;
}

.nutrition-filter-pill.inactive {
    opacity: 0.5;
    background-color: var(--color-bg-light);
    filter: grayscale(50%); /* A softer way to show inactivity */
}

/* --- FOOTER --- */
.app-footer {
  background: none;
  font-size: 0.65em;
  color: #aaa; /* Kept as specific gray for subtlety */
  font-family: var(--font-family-body);
  font-weight: 400;
  letter-spacing: 0.01em;
}
.app-footer .footer-links a {
  transition: color 0.2s ease;
}
.app-footer .footer-links a:hover {
  color: var(--color-brand-primary) !important;
}

/* ========================================
   SUPERFOOD "SHINY" CARD STYLES
   ======================================== */

.ingredient-card.superfood-card {
    position: relative;
    background: linear-gradient(135deg, #fff9e6 0%, #fffef9 100%);
    border: 3px solid transparent;
    background-clip: padding-box;
}

/* Animated holographic border effect */
.ingredient-card.superfood-card::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(
        45deg,
        #ff6b6b 0%,
        #feca57 15%,
        #48dbfb 30%,
        #1dd1a1 45%,
        #ff6348 60%,
        #feca57 75%,
        #48dbfb 90%,
        #ff6b6b 100%
    );
    background-size: 400% 400%;
    border-radius: 12px;
    z-index: -1;
    animation: holographic-shine 8s ease infinite;
    filter: blur(1px);
}

@keyframes holographic-shine {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Subtle inner glow */
.ingredient-card.superfood-card .modal-header {
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.1) 0%, transparent 100%);
}

/* Superfood badge */
.superfood-badge {
    position: absolute;
    top: 12px;
    right: 52px; /* Position left of the close button */
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
    color: #8b6914;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
    animation: badge-pulse 2s ease-in-out infinite;
    z-index: 10;
}

@keyframes badge-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(255, 215, 0, 0.6);
    }
}

/* Star sparkle effect */
.superfood-badge::before {
    content: '✨';
    margin-right: 4px;
}

.superfood-badge::after {
    content: '✨';
    margin-left: 4px;
}

/* Enhanced title styling for superfoods */
.ingredient-card.superfood-card .modal-title {
    background: linear-gradient(135deg, #d4af37 0%, #f4e7c3 50%, #d4af37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(212, 175, 55, 0.2);
}

/* Pantry button shiny effect */
.pantry-item-btn.collected.superfood-item {
    position: relative;
    background: linear-gradient(135deg, #fff9e6 0%, #fffef9 100%);
    border: 2px solid #ffd700;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.pantry-item-btn.collected.superfood-item::after {
    content: '✨';
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.8rem;
    opacity: 0.8;
}