/* Cookie Clicker 2 — fan edition UI (cookieclickernew.com 2026-10-26).
   Same core as Cookie Clicker v2.058; this sheet only re-skins it and adds a real phone layout.
   Loaded only by /cookie-clicker-2/. Palette: dark chocolate, cream, gold (no blue/purple). */
:root{--cc2-bg:#1a110b;--cc2-panel:#2a1b12;--cc2-card:#3a2718;--cc2-card2:#2f1f14;--cc2-line:rgba(255,214,110,.18);--cc2-gold:#ffd66e;--cc2-cream:#f3e6cf;--cc2-dim:#bba98f}

/* ---- overall look ---- */
body,#wrapper{background:var(--cc2-bg)}
/* own art (cc2-art.js swaps the canvas pictures by name; these are the ones the engine sets through CSS) */
.product .icon,.product .icon.off,.tinyProductIcon{background-image:url(/cookie-clicker-2/art/buildings.png?v=20261026c)!important}
html body .icon,html body .crate,html body .usesIcon{background-image:url(/cookie-clicker-2/art/icons.png?v=20261026c)}
[style*="img/icons.png"]{background-image:url(/cookie-clicker-2/art/icons.png?v=20261026c)!important}
.shimmer[style*="img/goldCookie.png"]{background-image:url(/cookie-clicker-2/art/goldCookie.png?v=20261026c)!important}
.shimmer[style*="img/wrathCookie.png"]{background-image:url(/cookie-clicker-2/art/wrathCookie.png?v=20261026c)!important}
.shimmer[style*="img/familiars.png"]{background-image:url(/cookie-clicker-2/art/familiars.png?v=20261026c)!important}
.shimmer[style*="img/hearts.png"]{background-image:url(/cookie-clicker-2/art/hearts.png?v=20261026c)!important}
.shimmer[style*="img/bunnies.png"]{background-image:url(/cookie-clicker-2/art/bunnies.png?v=20261026c)!important}
.shimmer[style*="img/goldCookieWreath.png"]{background-image:url(/cookie-clicker-2/art/goldCookieWreath.png?v=20261026c)!important}
.shimmer[style*="img/wrathCookieWreath.png"]{background-image:url(/cookie-clicker-2/art/wrathCookieWreath.png?v=20261026c)!important}
.price:before,.hasTinyCookie:before,[style*="img/money.png"]{background-image:url(/cookie-clicker-2/art/money.png?v=20261026c)!important}
.heavenly.price:before{background-image:url(/cookie-clicker-2/art/heavenlyMoney.png?v=20261026c)!important}
.lump.price:before{background-image:url(/cookie-clicker-2/art/sugarLump.png?v=20261026c)!important}
.elderWrath #bigCookie{background-image:url(/cookie-clicker-2/art/imperfectCookie.png?v=20261026c)!important}
[style*="img/gardenPlants.png"]{background-image:url(/cookie-clicker-2/art/gardenPlants.png?v=20261026c)!important}
[style*="img/dragon.png"]{background-image:url(/cookie-clicker-2/art/dragon.png?v=20261026c)!important}
[style*="img/santa.png"]{background-image:url(/cookie-clicker-2/art/santa.png?v=20261026c)!important}
[style*="img/BGgarden.jpg"]{background-image:url(img/shadedBorders.png),url(/cookie-clicker-2/art/BGgarden.jpg?v=20261026c)!important}
[style*="img/BGpantheon.jpg"]{background-image:url(img/shadedBorders.png),url(/cookie-clicker-2/art/BGpantheon.jpg?v=20261026c)!important}
[style*="img/BGgrimoire.jpg"]{background-image:url(img/shadedBorders.png),url(/cookie-clicker-2/art/BGgrimoire.jpg?v=20261026c)!important}
[style*="img/BGmarket.jpg"]{background-image:url(img/shadedBorders.png),url(/cookie-clicker-2/art/BGmarket.jpg?v=20261026c)!important}
html body .gardenTile:before{background-image:url(/cookie-clicker-2/art/gardenPlots.png?v=20261026c)!important}
.separatorLeft,.separatorRight{background:url(/cookie-clicker-2/art/panelVertical.png?v=20261026c) repeat-y!important}
.separatorBottom{background:url(/cookie-clicker-2/art/panelHorizontal.png?v=20261026c) repeat-x!important}

/* top bar: brand on the left, promos removed */
#topBar{background:linear-gradient(#3a2414,#22150d)!important;border-bottom:1px solid var(--cc2-line);box-shadow:0 2px 8px rgba(0,0,0,.5)}
#topbarDiscord,#topbarMerch,#topbarMobileCC,#topbarSteamCC{display:none!important}
#topBar>div:has(#topbarDiscord),#topBar>div:has(#topbarMerch),#topBar>div:has(#topbarMobileCC),#topBar>div:has(#topbarSteamCC){display:none!important}
#cc2brand{font:900 16px Merriweather,Georgia,serif;color:var(--cc2-gold);letter-spacing:.3px;padding:0 10px!important;white-space:nowrap}
#cc2brand small{font:11px Tahoma,Arial,sans-serif;color:var(--cc2-dim);margin-left:6px;letter-spacing:0}
#cc2brand small a{color:var(--cc2-dim)!important}

/* store: cards instead of wood tiles */
#sectionRight{background:linear-gradient(var(--cc2-panel),#1e140d)!important}
.storeSection,#storeTitle{background:none!important}
#storeTitle{color:var(--cc2-gold);font-family:Merriweather,Georgia,serif}
.product{background:linear-gradient(90deg,var(--cc2-card),var(--cc2-card2))!important;border-radius:8px;margin:4px 6px 4px 4px;width:290px;border:1px solid rgba(255,255,255,.04)!important;opacity:.55}
.product.unlocked.enabled{opacity:1}
.product:hover{box-shadow:0 0 0 1px var(--cc2-gold),0 4px 14px rgba(0,0,0,.5)!important;filter:none!important}
.product .productName{color:var(--cc2-cream);font-size:24px}
.product .price{color:#9fdc7a}
.product .price.disabled{color:#d88}
.product .content .owned{color:rgba(243,230,207,.35)}
.cc2info{position:absolute;left:68px;right:8px;bottom:3px;font:11px Tahoma,Arial,sans-serif;color:var(--cc2-dim);pointer-events:none;z-index:101;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px #000}
.cc2info b{color:var(--cc2-gold);font-weight:bold}
#storeBulk .storePreButton{border-radius:4px}
#storeBulk .storePreButton.selected{color:var(--cc2-gold)!important;text-shadow:0 0 6px rgba(255,214,110,.6)}
#cc2max{position:absolute;right:6px;top:4px;z-index:200;font:bold 12px Tahoma,Arial,sans-serif;background:var(--cc2-card);color:var(--cc2-cream);border:1px solid var(--cc2-line);border-radius:4px;padding:2px 8px;cursor:pointer}
#cc2max.on{background:var(--cc2-gold);color:#2a1b12}
.upgrade.crate,.crate{border-radius:6px}

/* news ticker + menus */
#comments{background:linear-gradient(rgba(42,27,18,.92),rgba(26,17,11,.92))!important;border-bottom:1px solid var(--cc2-line)}
#game.onMenu #centerArea{background:var(--cc2-bg)!important}

/* the CC2 panel (cc2.js) sits under the big cookie */
#cc2panel{background:rgba(26,17,11,.85)!important;border-color:var(--cc2-line)!important;border-radius:10px!important}

/* welcome-back card */
#cc2welcome b{color:var(--cc2-gold)}

/* ---- phone layout: one screen at a time + bottom tabs (html.cc2m, set by cc2.js under 820px) ---- */
#cc2tabs{display:none}
html.cc2m #game{top:40px!important;bottom:calc(64px + env(safe-area-inset-bottom))!important}
html.cc2m #topBar{height:40px;overflow:hidden}
html.cc2m #topBar>div:not(#cc2brand):not(:has(#topbarCloud)):not(:has(#topbarFrenzy)){display:none!important}
html.cc2m #cc2brand small{display:none}
html.cc2m #sectionLeft,html.cc2m #sectionMiddle,html.cc2m #sectionRight{display:none;left:0!important;right:0!important;top:0!important;bottom:0!important;width:auto!important;margin:0!important;padding:0!important}
html.cc2m.cc2tab-bake #sectionLeft{display:block}
html.cc2m.cc2tab-store #sectionRight{display:block}
html.cc2m.cc2tab-build #sectionMiddle{display:block}
html.cc2m #centerArea{left:0!important}
html.cc2m .product,html.cc2m .storeSection,html.cc2m #storeTitle{width:auto!important}
html.cc2m .product{margin:4px 8px!important}
html.cc2m #leftBeam,html.cc2m #rightBeam,html.cc2m .separatorLeft,html.cc2m .separatorRight{display:none!important}
html.cc2m #cc2panel{bottom:12px!important}
html.cc2m #cc2tabs{display:flex;position:fixed;left:0;right:0;bottom:0;height:64px;padding-bottom:env(safe-area-inset-bottom);z-index:100000;background:linear-gradient(#2a1b12,#1a110b);border-top:1px solid var(--cc2-line)}
#cc2tabs button{flex:1;background:none;border:0;color:var(--cc2-dim);font:bold 12px Tahoma,Arial,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}
#cc2tabs button span{font-size:20px;line-height:1}
#cc2tabs button.on{color:var(--cc2-gold)}
#cc2tabs button em{font-style:normal;font-size:10px;color:var(--cc2-cream);opacity:.8}
#cc2tabs button i{font-style:normal;background:#c0392b;color:#fff;border-radius:8px;font-size:10px;padding:0 5px;margin-left:2px}

/* phone: smaller notification stack so it does not cover the cookie */
html.cc2m #notes{transform:scale(.72);transform-origin:bottom center;left:0!important;right:0!important}
html.cc2m #versionNumber{display:none}

/* menu buttons: own chocolate tabs instead of the wooden panelMenu3 sprite */
.panelButton{background:linear-gradient(#5a3820,#3a2414)!important;border:1px solid rgba(255,214,110,.28);border-radius:12px;width:92px;height:40px;margin:4px;padding-top:10px!important;font-family:Merriweather,Georgia,serif;color:var(--cc2-cream);text-shadow:0 1px 2px #000;box-shadow:0 2px 6px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,230,180,.18)}
.panelButton:hover,.panelButton.selected{background:linear-gradient(#7a4c26,#4a2c16)!important;color:var(--cc2-gold);border-color:rgba(255,214,110,.6)}
.panelButton .subButton{box-shadow:none!important;padding:0;top:0}

/* ---- tablets & landscape phones (html.cc2two): cookie + store side by side, Buildings on its own tab ---- */
html.cc2m.cc2two.cc2tab-bake #sectionLeft{display:block;right:min(46%,420px)!important;width:auto!important}
html.cc2m.cc2two.cc2tab-bake #sectionRight{display:block;left:auto!important;right:0!important;width:min(46%,420px)!important;border-left:1px solid var(--cc2-line)}
html.cc2m.cc2two #cc2tabs button[data-t=store]{display:none}
/* ---- short screens (html.cc2short, landscape phones): slimmer bars, CC2 panel folds to its title + streak bar ---- */
html.cc2short #topBar{height:34px}
html.cc2short #game{top:34px!important;bottom:calc(46px + env(safe-area-inset-bottom))!important}
html.cc2short #cc2tabs{height:46px}
html.cc2short #cc2tabs button{flex-direction:row;gap:6px}
html.cc2short #cc2tabs button span{font-size:16px}
html.cc2short #cc2panel{bottom:6px!important;padding:4px 6px!important;font-size:11px}
html.cc2short #cc2panel:not(.open)>:not(.cc2h):not(.cc2bar){display:none}
html.cc2short #cc2panel .cc2h span{cursor:pointer}
html.cc2short #cc2panel .cc2h span::after{content:" \25B8"}
html.cc2short #cc2panel.open .cc2h span::after{content:" \25BE"}
/* ---- small phones: keep the cloud-save button reachable ---- */
@media (max-width:420px){html.cc2m #cc2brand{font-size:14px;padding:0 6px!important}html.cc2m #topbarFrenzy{font-size:0!important;padding-left:24px!important}}
html body{margin:0}
html,body{overflow-x:hidden!important}
html.cc2short #smallSupport,html.cc2short #sectionRight>.ifNoAds{display:none!important}