/* ═══════════════════════════════════════════════════════════════
 *  GRANDMAPOCALYPSE — The Bakery Corrupts
 *  ─────────────────────────────────────────
 *  Design: warm bakery → sickly decay → eldritch horror.
 *  Every stage corrupts the SAME UI, not a new skin.
 * ═══════════════════════════════════════════════════════════════ */

:root {
  --gp-bg-tint: none;
  --gp-cookie-filter: none;
  --gp-vignette: 0;
}

/* ── Stage Background Tint Overlay ── */
body.grandma-stage-1 #game-container::after,
body.grandma-stage-2 #game-container::after,
body.grandma-stage-3 #game-container::after {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--gp-bg-tint);
  pointer-events: none;
  z-index: 2;
  transition: background 4s ease;
}

/* ── Cookie Visual Corruption ── */
body.grandma-stage-1 #cookie-button,
body.grandma-stage-2 #cookie-button,
body.grandma-stage-3 #cookie-button {
  filter: var(--gp-cookie-filter);
  transition: filter 4s ease;
}

/* ── Vignette (uses ::after so it doesn't overwrite the dotted texture on ::before) ── */
body.grandma-stage-1 #click-area::after,
body.grandma-stage-2 #click-area::after,
body.grandma-stage-3 #click-area::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0, calc(var(--gp-vignette))));
  pointer-events: none;
  z-index: 0;
  transition: background 4s ease;
  border-radius: inherit;
}

/* ── Stage Body ── */
body.grandma-stage-1 { --game-bg-secondary: #1a1008; }
body.grandma-stage-2 { --game-bg-secondary: #1a0808; }
body.grandma-stage-3 {
  --game-bg-secondary: #0a0000;
}
body.grandma-stage-3 #game-container {
  animation: stage3-flicker 10s infinite;
}

@keyframes stage3-flicker {
  0%, 94%, 100% { filter: none; }
  95% { filter: brightness(0.9) saturate(1.2); }
  96% { filter: brightness(1.08); }
  97% { filter: brightness(0.85) hue-rotate(-5deg); }
  98% { filter: brightness(1.02); }
}

/* ══════════════════════════════════════════
   WRATH COOKIE
   ══════════════════════════════════════════ */
#golden-cookie.wrath-cookie {
  color: #cc2200;
  text-shadow:
    0 0 8px rgba(200, 0, 0, 0.9),
    0 0 20px rgba(150, 0, 0, 0.6),
    0 0 40px rgba(100, 0, 0, 0.3);
  filter:
    drop-shadow(0 0 12px rgba(200, 0, 0, 0.7))
    drop-shadow(0 0 30px rgba(120, 0, 0, 0.4));
  animation: wrathAppear 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards,
             wrathPulse 1.8s ease-in-out 0.6s infinite !important;
}

@keyframes wrathAppear {
  0% { opacity: 0; transform: scale(0) rotate(180deg); }
  60% { opacity: 1; transform: scale(1.15) rotate(-10deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes wrathPulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 12px rgba(200,0,0,0.7)) drop-shadow(0 0 30px rgba(120,0,0,0.4));
  }
  50% {
    transform: scale(1.1) rotate(-3deg);
    filter: drop-shadow(0 0 20px rgba(220,0,0,0.9)) drop-shadow(0 0 50px rgba(150,0,0,0.6));
  }
}

/* ══════════════════════════════════════════
   WRINKLER CANVAS
   ══════════════════════════════════════════ */
#wrinkler-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* ══════════════════════════════════════════
   GRANDMA RESEARCH — shop section
   ──────────────────────────────────────────
   Lives in #shop between upgrades and buildings.
   Collapsible accordion that matches shop aesthetic.
   ══════════════════════════════════════════ */
.gp-shop-section {
  position: relative;
  z-index: 3;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.gp-shop-section.hidden { display: none; }

/* Header — clickable bar */
.gp-shop-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  user-select: none;
  color: #cd9b62;
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  background: linear-gradient(135deg, rgba(90, 57, 33, 0.6), rgba(65, 40, 15, 0.5));
  border: 1.5px solid rgba(165, 120, 71, 0.35);
  border-radius: 6px;
  transition: all 0.25s ease;
}

.gp-shop-header:hover {
  background: linear-gradient(135deg, rgba(100, 65, 38, 0.7), rgba(75, 48, 20, 0.6));
  border-color: rgba(165, 120, 71, 0.45);
}

.gp-header-text { flex: 1; }

.gp-expand-arrow {
  font-size: 12px;
  transition: transform 0.3s ease;
  opacity: 0.5;
}

.gp-shop-section.gp-expanded .gp-expand-arrow {
  transform: rotate(180deg);
}

/* Collapsible body */
.gp-shop-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
  opacity: 0;
  padding: 0 2px;
}

.gp-shop-section.gp-expanded .gp-shop-body {
  max-height: 500px;
  opacity: 1;
  padding-top: 6px;
}

/* ── Stage Indicator — compact pill in header ── */
.gp-stage-indicator {
  background: rgba(65, 40, 15, 0.8);
  color: #cd9b62;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid rgba(165, 120, 71, 0.25);
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}

/* Stage corruption on the shop section */
body.grandma-stage-1 .gp-shop-header {
  border-color: rgba(140, 90, 40, 0.4);
}

body.grandma-stage-2 .gp-shop-header {
  background: linear-gradient(135deg, rgba(80, 30, 20, 0.6), rgba(55, 18, 10, 0.5));
  border-color: rgba(160, 50, 30, 0.4);
  color: #c07050;
}
body.grandma-stage-2 .gp-stage-indicator {
  background: rgba(80, 20, 10, 0.8);
  color: #e07060;
  border-color: rgba(160, 50, 30, 0.3);
}

body.grandma-stage-3 .gp-shop-header {
  background: linear-gradient(135deg, rgba(50, 8, 8, 0.7), rgba(30, 2, 2, 0.6));
  border-color: rgba(140, 20, 10, 0.45);
  color: #c04030;
  animation: shop-header-breathe 5s ease-in-out infinite;
}
body.grandma-stage-3 .gp-stage-indicator {
  background: rgba(60, 5, 5, 0.9);
  color: #ff4030;
  border-color: rgba(140, 20, 10, 0.4);
  animation: badge-pulse 2.5s ease-in-out infinite;
}

@keyframes shop-header-breathe {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 12px rgba(120,0,0,0.2), inset 0 0 8px rgba(100,0,0,0.1); }
}

@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* ══════════════════════════════════════════
   RESEARCH LIST
   ══════════════════════════════════════════ */
.gp-research-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
}

.gp-research-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  border: 1px solid rgba(165, 120, 71, 0.12);
  gap: 10px;
  transition: background 0.2s, border-color 0.2s;
}

.gp-research-item:hover:not(.purchased):not(.locked) {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(165, 120, 71, 0.25);
}

.gp-research-item.purchased {
  opacity: 0.4;
  padding: 3px 8px;
}
.gp-research-item.purchased .gp-research-desc { display: none; }

.gp-research-item.locked {
  opacity: 0.25;
  padding: 3px 8px;
}
.gp-research-item.locked .gp-research-desc { display: none; }

.gp-research-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.gp-research-name {
  color: #d4a870;
  font-weight: 700;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

body.grandma-stage-2 .gp-research-name { color: #d08060; }
body.grandma-stage-3 .gp-research-name { color: #d06050; }

.gp-research-desc {
  font-size: 10px;
  color: rgba(205, 155, 98, 0.55);
  margin-top: 2px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.gp-research-locked {
  color: rgba(165, 120, 71, 0.35);
  font-size: 11px;
  font-style: italic;
}

/* ── Buy Button ── */
.gp-research-buy-btn {
  background: linear-gradient(135deg, #6a3a10, #4a2808);
  color: #d4a870;
  border: 1.5px solid rgba(165, 120, 71, 0.4);
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

.gp-research-buy-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #7a4a18, #5a3010);
  border-color: rgba(165, 120, 71, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.gp-research-buy-btn:active:not(:disabled) { transform: translateY(0); }

.gp-research-buy-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ── Action Buttons ── */
.gp-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(165, 120, 71, 0.15);
  flex-wrap: wrap;
}

body.grandma-stage-2 .gp-actions { border-top-color: rgba(160, 50, 30, 0.15); }
body.grandma-stage-3 .gp-actions { border-top-color: rgba(140, 20, 10, 0.2); }

.gp-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 5px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.gp-btn:hover { transform: translateY(-1px); }
.gp-btn:active { transform: translateY(0); }

.gp-pledge {
  background: linear-gradient(135deg, #3a5a1a, #2a4010);
  color: #a0d060;
  border-color: rgba(120, 180, 60, 0.25);
}
.gp-pledge:hover { background: linear-gradient(135deg, #4a7a2a, #3a5a18); }

.gp-covenant {
  background: linear-gradient(135deg, #5a1a1a, #3a0808);
  color: #e06050;
  border-color: rgba(180, 60, 40, 0.25);
}
.gp-covenant:hover { background: linear-gradient(135deg, #7a2a2a, #4a1010); }

.gp-revoke {
  background: linear-gradient(135deg, #1a2a4a, #0a1530);
  color: #60a0d0;
  border-color: rgba(60, 120, 180, 0.25);
}
.gp-revoke:hover { background: linear-gradient(135deg, #2a3a5a, #1a2540); }

/* ── Pledge Timer — lives in the header bar, always visible ── */
.gp-pledge-bar {
  background: rgba(60, 120, 40, 0.6);
  color: #c0e080;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: 1px solid rgba(100, 180, 60, 0.35);
  animation: pledge-tick 1s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pledge-tick {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

/* Danger variant — red, counting up during active apocalypse */
.gp-pledge-bar.gp-pledge-bar-danger {
  background: rgba(120, 30, 20, 0.6);
  color: #e08070;
  border-color: rgba(180, 50, 30, 0.35);
  animation: danger-tick 2s ease-in-out infinite;
}

@keyframes danger-tick {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.gp-pledge-bar.hidden { display: none; }
.gp-btn.hidden { display: none; }

/* ── Purchased Summary — compact one-liner ── */
.gp-purchased-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  border: 1px solid rgba(165, 120, 71, 0.12);
  margin-bottom: 4px;
  font-size: 11px;
}

.gp-summary-label {
  color: rgba(205, 155, 98, 0.6);
}

.gp-summary-boost {
  color: #a0d060;
  font-weight: 700;
  font-size: 12px;
}

/* ── Requirement Hints ── */
.gp-research-req {
  font-size: 10px;
  color: rgba(180, 80, 60, 0.6);
  margin-top: 3px;
  font-style: italic;
}

/* ══════════════════════════════════════════
   STAGE TRANSITION TEXT
   ══════════════════════════════════════════ */
.stage-transition-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: 700;
  color: #cc5500;
  text-shadow:
    0 0 20px rgba(200, 60, 0, 0.6),
    0 0 60px rgba(150, 30, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.8);
  font-style: italic;
  letter-spacing: 1px;
  pointer-events: none;
  animation: stage-text-appear 4.5s ease-out forwards;
  z-index: 100;
  text-align: center;
  max-width: 90%;
  width: max-content;
  overflow-wrap: break-word;
  white-space: normal;
}

body.grandma-stage-3 .stage-transition-text {
  color: #ff2000;
  font-size: 19px;
  text-shadow:
    0 0 24px rgba(255, 30, 0, 0.7),
    0 0 80px rgba(200, 0, 0, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.9);
}

@keyframes stage-text-appear {
  0% { opacity: 0; transform: translate(-50%, -55%) scale(0.95); filter: blur(4px); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translate(-50%, -45%) scale(1.02); filter: blur(2px); }
}

/* ══════════════════════════════════════════
   NEWS TICKER — stage corruption
   ══════════════════════════════════════════ */
body.grandma-stage-2 #news-broadcast {
  border-color: rgba(150, 40, 30, 0.35);
}

body.grandma-stage-3 #news-broadcast {
  border-color: rgba(180, 20, 10, 0.5);
  animation: news-corrupt 8s ease-in-out infinite;
}

@keyframes news-corrupt {
  0%, 90%, 100% { opacity: 1; }
  92% { opacity: 0.8; }
  94% { opacity: 1; }
  96% { opacity: 0.65; }
}

/* ── Milk Blood Override ── */
body.grandma-stage-2 .milk-layer,
body.grandma-stage-3 .milk-layer {
  transition: background 4s ease;
}

/* ══════════════════════════════════════════
   MOBILE (≤900px)
   ══════════════════════════════════════════ */
@media (max-width: 900px) {
  .gp-shop-header { padding: 8px 10px; font-size: 0.82rem; }
  .gp-research-item { padding: 6px 8px; gap: 6px; }
  .gp-research-name { font-size: 11px; }
  .gp-research-desc { font-size: 9px; -webkit-line-clamp: 1; }
  .gp-research-buy-btn { font-size: 10px; padding: 5px 10px; }
  .gp-btn { font-size: 10px; padding: 5px 10px; }
  .stage-transition-text { font-size: 14px; max-width: 85%; }
  body.grandma-stage-3 .stage-transition-text { font-size: 16px; }
}

@media (max-width: 600px) {
  .gp-research-desc { display: none; }
  .gp-research-buy-btn { font-size: 9px; padding: 4px 8px; }
  .gp-btn { font-size: 9px; padding: 4px 8px; }
  .stage-transition-text { font-size: 12px; }
  body.grandma-stage-3 .stage-transition-text { font-size: 14px; }
}

@media (max-width: 1100px) {
  .gp-research-desc { -webkit-line-clamp: 1; }
}

/* ══════════════════════════════════════════
   CONFIRM DIALOG (replaces native confirm)
   ══════════════════════════════════════════ */
.gp-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s ease;
}
.gp-confirm-overlay.gp-confirm-visible {
  background: rgba(0, 0, 0, 0.6);
}
.gp-confirm-dialog {
  background: linear-gradient(135deg, #1a1008 0%, #2a1a0a 100%);
  border: 1px solid rgba(200, 160, 80, 0.3);
  border-radius: 10px;
  padding: 20px 24px;
  max-width: 360px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.gp-confirm-visible .gp-confirm-dialog {
  transform: scale(1);
  opacity: 1;
}
.gp-confirm-message {
  color: #e8d5b0;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
  text-align: center;
}
.gp-confirm-message strong {
  color: #ff9944;
}
.gp-confirm-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.gp-confirm-btn {
  padding: 8px 20px;
  border: 1px solid rgba(200, 160, 80, 0.3);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.gp-confirm-yes {
  background: linear-gradient(135deg, #8b4513 0%, #a0522d 100%);
  color: #ffe8c0;
}
.gp-confirm-yes:hover {
  background: linear-gradient(135deg, #a0522d 0%, #b8652e 100%);
  border-color: rgba(200, 160, 80, 0.5);
}
.gp-confirm-no {
  background: rgba(40, 30, 20, 0.8);
  color: #b0a080;
}
.gp-confirm-no:hover {
  background: rgba(60, 40, 25, 0.9);
  color: #e0d0a0;
}