/* =========================================
   COOKIE COSMOS — FULL VISUAL REBUILD
========================================= */

* {
  box-sizing: border-box;
}

:root {
  --bg: #080f25;
  --panel: #111d39;
  --panel2: #19294b;
  --blue: #347cff;
  --cyan: #48d9ff;
  --gold: #ffc247;
  --text: #f4f7ff;
  --muted: #9aacca;
  --green: #48dc9b;
}

body {
  margin: 0;
  padding: 12px;
  background:
    radial-gradient(ellipse at top, #172c55 0%, #080f25 65%);
  color: var(--text);
  font-family: Arial, sans-serif;
  overflow-x: hidden;
}

button {
  font-family: inherit;
  cursor: pointer;
  color: white;
  border: none;
  transition: .15s ease;
}

button:active {
  transform: scale(.96);
}

#game {
  width: 100%;
  max-width: 1500px;
  margin: auto;
}

/* TOP BAR */

.topbar {
  min-height: 68px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  background: linear-gradient(110deg, #172b50, #101b35);
  border: 1px solid #30466e;
  border-radius: 16px;
  box-shadow: 0 5px 25px #0005;
}

.logo {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 1px;
}

.logo span {
  color: var(--cyan);
}

.wallet {
  text-align: center;
  font-size: 19px;
}

.wallet strong {
  color: var(--gold);
}

.wallet small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
}

#saveBtn {
  background: #263f6c;
  border: 1px solid #5275ad;
  padding: 10px 16px;
  border-radius: 10px;
}

/* MAIN LAYOUT */

.layout {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(400px, 1.5fr);
  gap: 14px;
  margin-top: 14px;
  align-items: stretch;
}

.left-panel,
.right-panel {
  min-width: 0;
  background: #101a32;
  border: 1px solid #293e63;
  border-radius: 17px;
  overflow: hidden;
}

.left-panel {
  padding: 16px;
}

.right-panel {
  min-height: 650px;
}

/* FACTORY */

.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.online-dot {
  color: var(--green);
  font-size: 11px;
}

.factory-background {
  height: 100px;
  background: linear-gradient(#253e68, #172747);
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 35px;
  overflow: hidden;
}

.factory-icon {
  filter: drop-shadow(0 5px 5px #0008);
}

.cookie-stage {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at center, #263d65, #142440 70%);
  border-radius: 0 0 12px 12px;
}

.cookie-title {
  position: absolute;
  top: 17px;
  text-align: center;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1px;
}

.cookie-title small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-weight: normal;
  letter-spacing: 0;
}

#bigCookie {
  position: relative;
  z-index: 2;
  width: 175px;
  height: 175px;
  border-radius: 50%;
  border: 8px solid #9a551e;
  background:
    radial-gradient(circle at 35% 25%, #ffdf91, #d98b35 65%, #9e551e);
  box-shadow:
    0 12px 0 #75401e,
    0 18px 30px #0008,
    inset 0 5px 12px #fff5;
  font-size: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  transition: transform .08s;
}

#bigCookie:active {
  transform: scale(.91);
}

#goldenLayer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

#goldenLayer button {
  pointer-events: auto;
}

.golden-cookie {
  position: absolute !important;
  width: 43px !important;
  height: 43px !important;
  border-radius: 50% !important;
  border: 3px solid #a96812 !important;
  background:
    radial-gradient(circle at 30% 25%, #fff4a8, #ffd12e 55%, #d88a00) !important;
  box-shadow: 0 0 20px #ffd43b, inset 0 3px 5px #fff9;
  font-size: 25px !important;
  animation: goldPulse 1s infinite alternate;
}

@keyframes goldPulse {
  from { transform: scale(.95); }
  to { transform: scale(1.08); }
}

#clickEffects {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.click-hint {
  margin-top: 24px;
  color: #b6c9e9;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 2px;
}

/* STATS */

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 13px;
}

.stat {
  padding: 12px 5px;
  text-align: center;
  background: #1b2b4b;
  border: 1px solid #30476e;
  border-radius: 10px;
  min-width: 0;
}

.stat small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  margin-bottom: 6px;
}

.stat strong {
  font-size: 17px;
  color: var(--gold);
  overflow-wrap: anywhere;
}

.activity {
  margin-top: 12px;
  padding: 11px;
  border-radius: 9px;
  background: #172844;
  color: #b6c9e9;
  font-size: 11px;
}

.activity-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
  margin-right: 7px;
}

/* NAVIGATION */

.navigation {
  display: flex;
  gap: 5px;
  padding: 10px;
  background: #0c162d;
  border-bottom: 1px solid #293e63;
  overflow-x: auto;
}

.navigation button {
  flex: 1;
  min-width: 65px;
  padding: 12px 8px;
  border-radius: 9px;
  background: transparent;
  color: #a9bad8;
  font-size: 12px;
  font-weight: bold;
}

.navigation button.active {
  background: linear-gradient(135deg, #347cff, #2353b8);
  color: white;
}

/* PAGES */

.page {
  padding: 18px;
}

.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 17px;
}

.page-heading h2 {
  margin: 0;
  font-size: 22px;
}

.page-heading p {
  color: var(--muted);
  font-size: 12px;
  margin: 6px 0 0;
}

/* TABS */

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.tabs button {
  padding: 10px 17px;
  border-radius: 8px;
  background: #1b2b4b;
  color: #b9c9e4;
}

.tabs button.selected {
  background: #347cff;
  color: white;
}

/* SHOP ITEMS */

.building-card,
.upgrade-card,
.quest-card,
.city-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  margin-bottom: 9px;
  background: linear-gradient(110deg, #1b2d4e, #15233f);
  border: 1px solid #30476e;
  border-radius: 11px;
}

.building-card button,
.upgrade-card button,
.city-card button,
.quest-card button {
  margin-left: auto;
  padding: 10px 13px;
  background: linear-gradient(135deg, #347cff, #2454b5);
  border-radius: 8px;
  font-weight: bold;
  white-space: nowrap;
}

.building-card button:disabled,
.upgrade-card button:disabled,
.city-card button:disabled,
.quest-card button:disabled {
  background: #35435e;
  color: #9ba9c0;
  cursor: not-allowed;
}

.building-card .icon,
.city-card .icon {
  font-size: 30px;
}

.building-card h3,
.upgrade-card h3,
.city-card h3,
.quest-card h3 {
  margin: 0 0 5px;
  font-size: 14px;
}

.building-card p,
.upgrade-card p,
.city-card p,
.quest-card p {
  color: var(--muted);
  margin: 0;
  font-size: 11px;
}

/* CITY */

.city-view {
  position: relative;
  height: 300px;
  overflow: hidden;
  border-radius: 13px;
  border: 1px solid #3d5d83;
  background: linear-gradient(#5b9ed2 0%, #a7d7ef 54%, #579b54 55%, #347b43 100%);
}

.city-sky {
  position: absolute;
  inset: 10px 15px auto;
  display: flex;
  justify-content: space-around;
  font-size: 28px;
}

.city-road {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 45px;
  background: #555d69;
  border-top: 5px solid #d0d0c0;
}

.city-buildings {
  position: absolute;
  bottom: 45px;
  left: 0;
  right: 0;
  display: flex;
  align-items: end;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
}

.city-buildings > * {
  position: relative;
}

.city-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: #1a2c4b;
}

/* BOSS */

.boss-card,
.arena-card {
  padding: 22px;
  text-align: center;
  background: linear-gradient(145deg, #1c2e50, #111c35);
  border: 1px solid #3a5077;
  border-radius: 15px;
}

#bossEmoji {
  font-size: 75px;
  margin: 12px;
}

.health-track {
  height: 15px;
  background: #080f20;
  border-radius: 20px;
  overflow: hidden;
  margin: 8px 0;
}

#bossHealth {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ff4545, #ff8b51);
  border-radius: 20px;
}

#playerHealthFill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #28ce7d, #8cf58d);
  border-radius: 20px;
}

.boss-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

/* BUTTONS */

.primary-button,
.secondary-button {
  padding: 13px 20px;
  border-radius: 9px;
  font-weight: bold;
}

.primary-button {
  background: linear-gradient(135deg, #347cff, #2454b5);
}

.secondary-button {
  background: #30466c;
  border: 1px solid #58739d;
}

#bossMessage,
#arenaStatus {
  color: #b9c9e4;
  font-size: 13px;
  margin-top: 17px;
}

/* ARENA */

.arena-scores {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}

.arena-scores div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.arena-scores small {
  color: var(--muted);
}

.arena-scores strong {
  font-size: 35px;
  color: var(--gold);
}

#arenaTimer {
  font-size: 24px;
  color: var(--cyan);
  font-weight: bold;
}

/* MORE */

.more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.more-grid button {
  min-height: 90px;
  border-radius: 12px;
  background: linear-gradient(145deg, #20385f, #172746);
  border: 1px solid #3b527a;
  font-size: 26px;
}

.more-grid button span {
  display: block;
  font-size: 11px;
  margin-top: 8px;
  color: #d4e0f5;
}

#extraContent {
  margin-top: 17px;
}

/* QUESTS */

.quest-card {
  display: block;
}

.quest-card button {
  margin-top: 10px;
}

.quest-progress {
  height: 8px;
  background: #0a1428;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 10px;
}

.quest-progress > div {
  height: 100%;
  background: var(--green);
}

/* TUTORIAL */

.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #000b;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px;
}

.tutorial-box {
  width: 100%;
  max-width: 420px;
  padding: 25px;
  background: #172746;
  border: 1px solid #5275ad;
  border-radius: 17px;
  text-align: center;
}

.tutorial-box button {
  margin: 8px;
  padding: 11px 17px;
  background: #347cff;
  border-radius: 8px;
}

/* TOAST */

#toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  padding: 12px 20px;
  background: #263e65;
  border: 1px solid #6485b7;
  border-radius: 10px;
  color: white;
  font-size: 13px;
  box-shadow: 0 5px 20px #0008;
  pointer-events: none;
}

/* SMALL SCREENS */

@media (max-width: 750px) {
  body {
    padding: 6px;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .left-panel {
    min-height: 0;
  }

  .cookie-stage {
    min-height: 290px;
  }

  .right-panel {
    min-height: 550px;
  }

  .navigation button {
    font-size: 10px;
    padding: 10px 6px;
  }
}

@media (max-width: 420px) {
  .logo {
    font-size: 15px;
  }

  .wallet {
    font-size: 15px;
  }

  .more-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* =====================================
   COOKIE COSMOS — PERMANENT SIDE-BY-SIDE
===================================== */

.layout {
  display: grid !important;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr) !important;
  gap: 12px !important;
  align-items: start !important;
}

.left-panel,
.right-panel {
  min-width: 0 !important;
  width: 100% !important;
}

.right-panel {
  min-height: 550px;
}

/* Keep the menus on the right, even on smaller previews */
@media (max-width: 750px) {
  .layout {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr) !important;
  }
}
/* BIG COOKIE FIX */
#bigCookie {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 230px !important;
  height: 230px !important;
  font-size: 165px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  filter: drop-shadow(0 10px 8px #0008);
}

#bigCookie:hover {
  transform: scale(1.04);
}

#bigCookie:active {
  transform: scale(.94);
}
.plus-one {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  color: #ffe27a;
  font-size: 25px;
  font-weight: 900;
  text-shadow: 0 2px 5px #000;
  animation: plusFloat .85s ease-out forwards;
}

@keyframes plusFloat {
  from {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -75px) scale(1.3);
  }
}
/* REMOVE OLD FLOATING CURSOR */
.cursor-effect {
  display: none !important;
}
/* CITY SCROLL FIX */
#cityPage {
  max-height: 560px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

#cityPage .city-view {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

#cityPage #cityBuildings {
  touch-action: pan-y !important;
}
/* COOKIE CITY — SCROLLING FIX 2 */

#cityPage {
  overflow: visible !important;
  max-height: none !important;
}

#cityPage .city-view {
  height: auto !important;
  min-height: 340px !important;
  overflow: visible !important;
}

#cityPage #cityBuildings {
  position: relative !important;
  bottom: auto !important;
  height: 400px !important;
  max-height: 400px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 12px !important;
  transform: none !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

#cityPage #cityBuildings button {
  flex-shrink: 0 !important;
}