:root{
    --red:#E63946; --orange:#F4842C; --yellow:#FFC93C; --green:#2BA84A; --blue:#2274C8; --violet:#8E44AD;
    --ink:#1b1320; --paper:#FBF3E0; --kraft:#C89B6C; --gold:#F0B43C;
    --panel:#241a2e;
    --cursive:'Avenir Next','Trebuchet MS','Segoe UI',system-ui,sans-serif;
    /* premium container language, lifted straight from the hub button art -
       the serif stays exclusive to the hub containers via --display */
    --display:'Palatino Linotype','Book Antiqua',Georgia,'Times New Roman',serif;
    --vioHi:#662c9c; --vioMid:#4b1e7c; --vioLo:#31114f;      /* button field violets */
    --goldHi:#ffe1a1; --goldMid:#f0b43c; --goldLo:#8a5a10;   /* button ring golds */
    --hairline:rgba(240,180,60,.16);                          /* gold row dividers */
    --well:rgba(18,7,36,.55); --wellBorder:rgba(240,180,60,.3); /* inset violet wells */
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;height:100dvh;overflow:hidden;background:#0c0918;font-family:'Avenir Next','Trebuchet MS','Segoe UI',sans-serif;color:var(--paper);
    cursor:url(../assets/cursor.png) 3 2, auto;}
  /* clickable things get the sparkle pointer */
  a,button,.btn,.legalLink,.menuBtn,.avPick,.topicChip,.pwEye,.skipBtn,.authTab,.rm,.backLink,.inviteChip,.frBtn,label,select,summary,[role="button"]{
    cursor:url(../assets/cursor-pointer.png) 3 2, pointer;}
  input,textarea{cursor:text;}
  /* themed gold scrollbars */
  *{scrollbar-width:thin;scrollbar-color:var(--gold) #31114f;}
  ::-webkit-scrollbar{width:11px;height:11px;}
  ::-webkit-scrollbar-track{background:var(--well);border-radius:10px;}
  ::-webkit-scrollbar-thumb{background:linear-gradient(#F0B43C,#bf7f28);border-radius:10px;border:2px solid #31114f;}
  ::-webkit-scrollbar-thumb:hover{background:linear-gradient(#ffce5e,#F0B43C);}
  ::-webkit-scrollbar-corner{background:var(--well);}
  /* ALWAYS size the canvas to the stable LARGE viewport (lvh), never the dynamic dvh:
     dvh shrinks when the on-screen keyboard opens, which resized the WebGL compositor
     layer and LOST the GL context - the whole 3D scene went black while answering. lvh
     never changes for the keyboard or the address bar, so the context is never dropped. */
  #c3d{position:fixed;inset:0;width:100%;height:100%;height:100vh;height:100lvh;display:block;touch-action:none;}
  @media all and (display-mode: fullscreen), all and (display-mode: standalone){
    html,body{height:100lvh;}
  }

  .hand{font-family:var(--cursive);}

  /* ---------- generic overlay screens ---------- */
  /* canvas (#c3d) fills the whole cover-viewport including the notch/status strip; the
     screens keep their content clear of the notch/gesture areas via the safe-area insets */
  .screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:30;
    padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));}
  .hidden{display:none !important;}
  /* guest mirror: a same-phase panel re-render must not replay entry animations
     (card flips etc.) - only genuinely new phases animate in */
  #panel.noAnim *{animation:none !important;}

  /* ---------- logo ---------- */
  .titleLogo{
    width:min(440px,86vw);height:auto;user-select:none;-webkit-user-drag:none;
    filter:drop-shadow(0 12px 26px rgba(0,0,0,.55));
    animation:logoFloat 5s ease-in-out infinite;
  }
  @keyframes logoFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
  .logo{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;line-height:.95;user-select:none;}
  .logo span{
    font-family:var(--cursive);
    font-weight:900;font-size:clamp(44px,11vw,96px);
    -webkit-text-stroke:3px #14101a; text-stroke:3px #14101a;
    text-shadow:3px 4px 0 rgba(0,0,0,.45);
    display:inline-block;transform:rotate(var(--r,0deg));
  }
  .logo .sm{font-size:clamp(20px,4.5vw,38px);align-self:center;color:var(--paper);-webkit-text-stroke:2px #14101a;margin:0 8px;}
  .tagline{margin-top:10px;font-size:clamp(13px,3.2vw,17px);letter-spacing:.14em;text-transform:uppercase;color:#e9d8a8;text-align:center;}
  .credit{margin-top:6px;font-size:11px;color:#bfa9d8;text-align:center;letter-spacing:.05em;}

  /* ---------- buttons ---------- */
  .btn{
    appearance:none;border:none;cursor:pointer;
    font-family:var(--cursive);font-weight:800;
    font-size:clamp(16px,4vw,21px);
    color:#1b1320;background:var(--gold);
    padding:13px 30px;border-radius:14px;
    border:3px solid #14101a;
    box-shadow:0 5px 0 #14101a, 0 9px 18px rgba(0,0,0,.45);
    transition:transform .1s ease, box-shadow .1s ease, filter .1s ease;
    margin-top:18px;
  }
  @media (hover:hover){ .btn:hover{box-shadow:0 5px 0 #14101a, 0 9px 18px rgba(0,0,0,.45), 0 0 16px rgba(240,180,60,.5);filter:brightness(1.05);} }
  .btn:active{transform:translateY(4px);box-shadow:0 1px 0 #14101a;filter:brightness(1);}
  .btn.alt{background:#efe6f7;}
  .btn.small{font-size:14px;padding:8px 16px;box-shadow:0 3px 0 #14101a;margin-top:8px;}
  .btn:disabled{opacity:.45;cursor:default;}

  /* ---------- title screen ---------- */
  #title{background:radial-gradient(ellipse at 50% 32%, rgba(142,68,173,.38), rgba(8,5,16,.9) 72%);}

  /* ---------- setup ---------- */
  /* ---- classic card for auth, settings, in-play and utility sheets; the
          purple-and-gold premium language lives only on the hub's ornate
          screens (quests / streak / match room / leaderboard) ---- */
  .sheet,.sPanel{
    width:min(560px,94vw);max-height:88vh;overflow:auto;
    background:var(--panel);
    border:3px solid #14101a;border-radius:20px;
    box-shadow:0 0 0 6px rgba(247,239,220,.9), 0 0 0 9px #14101a, 0 18px 50px rgba(0,0,0,.6);
    padding:22px 22px 26px;position:relative;
  }
  .sheet h2,.sPanel h3{font-family:var(--cursive);font-weight:800;font-size:24px;margin:8px 0 14px;text-align:center;color:var(--gold);}
  /* ---- ornate container: the frame is Higgsfield art (gold ring, title plaque,
     side gems baked in); HTML content floats inside it and the real Summon a Match
     button breaks the bottom edge like the reference ---- */
  .sheet.ornate{
    border:none;box-shadow:none;border-radius:0;padding:0;overflow:visible;max-height:none;
    background:url(../assets/frame-quests.png) center/100% 100% no-repeat;
    width:min(470px, 94vw, calc(84vh * .711));aspect-ratio:569/800;position:relative;
    filter:drop-shadow(0 18px 40px rgba(0,0,0,.6));
  }
  /* all six seats pop in together on open, one small beat after the card appears */
  #slotGrid:not(.settled) .slotCard{ animation-delay:.12s; }
  /* quests + match room: the clean CSS card - #2D1050 field, flat gold gradient
     border flowing from the plaque's gold into the CTA's gold */
  #quests .sheet.ornate,#online .sheet.ornate,#shop .sheet.ornate{
    border-radius:30px;border:7px solid transparent;filter:none;
    background:linear-gradient(#2D1050,#2D1050) padding-box,
      linear-gradient(180deg,#F5D445 0%,#E9B62F 32%,#D89A20 68%,#C8881B 100%) border-box;
    box-shadow:0 0 0 2px #4a2f08, inset 0 0 0 2px rgba(255,228,158,.25),
      inset 0 -18px 40px rgba(12,3,26,.5), 0 18px 44px rgba(0,0,0,.6);
    aspect-ratio:569/800;width:min(470px, 94vw, calc(84vh * .711));
  }
  /* the plaque sits HALF OUT of the top edge (its side line centered on the
     border), full lobby-button size, shrinking only when the card is narrower */
  /* -3.5px = half the 7px border, so the plaque centers on the border's CENTER line */
  .qTitleArt{ position:absolute;top:-3.5px;left:50%;transform:translate(-50%,-50%);z-index:2;
    width:min(296px,64%);height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
  #quests .sheet.ornate .closeBtn,#online .sheet.ornate .closeBtn,#shop .sheet.ornate .closeBtn{ left:auto;right:16px;top:16px; }
  /* shop is a compact Coming Soon card - the Shop.png plaque half-out on the top border
     (via the shared .qTitleArt rule), much shorter than the tall quests frame */
  #shop .sheet.ornate{ aspect-ratio:1.22;width:min(430px, 92vw); }
  #shop .sheet.ornate #shopBody{ position:absolute;left:8%;right:8%;top:14%;bottom:9%;
    display:flex;align-items:center;justify-content:center;text-align:center; }
  .shopSoon{ position:relative;font-family:var(--display);font-weight:800;font-size:clamp(26px,8vw,40px);letter-spacing:.03em;
    background:linear-gradient(180deg,#ffedbc 8%,var(--goldMid) 55%,#c98f1e 92%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 2px 1px rgba(20,6,2,.65));
    animation:shopPop .4s cubic-bezier(.34,1.3,.64,1) both; }
  /* Coming Soon eases in with a gentle scale each time the shop opens */
  @keyframes shopPop{ from{ opacity:0;transform:scale(.85); } to{ opacity:1;transform:scale(1); } }
  /* gold sparkles twinkling around Coming Soon */
  .soonSpk{ position:absolute;font-style:normal;color:#ffd777;pointer-events:none;
    -webkit-text-fill-color:#ffd777;text-shadow:0 0 8px rgba(255,205,90,.95);
    animation:sparkTw 2.4s ease-in-out infinite; }
  /* alternating gold + violet, like the streak sparkles - not a flat wall of yellow */
  .soonSpk.violet{ color:#d9a6ff;-webkit-text-fill-color:#d9a6ff;text-shadow:0 0 8px rgba(200,120,255,.95); }
  /* a balanced, symmetric frame: equal distance at the four corners, gold/violet on the diagonals */
  .soonSpk.a{ left:-22px;top:-20px;font-size:15px; }
  .soonSpk.b{ right:-22px;top:-20px;font-size:11px;animation-delay:.9s; }
  .soonSpk.c{ right:-22px;bottom:-20px;font-size:14px;animation-delay:.5s; }
  .soonSpk.d{ left:-22px;bottom:-20px;font-size:10px;animation-delay:1.4s; }
  /* the room card: same corner rhythm as quests, height sized to the seat grid */
  #online .sheet.ornate{ aspect-ratio:.85;width:min(470px, 94vw, calc(86vh * .85)); }
  /* visible so a single seat's pop overshoot is never clipped; the ellipsis on names
     still prevents any real horizontal overflow, so no slide returns */
  #online .ornateBody{ overflow:visible; }
  #online .ornateBody *{ min-width:0; }
  #streak .sheet.ornate{ background-image:url(../assets/frame-streak.png);
    aspect-ratio:557/800;width:min(460px, 94vw, calc(84vh * .696)); }
  /* desktop is not mobile: let the frame breathe on big screens */
  @media (min-width:900px) and (min-height:700px){
    .sheet.ornate{ width:min(620px, 94vw, calc(88vh * .711)); }
    /* desktop quests + shop + match room: wider and shorter than the phone card */
    #quests .sheet.ornate{ aspect-ratio:1.04;width:min(640px, 94vw, calc(84vh * 1.04)); }
    #shop .sheet.ornate{ aspect-ratio:1.7;width:min(560px, 90vw); }
    /* settings + profile share the quests desktop width; sign-in is 18px less to offset its ring box-shadow */
    #settingsModal.hubMode .sPanel,.pfCard{ width:min(640px, 94vw, calc(84vh * 1.04)); }
    #auth .sheet{ width:min(622px, calc(94vw - 18px), calc(84vh * 1.04 - 18px)); }
    #online .sheet.ornate{ aspect-ratio:1.18;width:min(640px, 94vw, calc(82vh * 1.18)); }
    #online .sheet.ornate .ornateBody{ top:15%;bottom:13%; }
    #online .slotCard{ aspect-ratio:auto;height:150px; }
    #streak .sheet.ornate{ width:min(606px, 94vw, calc(88vh * .696)); }
    /* higher specificity than the later base .qHero img rule, or the mobile cap wins */
    .sheet.ornate #questsBody .qHero img{ width:min(33%,160px); }
    .sheet.ornate .qRow{ padding:16px 18px; }
    .sheet.ornate .qMain b{ font-size:16px; }
    .sheet.ornate .qChest{ width:62px;height:56px; }
  }
  /* crisp HTML title plaque laid exactly over the painted one - razor sharp
     lettering in the same serif as the Summon a Match art */
  .sheet.ornate>h2{
    display:flex;align-items:center;justify-content:center;position:absolute;z-index:2;
    left:50%;transform:translateX(-50%);margin:0;padding:0 30px;white-space:nowrap;
    border:3px solid transparent;border-radius:999px;
    background:linear-gradient(180deg,#7a3fb3,#4a1f7d 60%,#3a1663) padding-box,
      linear-gradient(180deg,var(--goldHi),var(--goldMid) 45%,var(--goldLo)) border-box;
    box-shadow:0 0 0 1px #4a2f08, 0 4px 10px rgba(0,0,0,.45), inset 0 1px 3px rgba(255,255,255,.22);
    font-family:var(--display);font-weight:800;letter-spacing:.02em;
    color:#f8cd6a;text-shadow:0 2px 2px rgba(60,20,0,.55);
    font-size:clamp(19px,5.2vw,27px);
  }
  #quests .sheet.ornate>h2{ top:1.5%;height:9.6%;min-width:62%; }
  #streak .sheet.ornate>h2{ top:3.1%;height:10%;min-width:64%; }
  /* bare X close: small, quiet and frameless, tucked in the violet field's top
     left, well away from the gold border */
  .sheet.ornate .closeBtn{ position:absolute;top:12%;left:11%;z-index:4;width:30px;height:30px;
    border:none;background:none;box-shadow:none;cursor:pointer;padding:0;
    color:rgba(240,180,60,.8);filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
    display:flex;align-items:center;justify-content:center;
    transition:transform .1s ease, color .15s ease; }
  .closeBtn:active{ transform:scale(.88); }
  /* hover glow must OUTRANK the three-class base rule, or it silently loses */
  @media (hover:hover){ .sheet.ornate .closeBtn:hover,.stPage .closeBtn:hover,.closeBtn:hover{ color:#ffd777 !important;
    filter:drop-shadow(0 0 8px rgba(255,205,90,.95)) drop-shadow(0 0 18px rgba(240,180,60,.5)) !important; } }
  /* the Sign Out image button breaks the bottom border of the lobby settings exactly
     like the Summon a Match CTA in quests + match room (bottom:-3.5px, half the ring) */
  .setSignOut{ display:none; }
  #settingsModal.hubMode .setSignOut{ display:block;position:absolute;z-index:3;border:none;padding:0;cursor:pointer;
    left:50%;top:auto;bottom:-3.5px;transform:translate(-50%,50%);
    width:min(224px,52%);height:auto;aspect-ratio:497/164;
    background:url(../assets/images/Sign%20Out%20Button.png) center/100% 100% no-repeat;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));transition:filter .15s ease, transform .1s ease; }
  #settingsModal.hubMode .setSignOut:active{ transform:translate(-50%,50%) scale(.96); }
  @media (hover:hover){ #settingsModal.hubMode .setSignOut:hover{
    filter:drop-shadow(0 0 10px rgba(240,180,60,.6)) drop-shadow(0 4px 10px rgba(0,0,0,.45)); } }
  /* overflow VISIBLE so the pop's overshoot is never clipped at the sides - the
     scroll + 3 rows are sized to fit, so no scrollbar is ever needed */
  .sheet.ornate #questsBody{ position:absolute;left:7%;right:7%;top:9.5%;bottom:11%;overflow:visible;
    padding:2px 4px;display:flex;flex-direction:column;gap:2px; }
  .sheet.ornate .ornateBody{ position:absolute;left:9%;right:9%;top:14.5%;bottom:25%;
    overflow:auto;padding:2px 4px;display:flex;flex-direction:column;justify-content:center;gap:6px; }
  #online .sheet.ornate .ornateBody{ left:7%;right:7%;top:16.5%;bottom:16%;justify-content:flex-start; }
  /* friends rows (inside the match room) match the room's plaque rows exactly */
  #online .frRow{ border:2px solid transparent;border-radius:14px;padding:8px 11px;margin:6px 0;
    background:linear-gradient(180deg,#5b2a8e,#3f1a6b) padding-box,
      linear-gradient(180deg,var(--goldHi),var(--goldMid) 40%,var(--goldLo)) border-box;
    box-shadow:0 3px 8px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,228,158,.22);
    animation:stPop .35s cubic-bezier(.34,1.56,.64,1) both; }
  #online .frWho{ color:#f4ebfd; }
  #online .frWho small{ color:#c3a9e2; }
  #online .frBtn{ background:linear-gradient(180deg,#ffe1a1,#f0b43c 55%,#d0942a);color:#3a2408;
    border:1.5px solid #8a5a10;border-radius:10px;font-weight:700;padding:4px 10px; }
  #online .note{ color:#dccbf2; }
  .roomChips{ justify-content:center;flex-wrap:wrap;margin:8px 0 4px; }
  /* containers scroll without showing scrollbars */
  .sheet,.sPanel,.ornateBody,.lbBody,.voiceMenu,#questsBody{ scrollbar-width:none; }
  .sheet::-webkit-scrollbar,.sPanel::-webkit-scrollbar,.ornateBody::-webkit-scrollbar,
  .lbBody::-webkit-scrollbar,.voiceMenu::-webkit-scrollbar,#questsBody::-webkit-scrollbar{
    display:none;width:0;height:0; }
  /* quest rows restyled as mini plaques of the frame itself */
  /* each row springs in with a real pop, cascading AFTER the scroll (delays set in JS) */
  .sheet.ornate .qRow{ animation:qRowPop .5s cubic-bezier(.22,.9,.3,1.35) both;will-change:transform,opacity;border:2px solid transparent;border-radius:14px;padding:13px 14px;margin:6px 0;
    background:linear-gradient(180deg,#5b2a8e,#3f1a6b) padding-box,
      linear-gradient(180deg,var(--goldHi),var(--goldMid) 40%,var(--goldLo)) border-box;
    box-shadow:0 3px 8px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,228,158,.25); }
  .sheet.ornate .qRow.hit{ box-shadow:0 3px 8px rgba(0,0,0,.4), 0 0 14px rgba(240,180,60,.55),
    inset 0 1px 2px rgba(255,228,158,.3); }
  /* the REAL lobby Summon a Match art sits over the painted plaque, fully
     covering it - always crisp, identical on every container */
  .ornateSummon{ position:absolute;z-index:3;border:none;padding:0;cursor:pointer;
    background:url(../assets/btn-summon.png) center/100% 100% no-repeat;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
    transition:filter .15s ease, transform .1s ease; }
  /* full lobby size, centered on the bottom border's CENTER line (-3.5px = half of 7px) */
  #quests .ornateSummon,#online .ornateSummon{ left:50%;top:auto;bottom:-3.5px;transform:translate(-50%,50%);
    width:min(340px,88%);height:auto;aspect-ratio:500/165; }
  @media (hover:hover){ #quests .ornateSummon:hover,#online .ornateSummon:hover{ transform:translate(-50%,50%); } }
  #quests .ornateSummon:active,#online .ornateSummon:active{ transform:translate(-50%,50%) scale(.97); }
  #streak .ornateSummon{ left:11%;width:78%;top:75.8%;height:17.6%; }
  @media (hover:hover){ .ornateSummon:hover{
    filter:brightness(1.1) drop-shadow(0 0 12px rgba(240,180,60,.85)) drop-shadow(0 0 26px rgba(240,180,60,.4)); } }
  .ornateSummon:active{ transform:scale(.97); }
  .sheet p.note{font-size:13px;color:#dccbf2;text-align:center;margin-bottom:14px;}
  .pRow{display:flex;align-items:center;gap:10px;margin:8px 0;}
  .pRow .dot{width:26px;height:26px;border-radius:50%;border:3px solid #14101a;flex:none;}
  .pRow input{
    flex:1;background:var(--well);border:2px solid var(--wellBorder);border-radius:10px;color:var(--paper);
    padding:10px 12px;font-size:16px;font-family:inherit;outline:none;
  }
  .pRow input:focus{border-color:var(--gold);}
  .pRow .rm{background:none;border:none;color:#9b7fc0;font-size:20px;cursor:pointer;padding:4px 8px;}
  .countRow{display:flex;justify-content:center;gap:10px;margin:6px 0 12px;}

  /* ---------- HUD ---------- */
  #hud{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;gap:6px;padding:8px;overflow-x:auto;
       background:linear-gradient(rgba(16,10,22,.88), rgba(16,10,22,0));}
  .pCard{
    flex:1;min-width:88px;background:rgba(30,20,42,.92);border:2px solid #3c2a55;border-radius:12px;
    padding:6px 8px;text-align:center;position:relative;transition:border-color .3s, box-shadow .3s;
  }
  .pCard.active{border-color:var(--gold);box-shadow:0 0 14px rgba(240,180,60,.5);}
  .pCard.done::after{content:"★";position:absolute;top:-9px;right:-6px;color:var(--gold);font-size:16px;text-shadow:0 0 6px #000;}
  .pCard .nm{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pCard .nm i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;border:1px solid #000;}
  .pCard .nug{font-family:var(--cursive);font-size:17px;color:var(--gold);}
  .pCard .nug small{font-size:10px;color:#cdbbe2;}

  #phaseTag{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:20;
    font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#e9d8a8;
    background:rgba(20,12,28,.7);padding:4px 14px;border-radius:20px;border:1px solid #4a3563;
    white-space:nowrap;} /* one line always, even on narrow phones */

  /* ---------- bottom panel (the classic in-game ink card, per feedback -
       the premium violet skin stays on the hub containers; in a match the darker
       card keeps the questions readable. Fonts/buttons/toasts keep the new look) ---------- */
  #panel{
    position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:25;
    width:min(540px,95vw);
    background:var(--panel);border:3px solid #14101a;border-radius:18px;
    box-shadow:0 0 0 5px rgba(247,239,220,.92),0 0 0 8px #14101a,0 14px 40px rgba(0,0,0,.6);
    padding:16px 18px;text-align:center;max-height:72vh;overflow:auto;
  }
  #panel h3{font-family:var(--cursive);font-weight:800;font-size:20px;color:var(--gold);margin-bottom:6px;
    overflow-wrap:break-word;word-break:break-word;}
  #panel p{font-size:15px;color:#e7dcf3;overflow-wrap:break-word;word-break:break-word;}
  #panel .defRead,#panel #ansMsg{overflow-wrap:break-word;word-break:break-word;}
  #panel .sub{font-size:12.5px;color:#bca6d6;margin-top:4px;}

  .diceRow{display:flex;justify-content:center;align-items:center;gap:18px;margin:10px 0 4px;min-height:64px;}
  .dieBadge{
    width:58px;height:58px;border-radius:14px;border:3px solid #14101a;background:var(--paper);color:#14101a;
    display:flex;align-items:center;justify-content:center;font-family:var(--cursive);
    font-size:28px;font-weight:900;box-shadow:0 4px 0 #14101a;
  }
  .dieBadge.d12{border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#efe0ff;
    clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border-radius:0;width:62px;height:62px;box-shadow:none;
    outline:3px solid #14101a;}
  .diceX{font-size:24px;color:#cdbbe2;font-weight:900;}
  .diceEq{font-family:var(--cursive);font-size:30px;color:var(--gold);}

  /* ---------- memorize cards ---------- */
  #memWrap{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:12px 0;}
  .qcard{ /* thin frame; per-card darker-shade colors come inline */
    width:min(230px,46%);min-width:165px;border-radius:14px;border:2px solid var(--gold);
    background:var(--paper);color:#1b1320;text-align:left;overflow:hidden;
    box-shadow:0 3px 0 #8a6a1e, 0 8px 14px rgba(0,0,0,.3);
  }
  .qcard .ch{padding:6px 10px;font-family:var(--cursive);font-weight:900;color:#fff;
    text-shadow:1px 1px 0 #0006;display:flex;justify-content:space-between;align-items:center;font-size:14px;
    border-bottom:2px solid var(--gold);} /* thin divider, per-card color set inline */
  .qcard .ch .val{background:rgba(0,0,0,.25);padding:1px 8px;border-radius:10px;font-size:12px;}
  .qcard .term{font-family:var(--cursive);font-weight:900;
    padding:12px 10px;text-transform:capitalize;text-align:center;line-height:1.18;
    overflow-wrap:break-word;word-break:break-word;hyphens:auto;
    font-size:clamp(15px,4.4vw,21px);
    color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);} /* full-color cards: light text */
  .qcard .def{font-size:13.5px;line-height:1.35;padding:2px 12px 12px;color:#3c2f47;}

  /* hourglass */
  #hourRow{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:4px;}
  .hg{width:30px;height:44px;position:relative;flex:none;}
  .hg::before,.hg::after{content:"";position:absolute;left:0;width:30px;height:20px;border:3px solid var(--gold);}
  .hg::before{top:0;border-radius:6px 6px 0 0;border-bottom:none;clip-path:polygon(0 0,100% 0,55% 100%,45% 100%);}
  .hg::after{bottom:0;border-radius:0 0 6px 6px;border-top:none;clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);}
  .hg .sand{position:absolute;left:50%;top:6px;width:3px;height:32px;background:var(--gold);transform:translateX(-50%);animation:sand 1s linear infinite;}
  @keyframes sand{0%{opacity:1}90%{opacity:1}100%{opacity:.2}}
  #timerBar{height:10px;width:min(300px,70vw);background:var(--well);border:2px solid #14101a;border-radius:8px;overflow:hidden;}
  #timerFill{height:100%;width:100%;background:linear-gradient(90deg,var(--green),var(--yellow),var(--red));transition:width .25s linear;}
  #timerNum{font-family:var(--cursive);font-size:22px;color:var(--gold);min-width:48px;}

  /* ---------- quiz ---------- */
  @keyframes pop{50%{transform:scale(1.07);}}
  @keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
  .defRead{min-height:54px;font-size:16px;}

  /* ---------- buzz (part 2) ---------- */
  #buzzRow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px;}
  .buzzBtn{
    flex:1;min-width:110px;max-width:170px;
    border:3px solid #14101a;border-radius:22px;padding:12px 8px;
    font-family:var(--cursive);font-weight:900;font-size:15px;color:#fff;
    text-shadow:1px 1px 0 #0008;cursor:pointer;box-shadow:0 5px 0 #14101a;
    overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;word-break:break-word;
  }
  .buzzBtn:active{transform:translateY(4px);box-shadow:0 1px 0 #14101a;}
  .buzzBtn:disabled{opacity:.35;}
  .bellIcon{font-size:20px;display:block;}

  /* ---------- toast / nugget fly ---------- */
  #toast{position:fixed;top:96px;left:50%;transform:translateX(-50%);z-index:40;
    background:#14101a;color:var(--gold);border:2px solid var(--gold);border-radius:20px;
    padding:8px 22px;font-family:var(--cursive);font-size:17px;
    max-width:92vw;text-align:center;overflow-wrap:break-word;word-break:break-word;
    opacity:0;pointer-events:none;transition:opacity .3s, transform .3s;}
  #toast.show{opacity:1;transform:translateX(-50%) translateY(6px);}
  /* on the card screens the toast sits ABOVE the title plaque, never over it */
  body:has(#quests:not(.hidden)) #toast,
  body:has(#online:not(.hidden)) #toast,
  body:has(#streak:not(.hidden)) #toast{ top:max(12px, env(safe-area-inset-top)); }

  /* ---------- end screen ---------- */
  #end .sheet{text-align:center;}
  .rankRow{display:flex;align-items:center;gap:10px;background:var(--well);border:2px solid var(--wellBorder);border-radius:12px;
    padding:10px 14px;margin:8px 0;font-size:16px;animation:stPop .35s cubic-bezier(.34,1.56,.64,1) both;}
  .rankRow.first{border-color:var(--gold);
    background:linear-gradient(180deg,rgba(240,180,60,.26),rgba(240,180,60,.08)),var(--well);
    box-shadow:inset 0 0 12px rgba(240,180,60,.2), 0 0 16px rgba(240,180,60,.35);}
  .rankRow .pos{font-family:var(--cursive);font-size:20px;width:30px;color:var(--gold);}
  .rankRow .rn{flex:1;text-align:left;font-weight:700;}
  .rankRow .rv{font-family:var(--cursive);color:var(--gold);}

  /* mute + help */
  #cornerBtns{position:fixed;bottom:15px;right:15px;z-index:50;display:flex;gap:8px;
    transition:opacity .25s;}
  /* the in-game settings icon everywhere: a bare, quiet, slightly transparent
     gear glyph - identical on mobile and desktop (the art button lives in the hub) */
  .iconBtn{width:42px;height:42px;border:none;background:none;box-shadow:none;padding:0;
    color:#f7efdc;cursor:pointer; /* the game panel's cream ring color, not stark white */
    opacity:.85; /* a touch transparent so it sits quietly over the board */
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.7));
    display:flex;align-items:center;justify-content:center;
    transition:transform .1s ease, color .15s ease;}
  .iconBtn img{display:none;}
  .iconBtn svg{display:block;width:24px;height:24px;}
  @media (hover:hover){ .iconBtn:hover{ color:#ffd777; } }
  .iconBtn:active{transform:scale(.92);color:#ffd777;}
  /* phones: a little smaller, hug the edge, and step aside (fade out, untouchable)
     whenever a countdown or answer box is on the panel so it never covers the timer */
  @media (max-width:820px){
    #cornerBtns{ right:max(9px, env(safe-area-inset-right)); }
    .iconBtn{ width:36px;height:36px; }
    .iconBtn svg{ width:20px;height:20px; }
    body:has(#panel:not(.hidden) :is(.ansTimerBar,#timerBar,#ansIn,#botIn)) #cornerBtns{
      opacity:0;pointer-events:none;}
  }

  /* confetti canvas */
  #confetti{position:fixed;inset:0;pointer-events:none;z-index:60;}

  /* ---------- platform: lobby / account / leaderboard ---------- */
  .chip{display:flex;align-items:center;gap:12px;background:var(--well);border:2px solid var(--wellBorder);border-radius:14px;padding:12px 14px;margin-bottom:14px;}
  .chip .av{font-size:34px;line-height:1;filter:drop-shadow(0 2px 2px #0008);}
  .chip .who{flex:1;text-align:left;}
  .chip .who b{font-size:17px;display:block;}
  .chip .who small{color:#bfa9d8;font-size:12px;}
  .chip .rt{text-align:right;}
  .chip .rt .num{font-family:var(--cursive);font-size:22px;color:var(--gold);}
  .chip .rt small{display:block;font-size:10px;color:#bfa9d8;letter-spacing:.08em;text-transform:uppercase;}
  .statRow{display:flex;gap:8px;margin:-6px 0 12px;}
  .statRow div{flex:1;background:var(--well);border:2px solid var(--wellBorder);border-radius:10px;padding:6px;text-align:center;}
  .statRow b{display:block;font-family:var(--cursive);color:var(--gold);font-size:16px;}
  .statRow small{font-size:10px;color:#bfa9d8;text-transform:uppercase;letter-spacing:.06em;}
  .menuGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .menuBtn{border:3px solid #14101a;border-radius:14px;background:var(--paper);color:#1b1320;cursor:pointer;
    padding:14px 8px;font-family:var(--cursive);font-weight:900;font-size:15px;
    box-shadow:0 4px 0 #14101a;transition:transform .1s ease, box-shadow .1s ease, filter .1s ease;}
  @media (hover:hover){ .menuBtn:hover{box-shadow:0 4px 0 #14101a, 0 0 14px rgba(240,180,60,.5);filter:brightness(1.04);} }
  .menuBtn:active{transform:translateY(3px);box-shadow:0 1px 0 #14101a;filter:brightness(1);}
  .menuBtn .ico{display:block;font-size:26px;margin-bottom:4px;}
  .menuBtn.gold{background:var(--gold);}
  .worldNote{margin-top:12px;font-size:12px;color:#bfa9d8;text-align:center;}
  .avGrid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0 14px;}
  .avPick{font-size:26px;width:48px;height:48px;border-radius:12px;border:3px solid var(--wellBorder);background:var(--well);cursor:pointer;}
  .avPick.sel{border-color:var(--gold);background:linear-gradient(180deg,rgba(240,180,60,.28),rgba(240,180,60,.1)),var(--well);box-shadow:0 0 10px rgba(240,180,60,.5);}
  .nameIn{width:100%;background:var(--well);border:2px solid var(--wellBorder);border-radius:10px;color:var(--paper);
    padding:12px;font-size:17px;text-align:center;font-family:inherit;outline:none;margin-bottom:4px;}
  .nameIn:focus{border-color:var(--gold);}
  .lbRow{display:flex;align-items:center;gap:10px;background:var(--well);border:2px solid var(--wellBorder);border-radius:12px;
    padding:8px 12px;margin:6px 0;font-size:14px;animation:stPop .35s cubic-bezier(.34,1.56,.64,1) both;}
  .lbRow.me{border-color:var(--gold);box-shadow:inset 0 0 12px rgba(240,180,60,.2), 0 0 10px rgba(240,180,60,.35);}
  .lbRow .pos{font-family:var(--display);font-weight:800;width:30px;color:var(--gold);font-size:16px;}
  .lbRow .av{font-size:20px;}
  .lbRow .nm{flex:1;text-align:left;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .lbRow .nm small{display:block;font-weight:400;font-size:10px;color:#bfa9d8;}
  .lbRow .rv{font-family:var(--cursive);color:var(--gold);}
  .tierRow{display:flex;gap:8px;margin:10px 0;}
  .tierBtn{flex:1;border:3px solid var(--wellBorder);border-radius:12px;background:var(--well);color:var(--paper);cursor:pointer;
    padding:10px 4px;font-family:var(--cursive);font-size:13px;}
  .tierBtn .ico{display:block;font-size:22px;}
  .tierBtn small{display:block;font-size:10px;color:#bfa9d8;}
  .tierBtn.sel{border-color:var(--gold);background:linear-gradient(180deg,rgba(240,180,60,.28),rgba(240,180,60,.1)),var(--well);}
  .buzzBtn.botB{opacity:.55;cursor:default;}
  .buzzBtn.botBuzzed{opacity:1;box-shadow:0 0 18px #fff8;}
  .deltaRow{margin:8px 0 2px;font-family:var(--cursive);font-size:18px;}
  .deltaRow .up{color:#7ee08a;} .deltaRow .dn{color:#ff7b7b;}
  .backLink{background:none;border:none;color:#bfa9d8;font-size:13px;cursor:pointer;margin-top:12px;text-decoration:underline;}
  /* round gold-ringed icon back button, pinned to the sheet's top-left; sticky so
     it stays reachable while a long sheet scrolls */
  .backBtn{ width:42px;height:42px;border-radius:50%;flex:none;cursor:pointer;padding:0;
    border:3px solid transparent;color:#f8cd6a;
    background:linear-gradient(180deg,#6b2fa0,#47207a) padding-box,
      linear-gradient(180deg,var(--goldHi),var(--goldMid) 40%,var(--goldLo)) border-box;
    box-shadow:0 0 0 2px #4a2f08, 0 4px 10px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,228,158,.3);
    display:flex;align-items:center;justify-content:center;
    transition:transform .1s ease, filter .12s ease;}
  .sheet .backBtn{ position:sticky;top:0;float:left;margin:-6px 0 -42px -6px;z-index:6; }
  .backBtn:active{ transform:scale(.92); }
  @media (hover:hover){ .backBtn:hover{ filter:brightness(1.15) drop-shadow(0 0 8px rgba(240,180,60,.7)); } }

  #story{background:radial-gradient(ellipse at 50% 40%, rgba(34,18,52,.88), rgba(6,4,12,.95) 75%);}
  /* ---------- identification answering ---------- */
  .ansRow{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:10px;}
  .ansIn{flex:1;max-width:300px;min-width:0;background:var(--well);border:3px solid var(--wellBorder);border-radius:12px;color:var(--paper);
    padding:12px 14px;font-size:16px;font-family:var(--cursive);outline:none;text-align:center;}
    /* min-width:0 stops the flex input from overflowing left before layout settles on mobile */
  .ansIn:focus{border-color:var(--gold);box-shadow:0 0 12px rgba(240,180,60,.35);}
  .ansIn.good{border-color:var(--green);background:#10241a;}
  .ansIn.bad{border-color:var(--red);background:#2a1216;animation:shake .35s;}
  .ansIn.lockedShake{animation:shake .35s;}
  .ansTimerBar{height:8px;width:min(320px,82%);margin:10px auto 0;background:var(--well);border:2px solid #14101a;border-radius:8px;overflow:hidden;}
  .ansFill{height:100%;width:100%;background:linear-gradient(90deg,var(--green),var(--yellow));transition:width .1s linear;}
  /* ---------- magic ---------- */
  .spark{position:fixed;z-index:55;pointer-events:none;font-size:18px;animation:fly .9s ease-out forwards;text-shadow:0 0 8px currentColor;}
  @keyframes fly{to{transform:translate(var(--dx),var(--dy)) scale(.2) rotate(200deg);opacity:0;}}
  .qcard{animation:flipIn .5s both;}
  @keyframes flipIn{from{transform:rotateY(80deg) scale(.85);opacity:0;}}
  /* cinematic video intro */
  #story{padding:0;background:#000;}
  .storyVid{width:100%;height:100%;object-fit:cover;object-position:center;background:#000;display:block;}
  .skipBtn{position:absolute;right:14px;bottom:16px;z-index:6;
    background:none;border:none;padding:6px 8px;
    color:rgba(255,255,255,.5);font-size:13px;font-weight:600;letter-spacing:.05em;
    cursor:pointer;text-shadow:0 1px 5px rgba(0,0,0,.8);
    opacity:0;pointer-events:none;transition:opacity .7s ease;}
  .skipBtn.show{opacity:1;pointer-events:auto;}
  .skipBtn:hover{color:#fff;}
  /* the title-screen replay-intro play icon: same corner, size and transparency as Skip */
  .titlePlay{ display:flex;align-items:center;justify-content:center;padding:5px; }
  .titlePlay svg{ display:block; }
  .btn.wish{background:linear-gradient(135deg,#FFE08A,#F0B43C);}
  #winTitle{background:linear-gradient(90deg,#F0B43C,#fff3c4,#F0B43C);background-size:200% auto;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 2.5s linear infinite;}
  @keyframes shimmer{to{background-position:200% center;}}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001s !important;transition-duration:.001s !important;}
  }

  /* ---------- topic wheel (3D, in-scene — these style its #panel controls) ---------- */
  .wheelLabel{font-family:var(--cursive);font-size:clamp(16px,4.5vw,24px);
    color:var(--gold);text-align:center;margin:8px 0 2px;min-height:32px;letter-spacing:.05em;}
  .wheelSub{font-size:11px;color:#bfa9d8;text-align:center;margin-bottom:10px;letter-spacing:.06em;text-transform:uppercase;}
  .topicChips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:6px 0 14px;}
  .topicChip{border:2px solid var(--wellBorder);border-radius:20px;background:var(--well);color:var(--paper);
    cursor:pointer;padding:6px 12px;font-family:var(--cursive);font-size:12px;
    transition:background .15s,border-color .15s;}
  .topicChip.sel{border-color:var(--gold);background:linear-gradient(180deg,rgba(240,180,60,.28),rgba(240,180,60,.1)),var(--well);}
  /* read-only chips: a preview of the realms — the wheel decides for free seekers */
  .topicChip.ro{opacity:.72;}
  .topicChip.ro.sel{opacity:1;box-shadow:0 0 10px rgba(240,180,60,.45);}
  /* ---- auth + friends ---- */
  .gBtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:4px;
    background:#fff;color:#1f1f1f;padding:12px 18px;font-size:16px;font-weight:700;}
  .gBtn svg{flex:none;}
  .authOr{display:flex;align-items:center;gap:10px;color:#9b7fc0;font-size:12px;margin:14px 0 6px;}
  .authOr::before,.authOr::after{content:"";flex:1;height:1px;background:#4a3563;}
  #auth .nameIn{text-align:left;}
  /* the primary Sign In CTA: full width to match Continue with Google + the textboxes,
     and pulled close to the password field (empty error line collapses so no gap) */
  #btnAuthGo{ width:100%; margin-top:8px; }
  #authNote:empty{ margin:0; }
  /* sign-in card: outer edges line up with the quests container - the width is quests'
     width MINUS 18px, because the cream+black ring is a box-shadow that paints ~9px
     past each edge without counting toward the width. Top/bottom trimmed a little (not
     as tight as before) so it hugs the content without feeling cramped. */
  #auth .sheet{ width:min(452px, calc(94vw - 18px), calc(84vh * .711 - 18px)); padding:18px 22px 20px; }
  #auth .sheet h2{ margin:6px 0 14px; }
  #auth #authHint{ margin-bottom:0; }
  .legalLink{color:inherit;text-decoration:underline;cursor:pointer;}
  .legalLink:hover{color:var(--gold);}
  .sepMob{display:none;} /* the full sentence with "&" everywhere; sepMob is unused now */
  #authHint{ font-size:12px; }
  #legal{z-index:60;background:rgba(6,4,12,.8);}
  .legalSheet{width:min(620px,94vw);max-height:88vh;display:flex;flex-direction:column;text-align:left;}
  .legalSheet h2{text-align:center;}
  .legalBody{overflow:auto;text-align:left;font-size:13.5px;line-height:1.55;color:#d9ccec;padding:2px 6px 6px;margin:8px 0;}
  .legalBody h3{color:var(--gold);font-size:15px;margin:14px 0 5px;}
  .legalBody p{margin:0 0 8px;}
  .legalBody ul{margin:0 0 9px 18px;}
  .legalBody li{margin:4px 0;}
  .legalBody .upd{color:#9b85bf;font-size:12px;margin-bottom:10px;}
  #btnAuthGo{padding:12px 18px;font-size:16px;margin-top:8px;} /* match the Google button's height */
  .pwWrap{position:relative;}
  .pwWrap .nameIn{padding-right:46px;}
  .pwEye{position:absolute;right:8px;top:50%;transform:translateY(-50%);
    background:none;border:none;cursor:pointer;color:#9b85bf;padding:6px;display:flex;line-height:0;
    opacity:0;pointer-events:none;transition:opacity .18s;}
  .pwWrap.eyeShow .pwEye{opacity:1;pointer-events:auto;}
  .pwEye:hover{color:var(--paper);}
  .pwEye .eyeSlash{display:none;}
  .pwEye.on .eyeSlash{display:block;}
  .authTabs{display:flex;gap:8px;justify-content:center;margin:6px 0 12px;}
  .authTab{flex:1;max-width:160px;border:2px solid var(--wellBorder);background:var(--well);color:var(--paper);
    border-radius:10px;padding:8px;cursor:pointer;font-family:inherit;font-size:14px;}
  .authTab.sel{border-color:var(--gold);background:linear-gradient(180deg,rgba(240,180,60,.28),rgba(240,180,60,.1)),var(--well);color:var(--gold);}
  #authForm .nameIn,#auth .nameIn{margin:5px 0;}
  .addRow{display:flex;gap:8px;align-items:center;margin:6px 0 12px;}
  .frH{font-family:var(--cursive);color:var(--gold);font-size:15px;margin:14px 0 6px;text-align:left;}
  .frRow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid #2a1f3a;text-align:left;}
  .frWho{font-size:14px;color:#e7dcf3;} .frWho small{color:#9b86b8;}
  .frBtn{background:var(--well);border:1.5px solid var(--wellBorder);color:var(--gold);border-radius:8px;
    font-size:11px;padding:3px 8px;font-family:inherit;cursor:pointer;}
  .frBtn:active{transform:scale(.95);}
  .inviteChips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:6px 0 10px;}
  .inviteChip{border:2px solid var(--wellBorder);border-radius:18px;background:var(--well);color:var(--paper);
    cursor:pointer;padding:6px 12px;font-family:inherit;font-size:13px;}
  .inviteChip.sel{border-color:var(--green);background:#10241a;}
  /* ---- online room ---- */
  .roomCode{font-size:15px;color:#e7dcf3;margin:6px 0;}
  .roomCode b{font-family:var(--cursive);color:var(--gold);font-size:24px;letter-spacing:3px;}
  .roomList{margin:10px 0;}
  .roomP{padding:8px 4px;border-bottom:1px solid #2a1f3a;font-size:15px;text-align:left;}
  .roomP small{color:#9b86b8;}
  .joinRow{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:14px;border-top:1px solid #2a1f3a;padding-top:12px;}
  .joinRow .nameIn{max-width:180px;}
  .topicChip.locked{opacity:.6;border-style:dashed;}
  .topicChip.locked.sel{opacity:.85;}
  .lockPanel{border:2px dashed var(--gold);border-radius:12px;background:var(--well);
    padding:14px;text-align:center;font-size:13px;line-height:1.5;color:var(--paper);}
  .customForm{padding:6px 0;}

  /* ---------- settings / confirm modals (share the premium .sPanel skin) ---------- */
  #settingsModal,#quitModal,#delModal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;}
  /* the quit + delete confirms keep the plain dark scrim */
  #quitModal,#delModal{ background:rgba(0,0,0,.55);backdrop-filter:blur(4px); }
  /* settings matches the quests + match room backdrop: softly blurred, dimmed board */
  #settingsModal{z-index:80;background:rgba(10,4,20,.35);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
  #quitModal,#delModal{z-index:90;}
  #settingsModal .sPanel{width:min(460px,96vw);max-height:min(640px,88vh);padding:18px 20px 22px;}
  #quitModal .sPanel,#delModal .sPanel{width:min(400px,92vw);padding:18px 20px 22px;}
  .sPanel h3{font-size:20px;margin:2px 0 10px;}
  .qNote{font-size:14px;color:#dccbf2;text-align:center;margin-bottom:6px;}
  .sRow{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--hairline);}
  .sRow:last-child{border-bottom:none;padding-top:12px;}
  .sLabel{font-size:15px;color:#f0e6fb;display:flex;align-items:center;gap:9px;}
  .sLabel svg{flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));}
  .sToggle{width:46px;height:24px;border-radius:13px;border:2px solid var(--wellBorder);background:var(--well);
    position:relative;cursor:pointer;transition:background .2s;flex:none;}
  .sToggle.on{background:linear-gradient(180deg,#ffd777,var(--goldMid));border-color:#c98f1e;}
  .sToggle::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;
    border-radius:50%;background:#fff;transition:left .18s;box-shadow:0 1px 3px rgba(0,0,0,.3);}
  .sToggle.on::after{left:22px;}
  .sRow.sCol{flex-direction:column;align-items:stretch;gap:8px;}
  .sRow.sCol .sLabel{margin-bottom:2px;}
  .voiceSel,.voicePick{width:100%;border:2px solid var(--wellBorder);border-radius:8px;color:var(--paper);
    padding:8px 34px 8px 10px;font-size:13px;font-family:inherit;outline:none;cursor:pointer;
    appearance:none;-webkit-appearance:none;text-align:left;
    background-color:#1c0d33;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0b43c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;background-size:14px;}
  .voicePick{flex:1;min-width:0;}
  .voicePick span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* the game-styled voice menu (the OS dropdown cannot be themed) */
  .voiceMenu{max-height:190px;overflow:auto;border:2px solid var(--wellBorder);border-radius:10px;
    background:#1c0d33;box-shadow:0 10px 24px rgba(0,0,0,.55), inset 0 1px 2px rgba(255,228,158,.15);}
  .voiceOpt{padding:9px 12px;font-size:13px;color:#e7dcf3;cursor:pointer;
    border-bottom:1px solid rgba(240,180,60,.1);}
  .voiceOpt:last-child{border-bottom:none;}
  .voiceOpt.sel{color:#ffd777;background:rgba(240,180,60,.12);}
  @media (hover:hover){ .voiceOpt:hover{background:rgba(240,180,60,.16);} }
  .voiceSel:focus{border-color:var(--gold);}
  .voiceHint{font-size:11px;color:#c3a9e2;line-height:1.4;}
  /* compact footer: rules + contact + terms as one line of gold links */
  .sFootLinks{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;
    font-size:12.5px;color:#c3a9e2;padding:10px 0 2px;}
  .sFootLinks a{color:var(--gold);text-decoration:underline;cursor:pointer;}
  .sFootLinks a:hover{color:#ffd777;}
  /* ---- LOBBY settings only (.hubMode): wears the quests container's premium skin ----
     gold gradient ring, #2D1050 violet field, and a violet-gold plaque title. The
     in-game settings has no .hubMode, so it keeps the classic ink card untouched. */
  /* overflow visible so the title plaque can sit HALF OUT of the top border like quests */
  #settingsModal.hubMode .sPanel{
    border:7px solid transparent;border-radius:30px;padding:46px 22px 60px;overflow:visible;
    /* same width as the quests container */
    width:min(470px, 94vw, calc(84vh * .711));max-height:none;
    background:linear-gradient(#2D1050,#2D1050) padding-box,
      linear-gradient(180deg,#F5D445 0%,#E9B62F 32%,#D89A20 68%,#C8881B 100%) border-box;
    box-shadow:0 0 0 2px #4a2f08, inset 0 0 0 2px rgba(255,228,158,.25),
      inset 0 -18px 40px rgba(12,3,26,.5), 0 18px 44px rgba(0,0,0,.6); }
  /* the Settings.png plaque replaces the text title, centered half-out on the top
     border exactly like the quests + match room plaques (-3.5px = half the 7px border) */
  .setTitleArt{ display:none; }
  #settingsModal.hubMode .setTitleArt{ display:block;position:absolute;top:-3.5px;left:50%;
    transform:translate(-50%,-50%);z-index:3;width:min(266px,60%);height:auto;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
  #settingsModal.hubMode .sPanel h3{ display:none; }
  /* the X replaces Done, placed like the quests + match room close (top:16px right:16px) */
  .setClose{ display:none; }
  #settingsModal.hubMode .setClose{ display:flex;align-items:center;justify-content:center;
    position:absolute;top:16px;right:16px;z-index:5;width:30px;height:30px;padding:0;
    border:none;background:none;box-shadow:none;cursor:pointer;
    color:rgba(240,180,60,.85);filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
    transition:transform .1s ease, color .15s ease; }
  #settingsModal.hubMode .setClose:active{ transform:scale(.88); }
  @media (hover:hover){ #settingsModal.hubMode .setClose:hover{ color:#ffd777;
    filter:drop-shadow(0 0 8px rgba(255,205,90,.95)) drop-shadow(0 0 18px rgba(240,180,60,.5)); } }
  /* Done is gone in the lobby - the X handles closing */
  #settingsModal.hubMode #stHubRow{ display:none; }
  /* separators and footer read as gold hairlines on the violet field */
  #settingsModal.hubMode .sRow{ border-bottom-color:rgba(240,180,60,.16); }
  #settingsModal.hubMode .sFootLinks{ border-top:1px solid rgba(240,180,60,.16);margin-top:2px; }

  /* ---------- difficulty badge on cards ---------- */
  .diffBadge{font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:1px 6px;
    border-radius:6px;border:1.5px solid rgba(255,255,255,.25);margin-left:4px;vertical-align:middle;color:rgba(255,255,255,.85);}

  /* ---------- spectator mode (online, not your turn) ----------
     the panel itself stays touchable so mobile players can SCROLL the
     memorize cards, but every control inside is untouchable */
  #panel.spectate button,#panel.spectate input,#panel.spectate select{pointer-events:none;}

  /* ---------- steal banner ---------- */
  .stealBanner{font-family:var(--cursive);font-size:16px;
    color:var(--gold);background:rgba(240,180,60,.15);border:2px solid rgba(240,180,60,.4);
    border-radius:10px;padding:7px 12px;text-align:center;margin:8px 0 4px;animation:pop .35s;}

  /* ---------- mobile: clean (non-cursive) font + larger, easier-to-read text ---------- */
  @media (max-width:600px){
    /* toasts stay on a single line on phones (smaller text, ellipsis if truly long) */
    #toast{ white-space:nowrap; max-width:94vw; overflow:hidden; text-overflow:ellipsis;
      font-size:14px; padding:7px 15px; }
    /* memorize: fit ALL 5-6 cards with no scrolling - taller panel, 3-across compact cards */
    #panel{ max-height:86vh; }
    #memWrap{ gap:6px; }
    #memWrap .qcard{ width:31%; min-width:0; }
    #memWrap .qcard .ch{ font-size:10px; padding:3px 5px; }
    #memWrap .qcard .ch .val{ font-size:9px; padding:1px 4px; }
    #memWrap .qcard .term{ font-size:13px; padding:8px 3px; }
    #memWrap .diffBadge{ display:none; } /* the card IS its color; save the header space */
    /* mobile keeps the full sentence with "&", just small enough to stay one line */
    #authHint{ font-size:clamp(8.5px,3vw,11px);white-space:nowrap; }
    .storyVid{ object-position:48% center; } /* left of center on phones */
    #panel{ width:96vw; padding:15px 15px 17px; }
    #panel h3{ font-size:21px; }
    #panel p{ font-size:16.5px; line-height:1.45; }
    #panel .sub{ font-size:14px; line-height:1.4; color:#cdbbe2; }
    .defRead{ font-size:18px; line-height:1.5; }
    .sheet h2{ font-size:26px; }
    .sheet p.note{ font-size:14.5px; line-height:1.45; }
    .note{ font-size:14px; line-height:1.45; }
    .pCard .nm{ font-size:13px; }
    .pCard .nug{ font-size:18px; }
    .ansIn{ font-size:17px; padding:13px 14px; }
    .btn{ font-size:17px; }
    .frWho,.roomP,.rName{ font-size:15px; }
    .topicChip,.inviteChip,.menuBtn{ font-size:14px; }
  }

  /* ===== PERSONALIZED HUB (corner layout) ===== */
  /* full width so the corner buttons pin to the screen edges on desktop too;
     on mobile this is already ~full width, so the layout is unchanged there */
  .hub{ width:100%; height:100%; display:flex; flex-direction:column;
    justify-content:space-between; padding:8px 6px 28px; }
  /* rows are click-through: the flex:1 mid row is full-width and, once lifted, overlaps
     the buttons above/below it - only the actual buttons should capture clicks/hovers */
  .hubRow{ display:flex; align-items:center; pointer-events:none; }
  .hubTopRow{ justify-content:space-between; align-items:flex-start; }
  /* settings on top (aligns with the streak), profile below, comfortable gap between;
     centered so each lower icon's top jewel lines up under the upper icon's bottom jewel */
  .hubStack{ display:flex; flex-direction:column; align-items:center; gap:24px; }
  /* quests + rank lifted to sit centered on the circling lamp; the Summon CTA lifted a touch too */
  .hubMidRow{ justify-content:space-between; flex:1; transform:translateY(-3.5vh); }
  .hubBotRow{ justify-content:center; transform:translateY(-3vh); }
  /* all hub controls are now custom artwork buttons: fully transparent, no border/
     background/padding of our own — the image supplies all the chrome, cropped tight
     to its own edges so the button is exactly as big as the art, no dead space. */
  .hubIcon,.hubPill,.hubPlay{
    background:none; border:none; padding:0; cursor:pointer; pointer-events:auto;
    -webkit-tap-highlight-color:transparent;
    transition:transform .1s ease, filter .1s ease; }
  .hubIcon img,.hubPill img,.hubPlay img{ display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
  /* hover = a warm golden glow around the artwork itself (drop-shadow follows the
     image's alpha, so the glow hugs the art instead of a rectangular box) */
  @media (hover:hover){ .hubIcon:hover,.hubPill:hover,.hubPlay:hover{
    filter:brightness(1.12) drop-shadow(0 0 9px rgba(240,180,60,.85)) drop-shadow(0 0 22px rgba(240,180,60,.45)); } }
  /* tap feedback (mobile has no hover): the same glow, flashed briefly by JS before
     the button's screen opens, so the press is always SEEN before the container */
  .hubIcon.tapGlow,.hubPill.tapGlow,.hubPlay.tapGlow{
    filter:brightness(1.18) drop-shadow(0 0 10px rgba(240,180,60,.95)) drop-shadow(0 0 26px rgba(240,180,60,.55)) !important;
    transform:scale(1.04); }
  .hubIcon:active,.hubPill:active,.hubPlay:active{ transform:scale(.94); filter:brightness(1); }
  .hubIcon{ position:relative; width:46px; height:46px; flex:none; }
  /* desktop: the small round buttons (streak/settings) and the pill pair
     (quests/rank) read too small on a large screen - scale them up to sit right */
  @media (min-width:900px) and (min-height:600px){
    .hubIcon{ width:56px; height:56px; }
    .hubPill{ width:176px; }
  }
  /* small per-button positional nudges (margin, not transform, so it never fights the
     :active press-scale above) — fan the pairs a little further apart and higher */
  #hubStreak{ margin:-6px 0 0 -4px; }
  #hubSettings{ margin:-6px -4px 0 0; }
  #btnQuests{ margin-top:-8px; margin-left:-4px; }
  #btnChallenge{ margin-top:-8px; margin-right:-4px; }
  #btnPlay{ margin-top:-4px; }
  /* the red counter bubbles on the hub buttons are gone by request - the buttons
     stay clean; streak/quest counts live inside their own screens */
  .hubStreakNum{ display:none !important; }
  .hubPill{ position:relative; width:82px; }
  .hubBadge{ display:none !important; }
  .hubPlay{ width:min(340px,74vw); }
  .dangerLink{ background:none;border:none;color:#ff7b7b;font-size:13px;text-decoration:underline;
    padding:4px;align-self:center;font-family:inherit;cursor:pointer; }
  .dangerLink:active{ opacity:.7; }
  /* match room */
  .roomCountRow{ display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 6px; }
  .countChips{ display:flex;gap:8px; }
  .countChip{ width:38px;height:38px;border-radius:10px;border:2px solid var(--wellBorder);background:var(--well);
    color:var(--paper);font-family:var(--display);font-weight:700;font-size:15px;cursor:pointer;
    animation:stPop .35s cubic-bezier(.34,1.56,.64,1) both; }
  .countChip.sel{ border-color:var(--gold);color:#ffd777;
    background:linear-gradient(180deg,rgba(240,180,60,.3),rgba(240,180,60,.1)),var(--well);
    box-shadow:0 0 10px rgba(240,180,60,.45); }
  .countChip:disabled{ opacity:.4;cursor:default; }
  .onDot{ display:inline-block;width:8px;height:8px;border-radius:50%;background:#2BA84A;
    margin-right:5px;box-shadow:0 0 6px #2BA84A;vertical-align:middle; }
  /* streak */
  .stCount{ text-align:center;margin:6px 0 16px; }
  .stCount b{ font-family:var(--display);font-weight:800;font-size:48px;display:block;line-height:1;
    background:linear-gradient(180deg,#ffedbc 8%,var(--goldMid) 55%,#c98f1e 92%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 2px 1px rgba(20,6,2,.6)); }
  .stCount small{ color:#dccbf2;font-size:13px; }
  /* one row, always: seven flex cells that shrink together instead of wrapping */
  .stTrack{ display:flex;gap:5px;justify-content:center;flex-wrap:nowrap;align-items:stretch;margin-bottom:14px; }
  .stCell{ flex:1 1 0;min-width:0;padding:8px 0 6px;border-radius:12px;background:var(--well);
    border:2px solid var(--wellBorder);text-align:center;color:#cdb8e8;
    animation:stPop .45s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes stPop{ from{transform:scale(.4);opacity:0;} }
  .stCell.done{ border-color:var(--goldMid);color:#ffd777;
    background:linear-gradient(180deg,rgba(240,180,60,.28),rgba(240,180,60,.08)) ,var(--well);
    box-shadow:inset 0 0 10px rgba(240,180,60,.25); }
  .stCell.now{ animation:stPop .45s cubic-bezier(.34,1.56,.64,1) both, stPulse 1.6s ease-in-out .5s infinite; }
  @keyframes stPulse{ 0%,100%{box-shadow:inset 0 0 10px rgba(240,180,60,.25),0 0 4px rgba(240,180,60,.3);}
    50%{box-shadow:inset 0 0 10px rgba(240,180,60,.35),0 0 14px rgba(240,180,60,.75);} }
  .stNum{ display:block;font-family:var(--display);font-weight:800;font-size:17px; }
  .stCell small{ display:block;font-size:8.5px;letter-spacing:0;text-transform:uppercase;
    white-space:nowrap;overflow:visible;padding:0 1px; }
  /* the day 7 chest: dim while locked, glowing wiggle when ready, burst when opened */
  .stChestCell{ flex:1.7 1 0;position:relative;display:flex;flex-direction:column;
    align-items:center;justify-content:flex-end;padding:4px 0 6px;overflow:visible; }
  .stChestCell img{ width:86%;max-width:74px;height:auto;margin-top:-14px;
    filter:brightness(calc(.62 + .38*var(--glow,0))) saturate(calc(.7 + .3*var(--glow,0)))
      drop-shadow(0 0 calc(10px*var(--glow,0)) rgba(255,196,80,calc(.75*var(--glow,0))));
    transition:filter .3s, transform .2s; }
  .stChestCell.ready{ cursor:pointer;border-color:var(--goldMid);
    animation:stPop .45s cubic-bezier(.34,1.56,.64,1) both, stPulse 1.4s ease-in-out .5s infinite; }
  .stChestCell.ready img{ filter:brightness(1.05) saturate(1) drop-shadow(0 0 14px rgba(255,196,80,.9));
    animation:chestWiggle 1.8s ease-in-out infinite; }
  .stChestCell.ready small{ color:#ffd777;font-weight:700; }
  @keyframes chestWiggle{ 0%,72%,100%{transform:rotate(0);} 78%{transform:rotate(-5deg) scale(1.04);}
    84%{transform:rotate(4deg) scale(1.06);} 90%{transform:rotate(-3deg) scale(1.04);} 96%{transform:rotate(2deg);} }
  .stChestCell.opened img{ filter:brightness(1.08) saturate(1) drop-shadow(0 0 20px rgba(255,208,96,1));
    animation:chestBurst .55s cubic-bezier(.34,1.56,.64,1); }
  .stChestCell.opened small{ color:#ffd777;font-weight:700; }
  @keyframes chestBurst{ 0%{transform:scale(.7);} 55%{transform:scale(1.28);} 100%{transform:scale(1);} }
  /* shared image button: the lobby's Summon a Match, reused inside containers */
  .summonWrap{ text-align:center;margin-top:14px; }
  .summonBtn{ appearance:none;background:none;border:none;padding:0;cursor:pointer;
    width:min(300px,72vw);transition:transform .12s ease, filter .15s ease; }
  .summonBtn img{ display:block;width:100%;height:auto;pointer-events:none;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
  @media (hover:hover){ .summonBtn:hover{ transform:translateY(-2px);
    filter:brightness(1.1) drop-shadow(0 0 10px rgba(240,180,60,.8)) drop-shadow(0 0 24px rgba(240,180,60,.4)); } }
  .summonBtn:active{ transform:translateY(2px) scale(.98); }
  /* the Summon a Match buttons everywhere get the lobby button's gloss sweep + sparkle
     (no breathe): a gloss glides across the btn-summon art and a ✦ twinkles at the top */
  .summonBtn{ position:relative; }
  /* streak + rank CTAs (.summonBtn) also breathe, like the lobby buttons */
  .summonBtn img{ animation:hubBreathe 5s ease-in-out infinite; }
  .summonBtn::after,.ornateSummon::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background:linear-gradient(115deg,transparent 40%,rgba(255,250,230,.55) 50%,transparent 60%) no-repeat;
    background-size:260% 100%;background-position:-160% 0;
    -webkit-mask:url(../assets/btn-summon.png) center/contain no-repeat;
    mask:url(../assets/btn-summon.png) center/contain no-repeat;
    animation:shineSweep 5.6s ease-in-out infinite; }
  .summonBtn::before,.ornateSummon::before{ content:"✦";position:absolute;right:11%;top:12%;font-size:15px;
    color:#ffe08a;pointer-events:none;z-index:2;text-shadow:0 0 6px rgba(255,214,110,.9);
    animation:sparkTw 2.8s ease-in-out infinite;animation-delay:.4s; }
  /* the quests + match room CTAs have neither gloss sweep nor sparkle */
  #quests .ornateSummon::before,#quests .ornateSummon::after,
  #online .ornateSummon::before,#online .ornateSummon::after{ display:none; }
  /* the rank page Let's Go button has no breathe, gloss sweep or sparkle */
  #btnChallengePlay img{ animation:none; }
  #btnChallengePlay::before,#btnChallengePlay::after{ content:none;display:none; }
  /* a little smaller, sitting under a gold rule that tops its container */
  #btnChallengePlay{ width:min(238px,58vw); }
  #lbScr .summonWrap{ border-top:2px solid rgba(240,180,60,.4);padding-top:12px;margin-top:10px; }
  /* quests */
  .qRow{ display:flex;align-items:center;gap:10px;padding:10px 12px;margin:7px 0;border-radius:14px;
    background:var(--well);border:2px solid var(--wellBorder);
    animation:stPop .4s cubic-bezier(.34,1.56,.64,1) both; }
  .qRow.hit{ border-color:var(--goldMid);box-shadow:inset 0 0 12px rgba(240,180,60,.18),0 0 10px rgba(240,180,60,.35); }
  @keyframes qReveal{ from{ opacity:0;transform:translateY(18px) scale(.97);filter:blur(3px); } }
  /* rows spring up with a slight overshoot, then settle */
  @keyframes qRowPop{ 0%{ opacity:0;transform:translateY(20px) scale(.72); }
    62%{ opacity:1;transform:translateY(-3px) scale(1.05); }
    100%{ transform:translateY(0) scale(1); } }
  .qMain{ flex:1;min-width:0; }
  .qMain b{ font-size:14px;color:#f4ebfd; }
  /* hero scroll: floats and glows over the top half of the quests frame */
  .qHero{ flex:1 1 0;min-height:76px;display:flex;align-items:center;justify-content:center;position:relative;
    overflow:visible;padding:12px 0 6px; }
  .qHero img{ width:min(34%,126px);height:auto;will-change:transform,opacity;
    filter:drop-shadow(0 10px 22px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(240,180,60,.35));
    animation:qScrollPop .5s cubic-bezier(.2,.9,.28,1.35) both,
      heroFloat 4s ease-in-out .9s infinite; }
  /* the scroll bursts in first: from tiny to a springy overshoot, then settles */
  @keyframes qScrollPop{ 0%{ opacity:0;transform:scale(.3) translateY(10px); }
    58%{ opacity:1;transform:scale(1.12) translateY(-4px); }
    100%{ transform:scale(1) translateY(0); } }
  @keyframes heroIn{ from{ opacity:0;transform:translateY(14px) scale(.7) rotate(-6deg); } }
  @keyframes heroFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
  .qHero::before,.qHero::after{ content:"✦";position:absolute;color:#ffd777;
    text-shadow:0 0 8px rgba(255,205,90,.9);animation:sparkTw 2.6s ease-in-out infinite; }
  .qHero::before{ left:15%;top:16%;font-size:19px; }
  /* the right quests sparkle is a small violet glint, like the streak + shop violets */
  .qHero::after{ right:13%;bottom:12%;font-size:11px;animation-delay:1.3s;
    color:#d9a6ff;text-shadow:0 0 8px rgba(200,120,255,.95); }
  @keyframes sparkTw{ 0%,100%{opacity:.15;transform:scale(.8) rotate(0deg)}
    50%{opacity:1;transform:scale(1.15) rotate(25deg)} }
  /* chest claim button on each quest: dim in progress, glowing wiggle when
     claimable, open once claimed */
  .qChest{ width:54px;height:48px;flex:none;background:none;border:none;padding:0;cursor:default;
    transition:transform .1s ease; }
  /* the chest warms up WITH the quest: at 0 progress it sits grey and dim, at
     half progress it half-glows, at full it hands over to the .ready blaze */
  .qChest img{ width:100%;height:100%;object-fit:contain;pointer-events:none;
    filter:grayscale(calc(.75 - .6*var(--p,0))) brightness(calc(.65 + .3*var(--p,0)))
      drop-shadow(0 0 calc(9px*var(--p,0)) rgba(255,196,80,calc(.8*var(--p,0))));
    transition:filter .3s; }
  .qChest.ready{ cursor:pointer; }
  .qChest.ready img{ filter:drop-shadow(0 0 10px rgba(255,196,80,.9));
    animation:chestWiggle 1.8s ease-in-out infinite; }
  .qChest.ready:active{ transform:scale(.9); }
  .qChest.open img{ filter:drop-shadow(0 0 8px rgba(255,208,96,.75)); }
  .qMain small{ display:block;color:#c3a9e2;font-size:11px;margin-top:2px; }
  .qBar{ height:9px;border-radius:6px;background:rgba(10,3,22,.7);overflow:hidden;margin:6px 0 2px;
    border:1px solid rgba(240,180,60,.25); }
  .qBar i{ display:block;height:100%;border-radius:6px;position:relative;
    background:linear-gradient(90deg,#c98f1e,#F0B43C 55%,#ffe08a);transition:width .5s ease; }
  .qBar i::after{ content:"";position:absolute;inset:0;border-radius:6px;
    background:linear-gradient(180deg,rgba(255,255,255,.45),transparent 55%); }
  /* challenge podium */
  .podium{ display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:6px 0 14px; }
  .podCol{ flex:1;max-width:118px;border-radius:14px 14px 0 0;background:var(--well);
    border:2px solid var(--wellBorder);border-bottom:none;padding:10px 6px;text-align:center;
    animation:podRise .55s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes podRise{ from{transform:translateY(26px);opacity:0;} }
  .podCol b{ display:block;font-size:13px;margin:5px 0 2px;color:var(--paper);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .podCol small{ color:var(--gold);font-size:12px;font-family:var(--display);font-weight:700; }
  .podRank{ display:inline-block;width:28px;height:28px;line-height:26px;border-radius:50%;
    font-family:var(--display);font-weight:800;color:#1b1320;border:2px solid rgba(0,0,0,.35);
    box-shadow:0 2px 5px rgba(0,0,0,.45), inset 0 2px 3px rgba(255,255,255,.55); }
  .pod1{ order:2;transform:translateY(-12px);border-color:var(--goldMid);
    box-shadow:inset 0 0 14px rgba(240,180,60,.2), 0 0 16px rgba(240,180,60,.35);animation-delay:.12s; }
  .pod1 .podRank{ background:linear-gradient(180deg,#ffe08a,var(--goldMid)); }
  .pod2{ order:1;animation-delay:.02s; } .pod2 .podRank{ background:linear-gradient(180deg,#eef2f8,#b9c0cc); }
  .pod3{ order:3;animation-delay:.22s; } .pod3 .podRank{ background:linear-gradient(180deg,#e8b184,#c07f4e); }
  .podCol.me{ border-color:var(--gold); }
  /* ornate screens float over a softly blurred, dimmed board */
  #quests,#online,#shop{ background:rgba(10,4,20,.35);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
  /* settings + profile are modals that sit ON TOP of the lobby - hide the hub buttons
     behind them so, like quests, only the blurred board shows through the backdrop */
  body:has(#settingsModal:not(.hidden)) .hub,
  body:has(#profileModal:not(.hidden)) .hub{ visibility:hidden; }
  /* ---- Daily Streak: full page celebration in the frames' violet field ---- */
  /* the reference's stage lighting, recolored to the quests violet and darker:
     a soft beam falls from above onto the hero, a glow pools behind it, and a
     lighter stage band lifts the floor behind the CTA */
  #streak{ background:
    radial-gradient(120% 90% at 50% 45%, transparent 52%, rgba(10,3,22,.6) 100%),
    radial-gradient(46% 22% at 50% 60%, rgba(255,214,130,.14), transparent 70%),
    radial-gradient(58% 38% at 50% 30%, rgba(150,90,220,.4), transparent 72%),
    radial-gradient(62% 26% at 50% 92%, rgba(122,63,179,.4), transparent 72%),
    linear-gradient(180deg, #3A1663 0%, #2D1050 55%, #1B0933 100%); }
  .stPage::before{ content:"";position:absolute;top:-6%;left:50%;transform:translateX(-50%);
    width:34%;height:70%;pointer-events:none;z-index:0;
    background:linear-gradient(180deg, rgba(255,240,205,.26), rgba(220,170,255,.1) 55%, transparent 100%);
    clip-path:polygon(42% 0, 58% 0, 100% 100%, 0 100%);filter:blur(3px); }
  .stPage::after{ content:"";position:absolute;top:-8%;left:50%;transform:translateX(-50%);
    width:64%;height:78%;pointer-events:none;z-index:0;
    background:linear-gradient(180deg, rgba(255,235,190,.12), rgba(200,150,255,.05) 55%, transparent 100%);
    clip-path:polygon(38% 0, 62% 0, 100% 100%, 0 100%);filter:blur(14px); }
  .stPage>*{ position:relative;z-index:1; }
  .stPage{ width:min(520px,96vw);height:100%;display:flex;flex-direction:column;align-items:center;
    justify-content:flex-start;gap:0;position:relative;padding:8px 0; }
  .stClose{ position:fixed;top:max(2px,env(safe-area-inset-top));right:10px;left:auto;width:36px;height:36px;
    border:none;background:none;box-shadow:none;cursor:pointer;padding:0;
    color:rgba(240,180,60,.85);filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
    display:flex;align-items:center;justify-content:center;transition:transform .1s ease,color .15s ease; }
  .stClose:active{ transform:scale(.88); }
  @media (hover:hover){ .stClose:hover{ color:#ffd777; } }
  .stHero{ position:relative;display:flex;align-items:center;justify-content:center;margin-top:calc(4.5vh + 4px); }
  /* position:top offsets only the lamp - the number is anchored to .stHero, not the
     image, and relative offset does not disturb the flow below, so nothing else moves */
  .stHero img{ width:min(64vw,310px);height:auto;position:relative;top:-8px;
    animation:heroFloat 4.5s ease-in-out infinite;
    filter:drop-shadow(0 14px 30px rgba(0,0,0,.55)); }
  /* the number is conjured in the swirl above the lamp: a violet-gold halo
     breathes behind it while the whole hero floats */
  .stHero b::before{ content:"";position:absolute;inset:-46px -70px;z-index:-1;border-radius:50%;
    background:radial-gradient(closest-side, rgba(255,225,150,.5), rgba(195,120,255,.4) 45%, rgba(120,60,190,.16) 68%, transparent 80%);
    animation:numGlow 3s ease-in-out infinite;filter:blur(5px); }
  @keyframes numGlow{ 0%,100%{opacity:.8;transform:scale(1);} 50%{opacity:1;transform:scale(1.14);} }
  /* the number floats with its OWN keyframes that keep the centering translate -
     heroFloat's transform was wiping translate(-50%,-50%) and shoving it right */
  .stHero b{ position:absolute;top:31.5%;left:50%;transform:translate(-50%,-50%);text-align:center;
    font-family:var(--display);font-weight:800;font-size:clamp(60px,21vw,96px);color:#FFF3D6;
    text-shadow:0 3px 0 #B8811B, 0 6px 0 rgba(96,54,6,.55), 0 12px 26px rgba(0,0,0,.6);line-height:1;
    animation:numFloat 4.5s ease-in-out infinite; }
  @keyframes numFloat{ 0%,100%{ transform:translate(-50%,-50%) translateY(0); }
    50%{ transform:translate(-50%,-50%) translateY(-6px); } }
  /* the two ::before/::after sparkles are gone - they were the yellow glints left of
     the number and right of the lamp that no .spk edit could reach */
  .stHero::before,.stHero::after{ content:none; }
  /* a living sparkle field around the lamp and its cloud */
  .stHero .spk{ position:absolute;font-style:normal;color:#ffd777;pointer-events:none;
    text-shadow:0 0 8px rgba(255,205,90,.9);animation:sparkTw 2.6s ease-in-out infinite; }
  /* three sparkles: left yellow sat at the vertical middle of the right pair; a right yellow
     (offset twinkle so the two yellows never pulse together) and a purple below it */
  .stHero .s1{ display:block;left:20%;top:28%;font-size:16px;animation-delay:0s; }
  .stHero .s4{ display:block;right:20%;top:18%;font-size:16px;animation-delay:1.3s; }
  .stHero .s2{ display:block;right:15%;top:37%;font-size:13px;animation-delay:.7s;color:#d9a6ff;text-shadow:0 0 8px rgba(200,120,255,.9); }
  .stHero .s3,.stHero .s5,.stHero .s6,.stHero .s7,.stHero .s8{ display:none; }
  /* opening the page is a moment: the beam pours in, the lamp rises, each row follows */
  .stPage.enter::before{ animation:beamIn .55s ease-out both; }
  @keyframes beamIn{ from{ opacity:0;transform:translateX(-50%) scaleY(.3);transform-origin:top; }
    to{ opacity:1;transform:translateX(-50%) scaleY(1);transform-origin:top; } }
  .stPage.enter .stHero{ animation:stEnterHero .45s ease-out both; }
  @keyframes stEnterHero{ from{ opacity:0;transform:translateY(16px) scale(.96); } }
  .stTitle{ margin-top:38px;font-family:var(--display);font-weight:800;font-size:clamp(30px,9vw,44px);letter-spacing:.02em;
    background:linear-gradient(180deg,#ffedbc 8%,var(--goldMid) 55%,#c98f1e 92%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 2px 1px rgba(20,6,2,.65)); }
  /* the 12px top margin holds the subtitle in place while only Day Streak rises */
  .stSub{ color:#fff;font-weight:700;font-size:clamp(15px,4.4vw,19px);
    text-shadow:0 2px 4px rgba(0,0,0,.5);margin:4px 0 6px; }
  #stTrackWrap{ display:flex;gap:7px;align-items:center;justify-content:center;flex-wrap:nowrap;
    margin:calc(3.4vh + 14px) 0 0;max-width:96vw; }
  .stPage .summonWrap{ margin-top:auto;padding-bottom:12.5vh; }
  .stOrb{ width:42px;height:42px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-family:var(--display);font-weight:800;font-size:17px;line-height:1;color:#cdb8e8;
    background:linear-gradient(180deg,#5b2a8e,#3a1663);border:2px solid rgba(240,180,60,.5);
    box-shadow:0 3px 7px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.18);
    animation:stPop .45s cubic-bezier(.34,1.56,.64,1) both; }
  .stOrb.done{ background:linear-gradient(180deg,#FFE391,#F3B93F 55%,#D8951F);border-color:#8a5a10;
    box-shadow:0 3px 7px rgba(0,0,0,.45), inset 0 2px 3px rgba(255,255,255,.55); }
  .stOrb.done svg{ display:block; }
  .stOrb.now{ animation:stPop .45s cubic-bezier(.34,1.56,.64,1) both, stPulse 1.6s ease-in-out .5s infinite; }
  .chestOrb{ width:64px;height:56px;border-radius:16px;position:relative;overflow:visible; }
  .chestOrb img{ width:58px;height:auto;margin-top:-12px;pointer-events:none;
    filter:brightness(calc(.62 + .38*var(--glow,0))) saturate(calc(.7 + .3*var(--glow,0)));transition:filter .3s; }
  .chestOrb i{ position:absolute;bottom:2px;right:7px;font-style:normal;font-size:11px;
    color:#ffd777;font-family:var(--display);font-weight:800; }
  .chestOrb.ready{ cursor:pointer;border-color:var(--goldMid);
    animation:stPop .45s cubic-bezier(.34,1.56,.64,1) both, stPulse 1.4s ease-in-out .5s infinite; }
  .chestOrb.ready img{ filter:drop-shadow(0 0 10px rgba(255,196,80,.9));animation:chestWiggle 1.8s ease-in-out infinite; }
  .chestOrb.opened img{ filter:drop-shadow(0 0 8px rgba(255,208,96,.8)); }
  /* the whole-screen chest opening */
  .chestStage{ position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:14px;
    background:radial-gradient(120% 100% at 50% 40%, rgba(98,48,154,.97), rgba(20,6,40,.98) 75%); }
  .chestRays{ position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;
    opacity:0;pointer-events:none;
    background:repeating-conic-gradient(rgba(255,214,110,.15) 0 9deg, transparent 9deg 24deg);
    animation:raysSpin 16s linear infinite;transition:opacity .5s; }
  .chestStage.burst .chestRays{ opacity:1; }
  @keyframes raysSpin{ to{ transform:rotate(360deg); } }
  .chestBig{ width:min(64vw,320px);height:auto;cursor:pointer;z-index:1;
    filter:drop-shadow(0 18px 40px rgba(0,0,0,.6)) drop-shadow(0 0 20px rgba(255,196,80,.55));
    animation:chestWiggle 1.6s ease-in-out infinite; }
  .chestBig.pop{ cursor:default;animation:chestBurst .6s cubic-bezier(.34,1.56,.64,1); }
  .chestMsg{ z-index:1;font-family:var(--display);font-weight:800;font-size:clamp(22px,7vw,34px);
    background:linear-gradient(180deg,#ffedbc 8%,var(--goldMid) 55%,#c98f1e 92%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 2px 1px rgba(20,6,2,.65)); }
  .chestStage .btn{ z-index:1;margin-top:2px; }
  /* ---- Hall of Genies: full page leaderboard, the page IS the frame's violet field ---- */
  #lbScr{ background:radial-gradient(130% 100% at 50% 24%, #62309a 0%, #47207a 48%, #2c0f4d 100%); }
  .lbPage{ width:min(560px,96vw);height:100%;display:flex;flex-direction:column;padding:4px 0; }
  .lbHeader{ flex:none;display:flex;align-items:center;gap:10px;padding:12px 14px;
    border-radius:26px 26px 16px 16px;border:3px solid transparent;position:relative;
    background:linear-gradient(180deg,#6b2fa0,#47207a) padding-box,
      linear-gradient(180deg,var(--goldHi),var(--goldMid) 40%,var(--goldLo)) border-box;
    box-shadow:0 0 0 2px #4a2f08, 0 8px 20px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,228,158,.3); }
  .lbHeader .backBtn{ position:static;float:none;margin:0;flex:none;width:38px;height:38px; }
  .lbTitles{ flex:1;text-align:center;line-height:1.08;min-width:0; }
  .lbTitles small{ display:block;font-family:var(--display);font-weight:700;font-size:13px;color:#fff3d8;
    text-shadow:0 1px 2px rgba(0,0,0,.6);letter-spacing:.04em; }
  .lbTitles b{ font-family:var(--display);font-weight:800;font-size:clamp(22px,6vw,30px);letter-spacing:.02em;
    background:linear-gradient(180deg,#ffedbc 8%,var(--goldMid) 55%,#c98f1e 92%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 2px 1px rgba(20,6,2,.65)); }
  .lbBody{ flex:1;overflow:auto;padding:4px 2px;min-height:0; }
  .podium2{ display:flex;align-items:stretch;gap:8px;margin:8px 0 10px; }
  .podCard{ flex:1;min-width:0;border-radius:40px 40px 14px 14px;border:3px solid transparent;
    text-align:center;padding:12px 6px 10px;position:relative;align-self:flex-end;
    background:linear-gradient(180deg,#5b2a8e,#3a1663) padding-box,
      linear-gradient(180deg,var(--goldHi),var(--goldMid) 40%,var(--goldLo)) border-box;
    box-shadow:0 0 0 2px #4a2f08, 0 6px 16px rgba(0,0,0,.45), inset 0 1px 2px rgba(255,228,158,.28);
    animation:podRise .55s cubic-bezier(.34,1.56,.64,1) both; }
  .podCard.p1{ order:2;padding-top:18px;padding-bottom:16px;animation-delay:.1s;
    background:linear-gradient(180deg,#8a5bc2,#5b2a8e) padding-box,
      linear-gradient(180deg,#fff0c0,var(--goldMid) 45%,var(--goldLo)) border-box; }
  .podCard.p2{ order:1;animation-delay:0s; } .podCard.p3{ order:3;animation-delay:.2s; }
  .podCard b{ display:block;font-size:13px;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:5px 2px; }
  .pAv{ width:44px;height:44px;border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;
    font-family:var(--display);font-weight:800;font-size:20px;line-height:1;color:#fff;
    padding-top:1px;text-align:center;
    background:radial-gradient(circle at 35% 30%,#a44ae0,#571b96);border:2px solid var(--goldMid);
    box-shadow:0 2px 6px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.35); }
  .pAv.sm{ width:30px;height:30px;font-size:14px;flex:none;margin:0; }
  .pLamp{ width:72%;max-width:96px;height:auto;margin:2px auto 0;display:block;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
  .podCard.p1 .pLamp{ max-width:112px; }
  .pScore{ display:flex;align-items:center;justify-content:center;gap:6px;margin-top:3px; }
  .pScore i{ font-style:normal;width:24px;height:24px;line-height:21px;border-radius:50%;flex:none;
    font-family:var(--display);font-weight:800;color:#1b1320;border:2px solid rgba(0,0,0,.35);
    background:linear-gradient(180deg,#ffe08a,var(--goldMid)); }
  .podCard.p2 .pScore i{ background:linear-gradient(180deg,#eef2f8,#b9c0cc); }
  .podCard.p3 .pScore i{ background:linear-gradient(180deg,#e8b184,#c07f4e); }
  .pScore span{ font-family:var(--display);font-weight:800;color:#ffd777;font-size:16px; }
  .lbRow2{ display:flex;align-items:center;gap:9px;padding:8px 12px;margin:7px 0;border-radius:14px;
    border:2px solid transparent;position:relative;
    background:linear-gradient(180deg,#5b2a8e,#3f1a6b) padding-box,
      linear-gradient(180deg,var(--goldHi),var(--goldMid) 40%,var(--goldLo)) border-box;
    box-shadow:0 3px 8px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,228,158,.22);
    animation:stPop .35s cubic-bezier(.34,1.56,.64,1) both; }
  .lbRow2 .pos{ font-family:var(--display);font-weight:800;color:#ffd777;width:24px;text-align:center;font-size:16px;flex:none; }
  .lbRow2 .nm{ flex:1;font-weight:700;color:#f4ebfd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0; }
  .rowLamp{ width:34px;height:34px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
  .scorePill{ font-family:var(--display);font-weight:800;color:#ffd777;background:rgba(16,5,34,.6);
    border:2px solid rgba(240,180,60,.5);border-radius:12px;padding:3px 12px;font-size:14px;flex:none; }
  .lbRow2.me,.podCard.me{ box-shadow:0 0 0 2px #4a2f08, 0 0 18px rgba(240,180,60,.65), inset 0 1px 2px rgba(255,228,158,.3); }
  .lbRow2.climbing{ box-shadow:0 0 0 2px #4a2f08, 0 0 26px rgba(255,205,90,.95); }
  /* ---- match room: section headers, host banner, seat grid, seat menu ---- */
  .rSecHead{ display:flex;align-items:center;gap:10px;margin:10px 0 8px;justify-content:center;
    font-family:var(--display);font-weight:800;font-size:17px;color:#ffd777;
    text-shadow:0 1px 2px rgba(0,0,0,.5); }
  .rSecHead::before,.rSecHead::after{ content:"";flex:1;height:1.5px;border-radius:2px; }
  .rSecHead::before{ background:linear-gradient(90deg,transparent,rgba(246,198,90,.5)); }
  .rSecHead::after{ background:linear-gradient(90deg,rgba(246,198,90,.5),transparent); }
  .hostBanner{ padding:12px 14px; }
  .hostBanner b{ font-size:17px; }
  .slotGrid{ display:grid;grid-template-columns:repeat(3,1fr);gap:9px; }
  .slotCard{ aspect-ratio:.95;border-radius:16px;border:2px solid transparent;position:relative;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:6px;
    background:linear-gradient(180deg,#5b2a8e,#3f1a6b) padding-box,
      linear-gradient(180deg,var(--goldHi),var(--goldMid) 40%,var(--goldLo)) border-box;
    box-shadow:0 3px 8px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,228,158,.22); }
  /* seats pop exactly like the notifications panel - the gentle stPop scale-bounce */
  /* first room paint: every seat springs in (staggered via the nth-child delays above) */
  #slotGrid:not(.settled) .slotCard,#slotGrid.settled .slotCard.pop{ will-change:transform,opacity; }
  #slotGrid:not(.settled) .slotCard{ animation:stPop .4s cubic-bezier(.34,1.56,.64,1) both; }
  /* once settled the seats are static - only the ONE seat that changed gets .pop to spring again */
  #slotGrid.settled .slotCard{ animation:none; }
  #slotGrid.settled .slotCard.pop{ animation:stPop .4s cubic-bezier(.34,1.56,.64,1) both; }
  .slotCard b{ font-size:12.5px;color:#f4ebfd;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .slotCard .pAv{ width:52px;height:52px;font-size:22px;margin:0; }
  .slotCard .pAv.rv{ background:radial-gradient(circle at 35% 30%,#6f42a8,#3a1663);color:#d9c2f2; }
  .slotCard .crown{ position:absolute;top:-10px;left:50%;transform:translateX(-50%);z-index:2;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
  .slotCard.human{ cursor:pointer; }
  /* empty and locked seats: quiet deep-violet wells with a dashed gold ring */
  .slotCard.empty,.slotCard.locked{
    background:#241040;border:2px dashed rgba(246,198,90,.55);
    box-shadow:inset 0 0 14px rgba(0,0,0,.35); }
  .slotPlus{ width:52px;height:52px;border-radius:50%;flex:none;
    border:2px dashed rgba(246,198,90,.85);display:flex;align-items:center;justify-content:center;
    color:#ffd777;font-size:28px;font-family:var(--display);font-weight:700;line-height:1; }
  .slotPlus.lock{ border-style:solid;border-color:rgba(246,198,90,.5);color:rgba(255,215,119,.75); }
  .slotCard.locked b{ color:#c3a9e2; }
  .slotCard.tappable{ cursor:pointer; }
  @media (hover:hover){ .slotCard.tappable:hover{
    box-shadow:0 3px 8px rgba(0,0,0,.4), 0 0 12px rgba(240,180,60,.5), inset 0 1px 2px rgba(255,228,158,.3); } }
  .slotCard .frBtn{ position:absolute;bottom:5px;left:50%;transform:translateX(-50%);font-size:10px; }
  /* transparent backdrop: the menu opens without dimming or blurring the room behind it
     (the full-screen layer stays only to catch a tap-outside-to-close) */
  #slotMenu{ position:fixed;inset:0;z-index:75;display:flex;align-items:center;justify-content:center;
    background:transparent; }
  #slotMenu .sm{ width:min(300px,86vw);border-radius:20px;border:4px solid transparent;
    background:linear-gradient(#2D1050,#2D1050) padding-box,
      linear-gradient(180deg,#F5D445 0%,#E9B62F 40%,#C8881B 100%) border-box;
    box-shadow:0 0 0 2px #4a2f08, 0 16px 40px rgba(0,0,0,.6);
    padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px; }
  #slotMenu .smHead{ text-align:center;font-family:var(--display);font-weight:800;font-size:17px;color:#ffd777;
    text-shadow:0 1px 2px rgba(0,0,0,.5);margin-bottom:2px; }
  #slotMenu .btn{ margin:0;width:100%; }
  /* room buttons: violet plaques with gold serif text, the quests language */
  .roomBtn{ font-family:var(--display);font-weight:700;color:#ffd777;cursor:pointer;flex:none;
    border:2px solid transparent;border-radius:12px;padding:8px 14px;font-size:13.5px;
    background:linear-gradient(180deg,#5b2a8e,#3f1a6b) padding-box,
      linear-gradient(180deg,var(--goldHi),var(--goldMid) 40%,var(--goldLo)) border-box;
    box-shadow:0 2px 6px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,228,158,.22);
    text-shadow:0 1px 2px rgba(0,0,0,.5);transition:filter .12s ease, transform .1s ease; }
  @media (hover:hover){ .roomBtn:hover{ filter:brightness(1.15) drop-shadow(0 0 6px rgba(240,180,60,.5)); } }
  .roomBtn:active{ transform:translateY(1px); }
  .roomBtn.dim{ color:#c3a9e2; }
  #notifDot{ position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;border-radius:9px;
    background:linear-gradient(180deg,#ffd777,#f0b43c);color:#3a2408;font-style:normal;
    font-size:10px;font-weight:800;font-family:var(--display);line-height:16px;padding:0 4px;
    box-shadow:0 1px 4px rgba(0,0,0,.55); }
  /* notification/profile corner button mirrors the X */
  #online .sheet.ornate .pfBtn{ left:16px;right:auto;top:16px; }
  #online .pfBtn svg{ width:15px;height:15px;transition:transform .15s ease; } /* the bell glyph reads bigger than the X, trim it to match */
  /* open state: the bell fills solid and tilts, like it just rang */
  .pfBtn.rung{ color:#ffd777; }
  .pfBtn.rung svg{ fill:currentColor;animation:bellRang .45s cubic-bezier(.34,1.56,.64,1) forwards; }
  @keyframes bellRang{ 0%{transform:rotate(0);} 45%{transform:rotate(-22deg);} 75%{transform:rotate(-11deg);} 100%{transform:rotate(-15deg);} }
  /* the notification dropdown, anchored inside the card under the bell */
  #notifModal{ position:absolute;top:58px;left:22px;width:min(310px,84%);max-height:62%;
    overflow:auto;scrollbar-width:none;z-index:6;border-radius:16px;border:3px solid transparent;
    background:linear-gradient(#2D1050,#2D1050) padding-box,
      linear-gradient(180deg,#F5D445 0%,#E9B62F 40%,#C8881B 100%) border-box;
    box-shadow:0 0 0 2px #4a2f08, 0 14px 34px rgba(0,0,0,.6);
    padding:10px 12px 12px;animation:stPop .3s cubic-bezier(.34,1.56,.64,1) both; }
  #notifModal::-webkit-scrollbar{ display:none;width:0; }
  #notifBody .note{ margin:18px 4px 12px; }
  .ntfHead{ display:flex;align-items:center;justify-content:space-between;margin-top:4px;
    font-family:var(--display);font-weight:800;font-size:15px;color:#ffd777;
    text-shadow:0 1px 2px rgba(0,0,0,.5);margin-bottom:4px;padding-left:2px; }
  /* genie profile card */
  #profileModal,#inviteModal{ position:fixed;inset:0;z-index:78;display:flex;align-items:center;justify-content:center; }
  /* profile matches the quests + match room backdrop for consistency */
  #profileModal{ background:rgba(10,4,20,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); }
  /* invite a friend opens clear: no dim, no blur behind it (tap-outside still closes) */
  #inviteModal{ background:transparent; }
  /* overflow visible so the Profile.png plaque sits half-out on the top border; the body scrolls */
  .pfCard{ width:min(470px, 94vw, calc(84vh * .711));overflow:visible;
    border-radius:24px;border:5px solid transparent;position:relative;
    background:linear-gradient(#2D1050,#2D1050) padding-box,
      linear-gradient(180deg,#F5D445 0%,#E9B62F 32%,#D89A20 68%,#C8881B 100%) border-box;
    box-shadow:0 0 0 2px #4a2f08, inset 0 0 0 2px rgba(255,228,158,.25), 0 18px 44px rgba(0,0,0,.6);
    padding:42px 18px 18px; }
  .pfBody{ max-height:74vh;overflow:auto;scrollbar-width:none; }
  .pfBody::-webkit-scrollbar{ display:none;width:0; }
  /* the Profile.png title plaque, half-out on the top border like quests + settings + shop */
  .pfTitleArt{ position:absolute;top:-2.5px;left:50%;transform:translate(-50%,-50%);z-index:3;
    width:min(230px,58%);height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
  /* avatar can carry an uploaded photo, with a gold edit pencil for the owner */
  .pfAvWrap{ position:relative;width:76px;height:76px;margin:0 auto; }
  .pfAvWrap .pAv.big{ margin:0; }
  .pAv.photo{ background-size:cover;background-position:center;color:transparent;text-shadow:none; }
  .pfEditBtn{ position:absolute;bottom:-2px;right:-2px;width:26px;height:26px;border-radius:50%;
    border:2px solid #2D1050;background:linear-gradient(180deg,#ffd777,#f0b43c);color:#3a2408;
    display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
    box-shadow:0 2px 6px rgba(0,0,0,.55);transition:transform .1s ease; }
  .pfEditBtn:active{ transform:scale(.9); }
  /* the edit panel (personalize + privacy + save + delete) is hidden until the pencil is tapped */
  .pfEditPanel.hidden{ display:none; }
  .pfEditPanel{ margin-top:14px;border-top:1px solid rgba(240,180,60,.2);padding-top:12px; }
  .pfCard .pfClose{ position:absolute;top:10px;right:10px;left:auto;width:28px;height:28px;
    border:none;background:none;box-shadow:none;cursor:pointer;padding:0;
    color:rgba(240,180,60,.8);display:flex;align-items:center;justify-content:center; }
  .pfHead{ display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:2px; }
  .pAv.big{ width:76px;height:76px;font-size:32px;margin:0; }
  .pfName{ font-family:var(--display);font-weight:800;font-size:22px;
    background:linear-gradient(180deg,#ffedbc 8%,var(--goldMid) 55%,#c98f1e 92%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 1px 1px rgba(20,6,2,.6)); }
  .pfHandle{ color:#c3a9e2;font-size:12.5px; }
  .pfBio{ text-align:center;color:#e9dcf8;font-size:13.5px;line-height:1.45;margin:8px 4px 2px; }
  .pfGrid{ display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0 2px; }
  .pfStat{ background:var(--well);border:1.5px solid var(--wellBorder);border-radius:12px;
    padding:8px 4px;text-align:center; }
  .pfStat small{ display:block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#c3a9e2; }
  .pfStat b{ font-family:var(--display);font-weight:800;font-size:16px;color:#ffd777; }
  .pfAch{ display:flex;flex-wrap:wrap;gap:6px;justify-content:center; }
  .pfChip{ font-family:var(--display);font-weight:700;font-size:12px;color:#ffd777;
    border:1.5px solid rgba(240,180,60,.5);border-radius:12px;padding:4px 10px;
    background:var(--well);text-shadow:0 1px 2px rgba(0,0,0,.5); }
  .pfBioIn{ width:100%;text-align:left;min-height:56px;resize:none;font-size:13.5px;margin-bottom:8px; }
  .pfSwatches{ display:flex;gap:8px;justify-content:center;margin:2px 0 8px; }
  .pfSw{ width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;
    box-shadow:0 2px 5px rgba(0,0,0,.45); }
  .pfSw.sel{ border-color:#ffd777;box-shadow:0 0 8px rgba(240,180,60,.7); }
  .pfPriv{ display:flex;gap:7px;justify-content:center; }
  .pfPrivBtn{ flex:1;font-family:var(--display);font-weight:700;font-size:12px;color:#c3a9e2;cursor:pointer;
    border:1.5px solid var(--wellBorder);border-radius:12px;padding:7px 4px;background:var(--well); }
  .pfPrivBtn.sel{ color:#ffd777;border-color:var(--goldMid);box-shadow:0 0 8px rgba(240,180,60,.4); }
  #friendsBody.flash{ animation:frFlash 1.2s ease; }
  @keyframes frFlash{ 0%,60%{ box-shadow:0 0 0 3px rgba(240,180,60,.65);border-radius:14px; } 100%{ box-shadow:none; } }
  #online .frRow .frWho{ flex:1;min-width:0;display:flex;flex-direction:column;text-align:left;line-height:1.25; }
  #online .frRow .frWho small{ display:block; }
  /* ---- ornate match room bits ---- */
  .roomP2{ display:flex;align-items:center;gap:9px;padding:8px 12px;margin:6px 0;border-radius:14px;
    border:2px solid transparent;
    background:linear-gradient(180deg,#5b2a8e,#3f1a6b) padding-box,
      linear-gradient(180deg,var(--goldHi),var(--goldMid) 40%,var(--goldLo)) border-box;
    box-shadow:0 3px 8px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,228,158,.22);
    animation:stPop .35s cubic-bezier(.34,1.56,.64,1) both; }
  .roomP2 b{ flex:1;color:#f4ebfd;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .hostTag{ font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#ffd777;
    border:1.5px solid rgba(240,180,60,.55);border-radius:8px;padding:1px 7px;flex:none; }
  .rLabel{ font-size:13px;color:#e9d8f8;font-weight:700; }
  .invBtn{ width:38px;height:38px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;color:#f8cd6a;
    background:linear-gradient(180deg,#6b2fa0,#47207a) padding-box,
      linear-gradient(180deg,var(--goldHi),var(--goldMid) 40%,var(--goldLo)) border-box;
    box-shadow:0 0 0 2px #4a2f08, 0 3px 8px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,228,158,.3);
    display:flex;align-items:center;justify-content:center; }
  .invBtn:active{ transform:scale(.9); }
  .invList{ margin-top:2px; }
  .invRow{ display:flex;align-items:center;gap:9px;padding:6px 10px;margin:5px 0;border-radius:12px;
    background:var(--well);border:1.5px solid var(--wellBorder); }
  .invRow .nm{ flex:1;text-align:left;color:#f0e6fb;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .invAdd{ width:30px;height:30px;border-radius:50%;border:2px solid #c98f1e;cursor:pointer;padding:0;flex:none;
    color:#3a2408;background:linear-gradient(180deg,#ffe1a1,#f0b43c 55%,#d0942a);
    display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,.4); }
  .invAdd.sent{ background:linear-gradient(180deg,#7a3fb3,#5b2a8e);color:#ffd777;border-color:#38155e;cursor:default; }
  /* ---- living hub buttons: subtle motion + a gloss that sweeps the art itself ---- */
  .hubPlay{ position:relative; }
  /* lobby-only breathe: quests, rank and summon gently pulse (staggered durations) */
  #btnQuests img{ animation:hubBreathe 5.2s ease-in-out infinite; }
  #btnChallenge img{ animation:hubBreathe 4.4s ease-in-out infinite; }
  #btnPlay img{ animation:hubBreathe 5s ease-in-out infinite; }
  @keyframes hubBreathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.025)} }
  #btnQuests::after,#btnChallenge::after,#btnPlay::after{ content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(115deg,transparent 40%,rgba(255,250,230,.55) 50%,transparent 60%) no-repeat;
    background-size:260% 100%;background-position:-160% 0;
    animation:shineSweep 5.6s ease-in-out infinite; }
  #btnQuests::after{ -webkit-mask:url(../assets/btn-quests.png) center/contain no-repeat;
    mask:url(../assets/btn-quests.png) center/contain no-repeat;animation-delay:1.8s; }
  #btnChallenge::after{ -webkit-mask:url(../assets/btn-rank.png) center/contain no-repeat;
    mask:url(../assets/btn-rank.png) center/contain no-repeat;animation-delay:3.2s; }
  #btnPlay::after{ -webkit-mask:url(../assets/btn-summon.png) center/contain no-repeat;
    mask:url(../assets/btn-summon.png) center/contain no-repeat;animation-delay:.6s; }
  @keyframes shineSweep{ 0%,58%{background-position:-160% 0;} 82%,100%{background-position:160% 0;} }
  #btnQuests::before,#btnChallenge::before,#btnPlay::before{ content:"✦";position:absolute;color:#ffe08a;
    pointer-events:none;z-index:2;text-shadow:0 0 6px rgba(255,214,110,.9);
    animation:sparkTw 2.8s ease-in-out infinite; }
  #btnPlay::before{ right:11%;top:12%;font-size:15px;animation-delay:.4s; }
  #btnQuests::before{ left:13%;top:15%;font-size:12px;animation-delay:1.2s; }
  #btnChallenge::before{ right:15%;top:17%;font-size:12px;animation-delay:2.1s; }