/* 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 (owner 10-26 "art cổ điển tương tự bản cũ"): CLASSIC — blue plank wall, stone store tiles, wood frames, like v1 (CC2 game art is exempt from no-blue). */
: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 ---- */
/* 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=20261027z)!important}
html body .icon,html body .crate,html body .usesIcon{background-image:url(/cookie-clicker-2/art/icons.png?v=20261029zz80)}
[style*="img/icons.png"]{background-image:url(/cookie-clicker-2/art/icons.png?v=20261029zz80)!important}
.shimmer[style*="img/goldCookie.png"]{background-image:url(/cookie-clicker-2/art/goldCookie.png?v=20261102c)!important}
.shimmer[style*="img/wrathCookie.png"]{background-image:url(/cookie-clicker-2/art/wrathCookie.png?v=20261102c)!important}
.shimmer[style*="img/familiars.png"]{background-image:url(/cookie-clicker-2/art/familiars.png?v=20261028ze)!important}
.shimmer[style*="img/hearts.png"]{background-image:url(/cookie-clicker-2/art/hearts.png?v=20261027p)!important}
.shimmer[style*="img/bunnies.png"]{background-image:url(/cookie-clicker-2/art/bunnies.png?v=20261027p)!important}
.shimmer[style*="img/goldCookieWreath.png"]{background-image:url(/cookie-clicker-2/art/goldCookieWreath.png?v=20261027p)!important}
.shimmer[style*="img/wrathCookieWreath.png"]{background-image:url(/cookie-clicker-2/art/wrathCookieWreath.png?v=20261027p)!important}
.price:before,.hasTinyCookie:before,[style*="img/money.png"]{background-image:url(/cookie-clicker-2/art/money.png?v=20261029zz43)!important}
.heavenly.price:before{background-image:url(/cookie-clicker-2/art/heavenlyMoney.png?v=20261029zz43)!important}
.lump.price:before{background-image:url(/cookie-clicker-2/art/sugarLump.png?v=20261029zz43)!important}
.elderWrath #bigCookie{background-image:url(/cookie-clicker-2/art/imperfectCookie.png?v=20261102c)!important}
#gardenCursor,.gardenSeedIcon,.gardenTileIcon,[style*="img/gardenPlants.png"]{background-image:url(/cookie-clicker-2/art/gardenPlants.png?v=20261029zz55)!important}
[style*="img/dragon.png"]{background-image:url(/cookie-clicker-2/art/dragon.png?v=20261028zf)!important}
[style*="img/santa.png"]{background-image:url(/cookie-clicker-2/art/santa.png?v=20261027p)!important}
#gardenBG{background-size:auto!important;background-image:url(/cookie-clicker-2/art/BGgarden.jpg?v=20261028zg)!important}  /* T62: minigames inject a <style> rule, not inline style */
#templeBG{background-size:auto!important;background-image:url(/cookie-clicker-2/art/BGpantheon.jpg?v=20261028zg)!important}  /* T62: minigames inject a <style> rule, not inline style */
#grimoireBG{background-size:auto!important;background-image:url(/cookie-clicker-2/art/BGgrimoire.jpg?v=20261028zg)!important}  /* T62: minigames inject a <style> rule, not inline style */
#bankBG{background-size:auto!important;background-image:url(/cookie-clicker-2/art/BGmarket.jpg?v=20261028zg)!important}  /* T62: minigames inject a <style> rule, not inline style */
/* T143: Orteil's stretched img/shadedBorders.png vignette dropped from the 4 minigame backgrounds → hand-drawn inset pixel bevel
   (minivig143.py, 9-slice 16px); img/mapBG.jpg behind .rowSpecial → own walnut ledger boards */
#gardenBG::after,#templeBG::after,#grimoireBG::after,#bankBG::after{content:'';position:absolute;inset:0;pointer-events:none;border:16px solid transparent;border-image:url(/cookie-clicker-2/art/ui/vigM.png?v=20261029zz63) 16 round;image-rendering:pixelated}
.row .rowSpecial{background:#1c120a url(/cookie-clicker-2/art/ui/ledger.png?v=20261028v)!important}
html body .gardenTile:before{background-image:url(/cookie-clicker-2/art/gardenPlots.png?v=20261029zz44)!important;opacity:.85}  /* T124: hand-drawn tilled bed, keep it readable over BGgarden */
html body .gardenTile:hover:before{opacity:1}
html body .gardenSeed.on:before{background-image:url(/cookie-clicker-2/art/selectTarget.png?v=20261029zz56)!important;image-rendering:pixelated}  /* T136: brass corner brackets around the chosen seed (gardenui136.py) */
[style*="img/turnInto.png"]{background-image:url(/cookie-clicker-2/art/turnInto.png?v=20261029zz56)!important;image-rendering:pixelated}
img[src*="img/gardenTip.png"]{content:url(/cookie-clicker-2/art/gardenTip.png?v=20261029zz56);image-rendering:pixelated}
html body .bankViewHide{background-image:url(/cookie-clicker-2/art/tinyEyeOn.png?v=20261029zz56)}
html body .bankHidden .bankViewHide{background-image:url(/cookie-clicker-2/art/tinyEyeOff.png?v=20261029zz56)}
.separatorLeft,.separatorRight{background:url(/cookie-clicker-2/art/panelVertical.png?v=20261027p) repeat-y!important}
.separatorBottom{background:url(/cookie-clicker-2/art/panelHorizontal.png?v=20261027p) repeat-x!important}

/* top bar: brand on the left, promos removed */
#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: classic stone tiles (own art storeTile.jpg) on the blue wall, a shade darker like v1 */
#sectionRight{background:linear-gradient(rgba(0,0,0,.32),rgba(0,0,0,.32)),url(/cookie-clicker-2/art/bgBlue.jpg?v=20261102f)!important}
.product{background:url(/cookie-clicker-2/art/storeTile.jpg?v=20261029zz39)!important}
.product.unlocked.enabled{opacity:1}
.cc2info{position:absolute;left:68px;right:8px;bottom:3px;font:11px Tahoma,Arial,sans-serif;color:#f3efe2;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 */

/* the CC2 panel (cc2.js) sits under the big cookie */

/* 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 #cc2tabs{display:flex;position:fixed;left:0;right:0;bottom:0;height:64px;padding-bottom:env(safe-area-inset-bottom);z-index:100000;background:#24170d url(/cookie-clicker-2/art/ui/tabbar.png?v=20261029zz69) left top/256px 64px repeat-x;image-rendering:pixelated;box-shadow:0 -2px 6px rgba(0,0,0,.45)}
#cc2tabs button{flex:1;background:none;border:0;margin:8px 0 3px;color:#f3e6cf;text-shadow:0 1px 2px #000;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{width:24px;height:24px;flex:none;background:url(/cookie-clicker-2/art/ui/tabs.png?v=20261028zz2) 0 0/72px 24px no-repeat;image-rendering:pixelated;filter:drop-shadow(0 1px 0 rgba(0,0,0,.55))}
#cc2tabs .ti-store{background-position:-24px 0}#cc2tabs .ti-build{background-position:-48px 0}
#cc2tabs button+button:not(.on){background:url(/cookie-clicker-2/art/ui/tabdiv.png?v=20261029zz69) left center/8px 56px no-repeat;image-rendering:pixelated}
html.cc2short #cc2tabs button+button:not(.on){background-size:8px 34px}
html.cc2short #cc2tabs button.on{margin:-4px 4px 2px}
#cc2tabs button.on{color:var(--cc2-gold);margin:-7px 4px 2px;gap:0;position:relative;border:3px solid transparent;border-image:url(/cookie-clicker-2/art/ui/tabon.png?v=20261029zz69) 12 fill/12px round;image-rendering:pixelated;background:none;box-shadow:0 2px 3px rgba(0,0,0,.5)}
#cc2tabs button em{font-style:normal;font-size:10px;line-height:14px;min-height:14px;display:block;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 left;left:6px!important;right:auto!important;margin:0!important}
/* phone: only the newest note (core shows 5 → half the screen), docked above the CC2 panel by cc2.js notesDock; older ones wait underneath, the side x closes all */
html.cc2m #notes .note:nth-last-child(n+3),html.cc2m #notes .remaining{display:none}
html.cc2m #notes .note h5{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html.cc2m #versionNumber{display:none}

/* menu buttons: own wooden plaques (classic look, drawn in CSS instead of the panelMenu3 sprite) */
.panelButton{background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 3px,transparent 3px 11px),linear-gradient(#6e4a2c,#4a2f1a)!important;border:2px solid #2a1a0e;border-radius:4px;width:92px;height:40px;margin:4px;padding-top:10px!important;font-family:Merriweather,Georgia,serif;color:#fff;text-shadow:0 1px 2px #000;box-shadow:0 2px 4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,220,170,.25)}
.panelButton:hover,.panelButton.selected{background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 3px,transparent 3px 11px),linear-gradient(#86603a,#5a3b22)!important;color:#fff;border-color:#2a1a0e}
.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 em:empty{display:none}

/* ---- 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.cc2m #topBar>div{padding-left:5px;padding-right:5px}html.cc2m #topbarFrenzy::before{content:'Frenzy';font-size:12px;font-weight:bold;color:#ddd}html.cc2m #topbarFrenzy .ff-badge{font-size:12px}html.cc2m #topbarCloud{font-size:12px!important}}@media (max-width:360px){html.cc2m #cc2brand{font-size:12px;padding:0 4px!important}html.cc2m #topBar>div{padding-left:4px;padding-right:4px}}@media (max-width:340px){html.cc2m #topbarFrenzy::before{content:none}}
html body{margin:0}
html,body{overflow-x:hidden!important}
html.cc2short #smallSupport,html.cc2short #sectionRight>.ifNoAds{display:none!important}
/* phone Buildings tab: core puts #lumps at left:-8px (icon -16px) → half off-screen; empty tab gets a hint instead of a bare plank wall */
html.cc2m #lumps{left:16px}
/* desktop town column: core left:-8px clips half the lump off-screen (v1.9) */
html:not(.cc2m) #lumps{left:14px}
html.cc2m #rows:not(:has(.row.enabled))::before{content:'Your buildings live here. Buy a Grandma or a Farm in the Store and watch them work.';display:block;margin:28px 16px;padding:14px 16px;font:15px/1.4 Merriweather,Georgia,serif;color:#fff;text-align:center;text-shadow:0 1px 2px #000;background:rgba(0,0,0,.35);border:2px solid rgba(0,0,0,.4);border-radius:8px}
html.cc2m #game.onMenu #rows:not(:has(.row.enabled))::before{display:none}
/* ---- 10-27 polish (owner: "sáng quá, con nít, không chỉn chu như bản gốc"): CC2 panel/brand in Orteil's sober style — dark framed box, white serif titles, wood buttons, no bright yellow ---- */
#cc2brand{color:#fff!important;text-shadow:0 1px 2px #000}
#cc2max{background:linear-gradient(#6e4a2c,#4a2f1a)!important;color:#fff!important;border:1px solid #2a1a0e!important}
#cc2max.on{background:linear-gradient(#a07a48,#6e4a2c)!important;color:#fff!important}
.cc2info b{color:#fff!important}
#storeBulk .storePreButton.selected{color:#fff!important;text-shadow:0 0 6px rgba(255,255,255,.5)!important}

/* ==== REDESIGN R1 (10-28, owner "đổi mới toàn bộ… sắp layout cũng khác"): new layout, same engine ====
   html.cc2n = new layout on every device (off with localStorage cc2layout=classic), html.cc2d = desktop part of it.
   Desktop: bakery stage on the left (the core measures mouse/wrinklers/particles from x=0, so the cookie canvas stays
   anchored there), a STORE DRAWER of building cards across the top right, the TOWN (building rows) as a framed
   window under it, menu plaques + news in a slim bar on the town window. Menus open over the whole right side. */
html.cc2d{--L:clamp(330px,30vw,460px);--S:56%}
html.cc2d #sectionLeft{width:var(--L)!important}
html.cc2d #leftBeam{left:var(--L)!important}
html.cc2d #rightBeam{display:none!important}
html.cc2d #sectionRight{left:calc(var(--L) + 16px)!important;right:0!important;top:0!important;height:var(--S)!important;width:auto!important}
html.cc2d #sectionRight>.ifNoAds,html.cc2d #smallSupport{float:right;clear:right;margin:0 0 6px 8px}
html.cc2d #store{display:flow-root;padding:0 0 8px}
html.cc2d #support{clear:both;margin-top:24px!important}
html.cc2d #storeTitle{width:auto!important;text-align:left;font-size:22px;padding:8px 12px 4px!important;background:none}
html.cc2d .storeSection{width:auto!important}
html.cc2d #store:after{display:none}
/* T120: short desktop screens (1366x768, 1280x720) saw ~2.5 rows of store cards: drop the 'Store' heading, give the store 62% */
@media (max-height:900px){html.cc2d{--S:62%}html.cc2d #storeTitle{display:none!important}}
html.cc2d #sectionMiddle{left:calc(var(--L) + 16px)!important;right:0!important;top:var(--S)!important;bottom:0!important;margin:0!important;padding:16px 0 0!important;overflow:hidden}
html.cc2d #sectionMiddle::before{content:'';position:absolute;left:0;right:0;top:0;height:16px;z-index:6;background:url(/cookie-clicker-2/art/panelHorizontal.png?v=20261027p) repeat-x}
html.cc2d #game.onMenu #sectionMiddle{top:0!important;z-index:60}
html.cc2d #comments{height:44px!important;padding:0 8px!important;display:flex;align-items:center;gap:6px;box-sizing:border-box;background:repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 2px,transparent 2px 13px),linear-gradient(#4a3020,#2e1d12)!important;border-bottom:2px solid #1a0f08;box-shadow:inset 0 1px 0 rgba(255,220,170,.18)}
html.cc2d #comments .panelButton{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;flex:none;width:auto;min-width:64px;height:32px;margin:0;padding:6px 10px 0!important;font-size:14px;box-sizing:border-box}
html.cc2d #comments .panelButton .subButton,html.cc2d #comments .panelButton>div:first-child{position:static}
html.cc2d #ascendMeterContainer{left:2px;right:2px;width:auto!important;bottom:1px}
html.cc2d #ascendNumber{right:auto;left:calc(100% + 6px);top:50%;transform:translateY(-50%);z-index:200;font-size:13px;line-height:15px;white-space:nowrap;pointer-events:none} /* T66: beside the Legacy button, same bar; at top:34px it hung over the first line of the minigame / rows below */
html.cc2d #legacyButton:has(>#ascendNumber[style*="block"]){margin-right:56px}
html.cc2d #checkForUpdate{display:none!important}
html.cc2d #commentsText{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;flex:1;height:40px;font-size:13px;line-height:1.25;order:9}
html.cc2d #commentsText .commentsText{display:flex;align-items:center;justify-content:center;height:40px;padding:0 4px}
html.cc2d #comments .separatorBottom{display:none}
html.cc2d #centerArea{top:44px!important;left:0!important}
/* store drawer: building CARDS in a grid (every new-layout device) */
html.cc2n #products{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:6px;padding:6px 8px 8px;box-sizing:border-box}
html.cc2n #products::before,html.cc2n #storeBulk{grid-column:1/-1}
html.cc2n #storeBulk{width:auto!important;margin:0}
html.cc2n .product{width:auto!important;height:90px;margin:0!important;border:2px solid #2a1d12;border-radius:4px;box-sizing:border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.25),0 2px 3px rgba(0,0,0,.55);background-size:300px 256px!important}
html.cc2n .product.toggledOff{display:none}
html.cc2n .product .icon{left:3px;top:3px}
html.cc2n .product .content{left:66px;top:3px;right:3px;bottom:16px;padding:2px 2px 0}
html.cc2n .product .productName,html.cc2n .product .longProductName{display:block;font-size:15px!important;line-height:1.05;letter-spacing:0;padding:0!important;overflow:hidden;max-height:32px;word-break:break-word}
html.cc2n .product .longProductName{font-size:13px!important}
html.cc2n .product .price{display:block;font-size:13px;margin-top:2px;white-space:nowrap}
html.cc2n .product .content .owned{font-size:26px;right:4px;bottom:-14px;opacity:.28}
html.cc2n .cc2info{left:5px;right:5px;bottom:2px;font-size:10px}
html.cc2n .storeSection.upgradeBox:empty{display:none}
html.cc2n .product .content .owned{bottom:-1px;font-size:24px}
html.cc2d #notes{left:calc(var(--L) + 24px)!important;right:auto!important;bottom:6px!important;margin:0!important;transform:scale(.85);transform-origin:bottom left}
html.cc2d #notes .note:nth-last-child(n+5){display:none}
html.cc2n .product .productName span{letter-spacing:0!important;bottom:0!important;font-size:inherit!important;word-spacing:2px}
html.cc2n #products::before{display:none}
html.cc2d #sectionRight{z-index:1}
html.cc2d #game.onMenu #sectionMiddle{z-index:2;right:324px!important}
html.cc2n .product .icon{transform:scale(.8);transform-origin:0 0;image-rendering:pixelated}
html.cc2n .product .content{left:56px}
html.cc2n .product .productName,html.cc2n .product .longProductName{font-size:14px!important;word-break:normal;overflow-wrap:break-word}
html.cc2n .product .longProductName{font-size:12px!important}
html.cc2d #notes .note:nth-last-child(n+4){display:none}
/* R2 (10-28): v1 "X's bakery" pill + big floating number → one pixel wood scoreboard (bakery name tab on top, gold count, CpS chip). Engine still writes #cookies/#bakeryName. */
html.cc2n #bakeryNameAnchor{top:6px!important;height:0}
html.cc2n #bakeryName{top:0;bottom:auto;left:50%;width:auto;max-width:min(78%,300px);transform:translateX(-50%);box-sizing:border-box;padding:3px 14px 2px;font-size:14px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f3e6cf;background:linear-gradient(#6b4527,#4a2e19);border:2px solid #1a0f08;border-bottom:0;border-radius:4px 4px 0 0;box-shadow:inset 0 1px 0 rgba(255,220,170,.35);z-index:2}
html.cc2n #bakeryName:hover{color:#ffd66e;text-shadow:0 1px 0 #000}
html.cc2n #cookies{top:28px!important;left:50%;width:min(92%,340px);transform:translateX(-50%);box-sizing:border-box;padding:6px 10px 7px;font-size:16px;line-height:1.1;color:#f3e6cf;
 background:repeating-linear-gradient(180deg,transparent 0 13px,rgba(0,0,0,.22) 13px 15px,rgba(255,220,170,.06) 15px 16px),linear-gradient(#5a3a22,#3b2414);
 border:2px solid #1a0f08;border-radius:4px;box-shadow:inset 0 2px 0 rgba(255,220,170,.25),inset 0 -3px 0 rgba(0,0,0,.35),inset 2px 0 0 rgba(255,220,170,.10),inset -2px 0 0 rgba(0,0,0,.25),0 3px 0 rgba(0,0,0,.45);
 text-shadow:0 2px 0 #1a0f08,1px 0 0 #1a0f08,-1px 0 0 #1a0f08}
html.cc2n #cookies::first-line{font-size:30px;color:#ffd66e;letter-spacing:.5px}
html.cc2n #cookies::before,html.cc2n #cookies::after{content:'';position:absolute;top:5px;width:4px;height:4px;background:#c9a46a;box-shadow:1px 1px 0 #1a0f08,0 0 0 1px #3b2414;left:5px}
html.cc2n #cookies::after{left:auto;right:5px}
html.cc2n #cookiesPerSecond{display:table;margin:4px auto 0;padding:2px 8px 1px;font-size:13px;line-height:16px;color:#e9dcc4;background:rgba(20,12,6,.55);border:1px solid #1a0f08;border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,220,170,.12)}
html.cc2n #cookiesPerSecond.wrinkled{color:#ff8a7a}
html.cc2n #buffs{top:120px}
/* R5 (10-28): "Now:" one-line advice plaque under the scoreboard (cc2.js nowLine sets top; tap = do it) */
#cc2now{display:none}
html.cc2n #cc2now{display:block;position:absolute;z-index:10001;left:50%;transform:translateX(-50%);width:max-content;max-width:min(94%,380px);box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 9px 1px;font:12px/16px Tahoma,Arial,sans-serif;color:#e9dcc4;text-shadow:0 1px 0 #1a0f08;border:5px solid transparent;border-width:5px 6px;border-image:url(/cookie-clicker-2/art/ui/plaque9.png?v=20261028v) 5 6 fill round;pointer-events:none}
html.cc2n #cc2now i{font-style:normal;font-weight:bold;color:#1a0f08;background:#c9a46a;border-radius:2px;padding:0 4px;margin-right:6px;box-shadow:inset 0 -1px 0 #8a6a3a}
html.cc2n #cc2now b{color:#ffe7b0}
html.cc2n #cc2now.hot b{color:#ffd66e}
html.cc2n #cc2now.hot i{background:#ffd66e}
html.cc2n #cc2now.act{pointer-events:auto;cursor:pointer}
html.cc2n #cc2now.wrap{white-space:normal;width:94%;text-align:center}
html.cc2n #cc2now.warn{animation:cc2warn .5s steps(2) infinite}@keyframes cc2warn{50%{filter:brightness(1.45) saturate(1.3)}}
@media (prefers-reduced-motion:reduce){html.cc2n #cc2now.warn{animation:none}}
html.cc2n #cc2now.act:hover{filter:brightness(1.15)}
@media (max-height:500px){html.cc2n #bakeryNameAnchor{top:2px!important}html.cc2n #bakeryName{font-size:11px;line-height:14px;padding:2px 10px 1px}html.cc2n #cookies{top:19px!important;width:auto;min-width:180px;max-width:92%;padding:3px 10px 4px;font-size:12px}html.cc2n #cookies::first-line{font-size:20px}html.cc2n #cookiesPerSecond{font-size:11px;line-height:13px;margin-top:2px}html.cc2n #buffs{top:84px}html.cc2n #cc2now{font-size:11px;line-height:13px;padding:1px 8px 0}}
/* R3 (10-28): CC2's own frame set (art/ui/*.png = ~/w3-agents/cc2-art/frames.py, hand-placed): walnut frame with brass corners for
   panels/tooltips/notes, iron-rimmed store cards, brass-rim wood plaques for menu buttons, iron-strapped beams instead of v1 panel beams. */
html.cc2n #tooltip.framed{padding:2px 4px}
html.cc2n .framed .close{top:2px;right:2px}
html.cc2n #notes .note{padding:4px 18px 8px 6px}
html.cc2n .product{border:4px solid transparent!important;border-image:url(/cookie-clicker-2/art/ui/card9.png?v=20261028u) 4 round!important;image-rendering:pixelated;border-radius:0;box-shadow:0 2px 3px rgba(0,0,0,.55)}
html.cc2n .product .icon{image-rendering:pixelated}
html.cc2n #storeBulk{border:7px solid transparent;border-image:url(/cookie-clicker-2/art/ui/frame9.png?v=20261028u) 7 round;image-rendering:pixelated;background:#1c130c;box-shadow:none;height:auto;min-height:32px}
html.cc2n .separatorLeft,html.cc2n .separatorRight{background:url(/cookie-clicker-2/art/ui/beamV.png?v=20261028u) repeat-y!important;image-rendering:pixelated}
html.cc2n .separatorBottom{background:url(/cookie-clicker-2/art/ui/beamH.png?v=20261028u) repeat-x!important;image-rendering:pixelated}
html.cc2d #sectionMiddle::before{background:url(/cookie-clicker-2/art/ui/beamH.png?v=20261028u) repeat-x;image-rendering:pixelated}
html.cc2d #comments .panelButton{background:linear-gradient(#7a5230,#5a3a20 60%,#4a2e19)!important;border:4px solid transparent;border-image:url(/cookie-clicker-2/art/ui/btn9.png?v=20261028u) 4 round;image-rendering:pixelated;padding:3px 10px 0!important;height:32px;color:#f3e6cf;text-shadow:0 1px 0 #1a0f08}
html.cc2d #comments .panelButton .subButton{box-shadow:none;padding:0;top:0;font-size:14px;line-height:22px}
html.cc2d #comments .panelButton:hover,html.cc2d #comments .panelButton.selected{background:linear-gradient(#9a6c40,#7a5230 60%,#5a3a20)!important;color:#ffd66e}
html.cc2n .cc2info{white-space:nowrap;line-height:11px;max-height:22px;bottom:1px}
html.cc2n .product{height:96px}
html.cc2n #notes .note h5{line-height:1.25;padding-top:1px}
html.cc2d #legacyButton #ascendMeterContainer{top:auto;bottom:-3px;height:3px;overflow:hidden}
html.cc2n:not(.cc2d) #legacyButton #ascendMeterContainer{left:3px;right:3px;width:auto!important;top:auto;bottom:-4px;height:4px;overflow:hidden} /* T157: phone/tablet bar sat over the "Legacy" label (10px tall, 102px wide on a 92px button) → thin strip under the button like desktop */
/* R4 (10-28): menus (Options/Stats/Info/Legacy) on CC2's own boards — walnut ledger backdrop in a brass-corner frame, section titles on a
   notched pixel plaque, subsection titles over a brass rail, wood-plaque option buttons; upgrade/achievement crates in own frames (art/ui/crate.png,
   same 180x120 layout as the core upgradeFrame sheet). All art = ~/w3-agents/cc2-art/frames.py. */
html.cc2n #game.onMenu #centerArea{background:url(/cookie-clicker-2/art/ui/ledger.png?v=20261028v) repeat fixed!important;image-rendering:pixelated;border:7px solid transparent;border-image:url(/cookie-clicker-2/art/ui/frame9.png?v=20261028u) 7 round;box-sizing:border-box}
html.cc2n #menu .section{display:table;margin:14px auto 10px;padding:4px 22px 2px;font-size:24px;color:#ffe7b0;background:none;border:6px solid transparent;border-width:5px 6px;border-image:url(/cookie-clicker-2/art/ui/plaque9.png?v=20261028v) 5 6 fill round;text-shadow:0 2px 0 #1a0f08,1px 0 0 #1a0f08,-1px 0 0 #1a0f08}
html.cc2n #menu .section:before,html.cc2n #menu .section:after{display:none}
html.cc2n #menu .subsection div.title{background:none;padding-left:16px;font-size:20px;color:#f3e6cf;text-shadow:0 2px 0 #1a0f08}
html.cc2n #menu .subsection div.title:before{display:none}
html.cc2n #menu .subsection div.title:after{width:min(60%,340px);height:5px;margin:4px 0 0 -16px;background:url(/cookie-clicker-2/art/ui/rule.png?v=20261028v) repeat-x;image-rendering:pixelated}
html.cc2n #menu .listing{color:#d9cbb0}
html.cc2n #menu .listing b{color:#e9dcc4}
html.cc2n #menu a.option,html.cc2n #menu a.smallFancyButton{border:4px solid transparent;border-image:url(/cookie-clicker-2/art/ui/btn9.png?v=20261028u) 4 round;image-rendering:pixelated;border-radius:0;background:linear-gradient(#6a4628,#4a2e19);color:#f3e6cf;text-shadow:0 1px 0 #1a0f08;padding:2px 8px}
html.cc2n #menu a.option:hover,html.cc2n #menu a.smallFancyButton:hover{background:linear-gradient(#8a5e36,#5a3a20);color:#ffd66e}
html.cc2n #menu a.option:active{background:#3b2414}
html.cc2n #menu a.option.warning{color:#ff9a7a}
html.cc2n #menu .menuClose{background:linear-gradient(#6a4628,#4a2e19);border:4px solid transparent;border-image:url(/cookie-clicker-2/art/ui/btn9.png?v=20261028u) 4 round;image-rendering:pixelated;border-radius:0;box-shadow:0 2px 0 rgba(0,0,0,.5);padding:0 10px 2px;top:4px;right:4px;color:#f3e6cf;font-size:20px;z-index:5}
html.cc2n #menu .menuClose:hover{color:#ffd66e;background:linear-gradient(#8a5e36,#5a3a20)}
html.cc2n .crate:not(.heavenly):not(.noFrame):before{background-image:url(/cookie-clicker-2/art/ui/crate.png?v=20261028v);image-rendering:pixelated}
html.cc2n .crate:not(.heavenly):not(.noFrame){background-color:rgba(26,15,8,.45)}
/* R9: phones lay out at real size; the core scales #wrapper to an 800px desktop for one frame at boot before cc2.js
   resets it, which shifted the big cookie (CLS .16 on Pixel 7) — block that scale from the first paint */
html.cc2m #wrapper{transform:none!important;width:100%!important;height:100%!important}
/* T58: last Orteil UI pictures → own hand-placed pixel art (~/w3-agents/cc2-art/halo.py): heavenly upgrade ring (same 3-frame sheet as
   img/ascendSlot.png: owned | hover | not owned) and the choice-upgrade corner tab (img/upgradeSelector.png) */
html.cc2n .crate.heavenly:before{background-image:url(/cookie-clicker-2/art/ui/halo.png?v=20261028zc);image-rendering:pixelated}
html.cc2n .selectorCorner{background:url(/cookie-clicker-2/art/ui/selector.png?v=20261028zc);image-rendering:pixelated}
/* T68: Legacy crest + plinth (style.css #ascendBox img/ascendBox.png / #ascendInfo img/ascendInfo.png, Orteil teal-gold carvings) →
   ~/w3-agents/cc2-art/legacybox.py walnut boards + brass rim, same box sizes 344x162 / 308x94 */
html.cc2n #ascendBox{background:url(/cookie-clicker-2/art/ui/ascendBox.png?v=20261028zm) no-repeat;image-rendering:pixelated}
html.cc2n #ascendInfo{background:url(/cookie-clicker-2/art/ui/ascendInfo.png?v=20261028zm) no-repeat;image-rendering:pixelated}
/* T63: store section beams (style.css .storeSection = img/panelHorizontal) */
.storeSection{background:url(/cookie-clicker-2/art/panelHorizontal.png?v=20261027p) repeat-x top!important;padding-top:16px}
html.cc2n .storeSection{background:url(/cookie-clicker-2/art/ui/beamH.png?v=20261028u) repeat-x top!important;image-rendering:pixelated}
/* T64: Stock Market goods = walnut ledger cards with brass corners; Buy/Sell = bevelled pixel chips (moss buy, copper sell) */
html.cc2n .bankGood{background:linear-gradient(#3a2718,#2b1d13 40%,#22160e)!important;border:7px solid transparent;border-image:url(/cookie-clicker-2/art/ui/frame9.png?v=20261028u) 7 round;image-rendering:pixelated;box-shadow:0 2px 0 rgba(0,0,0,.55)!important;color:#e9d3a4!important;margin:1px;width:170px;padding:0 0 2px}
html.cc2n .bankGood.bankHidden{opacity:.6;background:rgba(34,22,14,.6)!important}
html.cc2n .bankSymbol{background:#4a3220!important;color:#f3e6cf;text-shadow:0 1px 0 #120a05;border-top:1px solid #6a4a2c;border-bottom:1px solid #1a0f08}
html.cc2n .bankGood .bankSymbol[style*="gradient"]{background:linear-gradient(to right,transparent,#4a3220 18%,#4a3220 82%,transparent)!important;border:0}
html.cc2n .bankSymbolUp{color:#a8d64e}
html.cc2n .bankSymbolDown{color:#ec5a40}
html.cc2n .bankButton{opacity:1;border:1px solid;border-radius:0;padding:2px 5px 1px;margin:0 1px 1px 0;text-shadow:0 1px 0 #0e0804;box-shadow:0 1px 0 #0e0804;image-rendering:pixelated}
html.cc2n .bankButtonBuy{color:#e6f2b8;background:linear-gradient(#6f8a2c,#536a1e 55%,#45581a);border-color:#a4c255 #2c3a0e #2c3a0e #a4c255}
html.cc2n .bankButtonSell{color:#fbe2bd;background:linear-gradient(#9a5a26,#7a4219 55%,#653614);border-color:#d39250 #3e1f0a #3e1f0a #d39250}
html.cc2n .bankButtonLess{color:#ffd5c8;background:linear-gradient(#9c3424,#7a2418);border-color:#d8624c #3e0e08 #3e0e08 #d8624c}
html.cc2n .bankButton:hover{filter:brightness(1.18)}
html.cc2n .bankButton:active{filter:brightness(.85);transform:translateY(1px);box-shadow:none;color:#fff}
html.cc2n .bankButton.bankButtonOff{color:#9c8a74;background:#3a2c20;border-color:#5a4632 #1e140c #1e140c #5a4632;filter:none;opacity:.75}
html.cc2n .bankGood .bankButton{min-width:14px}
/* v1.16 Market hints: one line under stock, cheap/pricey vs resting value or gain on what you hold */
.cc2mk{margin:1px 0;padding:1px 0;font:bold 10px/12px Tahoma,Arial,sans-serif;color:#c9b48e;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 #0e0804}
.cc2mk.cc2mkup{color:#a8d64e}.cc2mk.cc2mkdn{color:#ec7a5e}
.cc2mk.cc2mkhot{color:#2a1a0c;background:linear-gradient(#f3d27a,#d9a83e);border-top:1px solid #fff0b8;border-bottom:1px solid #8a5a1c;text-shadow:none}
.bankGood.bankHidden .cc2mk{display:none}
html.cc2n #bankGraphBox{background:#2b1d13;border:7px solid transparent;border-image:url(/cookie-clicker-2/art/ui/frame9.png?v=20261028u) 7 round;image-rendering:pixelated}
html.cc2n .bankSimpleButton{color:#f0c96a;text-shadow:0 1px 0 #120a05}

/* T66: top-bar Free Frenzy icon = own gold pixel cookie (topicons.py), not Orteil goldCookie24 */
#topBar .frenzy-icon{background:url(/cookie-clicker-2/art/goldCookie24.png?v=20261102d) 0 0/24px 24px no-repeat!important}
/* T70: last Orteil pictures on building rows + meters (meters.py, hand-placed): lump level-up arrow, Legacy/Grimoire fill + cap */
.productLevel:after{background:url(/cookie-clicker-2/art/ui/levelup.png?v=20261028zo) no-repeat;image-rendering:pixelated}
.meter{background-image:url(/cookie-clicker-2/art/ui/meter.png?v=20261028zo);image-rendering:pixelated}
.meter:after{background:url(/cookie-clicker-2/art/ui/metercap.png?v=20261028zo);image-rendering:pixelated}
/* T71: Grimoire spell + Pantheon god cards (spellcard.py, hand-placed): v1 spellBG sheet layout kept (4 variants x normal/hover/active) */
html .grimoireSpell,html .templeGod{background-image:url(/cookie-clicker-2/art/ui/spell.png?v=20261028zp);image-rendering:pixelated}
/* T72 prompt wings (Ascend/Options/Legacy prompts, .winged titles): hand-drawn bronze quills, replaces img/featherLeft/Right.png */
html #prompt h3:before,html .prompt h3:before,html .winged:before{background:url(/cookie-clicker-2/art/ui/featherL.png?v=20261028zq) no-repeat;background-size:39px 23px;image-rendering:pixelated}
html #prompt h3:after,html .prompt h3:after,html .winged:after{background:url(/cookie-clicker-2/art/ui/featherR.png?v=20261028zq) no-repeat;background-size:39px 23px;image-rendering:pixelated}
/* T74 (10-28): Legacy screen — desktop notes sat on #ascendInfo ("You are ascending…") at the bottom centre → park them bottom-left while ascending */
html.cc2d #game.ascending #notes{left:24px!important;bottom:34px!important}
html.cc2n .product[data-nm2] .priceMult{display:none}
html.cc2n .product.locked .productName{display:none}html.cc2n .product .lockedTitle{font-size:15px;line-height:1.05;padding:0}
/* T112: keep one upgrade row reserved so the building grid never jumps when the store's last upgrade is bought / the first one unlocks (was ~76 px shift → misclicks, bulk tooltip popping under the pointer) */
html.cc2n #upgrades.storeSection.upgradeBox:empty{display:block;min-height:60px;position:relative}
html.cc2n #upgrades.upgradeBox:empty::before{content:"New upgrades show up here";display:block;position:absolute;padding:0;margin:0;background:none;width:auto;height:auto;left:0;right:0;top:34px;text-align:center;font:12px Merriweather,Georgia,serif;color:#cdb896;opacity:.55;text-shadow:0 1px 0 #000;pointer-events:none}
/* T118 (10-29): store card info (+CpS · payback) was light-grey text on the light stone tile — hard to read. Now a dark walnut strip
   across the card foot (lit top edge like the card9 rim), cream text; the big owned count sits just above it instead of under it. */
html.cc2n .cc2info{left:0;right:0;bottom:0;padding:2px 6px 2px;background:linear-gradient(#3a2716,#26180d);border-top:1px solid #120a05;box-shadow:inset 0 1px 0 rgba(255,214,150,.18);color:#f6ecd4;text-shadow:0 1px 0 #000;max-height:none}
html.cc2n .cc2info:empty{display:none}
html.cc2n .product .content{bottom:24px}
html.cc2n .product .content .owned{bottom:-4px;opacity:.32}
/* T119: cards = own hand-placed limestone (art/ui/stone.png 96x48 x2, tiles both axes) instead of the 64px slab sheet,
   whose seam showed as a dark band across 96px cards; each column starts the stone at a different spot. */
html.cc2n .product{background:url(/cookie-clicker-2/art/ui/stone.png?v=20261029zz39) 0 0/192px 96px repeat!important}
html.cc2n .product:nth-child(4n-3){background-position:-64px -24px!important}
html.cc2n .product:nth-child(4n-2){background-position:-128px -48px!important}
html.cc2n .product:nth-child(4n-1){background-position:-36px -72px!important}
/* T121 (10-29): desktop notes sat bottom-left on the building rows (where the sprites start) and on the open Stats/Options menu → dock them
   bottom-right: under the ad column, beside the menu (menu ends right:324px), over the rows' usually empty right end. Legacy keeps bottom-left. */
html.cc2d #notes{left:auto!important;right:10px!important;transform-origin:bottom right}
html.cc2d #game.ascending #notes{right:auto!important;transform-origin:bottom left}
/* T137: herald pennant (top bar + Heralds tooltip inline styles) and the '+N' prestige badge beside Legacy — own art */
[style*="img/heraldFlag.png"]{background-image:url(/cookie-clicker-2/art/heraldFlag.png?v=20261029zz57)!important;image-rendering:pixelated}
html.cc2n #ascendNumber.roundedPanel{background:none;height:auto;padding:1px 3px;border:6px solid transparent;border-image:url(/cookie-clicker-2/art/ui/badge9.png?v=20261029zz57) 6 fill repeat;image-rendering:pixelated;text-shadow:0 1px 0 #000;color:#fbe7a1}
html.cc2n #ascendNumber.roundedPanel:before,html.cc2n #ascendNumber.roundedPanel:after{display:none}
/* T138 (10-29): core .note{left:-18px} + .sidenote{right:-6px} put the "close all" x ON the note's right edge and clipped the note's
   left frame on phones (#notes at left:6px) → note sits flush in #notes, the x hangs outside: right of the note on phone/tablet,
   left of it on desktop (notes dock bottom-right since T121, nothing to the right but the screen edge). */
html.cc2n #notes .note{left:0}
html.cc2n #notes .sidenote{right:auto;left:calc(100% + 4px);bottom:4px}
html.cc2d #notes .sidenote{left:auto;right:calc(100% + 4px)}
#topBar>div:after{background:url(/cookie-clicker-2/art/topbarDiv.png?v=20261029zz59) 0 0 no-repeat}
/* T140 (10-29) landscape phones (cc2short+cc2two, ~360px tall): the stacked bakery board + Now line covered the big cookie's centre
   (taps hit the Now line, not the cookie). Board folds to one wood strip (count | per second) at the top, Now line sits under the cookie, CC2 panel to one row */
html.cc2n.cc2short.cc2two #bakeryNameAnchor{display:none}
html.cc2n.cc2short.cc2two #cookies{top:3px!important;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;min-width:0;padding:2px 12px 3px;font-size:11px;line-height:13px;text-align:center}
html.cc2n.cc2short.cc2two #cookies::before,html.cc2n.cc2short.cc2two #cookies::after{top:50%;margin-top:-2px}
html.cc2n.cc2short.cc2two #cookiesPerSecond{margin:0;padding:0 6px}
html.cc2n.cc2short.cc2two #cc2now{top:auto!important;bottom:50px}
html.cc2n.cc2short.cc2two #buffs{top:34px!important}
/* T141 (10-29) landscape phones: the big "Store" heading (44px) + empty-upgrades strip (76px) took 120 of the ~280px store column → only 2 building cards showed.
   Heading hidden (the tab/side already says store, as on short desktops), empty strip shrinks to one slim line; a real upgrade row keeps core height. */
html.cc2n.cc2short.cc2two #storeTitle{display:none!important}
html.cc2n.cc2short.cc2two #upgrades.storeSection.upgradeBox:empty{min-height:0;height:22px}
html.cc2n.cc2short.cc2two #upgrades.upgradeBox:empty::before{top:20px;font-size:11px;line-height:14px}
/* T142: cookie-field border = hand-drawn pixel 9-slice (vig142.py) instead of Orteil's stretched shadedBorders gradients;
   the core gets clear 4x4 pictures, cc2.js vigAura() sets data-a g (good buff) / r (bad buff) */
#cc2vig{position:absolute;inset:0;z-index:5;pointer-events:none;border:24px solid transparent;border-image:url(/cookie-clicker-2/art/ui/vig.png?v=20261029zz62) 24 round;image-rendering:pixelated}
#cc2vig[data-a=g]{border-image-source:url(/cookie-clicker-2/art/ui/vigG.png?v=20261029zz62);animation:cc2vigG 1.6s steps(4) infinite alternate}
#cc2vig[data-a=r]{border-image-source:url(/cookie-clicker-2/art/ui/vigR.png?v=20261029zz62)}
@keyframes cc2vigG{from{opacity:1}to{opacity:.7}}
@media (prefers-reduced-motion:reduce){#cc2vig[data-a=g]{animation:none}}
/* T144: top bar = hand-drawn walnut planks + brass trim (ui/topbar.png, topbar144.py) instead of Orteil darkNoiseTopBar.jpg; bottom aligned so 32/34/40px bars keep the trim */
#topBar{background:#24170d url(/cookie-clicker-2/art/ui/topbar.png?v=20261029zz64) left bottom/256px 40px repeat-x!important;image-rendering:pixelated}
html.cc2n #topBar{color:rgba(255,236,205,.5)}
/* T145: Legacy screen — Orteil's stretched img/shadedBorders.png vignette (#ascendBG, #offGameMessageWrap over darkNoise.jpg) → the
   hand-drawn pixel field border (ui/vig.png, vig142.py); heavenly-tree links img/linkPulse.gif (soft chevrons, red/green fringe) →
   hand-drawn twisted brass cord (ui/link.png, link145.py, period 8px) flowing by a stepped background shift */
#ascendBG{background:none!important;box-sizing:border-box;border:24px solid transparent;border-image:url(/cookie-clicker-2/art/ui/vig.png?v=20261029zz62) 24 round;image-rendering:pixelated}
#offGameMessageWrap{background:#170f09!important}
#offGameMessageWrap::after{content:'';position:absolute;inset:0;pointer-events:none;border:24px solid transparent;border-image:url(/cookie-clicker-2/art/ui/vig.png?v=20261029zz62) 24 round;image-rendering:pixelated}
.parentLink{background:url(/cookie-clicker-2/art/ui/link.png?v=20261029zz65) 0 0/32px 8px repeat-x!important;image-rendering:pixelated;opacity:.7;animation:cc2link .8s steps(8) infinite}
@keyframes cc2link{from{background-position:0 0}to{background-position:8px 0}}
@media (prefers-reduced-motion:reduce){.parentLink{animation:none}}
/* T146: Legacy '#ascendData1/2' (Prestige level / Heavenly chips) and top-bar dropdowns (.hoverable) — Orteil .smallFramed
   img/darkNoise.jpg + shadedBordersSoft.png, rounded CSS border → hand-drawn brass-framed walnut plate (ui/plate9.png, plate146.py, 9-slice 12; ascendData keeps v1 layout box: border 7 = old 1px+6px padding, image drawn 12px in) */
.ascendData.smallFramed{background:none!important;border:7px solid transparent;border-image:url(/cookie-clicker-2/art/ui/plate9.png?v=20261029zz66) 12 fill round;border-image-width:12px;border-radius:0;box-shadow:0 2px 0 rgba(0,0,0,.45);padding:0;image-rendering:pixelated}
.hoverable{background:none!important;box-sizing:border-box;width:auto!important;min-width:100%;white-space:nowrap;border:12px solid transparent;border-image:url(/cookie-clicker-2/art/ui/plate9.png?v=20261029zz66) 12 fill round;border-radius:0;image-rendering:pixelated}
.hoverable>div:nth-child(odd){background:rgba(255,230,180,.04)}
.hoverable>a{display:block;width:auto;padding:4px 10px}
.hoverable>a:nth-child(odd){background:rgba(255,230,180,.04)}
/* T148: last Orteil img/darkNoise.jpg layers (body behind the game, #buildingsMaster, .storePre, #sectionAd, a.option/.sliderBox/.framed base) → own dark walnut tone; the hi-pri darkNoise preload is gone from the CC2 index. Top-bar links were 50% alpha on the walnut planks → readable cream, full on hover */
body{background:#1a110b!important}
#buildingsMaster,.storePre,#sectionAd{background:#1c120a url(/cookie-clicker-2/art/ui/ledger.png?v=20261028v)!important;image-rendering:pixelated}
.framed,html .sliderBox{background-image:none!important;background-color:#24170d}
html.cc2n #topBar{color:rgba(255,236,205,.82);text-shadow:0 1px 0 #0d0805}
html.cc2n #topBar>div:hover{color:#ffe9c4}
/* T152: two-line names (Wizard tower, Alchemy lab, Time machine…) pushed the price down onto v1's big faded owned count
   ("419.943Qa" printed through "150"). The count is now a small walnut tag on the icon's bottom-right corner on every card:
   never collides with name/price, readable at a glance, and the right side of the card stays clean. */
html.cc2n .product .content .owned{right:calc(100% + 1px)!important;left:auto;bottom:-1px!important;top:auto;font:bold 12px/14px Merriweather,Georgia,serif!important;opacity:1!important;color:#f6ecd4;padding:0 3px;background:linear-gradient(#3a2716,#26180d);border:1px solid #120a05;box-shadow:inset 0 1px 0 rgba(255,214,150,.2),0 1px 2px rgba(0,0,0,.6);text-shadow:0 1px 0 #000;letter-spacing:0;z-index:102;pointer-events:none}
html.cc2n .product .content .owned:empty{display:none}
html.cc2n .product[data-nm2] .productName{line-height:1}
html.cc2n .product[data-nm2] .price{margin-top:0}
/* T156: Loading spinner = CC2 hand-drawn pixel cookies + gold lumps (was img/spinnyBig/Small.png airbrush balls) */
.spinnyBig{background:url(/cookie-clicker-2/art/ui/spinnyBig.png?v=20261029zz76)!important;image-rendering:pixelated}
.spinnySmall{background:url(/cookie-clicker-2/art/ui/spinnySmall.png?v=20261029zz76)!important;image-rendering:pixelated}
/* ==== CENTER STAGE (10-29, owner TG "trên desktop sao ko đưa cookie ở giữa"): desktop ≥1100px wide =
   [STORE column] [BAKERY with the big cookie, centred] [TOWN rows]. html.cc2c is set by /w3-touch-perf.js, which also shifts the
   core's mouse coordinates by the bakery's left edge (main.js measures them from x=0) and moves the tooltip / popup / sparkle
   layers by the same amount, so particles, "+N" numbers, wrinklers and tooltips stay under the pointer. ==== */
html.cc2c{--L:clamp(360px,30vw,520px);--W:calc((100vw - var(--L)) / 2 - 16px)}  /* store and town equally wide → the bakery sits in the middle of the screen */
html.cc2c #sectionRight{left:0!important;right:auto!important;top:0!important;bottom:0!important;width:var(--W)!important;height:auto!important;border-right:0}
html.cc2c #sectionLeft{left:calc(var(--W) + 16px)!important;width:var(--L)!important}
html.cc2c #leftBeam{left:calc(var(--W) + 16px + var(--L))!important}
html.cc2c #rightBeam{display:block!important;left:var(--W)!important;right:auto!important}
html.cc2c #sectionMiddle{left:calc(var(--W) + 32px + var(--L))!important;right:0!important;top:0!important;bottom:0!important}
html.cc2c #game.onMenu #sectionMiddle{right:0!important}
html.cc2c #products{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
html.cc2c #notes{left:calc(var(--W) + 24px)!important}
html.cc2c #tooltipAnchor,html.cc2c #particles,html.cc2c #sparkles{transform:translateX(var(--cc2dx,0px))}
html.cc2c #sectionRight>.ifNoAds,html.cc2c #smallSupport{float:none!important;clear:both;margin:6px auto!important;max-width:100%}
html.cc2c #sectionRight{overflow-x:hidden}
/* ==== 10-29 b: proportions + ad placement (owner TG "chia lại tỉ lệ… ad slots đặt vị trí thích hợp thông minh hơn bản gốc") ====
   Bakery a bit wider (bigger cookie stage), store and town equal so the cookie stays centred.
   The 300x250 unit no longer sits on top of the store (it pushed every building card down and sat right next to the buy buttons):
   it is a reserved billboard at the foot of the TOWN column — away from the cookie and the store, never over content,
   no layout shift (fixed size, space reserved), and the space is given back when the slot is unfilled or blocked. */
html.cc2c{--L:clamp(380px,32vw,600px);--W:calc((100vw - var(--L)) / 2 - 16px);--AD:296px}
html.cc2c #sectionRight>.ifNoAds{display:none!important}
html.cc2c #smallSupport{position:fixed!important;z-index:40!important;left:calc(var(--W) * 1 + 32px + var(--L) + (var(--W) - 300px) / 2)!important;bottom:6px!important;top:auto!important;width:300px!important;margin:0!important;padding:4px 0 0!important;float:none!important;background:rgba(0,0,0,.35)!important;box-shadow:0 0 0 2px #2a1a0e,0 0 0 4px rgba(255,220,170,.12)}
html.cc2c #smallSupport .supportComment{position:absolute;top:-18px;left:0;right:0;font-size:10px;opacity:.6}
html.cc2c #sectionMiddle{bottom:calc(var(--AD) + 18px)!important}
html.cc2c #game.onMenu #sectionMiddle{bottom:calc(var(--AD) + 18px)!important}
html.cc2c:has(#smallSupport ins[data-ad-status="unfilled"]) #smallSupport,html.cc2c #game.noAds #smallSupport{display:none!important}
html.cc2c:has(#smallSupport ins[data-ad-status="unfilled"]) #sectionMiddle,html.cc2c #game.noAds #sectionMiddle{bottom:0!important}
html.cc2c #support{margin-top:16px!important}
@media (max-height:700px){html.cc2c #smallSupport{display:none!important}html.cc2c #sectionMiddle{bottom:0!important}}
/* ==== 10-29 c: store on the RIGHT (owner TG "store nên bên trái hay bên phải… kích thước hợp lý hơn") ====
   [TOWN + billboard] [BAKERY, centred] [STORE]. Right side like the original (muscle memory, right-hand mouse travels
   cookie ↔ store, the core's store tooltips open to the left of the card, over the bakery), the passive town on the left,
   and the 300x250 billboard at the foot of the town = the far side of the screen from the buy buttons. */
html.cc2c #sectionRight{left:auto!important;right:0!important}
html.cc2c #sectionMiddle{left:0!important;right:auto!important;width:var(--W)!important}
html.cc2c #game.onMenu #sectionMiddle{left:0!important;right:auto!important;width:calc(var(--W) + 16px + var(--L))!important}
html.cc2c #rightBeam{left:var(--W)!important}
html.cc2c #leftBeam{left:calc(var(--W) + 16px + var(--L))!important}
html.cc2c #smallSupport{left:calc((var(--W) - 300px) / 2)!important}
html.cc2c #notes{left:calc(var(--W) + 24px)!important}
html.cc2c #game.onMenu #sectionMiddle{z-index:70!important}  /* menus (Options/Stats/Info/Legacy) open over town + bakery, store stays usable */
html.cc2c #game.onMenu #sectionMiddle{z-index:200!important;bottom:0!important}   /* menu = full height over town + bakery (bakery header / CC2 panel no longer poke through) */
html.cc2c #game.onMenu #smallSupport{visibility:hidden}                          /* never under the menu: hidden, not covered (iframe stays, no reload) */
/* ==== 10-29 d: store upgrades come alive (owner TG "các upgrade t muốn có animation") ====
   pop-in when the row is (re)built, a slow gold shine sweeping across the ones you can afford, lift on hover, squash on press.
   transform/opacity only (no layout work), off for prefers-reduced-motion. */
@keyframes cc2crateIn{0%{opacity:0;transform:scale(.55) translateY(6px)}70%{opacity:1;transform:scale(1.08)}100%{transform:none}}
@keyframes cc2crateShine{0%,72%{transform:translateX(-2px) skewX(-20deg);opacity:0}80%{opacity:.8}100%{transform:translateX(34px) skewX(-20deg);opacity:0}}
@keyframes cc2crateBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
#store .crate{animation:cc2crateIn .32s ease-out both;transition:transform .12s ease-out,filter .12s;overflow:visible}
#store .crate:nth-child(2){animation-delay:.03s}#store .crate:nth-child(3){animation-delay:.06s}#store .crate:nth-child(4){animation-delay:.09s}#store .crate:nth-child(5){animation-delay:.12s}#store .crate:nth-child(n+6){animation-delay:.15s}
#store .crate.enabled{animation:cc2crateIn .32s ease-out both}
/* 10-29 v1.26.1: bob + shine only on the first 8 affordable crates of each row (175 crates bobbing = ~16% CPU of style recalc) */
#store .crate.enabled:nth-child(-n+8 of .enabled){animation:cc2crateIn .32s ease-out both,cc2crateBob 2.6s ease-in-out .4s infinite}
#store .crate.enabled:nth-child(-n+8 of .enabled)::after{content:'';position:absolute;left:2px;top:2px;width:10px;height:44px;z-index:11;pointer-events:none;background:linear-gradient(90deg,rgba(255,240,190,0),rgba(255,240,190,.85),rgba(255,240,190,0));mix-blend-mode:screen;animation:cc2crateShine 3.4s ease-in-out infinite}
#store .crate.enabled:nth-child(2n)::after{animation-delay:.9s}#store .crate.enabled:nth-child(3n)::after{animation-delay:1.7s}
#store .crate:hover{transform:translateY(-3px) scale(1.1)!important;filter:brightness(1.15);z-index:20;animation-play-state:paused}
#store .crate:active{transform:scale(.92)!important;transition-duration:.05s}
@media (prefers-reduced-motion:reduce){#store .crate,#store .crate.enabled,#store .crate.enabled::after{animation:none!important}}
html.cc2n #support{width:auto!important;max-width:760px;padding:0 8px;box-sizing:border-box}  /* horizontal banner spans the store width */
/* banner under the town rows (cc2.js rowsBanner) */
#cc2rowad{clear:both;margin:10px auto 14px;max-width:728px;padding:0 8px;text-align:center;position:relative;z-index:5}
#cc2rowad .supportComment{font-size:10px;opacity:.6;margin-bottom:2px}
#game.onMenu #cc2rowad,#game.noAds #cc2rowad{display:none}
#cc2rowad:has(ins[data-ad-status="unfilled"]){display:none}
/* ==== CC2 v1.1 (10-29) ==== */
/* phones: the scoreboard + "Now" line sat on top of the big cookie (core draws it at 40% of the column height).
   "Now" moves to the free space under the cookie, above the tab bar; the scoreboard gets compact on short phones. */
html.cc2m:not(.cc2two) #cc2now{top:auto!important;bottom:calc(74px + env(safe-area-inset-bottom))!important}
html.cc2m.cc2short:not(.cc2two) #cc2now{bottom:calc(52px + env(safe-area-inset-bottom))!important}
@media (max-height:760px){html.cc2m:not(.cc2short) #cookies{transform:translateX(-50%) scale(.84)!important;transform-origin:50% 0}}
/* store cards: hover/press animation (owner "store t muốn cũng có animation khi hover") */
@keyframes cc2iconHop{0%,100%{transform:scale(.8) translateY(0)}40%{transform:scale(.8) translateY(-4px) rotate(-4deg)}70%{transform:scale(.8) translateY(0) rotate(3deg)}}
@keyframes cc2cardShine{0%{transform:translateX(-120%) skewX(-20deg)}100%{transform:translateX(260%) skewX(-20deg)}}
html.cc2n .product{transition:transform .14s ease-out,box-shadow .14s,filter .14s;overflow:hidden}
html.cc2n .product.unlocked.enabled:hover{transform:translateY(-3px) scale(1.03);filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 10px rgba(0,0,0,.55),0 0 0 2px rgba(255,214,110,.55)!important;z-index:5}
html.cc2n .product.unlocked.enabled:hover .icon{animation:cc2iconHop .6s ease-in-out}
html.cc2n .product.unlocked.enabled:hover::after{content:'';position:absolute;top:0;bottom:0;left:0;width:30%;pointer-events:none;z-index:4;background:linear-gradient(90deg,rgba(255,250,220,0),rgba(255,250,220,.45),rgba(255,250,220,0));animation:cc2cardShine .7s ease-out}
html.cc2n .product.unlocked.enabled:active{transform:translateY(0) scale(.97);transition-duration:.05s}
html.cc2n .product:not(.enabled):hover{filter:brightness(1.05)}
@media (prefers-reduced-motion:reduce){html.cc2n .product,html.cc2n .product .icon,html.cc2n .product::after{animation:none!important;transition:none!important}}
/* version badge */
#versionNumber .cc2ver{color:#ffd66e;font-size:.8em}
/* landscape phones (cc2short+cc2two): the one-line scoreboard sat across the top of the cookie → top-left corner (the disc is round,
   the corner of its box is empty); "Now" goes to the strip between the cookie and the tab bar */
html.cc2n.cc2m.cc2short.cc2two #cookies{left:8px!important;transform:none!important;max-width:44%}
html.cc2m.cc2short #cc2now{top:auto!important;bottom:calc(50px + env(safe-area-inset-bottom))!important}
html.cc2m.cc2short.cc2two #cc2now{display:none!important}  /* landscape phones: no free strip that does not cover the cookie or the top-bar buttons → hint hidden there */
html.cc2c #game.onMenu #cc2now{visibility:hidden}   /* v1.2: the Now line poked through the Options/Info menu */
/* v1.10 tap to preview upgrades (phones): hint under the tooltip */
#tooltip .cc2tap{margin-top:6px;padding:3px 6px;text-align:center;font-weight:bold;color:#ffe08a;background:rgba(0,0,0,.35);border-top:1px solid rgba(255,224,138,.35)}
html.cc2peek #tooltip{pointer-events:auto}
/* ==== v1.11 (owner TG 10-29 "đảm bảo các phần không bị che hoặc hiển thị sai vị trí") ====
   (a) the news ticker sat in whatever was left of the town strip right of the 4 menu buttons: 16px at 1100, 120px at 1366 →
   a column of words spilling over the Grandma row. Below ~1830px it now gets its own 2-line band under the buttons.
   (b) the core's version number (z-index 1e9, bottom-left of #game) sat on top of the 300x250 billboard → bottom-right of the bakery. */
@media (max-width:1830px){
  html.cc2c #comments{height:78px!important;flex-wrap:wrap;align-content:flex-start;row-gap:0;padding-top:6px!important}
  html.cc2c #commentsText{flex:1 0 100%;height:32px;order:9;overflow:hidden;font-size:12px;line-height:15px;border-top:1px solid rgba(0,0,0,.35);box-shadow:0 -1px 0 rgba(255,220,170,.10);margin-top:4px}
  html.cc2c #commentsText .commentsText{height:32px;padding:0 2px;overflow:hidden}
  html.cc2c .lumpsOn #commentsText .commentsText{padding:0 44px;box-sizing:border-box}  /* the lump icon hangs over the band's left end */
  html.cc2c #centerArea{top:78px!important}
}
html.cc2c #versionNumber{left:auto!important;right:calc(var(--W) + 24px);bottom:0;margin:6px 8px;font-size:15px;z-index:50}
html.cc2c #game.onMenu #versionNumber{visibility:hidden}
/* v1.12 safe selling: the whole store goes red while Sell mode is on (v1 only highlights the small Sell button) */
html.cc2sell #products .product{box-shadow:inset 0 0 0 300px rgba(140,28,16,.30),0 2px 3px rgba(0,0,0,.55)!important}
html.cc2sell #storeBulkSell{color:#ffd2c4!important;text-shadow:0 0 4px #c03a20}
/* v1.12.1: phone/tablet store — the Store tab already says "Store": drop the 70 px title so cards start higher; an unfilled/no-ads box collapses on every layout (was a 316 px empty block above the store) */
html.cc2m #storeTitle{display:none!important}
html:has(#smallSupport ins[data-ad-status="unfilled"]) #smallSupport,#game.noAds #smallSupport{display:none!important}

/* v1.13 Light mode (S.liteOn): same rules as prefers-reduced-motion, by choice */
html.cc2lite #store .crate,html.cc2lite #store .crate.enabled,html.cc2lite #store .crate.enabled::after,html.cc2lite .product,html.cc2lite .product .icon,html.cc2lite .product::after,html.cc2lite #cc2now.warn,html.cc2lite #cc2vig[data-a=g],html.cc2lite .parentLink{animation:none!important;transition:none!important}
/* v1.14 heavenly pick: gold pulsing ring on the Legacy-screen upgrade worth buying next (cc2.js heavenHook) */
#ascendUpgrades .crate.cc2hpick{box-shadow:0 0 0 2px #ffd66e,0 0 12px 3px rgba(255,200,80,.75);border-radius:50%;animation:cc2hpick 1.6s ease-in-out infinite}
@keyframes cc2hpick{50%{box-shadow:0 0 0 2px #fff3c4,0 0 18px 6px rgba(255,214,110,.9)}}
html.cc2lite #ascendUpgrades .crate.cc2hpick{animation:none}
@media (prefers-reduced-motion:reduce){#ascendUpgrades .crate.cc2hpick{animation:none}}
/* v1.15: core widePrompt (ascension mode, permanent slot, dragon aura) is 532px wide and spilled off both edges on phones */
@media (max-width:560px){
html #prompt.widePrompt{width:calc(100vw - 52px);left:calc(-50vw + 28px);box-sizing:content-box}
html #prompt.widePrompt .block{float:none!important;width:auto!important;height:auto!important;max-height:42vh;margin:4px 0!important}
html #prompt.widePrompt .block.crateBox{height:auto!important;max-height:38vh}
html #prompt.widePrompt h3:before,html #prompt.widePrompt h3:after{display:none}
}
/* v1.17 Grimoire spell timers: countdown pill over the lower edge of the spell icon + line under the meter */
.cc2gt{position:absolute;left:50%;top:38px;transform:translateX(-50%);padding:0 3px;font:bold 11px/13px Tahoma,Arial,sans-serif;color:#ffe9b8;background:rgba(36,22,10,.88);border:1px solid #8a5a2b;border-radius:2px;white-space:nowrap;pointer-events:none;text-shadow:0 1px 0 #000;z-index:2}
.cc2gf{text-align:center;font:bold 11px/13px Tahoma,Arial,sans-serif;margin-top:3px;color:#c9b48e;text-shadow:-1px 1px 0 #000}
.cc2gf.cc2gfw{color:#f3d27a}
/* v1.18 Garden breeding hints: gold frame on empty tiles that can sprout a new seed + one line under the garden info */
.gardenTile.cc2gnew:after{content:'';position:absolute;inset:3px;border:2px dashed #f3d27a;border-radius:3px;box-shadow:0 0 6px rgba(243,210,122,.55),inset 0 0 6px rgba(243,210,122,.35);pointer-events:none;animation:cc2gnp 1.6s ease-in-out infinite alternate}
@keyframes cc2gnp{from{opacity:.55}to{opacity:1}}
.gardenTile.cc2gripe:after{content:'';position:absolute;inset:2px;border:2px solid #9be36a;border-radius:3px;box-shadow:0 0 7px rgba(155,227,106,.7),inset 0 0 6px rgba(155,227,106,.4);pointer-events:none;animation:cc2gnp 1.1s ease-in-out infinite alternate}
html.cc2lite .gardenTile.cc2gripe:after{animation:none}
html.cc2lite .gardenTile.cc2gnew:after{animation:none}
.cc2gb{margin:8px 6px 4px;padding-top:6px;border-top:1px solid rgba(201,180,142,.35);text-align:center;font:bold 11px/13px Tahoma,Arial,sans-serif;color:#f3d27a;text-shadow:-1px 1px 0 #000;cursor:help;white-space:normal}
.cc2gb b{color:#ffe9b8}
.templeGod .cc2pt{position:absolute;left:50%;top:36px;transform:translateX(-50%);padding:0 3px;font:bold 11px/13px Tahoma,Arial,sans-serif;color:#ffe9b8;background:rgba(36,22,10,.9);border:1px solid #8a5a2b;border-radius:2px;white-space:nowrap;pointer-events:none;text-shadow:0 1px 0 #000;z-index:2}
.templeGod .cc2pt.cc2ptr{color:#ff9a7a;border-color:#9a3b25}
.cc2pl{text-align:center;font:bold 11px/14px Tahoma,Arial,sans-serif;margin:3px auto 0;color:#c9b48e;text-shadow:-1px 1px 0 #000}
.cc2pl b{color:#ffe9b8}
/* v1.20 Krumblor hints */
#specialPopup .cc2dr{text-align:center;font:bold 11px/14px Tahoma,Arial,sans-serif;margin:4px 6px 9px;color:#c9b48e;text-shadow:-1px 1px 0 #000}
#specialPopup .cc2dr b{color:#ffe9b8}
#promptContent .crate.cc2drbest{box-shadow:0 0 0 2px #e8b84a,0 0 8px 2px rgba(255,205,90,.7);border-radius:4px}
.cc2dra{margin-top:4px;font-size:11px;color:#c9b48e}
.cc2dra b{color:#ffe9b8}
.cc2lite #promptContent .crate.cc2drbest{box-shadow:0 0 0 2px #e8b84a}
/* v1.21 season hints: found/total tag on the season switches */
#toggleUpgrades .crate{position:relative}
#toggleUpgrades .cc2se{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);padding:0 2px;font:bold 10px/12px Tahoma,Arial,sans-serif;color:#ffe9b8;background:rgba(36,22,10,.92);border:1px solid #8a5a2b;border-radius:2px;white-space:nowrap;pointer-events:none;text-shadow:0 1px 0 #000;z-index:2}
#toggleUpgrades .cc2se.cc2sedone{color:#b9f08a;border-color:#5d7a2e}
/* v1.23 Lump hints: the level button worth your next sugar lump */
.productLevel.cc2lvpick{opacity:1;color:#ffe08a;background:rgba(140,88,12,.88);text-shadow:0 1px 0 #000,0 0 4px #e8a317;box-shadow:inset 0 0 0 1px #e8b84a,0 0 6px 1px rgba(232,163,23,.75);border-radius:2px;animation:cc2lvp 1.1s ease-in-out infinite alternate}
@keyframes cc2lvp{from{box-shadow:inset 0 0 0 1px #e8b84a,0 0 3px 0 rgba(232,163,23,.5)}to{box-shadow:inset 0 0 0 1px #ffe08a,0 0 8px 2px rgba(255,200,60,.9)}}
html.cc2lite .productLevel.cc2lvpick{animation:none}
#cc2welcome .cc2away{margin-top:8px;text-align:left}#cc2welcome .cc2away>div{padding:3px 0;border-top:1px solid rgba(255,255,255,.08)}#cc2welcome .cc2away small{opacity:.75}#cc2welcome .cc2away .option{display:inline-block;margin:0 0 0 6px;padding:1px 6px;font-size:12px}

/* v1.40 upgrade timers */
#upgrades .cc2ut{position:absolute;left:0;bottom:-3px;z-index:12;padding:0 3px;font:bold 10px/12px Tahoma,Arial,sans-serif;color:#ffe9b8;background:rgba(36,22,10,.92);border:1px solid #8a5a2b;border-radius:2px;white-space:nowrap;pointer-events:none;text-shadow:0 1px 0 #000}
/* ==== v1.40.2: #comments starts 16px below #centerArea's origin (sectionMiddle top 32, band top 48), so the town rows began
   16px inside the news band — the 2nd news line and the lump timer sat on the Grandma row. At 1100px the 5 buttons did not fit
   one line either: Legacy wrapped and pushed the news text 45px into the row. Rows now start under the band; buttons squeeze.
   Above 1830px the one-line band put the lump and its "ripe in" label on the Options/Stats buttons → same 2-tier band everywhere. */
html.cc2c #comments{height:78px!important;flex-wrap:wrap;align-content:flex-start;row-gap:0;padding-top:6px!important}
html.cc2c #commentsText{flex:1 0 100%;height:32px;order:9;overflow:hidden;font-size:12px;line-height:15px;border-top:1px solid rgba(0,0,0,.35);box-shadow:0 -1px 0 rgba(255,220,170,.10);margin-top:4px}
html.cc2c #commentsText .commentsText{height:32px;padding:0 2px;overflow:hidden}
html.cc2c .lumpsOn #commentsText .commentsText{padding:0 44px;box-sizing:border-box}
html.cc2c #centerArea{top:94px!important}
@media (max-width:1240px){html.cc2c #comments{gap:4px}html.cc2c #comments .panelButton{min-width:0;padding:3px 6px 0!important;font-size:13px}html.cc2c #comments .panelButton .subButton{font-size:13px}}
/* v1.40.3: 821-1000px desktop/tablet: the top bar no longer wraps to a second line ("Other versions" dropped onto the Store and its menu ran off the right edge); a long signed-in name is cut with an ellipsis */
html.cc2d #topbarCloud{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}
@media (max-width:1000px){html.cc2d #cc2brand small{display:none}html.cc2d #topbarCloud{max-width:124px}}
/* v1.40.4: 821-1099px (small laptops, tablets sideways) still had the one-line 44px band: the town rows began 16px inside it
   (Grandma row under the buttons) and a long news line ran 2-3 lines past the band. Same 2-tier band as the wide layout. */
html.cc2d:not(.cc2c) #comments{height:78px!important;flex-wrap:wrap;align-content:flex-start;row-gap:0;gap:4px;padding-top:6px!important}
html.cc2d:not(.cc2c) #commentsText{flex:1 0 100%;height:32px;order:9;overflow:hidden;font-size:12px;line-height:15px;border-top:1px solid rgba(0,0,0,.35);box-shadow:0 -1px 0 rgba(255,220,170,.10);margin-top:4px}
html.cc2d:not(.cc2c) #commentsText .commentsText{height:32px;padding:0 2px;overflow:hidden}
html.cc2d:not(.cc2c) .lumpsOn #commentsText .commentsText{padding:0 44px;box-sizing:border-box}
html.cc2d:not(.cc2c) #centerArea{top:94px!important}
/* T210 v1.40.5: 821–1099px (cc2d, not cc2c) — the store was a 1-card column (151–230px) squeezed beside the floated 300x250
   with an empty strip under the ad. Cards now flow AROUND the ad: inline-blocks in line boxes (grid/flex would avoid the
   float for their whole height) → 1–2 cards beside the ad, 2–3 per row below it, left-aligned. No change ≥1100 / phone. */
html.cc2d:not(.cc2c){--pw:calc(100vw - 672px)}
@media (min-width:976px){html.cc2d:not(.cc2c){--pw:calc((100vw - 662px) / 2 - 8px)}}
html.cc2d:not(.cc2c) #products{display:block;text-align:left;padding-left:10px!important}
html.cc2d:not(.cc2c) #storeBulk{display:flow-root;text-align:left;margin:0 0 6px}
html.cc2d:not(.cc2c) #products .product{display:inline-block;vertical-align:top;width:var(--pw)!important;margin:0 3px 6px!important;text-align:left}
html.cc2d:not(.cc2c) #products .product.toggledOff{display:none}
html.cc2d:not(.cc2c) #store{display:block}
html.cc2d:not(.cc2c) #products{overflow:visible!important}
/* T211 v1.40.6: 821–1023px the Buy/Sell bar sits beside the 300x250 and only had 97–222px for 60px amount buttons →
   1/10/100/all wrapped into 2–4 rows (up to 140px tall) and Buy max floated over them. Now: Buy/Sell column 44px,
   the four amounts share one row (flex), Buy max takes a full-width second row → bar is 2 rows (~58px) at every width. */
@media (max-width:1023px){
html.cc2d:not(.cc2c) #storeBulk{display:flex!important;flex-wrap:wrap;align-items:stretch;padding-left:44px!important;padding-bottom:2px;height:auto!important;overflow:hidden}
html.cc2d:not(.cc2c) #storeBulk .storeBulkMode{width:44px;font-size:12px}
html.cc2d:not(.cc2c) #storeBulk .storeBulkAmount{float:none;flex:1 1 1px;min-width:0;width:auto;padding:7px 0;font-size:13px;text-align:center;white-space:nowrap}
html.cc2d:not(.cc2c) #cc2max{position:static;flex:1 0 100%;margin:2px 0 0;padding:2px 0}
}
/* T213 (10-29) 821–1099px (cc2d, no bakery column): the bottom-right notes dock (T121) sat on the town rows' right end — 240x150px over the
   buildings and the minigame you just opened. Here the cookie column on the left has free space under the cookie (version line) → notes
   dock there, newest 2 only, close-all x on their right; short screens keep 1 so a note never reaches the cookie. */
html.cc2d:not(.cc2c) #game:not(.ascending) #notes{right:auto!important;left:8px!important;bottom:34px!important;transform-origin:bottom left}
html.cc2d:not(.cc2c) #game:not(.ascending) #notes .note:nth-last-child(n+3 of .note),html.cc2d:not(.cc2c) #game:not(.ascending) #notes .remaining{display:none}
html.cc2d:not(.cc2c) #game:not(.ascending) #notes .sidenote{right:auto;left:calc(100% + 4px)}
@media (max-height:660px){html.cc2d:not(.cc2c) #game:not(.ascending) #notes .note:nth-last-child(n+2 of .note){display:none}}