/* Dhivehi Games: the shared game menu, "D4 Soft glass" (owner-approved 30 Oct 2026, to his reference owner-ref-d4.png).
   Markup: shared/dgmenu.js. One skeleton, one type family (Sora; the Thaana names in Noto Sans Thaana), one set of controls.
   Per game only colour:
     --a / --a-rgb   the accent (Play, the picked chip, icons): white text on it passes AA
     --p1 / --p2     the pastel of the game's LOGO colour: --p1 at the top, --p2 (a shade deeper) in the waves below
     .dgm-dark       a dark accent (Bondi, Raazuvaa): the ad frame is dark
   Layout on an 8 px grid; every control >= 44 px; the controls are anchored to the ad, so Play, Friends / vs Computer,
   the links and the ad sit at the same y on every game; the logo and title take the space that is left (and shrink first). */
.dgm[data-g=digu]{--a:#C42F45;--a-rgb:196,47,69;--p1:#FBE1E5;--p2:#F5C9D1}
.dgm[data-g=bondi]{--a:#34373F;--a-rgb:52,55,63;--p1:#ECEDF1;--p2:#DCDEE5}
.dgm[data-g=ranga]{--a:#B3135C;--a-rgb:179,19,92;--p1:#F8DDE6;--p2:#F0C4D4}
.dgm[data-g=dhihaeh]{--a:#0A6A97;--a-rgb:10,106,151;--p1:#D9F0EE;--p2:#BFE4E1}
.dgm[data-g=thaas]{--a:#4A3FB5;--a-rgb:74,63,181;--p1:#DEE6FB;--p2:#C8D5F6}
.dgm[data-g=binveriya]{--a:#1B7347;--a-rgb:27,115,71;--p1:#DCF0E0;--p2:#C3E5CB}
.dgm[data-g=raajje]{--a:#C2410C;--a-rgb:194,65,12;--p1:#DCEFFA;--p2:#C3E3F5}
.dgm[data-g=raazuvaa]{--a:#6B4226;--a-rgb:107,66,38;--p1:#F2E7DA;--p2:#E7D4BF}
.dgm[data-g=quiz]{--a:#C02A62;--a-rgb:192,42,98;--p1:#FADDE8;--p2:#F3C6D7}
.dgm[data-g=celebrity]{--a:#6B2E8A;--a-rgb:107,46,138;--p1:#EBDFF3;--p2:#DCC8EA}
.dgm[data-g=song]{--a:#0B7480;--a-rgb:11,116,128;--p1:#DDF1EF;--p2:#C3E6E2}

.dgm{--ink:#141417;--ink2:#4A4A55;--card:#fff;--shadow:0 1px 2px rgba(20,20,40,.05),0 10px 24px -14px rgba(20,20,40,.20);--logo:112px;--rim:7px;
 position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;gap:12px;box-sizing:border-box;overflow:hidden;
 padding:calc(8px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
 font-family:Sora,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--ink);text-align:left;direction:ltr;-webkit-tap-highlight-color:transparent;
 background:radial-gradient(90% 38% at 50% 0%,rgba(255,255,255,.7),transparent 75%),linear-gradient(180deg,var(--p1) 0%,var(--p1) 45%,var(--p2) 100%)}
.dgm>*{position:relative;z-index:1;width:100%;max-width:428px;margin-left:auto;margin-right:auto;box-sizing:border-box}
.dgm *{box-sizing:border-box}
.dgm button{font:inherit;color:inherit;border:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.dgm svg{flex:none}
.dgm h1,.dgm p{margin:0}
/* the waves: two masked layers of the deeper pastel across the lower part (no images, no blur, no lines) */
.dgm:before,.dgm:after{content:"";position:absolute;left:0;right:0;bottom:0;pointer-events:none;z-index:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.dgm:before{height:58%;background:var(--p2);opacity:.75;
 -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cpath d='M0 110C80 60 160 70 230 100S350 140 400 85V400H0Z'/%3E%3C/svg%3E");
 mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cpath d='M0 110C80 60 160 70 230 100S350 140 400 85V400H0Z'/%3E%3C/svg%3E")}
.dgm:after{height:34%;background:linear-gradient(180deg,var(--p2),rgba(var(--a-rgb),.10)),var(--p2);
 -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cpath d='M0 80C100 140 180 30 270 62S360 120 400 52V400H0Z'/%3E%3C/svg%3E");
 mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cpath d='M0 80C100 140 180 30 270 62S360 120 400 52V400H0Z'/%3E%3C/svg%3E")}

/* white surfaces: soft, never muddy (one light shadow), no borders */
.dgm .dgm-top>a,.dgm .dgm-top>button,.dgm .dgm-top>span:not(.dgm-sp),.dgm .dgm-seg,.dgm .dgm-btn,.dgm .dgm-link,.dgm .dgm-status{background:var(--card);box-shadow:var(--shadow);color:var(--ink)}

/* 1 the top bar: 44 px */
.dgm .dgm-top{flex:none;height:44px;display:flex;align-items:center;gap:8px}
.dgm .dgm-sp{flex:1}
.dgm .dgm-top>a,.dgm .dgm-top>button,.dgm .dgm-top>span:not(.dgm-sp){position:static;height:44px;min-width:44px;margin:0;padding:0 14px;border-radius:22px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
 text-decoration:none;font:700 16px/1 Sora,system-ui,sans-serif;border:0;outline-offset:2px}
.dgm .dgm-top>a img,.dgm .dgm-top>a svg,.dgm .dgm-top>button svg,.dgm .dgm-top>span img{width:22px;height:22px}
.dgm .dgm-top>a span,.dgm .dgm-top>span span,.dgm .dgm-top>span b{font-weight:700;color:var(--ink)}
.dgm .dgm-back{gap:4px;padding:0 12px 0 8px}
.dgm .dgm-back .dgm-ch{width:22px;height:22px}.dgm .dgm-back .dgm-mk{width:17px;height:22px;color:var(--a)}

/* 2 the brand, centred in the space the controls leave: the logo tile in a thick soft white rim, the title, the Thaana name, the tagline */
.dgm .dgm-brand{flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.dgm .dgm-logo{width:calc(var(--logo) + 2 * var(--rim));height:calc(var(--logo) + 2 * var(--rim));flex:none;padding:var(--rim);border-radius:calc(var(--logo) * .27 + var(--rim));
 background:rgba(255,255,255,.92);box-shadow:0 1px 2px rgba(20,20,40,.06),0 22px 40px -18px rgba(var(--a-rgb),.55),0 12px 24px -16px rgba(20,20,40,.28)}
.dgm .dgm-logo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--logo) * .27)}
.dgm .dgm-t{margin-top:16px!important;width:100%;overflow:hidden;font:800 46px/1.04 Sora,system-ui,sans-serif;letter-spacing:-.04em;color:var(--ink);white-space:nowrap;padding-bottom:2px}
.dgm .dgm-dv{margin-top:2px;font:600 19px/1.5 'Noto Sans Thaana','MV Boli','Dhivehi Muraka',sans-serif;color:var(--ink)}
.dgm .dgm-tag{margin-top:4px!important;font:500 16px/1.4 Sora,system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink2);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 3 the controls: one stack anchored to the ad */
.dgm .dgm-ctl{flex:none;display:flex;flex-direction:column;gap:12px}
.dgm .dgm-seg{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));padding:4px;border-radius:18px}
.dgm .dgm-seg button{position:relative;height:44px;border-radius:14px;background:transparent;color:var(--ink);font:600 15px/1.1 Sora,system-ui,sans-serif;letter-spacing:-.01em;padding:0 4px;white-space:nowrap;
 display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background-color .15s ease,transform .12s ease}
.dgm .dgm-seg button+button:before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:1px;background:rgba(20,20,40,.10)}
.dgm .dgm-seg button[aria-pressed="true"]:before,.dgm .dgm-seg button[aria-pressed="true"]+button:before{display:none}
.dgm .dgm-seg button small{font:600 10px/1 Sora,sans-serif;opacity:.8;margin-top:2px}
.dgm .dgm-seg button[aria-pressed="true"]{background:var(--a);color:#fff;box-shadow:0 6px 14px -8px rgba(var(--a-rgb),.8)}
.dgm .dgm-seg button[aria-disabled="true"]{color:#55555F;cursor:default}
/* mode tabs (owner 5 Nov 2026: "Raajje Run's game menu is very smooth, I need other games to be like that"): one accent pill
   (::after, under the chips) slides to the tapped chip (150 ms ease-out); while it moves the pressed chip shows the pill, not its own fill, and
   the labels cross-fade their colour. At rest the pressed chip has its own fill again (exactly over the pill). */
.dgm .dgm-seg{position:relative;isolation:isolate}
.dgm .dgm-seg.dgm-pl:after{content:"";position:absolute;z-index:-1;top:4px;left:4px;height:calc(100% - 8px);width:calc((100% - 8px) / var(--n));border-radius:14px;
 background:var(--a);box-shadow:0 6px 14px -8px rgba(var(--a-rgb),.8);transform:translateX(calc(var(--i,0) * 100%));transition:transform .15s cubic-bezier(.25,1,.5,1),background-color .15s ease;pointer-events:none}
.dgm .dgm-seg.dgm-pl button{transition:color .12s ease,transform .12s ease}
.dgm .dgm-seg.dgm-slide button[aria-pressed="true"]{background:transparent;box-shadow:none}
.dgm .dgm-seg.dgm-slide button:before{display:none}
/* a menu switched in place (Bondi <-> Ranga Bondi, Dhihaeh <-> Thaas): the new logo and title settle in */
.dgm .dgm-brand.dgm-in{animation:dgmIn .18s cubic-bezier(.25,1,.5,1) both}
@keyframes dgmIn{from{opacity:.35;transform:translateY(6px) scale(.985)}}
/* Play: the one main action, a tactile button with a deep edge you press into, a big white play disc */
.dgm .dgm-play{display:flex;align-items:center;gap:16px;width:100%;height:84px;margin-bottom:6px;padding:12px 18px 12px 12px;border-radius:24px;text-align:left;
 background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 55%),var(--a);color:#fff;
 box-shadow:0 6px 0 rgba(0,0,0,.30),0 6px 0 var(--a),0 20px 32px -14px rgba(var(--a-rgb),.65),inset 0 1px 0 rgba(255,255,255,.30);
 transition:transform .12s cubic-bezier(.2,.8,.2,1),box-shadow .12s ease}
.dgm .dgm-play:active{transform:translateY(5px);box-shadow:0 1px 0 rgba(0,0,0,.30),0 1px 0 var(--a),0 6px 12px -8px rgba(var(--a-rgb),.6),inset 0 1px 0 rgba(255,255,255,.2)}
.dgm .dgm-pi{width:60px;height:60px;border-radius:50%;flex:none;display:grid;place-items:center;background:#fff;color:var(--a);box-shadow:0 4px 10px -4px rgba(0,0,0,.3)}
.dgm .dgm-pi svg{width:26px;height:26px;margin-left:4px}
.dgm .dgm-pt{display:flex;flex-direction:column;min-width:0}
.dgm .dgm-pt b{color:#fff;font:700 24px/1.1 Sora,system-ui,sans-serif;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dgm .dgm-pt small{color:#fff;font:500 14px/1.25 Sora,system-ui,sans-serif;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Friends | vs Computer: pure white soft cards, the icons in the accent */
.dgm .dgm-sec{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dgm .dgm-btn{display:flex;align-items:center;gap:12px;height:64px;padding:0 14px;border-radius:18px;text-align:left;min-width:0;transition:transform .12s ease}
.dgm .dgm-btn svg{width:24px;height:24px;color:var(--a)}
.dgm .dgm-btn span{display:flex;flex-direction:column;min-width:0}
.dgm .dgm-btn b{color:var(--ink);font:600 16px/1.15 Sora,system-ui,sans-serif;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dgm .dgm-btn small{font:500 12px/1.25 Sora,system-ui,sans-serif;color:var(--ink2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* How to play (and Daily): wide white pills */
.dgm .dgm-links{display:flex;justify-content:center;gap:12px}
.dgm .dgm-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:24px;font:600 16px/1 Sora,system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink);transition:transform .12s ease}
.dgm .dgm-links .dgm-link:only-child{min-width:min(260px,100%)}
.dgm .dgm-links .dgm-link:not(:only-child){min-width:0;flex:1 1 0}
.dgm .dgm-link svg{width:20px;height:20px;color:var(--a)}
.dgm .dgm-seg button:active,.dgm .dgm-btn:active,.dgm .dgm-link:active,.dgm .dgm-top>a:active,.dgm .dgm-top>button:active{transform:scale(.97)}
.dgm button:focus-visible,.dgm a:focus-visible{outline:3px solid rgba(var(--a-rgb),.6);outline-offset:2px}
/* a game whose content is not ready yet (Celebrity / Song: loading, out of signal, coming soon) */
.dgm .dgm-status{padding:20px;border-radius:24px}
.dgm .dgm-status h2{margin:0;font:700 20px/1.2 Sora,sans-serif}.dgm .dgm-status p{margin:6px 0 0;font:500 14px/1.45 Sora,sans-serif;color:var(--ink2)}
.dgm .dgm-status .row{display:flex;gap:12px;margin-top:16px}
.dgm .dgm-status .row button{flex:1;height:48px;border-radius:16px;font:700 15px/1 Sora,sans-serif;background:#F1F1F4}
.dgm .dgm-status .row button.am{background:var(--a);color:#fff}

/* 4 the ad, in a calm frame that matches the game: light frosted on light accents, dark on dark ones (Bondi, Raazuvaa).
   Every ad renders exactly as on the homepage (its creative, photo, gradient, logo, wipe and progress bars; hotfix 31 Oct 2026):
   the menu only gives it the rounded frame and the slot */
.dgm .dgm-ad{--adbg:linear-gradient(rgba(255,255,255,.76),rgba(255,255,255,.76)),var(--p1);flex:none;height:96px;padding:0;border-radius:24px;background:var(--adbg);box-shadow:var(--shadow);overflow:hidden}
.dgm .dgm-ad .spbox{margin:0!important;padding:0!important;height:96px}
.dgm .dgm-ad .dgs-box{height:96px!important;margin:0!important;border-radius:24px!important;box-shadow:none!important}
/* smooth like the homepage (owner 5 Nov 2026, extras/qa/menu-ad-smooth): the ad frame is its own compositing layer and paint /
   layout boundary, so the wipe (clip-path), the photo zoom and the word pops redraw only the 96 px slot, never the pastel page,
   the waves or the shadows around it; isolation keeps the rounded clip of the animating layers stable (WebKit) */
.dgm .dgm-ad{isolation:isolate;contain:layout paint style;transform:translateZ(0);backface-visibility:hidden}
/* (the 0.28 s fade-in of v12 is gone, v13: it showed the empty light frame before a dark ad, a flash on opening; every menu
   now builds its ad with the menu, so there is nothing to fade from) */
/* never an empty card (30 Oct 2026, owner's iPhone: a blank white frame on Ranga Bondi). shared/sponsors.js v18 marks the frame:
   off  = no ad for this page (the owner's ad switches, all ads off, the only promos are for this game) -> nothing is drawn and
          nothing is announced, but the frame keeps its place, so Play / Friends / the links stay at the same height on every game;
   wait = this phone's first ads doc is on its way (at most 4 s) -> a calm placeholder: a logo tile and two text lines.
   The same placeholder covers the moment before the page has built its box. */
.dgm .dgm-ad[data-dgs-state=off]{visibility:hidden;pointer-events:none}
.dgm .dgm-ad[data-dgs-state=off] *{visibility:hidden!important}
.dgm .dgm-ad{--sk:rgba(20,20,40,.07)}
.dgm .dgm-ad .spbox:not(.dgs-box),.dgm .dgm-ad .spbox.dgs-wait{position:relative;display:block}
.dgm .dgm-ad .spbox:not(.dgs-box):before,.dgm .dgm-ad .spbox.dgs-wait:before,.dgm .dgm-ad .spbox:not(.dgs-box):after,.dgm .dgm-ad .spbox.dgs-wait:after{content:"";position:absolute;animation:dgm-sk 1.4s ease-in-out infinite alternate}
.dgm .dgm-ad .spbox:not(.dgs-box):before,.dgm .dgm-ad .spbox.dgs-wait:before{left:14px;top:20px;width:56px;height:56px;border-radius:16px;background:var(--sk)}
.dgm .dgm-ad .spbox:not(.dgs-box):after,.dgm .dgm-ad .spbox.dgs-wait:after{left:84px;top:30px;width:min(52%,210px);height:36px;border-radius:7px;
 background:linear-gradient(var(--sk),var(--sk)) 0 0/100% 14px no-repeat,linear-gradient(var(--sk),var(--sk)) 0 24px/64% 12px no-repeat}
@keyframes dgm-sk{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.dgm .dgm-ad .spbox:before,.dgm .dgm-ad .spbox:after{animation:none}}
.dgm[data-g=bondi] .dgm-ad{--adbg:#2B2D34;--sk:rgba(255,255,255,.12)}
.dgm[data-g=raazuvaa] .dgm-ad{--adbg:#3A2C22;--sk:rgba(255,255,255,.12)}

/* performance: no backdrop blur anywhere (the frame is an opaque tint), so low-end phones draw the menu as cheaply as a flat page */

/* shorter phones: the logo and the title shrink first; the controls never do */
@media (max-height:800px){.dgm{--logo:96px;--rim:6px}.dgm .dgm-t{font-size:42px;margin-top:12px!important}.dgm .dgm-tag{font-size:15px}}
@media (max-height:740px){.dgm{--logo:80px;--rim:5px;gap:10px}.dgm .dgm-ctl{gap:10px}.dgm .dgm-sec{gap:10px}.dgm .dgm-t{font-size:38px;margin-top:10px!important}.dgm .dgm-dv{font-size:17px;line-height:1.4}.dgm .dgm-tag{font-size:14px;margin-top:2px!important}}
@media (max-height:700px){.dgm{--logo:64px;--rim:4px}.dgm .dgm-t{font-size:34px;margin-top:8px!important}.dgm .dgm-dv{font-size:16px;line-height:1.3}}
/* phones in landscape: the brand on the left, the controls and the ad on the right; the menu scrolls if it has to */
@media (orientation:landscape) and (max-height:560px){
 .dgm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);grid-template-rows:auto auto 1fr auto;column-gap:24px;overflow-y:auto;align-content:start;--logo:72px;--rim:5px}
 .dgm>*{max-width:none}
 .dgm .dgm-top{grid-column:1/-1}
 .dgm .dgm-brand{grid-column:1;grid-row:2/5;align-self:center}
 .dgm .dgm-ctl{grid-column:2;grid-row:2}
 .dgm .dgm-ad{grid-column:2;grid-row:4;margin-top:12px}
 .dgm .dgm-t{font-size:34px}}
@media (prefers-reduced-motion:reduce){
 .dgm *{transition:none!important}
 .dgm .dgm-seg.dgm-pl:after{transition:none!important}.dgm .dgm-brand.dgm-in{animation:none}
 .dgm .dgm-play:active{transform:none;filter:brightness(.92)}
 .dgm .dgm-seg button:active,.dgm .dgm-btn:active,.dgm .dgm-link:active,.dgm .dgm-top>a:active,.dgm .dgm-top>button:active{transform:none;filter:brightness(.94)}}
/* narrow phones (360 px): the same controls, a little tighter inside, so nothing is cut or wrapped */
@media (max-width:374px){.dgm .dgm-btn{gap:8px;padding:0 10px}.dgm .dgm-btn svg{width:20px;height:20px}.dgm .dgm-btn b{font-size:15px}.dgm .dgm-btn small{font-size:11.5px}
 .dgm .dgm-link{padding:0 14px;font-size:15px;white-space:nowrap}.dgm .dgm-link svg{width:18px;height:18px}.dgm .dgm-seg button{font-size:14px}.dgm .dgm-pt b{font-size:22px}}
/* the tagline is for screen readers only (owner 30 Oct 2026: the Thaana name stays, the English line goes) */
.dgm .dgm-sr{position:absolute!important;width:1px;height:1px;margin:-1px!important;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* chips (owner 4 Nov 2026: "Boli and the ping the same size everywhere, smaller, less bold, minimal"): the Boli chip in every
   game menu is the one chip of shared/ping.js and the home: 36 px tall (a 44 px tap target), 18 px radius, a 16 px shell,
   the number 14 px semibold, a quiet shadow. The games hand their Boli chip in as .shellpill / .bp / a.boli / #boliChip. */
.dgm .dgm-top>.dgm-sp~:is(.shellpill,.bp,a.boli,#boliChip){position:relative!important;height:36px!important;min-width:0!important;box-sizing:border-box;padding:0 12px 0 9px!important;gap:6px!important;border-radius:18px!important;
 display:inline-flex!important;align-items:center;font:600 14px/1 Sora,system-ui,sans-serif!important;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:#1D1B26!important;
 background:#fff!important;border:0!important;box-shadow:0 1px 2px rgba(20,20,40,.06),0 4px 12px -6px rgba(20,20,40,.24)!important;text-shadow:none!important;align-self:center}
.dgm .dgm-top>.dgm-sp~:is(.shellpill,.bp,a.boli,#boliChip)::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px}
.dgm .dgm-top>.dgm-sp~:is(.shellpill,.bp,a.boli,#boliChip) :is(img,svg){width:16px!important;height:16px!important;flex:none;filter:none!important}
.dgm .dgm-top>.dgm-sp~:is(.shellpill,.bp,a.boli,#boliChip) :is(span,b){font:inherit!important;color:inherit!important}
/* minimal clean-up (9 Nov 2026, A15/A16): no grey subtitle under the menu buttons; Play's line only for a live count */
.dgm .dgm-pt small:empty,.dgm .dgm-btn small{display:none}