/* IMPORT FONTS:
   'Bangers' for loud headers
   'Comic Neue' for readable text
   (Already imported in index.html, but keeping for reference)
*/

/* --- BASE TYPOGRAPHY --- */
body {
  font-family: var(--font-body);
  color: var(--ink-black);
  background-color: var(--comic-cream); /* Page background */
}

h1, h2, h3, h4, .comic-title {
  font-family: var(--font-header);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  line-height: 1.1;
}

.comic-title {
    text-shadow: 2px 2px 0px var(--color-ink);
    text-align: center;
    font-size: 2.8rem;
    color: var(--color-magenta);
    -webkit-text-stroke: 1px var(--color-ink);
}

/* --- UTILITY: TEXTURE --- */
/* Creates that classic "Ben-Day Dots" comic background */
.halftone-bg, .bg-dots {
  background-image: radial-gradient(var(--ink-black) 15%, transparent 16%);
  background-size: 10px 10px;
  opacity: 1;
  /* Note: Apply background-color in HTML or specific class to sit under dots */
  background-color: transparent;
}

/* --- COMPONENT: PANELS (The main containers) --- */
.comic-panel, .wobbly-box {
  border: var(--border-thick);
  border-radius: 4px; /* Slight rounding, not too much - replacing wobbly border */
  box-shadow: var(--shadow-md);
  padding: 20px; /* Note: wobbly-box had no padding by default, consumers might need adjustment if they relied on that */
  background-color: var(--comic-white);
  position: relative;
  margin-bottom: 2rem;
  transition: transform 0.1s;
}

/* Make panels feel tactile */
.comic-panel:hover, .wobbly-box:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--ink-black);
}

/* Header Box Adapter */
.comic-header-box {
    background: var(--comic-yellow);
    padding: 1.5rem 1rem;
    position: relative;
    margin-bottom: 1.5rem;
    border: var(--border-thick);
    border-radius: 4px;
    box-shadow: var(--shadow-md);
}

/* Header Color Variants */
.comic-header-yellow {
    background: var(--comic-yellow);
}
.comic-header-yellow .comic-title {
    color: var(--comic-red); /* Magenta/Red */
}

.comic-header-blue {
    background: var(--comic-blue);
}
.comic-header-blue .comic-title {
    color: var(--comic-white);
}

.comic-header-purple {
    background: var(--comic-purple);
}
.comic-header-purple .comic-title {
    color: var(--comic-white);
}

.comic-header-red {
    background: var(--comic-red);
}
.comic-header-red .comic-title {
    color: var(--comic-white);
}

.comic-header-teal {
    background: var(--comic-teal-bg);
}
.comic-header-teal .comic-title {
    color: var(--comic-white);
}

.comic-header-tan {
    background-color: var(--comic-tan);
    background-image: radial-gradient(var(--ink-black) 15%, transparent 16%);
    background-size: 10px 10px;
}
.comic-header-tan .comic-title {
    color: var(--comic-yellow);
}

.issue-box {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: white;
    border: 2px solid var(--color-ink);
    padding: 0.2rem 0.5rem;
    font-family: var(--font-body);
    font-weight: bold;
    font-size: 0.8rem;
    transform: rotate(-2deg);
}


/* --- COMPONENT: STICKER TITLES --- */
.sticker-label, .section-label {
  display: inline-block;
  background-color: var(--comic-white);
  border: var(--border-thick);
  padding: 5px 15px;
  font-family: var(--font-header);
  font-size: 1.2rem;
  color: var(--ink-black);

  /* The "Slapped On" Look */
  position: absolute;
  top: -15px;
  left: -10px;
  transform: rotate(-3deg);
  box-shadow: var(--shadow-sm);
  z-index: 10;
  margin-bottom: 0; /* Override old margin */
}

/* --- COMPONENT: INPUTS & DATA --- */
.comic-input-group {
  margin-bottom: 10px;
}

.comic-label-box {
  background-color: var(--comic-yellow);
  border: var(--border-thick);
  border-bottom: none; /* Merge with input below */
  padding: 4px 10px;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  display: block;
}

.comic-input-box {
  background-color: var(--comic-cream);
  border: var(--border-thick);
  padding: 10px;
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.1rem;
  box-sizing: border-box; /* Fix padding issues */
}

/* --- COMPONENT: ACTION BUTTONS --- */
.comic-btn {
  background-color: var(--comic-red);
  color: white;
  border: var(--border-thick);
  padding: 10px 25px;
  font-family: var(--font-header);
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: all 0.1s;
  text-transform: uppercase;
  border-radius: 4px; /* Reset wobbly border */
}

.comic-btn:active {
  transform: translate(4px, 4px); /* Pushes down */
  box-shadow: 0px 0px 0px var(--ink-black);
}

.comic-btn.secondary {
  background-color: var(--comic-blue);
}

.comic-btn.minus {
    background-color: var(--comic-red);
    padding: 5px 10px; /* Adjust for smaller buttons */
}

.comic-btn.plus {
    background-color: var(--comic-green-bg);
    padding: 5px 10px;
}

/* --- COMPONENT: SPEECH BUBBLE --- */
.speech-bubble {
  position: relative;
  background: var(--comic-white);
  border: var(--border-thick);
  border-radius: 50%;
  padding: 20px;
  text-align: center;
  font-weight: bold;
}

/* The little triangle tail */
.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-top-color: var(--ink-black);
  border-bottom: 0;
  border-left: 0;
  margin-left: -7.5px;
  margin-bottom: -15px;
}

/* Maintain other existing classes needed for layout */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.portrait-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.comic-portrait {
    width: 100px;
    height: 100px;
    border: var(--border-thick);
    border-radius: 50%; /* Cleaner circle */
    background: linear-gradient(135deg, var(--comic-blue), var(--comic-red));
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.comic-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.health-controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    padding: 0.3rem;
    border: var(--border-thick);
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
}

/* Nav Bar Update */
.nav-bar {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    background: var(--comic-yellow);
    border: var(--border-thick);
    border-radius: 8px; /* Slightly rounded */
    display: flex;
    justify-content: space-around;
    padding: 0.5rem 0;
    z-index: 100;
    box-shadow: var(--shadow-md);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--color-ink);
    opacity: 0.7;
    transition: transform 0.2s;
}

.nav-item.active {
    opacity: 1;
    transform: scale(1.1) rotate(-2deg);
    color: var(--comic-red);
}

/* Navigation Icons */
.nav-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 4px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

.nav-icon.home { background-image: url('../assets/icons/icon_home.png'); }
.nav-icon.powers { background-image: url('../assets/icons/icon_abilities.png'); }
.nav-icon.dice { background-image: url('../assets/icons/icon_dice.png'); }
.nav-icon.settings { background-image: url('../assets/icons/icon_settings.png'); }
.nav-icon.powers-qualities { background-image: url('../assets/icons/icon_powers_qualities.png'); }

/* --- COMPONENT: MODAL --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Darker overlay */
    display: flex;
    justify-content: center;
    align-items: center; /* Center vertically */
    z-index: 2000; /* High z-index to sit on top of everything */
    backdrop-filter: blur(2px);
}

.modal-content {
    /* Styles are often handled by wobbly-box, but ensure positioning */
    position: relative;
    max-width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    margin: auto; /* Fallback centering */
}

/* Fix for Huge Dice Images */
.trait-die-icon, .trait-die-container img {
    max-width: 50px;
    max-height: 50px;
    width: auto;
    height: auto;
    display: block;
}

/* --- COMPONENT: TABS --- */
.comic-tab {
    background-color: var(--comic-cream);
    color: var(--ink-black);
    border: var(--border-thick);
    border-bottom: none;
    padding: 10px 20px;
    font-family: var(--font-header);
    font-size: 1.2rem;
    cursor: pointer;
    margin-right: 5px;
    border-radius: 4px 4px 0 0;
    opacity: 0.7;
    transition: all 0.2s;
}

.comic-tab:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.comic-tab.active {
    background-color: var(--comic-yellow);
    color: var(--comic-red);
    opacity: 1;
    font-weight: bold;
    transform: translateY(-4px);
    box-shadow: 0 -2px 0 var(--ink-black);
    z-index: 10;
}

.comic-tab.tab-qualities.active {
    background-color: var(--comic-purple);
    color: var(--comic-white);
}

.tabs-container {
    display: flex;
    justify-content: center;
    border-bottom: var(--border-thick);
    margin-bottom: 1rem;
}

.comic-btn.purple {
    background-color: var(--comic-purple);
}

.comic-btn.yellow {
    background-color: var(--comic-yellow);
    color: var(--comic-red);
}

/* --- COMPONENT: FORM DICE SELECTOR --- */
.dice-selector {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px;
    margin-bottom: 20px;
}

.form-die-option {
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s;
    border: 2px solid transparent;
    border-radius: 50%;
    padding: 5px;
}

.form-die-option:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

.form-die-option.selected {
    opacity: 1;
    border-color: var(--color-magenta);
    background-color: var(--comic-yellow);
    box-shadow: 0 0 10px var(--color-magenta);
    transform: scale(1.2);
}

.form-die-option img {
    display: block;
    /* Dimensions handled by .trait-die-icon */
}