/* === [SNIPPET: Capsule Pop Attraction Styles] === */
/* Capsule Pop (attraction #4, between Plinko and Cannon Range), loaded from index.html.
   Terracotta accent #d9693a (dark #8f3f1c): clear of Cannon orange #ff8a00, Coin Flip green, Claw gold and Plinko red. Theme tokens,
   sidebar Prizes card, SHOP button, game selector pill, mode select card, skill tree shop theme and the challenge card. */

/* --- Theme tokens --- */
[data-theme="capsule_pop"],
.mode-theme-capsule_pop {
  --theme-accent: #d9693a;
  --theme-accent-alt: #f0b08a;
  --theme-card-border: #8f4a2a;
  --theme-hover-bg: #2a1810;
}
body[data-game-mode="capsule_pop"],
.game-viewport[data-game-mode="capsule_pop"],
.canvas-wrapper[data-game-mode="capsule_pop"],
.game-view-area.theme-capsule_pop,
.game-view-area.theme-capsule_pop .cosmic-bg {
  background-color: #170d09;
}
/* The animated terracotta starfield around the cabinet: the same 56px blurred tile as Plinko / Coin Flip (components.css, Themed Cosmic Background), drifting via .cosmic-bg */
.game-view-area.theme-capsule_pop .cosmic-bg { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cfilter id='b' filterUnits='userSpaceOnUse' x='-16' y='-16' width='88' height='88'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3Crect width='56' height='56' fill='%23170d09'/%3E%3Cg filter='url(%23b)'%3E%3Cpath d='M-56 -56L112 112M0 -56L112 56M-56 0L56 112' stroke='rgba(217,105,58,0.33)' stroke-width='1.5'/%3E%3Crect x='13' y='42' width='3' height='1' fill='rgba(240,176,138,0.484)'/%3E%3Crect x='14' y='41' width='1' height='3' fill='rgba(240,176,138,0.484)'/%3E%3Crect x='41' y='13' width='2' height='2' fill='rgba(255,204,0,0.44)'/%3E%3C/g%3E%3C/svg%3E"); }

/* --- Sidebar + cabinet frame + top HUD cards --- */
.canvas-wrapper[data-game-mode="capsule_pop"] :is(.arcade-sidebar, .pf-themed) {
  --sb-accent: #d9693a; --sb-accent-dark: #8f3f1c; --sb-panel: #2a1810; --sb-card: #4a2a1a;
  --sb-hover: #5e3520; --sb-bevel-hi: #8f4a2a; --sb-bevel-lo: #140a06;
}
/* Popups themed by the current attraction (skill tree upgrade popup, challenge popups) */
body[data-game-mode="capsule_pop"] {
  --mode-panel: #2a1810; --mode-card: #4a2a1a; --mode-hover: #5e3520; --mode-hi: #8f4a2a; --mode-lo: #140a06;
  --mode-accent: #d9693a; --mode-accent-dark: #8f3f1c;
}
/* Generated with tools/gen_popup_frames.cjs's frame() for --mode-hi #8f4a2a / --mode-lo #140a06; do not hand-edit */
body[data-game-mode="capsule_pop"] { --mode-frame-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' shape-rendering='crispEdges'%3E%3Cmask id='m'%3E%3Crect width='60' height='60' fill='%23fff'/%3E%3Cpath d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z'/%3E%3C/mask%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M3 18L3 15L3 12L6 12L6 9L6 6L12 6L12 3L18 3L45 3L51 3L51 6L57 6L57 9L57 12L60 12L60 15L60 18L60 45L60 48L60 51L57 51L57 54L57 57L51 57L51 60L45 60L18 60L12 60L12 57L6 57L6 54L6 51L3 51L3 48L3 45Z'/%3E%3Cpath d='M0 15L0 12L0 9L3 9L3 6L3 3L9 3L9 0L15 0L42 0L48 0L48 3L54 3L54 6L54 9L57 9L57 12L57 15L57 42L57 45L57 48L54 48L54 51L54 54L48 54L48 57L42 57L15 57L9 57L9 54L3 54L3 51L3 48L0 48L0 45L0 42Z'/%3E%3C/g%3E%3Cpath fill='%238f4a2a' fill-rule='evenodd' d='M3 15L3 12L3 9L6 9L6 6L9 6L9 3L15 3L42 3L48 3L48 6L51 6L51 9L54 9L54 12L54 15L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L15 54L9 54L9 51L6 51L6 48L3 48L3 45L3 42Z M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3Cpath fill='%23140a06' fill-rule='evenodd' d='M6 18L6 15L6 12L9 12L9 9L12 9L12 6L18 6L42 6L48 6L48 9L51 9L51 12L54 12L54 15L54 18L54 42L54 45L54 48L51 48L51 51L48 51L48 54L42 54L18 54L12 54L12 51L9 51L9 48L6 48L6 45L6 42Z M6 15L6 12L6 9L9 9L9 6L15 6L42 6L48 6L48 9L51 9L51 12L51 15L51 42L51 45L51 48L48 48L48 51L42 51L15 51L9 51L9 48L6 48L6 45L6 42Z'/%3E%3C/svg%3E"); }
.arcade-sidebar #prizeCard { --card-bg: #4a2a1a; --seg-color: #d9693a; }
.stat-card.cp-prize-card { border-color: var(--pixel-black); }
.text-prize { color: #d9693a; }
.currency-tag.currency-prize .currency-val { color: #d9693a; }

/* Currency icon (PLACEHOLDER art): sidebar card and skill tree balance (same sizing rules as .gold-bar-icon) */
.prize-icon {
  width: 22px; height: 22px; min-width: 22px; min-height: 22px;
  background: url("../assets/svg/gamemodes/capsule_pop/prize.svg") no-repeat center / contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.stat-card .stat-body .prize-icon { width: 28px; height: 28px; min-width: 28px; min-height: 28px; }

/* Sidebar SHOP button (token-only variant of .btn-sidebar-shop) */
.btn-sidebar-shop.mode-capsule_pop { border-color: var(--pixel-black); --btn-bg: #2a1810; --btn-hover-bg: #5e3520; }
.btn-sidebar-shop.mode-capsule_pop .shop-btn-text { color: #d9693a; }
.btn-sidebar-shop.mode-capsule_pop:hover { border-color: #d9693a; }
@media (hover: none) { .btn-sidebar-shop.mode-capsule_pop:hover { border-color: var(--pixel-black); } }

/* Marquee game selector */
.btn-game-selector.mode-theme-capsule_pop {
  --selector-accent: #d9693a;
  --selector-glow: rgba(217, 105, 58, 0.75); /* the "new attraction ready" pulse (style.css modeSelectorAttention) */
  --selector-glow-outer: rgba(217, 105, 58, 0.45);
  background: #2a1810;
  border-color: #d9693a;
  color: #ffffff;
  box-shadow: var(--pixel-shadow-sm);
}
.btn-game-selector.mode-theme-capsule_pop:hover { background: #4a2a1a; border-color: #f0b08a; box-shadow: var(--pixel-shadow-md); }
.btn-game-selector.mode-theme-capsule_pop .selector-dot { background: #d9693a; box-shadow: none; }

/* Mode select card */
#modeBtnCapsulePop .mode-card-art {
  background-color: #26150d; /* arcade carpet */
  background-image: repeating-linear-gradient(0deg, transparent 0 20px, rgba(217, 105, 58, 0.18) 20px 24px);
}
#modeBtnCapsulePop .mode-art-img { image-rendering: pixelated; object-fit: contain; }
#modeBtnCapsulePop.mode-card-btn:hover { background: #2a1810; border-color: #d9693a; }
#modeBtnCapsulePop.mode-card-btn.active { background: #2a1810; border-color: #d9693a; outline: none; }
#modeBtnCapsulePop.active .mode-card-art { border-color: #d9693a; }
#modeBtnCapsulePop.mode-card-btn:focus,
#modeBtnCapsulePop.mode-card-btn:focus-visible,
#modeBtnCapsulePop.mode-card-btn:active { outline: none; }

/* Skill tree shop */
.modal-backdrop.shop-theme-capsule_pop .fullscreen-dialog { background: rgb(23, 13, 9); border: none; box-shadow: none; }
.modal-backdrop.shop-theme-capsule_pop .tree-viewport { background: transparent; }
.modal-backdrop.shop-theme-capsule_pop .modal-coin-balance { color: #d9693a; }
.modal-backdrop.shop-theme-capsule_pop .node-popup-card { border-color: #d9693a; outline: 2px solid #d9693a; }

/* === [SNIPPET: Capsule Pop Playfield] === */
/* --- Workshop playfield (#capsulePopLayer, 1280x720 virtual px, scaled with the playfield) --- */
.cp-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 720px;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  image-rendering: pixelated;
  cursor: pointer;
}
.cp-canvas:focus, .cp-canvas:focus-visible, .cp-canvas:active { outline: none; }


/* Lucky Dip challenge: the shared running-challenge card in terracotta / gold */
#trialHudOverlay.mode-theme-capsule_pop #trialHudMult { color: #d9693a; }
#trialHudOverlay.mode-theme-capsule_pop #trialHudEarned { color: #ffd23f; }

/* === [SNIPPET: Capsule Pop Shelf HUD] === */
/* Shelf slots as capsule icons: each slot stacks a dark icon (the empty slot) under a full-color one. The full-color layer is clipped from the
   top by the view while the next capsule loads, so it fills in from the bottom up; a held capsule shows it whole. */
.cp-shelf-pips { display: flex; align-items: center; gap: 1px; height: 18px; }
/* 2x the 10 x 9 art; the slots shrink a little when a big shelf has more than 10 of them (the card is a fixed 236px) */
.cp-shelf-slot { position: relative; display: block; flex: 0 1 20px; min-width: 0; height: 18px; }
.cp-shelf-pip { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.cp-shelf-pip.cp-pip-empty { filter: brightness(0); opacity: 0.35; }
.cp-shelf-pip.cp-pip-fill { clip-path: inset(100% 0 0 0); }

/* === [SNIPPET: Capsule Pop Mystic Shop Row & Offline Card] === */
/* Mystic Shop row (js/ui/mystic_shop_modal.js MYSTIC_ROWS): the terracotta accent on the row title, the RESPEC button and every upgrade card,
   token-only like the other attractions' rows (style.css, pixel_ui.css). The Prizes icon inside an Offline Earnings card is 18px like the other currency icons. */
.mystic-game-row.row-capsule_pop { border-left: 4px solid #d9693a; }
#mysticShopModal .row-capsule_pop { --respec-row-color: #d9693a; }
.row-capsule_pop .mystic-respec-wrap { --respec-accent: #d9693a; }
.mystic-card.card-capsule_pop { --mystic-accent: #d9693a; }
.offline-item-icon.prize-icon { width: 18px; height: 18px; min-width: 18px; min-height: 18px; }

/* === [SNIPPET: Stuffing Shop Sidebar & Icon] === */
/* Capsule Pop's second shop (js/gamemodes/capsule_pop/toy_recycler_sidebar.js): the Stuffing card with the STUFFING SHOP button below it, hidden until the
   first toy is cashed out. Stuffing is a pixel puff of stuffing (plastic.svg). The button reuses .btn-sidebar-shop.mode-capsule_pop, only its fill is a token. */
.plastic-icon {
  width: 22px; height: 22px; min-width: 22px; min-height: 22px;
  background: url("../assets/svg/gamemodes/capsule_pop/plastic.svg") no-repeat center / contain;
  image-rendering: pixelated;
  display: inline-block;
  flex-shrink: 0;
}
.stat-card .stat-body .plastic-icon { width: 28px; height: 28px; min-width: 28px; min-height: 28px; }
.factory-btn-icon.plastic-icon { width: 16px; height: 16px; min-width: 16px; min-height: 16px; }
.text-plastic { color: #2fd6c8; }
.stat-card.plastic-card { border-color: var(--pixel-black); }
.arcade-sidebar #plasticCard { --card-bg: #0f3a37; --seg-color: #2fd6c8; }
#btnToyRecycler { --btn-bg: #10302d; --btn-hover-bg: #1d4f4a; } /* deep teal, matching the Stuffing card above it */

/* === [SNIPPET: Stuffing Shop Attention Pulse] === */
/* Flat terracotta beacon on the STUFFING SHOP button until it is first opened (the border blinks, no glow) */
.btn-sidebar-shop.recycler-attention-pulse {
  animation: recyclerAttentionPulse 1.8s steps(2, jump-none) infinite !important;
  position: relative;
  z-index: 10;
}
@keyframes recyclerAttentionPulse {
  0%, 49% { border-color: #d9693a !important; }
  50%, 100% { border-color: #f0b08a !important; }
}

/* === [SNIPPET: Stuffing Shop Modal Theme] === */
/* Reuses .factory-dialog wholesale (token-only, like the Foundry): the accent is the Capsule Pop terracotta and the balance badge keeps the Stuffing teal. */
.factory-dialog.mode-theme-capsule_pop { --factory-accent: #d9693a; }
.factory-dialog.mode-theme-capsule_pop .factory-balance { color: #2fd6c8; outline-color: #d9693a; }