/* =====================================================================
   CAT SURVIVORS - mochi.css
   The cute sticker-book UI theme, layered over style.css (loaded right
   after it, so equal specificity wins). Creamy milk panels, chocolate
   ink and thick chocolate outlines with a hard offset "sticker" shadow,
   strawberry / lilac / mint / lemon / sky accents, bubbly squishy buttons.
   Pure presentation: no ids, hooks or layouts are changed.
   Font: Fredoka (SIL Open Font License 1.1, see fonts/Fredoka-OFL.txt).
   ===================================================================== */
@font-face{
  font-family:'Fredoka';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('fonts/fredoka-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fredoka';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('fonts/fredoka-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --bg:#2e2342;
  --ink:#4a2b1d;
  --dim:#86604c;
  --accent:#ef4f72;
  --accent2:#7a5bd6;
  --good:#2a9d63;
  --bad:#e23e5f;
  --panel:#fff8ef;
  --line:#4a2b1d;
  --font:'Fredoka','Nunito','Segoe UI Rounded','Arial Rounded MT Bold','Segoe UI',system-ui,sans-serif;

  /* mochi palette */
  --m-choc:#4a2b1d;
  --m-choc2:#6e4634;
  --m-cream:#fff8ef;
  --m-cream2:#fff1dc;
  --m-milk:#fffdf8;
  --m-straw:#ff6f8e;
  --m-straw-d:#e8466a;
  --m-pink:#ffd3de;
  --m-rose:#ff8fab;
  --m-lilac:#e4dbff;
  --m-lilac-d:#9b82f2;
  --m-mint:#cff4df;
  --m-mint-d:#4cc488;
  --m-lemon:#fff2ad;
  --m-lemon-d:#ffcf3f;
  --m-sky:#d6ecff;
  --m-sky-d:#5eb2f5;
  --m-peach:#ffdcc6;
  --m-stk:0 4px 0 #4a2b1d;
  --m-stk-lg:0 6px 0 #4a2b1d;
  --m-soft:0 14px 30px rgba(58,30,70,.28);
  --m-ol:1.5px 0 0 #4a2b1d,-1.5px 0 0 #4a2b1d,0 1.5px 0 #4a2b1d,0 -1.5px 0 #4a2b1d,1px 1px 0 #4a2b1d,-1px 1px 0 #4a2b1d,1px -1px 0 #4a2b1d,-1px -1px 0 #4a2b1d;
  --m-ol2:2.5px 0 0 #4a2b1d,-2.5px 0 0 #4a2b1d,0 2.5px 0 #4a2b1d,0 -2.5px 0 #4a2b1d,1.8px 1.8px 0 #4a2b1d,-1.8px 1.8px 0 #4a2b1d,1.8px -1.8px 0 #4a2b1d,-1.8px -1.8px 0 #4a2b1d;
  --m-paw:
    radial-gradient(ellipse 31% 25% at 50% 70%,#ff8fab 96%,transparent 100%),
    radial-gradient(circle at 17% 40%,#ff8fab 0 11%,transparent 12.5%),
    radial-gradient(circle at 38% 17%,#ff8fab 0 11.5%,transparent 13%),
    radial-gradient(circle at 62% 17%,#ff8fab 0 11.5%,transparent 13%),
    radial-gradient(circle at 83% 40%,#ff8fab 0 11%,transparent 12.5%);
  --m-paw-w:
    radial-gradient(ellipse 31% 25% at 50% 70%,rgba(255,255,255,.9) 96%,transparent 100%),
    radial-gradient(circle at 17% 40%,rgba(255,255,255,.9) 0 11%,transparent 12.5%),
    radial-gradient(circle at 38% 17%,rgba(255,255,255,.9) 0 11.5%,transparent 13%),
    radial-gradient(circle at 62% 17%,rgba(255,255,255,.9) 0 11.5%,transparent 13%),
    radial-gradient(circle at 83% 40%,rgba(255,255,255,.9) 0 11%,transparent 12.5%);
}

html,body{background:var(--bg);color:var(--ink);font-family:var(--font);}
canvas#stage{background:#2e2342;}
#vignette{box-shadow:inset 0 0 200px 30px rgba(52,28,78,.42);}
::selection{background:#ffc9d6;color:#4a2b1d;}

/* scrollbars: little strawberry-milk pills */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#ffb3c6;border:2.5px solid #4a2b1d;border-radius:999px;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:#ff8fab;}
::-webkit-scrollbar-corner{background:transparent;}
.cust-items::-webkit-scrollbar,.achv-list::-webkit-scrollbar,.ad-list::-webkit-scrollbar{width:12px;}
.perk-grid::-webkit-scrollbar{width:10px;}
.cust-items::-webkit-scrollbar-track,.achv-list::-webkit-scrollbar-track{background:rgba(74,43,29,.06);border-radius:999px;}
.cust-items::-webkit-scrollbar-thumb,.achv-list::-webkit-scrollbar-thumb,.perk-grid::-webkit-scrollbar-thumb,.ad-list::-webkit-scrollbar-thumb{background:#ffb3c6;border:2.5px solid #4a2b1d;border-radius:999px;}
.cust-items::-webkit-scrollbar-thumb:hover,.achv-list::-webkit-scrollbar-thumb:hover{background:#ff8fab;}

/* ---------------- screens + panels ---------------- */
.panel-screen{background:rgba(58,34,84,.52);backdrop-filter:blur(3px);}
.panel{
  background:var(--m-cream);color:var(--m-choc);
  border:3px solid var(--m-choc);border-radius:28px;
  box-shadow:0 7px 0 var(--m-choc), 0 24px 60px rgba(40,18,56,.45), inset 0 -6px 0 rgba(244,223,211,.55);
}
.panel h2{color:var(--m-choc);font-weight:700;letter-spacing:4px;font-size:28px;}
.panel h2::after{content:'\2665';display:inline-block;margin-left:10px;color:var(--m-straw);font-size:.72em;vertical-align:.12em;
  text-shadow:var(--m-ol);animation:mHeart 1.8s ease-in-out infinite;}
.panel h2.dead{color:var(--m-straw-d);}
.panel h2.dead::after{content:'\1F494';color:initial;text-shadow:none;animation:mDroop 2.6s ease-in-out infinite;}
@keyframes mDroop{0%,100%{transform:rotate(-8deg) translateY(0);}50%{transform:rotate(8deg) translateY(3px);}}
.panel h3{color:var(--m-choc2);font-weight:700;letter-spacing:3px;}
.hint{color:var(--dim);}
@keyframes mHeart{0%,100%{transform:scale(1) rotate(-6deg);}50%{transform:scale(1.18) rotate(6deg);}}
@keyframes mBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
@keyframes mWiggle{0%,100%{transform:rotate(-2deg);}50%{transform:rotate(2deg);}}
@keyframes mPop{0%{transform:scale(.6);opacity:0;}70%{transform:scale(1.08);opacity:1;}100%{transform:scale(1);}}

/* ---------------- buttons: bubbly + squishy ---------------- */
.btn{
  background:var(--m-cream2);color:var(--m-choc);
  border:2.5px solid var(--m-choc);border-radius:16px;
  font-family:var(--font);font-weight:700;letter-spacing:1.6px;
  box-shadow:0 4px 0 var(--m-choc), inset 0 -4px 0 rgba(74,43,29,.08), inset 0 2px 0 rgba(255,255,255,.7);
  transition:transform .12s cubic-bezier(.3,1.5,.5,1), background .15s, box-shadow .12s, filter .15s;
}
.btn:hover{background:#fffaf1;border-color:var(--m-choc);transform:translateY(-2px);
  box-shadow:0 6px 0 var(--m-choc), inset 0 -4px 0 rgba(74,43,29,.08), inset 0 2px 0 rgba(255,255,255,.7);}
.btn:active{transform:translateY(3px) scale(.97,.95);box-shadow:0 1px 0 var(--m-choc), inset 0 -2px 0 rgba(74,43,29,.08);}
.btn.big{border-radius:999px;letter-spacing:4px;}
.btn.sm{border-radius:12px;border-width:2px;box-shadow:0 3px 0 var(--m-choc);}
.btn.sm:hover{box-shadow:0 4px 0 var(--m-choc);}
.btn.sm:active{box-shadow:0 1px 0 var(--m-choc);}
.btn.ghost{background:#fffdf8;color:var(--m-choc2);}
.btn.ghost:hover{background:#fff;}
.btn.accent{background:var(--m-straw);color:#fff;border-color:var(--m-choc);text-shadow:var(--m-ol);
  box-shadow:0 4px 0 var(--m-choc), inset 0 -5px 0 rgba(190,30,70,.28), inset 0 3px 0 rgba(255,255,255,.45);}
.btn.accent:hover{background:#ff809c;box-shadow:0 6px 0 var(--m-choc), inset 0 -5px 0 rgba(190,30,70,.28), inset 0 3px 0 rgba(255,255,255,.45);}
.btn.accent:active{box-shadow:0 1px 0 var(--m-choc), inset 0 -3px 0 rgba(190,30,70,.28);}
#screen-pause .btn.big[data-act="resume"]{background:var(--m-straw);color:#fff;text-shadow:var(--m-ol);
  box-shadow:0 4px 0 var(--m-choc), inset 0 -5px 0 rgba(190,30,70,.28), inset 0 3px 0 rgba(255,255,255,.45);}
#screen-pause .btn.big[data-act="resume"]:hover{background:#ff809c;
  box-shadow:0 6px 0 var(--m-choc), inset 0 -5px 0 rgba(190,30,70,.28), inset 0 3px 0 rgba(255,255,255,.45);}
#screen-pause .btn.big[data-act="resume"]:active{box-shadow:0 1px 0 var(--m-choc), inset 0 -3px 0 rgba(190,30,70,.28);}
.btn.danger{background:#ffe1e6;border-color:var(--m-choc);color:#d42f55;}
.btn.danger:hover{background:#ffd0d9;}
.btn[disabled],.btn[disabled]:hover,.btn[disabled]:active{opacity:.5;filter:grayscale(.45);cursor:not-allowed;transform:none;
  box-shadow:0 3px 0 var(--m-choc);}
.btn:focus-visible{outline:3px dashed var(--m-straw);outline-offset:3px;}

/* ---------------- form bits ---------------- */
input[type=text]{background:var(--m-milk);border:2.5px solid var(--m-choc);color:var(--m-choc);border-radius:14px;
  font-family:var(--font);font-weight:600;box-shadow:inset 0 3px 0 rgba(74,43,29,.08);}
input[type=text]:focus{outline:none;box-shadow:0 0 0 4px #ffd3de, inset 0 3px 0 rgba(74,43,29,.08);}
input[type=text]::placeholder{color:#c4a493;}
input[type=range]{-webkit-appearance:none;appearance:none;height:14px;border-radius:999px;background:#ffe3ea;
  border:2.5px solid var(--m-choc);box-shadow:inset 0 3px 0 rgba(74,43,29,.1);cursor:pointer;accent-color:var(--m-straw);margin:6px 0;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--m-straw);border:2.5px solid var(--m-choc);box-shadow:0 2px 0 var(--m-choc), inset 0 3px 0 rgba(255,255,255,.5);cursor:grab;}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12);cursor:grabbing;}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--m-straw);border:2.5px solid var(--m-choc);}
input[type=range]::-moz-range-track{background:transparent;}
input[type=checkbox]{-webkit-appearance:none;appearance:none;width:26px;height:26px;margin:0;border-radius:9px;
  background:var(--m-milk);border:2.5px solid var(--m-choc);box-shadow:0 3px 0 var(--m-choc);cursor:pointer;
  display:inline-grid;place-content:center;flex:0 0 auto;transition:transform .12s cubic-bezier(.3,1.6,.5,1), background .15s;}
input[type=checkbox]::before{content:'';width:11px;height:6px;border-left:3.5px solid #fff;border-bottom:3.5px solid #fff;
  transform:translateY(-2px) rotate(-45deg) scale(0);transition:transform .16s cubic-bezier(.3,1.7,.5,1);}
input[type=checkbox]:checked{background:var(--m-straw);}
input[type=checkbox]:checked::before{transform:translateY(-2px) rotate(-45deg) scale(1);}
input[type=checkbox]:hover{transform:translateY(-1px) rotate(-4deg);}
input[type=checkbox]:active{transform:translateY(2px) scale(.94);box-shadow:0 1px 0 var(--m-choc);}

/* ---------------- main menu ---------------- */
.title-sub{display:inline-flex;align-self:center;margin:0 auto 12px;padding:5px 16px;border-radius:999px;gap:10px;
  background:var(--m-lemon);border:2.5px solid var(--m-choc);box-shadow:0 4px 0 var(--m-choc);
  color:var(--m-choc);font-weight:700;letter-spacing:4px;font-size:11.5px;}
.title-wrap{display:flex;flex-direction:column;align-items:center;}
.title-sub i{width:44px;height:10px;background:radial-gradient(circle,#ff8fab 0 3px,transparent 3.6px) 0 50%/11px 10px repeat-x;}
.title-sub i:last-child{background:radial-gradient(circle,#ff8fab 0 3px,transparent 3.6px) 0 50%/11px 10px repeat-x;}
.title{font-weight:700;letter-spacing:8px;}
.title .t-top{color:#fffaf3;letter-spacing:14px;
  text-shadow:4px 0 0 #4a2b1d,-4px 0 0 #4a2b1d,0 4px 0 #4a2b1d,0 -4px 0 #4a2b1d,3px 3px 0 #4a2b1d,-3px 3px 0 #4a2b1d,3px -3px 0 #4a2b1d,-3px -3px 0 #4a2b1d,
    4px 2px 0 #4a2b1d,-4px 2px 0 #4a2b1d,2px 4px 0 #4a2b1d,-2px 4px 0 #4a2b1d,
    0 10px 0 #4a2b1d,3px 9px 0 #4a2b1d,-3px 9px 0 #4a2b1d,0 18px 26px rgba(30,12,40,.5);
  animation:titleFloat 5s ease-in-out infinite;}
.title .t-bot{color:#ff7c98;-webkit-text-fill-color:#ff7c98;background:none;-webkit-background-clip:border-box;background-clip:border-box;
  filter:none;letter-spacing:16px;margin-top:10px;
  text-shadow:3px 0 0 #4a2b1d,-3px 0 0 #4a2b1d,0 3px 0 #4a2b1d,0 -3px 0 #4a2b1d,2.2px 2.2px 0 #4a2b1d,-2.2px 2.2px 0 #4a2b1d,2.2px -2.2px 0 #4a2b1d,-2.2px -2.2px 0 #4a2b1d,
    0 8px 0 #4a2b1d,2.5px 7px 0 #4a2b1d,-2.5px 7px 0 #4a2b1d,0 14px 22px rgba(30,12,40,.45);
  animation:titleFloat 5s ease-in-out -0.5s infinite;}
.title .t-bot::after{content:'';position:absolute;right:-6px;top:-18px;width:36px;height:36px;background:var(--m-paw-w);
  transform:rotate(18deg);filter:drop-shadow(0 2px 0 rgba(74,43,29,.6));animation:mWiggle 2.4s ease-in-out infinite;}
.title-tag{margin-top:14px;color:#fff4f7;opacity:1;font-weight:600;letter-spacing:4px;text-shadow:var(--m-ol), 0 3px 0 #4a2b1d;}

#screen-menu .btn.mbtn{width:372px;border-radius:26px;padding:10px 18px 12px 12px;
  background:var(--m-cream);border:3px solid var(--m-choc);color:var(--m-choc);backdrop-filter:none;
  box-shadow:0 6px 0 var(--m-choc), 0 16px 30px rgba(30,12,40,.35), inset 0 -6px 0 rgba(244,223,211,.7), inset 0 3px 0 rgba(255,255,255,.8);
  transition:transform .16s cubic-bezier(.3,1.6,.5,1), box-shadow .14s, background .15s;}
#screen-menu .btn.mbtn::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);}
#screen-menu .btn.mbtn:hover{transform:translateY(-3px) rotate(-1deg) scale(1.02);border-color:var(--m-choc);
  box-shadow:0 9px 0 var(--m-choc), 0 20px 34px rgba(30,12,40,.38), inset 0 -6px 0 rgba(244,223,211,.7), inset 0 3px 0 rgba(255,255,255,.8);}
#screen-menu .btn.mbtn:active{transform:translateY(4px) scale(.97,.94);
  box-shadow:0 2px 0 var(--m-choc), 0 8px 16px rgba(30,12,40,.3), inset 0 -3px 0 rgba(244,223,211,.7);}
.mbtn .mb-ico{width:46px;height:46px;border-radius:50%;font-size:19px;color:var(--m-choc);
  background:var(--m-sky);border:2.5px solid var(--m-choc);box-shadow:0 3px 0 var(--m-choc);}
.mbtn .mb-txt b{font-size:20px;letter-spacing:4px;font-weight:700;}
.mbtn .mb-txt small{color:var(--dim);font-weight:500;letter-spacing:1.2px;}
.mbtn .mb-arrow{font-size:30px;color:var(--m-choc2);opacity:.75;}
.mbtn:hover .mb-arrow{color:var(--m-straw-d);opacity:1;}
#screen-menu .btn.mbtn.primary{background:var(--m-straw);color:#fff;border-color:var(--m-choc);
  box-shadow:0 6px 0 var(--m-choc), 0 16px 30px rgba(30,12,40,.35), inset 0 -7px 0 rgba(190,30,70,.3), inset 0 3px 0 rgba(255,255,255,.5);
  animation:rise .6s cubic-bezier(.2,.9,.3,1) .25s both, mPlayPing 2.2s ease-out 1.2s infinite;}
#screen-menu .btn.mbtn.primary .mb-txt b{text-shadow:var(--m-ol2), 0 3px 0 #4a2b1d;letter-spacing:6px;font-size:22px;}
#screen-menu .btn.mbtn.primary .mb-ico{background:#fff;border-color:var(--m-choc);color:var(--m-straw-d);}
#screen-menu .btn.mbtn.primary .mb-txt small{color:#fff;text-shadow:var(--m-ol);}
#screen-menu .btn.mbtn.primary .mb-arrow{color:#fff;opacity:1;text-shadow:var(--m-ol);}
#screen-menu .btn.mbtn.primary:hover{background:#ff809c;border-color:var(--m-choc);}
#screen-menu .btn.mbtn.primary:active{animation:none;}
@keyframes mPlayPing{
  0%{box-shadow:0 6px 0 #4a2b1d, 0 0 0 0 rgba(255,111,142,.55), inset 0 -7px 0 rgba(190,30,70,.3), inset 0 3px 0 rgba(255,255,255,.5);}
  70%,100%{box-shadow:0 6px 0 #4a2b1d, 0 0 0 16px rgba(255,111,142,0), inset 0 -7px 0 rgba(190,30,70,.3), inset 0 3px 0 rgba(255,255,255,.5);}}
#screen-menu .btn.mbtn[data-act=settings] .mb-ico{background:var(--m-mint);}
#screen-menu .btn.mbtn.ghost{background:var(--m-lilac);color:var(--m-choc);}
#screen-menu .btn.mbtn.ghost .mb-ico{color:var(--m-choc);background:#fff4f7;border-color:var(--m-choc);}
#screen-menu .menu-foot{background:var(--m-cream);border:2.5px solid var(--m-choc);color:var(--m-choc2);font-weight:600;
  box-shadow:0 4px 0 var(--m-choc);backdrop-filter:none;}
.coin-pill{color:#b86a00;font-weight:700;}
.coin-ico{background:radial-gradient(circle at 36% 32%,#fffbe3 0 16%,#ffe066 19% 58%,#f5b92e 62% 100%);
  box-shadow:0 0 0 1.8px #4a2b1d, inset 0 -2px 0 rgba(160,90,0,.35);}

/* ---------------- settings ---------------- */
.settings-grid{gap:9px 14px;}
.settings-grid label{color:var(--m-choc2);font-weight:600;letter-spacing:.6px;}
.rowflex .val{color:#6a4fc7;font-weight:700;background:var(--m-lilac);border:2px solid var(--m-choc);border-radius:999px;
  padding:1px 8px;text-align:center;min-width:44px;box-shadow:0 2px 0 var(--m-choc);}
.controls-grid{color:var(--m-choc2);line-height:1.7;}
.controls-grid > div{background:#fffdf8;border:2px dashed rgba(74,43,29,.28);border-radius:14px;padding:2px 10px;}
.controls-grid b{display:inline-block;color:var(--m-choc);background:var(--m-cream2);border:2px solid var(--m-choc);border-radius:7px;
  padding:0 5px;line-height:1.25;box-shadow:0 2px 0 var(--m-choc);font-weight:700;}
.controls-grid > div > b:first-child{background:var(--m-pink);}
/* wide-but-short screens: settings left, controls right, so nothing has to scroll */
@media (min-width:1180px) and (max-height:1140px){
  #screen-settings .panel{width:min(1160px,94vw);max-width:min(1160px,94vw);display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto 1fr auto;column-gap:30px;align-items:start;}
  #screen-settings .panel > h2{grid-column:1 / -1;grid-row:1;}
  #screen-settings .settings-grid{grid-column:1;grid-row:2 / 4;}
  #screen-settings .panel > h3{grid-column:2;grid-row:2;margin-top:6px;}
  #screen-settings .controls-grid{grid-column:2;grid-row:3;}
  #screen-settings .panel-btns{grid-column:1 / -1;grid-row:4;}
}

/* ---------------- shop (base) ---------------- */
.sitem{background:var(--m-milk);border:2.5px solid var(--m-choc);border-radius:18px;box-shadow:0 4px 0 var(--m-choc);
  transition:transform .14s cubic-bezier(.3,1.6,.5,1), box-shadow .14s, background .15s;}
.sitem:hover{border-color:var(--m-choc);transform:translateY(-3px) rotate(-1.2deg);box-shadow:0 7px 0 var(--m-choc);background:#fff;}
.sitem:active{transform:translateY(2px) scale(.97);box-shadow:0 1px 0 var(--m-choc);}
.sitem canvas{background:var(--m-sky);border:2px solid var(--m-choc);border-radius:14px;}
.sitem b{color:var(--m-choc);font-weight:700;}
.sitem small{color:#b86a00;font-weight:700;}
.sitem.owned{border-color:var(--m-choc);background:var(--m-mint);}
.sitem.owned small{color:var(--good);}
.sitem.cant small{color:var(--bad);}
.coinpill{color:#b86a00;font-weight:700;}

/* ---------------- class pick (old grid) ---------------- */
.classcard{background:var(--m-milk);border:2.5px solid var(--m-choc);border-radius:20px;box-shadow:0 4px 0 var(--m-choc);color:var(--m-choc);}
.classcard:hover{border-color:var(--m-choc);box-shadow:0 8px 0 var(--m-choc);}
.classcard canvas{background:var(--m-sky);border:2px solid var(--m-choc);border-radius:14px;}
.classcard .weap{color:var(--accent2);font-weight:600;}
.classcard p,.classcard .keyhint{color:var(--dim);}

/* ---------------- game over (base) ---------------- */
table.stats th{color:var(--dim);font-weight:700;border-bottom:2.5px solid var(--m-choc);}
table.stats td{border-bottom:2px dashed rgba(74,43,29,.16);color:var(--m-choc);}
table.stats td.nm{text-shadow:var(--m-ol);}
table.stats tr.me td{background:rgba(255,224,102,.32);}
.go-reward{color:var(--m-choc);font-weight:600;}
.go-reward b{color:var(--m-straw-d);font-weight:700;text-shadow:0 3px 0 rgba(74,43,29,.18);}

/* ---------------- HUD: cream stickers over the prowl ---------------- */
#hud{font-family:var(--font);color:var(--m-choc);}
.hud-chip{background:var(--m-cream);border:2.5px solid var(--m-choc);border-radius:14px;color:var(--m-choc);font-weight:700;
  box-shadow:0 3px 0 var(--m-choc), 0 6px 14px rgba(30,12,40,.25);}
.hud-chip.big{color:var(--m-choc);font-weight:700;background:var(--m-lemon);}
.hud-chip.warn{color:#fff;background:var(--m-straw);border-color:var(--m-choc);text-shadow:var(--m-ol);}
#hud-board{background:var(--m-cream);border:2.5px solid var(--m-choc);border-radius:18px;color:var(--m-choc);
  box-shadow:0 4px 0 var(--m-choc), 0 8px 18px rgba(30,12,40,.25);}
.bd-title{color:var(--m-choc2);font-weight:700;}
.bd-row{font-weight:600;}
.bd-row .sw{border:2px solid var(--m-choc);width:12px;height:12px;}
.bd-row .dm{color:var(--m-straw-d);}
#hud-wave{color:#ff7c98;text-shadow:var(--m-ol2), 0 4px 0 #4a2b1d;font-weight:700;}
.ppill{background:var(--m-cream);border:2.5px solid var(--m-choc);border-radius:18px;color:var(--m-choc);
  box-shadow:0 3px 0 var(--m-choc), 0 6px 14px rgba(30,12,40,.25);}
.ppill .av{background:var(--m-sky);border:2px solid var(--m-choc);border-radius:50%;}
.ppill .nm{font-weight:700;}
.ppill .nm span{text-shadow:var(--m-ol);}
.ppill .nm i{color:var(--m-choc2);font-weight:600;}
.bar{height:8px;border-radius:999px;background:#f1ddd0;border:1.8px solid var(--m-choc);box-sizing:content-box;}
.bar > i{border-radius:999px;}
.bar.hp > i{background:linear-gradient(180deg,#ff9bb1 0 35%,#ff5f7e 36% 100%);}
.bar.xp > i{background:linear-gradient(180deg,#b9e3ff 0 35%,#6cbcff 36% 100%);}
.ppill.down .nm{color:var(--bad);}
.cmsg{background:var(--m-cream);border:2px solid var(--m-choc);border-left:6px solid #b39cff;border-radius:12px;color:var(--m-choc);font-weight:500;
  box-shadow:0 2px 0 var(--m-choc);}
.cmsg b{color:#6a4fc7;text-shadow:var(--m-ol);}
.cmsg.sys{border-left-color:var(--m-straw);color:var(--m-straw-d);font-weight:700;}
#chat-input{background:var(--m-milk);border:2.5px solid var(--m-choc);color:var(--m-choc);}
.toast{background:var(--m-lemon);border:2.5px solid var(--m-choc);border-radius:999px;color:var(--m-choc);font-weight:700;
  box-shadow:0 3px 0 var(--m-choc), 0 8px 16px rgba(30,12,40,.25);}
.bb-name{color:#ff7c98;text-shadow:var(--m-ol2), 0 3px 0 #4a2b1d;font-weight:700;}
.bb-track{background:var(--m-cream);border:2.5px solid var(--m-choc);border-radius:999px;height:16px;box-shadow:0 3px 0 var(--m-choc);}
.bb-fill{background:linear-gradient(180deg,#ff9bb1 0 35%,#ff5f7e 36% 100%);}

/* ---------------- menu legibility over the campfire ---------------- */
#screen-menu .btn{box-shadow:0 4px 0 var(--m-choc);}
#screen-menu .btn.ghost{border-color:var(--m-choc);}
#screen-menu .btn.ghost:hover{color:var(--m-choc);border-color:var(--m-choc);}
#screen-menu .menu-foot{text-shadow:none;}
#screen-menu .title-wrap{text-shadow:none;}

/* ---------------- summon panel ---------------- */
#hud-summon{background:var(--m-cream);border:2.5px solid var(--m-choc);border-radius:18px;color:var(--m-choc);
  box-shadow:0 4px 0 var(--m-choc), 0 8px 18px rgba(30,12,40,.25);}
#hud-summon canvas{background:var(--m-sky);border:2px solid var(--m-choc);border-radius:50%;}
#hud-summon .sm-name{color:var(--m-choc2);font-weight:700;}
#hud-summon .sm-count{color:var(--dim);font-weight:700;}
#hud-summon .sm-count b{color:var(--m-choc);}
#hud-summon .sm-key{background:var(--m-cream2);color:var(--m-choc);border:2px solid var(--m-choc);border-radius:9px;box-shadow:0 2px 0 var(--m-choc);}
#hud-summon .sm-cd{background:#f1ddd0;border-radius:999px;height:4px;}
#hud-summon .sm-cd > i{background:#c9a898;border-radius:999px;}
#hud-summon.ready{border-color:var(--m-choc);box-shadow:0 4px 0 var(--m-choc), 0 0 0 4px var(--m-mint-d), 0 8px 18px rgba(30,12,40,.25);}
#hud-summon.ready .sm-key{background:var(--m-mint-d);color:#fff;border-color:var(--m-choc);text-shadow:var(--m-ol);}
#hud-summon.ready .sm-cd > i{background:var(--m-mint-d);}
#hud-summon.full .sm-count b{color:var(--m-straw-d);}
#hud-summon.full .sm-key{background:var(--m-cream2);color:var(--m-choc2);border-color:var(--m-choc);text-shadow:none;}

/* ---------------- lobby name + cosmetics grid ---------------- */
#lobby-name{background:var(--m-milk);border:2.5px solid var(--m-choc);border-radius:999px;color:var(--m-choc);font-weight:700;
  box-shadow:0 3px 0 var(--m-choc), inset 0 3px 0 rgba(74,43,29,.08);}
#lobby-name::placeholder{color:#c4a493;}
#lobby-name:hover{border-color:var(--m-choc);}
#lobby-name:focus{border-color:var(--m-choc);box-shadow:0 3px 0 var(--m-choc), 0 0 0 5px #ffd3de;}
.tab{background:var(--m-cream2);border:2px solid var(--m-choc);color:var(--m-choc2);font-weight:700;box-shadow:0 2px 0 var(--m-choc);
  transition:transform .12s cubic-bezier(.3,1.6,.5,1), background .15s;}
.tab:hover{background:#fff;transform:translateY(-1px);}
.tab:active{transform:translateY(2px);box-shadow:0 0 0 var(--m-choc);}
.tab.on{background:var(--m-straw);color:#fff;border-color:var(--m-choc);text-shadow:var(--m-ol);}
.citem{background:var(--m-milk);border:2.5px solid var(--m-choc);border-radius:16px;color:var(--m-choc);box-shadow:0 3px 0 var(--m-choc);}
.citem:hover{border-color:var(--m-choc);transform:translateY(-2px) rotate(-1deg);box-shadow:0 5px 0 var(--m-choc);}
.citem.on{border-color:var(--m-choc);background:#ffe6ee;box-shadow:0 3px 0 var(--m-choc), 0 0 0 3.5px var(--m-straw);}
.citem.on::after{content:'\2665';position:absolute;top:4px;left:6px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--m-straw);color:#fff;border:2px solid var(--m-choc);font-size:11px;line-height:1;animation:mPop .3s cubic-bezier(.3,1.6,.5,1) both;}
.citem.locked{opacity:.55;filter:grayscale(.35);}
.ci-art{background:radial-gradient(circle at 50% 38%,#fffdf8 0 30%,#ffe9ef 75%);border:2px solid var(--m-choc);border-radius:14px;}
.ci-name{color:var(--m-choc);font-weight:600;}
.citem.on .ci-name{color:var(--m-straw-d);}
.ci-lock{background:var(--m-lemon);border:2px solid var(--m-choc);color:var(--m-choc);font-weight:700;box-shadow:0 2px 0 var(--m-choc);}
#shop-tabs .tab i{background:var(--m-straw);color:#fff;border:1.5px solid var(--m-choc);text-shadow:none;}
#shop-tabs .tab.on i{background:#fff;color:var(--m-straw-d);}
.shop-empty{color:var(--dim);font-weight:600;}

/* ---------------- xp dock ---------------- */
#xp-dock .xd-lvl{background:var(--m-lemon);border:3px solid var(--m-choc);border-radius:18px;
  box-shadow:0 4px 0 var(--m-choc), 0 8px 16px rgba(30,12,40,.3);}
#xp-dock .xd-lvl b{color:var(--m-choc);font-weight:700;}
#xp-dock .xd-lvl i{color:var(--m-choc2);font-weight:700;}
#xp-dock .xd-track{height:22px;border-radius:999px;background:var(--m-cream);border:3px solid var(--m-choc);
  box-shadow:0 4px 0 var(--m-choc), inset 0 3px 0 rgba(74,43,29,.12), 0 8px 16px rgba(30,12,40,.3);}
#xp-dock .xd-fill{border-radius:999px;box-shadow:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0 30%,rgba(255,255,255,0) 31%),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.2) 0 7px,rgba(255,255,255,0) 7px 14px),
    linear-gradient(90deg,#8fd3ff,#b7a0ff 60%,#ff9ec0);}
#xp-dock .xd-ghost{background:rgba(255,158,192,.35);border-radius:999px;}
#xp-dock .xd-meta{color:#fffaf3;font-weight:700;text-shadow:var(--m-ol);}
#xp-dock .xd-pending{color:var(--m-choc);background:var(--m-lemon);border:2px solid var(--m-choc);border-radius:999px;padding:0 8px;
  text-shadow:none;box-shadow:0 2px 0 var(--m-choc);}
#xp-dock .xd-pop{color:#fff;font-weight:700;text-shadow:var(--m-ol2), 0 4px 0 #4a2b1d, 0 0 18px rgba(255,143,171,.9);}
#xp-dock.levelup .xd-lvl{border-color:var(--m-choc);background:var(--m-straw);box-shadow:0 4px 0 var(--m-choc), 0 0 0 5px rgba(255,143,171,.55);}
#xp-dock.levelup .xd-lvl b,#xp-dock.levelup .xd-lvl i{color:#fff;text-shadow:var(--m-ol);}
#xp-dock.levelup .xd-track{border-color:var(--m-choc);}

/* ---------------- every bottom dock: one cream sticker style ---------------- */
#hud-summon,#hud-ability,#hud-vendor,#hud-ehs,#hud-dct,#hud-ceom{
  background:var(--m-cream);border:2.5px solid var(--m-choc);border-radius:18px;color:var(--m-choc);
  box-shadow:0 4px 0 var(--m-choc), 0 8px 18px rgba(30,12,40,.25);}
#hud-ability canvas,#hud-vendor canvas,#hud-ehs canvas,#hud-dct canvas,#hud-ceom canvas{background:var(--m-sky);border:2px solid var(--m-choc);border-radius:50%;}
#hud-ability canvas{background:var(--m-lemon);}
#hud-vendor canvas{background:var(--m-lilac);}
#hud-ehs canvas{background:var(--m-mint);}
#hud-ceom canvas{background:var(--m-pink);}
#hud-ability .sm-name,#hud-vendor .sm-name,#hud-ehs .sm-name,#hud-dct .sm-name,#hud-ceom .sm-name{color:var(--m-choc2);font-weight:700;}
#hud-ability .sm-count,#hud-vendor .sm-count,#hud-ehs .sm-count,#hud-dct .sm-count,#hud-ceom .sm-count{color:var(--dim);font-weight:700;}
#hud-ability .sm-count b,#hud-vendor .sm-count b,#hud-ehs .sm-count b,#hud-dct .sm-count b,#hud-ceom .sm-count b{color:var(--m-choc);}
#hud-ability .sm-key,#hud-vendor .sm-key,#hud-ehs .sm-key,#hud-dct .sm-key,#hud-ceom .sm-key{
  background:var(--m-cream2);color:var(--m-choc);border:2px solid var(--m-choc);border-radius:9px;box-shadow:0 2px 0 var(--m-choc);}
#hud-ability .sm-cd,#hud-vendor .sm-cd,#hud-ehs .sm-cd,#hud-dct .sm-cd,#hud-ceom .sm-cd{background:#f1ddd0;border-radius:999px;height:4px;}
#hud-ability .sm-cd > i{background:#c9a898;border-radius:999px;}
#hud-ability.ready{border-color:var(--m-choc);box-shadow:0 4px 0 var(--m-choc), 0 0 0 4px var(--m-lemon-d), 0 8px 18px rgba(30,12,40,.25);}
#hud-ability.ready .sm-key{background:var(--m-lemon-d);color:var(--m-choc);border-color:var(--m-choc);}
#hud-ability.ready .sm-cd > i{background:var(--m-lemon-d);}
#hud-ability.ready .sm-count b{color:#b86a00;}
#hud-vendor .sm-cd i{background:var(--m-lilac-d);}
#hud-vendor.ready{border-color:var(--m-choc);box-shadow:0 4px 0 var(--m-choc), 0 0 0 4px var(--m-lilac-d), 0 8px 18px rgba(30,12,40,.25);}
#hud-vendor.ready .sm-key{background:var(--m-lilac-d);border-color:var(--m-choc);color:#fff;text-shadow:var(--m-ol);}
#hud-ehs.ready{border-color:var(--m-choc);box-shadow:0 4px 0 var(--m-choc), 0 0 0 4px var(--m-mint-d), 0 8px 18px rgba(30,12,40,.25);}
#hud-ehs.ready .sm-key{background:var(--m-mint-d);border-color:var(--m-choc);color:#fff;text-shadow:var(--m-ol);}
#hud-ehs.ready .sm-cd i{background:var(--m-mint-d);}
#hud-dct .sm-cd i{background:var(--m-sky-d);}
#hud-dct.ready{border-color:var(--m-choc);box-shadow:0 4px 0 var(--m-choc), 0 0 0 4px var(--m-sky-d), 0 8px 18px rgba(30,12,40,.25);}
#hud-dct.ready .sm-key{background:var(--m-sky-d);border-color:var(--m-choc);color:#fff;text-shadow:var(--m-ol);}
#hud-ceom{border-color:transparent;
  background:linear-gradient(var(--m-cream),var(--m-cream)) padding-box,
    linear-gradient(115deg,#8fefff,#c3adff,#ffa6d8,#ffe98a,#8fefff) border-box;
  background-size:auto,300% 300%;box-shadow:0 0 0 2px var(--m-choc), 0 4px 0 2px var(--m-choc), 0 8px 18px rgba(30,12,40,.25);}
#hud-ceom .sm-cd i{background:linear-gradient(90deg,#ff8fab,#ffd23d);}
#hud-ceom.ready{box-shadow:0 0 0 2px var(--m-choc), 0 4px 0 2px var(--m-choc), 0 0 0 7px rgba(255,143,200,.6);}
#hud-ceom.ready .sm-key{background:var(--m-rose);border-color:var(--m-choc);color:#fff;text-shadow:var(--m-ol);}
#hud-vendor.full,#hud-ehs.full,#hud-dct.full{opacity:.7;}

/* ---------------- achievements ---------------- */
.achv{background:var(--m-milk);border:2.5px solid var(--m-choc);border-radius:18px;color:var(--m-choc);opacity:.82;box-shadow:0 3px 0 var(--m-choc);}
.achv.done{opacity:1;border-color:var(--m-choc);background:#fff6cf;box-shadow:0 3px 0 var(--m-choc), 0 0 0 3px var(--m-lemon-d);}
.achv-art{background:var(--m-sky);border:2px solid var(--m-choc);border-radius:50%;}
.achv.done .achv-art{background:var(--m-pink);}
.achv-txt b{color:var(--m-choc);font-weight:700;}
.achv-txt small{color:var(--dim);font-weight:500;}
.achv-bar{height:9px;background:#f1ddd0;border:1.8px solid var(--m-choc);border-radius:999px;}
.achv-bar > i{background:linear-gradient(180deg,#b9e3ff 0 35%,#6cbcff 36% 100%);border-radius:999px;}
.achv.done .achv-bar > i{background:linear-gradient(180deg,#fff0a0 0 35%,#ffc53d 36% 100%);}
.achv-prog{color:var(--dim);font-weight:600;}
.achv-prize b{color:var(--dim);font-weight:700;}
.achv.done .achv-prize b{color:var(--m-straw-d);}
.achv-prize small{color:var(--m-choc2);font-weight:600;}
.achv-won{color:#b86a00;font-weight:600;}
.achv-won b{color:var(--m-straw-d);}

/* ---------------- round banner ---------------- */
#round-banner .rb-title{color:#fffaf3;font-weight:700;
  text-shadow:3.5px 0 0 #4a2b1d,-3.5px 0 0 #4a2b1d,0 3.5px 0 #4a2b1d,0 -3.5px 0 #4a2b1d,2.5px 2.5px 0 #4a2b1d,-2.5px 2.5px 0 #4a2b1d,2.5px -2.5px 0 #4a2b1d,-2.5px -2.5px 0 #4a2b1d,
    0 8px 0 #4a2b1d,0 14px 24px rgba(30,12,40,.5);}
#round-banner .rb-sub{color:var(--m-choc);background:var(--m-lemon);border:3px solid var(--m-choc);border-radius:999px;padding:4px 20px 4px 32px;
  box-shadow:0 4px 0 var(--m-choc);text-shadow:none;font-weight:700;}
#round-banner .rb-line{height:12px;background:radial-gradient(circle,#ff8fab 0 3.5px,#4a2b1d 3.6px 5px,transparent 5.4px) 0 50%/20px 12px repeat-x;}

/* ---------------- B: your upgrades ---------------- */
#hud-upghint{background:var(--m-cream);border:2.5px solid var(--m-choc);border-radius:14px;box-shadow:0 3px 0 var(--m-choc);}
#hud-upghint b{background:var(--m-cream2);border:2px solid var(--m-choc);color:var(--m-choc);border-radius:7px;box-shadow:0 2px 0 var(--m-choc);}
#hud-upghint span{color:var(--m-choc2);font-weight:700;}
#hud-upghint.lit{border-color:var(--m-choc);box-shadow:0 3px 0 var(--m-choc), 0 0 0 4px var(--m-sky-d);}
#hud-upghint.lit b{background:var(--m-sky-d);border-color:var(--m-choc);color:#fff;text-shadow:var(--m-ol);}
#hud-upghint.lit span{color:var(--m-choc);}
#upg-panel{background:rgba(58,34,84,.55);}
#upg-panel .up-inner{background:var(--m-cream);border:3px solid var(--m-choc);border-radius:26px;color:var(--m-choc);
  box-shadow:0 7px 0 var(--m-choc), 0 24px 60px rgba(30,12,40,.45);}
#upg-panel .up-head{border-bottom:2.5px dashed rgba(74,43,29,.25);}
#upg-panel .up-title{color:var(--m-choc);font-weight:700;}
#upg-panel .up-title::after{content:' \2665';color:var(--m-straw);}
#upg-panel .up-sub,#upg-panel .up-close{color:var(--dim);font-weight:500;}
#upg-panel .up-close b{color:var(--m-choc);background:var(--m-cream2);border:2px solid var(--m-choc);border-radius:6px;padding:0 5px;}
#upg-panel .up-empty{color:var(--dim);font-weight:600;}
#upg-panel .up-item{background:var(--m-milk);border:2.5px solid var(--m-choc);border-left-width:9px;border-radius:16px;box-shadow:0 3px 0 var(--m-choc);}
#upg-panel .up-art{background:var(--m-sky);border:2px solid var(--m-choc);border-radius:12px;}
#upg-panel .up-name{color:var(--m-choc);font-weight:700;}
#upg-panel .up-stack{color:var(--m-choc2);background:var(--m-cream2);border:1.5px solid var(--m-choc);border-radius:999px;}
#upg-panel .up-item.maxed .up-stack{background:var(--m-mint);color:#1f7a4b;}
#upg-panel .up-desc{color:var(--m-choc2);}
#upg-panel .up-item.common {border-left-color:#9aa9c4;}
#upg-panel .up-item.rare   {border-left-color:#4fa9f5;}
#upg-panel .up-item.epic   {border-left-color:#ae78f4;}
#upg-panel .up-item.legend {border-left-color:#ffbf2f;}
#upg-panel .up-item.special{border-left-color:#f5485a;}
#upg-panel .up-item.cutting{border-left-color:#7fdcf0;box-shadow:0 3px 0 var(--m-choc), inset 5px 0 0 -2px #ffa6d8;}

/* ================= upgrade cards: pastel sticker cards ================= */
#screen-cards .panel{background:var(--m-cream);border:3px solid var(--m-choc);
  box-shadow:0 7px 0 var(--m-choc), 0 30px 80px rgba(30,12,40,.5), inset 0 -6px 0 rgba(244,223,211,.55);}
#cards-title{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--m-choc);-webkit-text-fill-color:var(--m-choc);}
.cards-foot{color:var(--dim);font-weight:600;}
.upcard{
  --rp:#eef1f7;--rd:#9aa9c4;--rh:rgba(154,169,196,.35);
  background:var(--m-milk);color:var(--m-choc);
  border:4px solid var(--rd);border-radius:26px;
  box-shadow:0 0 0 2.5px var(--m-choc), 0 7px 0 2.5px var(--m-choc), 0 18px 34px rgba(30,12,40,.35);
}
.upcard:hover{transform:translateY(-10px) scale(1.035) rotate(-1deg);}
.upcard:active{transform:translateY(-3px) scale(.99,.97);}
.upcard .uc-glow{inset:-60% -80%;opacity:.3;
  background:repeating-conic-gradient(from 0deg,var(--rp) 0deg 9deg,transparent 9deg 18deg);animation:ucSpin 26s linear infinite;
  -webkit-mask-image:radial-gradient(circle at 50% 38%,#000 0 18%,transparent 34%);mask-image:radial-gradient(circle at 50% 38%,#000 0 18%,transparent 34%);}
.upcard:hover .uc-glow{opacity:.75;}
.upcard.upcard .rar{display:inline-block;padding:3px 14px 2px;border-radius:999px;background:var(--rd);color:var(--m-choc);
  border:2.5px solid var(--m-choc);box-shadow:0 2px 0 var(--m-choc), inset 0 2px 0 rgba(255,255,255,.45);text-shadow:0 1px 0 rgba(255,255,255,.5);font-weight:700;letter-spacing:3.5px;opacity:1;}
.uc-art canvas{border-radius:50%;background:radial-gradient(circle at 50% 42%,#fff 0 38%,var(--rp) 72%);
  border:3px solid var(--m-choc);box-shadow:0 4px 0 var(--m-choc), inset 0 -8px 0 rgba(74,43,29,.06);}
.upcard b{color:var(--m-choc);font-weight:700;}
.upcard p{color:var(--m-choc2);font-weight:500;}
.upcard p.uc-tease{color:#7a5bd6;text-shadow:none;font-weight:600;}
.upcard .lvl{color:var(--dim);border-top:2.5px dashed rgba(74,43,29,.2);font-weight:700;}
.uc-num{background:var(--m-cream2);color:var(--m-choc);border:2px solid var(--m-choc);border-radius:7px;box-shadow:0 2px 0 var(--m-choc);width:22px;height:22px;}
.pips{gap:5px;}
.pips i{width:11px;height:11px;border-radius:50%;background:#f1ddd0;border:1.8px solid var(--m-choc);}
.pips i.on{background:var(--rd);box-shadow:inset 0 2px 0 rgba(255,255,255,.55);}
.uc-key{color:var(--m-choc);background:var(--m-lemon);border:2px solid var(--m-choc);box-shadow:0 2px 0 var(--m-choc);font-weight:700;}
.uc-key.cut{background:linear-gradient(90deg,#9ff3ff,#c9b6ff,#ffb0e0);color:var(--m-choc);box-shadow:0 2px 0 var(--m-choc);}
.uc-cat{color:var(--m-choc);background:color-mix(in srgb,var(--cc,#9fb0c8) 32%,#fff);border:2px solid var(--m-choc);font-weight:700;}
.uc-cat i{background:var(--cc,#9fb0c8);box-shadow:none;border:1.5px solid var(--m-choc);width:9px;height:9px;}
#upg-panel .up-cat{color:var(--m-choc);background:color-mix(in srgb,var(--cc,#9fb0c8) 32%,#fff);border:1.5px solid var(--m-choc);border-radius:999px;font-weight:700;}

/* rarity: sticker frame colour, halo, pastel window */
.upcard.common{--rc:#9aa9c4;--rp:#e9eef7;--rd:#9aa9c4;--rh:rgba(154,169,196,.4);border-color:#9aa9c4;}
.upcard.rare{--rc:#4fa9f5;--rp:#d6ecff;--rd:#4fa9f5;--rh:rgba(79,169,245,.4);border-color:#4fa9f5;
  box-shadow:0 0 0 2.5px var(--m-choc), 0 7px 0 2.5px var(--m-choc), 0 18px 34px rgba(30,12,40,.35);}
.upcard.epic{--rc:#ae78f4;--rp:#ecdfff;--rd:#ae78f4;--rh:rgba(174,120,244,.42);border-color:#ae78f4;
  box-shadow:0 0 0 2.5px var(--m-choc), 0 7px 0 2.5px var(--m-choc), 0 18px 34px rgba(30,12,40,.35);}
.upcard.legend{--rc:#ffbf2f;--rp:#fff0b3;--rd:#ffbf2f;--rh:rgba(255,191,47,.5);border-color:#ffbf2f;
  animation:cardIn .42s cubic-bezier(.2,.9,.3,1.2) both, mLegend 2.6s ease-in-out infinite 1s;}
.upcard.legend .rar{color:var(--m-choc);text-shadow:none;}
.upcard.special{--rc:#f5485a;--rp:#ffd9dd;--rd:#f5485a;--rh:rgba(245,72,90,.45);border-color:#f5485a;
  animation:cardIn .42s cubic-bezier(.2,.9,.3,1.2) both, mSpecial 1.7s ease-in-out infinite .6s;}
.upcard.special .rar{color:#fff;letter-spacing:3.5px;text-shadow:0 1.5px 0 rgba(110,10,30,.6);}
.upcard.common:hover,.upcard.rare:hover,.upcard.epic:hover{
  box-shadow:0 0 0 2.5px var(--m-choc), 0 12px 0 2.5px var(--m-choc), 0 28px 44px rgba(30,12,40,.4), 0 0 0 11px var(--rh);}
@keyframes mLegend{
  0%,100%{box-shadow:0 0 0 2.5px #4a2b1d, 0 7px 0 2.5px #4a2b1d, 0 18px 34px rgba(30,12,40,.35), 0 0 0 4px rgba(255,191,47,.2);}
  50%{box-shadow:0 0 0 2.5px #4a2b1d, 0 7px 0 2.5px #4a2b1d, 0 18px 34px rgba(30,12,40,.35), 0 0 0 12px rgba(255,191,47,.5);}}
@keyframes mSpecial{
  0%,100%{box-shadow:0 0 0 2.5px #4a2b1d, 0 7px 0 2.5px #4a2b1d, 0 18px 34px rgba(30,12,40,.35), 0 0 0 4px rgba(245,72,90,.22);}
  50%{box-shadow:0 0 0 2.5px #4a2b1d, 0 7px 0 2.5px #4a2b1d, 0 18px 34px rgba(30,12,40,.35), 0 0 0 12px rgba(245,72,90,.5);}}

/* mythic: a holographic pastel rainbow that never stops cycling */
.upcard.cutting{--rc:#7df9ff;--rp:#dcfbff;--rd:#35c8d8;--rh:rgba(255,166,216,.45);
  border-color:transparent;
  background:linear-gradient(var(--m-milk),var(--m-milk)) padding-box,
    linear-gradient(115deg,#8fefff,#c3adff,#ffa6d8,#ffe98a,#8fefff) border-box;
  background-size:auto,320% 320%;
  animation:cardIn .42s cubic-bezier(.2,.9,.3,1.2) both, cutShift 3.4s linear infinite, mMythic 2.2s ease-in-out infinite;}
.upcard.cutting .uc-glow{opacity:.55;
  background:repeating-conic-gradient(from 0deg,#bff6ff 0deg 6deg,#e6d9ff 6deg 12deg,#ffd3ec 12deg 18deg,transparent 18deg 27deg);}
.upcard.cutting .rar{background:linear-gradient(90deg,#8fefff,#c3adff,#ffa6d8,#ffe98a,#8fefff);background-size:300% 100%;
  -webkit-background-clip:border-box;background-clip:border-box;color:var(--m-choc);-webkit-text-fill-color:var(--m-choc);text-shadow:none;
  animation:cutShift 3.4s linear infinite;}
.upcard.cutting .uc-art canvas{background:radial-gradient(circle at 50% 42%,#fff 0 36%,#e8fdff 55%,#f7e6ff 78%);}
@keyframes mMythic{
  0%,100%{box-shadow:0 0 0 2.5px #4a2b1d, 0 7px 0 2.5px #4a2b1d, 0 18px 34px rgba(30,12,40,.35), 0 0 0 5px rgba(143,239,255,.35);}
  50%{box-shadow:0 0 0 2.5px #4a2b1d, 0 7px 0 2.5px #4a2b1d, 0 18px 34px rgba(30,12,40,.35), 0 0 0 13px rgba(255,166,216,.5);}}

/* refresh / skip */
.btn.refresh-btn{color:var(--m-choc);background:var(--m-sky);border:2.5px solid var(--m-choc);
  box-shadow:0 4px 0 var(--m-choc), inset 0 -4px 0 rgba(40,110,180,.15), inset 0 2px 0 rgba(255,255,255,.7);}
.btn.refresh-btn:hover:not([disabled]){background:#e4f3ff;transform:translateY(-2px);
  box-shadow:0 6px 0 var(--m-choc), inset 0 -4px 0 rgba(40,110,180,.15), inset 0 2px 0 rgba(255,255,255,.7);}
.btn.refresh-btn:active:not([disabled]){transform:translateY(3px) scale(.97,.95);box-shadow:0 1px 0 var(--m-choc);}
.refresh-btn .rf-pips i{width:12px;height:12px;border:2px solid var(--m-choc);background:var(--m-milk);}
.refresh-btn .rf-pips i.on{background:var(--m-sky-d);box-shadow:inset 0 2px 0 rgba(255,255,255,.6);}
.refresh-btn .rf-left{color:var(--m-choc2);}
.btn.refresh-btn[disabled]{opacity:.5;filter:grayscale(.5);box-shadow:0 3px 0 var(--m-choc);}
.btn.skip-btn{background:var(--m-pink);border:2.5px solid var(--m-choc);color:var(--m-choc);
  box-shadow:0 4px 0 var(--m-choc), inset 0 -4px 0 rgba(200,60,100,.14), inset 0 2px 0 rgba(255,255,255,.7);}
.btn.skip-btn:hover{transform:translateY(-2px);border-color:var(--m-choc);color:var(--m-choc);background:#ffe1e8;
  box-shadow:0 6px 0 var(--m-choc), inset 0 -4px 0 rgba(200,60,100,.14), inset 0 2px 0 rgba(255,255,255,.7);}
.btn.skip-btn:active{transform:translateY(3px) scale(.97,.95);box-shadow:0 1px 0 var(--m-choc);}
.skip-btn .sk-ico{opacity:1;}

/* waiting for the others */
.card-wait{background:var(--m-milk);border:3px solid var(--m-choc);border-radius:26px;color:var(--m-choc);
  box-shadow:0 6px 0 var(--m-choc), 0 20px 50px rgba(30,12,40,.35);}
.card-wait b{color:var(--m-choc);font-weight:700;}
.card-wait p{color:var(--m-choc2);}
.card-wait p em{color:var(--m-straw-d);}
.cw-dots i{width:14px;height:14px;background:var(--m-straw);border:2px solid var(--m-choc);}
.cw-dots i:nth-child(2){background:var(--m-lilac-d);}
.cw-dots i:nth-child(3){background:var(--m-sky-d);}

/* owned cards strip */
.cards-owned{background:var(--m-cream2);border:2.5px solid var(--m-choc);border-radius:20px;box-shadow:inset 0 3px 0 rgba(74,43,29,.08);}
.cards-owned .co-lab{color:var(--m-choc2);font-weight:700;}
.cards-owned .co-lab b{color:var(--m-choc);}
.cards-owned .co-lab b i{color:var(--dim);}
.cards-owned .co-lab b.full{color:var(--m-straw-d);}
.cards-owned .co-tile{background:var(--m-milk);border:2.5px solid var(--cc,#9aa9c4);box-shadow:0 0 0 1.5px var(--m-choc), 0 3px 0 1.5px var(--m-choc);border-radius:12px;}
.cards-owned .co-tile.merge{box-shadow:0 0 0 1.5px var(--m-choc), 0 3px 0 1.5px var(--m-choc), 0 0 0 5px rgba(245,72,90,.35);}
.cards-owned .co-tile.empty{border:2.5px dashed rgba(74,43,29,.35);background:rgba(255,253,248,.6);box-shadow:none;}
.cards-owned .co-n{background:var(--m-lemon);border:1.5px solid var(--m-choc);color:var(--m-choc);border-radius:999px;font-weight:700;}
.cards-owned .co-n.m{background:var(--m-pink);color:#c42848;border-color:var(--m-choc);}
.cards-owned .co-none{color:var(--dim);font-weight:600;}

/* ================= lobby: a sticker-book page ================= */
#screen-lobby{background:rgba(255,235,242,.06);backdrop-filter:none;}
#screen-lobby > .lobby-bg{display:none;}
.lobby-top{border-bottom:3px dashed rgba(74,43,29,.28);}
.lobby-title{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fffaf3;-webkit-text-fill-color:#fffaf3;
  font-weight:700;letter-spacing:8px;font-size:30px;text-shadow:var(--m-ol2), 0 5px 0 #4a2b1d;}
.lobby-title small{color:var(--m-choc);-webkit-text-fill-color:var(--m-choc);background:var(--m-lemon);border:2px solid var(--m-choc);border-radius:999px;
  padding:2px 10px;align-self:center;text-shadow:none;letter-spacing:2px;box-shadow:0 2px 0 var(--m-choc);font-weight:700;}
.lt-mark{width:34px;height:34px;border-radius:50%;background-color:var(--m-straw);background-image:var(--m-paw-w);
  background-size:64% 64%;background-position:50% 46%;background-repeat:no-repeat;border:2.5px solid var(--m-choc);
  box-shadow:0 3px 0 var(--m-choc);transform:none;animation:mWiggle 2.2s ease-in-out infinite;}
.lobby-room{background:var(--m-sky);border:2.5px solid var(--m-choc);color:var(--m-choc);box-shadow:0 3px 0 var(--m-choc);}
.lobby-room .room-dot{width:11px;height:11px;background:var(--m-sky-d);border:2px solid var(--m-choc);color:rgba(94,178,245,.6);}
.lobby-room.online{background:var(--m-mint);border-color:var(--m-choc);color:var(--m-choc);}
.lobby-room.online .room-dot{background:var(--m-mint-d);color:rgba(76,196,136,.6);}
.lobby-coins{background:var(--m-lemon);border:2.5px solid var(--m-choc);color:#9a5a00;box-shadow:0 3px 0 var(--m-choc);font-weight:700;}
.lobby-coins i{color:var(--m-choc2);}
.lobby-foot{border-top:3px dashed rgba(74,43,29,.28);}
.ready-status{background:var(--m-cream);border:2.5px solid var(--m-choc);color:var(--m-choc);box-shadow:0 3px 0 var(--m-choc);}
.btn.accent.ready-btn{border-radius:999px;
  box-shadow:0 5px 0 var(--m-choc), 0 14px 26px rgba(30,12,40,.3), inset 0 -6px 0 rgba(190,30,70,.28), inset 0 3px 0 rgba(255,255,255,.45);}
.btn.accent.ready-btn:hover{transform:translateY(-3px);
  box-shadow:0 8px 0 var(--m-choc), 0 18px 30px rgba(30,12,40,.32), inset 0 -6px 0 rgba(190,30,70,.28), inset 0 3px 0 rgba(255,255,255,.45);}
.btn.accent.ready-btn:active{transform:translateY(4px) scale(.97,.94);box-shadow:0 1px 0 var(--m-choc), inset 0 -3px 0 rgba(190,30,70,.28);}
.btn.ready-btn::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);}

.lobby-col{background:var(--m-cream);border:3px solid var(--m-choc);border-radius:26px;color:var(--m-choc);
  box-shadow:0 6px 0 var(--m-choc), 0 18px 36px rgba(40,18,56,.25), inset 0 -6px 0 rgba(244,223,211,.5);}
.lobby-col::before{left:50%;right:auto;top:-13px;width:96px;height:24px;margin-left:-48px;border-radius:4px;z-index:2;
  background:repeating-linear-gradient(45deg,rgba(255,143,171,.82) 0 7px,rgba(255,214,224,.82) 7px 14px);
  box-shadow:0 2px 0 rgba(74,43,29,.18);transform:rotate(-3deg);}
.lobby-body .lobby-col:nth-child(2)::before{background:repeating-linear-gradient(45deg,rgba(176,150,255,.82) 0 7px,rgba(228,219,255,.85) 7px 14px);transform:rotate(2deg);}
.lobby-body .lobby-col:nth-child(3)::before{background:repeating-linear-gradient(45deg,rgba(111,211,160,.82) 0 7px,rgba(207,244,223,.85) 7px 14px);transform:rotate(-1.5deg);}
.lobby-body{padding-top:20px;}
.lobby-col .col-head{color:var(--m-choc);font-weight:700;letter-spacing:3.5px;font-size:12.5px;}
.lobby-col .col-head > span:first-child::before{width:18px;height:18px;border-radius:0;background:var(--m-paw);box-shadow:none;}
.ch-pill{background:var(--m-lilac);border:2px solid var(--m-choc);color:var(--m-choc);font-weight:700;box-shadow:0 2px 0 var(--m-choc);}
.lobby-col .hint{color:var(--dim);}
.pcard{background:var(--m-milk);border:2.5px solid var(--m-choc);border-radius:18px;color:var(--m-choc);box-shadow:0 3px 0 var(--m-choc);padding-left:14px;}
.pcard::before{width:7px;background:var(--m-sky-d);border-right:2px solid var(--m-choc);}
.pcard:hover{border-color:var(--m-choc);transform:translateX(3px) rotate(-.6deg);}
.pcard.ready{border-color:var(--m-choc);background:#effbf4;box-shadow:0 3px 0 var(--m-choc), 0 0 0 3px var(--m-mint-d);}
.pcard.ready::before{background:var(--m-mint-d);box-shadow:none;}
.pcard canvas{background:radial-gradient(circle at 50% 38%,#fffdf8 0 30%,var(--m-sky) 80%);border:2px solid var(--m-choc);border-radius:14px;}
.pcard .pn b{color:var(--m-choc);font-weight:700;}
.pcard .pn small{color:var(--dim);font-weight:500;}
.pcard .pstate{background:var(--m-cream2);border:2px solid var(--m-choc);color:var(--m-choc2);font-weight:700;}
.pcard .pstate.on{background:var(--m-mint);border-color:var(--m-choc);color:#1f7a4b;box-shadow:none;}
.pcard .kick{color:var(--m-choc2);font-weight:700;}
.pcard .kick:hover{color:var(--bad);}
.preview-stage::before,.preview-stage::after{display:none;}
.mapcard{background:var(--m-milk);border:2.5px solid var(--m-choc);border-radius:18px;color:var(--m-choc);box-shadow:0 3px 0 var(--m-choc);}
.mapcard:hover{transform:translateX(-3px) rotate(.6deg);border-color:var(--m-choc);box-shadow:0 5px 0 var(--m-choc);}
.mapcard:active{transform:translateY(2px) scale(.98);box-shadow:0 1px 0 var(--m-choc);}
.mapcard .mi b{color:var(--m-choc);font-weight:700;letter-spacing:1.6px;}
.mapcard .mi small{color:var(--dim);font-weight:500;}
.mapcard canvas{border:2.5px solid var(--m-choc);border-radius:12px;box-shadow:0 2px 0 var(--m-choc);}
.mapcard.voted{border-color:var(--m-choc);background:#ffe6ee;box-shadow:0 3px 0 var(--m-choc), 0 0 0 3.5px var(--m-straw);}
.mapcard.voted::after{content:'\2665 YOUR VOTE';color:#fff;background:var(--m-straw);border:2px solid var(--m-choc);border-radius:999px;
  padding:1px 8px;top:5px;right:8px;text-shadow:var(--m-ol);font-weight:700;letter-spacing:1.5px;}
.votedot{width:12px;height:12px;background:var(--m-straw);border:2px solid var(--m-choc);box-shadow:none;}

/* perks */
.perk-sec{border-top:3px dashed rgba(74,43,29,.22);}
.perk-slot{color:var(--m-choc);}
.perk-slot.empty{border:2.5px dashed rgba(74,43,29,.38);background:var(--m-milk);color:var(--dim);border-radius:16px;}
.perk-slot.empty .ps-plus{color:var(--m-straw);font-weight:600;}
.perk-slot.full{border:2.5px solid var(--m-choc);border-radius:16px;background:color-mix(in srgb,var(--pc) 22%,#fffdf8);
  box-shadow:0 3px 0 var(--m-choc), inset 0 2px 0 rgba(255,255,255,.7);}
.perk-slot.full:hover{transform:translateY(-2px) rotate(-1deg);box-shadow:0 5px 0 var(--m-choc), inset 0 2px 0 rgba(255,255,255,.7);}
.perk-slot .ps-txt b{color:var(--m-choc);font-weight:700;}
.perk-slot .ps-txt small{color:color-mix(in srgb,var(--pc) 45%,#4a2b1d);}
.perk-slot .ps-x{color:var(--m-choc);font-weight:700;}
.perk-card{background:var(--m-milk);border:2px solid var(--m-choc);border-radius:14px;color:var(--m-choc);box-shadow:0 2px 0 var(--m-choc);}
.perk-card:hover{border-color:var(--m-choc);transform:translateY(-2px);box-shadow:0 4px 0 var(--m-choc), 0 0 0 3px color-mix(in srgb,var(--pc) 55%,transparent);}
.perk-card .pc-txt b{color:var(--m-choc);font-weight:700;}
.perk-card .pc-txt small{color:var(--dim);font-weight:500;}
.perk-card.on{border-color:var(--m-choc);background:color-mix(in srgb,var(--pc) 22%,#fffdf8);box-shadow:0 2px 0 var(--m-choc), 0 0 0 3px var(--pc);}
.perk-card .pc-tag{color:var(--dim);font-weight:700;}
.perk-card.on .pc-tag,.perk-card.on.paid .pc-tag{color:#1f8a52;}
.perk-card.locked .pc-tag,.perk-card.paid:not(.locked):not(.on) .pc-tag{color:#b86a00;}
.perk-card.armed{border-color:var(--m-choc);animation:mArm .8s ease-in-out infinite;}
.perk-card.armed .pc-tag{color:#fff;background:var(--m-straw);border:1.5px solid var(--m-choc);text-shadow:var(--m-ol);}
@keyframes mArm{0%,100%{box-shadow:0 2px 0 #4a2b1d, 0 0 0 0 rgba(255,111,142,.6);}50%{box-shadow:0 2px 0 #4a2b1d, 0 0 0 6px rgba(255,111,142,0);}}

/* ---------------- class bonus (old grid) ---------------- */
.classcard .cls-bonus{color:var(--m-choc2);background:color-mix(in srgb,var(--cc,#4fb2ff) 18%,#fffdf8);border:2px solid var(--m-choc);border-radius:12px;}
.classcard .cls-bonus .cb-tag{color:var(--m-choc);}

/* ---------------- upgrade slots above the xp bar ---------------- */
#xp-dock .xs-count{background:var(--m-cream);border:2.5px solid var(--m-choc);border-radius:14px;box-shadow:0 3px 0 var(--m-choc);}
#xp-dock .xs-count b{color:var(--m-choc);font-weight:700;}
#xp-dock .xs-count b i{color:var(--dim);}
#xp-dock .xs-count small{color:var(--m-choc2);font-weight:700;}
#xp-dock .xs-count.full{border-color:var(--m-choc);background:var(--m-pink);box-shadow:0 3px 0 var(--m-choc), 0 0 0 3px var(--m-straw);}
#xp-dock .xs-count.full small{color:var(--m-straw-d);}
#xp-dock .xs-slot{background:radial-gradient(circle at 50% 40%,#fffdf8 0 40%,color-mix(in srgb,var(--cc,#9aa9c4) 30%,#fff) 90%);
  border:2.5px solid var(--m-choc);border-radius:14px;box-shadow:0 3px 0 var(--m-choc), inset 0 0 0 2px color-mix(in srgb,var(--cc,#9aa9c4) 70%,#fff);}
#xp-dock .xs-slot canvas{border-radius:12px;}
#xp-dock .xs-slot.empty{border:2.5px dashed rgba(255,250,243,.75);background:rgba(255,248,239,.22);box-shadow:none;}
#xp-dock .xs-slot.merge{border-color:var(--m-choc);box-shadow:0 3px 0 var(--m-choc), 0 0 0 3px #f5485a;}
#xp-dock .xs-cat{background:var(--m-milk);border:2px solid var(--m-choc);color:color-mix(in srgb,var(--cc,#9fb0c8) 70%,#4a2b1d);width:19px;height:19px;}

/* ---------------- titan frame + managers docks ---------------- */
#hud-mech,#hud-mgr{background:var(--m-cream);border:2.5px solid var(--m-choc);border-radius:18px;color:var(--m-choc);
  box-shadow:0 4px 0 var(--m-choc), 0 8px 18px rgba(30,12,40,.25);}
#hud-mech canvas,#hud-mgr canvas{background:var(--m-lilac);border:2px solid var(--m-choc);border-radius:50%;}
#hud-mech .sm-name,#hud-mgr .sm-name{color:var(--m-choc2);font-weight:700;}
#hud-mech .sm-count,#hud-mgr .sm-count{color:var(--dim);font-weight:700;}
#hud-mech .sm-count b,#hud-mgr .sm-count b{color:var(--m-choc);}
#hud-mech .sm-key,#hud-mgr .sm-key{background:var(--m-cream2);color:var(--m-choc);border:2px solid var(--m-choc);border-radius:9px;box-shadow:0 2px 0 var(--m-choc);}
#hud-mech .sm-cd,#hud-mgr .sm-cd{background:#f1ddd0;border-radius:999px;height:4px;}
#hud-mgr .sm-cd i{background:var(--m-lilac-d);}
#hud-mgr.ready{border-color:var(--m-choc);box-shadow:0 4px 0 var(--m-choc), 0 0 0 4px var(--m-lilac-d), 0 8px 18px rgba(30,12,40,.25);}
#hud-mgr.ready .sm-key{background:var(--m-lilac-d);border-color:var(--m-choc);color:#fff;text-shadow:var(--m-ol);}
#hud-mgr.full{opacity:.7;}
#hud-mech{border-color:transparent;
  background:linear-gradient(var(--m-cream),var(--m-cream)) padding-box,
    linear-gradient(115deg,#8fefff,#c3adff,#ffa6d8,#ffe98a,#8fefff) border-box;
  background-size:auto,300% 300%;box-shadow:0 0 0 2px var(--m-choc), 0 4px 0 2px var(--m-choc), 0 8px 18px rgba(30,12,40,.25);}
#hud-mech .sm-cd i{background:linear-gradient(90deg,#6fd6a0,#8fd3ff);}
#hud-mech.ready{box-shadow:0 0 0 2px var(--m-choc), 0 4px 0 2px var(--m-choc), 0 0 0 7px rgba(143,239,255,.6);}
#hud-mech.ready .sm-key{background:#8fefff;border-color:var(--m-choc);color:var(--m-choc);}

/* ---------------- admin hint chip ---------------- */
#hud-adminhint{background:var(--m-pink);border:2.5px solid var(--m-choc);border-radius:14px;box-shadow:0 3px 0 var(--m-choc);}
#hud-adminhint b{background:var(--m-milk);border:2px solid var(--m-choc);color:var(--m-choc);border-radius:7px;box-shadow:0 2px 0 var(--m-choc);}
#hud-adminhint span{color:var(--m-choc);font-weight:700;}
#hud-adminhint:hover,#hud-adminhint.lit{border-color:var(--m-choc);box-shadow:0 3px 0 var(--m-choc), 0 0 0 4px var(--m-straw);}
#hud-adminhint.lit b{background:var(--m-straw);color:#fff;text-shadow:var(--m-ol);}

/* ---------------- zeus / power hose / supervisor / hardware refresh docks ---------------- */
#hud-god,#hud-hose,#hud-sup,#hud-comp{background:var(--m-cream);border:2.5px solid var(--m-choc);border-radius:18px;color:var(--m-choc);
  box-shadow:0 4px 0 var(--m-choc), 0 8px 18px rgba(30,12,40,.25);}
#hud-god canvas,#hud-hose canvas,#hud-sup canvas,#hud-comp canvas{background:var(--m-sky);border:2px solid var(--m-choc);border-radius:50%;}
#hud-god canvas{background:var(--m-lemon);}
#hud-comp canvas{background:var(--m-peach);}
#hud-god .sm-name,#hud-hose .sm-name,#hud-sup .sm-name,#hud-comp .sm-name{color:var(--m-choc2);font-weight:700;}
#hud-god .sm-count,#hud-hose .sm-count,#hud-sup .sm-count,#hud-comp .sm-count{color:var(--dim);font-weight:700;}
#hud-god .sm-count b,#hud-hose .sm-count b,#hud-sup .sm-count b,#hud-comp .sm-count b{color:var(--m-choc);}
#hud-god .sm-key,#hud-hose .sm-key,#hud-sup .sm-key,#hud-comp .sm-key{background:var(--m-cream2);color:var(--m-choc);border:2px solid var(--m-choc);border-radius:9px;box-shadow:0 2px 0 var(--m-choc);}
#hud-god .sm-cd,#hud-hose .sm-cd,#hud-sup .sm-cd,#hud-comp .sm-cd{background:#f1ddd0;border-radius:999px;height:4px;}
#hud-god,#hud-hose{border-color:transparent;
  background:linear-gradient(var(--m-cream),var(--m-cream)) padding-box,
    linear-gradient(115deg,#8fefff,#c3adff,#ffa6d8,#ffe98a,#8fefff) border-box;
  background-size:auto,300% 300%;box-shadow:0 0 0 2px var(--m-choc), 0 4px 0 2px var(--m-choc), 0 8px 18px rgba(30,12,40,.25);}
#hud-god .sm-cd i{background:linear-gradient(90deg,#ffcf3f,#fff0a0);}
#hud-hose .sm-cd i{background:linear-gradient(90deg,#5eb2f5,#b9e3ff);}
#hud-god.ready{box-shadow:0 0 0 2px var(--m-choc), 0 4px 0 2px var(--m-choc), 0 0 0 7px rgba(255,207,63,.6);}
#hud-hose.ready{box-shadow:0 0 0 2px var(--m-choc), 0 4px 0 2px var(--m-choc), 0 0 0 7px rgba(94,178,245,.6);}
#hud-god.ready .sm-key{background:var(--m-lemon-d);border-color:var(--m-choc);color:var(--m-choc);}
#hud-hose.ready .sm-key{background:var(--m-sky-d);border-color:var(--m-choc);color:#fff;text-shadow:var(--m-ol);}
#hud-sup .sm-cd i{background:#8fb4ff;}
#hud-sup.ready{border-color:var(--m-choc);box-shadow:0 4px 0 var(--m-choc), 0 0 0 4px #8fb4ff, 0 8px 18px rgba(30,12,40,.25);}
#hud-sup.ready .sm-key{background:#8fb4ff;border-color:var(--m-choc);color:#fff;text-shadow:var(--m-ol);}
#hud-comp .sm-cd i{background:linear-gradient(90deg,#ff9f43,#ffd9a8);}
#hud-comp.ready{border-color:var(--m-choc);box-shadow:0 4px 0 var(--m-choc), 0 0 0 4px #ffb043, 0 8px 18px rgba(30,12,40,.25);}
#hud-comp.ready .sm-key{background:#ffb043;border-color:var(--m-choc);color:var(--m-choc);}

/* ---------------- Dancing Cat callout dock ---------------- */
#hud-dance{background:var(--m-cream);border:2.5px solid var(--m-choc);border-radius:18px;color:var(--m-choc);
  box-shadow:0 4px 0 var(--m-choc), 0 8px 18px rgba(30,12,40,.25);}
#hud-dance canvas{background:var(--m-pink);border:2px solid var(--m-choc);border-radius:50%;}
#hud-dance .sm-name{color:var(--m-choc2);font-weight:700;}
#hud-dance .sm-count{color:var(--dim);font-weight:700;}
#hud-dance .sm-count b{color:var(--m-choc);}
#hud-dance .sm-key{background:var(--m-cream2);color:var(--m-choc);border:2px solid var(--m-choc);border-radius:9px;box-shadow:0 2px 0 var(--m-choc);}
#hud-dance .sm-cd{background:#f1ddd0;border-radius:999px;height:4px;}
#hud-dance .sm-cd i{background:linear-gradient(90deg,#ff7fbf,#ffc2e0);}
#hud-dance.ready{border-color:var(--m-choc);box-shadow:0 4px 0 var(--m-choc), 0 0 0 4px #ff9fd0, 0 8px 18px rgba(30,12,40,.25);}
#hud-dance.ready .sm-key{background:#ff9fd0;border-color:var(--m-choc);color:var(--m-choc);}
#hud-dance.full{opacity:.7;}

/* ---------------- class carousel: cats that cost coins ---------------- */
.cc-card .cc-art{position:relative;}
.cc-card.locked .cc-art canvas{filter:grayscale(.65) brightness(.97);}
.cc-lock{position:absolute;top:8px;right:10px;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;}
.cc-lock canvas{width:46px;height:46px;filter:none !important;}
.cc-lock span{display:flex;align-items:center;gap:5px;padding:2px 9px 2px 6px;border-radius:999px;background:var(--m-cream);
  border:2px solid var(--m-choc);box-shadow:0 2px 0 var(--m-choc);color:var(--m-choc);font-weight:700;font-size:13px;letter-spacing:1px;}
.cc-lock .coin-ico{width:13px;height:13px;}
.cc-pick[data-unlock]{background:var(--m-lemon);}
.cc-pick[data-unlock].poor{background:#eee3da;color:#9a8779;cursor:not-allowed;}
.cc-pick[data-unlock].armed{background:var(--m-straw);color:#fff;text-shadow:var(--m-ol);animation:mBob .7s ease-in-out infinite;}

/* ---------------- B panel: remove + key tags ---------------- */
#upg-panel .up-keyb{color:var(--m-choc);background:var(--m-lemon);border:1.5px solid var(--m-choc);border-radius:999px;}
#upg-panel .up-rm{color:#c42848;background:var(--m-pink);border:2px solid var(--m-choc);border-radius:999px;box-shadow:0 2px 0 var(--m-choc);font-family:var(--font);font-weight:700;}
#upg-panel .up-rm:hover{background:#ffc2d0;color:#a3163a;box-shadow:0 3px 0 var(--m-choc);}
#upg-panel .up-rm:active{transform:translateY(2px);box-shadow:0 0 0 var(--m-choc);}
#upg-panel .up-rm.armed{background:var(--m-straw);border-color:var(--m-choc);color:#fff;text-shadow:var(--m-ol);animation:mRm .7s ease-in-out infinite;}
@keyframes mRm{0%,100%{box-shadow:0 2px 0 #4a2b1d, 0 0 0 0 rgba(255,111,142,.6);}50%{box-shadow:0 2px 0 #4a2b1d, 0 0 0 6px rgba(255,111,142,0);}}

/* ================= admin: a pink secret diary ================= */
#admin-panel{background:rgba(58,34,84,.58);}
#admin-panel .ad-inner{background:var(--m-cream);border:3px solid var(--m-choc);border-radius:26px;color:var(--m-choc);
  box-shadow:0 7px 0 var(--m-choc), 0 30px 80px rgba(30,12,40,.5);}
.ad-head{border-bottom:2.5px dashed rgba(74,43,29,.25);background:linear-gradient(180deg,#ffe6ee,rgba(255,230,238,0));}
.ad-title{color:var(--m-choc);font-weight:700;}
.ad-badge{background:var(--m-straw);color:#fff;border:2px solid var(--m-choc);border-radius:999px;box-shadow:0 2px 0 var(--m-choc);text-shadow:var(--m-ol);font-weight:700;}
.ad-sub{color:var(--dim);font-weight:500;}
.ad-x{background:var(--m-pink);border:2.5px solid var(--m-choc);color:var(--m-choc);border-radius:12px;box-shadow:0 3px 0 var(--m-choc);font-family:var(--font);font-weight:700;}
.ad-x b{background:var(--m-milk);color:var(--m-choc);border:1.5px solid var(--m-choc);border-radius:6px;}
.ad-x:hover{border-color:var(--m-choc);background:#ffc2d0;}
.ad-x:active{transform:translateY(2px);box-shadow:0 1px 0 var(--m-choc);}
.ad-tools{border-bottom:2.5px dashed rgba(74,43,29,.2);}
.ad-tool{background:var(--m-milk);border:2px solid var(--m-choc);border-radius:14px;box-shadow:0 2px 0 var(--m-choc);}
.ad-lbl{color:var(--m-choc2);font-weight:700;}
.ad-lbl b{color:var(--m-choc);}
.ad-btn{background:var(--m-cream2);color:var(--m-choc);border:2px solid var(--m-choc);border-radius:10px;box-shadow:0 2px 0 var(--m-choc);
  font-family:var(--font);font-weight:700;}
.ad-btn:hover{transform:translateY(-1px);background:#fff;box-shadow:0 3px 0 var(--m-choc);}
.ad-btn:active{transform:translateY(2px);box-shadow:0 0 0 var(--m-choc);}
.ad-toggle{background:#efe6e0;color:var(--dim);}
.ad-toggle.on{background:var(--m-mint-d);color:#fff;border-color:var(--m-choc);text-shadow:var(--m-ol);box-shadow:0 2px 0 var(--m-choc);}
.ad-note{color:var(--dim);background:transparent;border:2px dashed rgba(74,43,29,.3);box-shadow:none;}
.ad-cat-head{color:var(--m-choc);font-weight:700;}
.ad-cat-head i{width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--cc,#9fb0c8) 35%,#fff);border:2px solid var(--m-choc);
  color:color-mix(in srgb,var(--cc,#9fb0c8) 70%,#4a2b1d);}
.ad-cat-head small{color:var(--dim);}
.ad-cat-head::after{height:0;border-top:2.5px dashed rgba(74,43,29,.2);background:none;}
.ad-cut .ad-cat-head{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#7a5bd6;-webkit-text-fill-color:#7a5bd6;}
.ad-cut .ad-cat-head i{color:#35b8c8;background:linear-gradient(135deg,#bff6ff,#e6d9ff,#ffd3ec);}
.ad-cut .ad-cat-head small{color:var(--dim);-webkit-text-fill-color:var(--dim);}
.ad-up{background:var(--m-milk);border:2px solid var(--m-choc);border-left:8px solid #9aa9c4;border-radius:14px;color:var(--m-choc);box-shadow:0 2px 0 var(--m-choc);}
.ad-up:hover{border-color:var(--m-choc);background:#fff;transform:translateY(-2px);box-shadow:0 4px 0 var(--m-choc);}
.ad-up:active{transform:translateY(1px);box-shadow:0 1px 0 var(--m-choc);}
.ad-up canvas{background:radial-gradient(circle at 50% 40%,#fff 0 35%,var(--m-sky) 90%);border:2px solid var(--m-choc);border-radius:10px;}
.ad-name{color:var(--m-choc);font-weight:700;}
.ad-meta{color:var(--dim);font-weight:600;}
.ad-meta b{color:var(--m-choc);background:var(--m-cream2);border:1.5px solid var(--m-choc);border-radius:999px;}
.ad-req{color:#9a5a00;background:var(--m-lemon);border:1.5px solid var(--m-choc);border-radius:999px;}
.ad-cls{color:#1d8f9c;background:#dcfbff;border:1.5px solid var(--m-choc);border-radius:999px;}
.ad-up.owned{background:#f1f8ff;}
.ad-up.owned .ad-meta b{background:var(--m-sky);color:#1f6fb8;}
.ad-up.maxed{opacity:.55;}
.ad-up.maxed:hover{transform:none;box-shadow:0 2px 0 var(--m-choc);}
.ad-up.maxed .ad-meta b{background:var(--m-mint);color:#1f7a4b;}
.ad-up.common {border-left-color:#9aa9c4;}
.ad-up.rare   {border-left-color:#4fa9f5;}
.ad-up.epic   {border-left-color:#ae78f4;}
.ad-up.legend {border-left-color:#ffbf2f;}
.ad-up.special{border-left-color:#f5485a;}
.ad-up.cutting{border-left-color:#7fdcf0;box-shadow:0 2px 0 var(--m-choc), inset 4px 0 0 -1px #ffa6d8;}
@keyframes adPop{0%{transform:scale(1);}40%{transform:scale(1.07);box-shadow:0 2px 0 #4a2b1d, 0 0 0 6px rgba(255,207,63,.6);}100%{transform:scale(1);}}
.ad-detail{border-top:2.5px dashed rgba(74,43,29,.2);color:var(--m-choc2);background:var(--m-cream2);}
.ad-detail b{color:var(--m-choc);}
.ad-dim{color:var(--dim);}
.ad-dcat{color:var(--m-choc);background:color-mix(in srgb,var(--cc,#9fb0c8) 32%,#fff);border:1.5px solid var(--m-choc);border-radius:999px;padding:1px 7px;}
.ad-drar{color:#7d8fae;}
.ad-drar.rare{color:#2f8fe0;} .ad-drar.epic{color:#9457e6;} .ad-drar.legend{color:#c98a00;}
.ad-drar.special{color:#e0344a;} .ad-drar.cutting{color:#1fa9b8;}
.ad-dnote{color:#1f8a52;}
.ad-ddesc i{color:#b86a00;}
.ad-empty{color:var(--dim);}
.ad-foe{background:var(--m-milk);border:2px solid var(--m-choc);border-radius:12px;color:var(--m-choc);box-shadow:0 2px 0 var(--m-choc);font-family:var(--font);font-weight:600;}
.ad-foe canvas{background:var(--m-lilac);border:1.5px solid var(--m-choc);border-radius:8px;}
.ad-foe:hover{border-color:var(--m-choc);transform:translateY(-1px);box-shadow:0 3px 0 var(--m-choc), 0 0 0 3px rgba(255,111,142,.45);}
.ad-foe:active{transform:translateY(2px);box-shadow:0 0 0 var(--m-choc);}
.ad-foe.mini{border-color:var(--m-choc);background:#fff6d6;}
.ad-foe.boss{border-color:var(--m-choc);background:#ffe3e8;}
.ad-boss-dot{background:var(--m-straw);border:2px solid var(--m-choc);box-shadow:none;width:12px;height:12px;}
.ad-foe-sub{color:var(--m-straw-d);font-weight:700;}
.ad-foe-sub em{color:var(--dim);}
#admin-code{background:rgba(58,34,84,.6);}
.ac-box{background:var(--m-cream);border:3px solid var(--m-choc);border-radius:26px;color:var(--m-choc);
  box-shadow:0 7px 0 var(--m-choc), 0 30px 80px rgba(30,12,40,.5);}
.ac-lock{background:var(--m-pink);color:var(--m-straw-d);border:2.5px solid var(--m-choc);border-radius:50%;box-shadow:0 3px 0 var(--m-choc);}
.ac-title{color:var(--m-choc);font-weight:700;}
.ac-sub{color:var(--dim);}
#admin-code-input{color:var(--m-choc);background:var(--m-milk);border:2.5px solid var(--m-choc);border-radius:14px;font-family:var(--font);font-weight:700;
  box-shadow:inset 0 3px 0 rgba(74,43,29,.08);}
#admin-code-input:focus{border-color:var(--m-choc);box-shadow:0 0 0 4px #ffd3de, inset 0 3px 0 rgba(74,43,29,.08);}
.ac-err{color:var(--bad);}

/* ================= class carousel: one big sticker card ================= */
.cc-card{background:linear-gradient(180deg,color-mix(in srgb,var(--cc) 24%,#fffdf8),#fffdf8 52%);
  border:3px solid var(--m-choc);border-radius:30px;color:var(--m-choc);
  box-shadow:0 7px 0 var(--m-choc), 0 22px 44px rgba(30,12,40,.35);}
.cc-card.on{box-shadow:0 7px 0 var(--m-choc), 0 0 0 7px color-mix(in srgb,var(--cc) 55%,#fff), 0 26px 50px rgba(30,12,40,.4);}
.cc-art{border-radius:24px;border:3px solid var(--m-choc);box-shadow:0 4px 0 var(--m-choc), inset 0 -8px 0 rgba(74,43,29,.06);
  background:radial-gradient(circle at 50% 60%,#fffdf8 0 22%,color-mix(in srgb,var(--cc) 34%,#fff) 70%);}
.cc-title{color:var(--cc);font-weight:700;letter-spacing:5px;font-size:27px;text-shadow:var(--m-ol2), 0 4px 0 #4a2b1d;}
.cc-weap{color:var(--accent2);font-weight:700;letter-spacing:1.5px;}
.cc-stats > div{background:var(--m-milk);border:2px solid var(--m-choc);border-radius:14px;box-shadow:0 2px 0 var(--m-choc);}
.cc-stats b{color:var(--dim);font-weight:700;}
.cc-stats span{color:var(--m-choc);font-weight:700;}
.cc-desc{color:var(--m-choc2);font-weight:500;}
.cc-bonus{color:var(--m-choc);background:color-mix(in srgb,var(--cc) 20%,#fffdf8);border:2px solid var(--m-choc);border-radius:16px;font-weight:500;}
.cc-bonus .cb-tag{color:var(--m-choc);background:var(--cc);border:1.5px solid var(--m-choc);border-radius:999px;padding:1px 8px;font-weight:700;}
.cc-pick{font-family:var(--font);font-weight:700;letter-spacing:3px;font-size:15px;color:var(--m-choc);background:var(--cc);
  border:3px solid var(--m-choc);border-radius:999px;padding:11px 18px;
  box-shadow:0 5px 0 var(--m-choc), inset 0 -6px 0 rgba(74,43,29,.14), inset 0 3px 0 rgba(255,255,255,.5);
  transition:transform .14s cubic-bezier(.3,1.6,.5,1), box-shadow .12s, filter .15s;}
.cc-pick:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 7px 0 var(--m-choc), inset 0 -6px 0 rgba(74,43,29,.14), inset 0 3px 0 rgba(255,255,255,.5);}
.cc-pick:active{transform:translateY(4px) scale(.98,.95);box-shadow:0 1px 0 var(--m-choc), inset 0 -3px 0 rgba(74,43,29,.14);}
.cc-key{color:var(--dim);font-weight:600;}
.cc-nav{color:var(--m-choc);background:var(--m-cream);border:3px solid var(--m-choc);border-radius:50%;width:58px;height:58px;
  font-family:var(--font);font-weight:700;box-shadow:0 5px 0 var(--m-choc);transition:transform .14s cubic-bezier(.3,1.6,.5,1), box-shadow .12s, background .15s;}
.cc-nav:hover{border-color:var(--m-choc);background:var(--m-pink);transform:translateY(-2px) scale(1.05);}
.cc-nav:active{transform:translateY(4px) scale(.95);box-shadow:0 1px 0 var(--m-choc);}
.cc-dots i{width:13px;height:13px;background:var(--m-milk);border:2px solid var(--m-choc);}
.cc-dots i.on{background:var(--m-straw);transform:scale(1.25);}
/* the sticker card is taller than the stock one (thicker borders, drop
   shadow): give the carousel room so the longest card and the dots fit */
.class-carousel{height:min(612px,80vh);}
.cc-dots{bottom:5px;z-index:25;}

/* ================= boss bar phases ================= */
#boss-bar .bb-segs i{background:rgba(74,43,29,.05);}
#boss-bar .bb-segs i + i{border-left:2px dashed rgba(74,43,29,.15);}
#boss-bar .bb-ticks i{background:var(--m-choc);box-shadow:none;width:3px;}
#boss-bar .bb-labels span{color:#fff;text-shadow:var(--m-ol);font-weight:700;}
#boss-bar .bb-phase{color:var(--m-lemon);text-shadow:var(--m-ol2);font-weight:700;}
#boss-bar[data-phase="2"] .bb-fill{background:linear-gradient(180deg,#ffb18a 0 35%,#ff7a59 36% 100%);}
#boss-bar[data-phase="3"] .bb-fill{background:linear-gradient(180deg,#ff8aa0 0 35%,#e8335a 36% 100%);}
#boss-bar[data-phase="2"] .bb-phase{color:#ffc39a;}
#boss-bar[data-phase="3"] .bb-phase{color:#ff9bb1;}

/* ================= the auditor's report (a cute memo) ================= */
#report-fx .rf-card{background:var(--m-milk);color:var(--m-choc);border-radius:18px;border:3px solid var(--m-choc);
  box-shadow:0 6px 0 var(--m-choc), 0 18px 34px rgba(30,12,40,.4), inset 0 0 0 4px #ffd3de;
  background-image:repeating-linear-gradient(180deg,transparent 0 21px,rgba(94,178,245,.16) 21px 23px);}
#report-fx .rf-head{color:var(--m-straw-d);border-bottom:2px dashed rgba(232,70,106,.4);}
#report-fx .rf-lvl{color:var(--dim);}
#report-fx .rf-name{color:var(--m-choc);font-weight:700;}
#report-fx .rf-text{color:var(--m-choc2);}
#report-fx .rf-stamp{border-color:var(--m-straw-d);color:var(--m-straw-d);border-radius:12px;background:rgba(255,211,222,.55);font-weight:700;}
#report-fx .rf-bar{background:#f1ddd0;border:1.8px solid var(--m-choc);border-radius:999px;height:9px;}
#report-fx .rf-bar i{background:var(--m-straw);border-radius:999px;}
#report-fx .rf-time{color:var(--m-straw-d);}
#report-fx[data-k="sheep"] .rf-card{box-shadow:0 6px 0 var(--m-choc), 0 18px 34px rgba(30,12,40,.4), inset 0 0 0 4px var(--m-lilac);}
#report-fx[data-k="sheep"] .rf-stamp{border-color:#7a5bd6;color:#7a5bd6;background:rgba(228,219,255,.6);}
#report-fx[data-k="sheep"] .rf-bar i{background:var(--m-lilac-d);}

/* ================= admin classified ================= */
.ad-cla .ad-cat-head{color:#b86a00;}
.ad-cla .ad-cat-head i{color:#b86a00;background:var(--m-lemon);}

/* ================= infected breach warning: candy stripes ================= */
#breach-fx .bf-card{background:repeating-linear-gradient(135deg,#ff7c98 0 16px,#ff9bb1 16px 32px);
  border:3px solid var(--m-choc);color:#fff;border-radius:24px;
  box-shadow:0 6px 0 var(--m-choc), 0 0 0 6px rgba(255,124,152,.35), 0 18px 40px rgba(30,12,40,.45);}
#breach-fx .bf-top{color:var(--m-lemon);text-shadow:var(--m-ol);font-weight:700;}
#breach-fx .bf-main{color:#fff;font-weight:700;text-shadow:var(--m-ol2), 3px 4px 0 #4a2b1d;}
#breach-fx .bf-sub{color:#fff;text-shadow:var(--m-ol);font-weight:700;}
#breach-fx .bf-note{color:#fff;text-shadow:var(--m-ol);font-weight:600;opacity:1;}

/* ================= miniboss bars ================= */
#mini-bars .mb-name{color:var(--mc);text-shadow:var(--m-ol2), 0 3px 0 #4a2b1d;font-weight:700;}
#mini-bars .mb-track{height:14px;background:var(--m-cream);border:2.5px solid var(--m-choc);border-radius:999px;box-shadow:0 3px 0 var(--m-choc);}
#mini-bars .mb-fill{box-shadow:inset 0 -4px 0 rgba(74,43,29,.22), inset 0 3px 0 rgba(255,255,255,.45);border-radius:999px;}
#mini-bars .mb-ticks i{background:var(--m-choc);box-shadow:none;}
#mini-bars .mb-labels span{color:#fff;text-shadow:var(--m-ol);font-weight:700;}
#mini-bars .mb-phase{color:var(--m-lemon);text-shadow:var(--m-ol2);font-weight:700;}
#mini-bars .mb-bar[data-phase="2"] .mb-phase{color:#ffc39a;}

/* ================= upgrades path: a pastel constellation page ================= */
#screen-uppath{background:
  radial-gradient(circle,rgba(255,143,171,.13) 2.5px,transparent 3px) 0 0/34px 34px,
  radial-gradient(ellipse at 50% 45%,rgba(255,250,243,.93) 0%,rgba(255,231,238,.9) 60%,rgba(232,220,255,.92) 100%);}
#screen-uppath .upp-top{background:var(--m-cream);border-bottom:3px solid var(--m-choc);box-shadow:0 4px 0 rgba(74,43,29,.12);padding:12px 22px 10px;}
#screen-uppath .upp-title{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--m-choc);-webkit-text-fill-color:var(--m-choc);font-weight:700;}
#screen-uppath .upp-title::before{content:'\2726';color:var(--m-straw);-webkit-text-fill-color:var(--m-straw);margin-right:8px;}
#screen-uppath .upp-title small{color:var(--dim);-webkit-text-fill-color:var(--dim);font-weight:500;}
#screen-uppath .upp-count{color:var(--dim);font-weight:600;}
#screen-uppath .upp-count b{color:var(--m-choc);}
.upp-l{stroke-opacity:.38;stroke-width:1.8;}
.upp-l.hub{stroke-opacity:.75;stroke-width:6;}
.upp-l.sup{stroke-opacity:.55;stroke-width:2.4;}
.upp-l.out{stroke-opacity:.32;}
.upp-hline.partner{stroke:#ffb800;stroke-width:3.4;}
.upp-hline.result{stroke:#ff5f7e;stroke-width:3.6;filter:none;}
.upp-core{background:radial-gradient(circle at 40% 35%,#fff 0 20%,#ffd3de 70%);border:3px solid var(--m-choc);
  box-shadow:0 5px 0 var(--m-choc), 0 0 0 9px rgba(255,143,171,.25);}
.upp-core b{color:var(--m-choc);font-weight:700;}
.upp-core b i{color:var(--dim);}
.upp-core span{color:var(--m-straw-d);font-weight:700;}
.upp-hub-cat{background:color-mix(in srgb,var(--cc) 26%,#fff);border:3px solid var(--m-choc);color:color-mix(in srgb,var(--cc) 72%,#4a2b1d);
  box-shadow:0 4px 0 var(--m-choc), 0 0 0 5px color-mix(in srgb,var(--cc) 45%,transparent);}
.upp-hub-cat span{color:var(--m-choc);font-weight:700;}
.upp-node{background:var(--m-milk);border:3px solid var(--rc);box-shadow:0 0 0 2px var(--m-choc), 0 3px 0 2px var(--m-choc);}
.upp-node.locked{background:#f3e9e2;border-color:#d7c4b8;box-shadow:0 0 0 2px rgba(74,43,29,.45);}
.upp-node .upp-q{color:rgba(74,43,29,.4);font-weight:700;}
.upp-node.me{box-shadow:0 0 0 2px var(--m-choc), 0 3px 0 2px var(--m-choc), 0 0 0 7px color-mix(in srgb,var(--rc) 55%,transparent);}
.upp-node.hl{border-color:#ffcf3f;box-shadow:0 0 0 2px var(--m-choc), 0 0 0 7px rgba(255,207,63,.55);}
.upp-node.hl-m{border-color:#ff6f8e;box-shadow:0 0 0 2px var(--m-choc), 0 0 0 7px rgba(255,111,142,.55);}
.upp-legend{color:var(--m-choc2);font-weight:600;background:var(--m-cream);border-top:3px solid var(--m-choc);padding:8px 18px 10px;}
.upp-legend .lg-dot{background:var(--m-milk);border:3px solid var(--rc);box-shadow:0 0 0 1.5px var(--m-choc);}
.upp-legend .lg-q{border:2px solid rgba(74,43,29,.45);color:rgba(74,43,29,.55);background:#f3e9e2;}
.upp-legend .lg-hint{color:var(--dim);}
.upp-tip{background:var(--m-cream);border:3px solid var(--m-choc);border-radius:20px;color:var(--m-choc);box-shadow:0 6px 0 var(--m-choc), 0 20px 40px rgba(30,12,40,.35);}
.upp-tip .ut-head canvas{background:radial-gradient(circle at 50% 40%,#fff 0 35%,var(--m-sky) 90%);border:2px solid var(--m-choc);}
.upp-tip .ut-head b{color:var(--m-choc);font-weight:700;}
.upp-tip .ut-chips span{color:color-mix(in srgb,var(--cc) 70%,#4a2b1d);background:color-mix(in srgb,var(--cc) 22%,#fff);border:1.5px solid var(--m-choc);border-radius:999px;}
.upp-tip .ut-meta{color:var(--dim);}
.upp-tip .ut-desc{color:var(--m-choc2);}
.upp-tip .ut-sub{color:var(--m-straw-d);}
.upp-tip .ut-merge{color:var(--m-choc);}
.upp-tip .ut-merge li.from{color:#b86a00;}
.upp-tip .ut-merge em{color:var(--m-straw-d);}
.upp-tip .ut-merge i.lk{color:#a08a7e;}
.upp-tip .ut-lock b{color:#a08a7e;}
.upp-tip .ut-lock span{color:#e07a00;}

/* second wind lives */
.ppill .nm i b.lv{color:#e07a00;text-shadow:none;}
.trk-row .trk-name{color:var(--accent2);}

/* ================= the treat machine (vending) ================= */
/* the gadgets artist perches cat ears + a bulb string on top of the machine
   (canvases at top:-36px): leave headroom so they clear the subtitle */
.vend-wrap{padding-top:28px;}
.vend-mc{background:linear-gradient(180deg,#ff9bb1,#ff7894 55%,#f15d7e);border:3px solid var(--m-choc);border-radius:34px;
  box-shadow:0 8px 0 var(--m-choc), 0 26px 60px rgba(30,12,40,.45), inset 0 4px 0 rgba(255,255,255,.45), inset 0 -10px 0 rgba(74,43,29,.14);}
.vend-top{color:#fff;}
.vend-top b{color:#fff;text-shadow:var(--m-ol2), 0 4px 0 #4a2b1d;font-weight:700;}
.vend-top span{background:var(--m-lemon);color:var(--m-choc);border:2px solid var(--m-choc);box-shadow:0 2px 0 var(--m-choc);font-weight:700;}
.vend-glass{background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(226,242,255,.94) 45%,rgba(235,226,255,.95));
  border:3px solid var(--m-choc);border-radius:24px;box-shadow:inset 0 5px 0 rgba(255,255,255,.8), inset 0 -6px 0 rgba(74,43,29,.07);}
.vend-slot{background:var(--m-milk);border:3px solid var(--vc);border-radius:22px;color:var(--m-choc);
  box-shadow:0 0 0 2px var(--m-choc), 0 5px 0 2px var(--m-choc);}
.vend-slot:hover{box-shadow:0 0 0 2px var(--m-choc), 0 9px 0 2px var(--m-choc), 0 0 0 8px color-mix(in srgb,var(--vc) 40%,transparent);}
.vend-coil{background:repeating-linear-gradient(90deg,#ffd3de 0 6px,#ff8fab 6px 10px);border:1.5px solid rgba(74,43,29,.5);opacity:.75;}
.vend-code{color:var(--m-choc);background:var(--m-lemon);border:1.5px solid var(--m-choc);border-radius:999px;font-weight:700;}
.vend-slot b{color:var(--m-choc);font-weight:700;}
.vend-slot p{color:var(--m-choc2);font-weight:500;}
.vend-tag{color:var(--m-choc);background:var(--vc);border:1.5px solid var(--m-choc);font-weight:700;}
.vend-slot.picked{box-shadow:0 0 0 2px var(--m-choc), 0 5px 0 2px var(--m-choc), 0 0 0 10px color-mix(in srgb,var(--vc) 55%,transparent);}
.vend-slot.out{opacity:.4;filter:grayscale(.6);}
.vend-tray{background:var(--m-choc2);border:3px solid var(--m-choc);border-radius:16px;box-shadow:inset 0 5px 0 rgba(0,0,0,.25);}
.vend-tray span{color:rgba(255,241,220,.7);font-weight:700;}
.vend-credit{background:var(--m-milk);border:2.5px solid var(--m-choc);border-radius:999px;box-shadow:0 3px 0 var(--m-choc), inset 0 2px 0 rgba(74,43,29,.06);}
.vend-credit small{color:var(--dim);opacity:1;font-weight:700;}
.vend-credit strong{font-family:var(--font);color:#b86a00;text-shadow:none;font-weight:700;}
@keyframes vendPaid{0%{transform:scale(1);}35%{transform:scale(1.1);box-shadow:0 3px 0 #4a2b1d, 0 0 0 7px rgba(255,111,142,.45);}100%{transform:scale(1);}}
.vend-spent{color:#fff;text-shadow:var(--m-ol);}
.vend-price{background:var(--m-lemon);color:var(--m-choc);border:2px solid var(--m-choc);border-radius:999px;box-shadow:0 3px 0 var(--m-choc);font-weight:700;}
.vend-slot.poor{border-style:dashed;border-color:color-mix(in srgb,var(--vc) 45%,#b9a79c);}
.vend-slot.poor:hover{box-shadow:0 0 0 2px var(--m-choc), 0 6px 0 2px var(--m-choc);}
.vend-slot.poor .vend-price{background:var(--m-pink);color:#c42848;border-color:var(--m-choc);box-shadow:0 3px 0 var(--m-choc);}
.vend-need{background:var(--m-straw);color:#fff;border:2.5px solid var(--m-choc);border-radius:999px;box-shadow:0 4px 0 var(--m-choc);text-shadow:var(--m-ol);font-weight:700;}
.vend-leave.urge{border-color:var(--m-choc);color:var(--m-choc);animation:mUrge 1.6s ease-in-out infinite;}
@keyframes mUrge{0%,100%{box-shadow:0 4px 0 #4a2b1d, 0 0 0 0 rgba(255,207,63,0);}50%{box-shadow:0 4px 0 #4a2b1d, 0 0 0 7px rgba(255,207,63,.6);}}
.hv-chip{background:var(--m-cream);border:2px solid var(--m-choc);border-radius:999px;color:var(--m-choc);box-shadow:0 3px 0 var(--m-choc);font-weight:700;}
.hv-chip i{background:var(--vc);border:1.5px solid var(--m-choc);box-shadow:none;width:10px;height:10px;}
.hv-chip em{color:var(--dim);}
#report-fx[data-k="nodash"] .rf-stamp{border-color:#ff9f43;color:#e07a00;background:rgba(255,220,198,.6);}

/* ================= the cat-alogue ================= */
#screen-foes{background:
  radial-gradient(circle,rgba(155,130,242,.14) 2.5px,transparent 3px) 0 0/34px 34px,
  radial-gradient(circle at 50% 30%,rgba(255,250,243,.93),rgba(255,231,238,.92) 60%,rgba(232,220,255,.94));}
#screen-foes .foe-top{background:var(--m-cream);border-bottom:3px solid var(--m-choc);box-shadow:0 4px 0 rgba(74,43,29,.12);padding:12px 22px 10px;}
#screen-foes .foe-title{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--m-choc);-webkit-text-fill-color:var(--m-choc);font-weight:700;}
#screen-foes .foe-title::before{content:'\2665';color:var(--m-straw);-webkit-text-fill-color:var(--m-straw);margin-right:8px;}
#screen-foes .foe-title small{color:var(--dim);-webkit-text-fill-color:var(--dim);font-weight:500;}
#screen-foes .foe-count{color:var(--dim);font-weight:600;}
#screen-foes .foe-count b{color:var(--m-choc);}
.foe-group{color:var(--m-straw-d);font-weight:700;}
.foe-group::before{content:'\2740  ';color:var(--m-rose);}
.foe-tile{background:var(--m-milk);border:2.5px solid var(--m-choc);border-radius:18px;color:var(--m-choc);box-shadow:0 4px 0 var(--m-choc);}
.foe-tile:hover{transform:translateY(-3px);border-color:var(--m-choc);box-shadow:0 7px 0 var(--m-choc), 0 0 0 4px rgba(255,143,171,.45);}
.foe-tile:active{transform:translateY(2px);box-shadow:0 1px 0 var(--m-choc);}
.foe-tile.on{border-color:var(--m-choc);background:#fff0f4;box-shadow:0 4px 0 var(--m-choc), 0 0 0 5px var(--m-straw);}
.foe-tile span{font-weight:700;}
.foe-tile.locked{background:#f6eee8;border-style:dashed;border-color:rgba(74,43,29,.45);color:#a08a7e;box-shadow:none;}
.foe-q{color:rgba(74,43,29,.3);font-weight:700;}
.foe-detail{background:var(--m-cream);border:3px solid var(--m-choc);border-radius:26px;color:var(--m-choc);box-shadow:0 6px 0 var(--m-choc), 0 18px 40px rgba(30,12,40,.25);}
.fd-art{background:radial-gradient(circle closest-side,#fff 0 40%,#ffe0e8 90%,rgba(255,224,232,0) 92%);border-radius:24px;}
.fd-chip{color:#fff;background:var(--m-straw);border:2px solid var(--m-choc);box-shadow:0 2px 0 var(--m-choc);text-shadow:var(--m-ol);font-weight:700;}
.fd-name{color:var(--m-choc);font-weight:700;}
.fd-stats div{background:var(--m-milk);border:2px solid var(--m-choc);border-radius:14px;box-shadow:0 2px 0 var(--m-choc);}
.fd-stats b{color:var(--m-choc);font-weight:700;}
.fd-stats span{color:var(--dim);font-weight:700;}
.fd-h{color:var(--m-straw-d);font-weight:700;}
.fd-desc{color:var(--m-choc2);}
.fd-lore{color:#b86a00;}
.fd-note{color:var(--dim);}

/* ================= run report ================= */
.rr-chip{background:var(--m-milk);border:2px solid var(--m-choc);border-radius:16px;box-shadow:0 3px 0 var(--m-choc);}
.rr-chip b{color:var(--m-choc);font-weight:700;}
.rr-chip span{color:var(--dim);font-weight:700;}
.rr-tab{font-family:var(--font);font-weight:700;border:2px solid var(--m-choc);border-radius:999px;background:var(--m-milk);
  color:var(--pc);text-shadow:var(--m-ol);box-shadow:0 3px 0 var(--m-choc);}
.rr-tab:hover{transform:translateY(-1px);}
.rr-tab.on{background:color-mix(in srgb,var(--pc) 30%,#fff);border-color:var(--m-choc);box-shadow:0 3px 0 var(--m-choc), 0 0 0 3px color-mix(in srgb,var(--pc) 50%,transparent);}
.rr-tab em{color:var(--m-choc2);text-shadow:none;}
.rr-stats,.rr-dmg{background:var(--m-milk);border:2.5px solid var(--m-choc);border-radius:18px;box-shadow:0 3px 0 var(--m-choc);}
.rr-who b{color:var(--pc);text-shadow:var(--m-ol);font-weight:700;}
.rr-who span{color:var(--dim);}
.rr-stat{border-bottom:2px dashed rgba(74,43,29,.13);color:var(--m-choc2);}
.rr-stat b{color:var(--m-choc);font-weight:700;}
.rr-stat small{color:var(--dim);}
.rr-dh{color:var(--accent2);font-weight:700;}
.rr-dh small{color:var(--dim);}
.rr-row canvas{background:radial-gradient(circle at 50% 40%,#fff 0 35%,var(--m-sky) 90%);border:2px solid var(--m-choc);border-radius:10px;}
.rr-nm{color:var(--m-choc);}
.rr-bar{height:10px;background:#f1ddd0;border:1.8px solid var(--m-choc);border-radius:999px;}
.rr-bar i{background:var(--bc);border-radius:999px;box-shadow:inset 0 -3px 0 rgba(74,43,29,.18), inset 0 2px 0 rgba(255,255,255,.4);}
.rr-val b{color:var(--m-choc);font-weight:700;}
.rr-val span{color:var(--dim);}
.rr-foot{color:var(--dim);}

.citem .sw{border:1.5px solid var(--m-choc);border-radius:50%;}

/* round pastel plates behind the canvas icons (the icons themselves are drawn by the art hooks) */
.perk-card canvas,.perk-slot.full canvas{border-radius:50%;
  background:radial-gradient(circle at 50% 44%,#fff 0 36%,color-mix(in srgb,var(--pc,#ffc9d6) 34%,#fff) 64%,transparent 66%);}
.vend-slot canvas{border-radius:50%;
  background:radial-gradient(circle at 50% 45%,#fff 0 34%,color-mix(in srgb,var(--vc,#ffc9d6) 30%,#fff) 60%,transparent 61%);}
.foe-tile canvas{border-radius:50%;background:radial-gradient(circle at 50% 50%,#fff 0 30%,#efe6ff 62%,transparent 64%);}
.foe-tile.locked canvas{background:none;}
.cards-owned .co-tile canvas{border-radius:50%;background:radial-gradient(circle at 50% 45%,#fff 0 40%,rgba(255,255,255,0) 68%);}

/* ---- batch 33: locked perk slots you can buy ---- */
.perk-slot.locked{cursor:pointer;justify-content:flex-start;gap:6px;font-family:var(--font);text-align:left;
  border:2.5px dashed rgba(74,43,29,.45);border-radius:16px;background:#f3ecff;color:var(--m-choc);
  transition:transform .14s cubic-bezier(.3,1.6,.5,1),background .14s;}
.perk-slot.locked canvas{width:40px;height:40px;flex:0 0 auto;}
.perk-slot.locked .ps-txt b{font-size:11.5px;letter-spacing:1.5px;}
.perk-slot.locked .ps-txt small{display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:#8a5cd6;}
.perk-slot.locked.next{border-style:solid;border-color:var(--m-choc);background:#fff4d6;box-shadow:0 3px 0 var(--m-choc);}
.perk-slot.locked.next:hover{transform:translateY(-2px);background:#fff0c2;}
.perk-slot.locked.next .ps-txt small{color:#b27a00;}
.perk-slot.locked.poor .ps-txt small{color:#c42848;}
.perk-slot.locked:not(.next){opacity:.72;cursor:default;}
.perk-slot.locked.armed{background:var(--m-lemon);animation:mBob .7s ease-in-out infinite;}
.perk-slot.locked.armed .ps-txt small{color:var(--m-choc);}

/* ---- batch 33: the reset-everything button in the settings ---- */
.btn.wipe-btn{white-space:nowrap;}
.btn.wipe-btn.armed{background:#ff5f7e;color:#fff;text-shadow:var(--m-ol);animation:mBob .7s ease-in-out infinite;}
.rowflex.wipe-row{flex-direction:column;align-items:flex-start;gap:5px;}
.rowflex.wipe-row .hint{max-width:340px;line-height:1.35;}

/* ---- batch 33: the Mystery Treat reveal over the machine ---- */
.vend-reveal{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border-radius:32px;background:radial-gradient(circle at 50% 40%,rgba(255,250,240,.97),rgba(255,236,246,.96) 60%,rgba(243,232,255,.96));
  animation:vrIn .25s ease-out both;cursor:default;}
.vend-reveal canvas{width:360px;height:300px;max-width:90%;}
.vend-reveal .vr-txt{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--m-choc);opacity:0;transform:translateY(12px) scale(.94);
  transition:opacity .35s ease, transform .45s cubic-bezier(.3,1.6,.5,1);margin-top:-18px;}
.vend-reveal.shown .vr-txt{opacity:1;transform:none;}
.vend-reveal .vr-txt span{position:static;}
.vend-reveal .vr-kick{font-size:11px;font-weight:700;letter-spacing:3px;color:#8a5cd6;}
.vend-reveal .vr-name{font-size:28px;font-weight:700;letter-spacing:1.5px;text-shadow:0 2px 0 #fff;}
.vr-chips{display:flex;gap:8px;}
.vr-chips span{font-size:11px;font-weight:700;letter-spacing:2px;padding:3px 10px;border-radius:10px;border:2px solid var(--m-choc);
  background:color-mix(in srgb,var(--cc) 35%,#fff);}
.vr-lv{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:2px;padding:6px 16px;border-radius:14px;
  background:#fff;border:2.5px solid var(--m-choc);box-shadow:0 3px 0 var(--m-choc);}
.vr-lv .vr-from{font-size:18px;color:#9a7a6a;}
.vr-lv .vr-to{font-size:24px;color:var(--rc,#8a5cd6);text-shadow:0 2px 0 rgba(74,43,29,.25);}
.vr-lv .vr-max{font-size:13px;color:#9a7a6a;}
.vend-reveal .vr-arrow{display:inline-block;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid var(--m-choc);}
.vr-lv .vr-maxed{font-size:12px;letter-spacing:2px;padding:2px 8px;border-radius:9px;background:var(--m-lemon);border:2px solid var(--m-choc);animation:mBob .8s ease-in-out infinite;}
.vend-reveal .vr-hint{position:absolute;top:14px;right:24px;font-size:11px;font-weight:700;letter-spacing:3px;color:rgba(74,43,29,.55);opacity:0;transition:opacity .3s;}
.vend-reveal.can-skip{cursor:pointer;}
.vend-reveal.can-skip .vr-hint{opacity:1;}
@keyframes vrIn{from{opacity:0;}to{opacity:1;}}

/* ================= end of the mochi theme ================= */