/* ================================
   Mixed Tiles (letters + emojis)
   Two rows: top=4, bottom=3
   ================================ */

/* area holding both rows */
#tiles-panel {                 /* was #tiles-area */
  display: grid;
  gap: 8px;
  justify-content: center;
  margin: 10px auto 6px;
  max-width: 720px;
}

/* tiles container holding both rows */
.tiles-container {
  display: grid;
  gap: 8px;
  justify-content: center;
}

/* each row */
.tiles-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* semantic helpers (match your class names) */
.tiles-row--top { /* first 4 tiles */ }
.tiles-row--bottom { /* remaining 3 tiles */ }

/* optional compact tweak should reference #tiles-panel too */
@media (max-width: 420px) {
  #tiles-panel.compact .tile {   /* was #tiles-area.compact */
    --tile-w: 46px;
    --tile-h: 50px;
    --tile-font: 24px;
  }
}

/* --- Base tile (button or span) --- */
.tile {
  /* size knobs */
  --tile-w: 45px;
  --tile-h: 50px;
  --tile-font: 28px;

  /* day-theme fallbacks; you already set these on #play-page */
  --tile-bg: var(--initials-base, #e6e6ec);
  --tile-edge: var(--initials-edge, #c1c1d2);
  --tile-fg: #2d2a26;

  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--tile-w);
  height: var(--tile-h);
  padding: 0 6px;
  border-radius: 12px;
  border: 4px outset var(--tile-edge);
  background: var(--tile-bg);
  color: var(--tile-fg);
  font-weight: 800;
  font-size: var(--tile-font);
  line-height: 1;
  cursor: default;             /* becomes pointer when selection is wired */
  user-select: none;
  box-sizing: border-box;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

/* Hover (visual affordance only) - lower priority than selection */
.tile.is-selectable:hover:not(.is-selected) {
  transform: translateY(-1.25px);
}

.tile--letter {
  /* pulls per-day theme from #play-page via --initials-* */
  --tile-bg:   var(--initials-base, #dbcfb1);
  --tile-edge: var(--initials-edge, #d6c7a3);
  --tile-fg:   #fff;                 /* ← always white letters */
}

.tile--emoji {
  --tile-bg:   #e6e6ec;  /* base */
  --tile-edge: #c1c1d2;  /* edge */
  --tile-fg:   #333;
}

/* --- Selection states (toggled via callbacks) --- */
.tile.is-selectable { cursor: pointer; }

.tile.is-selected {
  outline: 2px solid var(--gold, #c7a650) !important;
  filter: brightness(1.15) !important;
  transform: translateY(-5px) !important;
}

/* mode-specific accents (select = green-ish, discard = red-ish) - highest priority */
.tile.is-selected.select {
  outline: 3px solid rgb(100, 200, 100) !important;  /* Green outline */
  box-shadow: 0 0 0 5px rgb(177, 255, 177), 0 6px 10px rgba(0,0,0,.12) !important;
  filter: brightness(1.2) !important;
}
.tile.is-selected.discard {
  outline: 3px solid rgb(220, 100, 100) !important;  /* Red outline */
  box-shadow: 0 0 0 5px rgb(254, 107, 107), 0 6px 10px rgba(0,0,0,.12) !important;
  filter: brightness(1.2) !important;
}

/* Force unselected appearance for all tiles without is-selected class */
.tile:not(.is-selected) {
  outline: none !important;
  filter: brightness(1) !important;
  box-shadow: none !important;
}

/* REMOVED: Nuclear CSS fix was too aggressive and broke hover/animation/selection for top-left tile.
   The callback-level nuclear fix (paint_selected in callback.py) is sufficient and more precise. */

/* Disabled / spent */
.tile.is-disabled { filter: grayscale(.35) brightness(.92); opacity: .6; cursor: not-allowed; }

/* === Easy knobs for mode buttons === */
:root {
  --mode-btn-h: 30px;         /* total button height */
  --mode-btn-min-w: 140px;    /* minimum width per button */
  --mode-btn-font: 14px;
  --mode-btn-pad-y: 0px;      /* vertical padding inside height (box-sizing) */
  --mode-btn-pad-x: 10px;     /* horizontal padding */
  --mode-btn-gap: 0px;        /* gap between the two buttons (kept 0 to “touch”) */
}

.mode-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mode-btn-gap);
  width: fit-content;                 /* <— replaces max-width */
  margin: 6px auto 10px;              /* <— increased bottom margin from 4px to 10px for hearts spacing */
  height: auto;
  align-items: stretch;
  justify-self: center;               /* in case it's placed inside a grid parent */
}

/* --- Buttons --- */
.mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;

  box-sizing: border-box;     /* height means total height */
  height: var(--mode-btn-h);
  min-width: var(--mode-btn-min-w);

  padding: var(--mode-btn-pad-y) var(--mode-btn-pad-x);
  font-size: var(--mode-btn-font);
  font-weight: 800;
  letter-spacing: .6px;

  border: 3px outset #a0a0a0;
  background: #838383;
  color: #fff;
  cursor: pointer;
  user-select: none;
}

/* pressed-in vs pressed-out look */
.mode-btn.is-active {
  border-style: inset;
  filter: brightness(0.75);
}
.mode-btn:not(.is-active) {
  border-style: outset;
}

/* hard edge where they meet */
.mode-btn--left  { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mode-btn--right { border-top-left-radius: 0;  border-bottom-left-radius: 0;  }

/* === Daily theme colors for mode buttons === */
.mode-btn.mode-monday    { background: #b9ab73; border-color: #978c63; color: #fff; }
.mode-btn.mode-tuesday   { background: #b089ab; border-color: #8e6d89; color: #fff; }
.mode-btn.mode-wednesday { background: #cc9970; border-color: #a97e5c; color: #fff; }
.mode-btn.mode-thursday  { background: #9eb5c0; border-color: #839ca9; color: #fff; }
.mode-btn.mode-friday    { background: #ada387; border-color: #937b6a; color: #fff; }
.mode-btn.mode-saturday  { background: #c87e7e; border-color: #a05e5e; color: #fff; }
.mode-btn.mode-sunday    { background: #87a985; border-color: #6f8b6e; color: #fff; }

/* Themed colors maintain when active (pressed-in) */
.mode-btn.mode-monday.is-active    { filter: brightness(0.75); }
.mode-btn.mode-tuesday.is-active   { filter: brightness(0.75); }
.mode-btn.mode-wednesday.is-active { filter: brightness(0.75); }
.mode-btn.mode-thursday.is-active  { filter: brightness(0.75); }
.mode-btn.mode-friday.is-active    { filter: brightness(0.75); }
.mode-btn.mode-saturday.is-active  { filter: brightness(0.75); }
.mode-btn.mode-sunday.is-active    { filter: brightness(0.75); }

/* Small screens: just override the variables */
@media (max-width: 420px) {
  :root {
    --mode-btn-h: 34px;
    --mode-btn-min-w: 96px;
    --mode-btn-font: 13px;
    --mode-btn-pad-y: 4px;
    --mode-btn-pad-x: 8px;
  }
}

/* --- Submit slot keeps the page from shifting --- */
#submit-slot {
  height: 58px;                 /* reserve vertical space - increased by 10px */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Button is always in the flow; we toggle visibility, not display */
.submit-btn {
  display: inline-block;
  margin: 6px auto 0;
  padding: 4px 14px;
  font-weight: 700;
  border-radius: 10px;
  border: 3px outset #838383;
  background: #a0a0a0;
  color: #fff;
  letter-spacing: .6px;
  font-size: 20px;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .1s ease, filter .12s ease;  /* removed opacity fade */
}

/* "Visible" state we apply via className */
.submit-btn.show {
  opacity: 1;
  pointer-events: auto;
}

/* === Daily theme colors for submit button === */
.submit-btn.submit-monday    { background: #b9ab73; border-color: #978c63; }
.submit-btn.submit-tuesday   { background: #b089ab; border-color: #8e6d89; }
.submit-btn.submit-wednesday { background: #cc9970; border-color: #a97e5c; }
.submit-btn.submit-thursday  { background: #9eb5c0; border-color: #839ca9; }
.submit-btn.submit-friday    { background: #ada387; border-color: #937b6a; }
.submit-btn.submit-saturday  { background: #c87e7e; border-color: #a05e5e; }
.submit-btn.submit-sunday    { background: #87a985; border-color: #6f8b6e; }

/* Text color based on mode (green for guess, red for discard) */
.submit-btn.guess { color: #d7ffd7; }  /* Edit this line to change the green color for GUESS mode */
.submit-btn.discard { color: #ffcaca; }  /* Edit this line to change the red color for DISCARD mode */

/* Glow/pulse when actionable */
@keyframes pulseGlow {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.0), 0 0 12px rgba(255,255,255,.15); }
  50%  { box-shadow: 0 0 0 4px rgba(255,255,255,.10), 0 0 16px rgba(255,255,255,.25); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,.0), 0 0 12px rgba(255,255,255,.15); }
}
.submit-btn.glow {
  animation: pulseGlow 1.3s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(255,255,255,.35);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
}