* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html,body { height:100%; background:#1a140d;
    color:#f3e9d8; font-family:'Segoe UI',system-ui,sans-serif; overflow:hidden;
    -webkit-user-select:none; user-select:none; }
  /* ===== SEWER ENVIRONMENT ===== */
  /* painted sewer backdrop — oversized so it can slowly drift around (JS pans it).
     hidden until the first Sewer Rat is recruited (body.env-on). */
  #sewerWall { position:fixed; inset:-6%; z-index:0; pointer-events:none; display:none;
    background:#1a140d url("sewage.webp") center center / cover no-repeat;
    will-change:transform; transition:transform 8s ease-in-out; }
  body.env-on #sewerWall { display:block; }
  /* darkening vignette over the painted backdrop so the foreground UI stays readable */
  #vignette { position:fixed; inset:0; z-index:1; pointer-events:none;
    background:radial-gradient(circle at 50% 38%, rgba(0,0,0,0) 38%, rgba(0,0,0,.5) 100%); }
  /* rising slurry pool (the "milk") — pools at the bottom of the play area, behind the poop.
     height driven by --sludge from rat tiers; hidden until the first Sewer Rat is recruited. */
  #sludge { position:absolute; left:0; right:0; bottom:0; height:var(--sludge,4vh); z-index:0; display:none;
    pointer-events:none; transition:height 1s ease;
    background:#4a3f12;   /* solid base == the wave gradient's bottom colour (no seam) */
    box-shadow:0 -3px 16px rgba(120,100,40,.35); }
  body.env-on #sludge { display:block; }
  /* curved, scrolling slurry surface. the wave SVG carries a vertical gradient that matches
     the pool's base colour at its bottom, so wave and pool blend with NO horizontal seam. */
  #sludge::before { content:''; position:absolute; top:-22px; left:-50%; width:200%; height:60px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60' viewBox='0 0 90 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237a6a28'/%3E%3Cstop offset='1' stop-color='%234a3f12'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 18 C22.5 0 67.5 36 90 18 L90 60 L0 60 Z' fill='url(%23g)'/%3E%3C/svg%3E") repeat-x;
    background-size:90px 60px; animation:sludgeWave 8s linear infinite; }
  /* second parallax layer: a lighter crest highlight that fades to transparent (no bottom edge) */
  #sludge::after { content:''; position:absolute; top:-24px; left:-50%; width:200%; height:60px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60' viewBox='0 0 90 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238a7730'/%3E%3Cstop offset='0.7' stop-color='%238a7730' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 18 C22.5 36 67.5 0 90 18 L90 60 L0 60 Z' fill='url(%23h)'/%3E%3C/svg%3E") repeat-x;
    background-size:110px 60px; opacity:.5; animation:sludgeWave2 5.5s linear infinite reverse; }
  @keyframes sludgeWave  { to { transform:translateX(90px); } }
  @keyframes sludgeWave2 { to { transform:translateX(110px); } }
  /* lazy bubbles drifting up through the slurry */
  .sbub { position:absolute; bottom:0; z-index:0; pointer-events:none; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, rgba(190,170,90,.9), rgba(90,75,25,.5) 70%, transparent);
    animation:sbubRise linear forwards; }
  @keyframes sbubRise { from{ transform:translateY(0); opacity:.8; } to{ transform:translateY(calc(-1*var(--rise,30vh))); opacity:0; } }
  @media (prefers-reduced-motion:reduce){ #sludge::before, #sludge::after, .sbub { animation:none; } }
  #app { height:100%; display:flex; flex-direction:column; position:relative; z-index:2; }
  header { text-align:center; padding:10px 12px 6px; }
  header h1 { font-size:20px; font-weight:800; letter-spacing:.02em;
    text-shadow:0 2px 0 rgba(0,0,0,.4); }
  #counts { font-size:13px; color:#d7c4a3; margin-top:2px; }
  #counts b { color:#ffd98a; }
  #gamerscore { position:absolute; top:8px; right:10px; font-size:13px; font-weight:700;
    color:#9cd64f; background:rgba(0,0,0,.3); padding:4px 9px; border-radius:20px;
    border:1px solid rgba(156,214,79,.4); }
  #main { flex:1; display:flex; align-items:center; justify-content:center; position:relative; }
  #poop { font-size:120px; cursor:pointer; line-height:1; filter:drop-shadow(0 10px 14px rgba(0,0,0,.5));
    will-change:transform; position:relative; z-index:2;
    padding:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle, rgba(255,225,150,.06) 0%, rgba(255,225,150,0) 70%);
    animation:breathe 4.5s ease-in-out infinite; }
  #poop:active { background:radial-gradient(circle, rgba(255,225,150,.12) 0%, rgba(255,225,150,0) 70%); }
  /* always-on gentle breathing so the poop feels alive */
  @keyframes breathe {
    0%,100% { transform:scale(1)    rotate(0deg); }
    50%     { transform:scale(1.05) rotate(.6deg); }
  }
  /* tap pop — removed on animationend so breathing resumes */
  #poop.pop { animation:poopPop .18s ease-out; }
  @keyframes poopPop {
    0%   { transform:scale(.82) rotate(-2deg); }
    55%  { transform:scale(1.12) rotate(2deg); }
    100% { transform:scale(1) rotate(0); }
  }
  /* ===== GOLDEN FRENZY ===== */
  /* golden, shaking, zooming poop (breathing but cranked way up) */
  #poop.frenzy { animation:frenzyDance .7s ease-in-out infinite;
    filter:sepia(1) saturate(3.2) hue-rotate(2deg) brightness(1.3)
      drop-shadow(0 0 20px rgba(255,210,70,.95)) drop-shadow(0 10px 16px rgba(0,0,0,.55)); }
  #poop.frenzy.pop { animation:poopPop .14s ease-out; }
  /* grander zoom-breathing with an EVEN left↔right sway (symmetric, not one-directional) */
  @keyframes frenzyDance {
    0%   { transform:scale(1)    rotate(0deg)   translate(0,0); }
    25%  { transform:scale(1.4)  rotate(-8deg)  translate(-6px,-3px); }
    50%  { transform:scale(1)    rotate(0deg)   translate(0,0); }
    75%  { transform:scale(1.4)  rotate(8deg)   translate(6px,-3px); }
    100% { transform:scale(1)    rotate(0deg)   translate(0,0); }
  }
  /* rotating sunshine behind the poop, only during frenzy */
  #sunburst { position:absolute; top:50%; left:50%; width:340px; height:340px; margin:-170px 0 0 -170px;
    border-radius:50%; z-index:1; pointer-events:none; display:none; opacity:0;
    background:repeating-conic-gradient(from 0deg,
      rgba(255,224,120,.55) 0deg 9deg, rgba(255,224,120,0) 9deg 18deg);
    -webkit-mask:radial-gradient(circle, #000 18%, rgba(0,0,0,.55) 40%, transparent 72%);
    mask:radial-gradient(circle, #000 18%, rgba(0,0,0,.55) 40%, transparent 72%);
    animation:spin 9s linear infinite; }
  #main.frenzy #sunburst { width:460px; height:460px; margin:-230px 0 0 -230px;
    display:block; animation:spin 5s linear infinite, sunFade .4s ease-out forwards; }
  @keyframes spin { to { transform:rotate(360deg); } }
  @keyframes sunFade { to { opacity:1; } }
  /* flying golden toilet — above everything, tappable */
  #goldenToilet { position:fixed; z-index:9999; font-size:54px; cursor:pointer; user-select:none;
    filter:sepia(1) saturate(3.2) hue-rotate(2deg) brightness(1.2) drop-shadow(0 0 12px rgba(255,210,70,.95));
    will-change:transform,left,top; touch-action:manipulation;
    animation:toiletBob .9s ease-in-out infinite; }
  @keyframes toiletBob { 0%,100%{ transform:rotate(-8deg) scale(1); } 50%{ transform:rotate(8deg) scale(1.08); } }
  /* falling poop rain */
  .poopdrop { position:fixed; z-index:30; pointer-events:none; will-change:transform; top:-60px;
    animation:poopFall linear forwards; }
  @keyframes poopFall { to { transform:translateY(115vh) rotate(var(--spin,360deg)); } }
  /* frenzy banner */
  #frenzyBanner { position:fixed; top:54px; left:50%; transform:translateX(-50%); z-index:9998;
    padding:7px 18px; border-radius:22px; font-weight:900; font-size:15px; white-space:nowrap;
    color:#5a3c00; text-shadow:0 1px 1px rgba(255,255,255,.5); display:none;
    background:linear-gradient(#ffe680,#f5b400 60%,#d99000); border:1px solid #fff;
    box-shadow:0 0 18px rgba(255,200,60,.8), inset 0 1px 0 rgba(255,255,255,.7);
    animation:bannerShake .8s ease-in-out infinite; }
  #frenzyBanner.show { display:block; }
  /* even left↔right sway + gentle pulse (symmetric, mirror halves) */
  @keyframes bannerShake {
    0%   { transform:translateX(-50%) scale(1)    rotate(0deg); }
    25%  { transform:translateX(calc(-50% - 6px)) scale(1.06) rotate(-3deg); }
    50%  { transform:translateX(-50%) scale(1)    rotate(0deg); }
    75%  { transform:translateX(calc(-50% + 6px)) scale(1.06) rotate(3deg); }
    100% { transform:translateX(-50%) scale(1)    rotate(0deg); }
  }
  @media (prefers-reduced-motion:reduce){
    #poop, #poop.frenzy, #goldenToilet, #frenzyBanner, #sunburst { animation-duration:6s; }
  }
  #perclick { position:absolute; bottom:18px; width:100%; text-align:center;
    font-size:12px; color:#bfae8e; }
  /* floating +N */
  .float { position:absolute; font-weight:800; font-size:20px; color:#ffd98a; pointer-events:none;
    text-shadow:0 2px 4px rgba(0,0,0,.6); animation:floatUp .9s ease-out forwards; z-index:6; }
  @keyframes floatUp { from{ transform:translateY(0); opacity:1; } to{ transform:translateY(-70px); opacity:0; } }
  /* shop */
  /* buy-mode segmented toggle — sits fixed above the producer list */
  #buyModeBar { display:flex; gap:4px; padding:6px 8px 0; background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.32)); }
  #buyModeBar .bm { flex:1; text-align:center; padding:7px 0; font-size:13px; font-weight:800; cursor:pointer;
    color:#cdb98a; border-radius:8px 8px 0 0; letter-spacing:.02em;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
    border:1px solid rgba(0,0,0,.5); border-bottom:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14); text-shadow:0 1px 1px rgba(0,0,0,.5); }
  #buyModeBar .bm.on { color:#ecffd6;
    background:linear-gradient(#aee266 0%, #7cc23f 48%, #5c9a26 52%, #4d7d18 100%);
    border-color:#3c6312; box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(0,0,0,.25); }
  #shop { background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.32));
    border-top:1px solid rgba(255,255,255,.14); box-shadow:inset 0 4px 10px rgba(0,0,0,.45);
    max-height:42%; overflow-y:auto; padding:8px; display:grid; gap:6px;
    grid-template-columns:1fr; }
  .item { display:flex; align-items:center; gap:10px;
    background:linear-gradient(180deg, rgba(255,225,150,.14) 0%, rgba(255,210,120,.05) 49%,
      rgba(0,0,0,.16) 51%, rgba(0,0,0,.3) 100%);
    border:1px solid rgba(0,0,0,.55); border-top-color:rgba(255,236,190,.45);
    box-shadow:inset 0 1px 0 rgba(255,240,200,.32), 0 2px 6px rgba(0,0,0,.45);
    border-radius:10px; padding:8px 10px; cursor:pointer; transition:filter .1s; }
  .item:active { background:linear-gradient(180deg, rgba(255,225,150,.24) 0%, rgba(255,210,120,.1) 49%,
      rgba(0,0,0,.1) 51%, rgba(0,0,0,.22) 100%); }
  .item.locked { filter:grayscale(.6) brightness(.7); opacity:.7; cursor:not-allowed; }
  .item.teaser { opacity:.6; border-style:dashed; border-top-color:rgba(255,236,190,.3);
    box-shadow:inset 0 1px 0 rgba(255,240,200,.18); cursor:default; }
  .item.teaser .nm { color:#8a7c63; letter-spacing:.22em; }
  .item.teaser .own { color:#8a7c63; font-style:italic; }
  .item .ico { font-size:28px; width:36px; text-align:center; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
  /* 100-club: golden glyph with a pulsing glow and a sweeping white-gold sheen */
  .item .ico.gold { position:relative;
    animation:goldPulse 2.2s ease-in-out infinite; }
  @keyframes goldPulse {
    0%,100% { filter:sepia(1) saturate(2.2) hue-rotate(2deg) brightness(1.08) drop-shadow(0 0 3px rgba(255,200,60,.55)); }
    50%     { filter:sepia(1) saturate(2.7) hue-rotate(2deg) brightness(1.28) drop-shadow(0 0 8px rgba(255,222,96,.95)); }
  }
  /* sheen layer: re-draws the same glyph, fills it with a moving highlight, and clips
     that highlight to the glyph shape so the shine only rides on the emoji itself.
     band sits fully off-screen at both ends -> perfect invisible->invisible loop. */
  .item .ico.gold::after { content:var(--emoji,''); position:absolute; inset:0; pointer-events:none;
    font:inherit; text-align:center; color:transparent;
    background-image:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.95) 50%,
      rgba(255,244,190,.7) 54%, transparent 60%);
    background-size:300% 100%; background-repeat:no-repeat;
    -webkit-background-clip:text; background-clip:text;
    mix-blend-mode:screen; animation:goldSheen 2.4s linear infinite; }
  @keyframes goldSheen { from{ background-position:150% 0; } to{ background-position:-150% 0; } }
  .item .info { flex:1; min-width:0; }
  .item .info .nm { font-weight:700; font-size:14px; text-shadow:0 1px 1px rgba(0,0,0,.5); }
  .item .info .ds { font-size:11px; color:#bfae8e; }
  .item .info .rate { font-size:11px; color:#a6e15a; font-weight:700; margin-top:1px; text-shadow:0 1px 1px rgba(0,0,0,.5); }
  .item .buy { text-align:right; font-size:12px; }
  .item .buy .cost { color:#ffd98a; font-weight:800; text-shadow:0 1px 1px rgba(0,0,0,.5); }
  .item .buy .own { color:#9bdb6a; font-size:11px; }
  /* achievement toast — real Xbox 360 era style */
  #toasts { position:fixed; top:12px; left:12px; z-index:30;
    display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
  .toast { display:flex; align-items:center; gap:11px;
    background:linear-gradient(#5a5d5e,#3b3d3e 55%,#2c2e2f); color:#f3f3f3;
    border-radius:30px; padding:7px 22px 7px 8px; min-width:270px;
    border:1px solid #6e7173; box-shadow:0 6px 22px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.25);
    animation:swoopTL .9s cubic-bezier(.18,.9,.32,1.28) both; }
  /* Xbox guide orb: metallic gray ring + glossy green sphere with X */
  .toast .orb { width:46px; height:46px; border-radius:50%; flex:none; position:relative;
    background:radial-gradient(circle at 50% 35%, #fafafa, #c2c5c7 45%, #6f7375 72%, #45484a 100%);
    box-shadow:0 1px 3px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.7);
    display:flex; align-items:center; justify-content:center; }
  .toast .orb::before { content:''; position:absolute; width:34px; height:34px; border-radius:50%;
    background:radial-gradient(circle at 38% 30%, #d6f08a, #7bc043 45%, #4f8a1f 78%, #2f5e10 100%);
    box-shadow:inset 0 2px 4px rgba(255,255,255,.55), inset 0 -3px 6px rgba(0,0,0,.4); }
  .toast .orb .x { position:relative; z-index:1; color:#fff; font-size:18px; font-weight:900;
    line-height:1; text-shadow:0 1px 1px rgba(0,0,0,.5); font-family:Arial,sans-serif; }
  .toast .tx { display:flex; flex-direction:column; justify-content:center; }
  .toast .tx .a { font-size:12px; font-weight:600; color:#dcdfe1; letter-spacing:.01em; }
  .toast .tx .n { font-size:13px; font-weight:700; color:#fff; }
  .toast .tx .n b { color:#a6e15a; font-weight:800; }
  /* swoop from top-left (desktop) with bounce */
  @keyframes swoopTL {
    0%   { transform:translate(-130%,-60%) scale(.85); opacity:0; }
    55%  { transform:translate(6%,8%) scale(1.03); opacity:1; }
    72%  { transform:translate(-2%,-4%) scale(.99); }
    86%  { transform:translate(1%,2%) scale(1); }
    100% { transform:translate(0,0) scale(1); }
  }
  /* swoop straight down from top (mobile) with bounce */
  @keyframes swoopTop {
    0%   { transform:translateY(-180%) scale(.9); opacity:0; }
    55%  { transform:translateY(10%) scale(1.03); opacity:1; }
    72%  { transform:translateY(-6%) scale(.99); }
    86%  { transform:translateY(3%) scale(1); }
    100% { transform:translateY(0) scale(1); }
  }
  .toast.out { animation:toastOut .35s ease-in forwards; }
  @keyframes toastOut { to{ transform:translateY(-120%) scale(.9); opacity:0; } }
  @media (pointer:coarse){
    #toasts { top:10px; left:50%; transform:translateX(-50%); align-items:center; }
    .toast { animation-name:swoopTop; }
  }
  /* ===== Xbox 360 NXE shared treatments ===== */
  /* glossy beveled panel backdrop */
  .xpanel { background:radial-gradient(ellipse at 50% -10%, #2c2f31 0%, #15171a 55%, #0a0b0d 100%); }
  /* metallic guide-orb sheen reused on rows */
  /* beveled glassy list row */
  .xrow, .uitem, .arow { background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 49%,
      rgba(0,0,0,.14) 51%, rgba(0,0,0,.28) 100%);
    border:1px solid rgba(0,0,0,.55); border-top-color:rgba(255,255,255,.4);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 6px rgba(0,0,0,.45);
    border-radius:9px; }
  .xrow:active, .uitem:active, .arow:active { background:linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.1) 49%,
      rgba(0,0,0,.1) 51%, rgba(0,0,0,.22) 100%); }
  /* chunky metallic section header strip */
  .xsec, .upsec { background:linear-gradient(#6a6d6f, #44474a 55%, #303336);
    border:1px solid #25282a; border-top-color:#85888a; border-radius:7px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 5px rgba(0,0,0,.4);
    color:#f0f0f0 !important; text-shadow:0 1px 1px rgba(0,0,0,.6);
    padding:5px 12px !important; margin:12px 0 4px !important; }
  /* glossy green Xbox-guide button */
  .xbtn { border:1px solid #3c6312; border-radius:11px; color:#ecffd6 !important;
    background:linear-gradient(#aee266 0%, #7cc23f 48%, #5c9a26 52%, #4d7d18 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(0,0,0,.25), 0 3px 9px rgba(0,0,0,.5);
    text-shadow:0 1px 1px rgba(0,0,0,.45); }
  .xbtn:active { background:linear-gradient(#7cc23f 0%, #5c9a26 60%, #45720f 100%);
    box-shadow:inset 0 2px 5px rgba(0,0,0,.4); }
  /* glossy beveled header title */
  .xtitle { background:linear-gradient(#fbfbfb,#cfd2d4 52%,#a9acae);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:0 1px 0 rgba(0,0,0,.35); filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
  /* achievements drawer button */
  #achBtn { position:absolute; top:8px; left:10px; font-size:13px; font-weight:700;
    background:linear-gradient(#54575a,#34373a); padding:4px 11px; border-radius:20px; cursor:pointer;
    border:1px solid rgba(0,0,0,.5); border-top-color:rgba(255,255,255,.35);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 6px rgba(0,0,0,.4); }
  #achPanel { position:fixed; inset:0; z-index:40; display:none; flex-direction:column; padding:16px; }
  #achPanel h2 { text-align:center; margin-bottom:10px; font-size:18px; }
  #achList { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:7px; }
  /* colored per-group section header (accent via --c set inline per group) */
  .achsec { display:flex; align-items:center; justify-content:space-between;
    margin:14px 0 3px; padding:5px 11px; border-radius:7px;
    font-size:13px; font-weight:800; letter-spacing:.02em;
    color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6);
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--c,#7bc043) 55%, #1a1c1e) 0%,
      color-mix(in srgb, var(--c,#7bc043) 22%, #111315) 100%);
    border:1px solid rgba(0,0,0,.55); border-top-color:color-mix(in srgb, var(--c,#7bc043) 70%, #fff);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 2px 5px rgba(0,0,0,.4); }
  .achsec:first-child { margin-top:0; }
  .achsec .cnt { font-size:11px; opacity:.85; font-weight:700;
    background:rgba(0,0,0,.3); padding:1px 8px; border-radius:10px; }
  .arow { display:flex; align-items:center; gap:10px; padding:8px 10px;
    border-left:3px solid color-mix(in srgb, var(--c,#7bc043) 75%, transparent);
    border-radius:6px; }
  .arow.locked { opacity:.4; }
  /* highlight flash when jumping to an achievement from its toast */
  .arow.flash { animation:achFlash 1.5s ease-out; }
  @keyframes achFlash {
    0%   { background:color-mix(in srgb, var(--c,#7bc043) 70%, transparent); box-shadow:0 0 0 2px var(--c,#7bc043), 0 0 18px var(--c,#7bc043); }
    100% { background:transparent; box-shadow:none; }
  }
  .arow .orb2 { width:32px; height:32px; border-radius:50%; flex:none; position:relative;
    background:radial-gradient(circle at 38% 30%, #d6f08a, #7bc043 45%, #4f8a1f 78%, #2f5e10 100%);
    box-shadow:inset 0 1px 2px rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.5); }
  /* medal tiers: bronze (3rd), silver (2nd), gold (best) of a category */
  .arow .orb2.bronze { background:radial-gradient(circle at 38% 30%, #f0c08a, #c87f3c 45%, #94531c 78%, #5e3110 100%);
    box-shadow:inset 0 1px 2px rgba(255,235,215,.7), inset 0 -2px 4px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.55); }
  .arow .orb2.silver { background:radial-gradient(circle at 38% 30%, #ffffff, #c8ccd2 45%, #8c9098 78%, #565a60 100%);
    box-shadow:inset 0 1px 2px rgba(255,255,255,.85), inset 0 -2px 4px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.55); }
  .arow .orb2.gold { background:radial-gradient(circle at 38% 30%, #fff6c0, #ffd24d 42%, #e0a51c 74%, #9c6a06 100%);
    box-shadow:inset 0 1px 2px rgba(255,250,210,.9), inset 0 -2px 4px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.55);
    animation:orbGold 2.2s ease-in-out infinite; }
  /* gold gets the same pulsing glow treatment as the gold icon mode */
  @keyframes orbGold {
    0%,100% { box-shadow:inset 0 1px 2px rgba(255,250,210,.9), inset 0 -2px 4px rgba(0,0,0,.4), 0 0 4px rgba(255,200,60,.5); }
    50%     { box-shadow:inset 0 1px 2px rgba(255,250,210,.9), inset 0 -2px 4px rgba(0,0,0,.4), 0 0 11px rgba(255,222,96,.95); }
  }
  /* a moving white-gold sheen riding across the gold orb */
  .arow .orb2.gold::after { content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
    background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.85) 50%, rgba(255,244,190,.5) 56%, transparent 64%);
    background-size:300% 100%; background-repeat:no-repeat; mix-blend-mode:screen;
    animation:orbSheen 2.4s linear infinite; }
  @keyframes orbSheen { 0%{ background-position:130% 0; } 100%{ background-position:-130% 0; } }
  .arow.locked .orb2.bronze, .arow.locked .orb2.silver, .arow.locked .orb2.gold { animation:none; }
  .arow.locked .orb2.bronze::after, .arow.locked .orb2.gold::after { display:none; }
  .arow.locked .orb2 { background:radial-gradient(circle at 38% 30%, #9a9a9a, #5f5f5f 60%, #3a3a3a);
    box-shadow:inset 0 1px 2px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.5); }
  .arow .ai { flex:1; }
  .arow .ai .n { font-weight:700; font-size:13px; }
  .arow .ai .d { font-size:11px; color:#bfae8e; }
  .arow .g { font-weight:800; color:#a6e15a; font-size:13px; text-shadow:0 1px 1px rgba(0,0,0,.5); }
  #closeAch { margin-top:12px; text-align:center; padding:13px; font-weight:800; cursor:pointer; }
  /* ---- top bar buttons + upgrades panel ---- */
  #btnRow { display:flex; gap:8px; justify-content:center; margin-top:8px; }
  #upBtn { position:relative; font-size:13px; font-weight:800; padding:6px 16px; border-radius:18px;
    cursor:pointer; color:#ecffd6; border:1px solid #3c6312;
    background:linear-gradient(#aee266 0%, #7cc23f 48%, #5c9a26 52%, #4d7d18 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(0,0,0,.25), 0 3px 9px rgba(0,0,0,.5);
    text-shadow:0 1px 1px rgba(0,0,0,.45); transition:filter .25s, opacity .25s; }
  #upBtn:active { background:linear-gradient(#7cc23f,#5c9a26 60%,#45720f);
    box-shadow:inset 0 2px 5px rgba(0,0,0,.4); }
  /* greyed-out when nothing is affordable */
  #upBtn.dim { filter:grayscale(1) brightness(.62); opacity:.75; }
  /* glowing red count badge when upgrades are affordable */
  #upBtn .badge { position:absolute; top:-7px; right:-7px; min-width:20px; height:20px;
    padding:0 5px; border-radius:11px; font-size:12px; line-height:20px; font-weight:900;
    color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.5); background:linear-gradient(#ff5b4d,#d62718);
    border:1px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.5);
    display:none; animation:badgePulse 1.1s ease-in-out infinite; }
  #upBtn.has-upgrades .badge { display:block; }
  /* during frenzy: dock the upgrade button right next to the achievements button.
     space is tight up there, so collapse to the icon only. */
  #upBtn.docked { position:fixed; top:8px; left:92px; z-index:41;
    padding:4px 10px; font-size:13px; border-radius:20px; }
  #upBtn.docked .lbl { display:none; }
  #upBtn.docked .badge { top:-6px; right:-6px; }
  @keyframes badgePulse {
    0%,100% { transform:scale(1);   box-shadow:0 1px 4px rgba(0,0,0,.5), 0 0 0 0 rgba(255,91,77,.6); }
    50%     { transform:scale(1.14); box-shadow:0 1px 4px rgba(0,0,0,.5), 0 0 0 6px rgba(255,91,77,0); }
  }
  #upPanel { position:fixed; inset:0; z-index:42; display:none; flex-direction:column; padding:14px; }
  #upPanel h2 { text-align:center; font-size:20px; margin-bottom:2px; }
  #upPanel .sub { text-align:center; font-size:11px; color:#9aa; margin-bottom:8px; }
  #upList { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:7px; }
  .uitem { display:flex; align-items:center; gap:10px; padding:9px 11px; cursor:pointer; }
  .uitem.maxed { opacity:.6; cursor:default; }
  .uitem.cant { opacity:.5; }
  .uitem .ico { font-size:24px; width:32px; text-align:center; filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
  .uitem .info { flex:1; min-width:0; }
  .uitem .info .nm { font-weight:700; font-size:13px; }
  .uitem .info .ds { font-size:11px; color:#cbb89a; }
  .uitem .info .mult { color:#a6e15a; font-weight:800; text-shadow:0 1px 1px rgba(0,0,0,.5); }
  .uitem .price { text-align:right; font-weight:800; font-size:13px; white-space:nowrap; color:#ffd98a;
    text-shadow:0 1px 1px rgba(0,0,0,.5); }
  .uitem .price.max { color:#a6e15a; }
  .upsec { font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:800; }
  /* colored per-section header (accent via --c set inline, like the achievement groups) */
  .upsec.tinted { background:linear-gradient(180deg,
      color-mix(in srgb, var(--c,#7bc043) 55%, #1a1c1e) 0%,
      color-mix(in srgb, var(--c,#7bc043) 22%, #111315) 100%);
    border:1px solid rgba(0,0,0,.55); border-top-color:color-mix(in srgb, var(--c,#7bc043) 70%, #fff); }
  #closeUp { margin-top:12px; text-align:center; padding:13px; font-weight:800; cursor:pointer; }
  #bucks { display:none; }
  #storePanel { position:fixed; inset:0; z-index:42; background:rgba(6,12,18,.96); display:none;
    flex-direction:column; padding:14px; }
  #storePanel h2 { text-align:center; font-size:19px; margin-bottom:2px; color:#7fe6ff; }
  #storePanel .sub { text-align:center; font-size:11px; color:#88a; margin-bottom:8px; }
  #storeList { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
  .sect { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:#6aa;
    margin:8px 2px 2px; font-weight:800; }
  .pitem { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.06);
    border:1px solid rgba(127,230,255,.18); border-radius:10px; padding:9px 11px; cursor:pointer; }
  .pitem:active { background:rgba(127,230,255,.14); }
  .pitem.bought { opacity:.5; cursor:default; }
  .pitem .ico { font-size:26px; width:34px; text-align:center; }
  .pitem .info { flex:1; min-width:0; }
  .pitem .info .nm { font-weight:700; font-size:14px; }
  .pitem .info .ds { font-size:11px; color:#9fb6c4; }
  .pitem .tag { font-size:9px; font-weight:800; background:#f0a000; color:#1d140c;
    padding:1px 6px; border-radius:10px; margin-left:6px; vertical-align:middle; }
  .pitem .price { text-align:right; font-weight:800; font-size:14px; white-space:nowrap; }
  .pitem .price.usd { color:#9bdb6a; }
  .pitem .price.bk { color:#7fe6ff; }
  #closeStore { margin-top:10px; text-align:center; padding:12px; background:#1283b8; color:#fff;
    border-radius:8px; font-weight:800; cursor:pointer; }
  /* settings */
  #setBtn { position:absolute; top:8px; right:84px; font-size:13px; font-weight:700;
    background:linear-gradient(#54575a,#34373a); padding:4px 9px; border-radius:20px; cursor:pointer;
    border:1px solid rgba(0,0,0,.5); border-top-color:rgba(255,255,255,.35);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 6px rgba(0,0,0,.4); }
  #setPanel { position:fixed; inset:0; z-index:46; background:rgba(4,5,8,.78); display:none;
    align-items:center; justify-content:center; padding:24px; }
  #setPanel .box { border:1px solid #25282a; border-top-color:#85888a; border-radius:16px;
    max-width:340px; width:100%; padding:20px;
    background:radial-gradient(ellipse at 50% -20%, #34373a 0%, #1c1e21 60%, #111315 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 14px 50px rgba(0,0,0,.7); }
  #setPanel h2 { text-align:center; font-size:19px; margin-bottom:16px; }
  .setrow { display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:12px 10px; margin-bottom:7px; }
  .setrow .lbl { font-size:15px; font-weight:700; text-shadow:0 1px 1px rgba(0,0,0,.5); }
  .setrow .lbl small { display:block; font-size:11px; color:#aeb4c4; font-weight:400; margin-top:2px;
    text-shadow:none; }
  .toggle { position:relative; width:54px; height:30px; flex:none; border-radius:30px;
    background:linear-gradient(#23252e,#3a3d49); cursor:pointer; transition:background .15s;
    border:1px solid rgba(0,0,0,.6); box-shadow:inset 0 2px 4px rgba(0,0,0,.5); }
  .toggle.on { background:linear-gradient(#5c9a26,#7cc23f);
    box-shadow:inset 0 1px 2px rgba(255,255,255,.4), 0 0 8px rgba(124,194,63,.5); }
  .toggle::after { content:''; position:absolute; top:2px; left:2px; width:24px; height:24px;
    border-radius:50%; transition:transform .15s;
    background:radial-gradient(circle at 38% 30%, #ffffff, #d2d5d7 60%, #a7abad);
    box-shadow:0 1px 3px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.8); }
  .toggle.on::after { transform:translateX(23px); }
  #closeSet { margin-top:16px; text-align:center; padding:13px; font-weight:800; cursor:pointer; }
  /* ===== reusable modal dialog — NXE design language (xpanel/xtitle/xbtn) ===== */
  /* hidden by default — JS sets inline display:flex to open. A visible-but-transparent
     overlay here would sit at z-index:50 and silently eat every tap on the game.
     z-index must beat #goldenToilet (9999) so a drifting toilet can't float over an
     open dialog and steal the tap meant for a button. */
  .modal { position:fixed; inset:0; z-index:10000; background:rgba(4,5,8,.78);
    display:none; align-items:center; justify-content:center; padding:24px;
    opacity:0; transition:opacity .16s ease; }
  .modal.show { opacity:1; }
  .modal .box { border:1px solid #25282a; border-top-color:#85888a; border-radius:16px;
    max-width:340px; width:100%; padding:22px 20px; text-align:center;
    background:radial-gradient(ellipse at 50% -20%, #34373a 0%, #1c1e21 60%, #111315 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 14px 50px rgba(0,0,0,.7);
    transform:translateY(10px) scale(.97); transition:transform .16s ease; }
  .modal.show .box { transform:none; }
  .modal .xtitle { display:block; font-size:19px; margin-bottom:12px; font-weight:800; }
  .modal .mbody { font-size:13.5px; color:#cdd2dc; line-height:1.55; margin-bottom:8px; }
  .modal .mbody b { color:#fff; }
  .modal .mpr { font-size:20px; font-weight:800; margin:12px 0;
    background:linear-gradient(#ffd9d2,#e8705f 60%,#cc4733);
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  .modal .mdisc { font-size:11px; color:#8c93a3; font-style:italic; margin-bottom:2px; }
  .modal .mrow { display:flex; gap:9px; margin-top:18px; }
  .modal .mrow .xbtn { flex:1; padding:12px; text-align:center; font-weight:800; cursor:pointer; }
  /* neutral grey xbtn variant (metallic, matches top-bar chips) */
  .xbtn.alt { border:1px solid #2a2d2f; color:#e7eaec !important;
    background:linear-gradient(#6a6d70 0%, #4a4d50 48%, #3a3d40 52%, #2e3134 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.25), 0 3px 9px rgba(0,0,0,.5); }
  .xbtn.alt:active { background:linear-gradient(#4a4d50 0%, #3a3d40 60%, #2a2d30 100%);
    box-shadow:inset 0 2px 5px rgba(0,0,0,.4); }
  /* red danger xbtn variant */
  .xbtn.danger { border:1px solid #6e1b12; color:#ffe9e6 !important;
    background:linear-gradient(#e8705f 0%, #cc4733 48%, #a8341f 52%, #8a2817 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.25), 0 3px 9px rgba(0,0,0,.5); }
  .xbtn.danger:active { background:linear-gradient(#cc4733 0%, #a8341f 60%, #7a2010 100%);
    box-shadow:inset 0 2px 5px rgba(0,0,0,.4); }
  /* reset row in settings */
  #resetRow { cursor:pointer; }
  #resetRow .lbl { color:#ff8a7a; }
  #resetRow .chev { font-size:22px; color:#9aa; font-weight:700; }
  /* statistics panel */
  #openStatsRow { cursor:pointer; }
  #openStatsRow .chev { font-size:22px; color:#9aa; font-weight:700; }
  #statsPanel { position:fixed; inset:0; z-index:47; display:none; flex-direction:column; padding:14px; }
  #statsPanel h2 { text-align:center; font-size:20px; margin-bottom:2px; }
  #statsPanel .sub { text-align:center; font-size:11px; color:#9aa; margin-bottom:8px; }
  #statsWrap { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  #closeStats { margin-top:12px; padding:13px; text-align:center; font-weight:800; cursor:pointer; flex:none; }
  #ppsChartBox { border:1px solid rgba(0,0,0,.55); border-top-color:rgba(255,255,255,.25);
    border-radius:10px; padding:8px 9px 5px; margin-bottom:12px;
    background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.12));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15); }
  #ppsChartBox .ttl { font-size:11px; text-transform:uppercase; letter-spacing:.08em;
    color:#cdb46a; margin-bottom:4px; }
  #ppsChart { width:100%; height:120px; display:block; }
  #ppsChartBox .axl { display:flex; justify-content:space-between; font-size:10px; color:#9aa; margin-top:2px; }
  #statList { list-style:none; display:flex; flex-direction:column; gap:6px; margin:0; padding:0; }
  #statList li { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; }
  #statList li .k { font-size:13px; color:#d8dde6; }
  #statList li .v { font-size:14px; font-weight:800; color:#ffd98a; text-align:right; white-space:nowrap; }
  #statList li.dim .v { color:#9aa; font-weight:600; }