:root {
  --sky: #b8e4f8;
  --sky2: #d8f0e8;
  --grass: #78c878;
  --grass-dark: #5aaa5a;
  --ui-white: #ffffff;
  --rose: #ff7098;
  --rose-dark: #e05878;
  --mint: #68d8a8;
  --lavender: #c8b8f8;
  --lemon: #f8e048;
  --peach: #ffa878;
  --sky-blue: #88c8f0;
  --fight-bg: #0c0918;
  --shadow: none;
  --shadow-lg: none;
  --radius: 18px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; cursor: url('img/lipscursor.webp') 32 48, auto !important; }


body {
  font-family: 'Nunito Sans', sans-serif;
  background: #fdf9f4;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  color: #3a2a3a;
  cursor: url('img/flower-cursor.webp') 28 22, auto;
  padding-top: 40px;
  padding-bottom: 40px;
}

h1, h2, h3, .chunky {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
}

/* ── FIGHT MODAL ── */
#fight-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--fight-bg);
  z-index: 150;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#fight-modal.show { display: flex; }
#fight-modal-inner {
  padding: 14px 16px 40px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#fight-close-btn {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: rgba(255,255,255,.5);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
  align-self: flex-start;
}
#fight-close-btn:hover { color: #fff; }

#fight-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,.08);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: #ddd;
}
#fight-status .fight-stat { display: flex; gap: 8px; align-items: center; }

#canvas-wrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--fight-bg);
}
#game-canvas {
  display: block;
  width: 100%;
  max-width: 680px;
  height: auto;
}
#fight-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(12,9,24,.85);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  z-index: 10;
  overflow-y: auto;
  padding: 12px 14px;
}
#fight-overlay.end-state {
  justify-content: flex-start;
}
#fight-overlay h2 { font-size: 32px; color: var(--rose); margin-bottom: 12px; text-align: center; }
#fight-overlay p { font-size: 17px; color: #ddd; margin-bottom: 18px; text-align: center; padding: 0 14px; line-height: 1.55; }
#fight-overlay .overlay-btn {
  padding: 14px 30px;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 17px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--rose);
  color: #fff;
  cursor: pointer;
  margin: 4px;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
}
#fight-overlay .overlay-btn:hover { transform: translateY(-2px); }

.fight-result-card {
  background: rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 0 0 10px;
  text-align: left;
  max-width: 480px;
  width: 100%;
}
.fight-result-card .fr-title {
  color: var(--lemon);
  font-weight: 900;
  font-size: 17px;
  margin-bottom: 6px;
}
.fight-result-card .fr-body {
  font-size: 15px;
  color: #ddd;
  line-height: 1.55;
  margin-bottom: 10px;
}
.fight-result-card .fr-meta {
  font-size: 13px;
  color: #aaa;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 8px;
  margin-top: 8px;
  line-height: 1.55;
}
.fight-result-card .fr-meta strong { color: #aaa; }
.fight-result-card.neighbor {
  background: rgba(104,216,168,.15);
  border: 1px solid rgba(104,216,168,.3);
}
.fight-result-card.neighbor .fr-title { color: var(--mint); }
.fight-result-card.neighbor .fr-body { font-style: italic; color: #ccc; }
.neighbor-portrait {
  display: block;
  width: 55%;
  max-width: 180px;
  height: auto;
  border-radius: 10px;
  margin: 0 auto 12px;
}

/* mobile controls */
#mobile-controls {
  display: none;
  gap: 14px;
  justify-content: center;
  margin-top: 4px;
}
#mobile-controls button {
  width: 76px; height: 76px;
  font-size: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: #fff;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  transition: transform .1s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
#mobile-controls button:active { transform: scale(.92); }
#fire-btn { background: rgba(255,112,152,.4) !important; }
@media (pointer: coarse) { #mobile-controls { display: flex; } }

/* powerup shop (inside fight overlay before fight) */
#fight-overlay.shop-state { justify-content: flex-start; }
#fight-overlay.shop-state h2 { margin-top: 4px; }
.overlay-hint { font-size: 13px; opacity: .6; }
.powerup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 460px;
  margin: 8px 0 14px;
}
.powerup-btn {
  padding: 14px 16px;
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-align: left;
  transition: background .15s, transform .15s cubic-bezier(.34,1.56,.64,1), border-color .15s;
}
.powerup-btn .pu-head { line-height: 1.3; }
.powerup-btn:hover:not(:disabled) {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
  transform: translateY(-2px);
}
.powerup-btn:disabled { opacity: .35; cursor: default; }
.powerup-btn .pu-cost { display: block; color: var(--lemon); font-size: 13px; margin-top: 6px; font-weight: 800; letter-spacing: .03em; }
.powerup-btn:disabled .pu-cost { color: var(--mint); }

/* ── WIN CELEBRATION ── */
.win-confetti {
  font-size: 56px;
  text-align: center;
  margin-bottom: 4px;
  animation: confettiBounce .7s cubic-bezier(.34,1.56,.64,1);
  letter-spacing: 4px;
}
.win-tag {
  font-size: 14px !important;
  color: var(--lemon) !important;
  font-style: italic;
  font-weight: 700;
}
@keyframes confettiBounce {
  0%   { transform: scale(.4) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ── MAIN PANEL ── */

/* ── STATS SECTION ── */
#stats-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
#title-stats {
  max-width: 100px;
}

/* ── STATS BAR ── */
#stats-bar {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.stat-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  line-height: 1;
}
.stat-icon { font-size: 12px; }
.stat-label {
  font-weight: 700;
  color: #999;
  text-transform: lowercase;
  letter-spacing: .02em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-val {
  font-weight: 900;
  color: #222;
  font-size: 12px;
}
.stat-money { justify-content: center; }
.stat-money .stat-header { align-items: baseline; }
.stat-bar-wrap {
  width: 100%;
  height: 5px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
}
.stat-bar {
  height: 100%;
  border-radius: 3px;
  transition: width .5s ease;
}
.wellness-bar { background: var(--mint); }
.community-bar { background: var(--lavender); }

/* ── DAY HEADER ── */
#day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
}
#day-title {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin-bottom: 6px;
  background: none;
  padding: 0;
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#day-sun {
  width: 44px;
  height: auto;
  flex-shrink: 0;
}
#day-title-inner {
  position: relative;
  width: 72%;
}
#day-title-bg {
  width: 100%;
  display: block;
}
#day-number-img {
  position: absolute;
  left: 39%;
  top: 25%;
  transform: translate(-50%, -50%);
  height: 75%;
  width: auto;
}
#day-header .subtitle { font-size: 12px; color: #888; margin-top: 2px; }
#actions-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
}
#title-actions {
  max-width: 180px;
}
#actions-count-img {
  height: 48px;
  width: auto;
  display: block;
}

/* ── TOWN MAP ── */
#town-map-header {
  text-align: center;
  margin: 14px 0 6px;
}
#town-map-title {
  max-width: 300px;
  margin: 0 auto 4px;
}
#town-map-hint {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: var(--rose-dark);
  font-style: italic;
  margin-top: 2px;
}
#town-map {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
  min-height: 160px;
  background: linear-gradient(160deg, var(--sky) 0%, var(--sky2) 100%);
  border-radius: var(--radius);
  overflow: hidden;
}

#map-bg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

#buildings-grid {
  position: absolute;
  inset: 0;
}

.building-visual {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: auto;
  pointer-events: none;
}
.building-visual.locked {
  display: none;
}

.building-clickzone {
  position: absolute;
  z-index: 5;
  border-radius: 8px;
  transition: background .15s, box-shadow .15s;
}
.building-clickzone.visitable:hover {
  background: rgba(255, 112, 152, 0.2);
  box-shadow: 0 0 0 2px rgba(255, 112, 152, 0.55), inset 0 0 14px rgba(255, 112, 152, 0.15);
}
.building-clickzone.visitable:active {
  background: rgba(255, 112, 152, 0.32);
}
.building-clickzone.locked-zone:hover {
  background: rgba(0, 0, 0, 0.07);
}

.neighbor-card {
  background: #fff;
  border-radius: 14px;
  border: 2px solid #e8e0dc;
  padding: 14px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: default;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.neighbor-card.locked {
  opacity: .4;
  filter: grayscale(.9);
  border-style: dashed;
}
.neighbor-card.visitable {
  cursor: pointer;
  border-color: rgba(255,112,152,.5);
}
.neighbor-card.visitable:active { opacity: .7; }
.neighbor-emoji { font-size: 28px; line-height: 1; }
.neighbor-name {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 10px;
  text-align: center;
  color: #555;
  line-height: 1.25;
  width: 100%;
  overflow-wrap: break-word;
}

/* ── DIALOGUE ── */
#dialogue-box {
  background: #fff;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  position: relative;
  min-height: 80px;
  font-size: 14px;
  line-height: 1.6;
  color: #444;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
#dialogue-portrait {
  width: 110px;
  height: auto;
  border-radius: 10px;
  flex-shrink: 0;
  display: none;
  align-self: flex-end;
}
#dialogue-portrait.visible { display: block; }
#dialogue-portrait.portrait-left { order: -1; }
#dialogue-content { flex: 1; min-width: 0; }
#dialogue-speaker {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--rose-dark);
  margin-bottom: 5px;
}
#dialogue-text { font-style: italic; }
#dialogue-effects {
  margin-top: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  color: #b0a8b0;
  letter-spacing: 0.04em;
}
#dialogue-effects:empty { display: none; }

/* ── HOME ACTIONS ── */
#home-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}
#action-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
}
#action-section #home-actions {
  width: 100%;
  align-items: center;
}
.action-btn {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 14px;
  padding: 12px 16px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.action-btn:hover:not(:disabled) {
  transform: translateY(-3px);
}
.action-btn:active:not(:disabled) { transform: translateY(0); }
.action-btn:disabled { opacity: .45; cursor: default; transform: none; }
.action-btn:disabled img { filter: grayscale(1); }
.action-btn .cost { font-size: 11px; font-weight: 600; opacity: .7; white-space: nowrap; }
.btn-rest { background: var(--mint); color: #1a5a3a; }
.btn-book { background: var(--lemon); color: #7a5a00; }
.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.action-cost {
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  color: #888;
  text-align: center;
}
.action-item:has(.action-img-btn.disabled) .action-cost { opacity: .45; }

.action-img-btn {
  display: block;
  max-width: 60%;
  height: auto;
  cursor: pointer;
  padding: 8px;
  margin: -8px;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
.action-img-btn:hover { transform: translateY(-3px); }
.action-img-btn:active { transform: translateY(0); }
.action-img-btn.disabled {
  filter: grayscale(1);
  opacity: .45;
}

/* ── ACTION IMAGE SIZES (adjust individually) ── */
#btn-rest      { max-width: 60%; }
#btn-book      { max-width: 60%; }
#btn-fight-home { max-width: 75%; }
/* visit-a-neighbor is styled separately via #visit-a-neighbor-img */
.btn-screened { background: var(--peach); color: #7a3a00; }
.btn-fight { background: var(--rose); color: #fff; }

/* ── PERKS LIST ── */
#perks-section {
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#perks-section h3 { font-size: 14px; color: var(--rose-dark); margin-bottom: 2px; }
#perks-section .action-section-title-img { margin-bottom: 2px; }
#perks-list { width: 100%; }
#perks-hint {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: #999;
  font-style: italic;
  margin-bottom: 10px;
}
#perks-section #btn-fight-home {
  width: 100%;
  margin-top: 12px;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  text-align: center;
  gap: 2px;
}
#perks-section #btn-fight-home .cost {
  display: none;
  text-align: center;
  opacity: .85;
  font-style: italic;
  margin-top: 2px;
}
#perks-section #btn-fight-home:disabled .cost { display: block; }
.perk-item {
  padding: 6px 0;
  font-size: 12px;
  border-bottom: 1px solid #f0f0f0;
  color: #aaa;
}
.perk-item:last-child { border-bottom: none; }
.perk-item.unlocked { color: #444; }
.perk-item.expandable { cursor: pointer; }
.perk-item .perk-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.perk-item .perk-check { font-size: 14px; }
.perk-item .perk-name { font-family: 'Nunito', sans-serif; font-weight: 700; flex: 1; }
.perk-toggle {
  font-size: 10px;
  opacity: .4;
  transition: transform .2s;
  margin-left: auto;
}
.perk-item.expanded .perk-toggle { transform: rotate(90deg); opacity: .8; }
.perk-details {
  display: none;
  padding: 8px 4px 4px 24px;
  font-size: 11.5px;
  color: #666;
  line-height: 1.55;
}
.perk-item.expanded .perk-details { display: block; }
.perk-details p { margin-bottom: 6px; }
.perk-details p:last-child { margin-bottom: 0; }
.perk-details strong {
  color: var(--rose-dark);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
}

/* ── END DAY BTN ── */
#end-day-btn {
  width: 100%;
  padding: 14px;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--rose);
  color: #fff;
  cursor: pointer;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
  margin-bottom: 12px;
}
#end-day-btn:hover { transform: translateY(-3px); }
#end-day-btn:active { transform: translateY(2px); }
#end-day-btn:disabled { opacity: .5; cursor: default; transform: none; }

/* ── VISITS REMAINING ── */
#visits-info {
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: #888;
  margin-bottom: 8px;
}
#visits-info span { color: var(--rose-dark); }

/* ── FIGHT PANEL ── */
#fight-panel { padding: 12px 16px 80px; max-width: 520px; margin: 0 auto; }


/* ── ACTION SECTION ── */

.action-section-title-img {
  display: block;
  max-width: 200px;
  height: auto;
  margin-bottom: 4px;
}
#title-perks-unlocked {
  max-width:250px;
}
#visit-a-neighbor-img {
  display: block;
  max-width: 190px;
  height: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
#visit-a-neighbor-img:hover { transform: translateY(-3px); }
#action-section-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 16px;
  color: var(--rose-dark);
  margin-bottom: 2px;
}
#action-section-hint {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: #999;
  font-style: italic;
  margin-bottom: 10px;
}
.action-group-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #777;
  margin: 12px 0 6px;
}
#action-section.done #home-actions button,
#action-section.done #home-actions .action-item,
#action-section.done #visit-a-neighbor-img,
#action-section.done .action-item:has(#visit-a-neighbor-img) { opacity: .35; pointer-events: none; filter: grayscale(1); }
#action-section.done #action-section-title,
#action-section.done #action-section-hint { display: none; }

/* ── DAY DONE STATE ── */
#day-done-card {
  display: none;
  background: var(--mint);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 10px;
  margin-bottom: 4px;
  animation: bounceIn .35s cubic-bezier(.34,1.56,.64,1);
}
#day-done-card.show { display: block; }
#day-done-card p { font-size: 13px; color: #1a5a3a; margin-bottom: 10px; line-height: 1.5; }
#day-done-btn {
  width: 100%;
  padding: 13px;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 15px;
  border: none;
  border-radius: var(--radius-sm);
  background: #1a7a4a;
  color: #fff;
  cursor: pointer;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
#day-done-btn:hover { transform: translateY(-2px); }
/* ── MUSIC TOGGLE ── */
#music-controls {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 300;
  display: none;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 99px;
  padding: 4px 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
#music-controls.visible { display: flex; }
#music-controls button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--rose-dark);
  font-size: 18px;
  line-height: 1;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
#music-controls button:hover { transform: scale(1.18); }
#music-prev, #music-next { font-size: 22px; font-weight: 700; }
#music-toggle.muted { color: #bbb; }

#toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #2a1a2a;
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 14px;
  z-index: 500;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  text-align: center;
  max-width: 320px;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── ARRIVAL BANNER ── */
#arrival-banner, #perk-banner {
  border-radius: var(--radius-sm);
  padding: 10px 14px 10px 14px;
  margin-bottom: 10px;
  font-size: 13px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  display: none;
  animation: bounceIn .4s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
#perk-banner { background: var(--lavender); color: #4a2a8a; }
#perk-banner.show { display: block; }

/* ── ARRIVAL MODAL ── */
/* ── NEIGHBOR MODAL ── */
/* mobile: full-screen slide-in */
#neighbor-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: #fdf9f4;
  z-index: 200;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex-direction: column;
}
#neighbor-modal.show { display: flex; }
#neighbor-modal-inner {
  width: 100%;
  padding: 20px 20px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#neighbor-modal-close {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 16px;
  color: #bbb;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0 16px;
  align-self: flex-start;
  line-height: 1;
}
#neighbor-modal-close:hover { color: #888; }

/* desktop: centered popup */
@media (min-width: 600px) {
  #neighbor-modal {
    background: rgba(58, 42, 58, 0.45);
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  #neighbor-modal-inner {
    position: relative;
    background: #fff;
    border-radius: var(--radius);
    padding: 24px 24px 28px;
    max-width: 380px;
    animation: bounceIn .3s cubic-bezier(.34,1.56,.64,1);
    cursor: default;
  }
  #neighbor-modal { cursor: pointer; }
  #neighbor-modal-close {
    display: block;
    position: absolute;
    top: 14px;
    right: 16px;
    padding: 0;
    font-size: 18px;
    align-self: unset;
    color: #ccc;
  }
}
.neighbor-modal-hint {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: #999;
  font-style: italic;
  margin-bottom: 6px;
  text-align: center;
}
.neighbor-modal-note {
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #bbb;
  font-style: italic;
  margin-bottom: 12px;
  text-align: center;
}
#neighbor-modal #neighbor-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 0;
  width: 100%;
}

#arrival-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 90, 58, 0.35);
  z-index: 250;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#arrival-modal.show { display: flex; }
#arrival-modal-inner {
  background: #fff;
  border-radius: var(--radius);
  padding: 28px 24px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  animation: bounceIn .4s cubic-bezier(.34,1.56,.64,1);
}
#arrival-modal-title {
  font-size: 20px;
  color: #1a7a4a;
  margin-bottom: 16px;
  line-height: 1.2;
}
.arrival-images {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 14px;
}
.arrival-building {
  width: 120px;
  height: auto;
  border-radius: 6px;
  flex-shrink: 0;
}
.arrival-portrait {
  width: 96px;
  height: auto;
  border-radius: 6px;
  flex-shrink: 0;
}
#arrival-modal-text {
  font-size: 14px;
  color: #1a5a3a;
  line-height: 1.6;
  margin-bottom: 20px;
  text-align: left;
}
#arrival-modal-btn {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 15px;
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--mint);
  color: #1a5a3a;
  cursor: pointer;
  width: 100%;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
#arrival-modal-btn:hover { transform: translateY(-2px); }
.banner-close {
  position: absolute;
  top: 8px; right: 10px;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  opacity: .5;
  line-height: 1;
  padding: 0;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
}
.banner-close:hover { opacity: 1; }

/* ── ENDING SCREEN ── */
#ending-screen {
  display: none;
  position: fixed;
  inset: 0;
  background: linear-gradient(160deg, var(--sky) 0%, var(--sky2) 100%);
  z-index: 200;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 32px 24px 60px;
  text-align: center;
}
#ending-screen.show { display: flex; }
#ending-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 28px 24px;
  max-width: 460px;
  width: 100%;
}
#ending-eyebrow {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #aaa;
  margin-bottom: 6px;
}
#ending-title {
  font-size: 30px;
  color: var(--rose-dark);
  margin-bottom: 18px;
  line-height: 1.15;
}
#ending-map {
  position: relative;
  width: 100%;
  margin: 0 auto 22px;
  border-radius: var(--radius);
  overflow: hidden;
}
.ending-map-bg {
  width: 100%;
  height: auto;
  display: block;
}

.recap-portraits {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.recap-portrait-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.recap-portrait-item img {
  width: 96px;
  height: auto;
  border-radius: 10px;
}
.recap-portrait-item span {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 9px;
  color: #888;
  text-align: center;
  max-width: 72px;
}
#ending-recap {
  background: linear-gradient(160deg, rgba(255,112,152,.08), rgba(200,184,248,.12));
  border-radius: var(--radius);
  padding: 18px 16px;
  margin-bottom: 18px;
  text-align: left;
}
.recap-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 14px;
  color: var(--rose-dark);
  text-align: center;
  margin-bottom: 14px;
  letter-spacing: .04em;
}
#recap-statgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}
.recap-tile {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 10px 6px;
  text-align: center;
}
.rt-num {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: var(--rose-dark);
  line-height: 1;
}
.rt-denom {
  font-size: 12px;
  color: #aaa;
  font-weight: 700;
}
.rt-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 10px;
  color: #666;
  margin-top: 4px;
  text-transform: lowercase;
  letter-spacing: .02em;
}
.recap-subhead {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 12px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 14px 0 6px;
}
.recap-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.recap-list li {
  font-size: 13px;
  color: #444;
  line-height: 1.5;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(0,0,0,.06);
}
.recap-list li:last-child { border-bottom: none; }
.recap-list strong {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  color: var(--rose-dark);
}
.recap-meta { color: #888; font-size: 11.5px; font-style: italic; }
.recap-empty {
  font-size: 12px;
  color: #888;
  font-style: italic;
  text-align: center;
  margin-top: 8px;
}
#ending-body {
  font-size: 14px;
  color: #555;
  line-height: 1.7;
  margin-bottom: 16px;
}
#ending-close {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  background: var(--rose);
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 24px;
  display: block;
  width: 100%;
  margin-bottom: 10px;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
#ending-close:hover { transform: translateY(-2px); }
#ending-back {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #aaa;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
}
.closing-line {
  font-style: italic;
  color: var(--rose-dark) !important;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
}
#ending-edu {
  font-size: 12px;
  color: #777;
  line-height: 1.6;
  background: rgba(200,184,248,.18);
  border-left: 3px solid var(--lavender);
  padding: 10px 12px;
  border-radius: 8px;
  margin: 16px 0 14px;
  text-align: left;
}
#ending-edu strong { color: var(--rose-dark); font-family: 'Nunito', sans-serif; font-weight: 800; }
.intro-edu {
  font-size: 13px !important;
  color: #555 !important;
  line-height: 1.55 !important;
  background: rgba(200,184,248,.2);
  border-left: 3px solid var(--lavender);
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 12px !important;
}
.intro-edu strong { color: var(--rose-dark); font-family: 'Nunito', sans-serif; font-weight: 800; }

@keyframes bounceIn {
  from { transform: scale(.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ── INTRO SCREEN ── */
#intro-screen {
  display: none;
  position: fixed;
  inset: 0;
  background: linear-gradient(160deg, var(--sky) 0%, var(--sky2) 100%);
  z-index: 300;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 32px 20px 60px;
}
body:has(#intro-screen.show) { overflow: hidden; }
@media (max-width: 599px) {
  #intro-screen { padding: 0; justify-content: flex-start; background: #fff; }
  #intro-card {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    border-radius: 0;
    padding: 40px 24px 60px;
    animation: none;
    box-shadow: none;
  }
  #intro-body p { font-size: 20px; line-height: 1.7; }
  #intro-tagline { font-size: 17px; }
  #intro-body .intro-note { font-size: 19px; }
  #intro-logo { width: 70%; }
  #intro-start-btn img { width: 80%; }
}
@media (min-width: 600px) {
  #intro-screen { overflow: hidden; justify-content: center; padding: 24px 20px; }
}
#intro-screen.show { display: flex; }
#intro-card {
  background: #fff;
  border-radius: 28px;
  padding: 20px 18px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  animation: bounceIn .4s cubic-bezier(.34,1.56,.64,1);
}
#intro-logo {
  display: block;
  width: 55%;
  height: auto;
  margin: 0 auto 4px;
}
#intro-tagline {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 12px;
  font-style: italic;
  color: var(--rose);
  margin-bottom: 14px;
}
#intro-body {
  text-align: left;
  margin-bottom: 10px;
}
#intro-body p {
  font-size: 13px;
  line-height: 1.55;
  color: #555;
  margin-bottom: 10px;
}
#intro-body p strong {
  color: var(--rose-dark);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
}
#intro-body .intro-note {
  font-style: italic;
  color: var(--rose-dark);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 13px;
  margin-top: 14px;
  margin-bottom: 0;
  text-align: center;
}
#intro-start-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
  width: 100%;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
#intro-start-btn img {
  display: block;
  width: 65%;
  height: auto;
  margin: 0 auto;
}
#intro-start-btn:hover { transform: translateY(-3px); }
#intro-start-btn:active { transform: translateY(2px); }

/* ── BASE PANEL LAYOUT ── */
#town-panel {
  position: relative;
  padding: 12px 16px 24px;
  max-width: 520px;
  margin: 0 auto;
  zoom: 0.95;
}

/* Reset text elements back to normal size */
#dialogue-box,
#stats-bar,
#day-done-card,
#perk-banner,
#action-section,
#perks-section,
#actions-display,
#town-map-title {
  zoom: 1.053;
}

#town-panel::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 9px solid #9dd668;
  border-radius: calc(var(--radius) + 8px);
  filter: url(#squiggle-filter);
  pointer-events: none;
  z-index: 10;
}

/* ── DESKTOP RESPONSIVE LAYOUT ── */
@media (min-width: 960px) {
  body {
    background: #fdf9f4;
  }

  .top-squiggle-line {
    width: calc(100% + 64px);
    margin: -28px -32px 0;
  }

  #town-panel {
    max-width: 1180px;
    padding: 28px 32px 28px;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 300px;
    grid-template-areas:
      "sqline  sqline    sqline"
      "day     day       day"
      "pips    dialog    stats"
      "perks   mapttl    actions"
      "perks   map       actions";
    gap: 14px 28px;
    align-items: start;
  }
  /* day ended: dayend pushes dialog down, perks/actions still only alongside map */
  #town-panel.day-ended {
    grid-template-areas:
      "sqline  sqline    sqline"
      "day     day       day"
      "pips    dayend    stats"
      "perks   dialog    actions"
      "perks   mapttl    actions"
      "perks   map       actions";
  }
  /* perk banner variants */
  #town-panel:has(#perk-banner.show) {
    grid-template-areas:
      "sqline  sqline    sqline"
      "day     day       day"
      "perkban perkban   perkban"
      "pips    dialog    stats"
      "perks   mapttl    actions"
      "perks   map       actions";
  }
  #town-panel.day-ended:has(#perk-banner.show) {
    grid-template-areas:
      "sqline  sqline    sqline"
      "day     day       day"
      "perkban perkban   perkban"
      "pips    dayend    stats"
      "perks   dialog    actions"
      "perks   mapttl    actions"
      "perks   map       actions";
  }

  .top-squiggle-line { grid-area: sqline; margin-bottom: 0; }
  #stats-section   { grid-area: stats; margin-bottom: 25px; }
  #actions-display { grid-area: pips; margin: 0; }
  #day-header      { grid-area: day; margin-bottom: 0; }
  #perk-banner.show { margin-bottom: 0; }
  #perk-banner     { grid-area: perkban; }
  #town-map-title  { grid-area: mapttl; margin-top: 0; }
  #town-map        { grid-area: map; margin-bottom: 0; }
  #dialogue-box    { grid-area: dialog; margin-bottom: 0; align-self: stretch; }
  #day-done-card   { grid-area: dayend; margin-top: 0; }
  #action-section  { grid-area: actions; margin-bottom: 0; }
  #perks-section   { grid-area: perks; margin-bottom: 0; position: sticky; top: 20px; }

  /* stats bar: vertical stack in right column */
  #stats-bar {
    grid-template-columns: 1fr;
    padding: 10px 14px;
    gap: 8px;
  }
  .stat-header { font-size: 12px; }
  .stat-val { font-size: 13px; }
  .stat-bar-wrap { height: 6px; }
  #actions-count-img { height: 56px; }

  /* roomier day header */
  #day-title { max-width: 380px; }
  #day-header .subtitle { font-size: 13px; margin-top: 4px; }

  /* main column polish */
  #town-map-title { text-align: left; font-size: 13px; margin-bottom: 8px; }
  #dialogue-box { font-size: 15px; padding: 16px 18px; min-height: 100px; }

  /* sidebar headings */
  #action-section .action-group-label:first-child { margin-top: 0; }
  #perks-section { padding: 16px 18px; }
  #perks-section h3 { font-size: 15px; }
  .perk-item { padding: 8px 0; font-size: 13px; }
  .perk-details { font-size: 12px; }

  .action-btn { font-size: 15px; padding: 14px 18px; }

  /* intro card a touch larger on desktop */
  #intro-card { max-width: 460px; padding: 36px 32px; }
  #intro-body p { font-size: 15px; }
}

/* ── MOBILE ONLY: top + bottom squiggles only ── */
@media (max-width: 959px) {
  #town-panel::before {
    border-left: none;
    border-right: none;
  }
}

/* ── MOBILE ONLY: move fight-the-law button above perks title ── */
@media (max-width: 599px) {
  #perks-section .action-item:has(#btn-fight-home) {
    order: -1;
  }
  #btn-fight-home {
    max-width: 55%;
  }
  #day-header {
    padding-top: 15%;
  }
}

/* ── EXTRA WIDE: slightly more breathing room ── */
@media (min-width: 1280px) {
  #town-panel {
    max-width: 1280px;
    grid-template-columns: 300px minmax(0, 1fr) 320px;
    gap: 18px 36px;
  }
}

/* ── DARK MODE ── */
body.dark-mode {
  background: #1a1525;
  color: #ede6f8;
}
body.dark-mode #stats-bar,
body.dark-mode #dialogue-box,
body.dark-mode .neighbor-card,
body.dark-mode #neighbor-modal-inner,
body.dark-mode #arrival-modal-inner,
body.dark-mode #ending-card,
body.dark-mode #intro-card,
body.dark-mode .recap-tile,
body.dark-mode .fight-result-card {
  background: #252038;
  color: #ede6f8;
}
body.dark-mode #neighbor-modal {
  background: #1a1525;
}
body.dark-mode .stat-val { color: #ede6f8; }
body.dark-mode .stat-label,
body.dark-mode .stat-icon { color: #8878a0; }
body.dark-mode .stat-bar-wrap { background: #3a3350; }
body.dark-mode #dialogue-text { color: #d8d0ee; }
body.dark-mode #dialogue-effects { color: #7a6e90; }
body.dark-mode #dialogue-speaker { color: var(--rose); }
body.dark-mode .perk-item { color: #5a5070; border-bottom-color: #3a3350; }
body.dark-mode .perk-item.unlocked { color: #d8d0ee; }
body.dark-mode .perk-details { color: #9888b0; }
body.dark-mode #town-map-title { filter: brightness(0.8); }
body.dark-mode .action-cost { color: #7a6e90; }
body.dark-mode #action-section-hint,
body.dark-mode #perks-hint { color: #7a6e90; }
body.dark-mode #day-done-card p { color: #1a4a30; }
body.dark-mode #intro-body p,
body.dark-mode #ending-body { color: #b8b0d0; }
body.dark-mode #intro-tagline { color: var(--rose); }
body.dark-mode .neighbor-name { color: #c0b8d8; }
body.dark-mode .neighbor-card { border-color: #3a3350; }
body.dark-mode .neighbor-card.visitable { border-color: rgba(255,112,152,.5); }
body.dark-mode #ending-eyebrow { color: #7a6e90; }
body.dark-mode .recap-meta { color: #7a6e90; }
body.dark-mode .recap-subhead { color: #9888b0; }
body.dark-mode .recap-list li { color: #c0b8d8; border-bottom-color: rgba(255,255,255,.06); }
body.dark-mode #ending-edu { background: rgba(200,184,248,.08); color: #9888b0; }
body.dark-mode #music-controls { background: rgba(37,32,56,0.9); }
body.dark-mode #music-controls button { color: var(--rose); }
body.dark-mode #dark-mode-btn { color: var(--lemon); }