/* Mahjong solitaire: the poster, the game screen, tiles, effects, sheets and backdrops. Loaded on the mahjong page only (with game-page.css). */
/* ---------- the box on the page: a poster until someone plays ---------- */
.mj{position:relative;margin:0 0 6px;border-radius:30px;overflow:hidden;isolation:isolate;background:#2a1b52;box-shadow:0 34px 60px -30px rgba(42,27,82,.7),0 0 0 1px rgba(42,27,82,.12)}
.mj>.mj-adslot{display:none}
.mj-poster{position:relative;aspect-ratio:1200/630;overflow:hidden}
.mj-poster>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.001)}
.mj-pshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,12,56,0) 42%,rgba(26,12,56,.78) 100%)}
.mj-pui{position:absolute;left:0;right:0;bottom:0;padding:0 28px 26px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.mj-pmeta{display:inline-flex;align-items:center;gap:6px;padding:7px 13px 7px 10px;border-radius:99px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);color:#fff;font:700 .85rem/1 var(--display)}
.mj-pmeta .ic{width:16px;height:16px;color:#ffd36b}
.mj-pbtns{display:flex;flex-wrap:wrap;gap:12px}
.mj:not(.ready) .mj-pbtns{visibility:hidden}
.mj-play{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:210px;padding:17px 30px 17px 24px;border:0;border-radius:99px;cursor:pointer;color:#fff;font:700 1.12rem/1 var(--display);letter-spacing:.01em;background:linear-gradient(135deg,#ff8fc0,#8a6fe0);box-shadow:0 16px 30px -10px rgba(138,111,224,.95),inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(60,20,140,.25);transition:transform .2s cubic-bezier(.3,1.5,.5,1),box-shadow .2s}
.mj-play:hover{transform:translateY(-2px) scale(1.02)}
.mj-play:active{transform:scale(.97)}
.mj-play:focus-visible{outline:3px solid #fff;outline-offset:3px}
.mj-play .ic{width:22px;height:22px;flex:none}
.mj-play:not(.alt)::after{content:"";position:absolute;inset:-6px;border-radius:99px;border:2px solid rgba(255,159,198,.7);animation:mjPulse 2.6s ease-out infinite;pointer-events:none}
.mj-play.alt{background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5),0 12px 26px -12px rgba(20,8,60,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mj-play.alt.done{opacity:.9}
.mj-play .fl{display:inline-flex;align-items:center;gap:3px;margin-left:4px;padding:3px 8px 3px 5px;border-radius:99px;background:rgba(255,160,60,.95);font-style:normal;font-size:.82rem}
.mj-play .fl .ic{width:14px;height:14px}
@keyframes mjPulse{0%{transform:scale(.96);opacity:.9}70%,100%{transform:scale(1.12);opacity:0}}

@media (min-width:821px){
  /* before the game the box is short enough to show its buttons without scrolling; once the game is open it grows to the height of the screen */
  .mj{height:clamp(500px,calc(100vh - 290px),640px)}
  .mj.on{height:min(calc(100vh - 36px),820px);min-height:600px}
  .mj-poster{position:absolute;inset:0;aspect-ratio:auto}
  .mj-poster>img{object-position:50% 30%}
  .mj-pui{padding:0 40px 34px;align-items:center}
  .mj-pbtns{justify-content:center}
}
@media (max-width:820px){
  .mj{border-radius:0;margin-inline:0}
  .mj-poster{aspect-ratio:390/410}
  .mj-poster>img{object-position:50% 30%}
  .mj-pui{padding:0 var(--gut) 20px;gap:12px}
  .mj-pbtns{width:100%;flex-wrap:nowrap;gap:10px}
  .mj-play{flex:1 1 0;width:auto;min-width:0;padding:15px 8px;gap:7px;font-size:.98rem;white-space:nowrap}
  .mj-play .ic{width:20px;height:20px}
  .mj-play .fl{position:absolute;top:-9px;right:10px;margin:0;padding:3px 8px 3px 6px;box-shadow:0 4px 10px -3px rgba(150,70,0,.6)}
}

/* ---------- the game screen ---------- */
.mj-app{--bg1:#241647;--bg2:#4b2f95;--bg3:#b58cf5;--side1:#b59af2;--side2:#6f4fcb;--glow:#ffd36b;--halo:255,211,107;--orb1:rgba(255,159,198,.5);--orb2:rgba(138,200,255,.38);--orb3:rgba(255,211,107,.28);
  position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;color:#fff;font-family:var(--display);overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  background:radial-gradient(120% 70% at 50% -10%,var(--bg3),transparent 62%),linear-gradient(180deg,var(--bg2) 0%,var(--bg1) 100%)}
.mj-app[hidden]{display:none}
.mj-app.full{position:fixed;inset:0;z-index:3000;height:100vh;height:100dvh;border-radius:0}
.mj-app.noad{padding-bottom:12px}
.mj-app.noad.full{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.mj-app:fullscreen{width:100%;height:100%}
.mj-app[data-theme=sakura]{--bg1:#5a2150;--bg2:#b4538d;--bg3:#ffb8d4;--side1:#f59bbd;--side2:#c0568a;--glow:#fff2a8;--halo:255,242,168;--orb1:rgba(255,236,170,.4);--orb2:rgba(255,160,200,.5);--orb3:rgba(190,150,255,.3)}
.mj-app[data-theme=matcha]{--bg1:#0f3a43;--bg2:#2a8272;--bg3:#bff0cf;--side1:#7ad1b5;--side2:#2d8f7a;--glow:#fff2a8;--halo:255,242,168;--orb1:rgba(255,242,168,.38);--orb2:rgba(150,230,215,.45);--orb3:rgba(255,190,210,.3)}
.mj-app[data-theme=gold]{--bg1:#4d1a47;--bg2:#d4646f;--bg3:#ffdca0;--side1:#f6b274;--side2:#c8663f;--glow:#fff7c2;--halo:255,247,194;--orb1:rgba(255,228,150,.5);--orb2:rgba(255,150,170,.45);--orb3:rgba(255,200,120,.32)}

.mj-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mj-orb{position:absolute;border-radius:50%;will-change:transform}
.mj-orb.o1{left:-18%;top:-10%;width:70%;aspect-ratio:1;background:radial-gradient(closest-side,var(--orb1),transparent);animation:mjDrift 22s ease-in-out infinite alternate}
.mj-orb.o2{right:-22%;top:28%;width:76%;aspect-ratio:1;background:radial-gradient(closest-side,var(--orb2),transparent);animation:mjDrift 28s ease-in-out -8s infinite alternate-reverse}
.mj-orb.o3{left:12%;bottom:-24%;width:64%;aspect-ratio:1;background:radial-gradient(closest-side,var(--orb3),transparent);animation:mjDrift 26s ease-in-out -14s infinite alternate}
@keyframes mjDrift{from{transform:translate3d(-4%,-3%,0) scale(1)}to{transform:translate3d(6%,5%,0) scale(1.12)}}
/* floating bits, a different kind in every backdrop */
.mj-fl i{position:absolute;left:var(--l);top:105%;width:var(--s);height:var(--s);opacity:0;animation:mjUp var(--t) linear var(--d) infinite}
.mj-app[data-theme=moon] .mj-fl i{border-radius:50%;background:radial-gradient(circle,#fff6c9 0 30%,rgba(255,236,160,.0) 70%);box-shadow:0 0 12px 2px rgba(255,230,150,.55)}
.mj-app[data-theme=sakura] .mj-fl i{top:-6%;width:calc(var(--s) * 1.5);height:var(--s);border-radius:100% 0 100% 0;background:linear-gradient(135deg,#fff,#ffc4d8);animation-name:mjDown}
.mj-app[data-theme=matcha] .mj-fl i{border-radius:100% 0 100% 0;background:linear-gradient(135deg,#d9ffe6,#7fd6b4);width:calc(var(--s) * 1.4)}
.mj-app[data-theme=gold] .mj-fl i{border-radius:50%;background:radial-gradient(circle,#fffbe0 0 25%,rgba(255,240,170,0) 70%);box-shadow:0 0 10px 2px rgba(255,236,170,.6)}
@keyframes mjUp{0%{top:105%;transform:translateX(0) scale(.6);opacity:0}12%{opacity:var(--o)}88%{opacity:var(--o)}100%{top:-8%;transform:translateX(var(--w)) rotate(200deg) scale(1);opacity:0}}
@keyframes mjDown{0%{top:-8%;transform:translateX(0) rotate(0);opacity:0}10%{opacity:var(--o)}90%{opacity:var(--o)}100%{top:106%;transform:translateX(var(--w)) rotate(520deg);opacity:0}}

/* top bar */
/* the top bar is symmetric: the same width on both sides of the title, so the title sits exactly in the middle of the screen (a phone: close | title | menu) */
.mj-top{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:10px 16px 6px}
.mj-tl,.mj-tr{display:flex;align-items:center;gap:8px}
.mj-tr{justify-content:flex-end}
.mj-app.full .mj-top{padding-top:calc(10px + env(safe-area-inset-top,0px))}
.mj-ib{flex:none;display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:15px;border:1px solid rgba(255,255,255,.26);background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.08));color:#fff;cursor:pointer;box-shadow:0 8px 16px -10px rgba(14,6,40,.8),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .15s cubic-bezier(.3,1.5,.5,1),background .2s}
.mj-ib:active{transform:scale(.9)}
.mj-ib:focus-visible,.mj-act:focus-visible,.mj-btn:focus-visible,.mj-row:focus-visible,.lv:focus-visible,.th:focus-visible{outline:3px solid #fff;outline-offset:2px}
.mj-ib .ic{width:21px;height:21px}
.mj-title{min-width:0;max-width:62vw;text-align:center;line-height:1.15}
.mj-title b{display:block;font:700 1.08rem/1.15 var(--display);text-shadow:0 2px 10px rgba(30,10,70,.5)}
.mj-title small{display:block;margin-top:2px;font:700 .68rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.mj-fs,.mj-sndb{display:none}
.mj-row.mobonly{display:flex}
@media (min-width:821px){.mj-fs,.mj-sndb{display:grid}.mj-row.mobonly{display:none}.mj-app.full .mj-fs{display:grid}.mj-top{padding:14px 16px 8px}.mj-ib{width:44px;height:44px}}

/* time, progress and the stars you can still earn */
.mj-stats{position:relative;z-index:3;display:grid;grid-template-columns:66px minmax(0,1fr) 66px;align-items:center;gap:12px;padding:2px 16px 8px}   /* equal side columns: the bar is in the middle of the screen */
.mj-stats .mj-time{justify-self:start}
.mj-stats .mj-stars{justify-self:end}
.mj-time{flex:none;min-width:46px;font:800 1rem/1 var(--display);font-variant-numeric:tabular-nums;text-shadow:0 2px 8px rgba(30,10,70,.5)}
.mj-prog{position:relative;flex:1;height:24px;border-radius:99px;background:rgba(14,6,40,.34);box-shadow:inset 0 2px 4px rgba(10,4,34,.45),0 0 0 1px rgba(255,255,255,.2);overflow:hidden}
.mj-prog i{position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,#ff8fc0,#ffb8a0 55%,#ffd36b);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);transition:transform .55s cubic-bezier(.3,1.25,.4,1)}
.mj-prog span{position:absolute;inset:0;display:grid;place-items:center;font:800 .7rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 4px rgba(30,10,70,.65)}
.mj-stars{flex:none;display:flex;gap:2px}
.mj-stars svg{width:20px;height:20px;color:#ffd36b;filter:drop-shadow(0 0 5px rgba(255,211,107,.7));transition:color .4s,transform .4s cubic-bezier(.3,1.6,.5,1),filter .4s}
.mj-stars svg.off{color:rgba(255,255,255,.26);filter:none;transform:scale(.8)}

/* the board */
.mj-stage{position:relative;z-index:2;flex:1;min-height:0;padding:2px 10px 4px}
.mj-stage::before{content:"";position:absolute;left:50%;top:50%;width:96%;height:88%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.2),rgba(255,255,255,.06) 62%,rgba(255,255,255,0));pointer-events:none}
.mj-board{position:absolute;inset:0;--tw:50px;--th:64px}
.t{position:absolute;left:0;top:0;width:var(--tw);height:var(--th);cursor:pointer;-webkit-tap-highlight-color:transparent;--rad:calc(var(--tw) * .17);--dx:calc(var(--tw) * .055);--dy:calc(var(--th) * .075)}
.t.gone{display:none}
.t.dead{pointer-events:none}
.t.up{z-index:30}
.ti{position:absolute;inset:0;transform-origin:50% 64%;transition:transform .22s cubic-bezier(.3,1.6,.5,1)}
.sd{position:absolute;left:var(--dx);top:var(--dy);width:100%;height:100%;border-radius:var(--rad);background:linear-gradient(165deg,var(--side1),var(--side2));box-shadow:0 calc(var(--th) * .05) calc(var(--tw) * .16) rgba(10,4,34,.46),inset 0 -2px 0 rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.28)}
.fc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:var(--rad);overflow:hidden;
  background:linear-gradient(158deg,#fffffd 0%,#fef8f0 46%,#f4e8de 100%);
  box-shadow:inset 0 1.5px 0 #fff,inset 1.5px 0 0 rgba(255,255,255,.85),inset 0 -3px 4px rgba(158,118,94,.24),inset -2px 0 3px rgba(158,118,94,.1),0 0 0 1px rgba(255,255,255,.5)}
.fc svg{position:relative;z-index:1;width:80%;height:auto;aspect-ratio:1;filter:drop-shadow(0 1px 1px rgba(120,80,60,.2))}
.fc::before{content:"";position:absolute;left:-14%;top:-12%;width:80%;height:56%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));pointer-events:none;z-index:0}
.fc::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(160deg,rgba(124,100,196,.24),rgba(84,62,160,.34));opacity:1;transition:opacity .3s;pointer-events:none}
.t.free .fc::after{opacity:0}
@media (hover:hover){.t.free:not(.sel):hover .ti{transform:translateY(calc(var(--th) * -.045)) scale(1.025)}}
.t.sel .ti{transform:translateY(calc(var(--th) * -.1)) scale(1.07)}
.t.sel .fc{box-shadow:inset 0 1.5px 0 #fff,inset 0 -3px 4px rgba(158,118,94,.2),0 0 0 3px var(--glow),0 0 28px 7px rgba(var(--halo),.6)}
.t.sel .sd{box-shadow:0 calc(var(--th) * .12) calc(var(--tw) * .24) rgba(10,4,34,.5),inset 0 -2px 0 rgba(0,0,0,.14)}
.t.hint{z-index:20}
.t.hint .fc{box-shadow:inset 0 1.5px 0 #fff,inset 0 -3px 4px rgba(158,118,94,.2),0 0 0 3px #ff8fc0,0 0 24px 6px rgba(255,143,192,.75);animation:mjHint 1s ease-in-out infinite}
.t.hint .ti{animation:mjHintLift 1s ease-in-out infinite}
@keyframes mjHint{50%{box-shadow:inset 0 1.5px 0 #fff,inset 0 -3px 4px rgba(158,118,94,.2),0 0 0 5px rgba(255,143,192,.55),0 0 34px 12px rgba(255,143,192,.85)}}
@keyframes mjHintLift{50%{transform:translateY(calc(var(--th) * -.06)) scale(1.04)}}
.t.blk{z-index:25}
.t.blk .fc{box-shadow:inset 0 1.5px 0 #fff,0 0 0 3px #ff7a9c,0 0 20px 5px rgba(255,122,156,.7)}
.t.blk .fc::after{opacity:0}

/* effects */
.mj-fx{position:absolute;inset:0;z-index:40;pointer-events:none}
.sp{position:absolute;display:block;clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%)}
.rg{position:absolute;width:76px;height:76px;border-radius:50%;border:3px solid rgba(255,255,255,.95);box-shadow:0 0 20px rgba(255,211,107,.85),inset 0 0 14px rgba(255,211,107,.6)}
.rg.sel{width:56px;height:56px;border-width:2px;border-color:rgba(255,255,255,.8);box-shadow:0 0 14px rgba(255,211,107,.7)}
.ft{position:absolute;white-space:nowrap;font:800 1.02rem/1 var(--display);color:#fff;text-shadow:0 2px 8px rgba(60,20,110,.75),0 0 14px rgba(255,211,107,.85)}
.ft.hot{color:#ffe27a;font-size:1.28rem}
.mj-toast{position:absolute;left:50%;bottom:10px;z-index:45;max-width:92%;padding:11px 18px;border-radius:99px;transform:translate(-50%,16px);opacity:0;pointer-events:none;text-align:center;background:rgba(28,14,62,.86);border:1px solid rgba(255,255,255,.24);box-shadow:0 12px 24px -10px rgba(10,4,34,.8);font:700 .9rem/1.25 var(--display);transition:opacity .28s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.mj-toast.on{opacity:1;transform:translate(-50%,0)}
.cf-lay{position:absolute;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.cf{position:absolute;top:0;border-radius:2px}
.cf.c1{border-radius:50%}
.cf.c2{border-radius:60% 0 60% 0}

/* the three helpers */
.mj-dock{position:relative;z-index:3;display:flex;justify-content:center;gap:12px;padding:4px 12px 10px}
.mj-act{display:grid;justify-items:center;align-content:center;gap:4px;width:84px;height:62px;padding:0;border-radius:20px;border:1px solid rgba(255,255,255,.3);background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.08));color:#fff;cursor:pointer;font:700 .72rem/1 var(--display);letter-spacing:.04em;box-shadow:0 12px 22px -12px rgba(14,6,40,.85),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(30,10,80,.25);transition:transform .15s cubic-bezier(.3,1.5,.5,1),opacity .2s}
.mj-act .ic{width:23px;height:23px}
.mj-act:active{transform:scale(.92)}
.mj-act:disabled{opacity:.42;cursor:default}
.mj-dock.need .mj-act:nth-child(2){border-color:#ffd36b;box-shadow:0 0 0 3px rgba(255,211,107,.5),0 0 26px 6px rgba(255,211,107,.6),inset 0 1px 0 rgba(255,255,255,.45);animation:mjNeed 1.1s ease-in-out infinite}
@keyframes mjNeed{50%{transform:translateY(-4px)}}
@media (min-width:821px){
  /* big screens: the helpers stand at the side, so the board gets the height */
  .mj-act{width:92px;height:66px}
  .mj-dock{position:absolute;right:22px;top:calc(50% - 58px);transform:translateY(-50%);flex-direction:column;gap:14px;padding:0;z-index:4}
  .mj-stage{padding:clamp(18px,4.6vh,46px) 134px clamp(8px,2.8vh,32px)}      /* room above and below, so the board sits in the middle of the window and does not lean on its bottom edge (the game adds 12px under the stage) */
}

/* the strip kept free for a wide banner (320x50 on phones, 728x90 on big screens) */
.mj-adslot{position:relative;z-index:3;flex:none;display:flex;align-items:center;justify-content:center;min-height:calc(54px + env(safe-area-inset-bottom,0px));padding:2px 0 env(safe-area-inset-bottom,0px);background:rgba(16,6,40,.38);border-top:1px solid rgba(255,255,255,.12)}
.mj-adslot .ad{margin:0;padding:2px 0}
.mj-adslot .ad .lbl{color:rgba(255,255,255,.55);margin-bottom:2px}
.mj-adslot.prev::before{content:"Ad space \00b7  320 \00d7  50";font:700 .72rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);border:1px dashed rgba(255,255,255,.35);border-radius:10px;padding:14px 22px}
@media (min-width:821px){.mj-adslot{min-height:100px}.mj-adslot.prev::before{content:"Ad space \00b7  728 \00d7  90";padding:30px 60px}}

/* sheets: win, menu, levels, backdrops, help */
.mj-sheet{position:absolute;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(14,6,36,.58);opacity:0;transition:opacity .22s}
.mj-sheet.on{opacity:1}
.mj-card{position:relative;width:min(460px,100%);max-height:90%;overflow:auto;padding:24px 20px calc(22px + env(safe-area-inset-bottom,0px));border-radius:30px 30px 0 0;background:linear-gradient(180deg,#3d2874,#2a1b52);border:1px solid rgba(255,255,255,.22);box-shadow:0 -20px 50px -20px rgba(10,4,34,.8),inset 0 1px 0 rgba(255,255,255,.2);transform:translateY(46px) scale(.98);transition:transform .38s cubic-bezier(.2,1.25,.4,1);text-align:center}
.mj-sheet.on .mj-card{transform:none}
.mj-card.tall{max-height:92%}
.mj-card h2{margin:0 0 4px;font:700 1.55rem/1.15 var(--display);color:#fff}
.mj-card .sub{margin:0 0 16px;color:rgba(255,255,255,.72);font-size:.92rem}
.sh-x{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:13px;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.sh-x .ic{width:19px;height:19px}
@media (min-width:821px){.mj-sheet{align-items:center}.mj-card{border-radius:30px}}
.mj-sheet.is-win{align-items:center;padding:14px}
.mj-sheet.is-win .mj-card{border-radius:32px;overflow:hidden;padding-top:26px}
.sh-glow{position:absolute;left:50%;top:-60px;width:360px;height:260px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,211,107,.5),rgba(255,143,192,.18) 60%,transparent);pointer-events:none}
.mj-card .eyebrow{position:relative;margin:0 0 4px;font:800 .72rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:#ffc4dd}
.mj-card.win h2{position:relative;font-size:2rem;background:linear-gradient(90deg,#fff,#ffe7a6,#ffc4dd);-webkit-background-clip:text;background-clip:text;color:transparent}
.ws-row{position:relative;display:flex;justify-content:center;gap:6px;margin:10px 0 6px}
.ws svg{width:62px;height:62px;color:rgba(255,255,255,.18)}
.ws:nth-child(2) svg{width:76px;height:76px;margin-top:-10px}
.ws.on svg{color:#ffd36b;filter:drop-shadow(0 0 14px rgba(255,211,107,.85));animation:mjStar .7s cubic-bezier(.2,1.7,.4,1) both;animation-delay:calc(.3s + var(--i) * .26s)}
@keyframes mjStar{0%{transform:scale(0) rotate(-60deg);opacity:0}60%{transform:scale(1.35) rotate(8deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.ws-stats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 4px}
.ws-stats>div{padding:10px 4px;border-radius:16px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ws-stats dt{font:700 .64rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.ws-stats dd{margin:6px 0 0;font:800 1.35rem/1 var(--display);font-variant-numeric:tabular-nums}
.nb{margin:10px 0 0;font:800 .8rem/1 var(--display);color:#ffd36b;letter-spacing:.04em}
.streak-b{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:9px 16px 9px 12px;border-radius:99px;background:linear-gradient(135deg,#ff9a56,#ff5f7e);box-shadow:0 10px 22px -10px rgba(255,95,126,.9),inset 0 1px 0 rgba(255,255,255,.4)}
.streak-b .ic{width:22px;height:22px;color:#fff3c4}
.streak-b b{font:800 1.3rem/1 var(--display)}
.streak-b span{font:700 .85rem/1 var(--display)}
.soon{margin:10px 0 0;color:rgba(255,255,255,.75);font-size:.88rem}
.soon b{font-variant-numeric:tabular-nums;color:#fff}
.unl{display:flex;align-items:center;gap:10px;margin:14px auto 0;padding:9px 14px 9px 9px;max-width:100%;border-radius:18px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,211,107,.5);font-size:.88rem;text-align:left}
.unl i{flex:none;width:34px;height:34px;border-radius:11px;box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.sh-btns{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.mj-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:15px 20px;border-radius:99px;border:0;cursor:pointer;color:#fff;font:700 1.02rem/1 var(--display);background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);transition:transform .15s cubic-bezier(.3,1.5,.5,1)}
.mj-btn:active{transform:scale(.97)}
.mj-btn .ic{width:19px;height:19px}
.mj-btn.pri{background:linear-gradient(135deg,#ff8fc0,#8a6fe0);box-shadow:0 14px 26px -10px rgba(138,111,224,.95),inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(60,20,140,.25)}
.mj-btn.ghost{background:transparent}
.mj-btn.danger{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(255,150,170,.7);color:#ffd0da}
.mj-row.quiet{margin-top:8px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:rgba(255,255,255,.82)}
.mj-row.quiet small{color:rgba(255,255,255,.55)}
.menu{display:grid;gap:8px;margin-top:14px;text-align:left}
.mj-row{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;border:0;border-radius:20px;cursor:pointer;color:#fff;text-align:left;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.06));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.mj-row>.ic{flex:none;width:36px;height:36px;padding:8px;border-radius:13px;background:rgba(255,255,255,.14)}
.mj-row span{flex:1;min-width:0}
.mj-row b{display:block;font:700 1rem/1.2 var(--display)}
.mj-row small{display:block;margin-top:2px;color:rgba(255,255,255,.7);font:500 .8rem/1.2 var(--display)}
.mj-row .fl{display:inline-flex;align-items:center;gap:3px;padding:4px 9px 4px 6px;border-radius:99px;background:rgba(255,160,60,.95);font:800 .85rem/1 var(--display);font-style:normal}
.mj-row .fl .ic{width:14px;height:14px}
.help{text-align:left;margin-top:10px}
.help p{margin:0 0 10px;color:rgba(255,255,255,.88);font-size:.95rem;line-height:1.5}
.help b{color:#ffd36b}
.lvgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;text-align:center}
.lv{position:relative;display:grid;place-items:center;aspect-ratio:1;padding:0 0 6px;border-radius:50%;border:0;cursor:pointer;color:#fff;background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.08));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28),0 8px 14px -10px rgba(10,4,34,.9)}
.lv b{font:800 1.1rem/1 var(--display)}
.lv.done{background:linear-gradient(160deg,#ff8fc0,#8a6fe0);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),0 8px 16px -8px rgba(138,111,224,.9)}
.lv.cur{box-shadow:0 0 0 3px #ffd36b,0 0 22px 4px rgba(255,211,107,.6);animation:mjCur 1.4s ease-in-out infinite}
@keyframes mjCur{50%{transform:scale(1.07)}}
.lv.lock{opacity:.45;cursor:default}
.lv .lk{width:18px;height:18px;margin-bottom:4px}
.ls{position:absolute;left:0;right:0;bottom:7px;display:flex;justify-content:center;gap:2px}
.ls i{width:7px;height:7px;background:rgba(255,255,255,.25);clip-path:polygon(50% 0,62% 36%,100% 40%,70% 62%,80% 100%,50% 76%,20% 100%,30% 62%,0 40%,38% 36%)}
.ls i.on{background:#ffd36b}
.themes{display:grid;gap:10px;text-align:left}
.th{display:flex;align-items:center;gap:14px;width:100%;padding:10px 12px 10px 10px;border:0;border-radius:20px;cursor:pointer;color:#fff;text-align:left;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.th i{flex:none;width:64px;height:64px;border-radius:16px;box-shadow:0 0 0 2px rgba(255,255,255,.4),0 10px 18px -10px rgba(10,4,34,.8)}
.th b{display:block;font:700 1.02rem/1.2 var(--display)}
.th small{display:flex;align-items:center;gap:5px;margin-top:3px;color:rgba(255,255,255,.72);font:600 .82rem/1.2 var(--display)}
.th small .ic{width:14px;height:14px}
.th.cur{box-shadow:inset 0 0 0 2px #ffd36b,0 0 22px -4px rgba(255,211,107,.6)}
.th.lock{opacity:.5;cursor:default}

/* small screens: the helpers sit a little tighter */
@media (max-width:380px),(max-height:640px){.mj-act{width:72px;height:54px}.mj-act .ic{width:20px;height:20px}.mj-stats{padding-bottom:4px}}