/* ════════════════════════════════════════════════════════════════
   JUSTCHILL — RIGHT PANEL REDESIGN
   Cinematic Today's Mood · Photo-real Polaroids · Live game tiles · Coffee
   Loaded AFTER the inline <style>, so it wins on source order.
   ════════════════════════════════════════════════════════════════ */

/* ─── Shared widget polish ─── */
.col-right .widget{
  position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 44px rgba(0,0,0,.34);
}
.col-right .widget-head{align-items:center;}

/* ════════════════════════════════════════════════════════════════
   1 · TODAY'S MOOD — CINEMATIC CARD
   ════════════════════════════════════════════════════════════════ */
.mood-cinema{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:var(--r-xl);
  padding:0 !important;
  min-height:228px;
  display:flex;
  background:#0a0712 !important;
  isolation:isolate;
  box-shadow:0 22px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05) inset;
  /* per-mood variables (defaults = cosmos) */
  --mc-sky:linear-gradient(170deg,#241246 0%,#14092e 55%,#0a0518 100%);
  --mc-glow:rgba(167,139,250,.55);
  --mc-glow-pos:78% 16%;
  --mc-accent:#c8b6ff;
  --mc-ink:#f3ecff;
  --mc-stars:1;
  --mc-hills:0;
  --mc-hill:#0a0518;
  --mc-rays:.30;
  --mc-bokeh:0;
  --mc-bokeh-shape:50%;
}
/* ── scene stack ── */
.mc-scene{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;
  animation:mcKenBurns 24s ease-in-out infinite alternate;transform-origin:62% 40%;}
@keyframes mcKenBurns{0%{transform:scale(1.06) translate(0,0)}100%{transform:scale(1.16) translate(-2%,-2.5%)}}
.mc-layer{position:absolute;inset:0;pointer-events:none;}
.mc-sky{background:var(--mc-sky);}
.mc-glow{background:radial-gradient(ellipse 60% 55% at var(--mc-glow-pos),var(--mc-glow) 0%,transparent 62%);
  mix-blend-mode:screen;animation:mcGlowPulse 7s ease-in-out infinite;}
@keyframes mcGlowPulse{0%,100%{opacity:.85}50%{opacity:1}}
/* stars */
.mc-stars{opacity:var(--mc-stars);
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,rgba(255,255,255,.95),transparent),
    radial-gradient(1px 1px at 26% 9%,rgba(220,235,255,.8),transparent),
    radial-gradient(1px 1px at 38% 22%,rgba(255,255,255,.65),transparent),
    radial-gradient(1.6px 1.6px at 52% 8%,rgba(220,235,255,.9),transparent),
    radial-gradient(1px 1px at 63% 27%,rgba(255,255,255,.6),transparent),
    radial-gradient(1.4px 1.4px at 74% 14%,rgba(255,255,255,.85),transparent),
    radial-gradient(1px 1px at 86% 24%,rgba(255,255,255,.7),transparent),
    radial-gradient(1px 1px at 94% 11%,rgba(220,235,255,.75),transparent),
    radial-gradient(1px 1px at 8% 40%,rgba(255,255,255,.45),transparent),
    radial-gradient(1px 1px at 45% 44%,rgba(255,255,255,.42),transparent),
    radial-gradient(1px 1px at 70% 40%,rgba(255,255,255,.5),transparent);
  animation:mcTwinkle 5.5s ease-in-out infinite alternate;}
@keyframes mcTwinkle{0%{opacity:calc(var(--mc-stars) * .6)}100%{opacity:var(--mc-stars)}}
/* rolling hills / horizon silhouette */
.mc-hills{opacity:var(--mc-hills);}
.mc-hills::before{content:'';position:absolute;left:0;right:0;bottom:0;height:46%;
  background:var(--mc-hill);
  clip-path:polygon(0 100%,0 58%,14% 44%,28% 56%,42% 36%,58% 54%,72% 40%,86% 56%,100% 46%,100% 100%);}
.mc-hills::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34%;
  background:color-mix(in oklab,var(--mc-hill) 70%, #000);
  clip-path:polygon(0 100%,0 70%,18% 60%,34% 72%,50% 58%,66% 70%,82% 60%,100% 70%,100% 100%);}
/* god rays */
.mc-rays{opacity:var(--mc-rays);mix-blend-mode:screen;
  background:repeating-conic-gradient(from 200deg at 78% 8%,
    rgba(255,255,255,.10) 0deg,transparent 3deg,transparent 9deg,rgba(255,255,255,.07) 12deg);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 78% 8%,#000 0%,transparent 70%);
  mask-image:radial-gradient(ellipse 70% 80% at 78% 8%,#000 0%,transparent 70%);
  animation:mcRayDrift 14s ease-in-out infinite alternate;}
@keyframes mcRayDrift{0%{transform:rotate(-2deg)}100%{transform:rotate(2deg)}}
/* floating bokeh / hearts / fireflies */
.mc-bokeh{opacity:var(--mc-bokeh);}
.mc-bokeh i{position:absolute;width:10px;height:10px;border-radius:var(--mc-bokeh-shape);
  background:radial-gradient(circle at 35% 30%,#fff,var(--mc-accent) 55%,transparent 72%);
  filter:blur(.4px);opacity:.0;animation:mcFloat 9s ease-in-out infinite;}
.mc-bokeh i:nth-child(1){left:16%;bottom:12%;width:8px;height:8px;animation-delay:0s;animation-duration:8s}
.mc-bokeh i:nth-child(2){left:34%;bottom:24%;width:6px;height:6px;animation-delay:1.4s;animation-duration:11s}
.mc-bokeh i:nth-child(3){left:58%;bottom:14%;width:12px;height:12px;animation-delay:.7s;animation-duration:9.5s}
.mc-bokeh i:nth-child(4){left:74%;bottom:30%;width:7px;height:7px;animation-delay:2.2s;animation-duration:12s}
.mc-bokeh i:nth-child(5){left:88%;bottom:18%;width:9px;height:9px;animation-delay:3.1s;animation-duration:10s}
@keyframes mcFloat{0%{transform:translateY(8px) scale(.9);opacity:0}
  20%{opacity:.9}80%{opacity:.7}100%{transform:translateY(-46px) scale(1.1);opacity:0}}
/* heart-shaped bokeh for romance */
.mood-cinema[data-mood="romance"] .mc-bokeh i{
  background:var(--mc-accent);border-radius:0;filter:blur(.3px);
  -webkit-mask:radial-gradient(circle at 30% 30%,#000 48%,transparent 49%) 0 0/50% 50% no-repeat,
    radial-gradient(circle at 70% 30%,#000 48%,transparent 49%) 100% 0/50% 50% no-repeat,
    conic-gradient(from -45deg at 50% 78%,#000 0 90deg,transparent 0) 50% 100%/100% 70% no-repeat;}
/* film grain + vignette + letterbox */
.mc-grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:mcGrain .5s steps(2) infinite;}
@keyframes mcGrain{0%{transform:translate(0,0)}50%{transform:translate(-3%,2%)}100%{transform:translate(2%,-1%)}}
.mc-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 110% 90% at 50% 35%,transparent 40%,rgba(0,0,0,.55) 100%),
    linear-gradient(180deg,rgba(0,0,0,.30) 0%,transparent 28%,transparent 55%,rgba(0,0,0,.82) 100%);}
.mc-bar{position:absolute;left:0;right:0;z-index:4;height:14px;background:#000;pointer-events:none;}
.mc-bar-top{top:0;box-shadow:0 1px 0 rgba(255,255,255,.06);}
.mc-bar-bot{bottom:0;box-shadow:0 -1px 0 rgba(255,255,255,.06);}
/* sprocket perforations on letterbox */
.mc-bar::after{content:'';position:absolute;inset:3px 0;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 5px,transparent 5px 16px);
  opacity:.5;}

/* ── content ── */
.mc-content{position:relative;z-index:5;display:flex;flex-direction:column;width:100%;
  padding:24px 20px 22px;gap:0;}
.mc-head{display:flex;align-items:center;gap:9px;margin-bottom:auto;}
.mc-reel{font-size:.95rem;filter:drop-shadow(0 1px 4px rgba(0,0,0,.6));animation:mcReel 9s linear infinite;}
@keyframes mcReel{to{transform:rotate(360deg)}}
.mood-cinema .mood-label{font-size:.58rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.72);text-shadow:0 1px 6px rgba(0,0,0,.7);}
.mc-live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:.5rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mc-accent);
  padding:3px 9px;border:1px solid color-mix(in oklab,var(--mc-accent) 45%,transparent);border-radius:20px;
  background:rgba(0,0,0,.35);backdrop-filter:blur(4px);text-shadow:0 1px 4px rgba(0,0,0,.6);}
.mc-live::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--mc-accent);
  box-shadow:0 0 8px var(--mc-accent);animation:pulse 1.8s ease-in-out infinite;}
.mc-quote-wrap{margin-top:18px;position:relative;}
.mood-cinema .mood-quote-mark{font-family:var(--script);font-size:3.1rem;line-height:.2;
  color:var(--mc-accent);opacity:.75;display:block;margin-bottom:14px;
  text-shadow:0 2px 14px rgba(0,0,0,.6);}
.mood-cinema .mood-quote{font-size:1.12rem !important;font-weight:700;line-height:1.42 !important;
  letter-spacing:-.01em;color:var(--mc-ink);
  text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 18px rgba(0,0,0,.7);
  margin-bottom:12px;text-wrap:pretty;}
.mood-cinema .mood-movie{font-size:.72rem;font-style:italic;color:rgba(255,255,255,.78);
  letter-spacing:.01em;text-shadow:0 1px 6px rgba(0,0,0,.8);margin:0;}
.mood-cinema .mood-movie strong{font-style:normal;font-weight:800;color:var(--mc-accent);}
/* fade between quotes */
.mood-cinema.mood-swap .mc-content{animation:mcSwap .55s ease;}
@keyframes mcSwap{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
.mood-cinema.mood-swap .mc-scene{animation:mcKenBurns 24s ease-in-out infinite alternate, mcSceneFlash .8s ease;}
@keyframes mcSceneFlash{0%{filter:brightness(1.6) saturate(1.3)}100%{filter:none}}

/* ── MOOD THEMES ── */
.mood-cinema[data-mood="cosmos"]{--mc-sky:linear-gradient(170deg,#2a1556 0%,#160a34 52%,#090418 100%);
  --mc-glow:rgba(167,139,250,.6);--mc-glow-pos:74% 14%;--mc-accent:#c8b6ff;--mc-ink:#f4eeff;
  --mc-stars:1;--mc-rays:.34;--mc-bokeh:.55;}
.mood-cinema[data-mood="dawn"]{--mc-sky:linear-gradient(175deg,#ffd9a0 0%,#f7a26a 30%,#b65a4e 62%,#3a2140 100%);
  --mc-glow:rgba(255,221,150,.85);--mc-glow-pos:50% 92%;--mc-accent:#ffe2a8;--mc-ink:#fff6e8;
  --mc-stars:0;--mc-hills:1;--mc-hill:#2a1330;--mc-rays:.5;--mc-bokeh:.5;}
.mood-cinema[data-mood="romance"]{--mc-sky:linear-gradient(170deg,#5a1f4a 0%,#8a2f54 40%,#c25a5a 72%,#3a1530 100%);
  --mc-glow:rgba(255,170,190,.7);--mc-glow-pos:30% 24%;--mc-accent:#ffc6d8;--mc-ink:#fff0f4;
  --mc-stars:.25;--mc-rays:.18;--mc-bokeh:.85;}
.mood-cinema[data-mood="night"]{--mc-sky:linear-gradient(175deg,#0f1f4a 0%,#0a1636 50%,#050a1e 100%);
  --mc-glow:rgba(147,210,255,.55);--mc-glow-pos:18% 16%;--mc-accent:#9fd0ff;--mc-ink:#eaf3ff;
  --mc-stars:1;--mc-hills:1;--mc-hill:#040a1c;--mc-rays:.12;--mc-bokeh:0;}
.mood-cinema[data-mood="forest"]{--mc-sky:linear-gradient(175deg,#16352e 0%,#0f2a28 48%,#08161a 100%);
  --mc-glow:rgba(120,230,180,.45);--mc-glow-pos:66% 22%;--mc-accent:#9af0c4;--mc-ink:#ecfff5;
  --mc-stars:.4;--mc-hills:1;--mc-hill:#05120f;--mc-rays:.26;--mc-bokeh:.7;--mc-bokeh-shape:50%;}
.mood-cinema[data-mood="ocean"]{--mc-sky:linear-gradient(175deg,#0b3a52 0%,#0a2c45 46%,#06141f 100%);
  --mc-glow:rgba(120,220,240,.5);--mc-glow-pos:50% 20%;--mc-accent:#9fe6f5;--mc-ink:#e8fbff;
  --mc-stars:.5;--mc-hills:1;--mc-hill:#04141d;--mc-rays:.2;--mc-bokeh:.35;}
/* night gets a moon */
.mood-cinema[data-mood="night"] .mc-glow{background:
  radial-gradient(circle 26px at 18% 16%,rgba(240,248,255,.95) 0%,rgba(180,215,255,.5) 55%,transparent 72%),
  radial-gradient(ellipse 60% 55% at 18% 16%,var(--mc-glow) 0%,transparent 60%);}

/* ════════════════════════════════════════════════════════════════
   2 · INTERNET MEMORIES — PHOTO-REAL POLAROIDS
   ════════════════════════════════════════════════════════════════ */
.mem-compact{
  background:linear-gradient(160deg,rgba(40,30,12,.5),rgba(20,16,8,.4)) !important;
  border-color:rgba(251,191,36,.20) !important;
}
.mem-polaroid-row{gap:18px;padding:10px 16px 26px;perspective:1100px;scrollbar-width:none;}
.mem-polaroid-row::-webkit-scrollbar{display:none;}
.mem-polaroid{
  width:110px;background:transparent;border-radius:0;padding:0;
  box-shadow:none;perspective:900px;
  transition:transform .3s cubic-bezier(.34,1.4,.64,1);
}
/* re-apply the playful scatter on the OUTER element */
.mem-polaroid:nth-child(1){transform:rotate(-3deg);}
.mem-polaroid:nth-child(2){transform:rotate(2.2deg);}
.mem-polaroid:nth-child(3){transform:rotate(-1.4deg);}
.mem-polaroid:nth-child(4){transform:rotate(2.6deg);}
.mem-polaroid:nth-child(5){transform:rotate(-2deg);}
.mem-polaroid:hover,.mem-polaroid:focus-within{
  transform:rotate(0deg) translateY(-8px) scale(1.08) !important;z-index:12;
}
/* flip wrapper */
.mem-pol-flip{position:relative;width:100%;transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.6,.05,.28,1);}
.mem-polaroid.flipped .mem-pol-flip{transform:rotateY(180deg);}
/* faces share the polaroid paper look */
.mem-pol-face{
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  background:
    linear-gradient(135deg,rgba(255,255,255,.5) 0%,transparent 22%,transparent 78%,rgba(0,0,0,.05) 100%),
    linear-gradient(180deg,#fbf7ee,#efe7d6);
  border-radius:3px;
  padding:8px 8px 30px;
  box-shadow:0 10px 26px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4),
    0 0 0 1px rgba(0,0,0,.06) inset, 0 1px 0 rgba(255,255,255,.6) inset;
}
/* paper grain (no blend-mode: it would flatten the 3D flip and leak the back face) */
.mem-pol-face::after{content:'';position:absolute;inset:0;border-radius:3px;pointer-events:none;
  opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.05'/%3E%3C/svg%3E");}
.mem-pol-front{position:relative;transform:rotateY(0deg);}
/* visibility swap at the rotation midpoint — robust even where backface-visibility is flattened */
.mem-pol-front,.mem-pol-back{transition:visibility 0s .32s;}
.mem-pol-back{visibility:hidden;}
.mem-polaroid.flipped .mem-pol-front{visibility:hidden;}
.mem-polaroid.flipped .mem-pol-back{visibility:visible;}
.mem-pol-back{position:absolute;inset:0;transform:rotateY(180deg);display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;padding:12px 9px 24px;}
/* washi tape */
.mem-pol-front::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:46px;height:17px;z-index:4;
  background:linear-gradient(135deg,rgba(251,191,36,.5),rgba(253,224,138,.32));
  border-left:1px dashed rgba(255,255,255,.5);border-right:1px dashed rgba(255,255,255,.5);
  box-shadow:0 1px 3px rgba(0,0,0,.25);}
/* the photo */
.mem-pol-photo{width:100%;aspect-ratio:1;border-radius:1px;position:relative;overflow:hidden;
  background:#0a0a12;
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset,0 2px 8px rgba(0,0,0,.4) inset;}
/* photo gloss + vignette */
.mem-pol-photo::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;
  background:
    linear-gradient(120deg,rgba(255,255,255,.22) 0%,transparent 30%),
    radial-gradient(ellipse 130% 120% at 50% 0%,transparent 55%,rgba(0,0,0,.5) 100%);}
.mem-pol-emoji{display:none;}
.mem-pol-play{
  position:absolute;bottom:6px;right:6px;width:26px;height:26px;border-radius:50%;z-index:6;
  background:rgba(0,0,0,.62);border:1.5px solid rgba(255,255,255,.85);color:#fff;font-size:.52rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;line-height:1;
  backdrop-filter:blur(3px);box-shadow:0 2px 8px rgba(0,0,0,.5);
  transition:background .15s,transform .15s,border-color .15s;}
.mem-pol-play:hover{background:rgba(251,191,36,.95);border-color:#fde68a;color:#1a1206;transform:scale(1.18);}
.mem-pol-play.playing{background:rgba(251,191,36,.95);border-color:#fde68a;color:#1a1206;animation:polPulse 1s ease-in-out infinite;}
/* handwritten caption */
.mem-pol-label{position:absolute;left:0;right:0;bottom:5px;text-align:center;
  font-family:var(--script) !important;font-size:.94rem !important;font-weight:700;
  color:#2a2620 !important;line-height:1 !important;letter-spacing:.01em;
  transform:rotate(-1.5deg);}
.mem-pol-year{position:absolute;left:7px;bottom:7px;z-index:6;font-family:'Courier New',monospace;
  font-size:.5rem;font-weight:700;letter-spacing:.03em;color:#ffb454;
  text-shadow:0 0 5px rgba(255,150,40,.85),0 1px 1px rgba(0,0,0,.6);transform:none;}
/* tap hint */
.mem-pol-front .mem-pol-hint{position:absolute;top:11px;left:11px;z-index:6;font-size:.46rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);
  background:rgba(0,0,0,.4);padding:2px 6px;border-radius:20px;backdrop-filter:blur(3px);
  opacity:0;transition:opacity .2s;}
.mem-polaroid:hover .mem-pol-hint{opacity:1;}
/* back of polaroid */
.mem-pol-back-name{font-size:.42rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;color:rgba(140,105,50,.78);margin-bottom:7px;}
.mem-pol-back-text{font-family:var(--script);font-size:.92rem;line-height:1.28;color:#332d22;
  margin-bottom:11px;text-wrap:pretty;}
.mem-pol-share{display:inline-flex;align-items:center;gap:5px;font-family:var(--font);
  font-size:.5rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#7a5a14;
  background:rgba(251,191,36,.16);border:1px solid rgba(180,130,30,.4);border-radius:8px;
  padding:5px 10px;cursor:pointer;transition:background .15s,transform .15s;}
.mem-pol-share:hover{background:rgba(251,191,36,.32);transform:translateY(-1px);}
.mem-pol-flipback{position:absolute;bottom:6px;left:0;right:0;text-align:center;
  font-family:var(--script);font-size:.58rem;color:rgba(120,90,40,.6);}

/* ── PAINTED RETRO PHOTOS ─────────────────────────────────────── */
/* shared subject helper */
.scene{position:absolute;inset:0;}
/* XP — Bliss hill */
.sc-xp{background:linear-gradient(180deg,#2f7ec4 0%,#5aa7e0 42%,#a9d6f2 62%);}
.sc-xp .xp-cloud{position:absolute;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);border-radius:50%;}
.sc-xp .xp-cloud.c1{width:42px;height:18px;top:14%;left:8%;opacity:.9;}
.sc-xp .xp-cloud.c2{width:30px;height:13px;top:26%;right:10%;opacity:.7;}
.sc-xp .xp-hill{position:absolute;left:-6%;right:-6%;bottom:-2%;height:52%;
  background:linear-gradient(165deg,#8bc34a 0%,#5d9c33 60%,#487d27 100%);
  border-radius:50% 50% 0 0/100% 100% 0 0;
  box-shadow:0 -2px 10px rgba(0,0,0,.18) inset;}
.sc-xp .xp-hill::after{content:'';position:absolute;top:8%;left:18%;width:55%;height:30%;
  background:radial-gradient(ellipse,rgba(255,255,255,.35),transparent 70%);border-radius:50%;}
/* MSN — chat window that nudges */
.sc-msn{background:linear-gradient(160deg,#0a3a5c,#06223a);}
.sc-msn .msn-win{position:absolute;left:14%;right:14%;top:18%;bottom:20%;border-radius:5px;
  background:#eef4fb;box-shadow:0 4px 12px rgba(0,0,0,.5);overflow:hidden;
  animation:msnNudge 3.4s ease-in-out infinite;}
@keyframes msnNudge{0%,72%,100%{transform:translate(0,0)}74%{transform:translate(-3px,2px)}
  78%{transform:translate(3px,-2px)}82%{transform:translate(-2px,1px)}86%{transform:translate(2px,-1px)}90%{transform:translate(0,0)}}
.sc-msn .msn-bar{position:absolute;top:0;left:0;right:0;height:24%;
  background:linear-gradient(180deg,#5b9bd5,#3a78c2);}
.sc-msn .msn-b{position:absolute;height:13%;border-radius:6px;}
.sc-msn .msn-b1{top:36%;left:12%;width:44%;background:#cdd9e6;}
.sc-msn .msn-b2{top:58%;right:12%;width:52%;background:#7db0e6;}
.sc-msn .msn-b3{top:80%;left:12%;width:30%;background:#cdd9e6;}
/* Nokia — green LCD */
.sc-nokia{background:linear-gradient(160deg,#14202c,#0a141c);}
.sc-nokia .nk-lcd{position:absolute;left:13%;right:13%;top:16%;bottom:16%;border-radius:3px;
  background:linear-gradient(165deg,#aebb86,#8fa06a);box-shadow:0 0 0 2px #2a2f22,0 2px 6px rgba(0,0,0,.5) inset;
  overflow:hidden;}
.sc-nokia .nk-lcd::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 2px,transparent 2px 4px);}
.sc-nokia .nk-bars{position:absolute;top:12%;left:12%;display:flex;align-items:flex-end;gap:2px;height:18%;}
.sc-nokia .nk-bars i{width:3px;background:#3b3f2b;}
.sc-nokia .nk-bars i:nth-child(1){height:34%}.sc-nokia .nk-bars i:nth-child(2){height:58%}
.sc-nokia .nk-bars i:nth-child(3){height:80%}.sc-nokia .nk-bars i:nth-child(4){height:100%}
.sc-nokia .nk-note{position:absolute;color:#2f3320;font-size:.7rem;line-height:1;
  animation:nkNote 2.6s ease-in-out infinite;}
.sc-nokia .nk-note.n1{bottom:24%;left:24%;animation-delay:0s}
.sc-nokia .nk-note.n2{bottom:40%;left:50%;animation-delay:.5s}
.sc-nokia .nk-note.n3{bottom:30%;right:20%;animation-delay:1s}
@keyframes nkNote{0%,100%{transform:translateY(2px);opacity:.5}50%{transform:translateY(-4px);opacity:1}}
/* Dial-up — waveform handshake */
.sc-dialup{background:linear-gradient(160deg,#231600,#140d00);}
.sc-dialup .du-wave{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:3px;}
.sc-dialup .du-wave i{width:4px;border-radius:3px;background:linear-gradient(180deg,#fcd34d,#f59e0b);
  box-shadow:0 0 6px rgba(251,191,36,.6);animation:duWave 1.1s ease-in-out infinite;}
.sc-dialup .du-wave i:nth-child(1){height:24%;animation-delay:0s}
.sc-dialup .du-wave i:nth-child(2){height:54%;animation-delay:.12s}
.sc-dialup .du-wave i:nth-child(3){height:80%;animation-delay:.24s}
.sc-dialup .du-wave i:nth-child(4){height:42%;animation-delay:.36s}
.sc-dialup .du-wave i:nth-child(5){height:96%;animation-delay:.48s}
.sc-dialup .du-wave i:nth-child(6){height:38%;animation-delay:.6s}
.sc-dialup .du-wave i:nth-child(7){height:66%;animation-delay:.72s}
@keyframes duWave{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
/* AIM — envelope + online dot */
.sc-aim{background:linear-gradient(160deg,#241c00,#15100a);}
.sc-aim .aim-env{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  width:54%;height:38%;background:#fde68a;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.5);
  animation:aimPop 3s ease-in-out infinite;}
.sc-aim .aim-env::before{content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 47%,#f0c544 47% 53%,transparent 53%),
    linear-gradient(225deg,transparent 47%,#f0c544 47% 53%,transparent 53%);
  -webkit-clip-path:polygon(0 0,100% 0,50% 55%);clip-path:polygon(0 0,100% 0,50% 55%);}
.sc-aim .aim-dot{position:absolute;top:30%;right:24%;width:11px;height:11px;border-radius:50%;
  background:#4ade80;box-shadow:0 0 8px #4ade80,0 0 0 2px rgba(0,0,0,.3);
  animation:pulse 1.6s ease-in-out infinite;z-index:3;}
@keyframes aimPop{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-54%) scale(1.05)}}

/* ════════════════════════════════════════════════════════════════
   3 · TINY DOPAMINE BREAKS — LIVE MINI PREVIEWS
   ════════════════════════════════════════════════════════════════ */
.tdp-play-btn{white-space:nowrap;}
/* bottom-align the Play buttons regardless of description length */
.tdp-game-card{display:flex;flex-direction:column;}
.tdp-game-body{display:flex;flex-direction:column;flex:1;}
.tdp-game-desc{flex:1 0 auto;}
.tdp-play-btn{align-self:flex-start;margin-top:auto;}
.tdp-game-thumb{position:relative;overflow:hidden;}
.tdp-game-thumb>span{position:relative;z-index:4;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));}
.tdp-scene{position:absolute;inset:0;z-index:1;pointer-events:none;}
.tdp-game-card:hover .tdp-game-thumb>span{animation-play-state:running;}
/* Dino — scrolling desert ground */
.tdp-scene.s-dino .ground{position:absolute;left:0;right:0;bottom:22%;height:2px;background:rgba(120,200,140,.5);}
.tdp-scene.s-dino .ground::after{content:'';position:absolute;left:0;right:0;top:3px;height:2px;
  background:repeating-linear-gradient(90deg,rgba(120,200,140,.45) 0 7px,transparent 7px 17px);
  animation:tdpScroll .5s linear infinite;}
.tdp-scene.s-dino .cactus{position:absolute;bottom:24%;width:4px;height:11px;background:rgba(74,160,90,.7);border-radius:2px;
  animation:tdpCactus 2.4s linear infinite;}
.tdp-game-thumb.thumb-dino>span{animation:tdpHop 1s ease-in-out infinite;}
@keyframes tdpHop{0%,55%,100%{transform:translateY(0)}28%{transform:translateY(-9px)}}
@keyframes tdpCactus{from{right:-8%}to{right:108%}}
@keyframes tdpScroll{to{background-position:-24px 0}}
/* BOB — neon city parallax */
.tdp-scene.s-bob .sky{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(124,58,237,.4),transparent 70%);}
.tdp-scene.s-bob .city{position:absolute;left:0;bottom:18%;width:200%;height:42%;
  background:
    linear-gradient(90deg,transparent 6%,rgba(167,139,250,.5) 6% 9%,transparent 9% 16%,rgba(167,139,250,.4) 16% 21%,transparent 21% 30%,rgba(167,139,250,.55) 30% 33%,transparent 33% 44%,rgba(167,139,250,.42) 44% 50%,transparent 50%);
  -webkit-mask:linear-gradient(180deg,transparent,#000 40%);mask:linear-gradient(180deg,transparent,#000 40%);
  animation:tdpCity 3.4s linear infinite;}
@keyframes tdpCity{to{transform:translateX(-50%)}}
.tdp-game-thumb.thumb-bob>span{animation:tdpHop .85s ease-in-out infinite;}
/* Snake — moving grid + trail */
.tdp-scene.s-snake{background-image:linear-gradient(rgba(74,222,128,.12) 1px,transparent 1px),
  linear-gradient(90deg,rgba(74,222,128,.12) 1px,transparent 1px);background-size:12px 12px;
  animation:tdpGrid 2s linear infinite;}
@keyframes tdpGrid{to{background-position:12px 12px}}
.tdp-scene.s-snake .trail{position:absolute;top:46%;width:9px;height:9px;border-radius:2px;background:#4ade80;
  box-shadow:14px 0 0 -1px rgba(74,222,128,.7),26px 0 0 -2px rgba(74,222,128,.45);
  animation:tdpSnake 3s linear infinite;}
@keyframes tdpSnake{0%{left:-12%}100%{left:78%}}
/* Fortune — orbiting sparkles + conic glow */
.tdp-scene.s-fortune .orbit{position:absolute;inset:0;animation:mcReel 6s linear infinite;}
.tdp-scene.s-fortune .orbit::before,.tdp-scene.s-fortune .orbit::after{content:'';position:absolute;
  width:4px;height:4px;border-radius:50%;background:#fcd34d;box-shadow:0 0 8px #fcd34d;}
.tdp-scene.s-fortune .orbit::before{top:20%;left:50%;}
.tdp-scene.s-fortune .orbit::after{bottom:24%;right:26%;width:3px;height:3px;}
.tdp-scene.s-fortune .aura{position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(251,191,36,.18),transparent 40%,rgba(251,191,36,.18) 70%,transparent);
  animation:mcReel 8s linear infinite reverse;-webkit-mask:radial-gradient(circle at 50% 55%,#000 10%,transparent 60%);mask:radial-gradient(circle at 50% 55%,#000 10%,transparent 60%);}
.tdp-game-thumb.thumb-fortune>span{animation:tdpBobFloat 3s ease-in-out infinite;}
@keyframes tdpBobFloat{0%,100%{transform:translateY(2px) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}

/* ════════════════════════════════════════════════════════════════
   4 · COFFEE LAB — PAINTED LATTE
   ════════════════════════════════════════════════════════════════ */
.sip-feat-img{background:radial-gradient(ellipse 80% 70% at 50% 120%,#3a2010,#1a0c05) !important;
  position:relative;overflow:hidden;min-height:74px;}
.sip-feat-img::before{display:none !important;}
.sip-feat-img>span{display:none;}
.sip-feat-img .sip-emoji{display:none;}
.sip-cup{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);width:54%;height:46%;
  background:linear-gradient(180deg,#f4ede2,#d8cdba);border-radius:6px 6px 12px 12px;
  box-shadow:0 3px 8px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.5) inset;}
.sip-cup::before{content:'';position:absolute;top:8%;left:8%;right:8%;height:34%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%,#6b4423 0%,#3a2410 75%);
  box-shadow:0 1px 3px rgba(0,0,0,.4) inset;}
/* latte-art heart */
.sip-cup::after{content:'';position:absolute;top:14%;left:50%;transform:translateX(-50%);width:30%;height:18%;
  background:#e8d9c2;-webkit-mask:radial-gradient(circle at 30% 35%,#000 48%,transparent 49%) 0 0/50% 60% no-repeat,
    radial-gradient(circle at 70% 35%,#000 48%,transparent 49%) 100% 0/50% 60% no-repeat,
    conic-gradient(from -45deg at 50% 80%,#000 0 90deg,transparent 0) 50% 100%/100% 65% no-repeat;
  mask:radial-gradient(circle at 30% 35%,#000 48%,transparent 49%) 0 0/50% 60% no-repeat,
    radial-gradient(circle at 70% 35%,#000 48%,transparent 49%) 100% 0/50% 60% no-repeat,
    conic-gradient(from -45deg at 50% 80%,#000 0 90deg,transparent 0) 50% 100%/100% 65% no-repeat;opacity:.85;}
.sip-handle{position:absolute;right:14%;bottom:24%;width:13px;height:18px;border:3px solid #d8cdba;
  border-left:none;border-radius:0 8px 8px 0;}
.sip-steam{position:absolute;bottom:58%;left:50%;width:4px;height:18px;border-radius:4px;
  background:linear-gradient(180deg,transparent,rgba(245,235,220,.55),transparent);
  animation:sipSteam 2.6s ease-out infinite;}
.sip-steam.s2{left:42%;animation-delay:.7s;}
.sip-steam.s3{left:58%;animation-delay:1.4s;height:22px;}
@keyframes sipSteam{0%{opacity:0;transform:translate(-50%,4px) scaleY(.7)}30%{opacity:.8}
  100%{opacity:0;transform:translate(-50%,-22px) scaleY(1.4)}}

/* ─── reduced motion: the global rule already disables animations ─── */
@media(prefers-reduced-motion:reduce){
  .mc-scene{animation:none;}
  .mem-pol-flip{transition:none;}
}

/* ════════════════════════════════════════════════════════════════
   TWEAK EFFECTS + PANEL
   ════════════════════════════════════════════════════════════════ */
.mood-cinema.no-grain .mc-grain{display:none;}
.mem-polaroid-row.tidy .mem-polaroid{transform:rotate(0deg);}
.calm-mode .col-right *,.calm-mode .col-right *::before,.calm-mode .col-right *::after{
  animation:none !important;}

/* Panel */
#jcTweaks{position:fixed;right:18px;bottom:18px;z-index:10500;width:248px;
  background:linear-gradient(160deg,rgba(20,14,38,.97),rgba(12,8,26,.98));
  border:1px solid rgba(167,139,250,.3);border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px rgba(167,139,250,.08),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  font-family:var(--font);color:#fff;padding:14px 15px 16px;display:none;
  animation:jcTweakIn .28s cubic-bezier(.34,1.4,.64,1);}
#jcTweaks.open{display:block;}
@keyframes jcTweakIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.jct-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;}
.jct-title{font-size:.62rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(196,181,253,.95);display:flex;align-items:center;gap:7px;}
.jct-title::before{content:'✦';color:var(--violet);}
.jct-close{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6);font-size:.8rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s;}
.jct-close:hover{background:rgba(255,255,255,.15);color:#fff;}
.jct-row{margin-bottom:13px;}
.jct-row:last-child{margin-bottom:0;}
.jct-label{font-size:.6rem;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.55);
  text-transform:uppercase;margin-bottom:7px;display:block;}
.jct-select{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(167,139,250,.25);
  border-radius:9px;color:#fff;font-family:var(--font);font-size:.74rem;font-weight:600;
  padding:8px 10px;cursor:pointer;outline:none;}
.jct-select:focus{border-color:rgba(167,139,250,.6);}
.jct-select option{background:#160f2c;color:#fff;}
.jct-seg{display:flex;gap:6px;}
.jct-seg button{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:9px;color:rgba(255,255,255,.6);font-family:var(--font);font-size:.7rem;font-weight:700;
  padding:8px 6px;cursor:pointer;transition:all .15s;}
.jct-seg button:hover{background:rgba(255,255,255,.1);}
.jct-seg button.on{background:linear-gradient(135deg,rgba(124,58,237,.55),rgba(99,102,241,.45));
  border-color:rgba(167,139,250,.6);color:#fff;box-shadow:0 2px 12px rgba(124,58,237,.3);}
@media(max-width:560px){#jcTweaks{right:10px;left:10px;width:auto;bottom:10px;}}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — right panel
   ════════════════════════════════════════════════════════════════ */
/* smoother, snap-aware horizontal scroll for the polaroid strip (all sizes) */
.mem-polaroid-row{-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;}
.mem-polaroid{scroll-snap-align:center;}

@media(max-width:767px){
  /* right column is full-width when the grid stacks — give widgets room */
  .mood-cinema{min-height:206px;}
  .mood-cinema .mood-quote{font-size:1.2rem !important;}
  .mem-polaroid-row{gap:16px;padding:12px 16px 28px;}
  .mem-polaroid{width:128px;}
  .mem-pol-label{font-size:1.04rem !important;}
  .mem-pol-play{width:30px;height:30px;}          /* easier tap target */
  .mem-pol-back-text{font-size:.96rem;}
  .tdp-game-grid{gap:11px;}
  .tdp-game-name{font-size:.84rem;}
  .tdp-game-desc{font-size:.7rem;}
  .tdp-play-btn{font-size:.7rem;padding:6px 13px;}
}
@media(max-width:430px){
  .mc-content{padding:20px 16px 18px;}
  .mood-cinema .mood-quote{font-size:1.1rem !important;}
  .mem-polaroid{width:120px;}
  .tdp-game-grid{grid-template-columns:1fr 1fr;}   /* keep two columns, just tighter */
}