/* منجنيف | Mnjnef — the parts of the site added in 0.9.0: the animated logo and the opening, the notice
   bar, accounts (login, register, the account panel, the wallet), the search page and player cards, the
   public chat with its emoji picker, and the control panel of the staff.
   The base (colours, buttons, tiles, pages) is in index.html. Everything here works right-to-left and on
   phones (the rules for small screens are at the end). */

/* an element with the hidden attribute is never shown, whatever display its class gives it */
[hidden] { display:none !important; }

/* the site feels like an app: its text is not selected, and a long press brings no «copy / search» bubble.
   What a player has to write or to copy stays free: the boxes they type in, the codes shown to them (two-step,
   recovery), and the staff's control panel. (This is tidiness, not a lock: the code of a page is always readable.) */
html, body { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
input, textarea, select, [contenteditable], .codebox, .codebox *, #page-admin, #page-admin * { -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
#page-admin button, #page-admin .pill, #page-admin img { -webkit-user-select:none; user-select:none; }

/* ---------- the living backdrop (src/backdrop.js) ----------
   A quiet, matte backdrop (soft fields of muted colour) is drawn behind everything; the body lets it through. On the lowest level (and wherever the
   graphics card cannot) a painted sky drifts instead: gradients only, moved with transform, so it costs nothing. */
#backdrop, #backlite { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
#backlite { display:none; overflow:hidden; background:linear-gradient(160deg, #0d0c14 0%, #0c0d15 50%, #0a0e17 100%); }
html.gfx-lite #backlite { display:block; }
#backlite::after { content:""; position:absolute; inset:-30%; will-change:transform; animation:bldrift 34s ease-in-out infinite alternate;
  background:radial-gradient(42% 36% at 28% 38%, rgba(120,36,56,.42), transparent 72%), radial-gradient(40% 34% at 74% 60%, rgba(44,52,128,.46), transparent 72%), radial-gradient(34% 30% at 58% 20%, rgba(28,84,100,.32), transparent 72%), radial-gradient(30% 28% at 20% 78%, rgba(88,46,110,.32), transparent 72%); }
/* black with dust (the lowest level): two sheets of tiny pale dots that slide slowly, one faster than the other */
html.bd-black #backlite { background:#050506; } html.bd-black #backlite::before, html.bd-black #backlite::after { display:none; }
html.bd-black, html.bd-dust { --bg:#070708; --bg2:#0d0d0f; --card:#141417; --card2:#1c1c20; --card3:#28282d; --line:#232327; }
html.bd-dust #backlite { background:linear-gradient(125deg, #060607 0%, #0d0d0f 48%, #060607 100%); }
html.bd-dust #backlite::before, html.bd-dust #backlite::after { content:""; position:absolute; inset:-50%; will-change:transform; opacity:.8;
  background-image:radial-gradient(1.4px 1.4px at 31px 47px, rgba(245,238,222,.75), transparent), radial-gradient(1px 1px at 133px 89px, rgba(245,238,222,.5), transparent), radial-gradient(2px 2px at 201px 171px, rgba(245,238,222,.4), transparent), radial-gradient(1px 1px at 77px 213px, rgba(245,238,222,.6), transparent), radial-gradient(1.6px 1.6px at 251px 29px, rgba(245,238,222,.45), transparent);
  background-size:290px 260px; animation:bldust 70s linear infinite; }
html.bd-dust #backlite::after { background-size:410px 370px; opacity:.55; animation-duration:44s; animation-direction:reverse; }
@keyframes bldust { from { transform:translate3d(0, 0, 0); } to { transform:translate3d(-290px, 260px, 0); } }
/* the grey page: flat neutral greys for the page, the bars and the cards (our own shades), and nothing behind them */
html.bd-slate { --bg:#232529; --bg2:#1b1d20; --card:#2e3035; --card2:#393c42; --card3:#474a51; --line:#3e4148; --muted:#a9adb6; }
html.bd-slate #backlite { background:linear-gradient(180deg, #26282c 0%, #212327 100%); } html.bd-slate #backlite::before, html.bd-slate #backlite::after { display:none; }
html.bd-slate .topbar, html.bd-slate .tabbar { background:#1b1d20 !important; -webkit-backdrop-filter:none; backdrop-filter:none; } html.bd-slate .side { background:#1f2124 !important; -webkit-backdrop-filter:none; backdrop-filter:none; }      /* (solid: the glass rules for the other styles come later in this file) */
/* the party room (the lowest level): violet haze, a cold lamp above, and balloons painted as soft balls of colour */
html.bd-party #backlite { background:radial-gradient(40% 30% at 50% 46%, rgba(130,110,255,.75), transparent 100%), radial-gradient(18% 5% at 50% 12%, rgba(120,240,255,.9), transparent 100%), linear-gradient(180deg, #1c1836 0%, #2a2356 45%, #17323c 70%, #0d1a22 100%); }
html.bd-party #backlite::after { inset:0; animation:bldrift 16s ease-in-out infinite alternate;
  background:radial-gradient(circle at 14% 24%, #ff4a9c 0, #b81c66 34px, transparent 36px), radial-gradient(circle at 82% 18%, #ffa02c 0, #b8620c 38px, transparent 40px), radial-gradient(circle at 60% 30%, #46d868 0, #1c8a38 26px, transparent 28px), radial-gradient(circle at 30% 34%, #38a8ff 0, #145fb0 24px, transparent 26px), radial-gradient(circle at 12% 84%, #b060ff 0, #6a24b8 34px, transparent 36px), radial-gradient(circle at 86% 86%, #f0dc38 0, #a8940c 32px, transparent 34px); }
html.bd-party main { text-shadow:0 1px 2px rgba(8,4,24,.85); --muted:#cfcbe6; }
html.bd-party main input, html.bd-party main textarea, html.bd-party main select { text-shadow:none; }
/* the red corridor (the lowest level): the glow of the doorway in the dark, breathing, and one chain across it */
html.bd-chains #backlite { background:radial-gradient(34% 30% at 50% 52%, #ff2a1c 0%, #b50a08 45%, rgba(90,0,4,.6) 75%, transparent 100%), radial-gradient(90% 80% at 50% 50%, #3c0004 0%, #120002 70%, #060001 100%); }
html.bd-chains #backlite::before { content:""; position:absolute; left:-25%; right:-25%; top:-34%; height:74%; border-bottom:8px dashed rgba(10,0,2,.96); border-radius:0 0 50% 50%; }
html.bd-chains #backlite::after { inset:0; animation:blflick 3.4s ease-in-out infinite alternate; background:radial-gradient(60% 50% at 50% 55%, rgba(255,40,30,.3), transparent 100%); }
html.bd-chains main { text-shadow:0 1px 2px rgba(8,0,1,.9); --muted:#d6c3c3; }
html.bd-chains main input, html.bd-chains main textarea, html.bd-chains main select { text-shadow:none; }
/* the stage lamp (the lowest level): the oval of light on the floor, and a cone of light above it that breathes */
html.bd-spot #backlite { background:radial-gradient(62% 13% at 50% 79%, rgba(255,226,176,.8), rgba(200,150,90,.25) 60%, transparent 100%), linear-gradient(180deg, #0b0705 0%, #1b120b 70%, #2a1c10 71%, #0d0806 100%); }
html.bd-spot #backlite::after { inset:0; animation:blflick 5s ease-in-out infinite alternate; -webkit-clip-path:polygon(41% 0, 59% 0, 88% 72%, 12% 72%); clip-path:polygon(41% 0, 59% 0, 88% 72%, 12% 72%);
  background:linear-gradient(90deg, transparent 12%, rgba(232,184,118,.2) 30%, rgba(255,222,165,.62) 50%, rgba(232,184,118,.2) 70%, transparent 88%); }
html.bd-spot main { text-shadow:0 1px 2px rgba(10,6,2,.85); --muted:#d0c6b8; }
html.bd-spot main input, html.bd-spot main textarea, html.bd-spot main select { text-shadow:none; }
/* the gate of the house of horrors (the lowest level): teal night above, the door's violet mist in the middle, the red
   of two lanterns at its sides, dark wet ground below; the lights flicker */
html.bd-haunt #backlite { background:radial-gradient(34% 26% at 50% 60%, rgba(170,140,255,.85), rgba(110,90,230,.3) 55%, transparent 100%), linear-gradient(180deg, transparent 0 66%, rgba(20,8,16,.92) 66%, #0a0509 100%), linear-gradient(180deg, #03141b 0%, #0a1c26 38%, #2c0713 62%, #1a0810 100%); }
html.bd-haunt #backlite::after { inset:0; animation:blflick 2.6s ease-in-out infinite alternate;
  background:radial-gradient(circle at 18% 56%, rgba(255,30,60,.6), transparent 24%), radial-gradient(circle at 82% 56%, rgba(255,30,60,.6), transparent 24%), radial-gradient(70% 16% at 50% 68%, rgba(150,120,255,.4), transparent 100%), radial-gradient(30% 22% at 50% 88%, rgba(140,110,255,.3), transparent 100%); }
html.bd-haunt main { text-shadow:0 1px 2px rgba(6,2,10,.85); --muted:#c6c0d2; }
html.bd-haunt main input, html.bd-haunt main textarea, html.bd-haunt main select { text-shadow:none; }
/* the palace at night (the lowest level): a moon in purple dusk, the dark floor below, the warm light of two lanterns */
html.bd-palace #backlite { background:radial-gradient(circle at 56% 24%, #fff3d0 0, #fff3d0 13px, rgba(255,236,190,.16) 15px, transparent 70px), linear-gradient(180deg, transparent 0 60%, rgba(52,20,62,.9) 60%, #1a0f22 100%), linear-gradient(180deg, #0c0b26 0%, #2a1440 45%, #45203f 60%); }
html.bd-palace #backlite::after { inset:0; animation:blflick 3.2s ease-in-out infinite alternate;
  background:radial-gradient(circle at 16% 20%, rgba(255,170,70,.5), transparent 26%), radial-gradient(circle at 84% 20%, rgba(255,170,70,.5), transparent 26%), radial-gradient(60% 30% at 50% 82%, rgba(150,70,170,.35), transparent 100%); }
@keyframes blflick { from { opacity:.75; } to { opacity:1; } }
html.bd-palace main { text-shadow:0 1px 2px rgba(10,4,20,.8); --muted:#c9c2d6; }
html.bd-palace main input, html.bd-palace main textarea, html.bd-palace main select { text-shadow:none; }
/* the blue waves (the lowest level): deep blue with broad soft sheets of lighter blue that drift */
html.bd-wave #backlite { background:radial-gradient(90% 70% at 20% 10%, rgba(40,140,255,.5), transparent 65%), linear-gradient(155deg, #002a70 0%, #0047a8 55%, #0668d0 100%); }
html.bd-wave #backlite::after { animation-duration:24s;
  background:radial-gradient(ellipse 60% 9% at 40% 46%, rgba(120,190,255,.34), transparent 100%), radial-gradient(ellipse 55% 7% at 62% 56%, rgba(60,150,255,.4), transparent 100%), radial-gradient(ellipse 50% 6% at 46% 66%, rgba(150,210,255,.22), transparent 100%), radial-gradient(ellipse 46% 5% at 58% 36%, rgba(30,110,230,.45), transparent 100%); }
html.bd-wave main { text-shadow:0 1px 2px rgba(0,16,54,.7); --muted:#c5d3ea; }
html.bd-wave main input, html.bd-wave main textarea, html.bd-wave main select { text-shadow:none; }
/* the blue sky (the lowest level): painted clouds on a strip twice as wide as the screen that slides by, for ever */
html.bd-sky #backlite { background:linear-gradient(180deg, #1c6fdc 0%, #4a9ce8 55%, #86c4f5 100%); }
html.bd-sky #backlite::after { inset:0 auto 0 0; width:200%; animation:blclouds 90s linear infinite;
  background:radial-gradient(ellipse 9% 7% at 8% 22%, rgba(255,255,255,.95), transparent 100%), radial-gradient(ellipse 7% 5% at 14% 25%, rgba(255,255,255,.9), transparent 100%), radial-gradient(ellipse 11% 6% at 30% 58%, rgba(255,255,255,.85), transparent 100%), radial-gradient(ellipse 6% 5% at 37% 54%, rgba(255,255,255,.9), transparent 100%), radial-gradient(ellipse 8% 5% at 44% 84%, rgba(240,247,255,.8), transparent 100%),
    radial-gradient(ellipse 9% 7% at 58% 22%, rgba(255,255,255,.95), transparent 100%), radial-gradient(ellipse 7% 5% at 64% 25%, rgba(255,255,255,.9), transparent 100%), radial-gradient(ellipse 11% 6% at 80% 58%, rgba(255,255,255,.85), transparent 100%), radial-gradient(ellipse 6% 5% at 87% 54%, rgba(255,255,255,.9), transparent 100%), radial-gradient(ellipse 8% 5% at 94% 84%, rgba(240,247,255,.8), transparent 100%); }
@keyframes blclouds { from { transform:translate3d(-50%, 0, 0); } to { transform:translate3d(0, 0, 0); } }
/* over a bright sky the words that lie straight on the backdrop need a soft dark edge, and the grey ones a lighter grey */
html.bd-sky main { text-shadow:0 1px 2px rgba(0,20,60,.85), 0 0 9px rgba(0,26,74,.55); --muted:#d3dceb; }
html.bd-sky main input, html.bd-sky main textarea, html.bd-sky main select { text-shadow:none; }
html.bd-gold #backlite { background:linear-gradient(160deg, #0e0c0a 0%, #0d0b09 60%, #0b0a0b 100%); }
html.bd-gold #backlite::after { background:radial-gradient(42% 36% at 28% 38%, rgba(132,92,40,.4), transparent 72%), radial-gradient(40% 34% at 74% 60%, rgba(70,42,28,.5), transparent 72%), radial-gradient(34% 30% at 58% 20%, rgba(110,84,48,.3), transparent 72%); }
html.bd-plain #backlite { background:linear-gradient(180deg, #101116 0%, #0d0e12 100%); } html.bd-plain #backlite::after { display:none; }
@keyframes bldrift { from { transform:translate3d(-6%, -3%, 0) rotate(-4deg); } to { transform:translate3d(6%, 4%, 0) rotate(5deg); } }
html[class*="gfx-"] body { background:transparent; }
/* the bars are glass over it (the lowest level keeps them solid: blurring is what a weak phone cannot afford) */
html.gfx-medium .topbar, html.gfx-high .topbar, html.gfx-ultra .topbar { background:rgba(13,14,19,.66); }
html.gfx-medium .tabbar, html.gfx-high .tabbar, html.gfx-ultra .tabbar { background:rgba(13,14,19,.74); }
html.gfx-medium .side, html.gfx-high .side, html.gfx-ultra .side { background:rgba(19,21,27,.62); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
html.gfx-low .side { background:rgba(19,21,27,.9); }
.defs { position:absolute; width:0; height:0; overflow:hidden; }

/* medals and tab icons made solid by the graphics card (gems.js puts a canvas before the line drawing) */
.gem { flex:none; pointer-events:none; vertical-align:middle; } svg.gemmed { display:none !important; }
.medalgem { animation:medalturn 5.5s ease-in-out infinite; transform-origin:50% 50%; }
.badge.locked .medalgem { animation:none; }
@keyframes medalturn { 0%, 100% { transform:perspective(220px) rotateY(-16deg); filter:brightness(1); } 50% { transform:perspective(220px) rotateY(16deg); filter:brightness(1.14); } }
.pill:hover > .gem { transform:scale(1.12) rotate(-5deg); } .pill > .gem { transition:transform .16s; } .pill.on > .gem { filter:drop-shadow(0 0 5px rgba(160,200,255,.55)); }
@media (prefers-reduced-motion:reduce) { .medalgem { animation:none; } }

/* the icons of the menus are small 3D solids drawn by the graphics card (backdrop.js puts a canvas before each
   drawn icon; where the card cannot, the drawn icon stays) */
.ic3 { display:none; flex:none; width:30px; height:30px; pointer-events:none; }
html.has-ic3 .ic3 { display:block; } html.has-ic3 .ic3 + .ic { display:none; }
#sideNav .ic3 { width:34px; height:34px; margin:-7px 0; transition:transform .18s; } #sideNav button:hover .ic3 { transform:scale(1.15); }
#tabBar .ic3 { width:32px; height:32px; margin:-3px 0 -4px; transition:transform .15s; } #tabBar button:active .ic3 { transform:scale(.86); } #tabBar button.on .ic3 { transform:translateY(-2px) scale(1.12); }
.lhead .pill .ic3 { width:32px; height:32px; margin:-5px 0 -4px; }

/* the icon of the open page: a stroke of three colours with a glow, and it pops when chosen */
#sideNav button.on .ic, #tabBar button.on .ic { stroke:url(#gIcon); filter:drop-shadow(0 0 6px rgba(255,93,108,.6)); animation:icpop .5s cubic-bezier(.2,1.7,.4,1); }
#sideNav button .ic, #tabBar button .ic { transition:transform .18s; } #sideNav button:hover .ic { transform:scale(1.14) rotate(-6deg); } #tabBar button:active .ic { transform:scale(.86); }
@keyframes icpop { 0% { transform:scale(.5) rotate(-18deg); } 60% { transform:scale(1.22) rotate(6deg); } 100% { transform:none; } }

/* a page comes in: its parts rise one after the other */
.page:not([hidden]) > * { animation:pagein .5s cubic-bezier(.2,.8,.2,1) both; }
.page:not([hidden]) > *:nth-child(2) { animation-delay:.05s; } .page:not([hidden]) > *:nth-child(3) { animation-delay:.1s; } .page:not([hidden]) > *:nth-child(4) { animation-delay:.15s; } .page:not([hidden]) > *:nth-child(n+5) { animation-delay:.2s; }
@keyframes pagein { from { opacity:0; transform:translateY(16px) scale(.985); } to { opacity:1; transform:none; } }

/* the logo: on strong devices the letter is a solid of metal drawn by the graphics card; everywhere it glows */
.brand .logo { animation:logoglow 4.5s ease-in-out infinite; }
.brand .logo .logo3d { position:absolute; inset:0; width:100%; height:100%; }
.brand .logo.has3d { background:radial-gradient(circle at 30% 25%, #ff5a66, #a3121f 55%, #4a0810); } .brand .logo.has3d b { visibility:hidden; }
@keyframes logoglow { 0%, 100% { box-shadow:0 4px 14px rgba(239,68,68,.35); } 50% { box-shadow:0 4px 18px rgba(239,68,68,.48); } }
@media (prefers-reduced-motion:reduce) { .page:not([hidden]) > *, #sideNav button.on .ic, #tabBar button.on .ic, #backlite::after, .brand .logo { animation:none; } }

/* ---------- the logo: a catapult arm that throws the letter M ---------- */
.brand .logo { position:relative; overflow:hidden; }
.brand .logo b { display:block; font:inherit; animation:mdrop .9s cubic-bezier(.2,1.5,.4,1) both; }
.brand:hover .logo b { animation:mhop .5s ease; }
@keyframes mdrop { from { transform:translateY(-140%) rotate(-25deg); } }
@keyframes mhop { 40% { transform:translateY(-22%) rotate(-8deg); } }

/* ---------- the opening scene: an old wooden door that opens into light (drawn in 3D by src/door.js) ----------
   boot.js puts "intro" on <html> before the page is drawn, so the home screen never flashes first. */
#intro { position:fixed; inset:0; z-index:300; display:none; background:#05060a; overflow:hidden; cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none; }
html.intro #intro { display:block; }
html.intro body { overflow:hidden; }
/* while the game's code is still coming: only the crack of light between the two leaves */
#intro::before { content:""; position:absolute; left:50%; top:32%; width:3px; height:36%; margin-left:-1px; border-radius:3px; background:linear-gradient(transparent, #e9edf5 30%, #fff 50%, #e9edf5 70%, transparent); filter:blur(1.5px); opacity:.55; animation:introSeam 2.2s ease-in-out infinite; transition:opacity .6s ease; }
#intro.ready::before { opacity:0; animation:none; }
#intro canvas { position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .9s ease; }
#intro.ready canvas { opacity:1; }
/* behind the door: the light goes out to black, and the name of the site falls into place like the title of a film.
   The letters are big and heavy. Each comes down from above the screen, stretched by its speed, and hits: it is
   squashed flat for a moment, light bursts round it, sparks fly up from under it and a line of light runs out along
   the ground (door.js shakes the whole name, flashes the screen and plays the rush and the blow at the same
   moments: the times here and there must stay the same). The Arabic letters fall first, from the right, then the
   Latin ones. When the last has landed the joined-up name takes the place of the separate letters, flares, a long
   streak of light crosses it, and the picture moves slowly in on it between two thin bars. */
#intro .veil { position:absolute; inset:0; background:radial-gradient(circle at 50% 46%, #fff 0, #fff 42%, #f3f4f7 100%); opacity:0; pointer-events:none; }
#intro .veil::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, #0d0d12 0, #000 68%); opacity:0; transition:opacity .4s ease; }
#intro.lit .veil::after { opacity:1; }
#intro .veil::before { content:""; position:absolute; inset:0; z-index:1; opacity:0; transition:opacity 1.2s ease .2s;
  background:linear-gradient(180deg, #000 0 9%, rgba(255,255,255,.16) 9% calc(9% + 1px), transparent calc(9% + 1px) calc(91% - 1px), rgba(255,255,255,.16) calc(91% - 1px) 91%, #000 91% 100%); }
#intro.lit .veil::before { opacity:1; }
#intro .flash { position:absolute; inset:0; opacity:0; pointer-events:none; background:radial-gradient(60% 46% at var(--x, 50%) 50%, rgba(255,255,255,.95), rgba(190,215,255,.35) 45%, transparent 75%); }
#intro .word { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:.12em; text-align:center; font-weight:900; font-size:clamp(3.6rem, 22vw, 10rem); line-height:1.22; color:#fff; pointer-events:none; visibility:hidden; }
#intro.lit .word { visibility:visible; }
#intro .word b, #intro .word span { position:relative; display:block; white-space:nowrap; font-weight:900; }
#intro .word span { direction:ltr; font:900 .4em/1.25 "Arial Black", Arial, sans-serif; letter-spacing:.3em; padding-left:.3em; color:#f1f2f6; }
#intro .word i { position:relative; display:inline-block; font-style:normal; opacity:0; transform:translateY(-140vh); will-change:transform; transform-origin:50% 88%; }
/* under each letter: the line of light along the ground, and the sparks */
#intro .word i::after { content:""; position:absolute; left:-70%; right:-70%; bottom:.14em; height:3px; border-radius:3px; background:radial-gradient(closest-side, #fff, rgba(200,220,255,.5) 40%, rgba(255,255,255,0)); opacity:0; transform:scaleX(.05); }
#intro .word i::before { content:""; position:absolute; left:-40%; right:-40%; bottom:.1em; height:.7em; opacity:0; transform-origin:50% 100%;
  background:radial-gradient(2.5px 2.5px at 12% 82%, #fff, transparent), radial-gradient(2px 2px at 27% 52%, #dfeaff, transparent), radial-gradient(3px 3px at 41% 70%, #fff, transparent), radial-gradient(2px 2px at 58% 44%, #fff, transparent), radial-gradient(2.5px 2.5px at 73% 66%, #dfeaff, transparent), radial-gradient(2px 2px at 88% 84%, #fff, transparent), radial-gradient(1.5px 1.5px at 50% 22%, #fff, transparent); }
#intro.lit .word i { animation:letterFall .42s linear both, letterGlow 1.2s ease-out both; animation-delay:calc(var(--n) * .22s + .3s), calc(var(--n) * .22s + .6s); }
#intro.lit .word i::after { animation:letterLine .6s ease-out both; animation-delay:calc(var(--n) * .22s + .6s); }
#intro.lit .word i::before { animation:letterSparks .7s ease-out both; animation-delay:calc(var(--n) * .22s + .6s); }
#intro.lit .word span i { animation-duration:.36s, 1s; animation-delay:calc(var(--n) * .12s + 2s), calc(var(--n) * .12s + 2.26s); }
#intro.lit .word span i::after, #intro.lit .word span i::before { animation-delay:calc(var(--n) * .12s + 2.26s); }
#intro .word i:nth-child(1) { --n:0; } #intro .word i:nth-child(2) { --n:1; } #intro .word i:nth-child(3) { --n:2; } #intro .word i:nth-child(4) { --n:3; } #intro .word i:nth-child(5) { --n:4; } #intro .word i:nth-child(6) { --n:5; }
@keyframes letterFall {
  0% { opacity:1; transform:translateY(-140vh) scale(.92, 1.7); animation-timing-function:cubic-bezier(.7, 0, 1, .7); }
  72% { opacity:1; transform:translateY(.06em) scale(1.2, .66); animation-timing-function:ease-out; }
  86% { opacity:1; transform:translateY(-.07em) scale(.95, 1.09); animation-timing-function:ease-in-out; }
  100% { opacity:1; transform:none; } }
@keyframes letterGlow { 0% { text-shadow:0 0 .06em #fff, 0 0 .35em #fff, 0 0 1em rgba(170,205,255,.95), 0 0 2em rgba(120,170,255,.6); } 100% { text-shadow:0 0 .2em rgba(255,255,255,.28); } }
@keyframes letterLine { 0% { opacity:1; transform:scaleX(.05); } 100% { opacity:0; transform:scaleX(1.6); } }
@keyframes letterSparks { 0% { opacity:1; transform:scale(.35, .2); } 60% { opacity:.9; } 100% { opacity:0; transform:scale(1.5, 1.7) translateY(-.25em); } }
/* the joined-up name, laid exactly over the separate letters */
#intro .word em { position:absolute; left:50%; top:0; transform:translateX(-50%); font-style:normal; white-space:nowrap; opacity:0;
  background:linear-gradient(100deg, #e3e6ec 0%, #e3e6ec 42%, #fff 50%, #e3e6ec 58%, #e3e6ec 100%) 120% 0 / 260% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
#intro .word b::after { content:""; position:absolute; left:-30%; right:-30%; top:54%; height:2px; border-radius:2px; opacity:0; transform:scaleX(.1); background:radial-gradient(closest-side, #fff, rgba(170,205,255,.7) 30%, rgba(255,255,255,0)); box-shadow:0 0 18px 3px rgba(170,205,255,.55); }
#intro.named .word b i { visibility:hidden; }
#intro.named .word em { opacity:1; animation:nameFlare 1.4s ease-out both, nameLight 1.6s ease-in-out .15s both; }
#intro.named .word b::after { animation:nameStreak 1.5s ease-out both; }
#intro.named .word { animation:namePush 2.6s ease-out both; }
#intro.named .word span i { text-shadow:0 0 .3em rgba(255,255,255,.55); transition:text-shadow .6s ease; }
@keyframes nameFlare { 0% { filter:drop-shadow(0 0 .02em #fff) drop-shadow(0 0 .45em #fff) drop-shadow(0 0 1.1em rgba(170,205,255,.9)); } 100% { filter:drop-shadow(0 0 .14em rgba(255,255,255,.34)); } }
@keyframes nameLight { from { background-position:120% 0; } to { background-position:-20% 0; } }
@keyframes nameStreak { 0% { opacity:0; transform:scaleX(.1); } 18% { opacity:1; transform:scaleX(1); } 100% { opacity:0; transform:scaleX(1.25); } }
@keyframes namePush { from { transform:scale(1); } to { transform:scale(1.07); } }
@media (prefers-reduced-motion:reduce) { #intro.lit .word i { animation:none; opacity:1; transform:none; } #intro.lit .word i::after, #intro.lit .word i::before, #intro.named .word b::after { animation:none; } #intro.named .word, #intro.named .word em { animation:none; } }
#intro .hint { position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom, 0px) + 9vh); text-align:center; color:#f6e6c4; font-weight:800; font-size:clamp(1.05rem, 4.6vw, 1.35rem); text-shadow:0 2px 14px #000, 0 0 3px #000; opacity:0; transition:opacity .5s ease; pointer-events:none; }
#intro .hint b { display:inline-block; font-weight:400; animation:introTap 1.1s ease-in-out infinite; }
#intro.ready[data-state=wait] .hint { opacity:1; }
#intro .skip { position:absolute; top:calc(env(safe-area-inset-top, 0px) + 12px); left:14px; padding:7px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(10,10,14,.5); color:#d8dbe3; font:700 .82rem var(--font); cursor:pointer; opacity:.75; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
#intro .skip:hover { opacity:1; }
#intro.lit .skip, #intro.out .skip { display:none; }
#intro.out { opacity:0; pointer-events:none; transition:opacity .8s ease; }
#intro[data-state=skip].out { transition-duration:.4s; }
@keyframes introSeam { 50% { opacity:.9; transform:scaleX(1.6); } }
@keyframes introTap { 50% { transform:translateY(-7px) rotate(-8deg); } }
@media (prefers-reduced-motion:reduce) { .brand .logo b { animation:none; } }

/* ---------- a notice from the staff, under the top bar ---------- */
.announce { display:flex; align-items:center; gap:10px; padding:10px 14px; margin-bottom:16px; border-radius:12px; font-weight:700; line-height:1.6; border:1px solid rgba(59,108,255,.4); background:linear-gradient(90deg, rgba(59,108,255,.18), transparent); }
.announce[hidden] { display:none; }
.announce > span { flex:1; min-width:0; } .announce .btn { flex:none; }
.announce .x { flex:none; background:none; border:0; color:var(--muted); font-size:15px; font-weight:800; cursor:pointer; padding:2px 6px; border-radius:8px; line-height:1; } .announce .x:hover { color:#fff; background:rgba(255,255,255,.1); }
.announce.good { border-color:rgba(0,180,110,.45); background:linear-gradient(90deg, rgba(0,180,110,.18), transparent); }
.announce.warn { border-color:rgba(251,191,36,.5); background:linear-gradient(90deg, rgba(251,191,36,.18), transparent); }
.announce .ic { width:20px; height:20px; flex:none; color:#93c5fd; } .announce.good .ic { color:#6ee7b7; } .announce.warn .ic { color:#fbbf24; }

/* ---------- small shared pieces ---------- */
.role { display:inline-flex; align-items:center; gap:3px; font-size:.68rem; font-weight:900; padding:1px 7px; border-radius:999px; vertical-align:middle; white-space:nowrap; }
/* the mark of a real member of the staff next to a name: a blue seal with a white check (gold for the owner) */
.verified { display:inline-flex; vertical-align:middle; color:#1d9bf0; margin-inline:3px 2px; line-height:1; }
.verified .ic { width:1.2em; height:1.2em; vertical-align:0; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.verified.gold { color:#f5b301; }
/* the look of the staff: the name in the staff colour and a ring round the picture (blue; gold for the owner) */
.lm.staff .lh b { color:#5cb8ff; } .lm.staff.owner .lh b { color:#fbd15a; }
.lm.staff > img { box-shadow:0 0 0 2px var(--bg, #0f1013), 0 0 0 4px #1d9bf0; } .lm.staff.owner > img { box-shadow:0 0 0 2px var(--bg, #0f1013), 0 0 0 4px #f5b301; }
.pring.staff { box-shadow:0 0 0 3px #1d9bf0, 0 0 20px rgba(29,155,240,.55); }      /* (outside the ring: the ring itself shows the level's progress) */
.pring.staff.owner { box-shadow:0 0 0 3px #f5b301, 0 0 20px rgba(245,179,1,.55); }
/* the message the staff pinned above a channel of the chat */
.lpin { display:flex; align-items:center; gap:10px; margin:0 0 8px; padding:8px 12px; border-radius:12px; border:1px solid rgba(29,155,240,.45); background:linear-gradient(90deg, rgba(29,155,240,.16), transparent); }
.lpin[hidden] { display:none; }
/* (0.15.193, the owner: «تكبير الكلام») a message in big letters from a head or the owner, and the button that chooses it */
.lm .lt.loud { font-size:1.4rem; font-weight:800; line-height:1.55; letter-spacing:.2px; }
#lBig.on { color:#fcd34d; background:rgba(251,191,36,.16); box-shadow:inset 0 0 0 1px rgba(251,191,36,.45); }
#lText.loud { font-size:1.15rem; font-weight:700; }

/* friends and private talks (the page «الخاص» since 0.15.328), and the voice rooms */
/* the tabs of the chat are tiles: an icon over its name, all the same size, in one tidy row */
.lhead .pills { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(98px, 1fr); gap:8px; }
.lhead .pill { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:0; min-height:60px; padding:9px 12px; border-radius:14px; background:var(--card); border:1px solid var(--line); color:var(--muted); font-size:.82rem; font-weight:800; line-height:1.2; transition:background .15s, border-color .15s, color .15s, transform .1s; }
.lhead .pill > .ic { width:21px; height:21px; } .lhead .pill > span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lhead .pill .sh { display:none; }
.lhead .pill:hover { color:#fff; border-color:#4b5563; } .lhead .pill:active { transform:scale(.96); }
.lhead .pill.on { color:#fff; border-color:#1d9bf0; background:linear-gradient(180deg, rgba(29,155,240,.26), rgba(29,155,240,.07)); box-shadow:0 0 0 1px rgba(29,155,240,.25), 0 6px 16px -8px rgba(29,155,240,.7); } .lhead .pill.on > .ic { color:#5cb8ff; }
.lhead .pill .soon { position:absolute; top:-7px; inset-inline-start:-5px; font-size:.6rem; font-weight:800; line-height:1; padding:3px 6px; border-radius:7px; background:#facc15; color:#1c1917; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.lhead .lstate:empty { display:none; }
.lhead .pill .n, .lfrow .n, .navdot { flex:none; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:#ef4444; color:#fff; font:800 .68rem/18px system-ui, sans-serif; text-align:center; display:inline-block; }
.lhead .pill .n { position:absolute; top:-7px; inset-inline-end:-5px; box-shadow:0 2px 6px rgba(0,0,0,.4); }
[data-page="friends"] { position:relative; } .navdot { position:absolute; top:4px; inset-inline-end:8px; }
/* (0.15.328) the page «الخاص»: its one tab is the head of the page, the words beside it say what it holds */
.lhead .lsub { min-width:0; color:var(--muted); font-size:.82rem; font-weight:700; line-height:1.5; }
.lounge.mine .lhead .pill { cursor:default; } .lounge.mine .lhead .pill:active { transform:none; }
.lpanel { flex:1; overflow-y:auto; padding:14px; overscroll-behavior:contain; }
.lpanel h4 { margin:18px 0 8px; font-size:.9rem; color:var(--muted); }
.lpanel .small { color:var(--muted); font-size:.9rem; line-height:1.7; margin:0; }
.lsoon { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:24px 12px; }
.lsoon .ic.big { width:64px; height:64px; color:#5cb8ff; opacity:.9; } .lsoon h3 { margin:6px 0 0; font-size:1.5rem; } .lsoon p { margin:0; max-width:36ch; line-height:1.8; } .lsoon small { color:var(--muted); } .lsoon .btn { margin-top:10px; }
.lfadd label { display:block; font-weight:800; font-size:.9rem; margin-bottom:6px; }
.lfadd > div:first-of-type { display:flex; gap:8px; } .lfadd input { flex:1; min-width:0; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--bg2); color:inherit; font:inherit; direction:ltr; text-align:left; }
.lfadd .btn { flex:none; white-space:nowrap; } .lfadd .note { min-height:1.3em; margin-top:6px; font-size:.85rem; } .lfadd .note.bad { color:#fca5a5; } .lfadd .note.good { color:#86efac; }
.lfrow { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:14px; background:var(--bg2); margin-bottom:8px; }
.lfrow img { width:42px; height:42px; border-radius:12px; flex:none; cursor:pointer; background:var(--card); }   /* (square like every picture: the owner, 0.15.30; a real photo shows here since 0.15.69) */
.lfrow .who { flex:1; min-width:0; display:flex; flex-direction:column; cursor:pointer; } .lfrow .who b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lfrow .who .uname { overflow:hidden; text-overflow:ellipsis; }
.lfrow .btn, .lfrow .iconbtn { flex:none; }
.ldm { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); background:linear-gradient(90deg, rgba(34,197,94,.14), transparent); }
.ldm img { width:32px; height:32px; border-radius:9px; flex:none; } .ldm b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ldm small { margin-inline-start:auto; color:var(--muted); font-size:.75rem; flex:none; }
@media (max-width:520px) { .ldm small, .ldm .uname { display:none; } .lfrow { gap:7px; padding:8px; } .lfrow .btn.sm { padding-inline:10px; } }
.lpin > .ic { width:18px; height:18px; flex:none; color:#5cb8ff; }
.lpin .lpt { flex:1; min-width:0; overflow:hidden; cursor:pointer; display:flex; gap:8px; align-items:baseline; }
.lpin > .iconbtn { flex:none; }
.lpin .lpt b { flex:none; font-size:.85rem; white-space:nowrap; }
.lpin .lpt span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:.9rem; unicode-bidi:plaintext; }
/* the room chat (play mode): a member of the staff, and the little menu the staff get on a player's name */
#chat .chat-line b.staffname { color:#5cb8ff !important; } #chat .chat-line b .verified .ic { width:1em; height:1em; }
#chat .chat-line b.tap { cursor:pointer; text-decoration:underline dotted; }
#chat .chat-people { display:inline-flex; align-items:center; gap:5px; background:rgba(29,155,240,.22); border:1px solid rgba(29,155,240,.6); color:#fff; border-radius:10px; padding:.3em .7em; font:inherit; font-size:.85rem; font-weight:800; cursor:pointer; }
#chat .chat-people[hidden] { display:none; } #chat .chat-people .ic { width:16px; height:16px; }
#chat .chat-acts { display:flex; gap:6px; flex-wrap:wrap; margin:3px 0 5px; }
#chat .chat-acts button { border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.55); color:#fff; border-radius:9px; padding:5px 10px; font:inherit; font-size:.82rem; font-weight:800; cursor:pointer; min-height:34px; }
#chat .chat-acts button.red { border-color:rgba(248,113,113,.6); color:#fecaca; }
/* (0.15.127) the row of the owner (and the developers) of a world over the chat box */
#chat .chat-owner { display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
#chat .chat-owner button { border:1px solid rgba(251,191,36,.45); background:rgba(0,0,0,.5); color:#fde68a; border-radius:9px; padding:4px 9px; font:inherit; font-size:.78rem; font-weight:800; cursor:pointer; }
#chat .chat-owner button.on { background:rgba(251,191,36,.3); color:#fff; }
.role .ic { width:11px; height:11px; }
.role.r1 { background:rgba(59,108,255,.22); color:#93c5fd; } .role.r2 { background:rgba(168,85,247,.24); color:#d8b4fe; } .role.r3 { background:rgba(251,191,36,.22); color:#fde68a; }
/* (0.15.166) the two heads: an official blue badge beside the blue verified mark */
.hb:empty { display:none; } .hb { display:inline-flex; align-items:center; vertical-align:middle; margin-inline-start:4px; }
.role.head { background:linear-gradient(135deg, rgba(29,155,240,.32), rgba(29,155,240,.16)); color:#bfe4ff; box-shadow:inset 0 0 0 1px rgba(29,155,240,.6); }
.role.head.h4 { background:linear-gradient(135deg, rgba(29,155,240,.36), rgba(99,102,241,.22)); }
.role.head.h5 { background:linear-gradient(135deg, rgba(29,155,240,.36), rgba(16,185,129,.24)); }      /* (0.15.198) «رئيس أعمال» */
.uname { direction:ltr; unicode-bidi:isolate; color:var(--muted); font:700 .84em ui-monospace, Consolas, monospace; }
.serial { direction:ltr; unicode-bidi:isolate; color:#6b7280; font:700 .78em ui-monospace, Consolas, monospace; }
.okline { color:#6ee7b7; } .warnline { color:#fbbf24; } .badline { color:#fca5a5; }
/* ---------- the entry screen (entry.js, 0.15.22): after the opening scene, the one door into the site ---------- */
#entry { position:fixed; inset:0; z-index:280; overflow-y:auto; -webkit-overflow-scrolling:touch; background:radial-gradient(120% 70% at 50% 18%, #1a1c22 0, #0a0b0e 55%, #050507 100%); color:var(--text); padding:calc(env(safe-area-inset-top, 0px) + 22px) 16px calc(env(safe-area-inset-bottom, 0px) + 28px); animation:entryIn .5s ease both; }
#entry.out { opacity:0; transition:opacity .4s ease; pointer-events:none; }
#entry[hidden] { display:none; }
html.gated body { overflow:hidden; }
/* (a phone moves the page when its keyboard opens: nothing of the site may show around the entry screen then) */
html.gated body > :not(#entry):not(#intro):not(#toast):not(#celebrate):not(#dialog) { visibility:hidden; }
#entry .ebox { width:100%; max-width:420px; margin:0 auto; display:grid; gap:16px; }
#entry .ebrand { display:grid; justify-items:center; gap:2px; margin-top:40px; text-align:center; user-select:none; }
#entry .ebrand b { font-weight:900; font-size:clamp(2.2rem, 11vw, 3.1rem); line-height:1.15; color:#fff; text-shadow:0 0 18px rgba(255,255,255,.35), 0 0 42px rgba(170,200,255,.18); }
#entry .ebrand span { direction:ltr; font:900 .8rem/1 "Arial Black", Arial, sans-serif; letter-spacing:.42em; padding-left:.42em; color:#d9dce4; opacity:.85; }
#entry .elang { position:absolute; top:calc(env(safe-area-inset-top, 0px) + 12px); left:12px; display:flex; align-items:center; gap:4px; padding:0 4px 0 10px; height:38px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#e5e7eb; font-size:.9rem; }
#entry .elang select { background:none; border:0; color:inherit; font:700 .9rem var(--font); height:36px; padding:0 4px; cursor:pointer; outline:none; }
#entry .elang select option { color:#111; }
.elangs { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.lbtn { display:grid; justify-items:center; gap:2px; padding:14px 8px; border-radius:14px; border:2px solid var(--line); background:var(--card2); color:var(--text); cursor:pointer; transition:border-color .15s, background .15s, transform .1s; font-family:var(--font); }
.lbtn b { font-size:1.12rem; font-weight:900; }
.lbtn small { font-size:.74rem; color:var(--muted); direction:ltr; }
.lbtn:hover { border-color:#5b6475; } .lbtn:active { transform:scale(.97); }
.lbtn.on { border-color:#22c55e; background:rgba(34,197,94,.12); }
html.i18n-wait body { visibility:hidden; }
/* left-to-right languages (i18n.js): an arrow that means «on» points the other way; a settings row gives its box less room */
html.ltr .fwd { display:inline-flex; transform:scaleX(-1); }
html.ltr .field select { max-width:52%; }
/* the empty bio says it in the chosen language (the words are in the style itself, so they are here: index.html has the Arabic) */
html[lang=en] .pbio span:empty::before { content:"Write a little about yourself…"; }
html[lang=fr] .pbio span:empty::before { content:"Écris quelques mots sur toi…"; }
html[lang=es] .pbio span:empty::before { content:"Escribe algo sobre ti…"; }
html[lang=tr] .pbio span:empty::before { content:"Kendinden biraz bahset…"; }
html[lang=ur] .pbio span:empty::before { content:"اپنے بارے میں کچھ لکھیں…"; }
html[lang=zh] .pbio span:empty::before { content:"写点关于你自己的话…"; }
html[lang=zh-TW] .pbio span:empty::before { content:"寫點關於你自己的話…"; }
#entry .esteps { display:flex; justify-content:center; gap:8px; }
#entry .esteps i { width:30px; height:5px; border-radius:5px; background:rgba(255,255,255,.14); transition:background .3s; }
#entry .esteps i.on { background:#fff; } #entry .esteps i.done { background:#22c55e; }
#entry .ecard { background:rgba(22,24,30,.86); border:1px solid rgba(255,255,255,.09); border-radius:20px; padding:22px 20px 18px; box-shadow:0 24px 60px rgba(0,0,0,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); display:grid; gap:14px; }
#entry h2 { margin:0; font-size:1.35rem; font-weight:900; display:flex; align-items:center; gap:8px; }
#entry h2 .ic { width:22px; height:22px; }
#entry .elead { margin:-6px 0 0; color:var(--muted); font-size:.92rem; line-height:1.7; }
#entry .form input { height:48px; font-size:1.02rem; border-radius:12px; }
#entry .form .pw button { top:7px; }
/* a password is written left to right in an Arabic page: its eye goes to the left and the text keeps clear of it */
html:not(.ltr) .form .pw input[dir=ltr] { padding-left:46px; padding-right:12px; }
html:not(.ltr) .form .pw input[dir=ltr] + button { left:4px; right:auto; }
#entry .ego { width:100%; height:52px; font-size:1.08rem; border-radius:14px; justify-content:center; }
#entry .eside { text-align:center; font-size:.9rem; margin-top:-4px; }
#entry .eswitch { text-align:center; color:var(--muted); font-size:.9rem; border-top:1px solid rgba(255,255,255,.07); padding-top:12px; }
#entry .linkbtn:disabled { color:var(--muted); text-decoration:none; cursor:default; }
.egender { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.gbtn { display:grid; justify-items:center; gap:4px; padding:12px 8px; border-radius:14px; border:2px solid var(--line); background:var(--card2); color:var(--text); font:800 1rem var(--font); cursor:pointer; transition:border-color .15s, background .15s, transform .1s; }
.gbtn .gi { font-size:1.9rem; line-height:1.2; }
/* the drawn boy and girl (figures.js, 0.15.27): a round picture that lifts a little, and glows green once chosen */
.gbtn .gi .fig { display:block; width:86px; height:86px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); transition:transform .25s cubic-bezier(.2,.9,.3,1.3), filter .25s; }
.gbtn:hover .gi .fig { transform:translateY(-2px); }
.gbtn.on .gi .fig { transform:scale(1.07); filter:drop-shadow(0 0 0 #22c55e) drop-shadow(0 0 10px rgba(34,197,94,.75)) drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.gbtn { padding:14px 8px 12px; gap:8px; }
.gmini .fig { display:inline-block; width:22px; height:22px; vertical-align:-6px; }
@media (prefers-reduced-motion:reduce) { .gbtn .gi .fig { transition:none; } }
.gbtn:hover { border-color:#5b6475; }
.gbtn:active { transform:scale(.97); }
.gbtn.on { border-color:#22c55e; background:rgba(34,197,94,.12); }
.egender.bad .gbtn { border-color:#e5484d; }
@keyframes entryIn { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { #entry { animation:none; } }

.linkbtn { background:none; border:0; padding:0; color:#93c5fd; font-weight:800; cursor:pointer; font-size:inherit; text-decoration:underline; text-underline-offset:3px; }
.linkbtn:hover { color:#fff; }
.btn:disabled { opacity:.5; cursor:not-allowed; filter:none; }
.chip.login { background:linear-gradient(180deg,#ef3343,#c8101f); border-color:transparent; }
.chip .ic { width:18px; height:18px; }

/* ---------- forms: login, register, account changes ---------- */
.form { display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; }
.form .f { display:grid; grid-template-columns:minmax(0, 1fr); gap:4px; min-width:0; }
.form label { font-weight:800; font-size:.86rem; display:flex; align-items:center; gap:6px; }
.form label small { color:var(--muted); font-weight:600; }
.form input, .form select, .form textarea { width:100%; height:42px; background:var(--card2); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:0 12px; font-size:1rem; }
.form textarea { height:auto; min-height:76px; padding:10px 12px; resize:vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline:none; border-color:#5b6475; background:var(--card3); }
.form input.ltr { direction:ltr; text-align:left; }
.form input[type=date] { -webkit-appearance:none; appearance:none; min-width:0; max-width:100%; display:block; box-sizing:border-box; text-align:start; }   /* (iPhone draws its own, wider box) */
.form input.bad { border-color:#e5484d; }
.form .note { font-size:.76rem; color:var(--muted); line-height:1.6; min-height:1.1em; }
.form .note.bad { color:#fca5a5; } .form .note.good { color:#6ee7b7; }
.form .pw { position:relative; } .form .pw input { padding-inline-end:44px; }
.form .pw button { position:absolute; inset-inline-end:4px; top:4px; width:34px; height:34px; border:0; border-radius:8px; background:none; color:var(--muted); cursor:pointer; display:grid; place-items:center; }
.form .pw button:hover { color:#fff; background:var(--card3); }
.form .two2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.form .code { letter-spacing:10px; text-align:center; font:900 1.5rem ui-monospace, Consolas, monospace; direction:ltr; }
.formerr { background:rgba(229,72,77,.14); border:1px solid rgba(229,72,77,.4); color:#fecaca; border-radius:10px; padding:8px 12px; font-size:.88rem; font-weight:700; }
.formerr[hidden] { display:none; }
.authside { text-align:center; color:var(--muted); font-size:.86rem; margin-top:10px; line-height:2; }
.meter { height:5px; border-radius:5px; background:var(--card3); overflow:hidden; } .meter i { display:block; height:100%; width:0; transition:width .2s, background .2s; background:#e5484d; }
.meterword { display:block; font-size:12px; font-weight:700; margin-top:4px; min-height:14px; transition:color .2s; }

/* ---------- the account panel and the wallet (profile page) ---------- */
.guestcard { background:linear-gradient(135deg, rgba(225,29,46,.2), rgba(59,108,255,.14)); border:1px solid rgba(225,29,46,.35); }
.guestcard ul { margin:8px 0 12px; padding-inline-start:20px; color:#d6dbe4; line-height:1.9; font-size:.9rem; }
.arows { display:grid; grid-template-columns:minmax(0, 1fr); gap:6px; }      /* (minmax: a long e-mail must not push the row out of a phone's screen) */
.arow { display:flex; align-items:center; gap:10px; background:var(--card2); border-radius:10px; padding:8px 12px; min-height:44px; min-width:0; flex-wrap:wrap; }
.arow > .btn { flex:none; }
/* (0.15.79) who is on the site now: the owner's tab of the control panel */
.livelist { display:grid; gap:6px; }
.liverow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; width:100%; min-height:48px; min-width:0; text-align:start; background:var(--card2); border:1px solid transparent; border-radius:10px; padding:8px 12px; color:inherit; font:inherit; cursor:pointer; }
.liverow:hover, .liverow:focus-visible { border-color:#22c55e; outline:none; }
.liverow .v { min-width:0; overflow-wrap:anywhere; }
.liverow .small { margin-inline-start:auto; }
.livedot { width:10px; height:10px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.25); flex:none; }
.arow > .ic { width:18px; height:18px; color:var(--muted); flex:none; }
.arow .k { color:var(--muted); font-size:.8rem; font-weight:700; width:76px; flex:none; }
.arow .v { flex:1; min-width:0; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.arow .v small { font-weight:700; }
.abtns { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.bal { display:flex; align-items:center; gap:10px; font-weight:900; font-size:2rem; }
.bal .ic.coin { width:38px; height:38px; }
/* (0.15.202) the Manji mark: a 3D model; in the wallet it turns live (manjie3d.js) */
/* (0.15.203) a tap on the mark opens the Manji shop (manjishop.js) */
img.ic.coin.mj, .mjhero, #coinChip, .mjwal .bal, .mjname { cursor:pointer; }
.dialog.mjs-dialog { width:min(880px, 100%); padding:0; overflow:auto; background:#0e0c0a; border-color:#3a2f1c; }
.dialog.mjs-dialog > h3 { display:none; }
.dialog.mjs-dialog .drow { margin:0; padding:0 18px 18px; }
.mjs { display:grid; gap:16px; }
.mjs-hero { position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; padding:22px 22px 20px;
  background:radial-gradient(120% 140% at 85% 0%, rgba(233,171,52,.28), transparent 55%), linear-gradient(180deg, #1d160d, #0e0c0a); border-bottom:1px solid #3a2f1c; }
.mjs-art { width:84px; height:84px; display:grid; place-items:center; border-radius:20px; background:radial-gradient(circle, rgba(255,200,90,.35), transparent 70%); }
.mjs-art .ic.coin { width:76px; height:76px; filter:drop-shadow(0 8px 14px rgba(0,0,0,.55)); animation:mjsfloat 3.6s ease-in-out infinite; }
@keyframes mjsfloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
.mjs-ttl { display:grid; gap:4px; min-width:0; }
.mjs-ttl b { font-size:1.6rem; font-weight:900; line-height:1.2; background:linear-gradient(180deg, #fff3cf, #e9b23a 60%, #b07a17); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mjs-ttl span { font-size:.9rem; color:#c9b89a; max-width:46ch; }
.mjs-bal { display:grid; justify-items:end; gap:2px; padding:10px 14px; border-radius:14px; background:rgba(0,0,0,.35); border:1px solid #3a2f1c; }
.mjs-bal span { font-size:.8rem; color:#a8987c; }
.mjs-bal b { display:flex; align-items:center; gap:6px; font-size:1.35rem; font-variant-numeric:tabular-nums; color:#fff; }
.mjs-bal b .ic.coin { width:26px; height:26px; }
.mjs-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; padding:0 18px; }
.mjs-card { --glow:.10; position:relative; font:inherit; color:#f3ead8; cursor:pointer; display:grid; justify-items:center; align-content:start; gap:0; padding:12px 10px 12px; border-radius:16px;
  border:1px solid #3a2f1c; background:radial-gradient(90% 70% at 50% 35%, rgba(233,171,52,var(--glow)), transparent 70%), linear-gradient(180deg, #1a1510, #110e0b);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.mjs-card:hover, .mjs-card:focus-visible { transform:translateY(-3px); border-color:#b98a2e; box-shadow:0 10px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(233,171,52,.25); outline:none; }
.mjs-card.t2, .mjs-card.t3 { --glow:.16; } .mjs-card.t4, .mjs-card.t5 { --glow:.22; } .mjs-card.t6 { --glow:.28; } .mjs-card.t7 { --glow:.36; }
.mjs-card.best { border-color:#d9a441; box-shadow:0 0 0 1px rgba(233,171,52,.4), 0 12px 30px rgba(233,171,52,.12); }
.mjs-pile { --s:44%; position:relative; width:100%; aspect-ratio:1.25; margin-bottom:2px; display:grid; place-items:center; overflow:hidden; border-radius:12px; }
.mjs-pile .ic.coin { position:relative; width:var(--s); height:auto; aspect-ratio:1; filter:drop-shadow(0 6px 10px rgba(0,0,0,.6)) drop-shadow(0 0 calc(var(--glow) * 60px) rgba(255,196,80,.55)); }
.mjs-rays { position:absolute; inset:-30%; background:repeating-conic-gradient(from 0deg, rgba(255,205,110,.16) 0 7deg, transparent 7deg 22deg); -webkit-mask:radial-gradient(circle, #000 18%, transparent 62%); mask:radial-gradient(circle, #000 18%, transparent 62%); animation:mjsspin 26s linear infinite; }
@keyframes mjsspin { to { transform:rotate(360deg); } }
.mjs-card.t1 .mjs-pile { --s:48%; } .mjs-card.t2 .mjs-pile { --s:52%; } .mjs-card.t3 .mjs-pile { --s:56%; } .mjs-card.t4 .mjs-pile { --s:60%; }
.mjs-card.t5 .mjs-pile { --s:64%; } .mjs-card.t6 .mjs-pile { --s:68%; } .mjs-card.t7 .mjs-pile { --s:74%; }
.mjs-amt { font-size:1.45rem; font-weight:900; font-variant-numeric:tabular-nums; line-height:1.1; }
.mjs-unit { font-size:.8rem; color:#a8987c; margin-bottom:6px; }
.mjs-gift { min-height:1.5em; margin-bottom:10px; font-size:.82rem; font-weight:900; color:#5fe39a; font-variant-numeric:tabular-nums; }
.mjs-gift.none { visibility:hidden; }
.mjs-gift { padding:1px 9px; border-radius:7px; background:rgba(31,138,76,.16); border:1px solid rgba(95,227,154,.3); }
.mjs-price { width:100%; padding:8px 6px; border-radius:10px; font-weight:900; white-space:nowrap; font-variant-numeric:tabular-nums; color:#1c1406;
  background:linear-gradient(180deg, #f7cf6b, #e0a32c); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 2px 0 #8a5e12; }
.mjs-save { position:absolute; top:10px; inset-inline-start:10px; z-index:1; font-size:.72rem; font-weight:800; padding:2px 7px; border-radius:6px; background:rgba(31,138,76,.18); color:#5fe39a; border:1px solid rgba(95,227,154,.35); }
.mjs-best { position:absolute; top:-10px; inset-inline-end:12px; z-index:1; font-size:.74rem; font-weight:900; padding:2px 10px; border-radius:7px; background:linear-gradient(180deg, #f7cf6b, #e0a32c); color:#1c1406; }
.mjs-foot { display:flex; align-items:center; gap:8px; margin:0 18px; padding:12px 14px; border-radius:12px; background:#15110c; border:1px solid #2c2416; color:#c9b89a; font-size:.88rem; }
.mjs-foot .ic { width:18px; height:18px; color:#d9a441; flex:none; }
.mjs-foot span { flex:1; min-width:0; }
.mjs-foot b { color:#f3ead8; }
.mjs-foot em { font-style:normal; font-weight:800; font-size:.78rem; padding:2px 9px; border-radius:6px; background:rgba(217,164,65,.15); color:#e9b23a; border:1px solid rgba(217,164,65,.35); }
@media (max-width:640px) {
  .mjs-hero { grid-template-columns:auto 1fr; padding:18px 16px; }
  .mjs-bal { grid-column:1 / -1; justify-items:start; grid-auto-flow:column; align-items:center; justify-content:space-between; }
  .mjs-art { width:64px; height:64px; } .mjs-art .ic.coin { width:58px; height:58px; }
  .mjs-ttl b { font-size:1.3rem; }
  .mjs-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; padding:0 14px; }
  .mjs-foot { margin:0 14px; }
}
@media (prefers-reduced-motion: reduce) { .mjs-art .ic.coin, .mjs-rays { animation:none; } .mjs-card { transition:none; } }
img.ic.coin.mj { object-fit:contain; -webkit-user-drag:none; user-select:none; }
.mjwal { display:flex; align-items:center; gap:18px; margin:4px 0 6px; }
.mjname { font-weight:900; font-size:1.05rem; color:#d9a441; letter-spacing:.5px; }
.mjname span { font-family:Georgia,"Times New Roman",serif; font-size:.78rem; letter-spacing:3px; margin-inline-start:6px; color:#b8955a; }
.mjhero { position:relative; width:128px; height:128px; flex:none; }
.mjhero .mjglow { position:absolute; inset:-12%; border-radius:50%; background:radial-gradient(circle, rgba(255,214,140,.38), rgba(200,150,60,.16) 45%, transparent 70%); filter:blur(6px); animation:mjpulse 3.2s ease-in-out infinite; pointer-events:none; }
.mjhero::after { content:""; position:absolute; left:18%; right:18%; bottom:-6%; height:10%; border-radius:50%; background:radial-gradient(closest-side, rgba(30,18,4,.45), transparent); pointer-events:none; }
.mjhero .mjstill, .mjhero .mjcv { position:absolute; inset:0; width:100%; height:100%; display:block; }
.mjhero .mjcv { cursor:grab; touch-action:pan-y; } .mjhero .mjcv:active { cursor:grabbing; }
.mjhero.live .mjstill { visibility:hidden; }
@keyframes mjpulse { 0%, 100% { opacity:.65; transform:scale(.94); } 50% { opacity:1; transform:scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .mjhero .mjglow { animation:none; } }
@media (max-width:520px) { .mjhero { width:96px; height:96px; } .mjwal { gap:12px; } }
.ledger { list-style:none; margin:10px 0 0; padding:0; max-height:260px; overflow:auto; }
.ledger li { display:flex; align-items:center; gap:10px; padding:7px 4px; border-bottom:1px solid var(--line); font-size:.86rem; }
.ledger li:last-child { border-bottom:0; }
.ledger .amt { font-weight:900; direction:ltr; min-width:54px; text-align:center; border-radius:8px; padding:1px 6px; }
.ledger .amt.plus { color:#6ee7b7; background:rgba(0,180,110,.14); } .ledger .amt.minus { color:#fca5a5; background:rgba(229,72,77,.14); }
.ledger .what { flex:1; min-width:0; } .ledger .what small { display:block; color:var(--muted); }
.ledger .when { color:var(--muted); font-size:.74rem; white-space:nowrap; }
.sessions { display:grid; gap:6px; }
.sessions div { display:flex; align-items:center; gap:10px; background:var(--card2); border-radius:10px; padding:8px 12px; font-size:.86rem; }
.sessions div b { flex:1; } .sessions small { color:var(--muted); display:block; font-weight:600; }

/* ---------- search: players, games and worlds ---------- */
.shead { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.sbox { position:relative; flex:1; min-width:220px; max-width:560px; }
.sbox input { width:100%; height:46px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--text); padding:0 44px 0 14px; font-size:1.05rem; }
.sbox input:focus { outline:none; border-color:#5b6475; }
.sbox .ic { position:absolute; right:14px; top:50%; transform:translateY(-50%); opacity:.6; pointer-events:none; }
.pcards { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; }
.pcard { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px 12px; cursor:pointer; text-align:start; color:inherit; font:inherit; transition:transform .12s, border-color .12s; min-width:0; }
.pcard:hover, .pcard:focus-visible { transform:translateY(-2px); border-color:#4b5563; outline:none; }
.pcard img { width:54px; height:54px; border-radius:14px; background:var(--card2); flex:none; }
.pcard .who { min-width:0; flex:1; }
.pcard .who b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pcard .lv { color:var(--gold); font-weight:900; font-size:.86rem; display:inline-flex; align-items:center; gap:3px; }
.pcard .lv .ic { width:14px; height:14px; }
.sgroup { margin-bottom:22px; } .sgroup h3 { margin:0 0 10px; font-size:1.1rem; display:flex; align-items:center; gap:8px; } .sgroup h3 .ic { color:#fca5a5; } .sgroup h3 small { color:var(--muted); font-weight:700; }

/* ---------- the public chat ---------- */
.lounge { display:flex; flex-direction:column; height:calc(100vh - var(--top) - 62px); min-height:420px; background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.lhead { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--bg2); flex-wrap:wrap; }
.lhead .pills { margin:0; } .lhead .lstate { margin-inline-start:auto; font-size:.78rem; color:var(--muted); display:inline-flex; align-items:center; gap:6px; }
.lmsgs { flex:1; overflow-y:auto; padding:10px 12px; overscroll-behavior:contain; scroll-behavior:auto; }
.lmore { text-align:center; margin:2px 0 10px; }
.lm { display:flex; gap:10px; padding:6px 8px; border-radius:12px; position:relative; }
.lm:hover, .lm.open { background:rgba(255,255,255,.04); }
.lm.mine { background:rgba(59,108,255,.07); }
.lm > img { width:38px; height:38px; border-radius:11px; background:var(--card2); flex:none; cursor:pointer; }
.lm .lb { min-width:0; flex:1; }
.lm .lh { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.lm .lh b { cursor:pointer; } .lm .lh b:hover { text-decoration:underline; }
.lm .lh time { color:#6b7280; font-size:.7rem; }
.lm .lt { white-space:pre-wrap; word-break:break-word; line-height:1.7; font-size:.96rem; unicode-bidi:plaintext; }
.lm .lt.big { font-size:2rem; line-height:1.3; }
.lm .linv { display:inline-flex; margin-top:6px; gap:6px; text-decoration:none; }      /* (2026-10-24) an invitation to a table in a private talk */
.lm .lq { border-inline-start:3px solid var(--card3); padding:1px 8px; margin:2px 0; color:var(--muted); font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.lm .la { position:absolute; top:-10px; inset-inline-end:8px; display:none; gap:2px; background:var(--card3); border:1px solid var(--line); border-radius:9px; padding:2px; box-shadow:0 6px 16px rgba(0,0,0,.4); }
.lm:hover .la, .lm.open .la { display:flex; }
.lm .la button { width:30px; height:28px; border:0; border-radius:7px; background:none; color:var(--muted); cursor:pointer; display:grid; place-items:center; }
.lm .la button:hover { background:var(--card2); color:#fff; } .lm .la button .ic { width:16px; height:16px; }
.lm.sys { justify-content:center; color:#fde68a; font-size:.84rem; font-weight:700; padding:4px; }
.lm.flash { animation:lflash 1.2s ease; } @keyframes lflash { 0%, 40% { background:rgba(251,191,36,.25); } }
.lday { text-align:center; color:#6b7280; font-size:.72rem; font-weight:800; margin:10px 0 4px; }
.lfoot { border-top:1px solid var(--line); background:var(--bg2); padding:8px 10px; position:relative; }
.lreply { display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--muted); padding:2px 4px 8px; }
.lreply[hidden], .lwhy[hidden] { display:none; }
.lreply span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lwhy { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:8px; color:#fde68a; font-weight:800; font-size:.9rem; }
.lbar { display:flex; align-items:flex-end; gap:6px; }
.lbar[hidden] { display:none; }
.lbar textarea { flex:1; min-width:0; min-height:44px; max-height:120px; resize:none; background:var(--card2); border:1px solid var(--line); color:var(--text); border-radius:12px; padding:10px 12px; font:inherit; font-size:1rem; line-height:1.5; unicode-bidi:plaintext; }
.lbar textarea:focus { outline:none; border-color:#5b6475; }
.lbar .iconbtn { width:44px; height:44px; border-radius:12px; flex:none; } .lbar .iconbtn.send { background:var(--green); color:#fff; } .lbar .iconbtn.send .ic { transform:scaleX(-1); }
.lcount { position:absolute; inset-inline-end:118px; bottom:12px; font-size:.68rem; color:#6b7280; pointer-events:none; } .lcount.near { color:#fbbf24; }
.epick { position:absolute; bottom:calc(100% + 6px); inset-inline-start:8px; width:min(380px, calc(100vw - 32px)); height:330px; display:flex; flex-direction:column; background:var(--bg2); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 44px rgba(0,0,0,.55); z-index:5; overflow:hidden; }
.epick[hidden] { display:none; }
.etabs { display:flex; gap:2px; padding:6px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.etabs::-webkit-scrollbar { display:none; }
.etabs button { flex:none; width:36px; height:34px; border:0; border-radius:9px; background:none; cursor:pointer; font-size:1.2rem; line-height:1; }
.etabs button.on { background:var(--card3); }
.egrid { flex:1; overflow-y:auto; padding:6px; display:grid; grid-template-columns:repeat(auto-fill, minmax(38px, 1fr)); gap:2px; align-content:start; overscroll-behavior:contain; }
.egrid button { height:38px; border:0; border-radius:8px; background:none; cursor:pointer; font-size:1.45rem; line-height:1; padding:0; font-family:"Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
/* (0.15.162) the stickers of «العام»: everybody sends them; the owner and the two heads add and take them away */
.spick .shead { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-bottom:1px solid var(--line); }
.spick .shead label { cursor:pointer; }
.spick { height:min(440px, 70vh); }
/* (0.15.163) the ways to add: many pictures, a paste, a link of Discord */
.sadd { padding:8px 10px 6px; border-bottom:1px solid var(--line); }
.sadd[hidden] { display:none; }
.sbtns { display:flex; flex-wrap:wrap; gap:6px; }
.sbtns label { cursor:pointer; }
.shint { margin:6px 0 0; font-size:.78rem; line-height:1.45; color:var(--muted); }
.sgrid { flex:1; overflow-y:auto; padding:8px; display:grid; grid-template-columns:repeat(auto-fill, minmax(78px, 1fr)); gap:6px; align-content:start; overscroll-behavior:contain; }
.sgrid h5 { grid-column:1 / -1; margin:10px 4px; color:var(--muted); font-weight:600; }
.scell { position:relative; }
.scell [data-s] { width:100%; aspect-ratio:1; border:0; border-radius:10px; background:var(--card2); padding:6px; cursor:pointer; display:block; }
.scell [data-s] img { width:100%; height:100%; object-fit:contain; display:block; }
.scell .sdel { position:absolute; top:-4px; inset-inline-end:-4px; width:24px; height:24px; border-radius:50%; border:0; background:var(--red, #d33); color:#fff; display:grid; place-items:center; cursor:pointer; padding:0; }
.scell .sdel .ic { width:14px; height:14px; }
.lm img.lstk { display:block; width:auto; height:auto; max-width:min(160px, 50vw); max-height:160px; margin-top:4px; border-radius:8px; }
.lm .lt.gone { color:var(--muted); font-style:italic; font-size:.9rem; }
.egrid button:hover { background:var(--card3); transform:scale(1.15); }
.egrid h5 { grid-column:1 / -1; margin:6px 4px 2px; font-size:.74rem; color:var(--muted); }

/* ---------- the control panel ---------- */
.adm .tabs { position:sticky; top:var(--top); z-index:5; background:var(--bg); padding:8px 0; margin-bottom:6px; }
.adm .tabs button { display:inline-flex; align-items:center; gap:6px; } .adm .tabs button .ic { width:17px; height:17px; }
.adm .tabs .n { background:#e5484d; color:#fff; border-radius:999px; padding:0 6px; font-size:.72rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin-bottom:16px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.kpi b { display:block; font-size:1.55rem; font-weight:900; line-height:1.3; } .kpi span { color:var(--muted); font-size:.8rem; font-weight:700; display:flex; align-items:center; gap:5px; } .kpi span .ic { width:15px; height:15px; }
.kpi small { color:#6ee7b7; font-weight:800; font-size:.74rem; }
.bars { display:flex; align-items:flex-end; gap:3px; height:120px; padding:8px 4px 0; }
.bars i { flex:1; min-width:3px; background:linear-gradient(180deg,#5481ff,#2f5ae6); border-radius:4px 4px 0 0; position:relative; min-height:2px; }
.bars i.b2 { background:linear-gradient(180deg,#14c97f,#00a05f); }
.bars i:hover::after { content:attr(data-t); position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); background:#000; color:#fff; font:700 .7rem var(--font); padding:3px 7px; border-radius:6px; white-space:nowrap; z-index:2; }
.barlabels { display:flex; justify-content:space-between; color:#6b7280; font-size:.7rem; padding:4px 4px 0; direction:ltr; }
.atable { width:100%; border-collapse:collapse; font-size:.88rem; }
.atable th { text-align:start; color:var(--muted); font-size:.76rem; padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.atable td { padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.atable tr:hover td { background:rgba(255,255,255,.03); }
.atable td.ltr { direction:ltr; text-align:left; font-family:ui-monospace, Consolas, monospace; font-size:.8rem; }
.atable img { width:30px; height:30px; border-radius:8px; vertical-align:middle; background:var(--card2); }
.atable .acts { display:flex; gap:5px; flex-wrap:wrap; }
.tablewrap { overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:4px 8px; }
.atools { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.atools input[type=search], .atools input[type=text], .atools select { height:38px; background:var(--card); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:0 12px; font-size:.92rem; min-width:0; }
.ugrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:6px; margin:10px 0; }
.ugrid div { background:var(--card2); border-radius:10px; padding:7px 10px; font-size:.84rem; min-width:0; }
.ugrid span { display:block; color:var(--muted); font-size:.72rem; font-weight:700; } .ugrid b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dialog.wide { width:min(760px, 100%); }
.tag { display:inline-block; font-size:.7rem; font-weight:900; border-radius:6px; padding:1px 6px; background:var(--card3); color:var(--muted); }
.tag.red { background:rgba(229,72,77,.2); color:#fca5a5; } .tag.green { background:rgba(0,180,110,.2); color:#6ee7b7; } .tag.gold { background:rgba(251,191,36,.2); color:#fde68a; }
.sw { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin-bottom:8px; }
.sw b { display:block; } .sw small { color:var(--muted); line-height:1.6; display:block; }
.sw input[type=checkbox] { width:44px; height:24px; accent-color:var(--green); flex:none; cursor:pointer; }
.sw input[type=text], .sw input[type=number], .sw select { height:38px; background:var(--card2); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:0 10px; min-width:0; }
.sw.col { flex-direction:column; align-items:stretch; }

.chk { display:flex; gap:10px; align-items:flex-start; background:var(--card2); border-radius:10px; padding:9px 12px; margin-bottom:6px; border-inline-start:3px solid #22c55e; }
.chk .ic { width:18px; height:18px; flex:none; margin-top:3px; color:#4ade80; }
.chk b { display:block; font-size:.9rem; } .chk small { display:block; color:var(--muted); line-height:1.6; font-size:.78rem; }
.chk > span { flex:1; min-width:0; } .chk .btn { margin-top:7px; }
.chk.warn { border-inline-start-color:#fbbf24; } .chk.warn .ic { color:#fbbf24; }
.chk.bad { border-inline-start-color:#ef4444; } .chk.bad .ic { color:#f87171; }
.chklegend { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:8px; font-size:.72rem; color:var(--muted); }
.chklegend span { display:inline-flex; align-items:center; gap:5px; } .chklegend i { width:9px; height:9px; border-radius:2px; display:inline-block; }
.eturn { margin:4px 0 2px; min-height:65px; display:flex; justify-content:center; }

/* ---------- settings: grouped and explained ---------- */
.setgroup { margin:14px 0 4px; font-size:.78rem; font-weight:900; color:#fca5a5; letter-spacing:.5px; display:flex; align-items:center; gap:6px; }
.setgroup:first-of-type { margin-top:0; }
.setgroup .ic { width:15px; height:15px; }
.field .fl small { display:block; color:var(--muted); font-weight:600; font-size:.74rem; line-height:1.5; }
.field .fl { min-width:0; }

#searchBtn { display:none; }

/* a window is never taller than the part of the screen the browser really shows (on a phone the browser's own
   bars cover part of "100vh", and the buttons at the bottom of a long form were cut off) */
@supports (height:100dvh) { .dialog, .sheet { max-height:calc(100dvh - 24px); } }
.dialog .drow { position:sticky; bottom:-20px; background:var(--bg2); padding:10px 0 4px; margin-bottom:-4px; z-index:1; }

/* ---------- phones ---------- */
@media (max-width:960px) {
  .lounge { height:calc(100dvh - var(--top) - 64px - 34px - env(safe-area-inset-bottom)); border-radius:14px; }
  .adm .tabs { overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; } .adm .tabs button { flex:none; }
}
@media (max-width:640px) {
  #searchBtn { display:grid; }                        /* the search box of the top bar does not fit: a button opens the search page */
  /* five tiles across the whole width (short names), and under them a thin line: connected, and the staff's button */
  .lhead { flex-wrap:wrap; padding:12px 10px 8px; gap:6px 8px; } .lhead .pills { flex:1 0 100%; grid-auto-flow:row; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; }   /* (0.15.328: two tabs since «الخاص» became a page) */
  .lounge.mine .lhead { flex-wrap:nowrap; align-items:center; } .lounge.mine .lhead .pills { flex:0 0 112px; grid-template-columns:minmax(0, 1fr); } .lounge.mine .lhead .lsub { flex:1; font-size:.78rem; }
  .lhead .pill { padding:8px 2px; min-height:56px; font-size:.74rem; border-radius:12px; } .lhead .pill > .ic { width:20px; height:20px; }
  .lhead .pill .lg { display:none; } .lhead .pill .sh { display:inline; }
  .lhead .pill .soon { inset-inline-start:-3px; } .lhead .pill .n { inset-inline-end:-3px; }
  .lhead .lstate { flex:none; margin-inline:0 auto; } .lhead #lWho { width:34px; height:34px; }
  .form .two2 { grid-template-columns:1fr; }
  .arow .k { width:62px; }
  .lm > img { width:32px; height:32px; }
  .lm .la { display:none !important; } .lm.open .la { display:flex !important; position:static; margin-top:4px; box-shadow:none; width:max-content; }
  .lcount { display:none; }
  .pcards { grid-template-columns:1fr; }
  .cards { grid-template-columns:repeat(2, 1fr); }
  .bal { font-size:1.6rem; }
}

/* ---------- «my character»: a big stage on top and a sheet of tabs and cards under it (avatarpage.js) ---------- */
/* (the sheet is .wardrobe: .sheet is the window of a world's details) */
.avatarpage { align-items:start; grid-template-columns:minmax(260px, 460px) minmax(0, 1fr); --stage:max(46vh, 230px); }
@supports (height:100svh) { .avatarpage { --stage:max(46svh, 230px); } }      /* (the small height: it does not change while the bars of a phone's browser slide away) */
.avatarpage .stage { position:sticky; top:calc(var(--top) + 12px); z-index:6; background:#0b0d12; }
.stage .amaking { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:12px; color:var(--muted); font-weight:700; font-size:.9rem; pointer-events:none; transition:opacity .4s ease; }
.stage .amaking::before { content:""; width:34px; height:34px; border-radius:50%; border:3px solid rgba(255,255,255,.14); border-top-color:#fff; animation:amakingSpin .9s linear infinite; }
.stage .amaking.gone { opacity:0; }
@keyframes amakingSpin { to { transform:rotate(360deg); } }
.stage .amode { position:absolute; top:10px; left:50%; transform:translateX(-50%); display:flex; padding:3px; gap:2px; border-radius:12px; background:rgba(15,16,19,.72); border:1px solid var(--line); backdrop-filter:blur(8px); }
.stage .amode button { border:0; background:none; color:var(--muted); font-weight:800; font-size:.86rem; height:32px; padding:0 16px; border-radius:9px; cursor:pointer; white-space:nowrap; }
.stage .amode button.on { background:#fff; color:#0f1013; }
.stage .coins { top:10px; right:10px; height:38px; background:rgba(15,16,19,.72); backdrop-filter:blur(8px); cursor:default; }
/* how close the camera stands: a short column on the side, off the character */
.avatarpage .stage .views { top:10px; left:10px; right:auto; bottom:auto; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:1px; padding:3px; border-radius:13px; background:rgba(15,16,19,.72); border:1px solid var(--line); backdrop-filter:blur(8px); }
.avatarpage .stage .views button { background:none; border:0; border-radius:10px; height:31px; padding:0 10px; font-size:.78rem; color:var(--muted); }
.avatarpage .stage .views button.on { background:#fff; color:#0f1013; }
.stage .aundo { position:absolute; bottom:12px; left:10px; display:flex; border-radius:12px; background:rgba(15,16,19,.72); border:1px solid var(--line); backdrop-filter:blur(8px); overflow:hidden; }
.stage .aundo button { width:40px; height:38px; border:0; background:none; color:var(--text); cursor:pointer; display:grid; place-items:center; }
.stage .aundo button:disabled { opacity:.32; cursor:default; }
.stage .aundo .ic { width:19px; height:19px; }
.wardrobe { position:relative; padding-top:0; }
/* the tabs: names in a row that slides sideways, a line under the open one. They stay in sight while their cards scroll under them */
.wardrobe .tabs { position:sticky; top:var(--top); z-index:5; flex-wrap:nowrap; overflow-x:auto; gap:2px; margin:0 0 16px; padding:6px 0 0; background:var(--card); border-bottom:1px solid var(--line); scrollbar-width:none; }
.wardrobe .tabs::-webkit-scrollbar { display:none; }
.wardrobe .tabs button { flex:none; background:none; border-radius:0; padding:.6em .75em .7em; font-size:1rem; color:var(--muted); border-bottom:3px solid transparent; margin-bottom:-1px; }
.wardrobe .tabs button.on { background:none; color:#fff; border-bottom-color:#fff; }
/* each tab is a small solid object with its name under it (tabicons.js gives the strip «has-tic» and every tab its own
   colour, --tc). Where the graphics card cannot draw them the tabs are words alone, as they were. */
.wardrobe .tabs .tic { display:none; }
.wardrobe .tabs.has-tic { gap:0; padding:8px 4px 0; }
.wardrobe .tabs.has-tic button { position:relative; display:flex; flex:1 0 auto; flex-direction:column; align-items:center; gap:0; min-width:64px; padding:2px 2px 8px; font-size:.8rem; font-weight:800; line-height:1.5; }
.wardrobe .tabs.has-tic .tic { display:block; width:56px; height:56px; opacity:.8; transform:scale(.88); transition:transform .24s cubic-bezier(.2, 1.5, .4, 1), opacity .2s; pointer-events:none; }
.wardrobe .tabs.has-tic button.on .tic { opacity:1; transform:translateY(-2px) scale(1.1); }
.wardrobe .tabs.has-tic button.on { border-bottom-color:var(--tc, #fff); }
.wardrobe .tabs.has-tic button.on::before { content:""; position:absolute; inset:auto 6px 0 6px; height:42px; background:radial-gradient(ellipse at 50% 100%, var(--tc, #fff), transparent 70%); opacity:.3; pointer-events:none; }
@media (max-width:960px) { .wardrobe .tabs.has-tic .tic { width:50px; height:50px; } .wardrobe .tabs.has-tic button { min-width:70px; font-size:.76rem; } }
.wardrobe .items { grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:14px 10px; }
.wardrobe #aMain { grid-template-columns:repeat(4, minmax(0, 1fr)); }      /* (the four side by side, on a phone too: all of them in sight at once) */
.wardrobe .item { position:relative; background:none; border:0; padding:0; min-width:0; }
.wardrobe .item img, .wardrobe .item .pic { display:block; width:100%; height:auto; aspect-ratio:1; border-radius:14px; background:var(--card2); border:2px solid transparent; object-fit:cover; }
.wardrobe .item .pic { display:grid; place-items:center; color:var(--muted); }
.wardrobe .item .pic .ic { width:34px; height:34px; }
.wardrobe .item.on img, .wardrobe .item.on .pic { border-color:var(--green); }
.wardrobe .item .nm { margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wardrobe .item .del { position:absolute; top:5px; inset-inline-end:5px; width:28px; height:28px; border-radius:50%; border:0; background:rgba(15,16,19,.8); color:#fff; cursor:pointer; display:grid; place-items:center; }
.wardrobe .item .del .ic { width:14px; height:14px; }
.wardrobe .ahead { margin:22px 0 10px; font-size:1.02rem; }
.wardrobe .swrow { margin-top:16px; }
.wardrobe .namebox { margin-bottom:4px; } .wardrobe .namebox input { min-width:0; }
.wardrobe .swatches button { box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), inset 0 -3px 0 rgba(0,0,0,.2); }      /* (a dark colour on the dark sheet still shows its edge) */
.wardrobe .small { margin-top:14px; }
/* (when the browser brings a slider or a card into view by itself — the keyboard, a tool — it must land clear of what stays in sight) */
.wardrobe .shaperow, .wardrobe .shaperow input, .wardrobe .item, .wardrobe .swrow, .wardrobe .namebox { scroll-margin-top:calc(var(--top) + 112px); }      /* (under the strip of tabs, which is taller now that they are objects) */
@media (max-width:960px) and (min-height:521px) {
  /* a phone held upright: the stage stays under the bar of the site and the sheet scrolls away under it. The round top
     of the sheet and its handle are drawn on the stage, so the cards seem to slide in under the sheet's own edge. */
  #page-avatar > .ptitle { display:none; }
  .avatarpage { grid-template-columns:minmax(0, 1fr); gap:0; margin:-16px -14px -26px; }
  .avatarpage .stage { top:var(--top); border-radius:0; border:0; aspect-ratio:auto; height:var(--stage); max-height:none; }
  .avatarpage .stage::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:19px; border-radius:22px 22px 0 0; background:var(--card); pointer-events:none; }
  .avatarpage .stage::before { content:""; position:absolute; z-index:1; left:50%; bottom:6px; width:44px; height:5px; margin-left:-22px; border-radius:9px; background:var(--card3); pointer-events:none; }
  .avatarpage .stage .aundo { bottom:30px; }
  .wardrobe { border:0; border-radius:0; padding:0 14px 22px; min-height:calc(100vh - var(--stage) - 64px); }
  .wardrobe .tabs { top:calc(var(--top) + var(--stage) - 1px); margin:0 -14px 14px; padding:0 8px; }
  .wardrobe .shaperow, .wardrobe .shaperow input, .wardrobe .item, .wardrobe .swrow, .wardrobe .namebox { scroll-margin:calc(var(--top) + var(--stage) + 100px) 0 84px; }
}
@supports (height:100svh) { @media (max-width:960px) and (min-height:521px) { .wardrobe { min-height:calc(100svh - var(--stage) - 64px); } } }
@media (max-width:640px) { .wardrobe .items { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:960px) and (max-height:520.98px) {              /* (a phone held sideways: the stage beside the sheet, like on a computer) */
  #page-avatar > .ptitle { display:none; }
  .avatarpage { grid-template-columns:minmax(0, 38%) minmax(0, 1fr); gap:10px; margin:-8px -6px 0; }
  .avatarpage .stage { top:calc(var(--top) + 6px); aspect-ratio:auto; max-height:none; height:calc(100vh - var(--top) - 64px - 14px); min-height:190px; }
  .stage .amode button { padding:0 10px; }
}

/* ---------- the profile (0.15.28): a cover, the photo in its frame, the rank, the level card ---------- */
.panel.pro { padding:0; overflow:hidden; }
.pro .pcover { height:132px; position:relative; background:linear-gradient(135deg, var(--tc1, #334155), var(--tc2, #0f172a)); }
.pro .pcover::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 18% 30%, rgba(255,255,255,.22), transparent 42%), radial-gradient(circle at 82% 70%, rgba(255,255,255,.12), transparent 38%), linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35)); }
.t1 { --tc1:#475569; --tc2:#1e293b; --tc:#cbd5e1; } .t2 { --tc1:#0e7490; --tc2:#164e63; --tc:#67e8f9; } .t3 { --tc1:#15803d; --tc2:#14532d; --tc:#86efac; }
.t4 { --tc1:#1d4ed8; --tc2:#1e1b4b; --tc:#93c5fd; } .t5 { --tc1:#7c3aed; --tc2:#2e1065; --tc:#c4b5fd; } .t6 { --tc1:#be185d; --tc2:#500724; --tc:#f9a8d4; }
.t7 { --tc1:#c2410c; --tc2:#431407; --tc:#fdba74; } .t8 { --tc1:#b91c1c; --tc2:#1c1917; --tc:#fca5a5; } .t9 { --tc1:#ca8a04; --tc2:#422006; --tc:#fde047; }
.pro .phead { position:relative; display:flex; align-items:flex-end; gap:16px; padding:0 20px; margin-top:-58px; flex-wrap:wrap; }
.pro .pid { flex:1; min-width:180px; padding-bottom:6px; }
.pro .pid h2 { margin:0; font-size:1.5rem; line-height:1.25; }
.pro .pacts { padding-bottom:10px; margin:0; }
.pro .pbody { padding:6px 20px 20px; }
.pro .pbio { margin:4px 0 6px; }
.pro .psec { margin:18px 0 8px; font-size:1.05rem; }
.pro .stats { margin:0; }
.ptier { display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap; }
.tierchip { cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:6px; padding:3px 8px 3px 10px; border-radius:999px; font-weight:900; font-size:.82rem; color:var(--tc, #e5e7eb); background:rgba(255,255,255,.06); border:1px solid var(--tc, #e5e7eb); }
.tierchip .ic { width:13px; height:13px; color:inherit; opacity:.7; } .tierchip .cup { flex:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
html[dir=ltr] .tierchip .ic { transform:scaleX(-1); }
/* a cup: the box holds the drawn cup first, then its 3D picture (cups3d.js) */
.cupbox { display:inline-flex; flex:none; align-items:center; justify-content:center; line-height:0; }
.cupbox > svg, .cupbox > img { width:100%; height:100%; display:block; }
/* the big living cup at the top of the list of ranks */
.cupstage { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 10px 12px; border-radius:18px; overflow:hidden; background:radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--tc1) 55%, #0b0c10) 0, #0b0c10 72%); border:1px solid var(--line); }
.cupstage::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 30%, transparent 40%, rgba(0,0,0,.55) 100%); }
.cuphero { width:min(250px, 62vw); aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.cuphero svg, .cuphero canvas { width:100%; height:100%; display:block; }
.cupstage b { position:relative; z-index:1; font-size:1.25rem; color:var(--tc); text-shadow:0 2px 10px rgba(0,0,0,.7); } .cupstage span { position:relative; z-index:1; font-size:.8rem; font-weight:700; color:var(--muted); }
.tierrow { cursor:pointer; } .tierrow.seen { border-color:var(--tc); }
.tierrow.on .cupbox, .tierrow.seen .cupbox { animation:cupfloat 2.8s ease-in-out infinite; }
@keyframes cupfloat { 50% { transform:translateY(-3px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .tierrow .cupbox { animation:none !important; } }
/* the mark of a rank beside a name in the chat: the cup and the name of the rank, small */
.tierchip.mark { padding:0 8px 0 3px; gap:3px; font-size:.7rem; border-width:1px; vertical-align:middle; background:rgba(255,255,255,.04); }
.tierchip.mark .cupbox { margin:-3px 0; }
/* the list of the ranks */
.tierlist { display:grid; gap:6px; max-height:min(38vh, 330px); overflow:auto; padding:2px; }
.tierrow { display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:14px; background:linear-gradient(90deg, color-mix(in srgb, var(--tc1) 30%, var(--card2)), var(--card2)); border:1px solid var(--line); }
.tierrow .cup { flex:none; filter:drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
.tierrow div { flex:1; min-width:0; } .tierrow b { display:block; font-size:1.02rem; color:var(--tc); } .tierrow span { font-size:.78rem; color:var(--muted); font-weight:700; }
.tierrow > .ic { width:18px; height:18px; color:var(--muted); flex:none; } .tierrow em { font-style:normal; font-weight:900; font-size:.74rem; color:#052e16; background:#4ade80; border-radius:999px; padding:2px 9px; flex:none; }
.tierrow.on { border-color:#4ade80; box-shadow:0 0 0 2px rgba(74,222,128,.3); } .tierrow.far { opacity:.6; }
/* (the track of the level's bar was the colour of its card: it could not be seen) */
.plevel .bar { background:rgba(0,0,0,.38); box-shadow:inset 0 0 0 1px var(--line); }
.lvchip { font-weight:900; font-size:.86rem; color:var(--muted); }
/* the level card */
.plevel { display:flex; gap:14px; align-items:center; background:var(--card2); border:1px solid var(--line); border-radius:16px; padding:12px 14px; margin:12px 0 4px; }
.lvbig { flex:none; width:78px; height:78px; border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(145deg, var(--tc1), var(--tc2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px rgba(0,0,0,.3); }
.lvbig b { font-size:1.9rem; font-weight:900; line-height:1; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.4); }
.lvbig span { font-size:.7rem; font-weight:800; color:rgba(255,255,255,.85); margin-top:3px; }
.lvinfo { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.lvtop, .lvsub { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; font-weight:800; font-size:.86rem; }
.lvsub { color:var(--muted); font-size:.8rem; } .lvsub.dim { opacity:.8; }
.lvsub .ic { width:15px; height:15px; color:var(--gold); }
.bar.big { width:100%; height:10px; border-radius:10px; }
/* the photo and its frame: the ring is drawn behind the picture (a gradient), the rare ones turn and glow */
/* (0.15.30, the owner: square, not round. The turning frames keep their colours still and breathe instead: a square that turns shows its corners) */
.pava { --frg:var(--line); position:relative; flex:none; width:128px; height:128px; border-radius:26px; padding:6px; isolation:isolate; }
.pava::before { content:""; position:absolute; inset:0; border-radius:26px; background:var(--frg); z-index:-1; }
.pava img { display:block; width:100%; height:100%; border-radius:20px; object-fit:cover; background:var(--card2); border:3px solid var(--card); }
.pava.mini { width:56px; height:56px; padding:3px; border-radius:14px; } .pava.mini::before { border-radius:14px; } .pava.mini img { border-width:2px; border-radius:11px; }
.pcam { position:absolute; inset-inline-end:-6px; bottom:-6px; width:36px; height:36px; border-radius:50%; border:2px solid var(--card); background:#2563eb; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; padding:0; }
.pcam .ic { width:18px; height:18px; } .pcam[hidden] { display:none; }
.pcrown { position:absolute; top:-16px; left:50%; transform:translateX(-50%) rotate(-8deg); color:#fde047; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); z-index:2; }
.pcrown .ic { width:30px; height:30px; }
.fr-classic { --frg:linear-gradient(160deg,#ffffff,#9ca3af); --frc:#e5e7eb; }
.fr-bronze { --frg:conic-gradient(from 30deg,#7c3f12,#d08b4c,#f3c79a,#a0562a,#7c3f12); --frc:#c07a3e; }
.fr-silver { --frg:conic-gradient(from 30deg,#6b7280,#e5e7eb,#ffffff,#9ca3af,#6b7280); --frc:#cbd5e1; }
.fr-gold { --frg:conic-gradient(from 30deg,#8a5a00,#f5b301,#fff2b0,#d49a00,#8a5a00); --frc:#f5b301; }
.fr-emerald { --frg:conic-gradient(from 30deg,#064e3b,#10b981,#a7f3d0,#047857,#064e3b); --frc:#10b981; }
.fr-sapphire { --frg:conic-gradient(from 30deg,#172554,#3b82f6,#bfdbfe,#1d4ed8,#172554); --frc:#3b82f6; }
.fr-ruby { --frg:conic-gradient(from 30deg,#450a0a,#ef4444,#fecaca,#b91c1c,#450a0a); --frc:#ef4444; }
.fr-aurora { --frg:conic-gradient(#22d3ee,#a78bfa,#f472b6,#34d399,#22d3ee); --frc:#a78bfa; }
.fr-flame { --frg:conic-gradient(#7c2d12,#f97316,#fde047,#ef4444,#7c2d12); --frc:#f97316; }
.fr-crown { --frg:conic-gradient(from 20deg,#713f12,#fde047,#fff7c2,#eab308,#a16207,#fde047,#713f12); --frc:#fde047; }
.pava.fr-aurora::before, .pava.fr-flame::before, .pava.fr-crown::before { animation:frglow 2.600s ease-in-out infinite; }
.pava.fr-flame::before { box-shadow:0 0 18px rgba(249,115,22,.6); } .pava.fr-crown::before { box-shadow:0 0 22px rgba(253,224,71,.55); } .pava.fr-aurora::before { box-shadow:0 0 16px rgba(167,139,250,.5); }
@keyframes frglow { 50% { filter:brightness(1.35) saturate(1.2); } }
@media (prefers-reduced-motion: reduce) { .pava::before { animation:none !important; } }
/* small pictures with a frame (the top list, the search cards): a ring in the frame's colour */
img[class^="fr-"], img[class*=" fr-"] { box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--frc, transparent); border-radius:28% !important; }
/* the dialog «صورتك وإطارك» */
.phdlg .phtop { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.phdlg .phtop .pava { width:110px; height:110px; }
.phbtns { flex:1; min-width:180px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.phbtns .small { margin:0; } .phbtns [hidden] { display:none; }
.frames { display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:8px; max-height:300px; overflow:auto; padding:2px; }
.frbtn { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px 8px; border-radius:14px; border:1px solid var(--line); background:var(--card2); color:inherit; font:inherit; cursor:pointer; }
.frbtn b { font-size:.78rem; } .frbtn small { font-size:.68rem; color:var(--muted); display:inline-flex; align-items:center; gap:3px; } .frbtn small .ic { width:11px; height:11px; }
.frbtn.on { border-color:#22c55e; box-shadow:0 0 0 2px rgba(34,197,94,.35); } .frbtn.locked { opacity:.55; }
/* the public page of a player, in the sheet */
.sheetpro { margin:-20px -20px 0; }
.sheetpro .pcover { border-radius:20px 20px 0 0; }
.sheetpro .dstats { margin:12px 0 0; }
/* how full a database is (the control panel) */
.dbfill { display:inline-block; width:90px; height:8px; border-radius:8px; background:rgba(0,0,0,.35); overflow:hidden; vertical-align:middle; }
.dbfill i { display:block; height:100%; background:linear-gradient(90deg,#14c97f,#3b6cff); } .dbfill.hot i { background:linear-gradient(90deg,#f59e0b,#ef4444); }
/* the staff's list of photos that wait */
.phqueue { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px; }
.phitem { display:flex; gap:12px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px; }
.phitem img { width:110px; height:110px; border-radius:12px; object-fit:cover; flex:none; }
.phitem .acts { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
@media (max-width:760px) {
  .pro .pcover { height:104px; }
  .pro .phead { flex-direction:column; align-items:center; text-align:center; margin-top:-62px; gap:8px; padding:0 14px; }
  .pro .pid { min-width:0; width:100%; } .pro .pid .level, .pro .ptier { justify-content:center; }
  .pro .pacts { justify-content:center; padding-bottom:0; }
  .pro .pbody { padding:6px 14px 16px; } .pro .pmeta, .pro .pbio { justify-content:center; text-align:center; }
  .pava { width:112px; height:112px; }
  .lvbig { width:64px; height:64px; border-radius:16px; } .lvbig b { font-size:1.55rem; }
  .sheetpro { margin:-14px -14px 0; }
}
/* 0.15.59: the line under the update bar that says what the new version brings */
#updateBar .unote{display:block;margin-top:4px;font-size:.86em;opacity:.82;line-height:1.5}

/* 0.15.60: the «غرف صوتية» preview (coming soon): a stage of speakers over a grid of seats */
/* (0.15.170) the voice rooms (the owner: «مربعات على فوق 10 اقسام 5 فوق 5 تحت وتحته يكون الشات… تجميع الورود على الخلفيه…
   من الخارج يكون فيه مربعات… تمتلئ شاشة كامله… مع خلفية جميلة»): square cards outside, the room on the whole screen, our own
   colours and rose. Still backgrounds only (no endless motion behind a scroll: the phones lag) */
.vxl{padding:14px 12px 18px;max-width:900px;margin:0 auto}
.vxlhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;padding:16px;border-radius:18px;background:linear-gradient(135deg,rgba(124,92,255,.32),rgba(255,70,120,.16) 60%,rgba(40,199,168,.12)),var(--card2);border:1px solid rgba(160,140,255,.28)}
.vxlhead h3{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:1.3rem} .vxlhead h3 .ic{width:22px;height:22px;color:#c9b8ff}
.vxlhead p{margin:0;color:var(--muted);font-size:.85rem}
.vxback{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:12px;padding:12px 14px;border-radius:14px;border:1px solid rgba(40,199,111,.5);background:rgba(40,199,111,.14);color:var(--text);font:inherit;font-weight:800;cursor:pointer} .vxback .ic{width:18px;height:18px;color:#28c76f}
.vrnote{display:flex;gap:8px;align-items:flex-start;background:rgba(59,108,255,.14);border:1px solid rgba(59,108,255,.32);border-radius:12px;padding:9px 11px;font-size:.85rem;margin:0 0 12px}
.vxcheck{flex-direction:column;gap:3px;background:rgba(255,80,80,.14);border-color:rgba(255,90,90,.45);font-weight:700} .vxcheck.ok{background:rgba(40,199,111,.14);border-color:rgba(40,199,111,.45)} .vxcheck small{color:var(--muted);font-weight:600}
.vxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
@media (max-width:520px){ .vxgrid{grid-template-columns:repeat(2,1fr)} }
.vxcard{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;padding:0;border:1px solid rgba(255,255,255,.08);background:linear-gradient(150deg,#3a2470,#1a1d2e 60%,#0f2a2c);color:#fff;font:inherit;cursor:pointer;text-align:start;transition:transform .12s,box-shadow .12s}
.vxcard:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.4)}
.vxcard .vxcov,.vxcard .vxcov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vxnocov{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(70% 70% at 50% 35%,rgba(255,90,140,.35),transparent 70%),radial-gradient(60% 60% at 20% 90%,rgba(40,199,168,.3),transparent 70%)} .vxnocov .ic{width:42%;height:42%;color:rgba(255,255,255,.85);filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.vxcap{position:absolute;inset:auto 0 0 0;padding:26px 10px 9px;background:linear-gradient(transparent,rgba(0,0,0,.85));display:flex;flex-direction:column;gap:2px}
.vxcap b{font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vxcap small{display:flex;align-items:center;gap:4px;font-size:.74rem;color:#d7d7e3;white-space:nowrap;overflow:hidden} .vxcap small .ic{width:12px;height:12px;color:#f5b301;flex:none}
.vxchip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:8px;background:rgba(0,0,0,.55);color:#fff;font-size:.74rem;font-weight:900;backdrop-filter:none}
.vxcard .vxchip{position:absolute;top:8px;inset-inline-start:8px} .vxcard .vxchip.rose{inset-inline-start:auto;inset-inline-end:8px}
.vxchip .ic{width:13px;height:13px} .vxchip i{width:7px;height:7px;border-radius:2px;background:#28c76f;box-shadow:0 0 6px #28c76f}
/* (0.15.176) the people in a room now: two green people, sharp and glowing (grey while it is empty) */
.vxcard .vxchip.on{font-size:.86rem;padding:4px 9px;gap:5px;color:#e8eef5}
.vxcard .vxchip.on .ic{width:18px;height:18px;stroke-width:2.4;opacity:.55}
.vxcard .vxchip.live{background:rgba(6,40,22,.82);border:1px solid rgba(52,230,128,.55);color:#fff;box-shadow:0 0 14px rgba(40,199,111,.35)}
.vxcard .vxchip.live .ic{opacity:1;color:#34e680;filter:drop-shadow(0 0 4px rgba(52,230,128,.85))}
/* (0.15.177) somebody came in: a small pill slides from the right edge to the middle, stops, and fades (the chat says «انضم @user» after) */
.vxjoin{position:absolute;left:50%;z-index:5;display:flex;align-items:center;gap:7px;padding:4px 14px 4px 4px;border-radius:10px;overflow:hidden;pointer-events:none;white-space:nowrap;max-width:80%;
  background:linear-gradient(90deg,rgba(124,58,237,.92),rgba(236,72,153,.92));color:#fff;font-size:.86rem;box-shadow:0 4px 16px rgba(236,72,153,.4);transform:translateX(-50%);
  animation:vxjIn .7s cubic-bezier(.15,.85,.3,1.05) both}
.vxjoin.out{animation:vxjOut .4s ease-in both}
.vxjoin b{overflow:hidden;text-overflow:ellipsis}
.vxjpic img{width:26px;height:26px;border-radius:7px;object-fit:cover;display:block;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.vxjshine{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:vxjShine .9s .6s ease-out both}
@keyframes vxjIn{from{transform:translateX(60vw);opacity:0}25%{opacity:1}to{transform:translateX(-50%);opacity:1}}
@keyframes vxjOut{to{transform:translateX(-50%) scale(.85);opacity:0}}
@keyframes vxjShine{to{transform:translateX(120%)}}
.vxchip .vxr-rose,.vxgot .vxr-rose{width:15px;height:15px}
.vxcard.new{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 10px,transparent 10px 20px),var(--card2);border:2px dashed rgba(160,140,255,.45)}
.vxcard.new b{font-size:1rem} .vxplus{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#7c5cff,#ff4f8a)} .vxplus .ic{width:28px;height:28px;color:#fff}
.vxpick{cursor:pointer;justify-content:center}
.vxmenu{display:flex;flex-direction:column;gap:10px} .vxmenu .btn{width:100%;display:flex;align-items:center;gap:8px;min-height:48px}
.vxmenu .vxdanger{margin-top:8px}
/* (0.15.274) private rooms, the settings of who comes in, and the quality of a shared screen */
.vxlock{position:absolute;bottom:8px;inset-inline-start:8px;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:rgba(0,0,0,.6);color:#f5b301} .vxlock .ic{width:14px;height:14px}
.vxcard.locked .vxcov{filter:grayscale(1) brightness(.4)} .vxcard.locked{cursor:not-allowed}
.vxlockbig{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#ff4d4d;pointer-events:none} .vxlockbig .ic{width:46px;height:46px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))} .vxlockbig b{font-size:.84rem;font-weight:900;color:#ff6b6b;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.vxst.lock{color:#f5b301;font-weight:800} .vxst.lock .ic{color:#f5b301}
.vxpriv{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card2);cursor:pointer;margin:6px 0}
.vxpriv input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:#f5b301} .vxpriv span{display:flex;flex-direction:column;gap:2px} .vxpriv small{color:var(--muted);font-weight:600;font-size:.78rem}
.vxacc{display:flex;flex-direction:column;gap:12px;max-height:min(64vh,560px);overflow-y:auto}
.vxasec{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--card2)}
.vxlink{display:flex;gap:6px;align-items:stretch} .vxlink input{flex:1;min-width:0;direction:ltr;text-align:start}
.vxalist{display:flex;flex-direction:column;gap:5px;max-height:170px;overflow-y:auto}
.vxarow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.04)} .vxarow small{color:var(--muted)}
.vxarow .vxib.sm{width:34px;height:34px;flex:none}
.vxtiers{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.vxtier{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:start;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--card2);color:var(--text);font:inherit;cursor:pointer;min-height:56px}
.vxtier small{color:var(--muted);font-weight:600} .vxtier.on{border-color:#f5b301;background:rgba(245,179,1,.12)}
.vxr-rose{width:1.2em;height:1.2em;display:inline-block;vertical-align:middle;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.vxr-rose.big{width:72px;height:72px}

/* the room, on the whole screen */
html.vx-open,html.vx-open body{overflow:hidden}
/* (0.15.173) the windows and the little messages open ABOVE the room (they were under it: «الثلاث نقاط لا تعمل») */
html.vx-open #dialog{z-index:1001} html.vx-open #toast{z-index:1002}
.vxib.people{width:auto;padding:0 10px;gap:5px;display:inline-flex;align-items:center} .vxib.people b{font-size:.9rem}
.vxsq .vmic.off{background:#e5484d} .vxib.off{background:linear-gradient(135deg,#e5484d,#b4232a);border-color:transparent;color:#fff}
/* (0.15.178) the settings of the microphone */
.vxmicset{display:flex;flex-direction:column;gap:10px}
.vxmstate{display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px;border-radius:12px;font-weight:800}
.vxmstate .ic{width:22px;height:22px} .vxmstate.on{background:rgba(40,199,111,.16);color:#34e680;border:1px solid rgba(52,230,128,.45)} .vxmstate.off{background:rgba(229,72,77,.14);color:#ff6b70;border:1px solid rgba(229,72,77,.45)}
.vxlvl{height:12px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden} .vxlvl i{display:block;height:100%;width:0;background:linear-gradient(90deg,#28c76f,#a3e635,#facc15);transition:width .08s linear}
.vxmerr{opacity:.65;font-size:.72rem;word-break:break-word;margin:0}
.vxt{cursor:pointer}
.vxsteps{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:8px;line-height:1.5}
.vxppl{display:flex;flex-direction:column;gap:6px;max-height:min(60vh,520px);overflow-y:auto}
.vxpp{display:flex;align-items:center;gap:10px;text-align:start;padding:8px;border-radius:12px;border:1px solid var(--line);background:var(--card2);color:var(--text);font:inherit;cursor:pointer}
.vxppic img{width:48px;height:48px;border-radius:11px;object-fit:cover;display:block}
.vxpi{display:flex;flex-direction:column;gap:2px;min-width:0} .vxpi b{display:flex;align-items:center;gap:3px;font-size:.95rem} .vxpi small{color:var(--muted);font-size:.76rem}
.vxr{position:fixed;inset:0;z-index:960;color:#fff;background:#0d0b18;display:flex;justify-content:center}
.vxr[hidden]{display:none}
.vxbg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(70% 40% at 80% 0%,rgba(150,90,255,.5),transparent 70%),radial-gradient(60% 40% at 0% 25%,rgba(255,70,130,.28),transparent 70%),radial-gradient(70% 45% at 50% 105%,rgba(255,60,110,.35),transparent 70%),linear-gradient(180deg,#22113f,#120f24 45%,#170a1c)}
.vxsky{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.vxbg::before{content:"";position:absolute;inset:-20px;z-index:1;background:var(--cover) center/cover no-repeat;filter:blur(18px) saturate(1.2);opacity:.26;mix-blend-mode:screen}
.vxbg::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(13,11,24,0),rgba(13,11,24,.18) 60%,rgba(13,11,24,.35))}
.vxpile{position:absolute;inset:auto 0 0 0;height:38%;pointer-events:none;opacity:.6}
.vxpile i{position:absolute;width:44px;height:44px} .vxpile .vxr-rose{width:100%;height:100%}
.vxload{position:relative;margin:auto;display:flex;flex-direction:column;align-items:center;gap:10px;font-weight:800} .vxload .ic.big{width:52px;height:52px;color:#c9b8ff}
.vxwrap{position:relative;width:100%;max-width:760px;height:100%;height:100dvh;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}
.vxrh{display:flex;align-items:center;gap:8px;padding:8px;border-radius:16px;background:rgba(10,8,22,.55);border:1px solid rgba(255,255,255,.08)}
.vxcov.sm{position:relative;flex:none;width:44px;height:44px;border-radius:11px;overflow:hidden;background:linear-gradient(135deg,#7c5cff,#ff4f8a)} .vxcov.sm img{width:100%;height:100%;object-fit:cover;display:block} .vxcov.sm .vxnocov .ic{width:60%;height:60%}
.vxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .vxt b{font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vxt small{display:flex;align-items:center;gap:4px;color:#c9c6dd;font-size:.72rem;white-space:nowrap;overflow:hidden} .vxt small .ic{width:12px;height:12px;color:#f5b301;flex:none} .vxst{display:inline-flex;align-items:center;gap:2px;margin-inline-start:6px;color:#fff;font-weight:900} .vxst .ic{color:#c9c6dd!important} .vxst .vxr-rose{width:13px;height:13px}
.vxib{flex:none;width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;font:inherit;font-size:1.1rem}
.vxib .ic{width:19px;height:19px} .vxib.red{background:rgba(255,70,70,.25);border-color:rgba(255,90,90,.4)} .vxib.on{background:linear-gradient(135deg,#28c76f,#1e9f59);border-color:transparent} .vxib.off{background:rgba(255,80,80,.18);border-color:rgba(255,90,90,.35);color:#ffb3b3}
.vxib.gift{background:linear-gradient(135deg,rgba(255,79,138,.35),rgba(124,92,255,.35));border-color:rgba(255,120,160,.5)} .vxib.gift .vxr-rose{width:26px;height:26px}
.vxib.send{background:linear-gradient(135deg,#7c5cff,#ff4f8a);border:0} .vxib.send .ic{transform:scaleX(-1)}
.vxscreen{position:relative;flex:none;align-self:center;width:auto;max-width:100%;border-radius:14px;overflow:hidden;background:#000;border:1px solid rgba(160,140,255,.35);aspect-ratio:16 / 9;max-height:30vh}
.vxscreen[hidden]{display:none} .vxscreen video{width:100%;height:100%;object-fit:contain;display:block}
.vxsl{position:absolute;top:8px;inset-inline-start:8px;display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.65);padding:4px 9px;border-radius:9px;font-size:.76rem;font-weight:800} .vxsl .ic{width:14px;height:14px}
.vxfull{position:absolute;top:8px;inset-inline-end:8px}
.vxseats{flex:none;width:100%;max-width:min(560px,calc((100dvh - 330px) * 2.3));margin-inline:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:8px 6px;padding:10px 6px;border-radius:18px;background:rgba(10,8,22,.4);border:1px solid rgba(255,255,255,.07)}
.vxseat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:none;color:#fff;font:inherit;cursor:pointer;min-width:0}
.vxsq{position:relative;width:100%;aspect-ratio:1;border-radius:13px;overflow:hidden;background:linear-gradient(160deg,#2c2550,#16142a);border:2px solid rgba(255,255,255,.1);transition:border-color .12s,box-shadow .12s}
.vxsq img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vxseat.empty .vxsq{display:grid;place-items:center;background:rgba(255,255,255,.05);border:2px dashed rgba(255,255,255,.18)} .vxseat.empty .vxsq .ic{width:38%;height:38%;color:rgba(255,255,255,.45)}
.vxseat.empty .vxsq em{position:absolute;bottom:4px;inset-inline-end:6px;font-style:normal;font-size:.62rem;font-weight:900;color:rgba(255,255,255,.4)}
.vxseat.empty:hover .vxsq{border-color:rgba(160,140,255,.7);background:rgba(124,92,255,.15)}
.vxseat.talking .vxsq{border-color:#3ee08a;box-shadow:0 0 0 2px rgba(62,224,138,.35),0 0 16px rgba(62,224,138,.55)}
.vxsq .vmic,.vxsq .vtag,.vxsq .vscr{position:absolute;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;box-shadow:0 2px 5px rgba(0,0,0,.45)}
.vxsq .vmic{bottom:3px;inset-inline-end:3px;background:#28c76f} .vxsq .vmic.off{background:#4a4f5c} .vxsq .vtag{top:3px;inset-inline-start:3px} .vxsq .vscr{top:3px;inset-inline-end:3px;background:#7c5cff}
.vxsq .vtag.host{background:linear-gradient(135deg,#f5b301,#e08a00)} .vxsq .vtag.mod{background:#3b6cff} .vxsq .ic{width:12px;height:12px;color:#fff}
.vxsn{display:flex;align-items:center;justify-content:center;gap:2px;max-width:100%;font-size:.66rem;font-weight:800;color:#e8e6f5;white-space:nowrap;overflow:hidden} .vxsn>span:first-child{overflow:hidden;text-overflow:ellipsis} .vxsn .verified .ic{width:11px;height:11px}
.vxseat.empty .vxsn{color:rgba(255,255,255,.4);font-weight:700}
.vxgot{display:inline-flex;align-items:center;gap:2px;font-size:.62rem;font-weight:900;color:#ffb3c6;margin-top:-2px}
.vxhands{flex:none;display:flex;align-items:center;gap:5px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none} .vxhands::-webkit-scrollbar{display:none}
.vxhands:empty{display:none}
.vxhl{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:900;color:#c9c6dd;padding:0 4px} .vxhl .ic{width:14px;height:14px}
.vxlis{position:relative;flex:none;width:32px;height:32px;border-radius:9px;overflow:hidden;padding:0;border:1px solid rgba(255,255,255,.15);background:#1b1f2b;cursor:pointer} .vxlis img{width:100%;height:100%;object-fit:cover;display:block}
.vxlis.hand{border-color:#ffb020} .vxlis b{position:absolute;inset:auto 0 0 auto;font-size:.7rem}
.vxmsgs{flex:1;min-height:60px;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding:8px;border-radius:16px;background:linear-gradient(180deg,rgba(10,8,22,.25),rgba(10,8,22,.5));overscroll-behavior:contain;-webkit-mask-image:linear-gradient(transparent,#000 18px)}
.vxsys{align-self:center;max-width:94%;text-align:center;font-size:.76rem;font-weight:700;color:#ffd6e2;background:rgba(255,79,138,.16);border:1px solid rgba(255,120,160,.25);padding:4px 10px;border-radius:10px}
.vxm{display:flex;gap:7px;align-items:flex-start;max-width:100%}
.vxmpic img{width:30px;height:30px;border-radius:8px;object-fit:cover;display:block;background:#1b1f2b}
.vxmb{min-width:0;background:rgba(255,255,255,.07);border-radius:4px 12px 12px 12px;padding:5px 9px 6px}
.vxm.mine .vxmb{background:rgba(124,92,255,.22)}
.vxmh{display:flex;align-items:center;gap:4px;font-size:.74rem} .vxmh b{font-weight:900} .vxmh b.staff{color:#7cc4ff} .vxmh time{color:rgba(255,255,255,.45);font-size:.66rem;margin-inline-start:6px} .vxmh .verified .ic{width:12px;height:12px} .vxmh .hb .role{font-size:.56rem}
.vxmt{font-size:.9rem;line-height:1.45;word-break:break-word;unicode-bidi:plaintext}
.vxdel{border:0;background:none;color:rgba(255,255,255,.4);cursor:pointer;padding:0 2px;opacity:0} .vxdel .ic{width:12px;height:12px} .vxm:hover .vxdel{opacity:1}
@media (pointer:coarse){ .vxdel{opacity:.55} }
.vxfoot{flex:none;display:flex;align-items:center;gap:6px;padding:6px;border-radius:16px;background:rgba(10,8,22,.7);border:1px solid rgba(255,255,255,.08)}
.vxfoot input{flex:1;min-width:0;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);color:#fff;padding:0 12px;font:inherit}
.vxfoot input::placeholder{color:rgba(255,255,255,.45)}
.vxtools{display:flex;gap:6px}
.vxfly{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.vxflyr{position:absolute;left:50%;bottom:-70px;width:64px;height:64px;animation:vxfly 1.5s cubic-bezier(.2,.7,.3,1) forwards}
.vxflyr .vxr-rose{width:100%;height:100%}
@keyframes vxfly{0%{transform:translate(-50%,0) scale(.6);opacity:0}15%{opacity:1}70%{opacity:1}100%{left:0;bottom:auto;top:0;transform:translate(var(--x),var(--y)) scale(.55);opacity:0}}
.vxbig{position:absolute;inset:0;margin:auto;width:220px;height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;animation:vxpop 2.4s ease forwards;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.vxbig .vxr-rose.big{width:130px;height:130px;filter:drop-shadow(0 0 22px rgba(255,60,110,.7))} .vxbig b{font-size:1.8rem;color:#ffd6e2} .vxbig span{font-size:.85rem;font-weight:800}
@keyframes vxpop{0%{transform:scale(.3);opacity:0}15%{transform:scale(1.08);opacity:1}25%{transform:scale(1)}80%{opacity:1}100%{transform:scale(1.15);opacity:0}}
.vxgift{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center} .vxgift p{margin:0}
.vxwhos{display:flex;gap:8px;overflow-x:auto;padding:8px 2px}
.vxwho{flex:none;width:68px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;border-radius:12px;border:2px solid transparent;background:rgba(255,255,255,.05);color:var(--text);font:inherit;font-size:.7rem;cursor:pointer} .vxwho img{width:46px;height:46px;border-radius:10px;object-fit:cover} .vxwho span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vxwho.on{border-color:#ff4f8a;background:rgba(255,79,138,.14)}
.vxns{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.vxn{display:inline-flex;align-items:center;gap:3px;padding:7px 10px;border-radius:11px;border:2px solid var(--line);background:var(--card2);color:var(--text);font:inherit;font-weight:900;cursor:pointer} .vxn.on{border-color:#ff4f8a;background:rgba(255,79,138,.16)}
.vxcost{text-align:center;margin:8px 0 0}
.vxpill{position:fixed;z-index:950;bottom:calc(84px + env(safe-area-inset-bottom));inset-inline-start:12px;display:flex;align-items:center;gap:7px;max-width:60vw;padding:9px 13px;border-radius:14px;border:1px solid rgba(255,120,160,.5);background:linear-gradient(135deg,#3a1f6e,#5a1838);color:#fff;font:inherit;font-weight:800;font-size:.85rem;box-shadow:0 8px 22px rgba(0,0,0,.45);cursor:pointer}
.vxpill[hidden]{display:none} .vxpill .ic{width:17px;height:17px;color:#3ee08a;flex:none} .vxpill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:900px){ .vxpill{bottom:20px} }
.vroom{padding:18px 14px;text-align:center;max-width:460px;margin:0 auto}
.vroom-head{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px}
.vroom-head h3{display:flex;align-items:center;gap:8px;margin:0;font-size:1.25rem}
.vroom-head h3 svg{width:22px;height:22px}
.soon-badge{background:linear-gradient(180deg,#ffd84d,#f5b800);color:#3a2b00;font-weight:800;font-size:.72rem;padding:4px 10px;border-radius:999px;box-shadow:0 2px 8px rgba(245,184,0,.35)}
.vstage{display:flex;justify-content:center;gap:18px;margin-bottom:18px}
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 10px;max-width:340px;margin:0 auto}
.vseat{position:relative;aspect-ratio:1;width:100%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(120% 120% at 35% 25%,#2a2f3e,#1b1f2b);border:1px solid rgba(255,255,255,.06)}
.vstage .vseat{width:74px;height:74px}
.vseat svg{width:46%;height:46%;opacity:.55;color:#aeb6c8}
.vseat .vplus{font-size:1.4rem;color:#5a6274;font-weight:300}
.vseat.named{background:radial-gradient(120% 120% at 35% 25%,#6a5bd0,#3a2f7a);border-color:rgba(160,140,255,.4)}
.vseat.named svg{opacity:.9;color:#f0ecff}
.vseat.spk{box-shadow:0 0 0 3px rgba(150,120,255,.35)}
.vseat .vmic{position:absolute;right:-2px;bottom:-2px;width:26px;height:26px;border-radius:50%;background:#7c5cff;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.vseat .vmic svg{width:58%;height:58%;opacity:1;color:#fff}
.vseat.talking{box-shadow:0 0 0 3px rgba(120,255,170,.6)}
.vseat.talking::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(120,255,170,.6);animation:vpulse 1.6s ease-out infinite}
@keyframes vpulse{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.25);opacity:0}}
.vseat.talking .vmic{background:#28c76f}
.vnote{margin:18px auto 0;max-width:340px;color:#9aa3b4;font-size:.92rem;line-height:1.7}
/* a player's picture, large, over the page (0.15.69): a tap on the picture of a profile shows it whole; a tap anywhere closes it */
.zoomable{cursor:zoom-in}
.facezoom{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:16px;background:rgba(6,7,10,.9);cursor:zoom-out;animation:fzIn .16s ease-out}
.facezoom .fzpic img{display:block;width:min(88vw,72vh,560px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:22px;background:var(--card2);box-shadow:0 18px 60px rgba(0,0,0,.6)}
.facezoom .fzclose{position:absolute;top:max(14px,env(safe-area-inset-top));inset-inline-end:14px}
@keyframes fzIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.facezoom{animation:none}}
/* the bar of the selection in the studio (0.15.71): a panel at the left on a computer, a row above the tools on a phone */
#sSel{position:absolute;top:64px;left:10px;width:214px;max-height:calc(100% - 200px);overflow-y:auto;padding:10px;z-index:2}
#sSel .scount{display:block;font-size:.82rem;margin:0 2px 8px;color:#e5e7eb}
#sSel .sbtns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#sSel button{display:flex;align-items:center;justify-content:center;gap:5px;background:var(--card2);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:.5em .3em;font-weight:800;font-size:.8rem;cursor:pointer;font-family:inherit}
#sSel button:disabled{opacity:.38;cursor:default}
#sSel button .ic{width:16px;height:16px;flex:none}
#sSel [data-s=left] .ic{transform:rotate(-90deg)} #sSel [data-s=right] .ic{transform:rotate(90deg)} #sSel [data-s=back] .ic{transform:rotate(180deg)}
#sSel [data-s=up] .ic{transform:rotate(-90deg)} #sSel [data-s=down] .ic{transform:rotate(90deg)}
#sSel [data-s=del]:not(:disabled){border-color:rgba(248,113,113,.5)}
@media (max-width:640px){
  #sSel{top:auto;bottom:222px;left:10px;right:10px;width:auto;max-height:none;padding:6px 8px;display:flex;align-items:center;gap:8px;overflow:visible}
  #sSel .scount{margin:0;flex:none;max-width:78px;font-size:.7rem;line-height:1.25}
  #sSel .sbtns{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0}
  #sSel button{flex:none;flex-direction:column;gap:2px;padding:.35em .4em;font-size:.66rem;min-width:46px}
}
/* the box drawn on the screen to choose bricks in the studio (0.15.73), and the button that is on while it waits for the drag */
#sBox{position:fixed;z-index:55;pointer-events:none;border:2px dashed #38bdf8;background:rgba(56,189,248,.14);border-radius:4px}
#sSel button.on{border-color:#38bdf8;background:linear-gradient(180deg,rgba(56,189,248,.35),rgba(14,116,144,.35))}
/* the solid icons of the selection bar (0.15.75): a little bigger than the flat ones, and turned like them (the arrows) */
#sSel button img.ic3s{width:26px;height:26px;object-fit:contain}

/* (0.15.81) the tape deck: the music button is a cassette whose reels turn while music plays, and its deck of songs */
#musicBtn .cassette { width:26px; height:20px; }
#musicBtn.playing { color:#fcd34d; }
#musicBtn.off { opacity:.55; }
.cassette .reel { transform-box:view-box; }
#musicBtn.playing .cassette .reel, .dtape.playing .cassette .reel { animation:reelspin 2.2s linear infinite; }
@keyframes reelspin { to { transform:rotate(360deg); } }
.deck { position:fixed; z-index:1200; padding:14px; background:rgba(18,20,26,.97); display:grid; gap:10px; box-shadow:0 18px 50px rgba(0,0,0,.55); }
.deck .dhead { display:flex; align-items:center; justify-content:space-between; }
.deck .dx { background:none; border:0; color:inherit; font-size:1.1rem; cursor:pointer; width:36px; height:36px; border-radius:10px; }
.deck .dx:hover { background:rgba(255,255,255,.08); }
.deck .dcard { display:flex; align-items:center; gap:6px; touch-action:pan-y; user-select:none; }
.deck .dtape { flex:1; min-width:0; display:grid; place-items:center; color:#fcd34d; padding:6px 0; background:radial-gradient(closest-side, rgba(252,211,77,.12), transparent); border-radius:14px; }
.deck .dtape { overflow:hidden; }
.deck .dtape .cassette.big { width:100%; height:auto; aspect-ratio:32/24; max-width:200px; }
.deck .dtape .clabel { font-size:2.2px; font-weight:800; fill:currentColor; font-family:inherit; }
.deck .dtape.from-l { animation:tapeL .28s ease-out; } .deck .dtape.from-r { animation:tapeR .28s ease-out; }
@keyframes tapeL { from { transform:translateX(-24px); opacity:.2; } } @keyframes tapeR { from { transform:translateX(24px); opacity:.2; } }
.deck .darrow { flex:none; width:40px; height:56px; border:0; border-radius:12px; background:var(--card2); color:inherit; font-size:1.6rem; cursor:pointer; }
.deck .dname { display:grid; justify-items:center; gap:2px; text-align:center; }
.deck .dname .dnum { font-size:1.35rem; font-weight:800; color:#fcd34d; }
.deck .dname b { font-size:1.15rem; }
.deck .dname small { color:var(--muted); }
.deck .ddots { display:flex; justify-content:center; gap:0; }
.deck .ddot { -webkit-appearance:none; appearance:none; width:24px; height:24px; padding:0; margin:0; border:0; background:none; cursor:pointer; display:grid; place-items:center; }
.deck .ddot::before { content:""; display:block; width:9px; height:9px; border-radius:6px; background:rgba(255,255,255,.25); transition:width .2s; pointer-events:none; }
.deck .ddot.on { width:34px; } .deck .ddot.on::before { background:#fcd34d; width:22px; }
.deck .dbtns { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.deck .dbtns .btn.on { border-color:#6ee7b7; }
.deck .dhint { margin:0; text-align:center; }
@media (prefers-reduced-motion: reduce) { #musicBtn.playing .cassette .reel, .dtape.playing .cassette .reel, .deck .dtape.from-l, .deck .dtape.from-r { animation:none; } }
/* (0.15.81) the 3D cassette: the button flips through twelve pictures of its reels while music plays; the deck draws it live */
#musicBtn .cas3 { display:block; width:34px; height:25px; background-repeat:no-repeat; background-size:408px 25px; background-position:0 0; }
#musicBtn.playing .cas3 { animation:cas3 .9s steps(12) infinite; }
@keyframes cas3 { to { background-position:-408px 0; } }
.deck .dtape.is3d { background:radial-gradient(closest-side, rgba(252,211,77,.10), transparent); padding:0; }
.deck .dtape .cas3live { display:block; width:100%; max-width:300px; height:auto; aspect-ratio:300/210; touch-action:pan-y; }
@media (prefers-reduced-motion: reduce) { #musicBtn.playing .cas3 { animation:none; } }
.deck.one .darrow, .deck.one .ddots, .deck.one .dhint { display:none; }

/* (0.15.82) the studio: any colour (the rainbow square at the end of the palette) and the materials of the bricks */
.palette .anycolor { position:relative; flex:none; width:30px; height:30px; border-radius:8px; border:2px solid rgba(255,255,255,.25); cursor:pointer; overflow:hidden; background:conic-gradient(#f43f5e,#f59e0b,#eab308,#22c55e,#06b6d4,#6366f1,#d946ef,#f43f5e); box-shadow:inset 0 -4px 0 rgba(0,0,0,.2); }
.palette .anycolor.on { border-color:#fff; transform:scale(1.15); }
.palette .anycolor input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; padding:0; border:0; }
.cat.mats button i { width:26px; height:14px; border-radius:4px; }
.mat-plastic i { background:linear-gradient(180deg,#b9c6ee,#90a4d4); }
.mat-metal i { background:linear-gradient(100deg,#6b7280,#f3f4f6 45%,#9ca3af 55%,#4b5563); }
.mat-glass i { background:linear-gradient(135deg,rgba(191,230,255,.75),rgba(191,230,255,.2)); border:1px solid rgba(191,230,255,.8); }
.mat-wood i { background:repeating-linear-gradient(0deg,#8a5a34 0 3px,#6f4526 3px 5px); }
.mat-stone i { background:radial-gradient(circle at 30% 30%,#b4b9c1 0 20%,transparent 21%),radial-gradient(circle at 70% 65%,#7d838c 0 22%,transparent 23%),#979ca5; }
.mat-soil i { background:radial-gradient(circle at 35% 40%,#6b4a30 0 14%,transparent 15%),radial-gradient(circle at 70% 60%,#9a7350 0 12%,transparent 13%),#7f5b3c; }
.mat-neon i { background:#a3e635; box-shadow:0 0 8px #a3e635, inset 0 0 0 rgba(0,0,0,0); }

/* (0.15.83) «عالم منجنيف»: the card on the home page, and the screen of its 30-second cinematic */
.wgcard { position:relative; display:block; width:100%; min-height:190px; margin:0 0 16px; padding:0; border:0; border-radius:20px; overflow:hidden; cursor:pointer; color:#fff; font:inherit; text-align:start; isolation:isolate;
  background:radial-gradient(120% 140% at 15% 20%, #3a1650 0%, #0b1030 45%, #05060c 100%); box-shadow:0 18px 50px rgba(0,0,0,.45); }
.wgcard .wgposter { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 6s ease-out; }
.wgcard:hover .wgposter { transform:scale(1.05); }
.wgcard .wgshade { position:absolute; inset:0; z-index:-1; background:linear-gradient(270deg, rgba(5,6,12,.92) 0%, rgba(5,6,12,.6) 42%, rgba(5,6,12,.05) 75%), linear-gradient(0deg, rgba(5,6,12,.75), transparent 55%); }
.wgcard .wgbody { position:relative; display:grid; gap:4px; padding:22px 24px 58px; max-width:560px; }
.wgcard .wgkick { display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:800; color:#fcd34d; }
.wgcard .wgkick .ic { width:16px; height:16px; }
.wgcard .wgname { font-size:clamp(2rem, 7vw, 3.2rem); line-height:1.15; font-weight:900; letter-spacing:-.01em; text-shadow:0 0 28px rgba(255,61,110,.55), 0 4px 18px rgba(0,0,0,.8); }
.wgcard .wgdesc { color:#d7d9e4; font-weight:700; }
.wgcard .wgwatch { position:absolute; inset-inline-start:24px; bottom:16px; display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; background:#e11d48; font-weight:800; box-shadow:0 6px 20px rgba(225,29,72,.45); }
.wgcard .wgwatch .ic { width:16px; height:16px; }
.wgcard:focus-visible { outline:3px solid #fcd34d; outline-offset:3px; }
body.wg-open { overflow:hidden; }
.wgscreen { position:fixed; inset:0; z-index:2000; background:#000; display:grid; place-items:center; }
.wgscreen canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.wgscreen video { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; background:#000; }
.wgscreen .wgbars { position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 9vh 0 #000, inset 0 -9vh 0 #000; }
.wgscreen .wgload { position:relative; display:flex; align-items:center; gap:10px; color:#e5e7eb; font-weight:800; }
.wgscreen .wgwords { position:absolute; inset-inline:16px; bottom:calc(9vh + 26px); text-align:center; color:#f5f1e6; font-weight:700; font-size:clamp(1rem, 2.5vw, 1.75rem); letter-spacing:.01em; text-shadow:0 1px 2px #000, 0 0 10px rgba(0,0,0,.95), 0 0 22px rgba(0,0,0,.7); pointer-events:none; }
.wgscreen .wgtitle { position:absolute; inset-inline:16px; top:30%; transform:translateY(-50%); display:grid; justify-items:center; gap:6px; text-align:center; color:#fff; pointer-events:none; animation:wgrise 1.6s ease-out both; }
.wgscreen .wgtitle small { color:#fcd34d; font-weight:800; font-size:1rem; letter-spacing:.2em; }
.wgscreen .wgtitle b { font-size:clamp(2.8rem, 13vw, 7rem); line-height:1.1; font-weight:900; text-shadow:0 0 40px rgba(255,61,110,.8), 0 0 90px rgba(57,208,255,.45), 0 6px 26px #000; }
.wgscreen .wgtitle span { font-weight:800; color:#e5e7eb; font-size:clamp(1rem, 3.4vw, 1.5rem); text-shadow:0 2px 12px #000; }
@keyframes wgrise { from { opacity:0; transform:translateY(-50%) scale(1.12); letter-spacing:.2em; } }
/* the bell of the top bar (0.15.105): a 3D bell with a red number on it, and under it the cards of the site's updates */
.bellwrap { position:relative; display:inline-flex; }
#bellBtn { position:relative; overflow:visible; }
.bell3 { display:block; width:30px; height:30px; object-fit:contain; -webkit-user-drag:none; user-select:none; pointer-events:none; }
#bellBtn.ringing .bell3 { animation:bellswing 2.6s ease-in-out infinite; transform-origin:50% 12%; }
@keyframes bellswing { 0%, 62%, 100% { transform:rotate(0); } 68% { transform:rotate(13deg); } 76% { transform:rotate(-11deg); } 84% { transform:rotate(7deg); } 92% { transform:rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { #bellBtn.ringing .bell3 { animation:none; } }
.belln { position:absolute; top:-6px; inset-inline-end:-6px; min-width:19px; height:19px; padding:0 5px; border-radius:99px; background:#ef4444; color:#fff; font:800 .7rem/19px system-ui, sans-serif; text-align:center; pointer-events:none; box-shadow:0 0 0 2px var(--bg, #17181c); }
.bellpanel { position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:60; width:min(380px, calc(100vw - 20px)); max-height:min(74vh, 560px); overflow:auto; overscroll-behavior:contain; padding:12px; border-radius:16px; background:var(--card); border:1px solid var(--line); box-shadow:0 16px 44px rgba(0,0,0,.55); }
.bellpanel h4 { display:flex; align-items:center; gap:8px; margin:0 2px 10px; font-size:1rem; }
.bellpanel h4 .bell3 { width:26px; height:26px; }
#bellList { display:grid; gap:10px; }
.upcard { display:grid; gap:8px; padding:12px; border-radius:12px; background:var(--card2); border:1px solid var(--line); }
.upcard header { display:flex; align-items:center; gap:8px; }
.upcard .upv { flex:none; padding:3px 9px; border-radius:8px; background:rgba(255,255,255,.07); font:800 .8rem/1.4 ui-monospace, Consolas, monospace; letter-spacing:.02em; }
.upcard time { flex:1; min-width:0; opacity:.6; font-size:.74rem; }
.upcard .upnew { flex:none; font-style:normal; padding:2px 9px; border-radius:99px; background:#ef4444; color:#fff; font-weight:800; font-size:.7rem; }
.upcard p { margin:0; font-size:.9rem; line-height:1.75; font-weight:600; overflow-wrap:anywhere; }
.upcard.new { border-color:#ef4444; background:rgba(239,68,68,.09); }
.bellnone { display:flex; align-items:center; justify-content:center; gap:8px; margin:16px 0; opacity:.7; font-weight:700; }
.bellnone .ic { width:18px; height:18px; }
@media (max-width:640px) { .bellpanel { position:fixed; top:60px; inset-inline:10px; width:auto; max-height:calc(100vh - 150px); } }
.qrbox { display:flex; justify-content:center; margin:2px 0; }
.qrbox canvas { width:min(232px, 62vw); height:auto; border-radius:10px; image-rendering:pixelated; }
.twmore { border:1px solid var(--line, #2a2d36); border-radius:10px; padding:8px 10px; }
.twmore summary { cursor:pointer; font-weight:800; }
.wgscreen .wgcredit { position:absolute; inset-inline:16px; bottom:calc(9vh + 6px); margin:0; text-align:center; color:#d8d3c6; font-size:clamp(.55rem, 1.05vw, .8rem); font-weight:600; letter-spacing:.02em; text-shadow:0 1px 3px #000, 0 0 8px rgba(0,0,0,.9); pointer-events:none; }
.wgscreen .wgend { position:absolute; inset-inline:16px; bottom:calc(9vh + 34px); display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; }
.wgscreen .wgnote { flex-basis:100%; margin:4px 0 0; text-align:center; color:#fcd34d; font-weight:800; display:flex; gap:8px; justify-content:center; align-items:center; }
.wgscreen .wgnote .ic { width:18px; height:18px; }
.wgscreen .wgscrub { position:absolute; inset-inline:12px; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); display:flex; align-items:center; gap:10px; direction:ltr; }
.wgscreen .wgscrub .iconbtn { flex:none; width:40px; height:40px; background:rgba(20,22,30,.75); }
.wgscreen .wgscrub span { flex:none; min-width:2.6em; color:#fff; font-weight:800; font-variant-numeric:tabular-nums; text-shadow:0 1px 6px #000; }
.wgscreen .wgscrub input { flex:1; min-width:0; height:28px; margin:0; -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer; }
.wgscreen .wgscrub input::-webkit-slider-runnable-track { height:6px; border-radius:3px; background:linear-gradient(90deg, #e11d48 var(--done, 0%), rgba(255,255,255,.28) var(--done, 0%)); }
.wgscreen .wgscrub input::-moz-range-track { height:6px; border-radius:3px; background:rgba(255,255,255,.28); }
.wgscreen .wgscrub input::-moz-range-progress { height:6px; border-radius:3px; background:#e11d48; }
.wgscreen .wgscrub input::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; margin-top:-7px; border-radius:50%; background:#fff; border:3px solid #e11d48; }
.wgscreen .wgscrub input::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid #e11d48; }
.wgscreen .wgscrub input:focus-visible { outline:2px solid #fcd34d; outline-offset:4px; }
.wgscreen .wgx { position:absolute; top:calc(12px + env(safe-area-inset-top, 0px)); inset-inline-start:12px; background:rgba(20,22,30,.7); }
@media (max-width:760px) { .wgcard { min-height:190px; } .wgcard .wgbody { padding:16px 18px 66px; } .wgcard .wgwatch { inset-inline-start:18px; } }
@media (prefers-reduced-motion: reduce) { .wgscreen .wgtitle { animation:none; } }
/* the settings window as folders (0.15.116): a list of folders, each opens its own pane; the last one holds the documents (about, privacy, rules, contact) */
.setdlg { width:min(520px, 100%); padding:0; display:flex; flex-direction:column; overflow:hidden; }
.sethead { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
.sethead h3 { flex:1; min-width:0; margin:0; font-size:1.08rem; }
.sethead .iconbtn { flex:none; width:38px; height:38px; }
html.ltr #setBack .ic, html.ltr .sfgo { transform:scaleX(-1); }
.setfolders, .setpane { padding:14px 16px 16px; overflow:auto; min-height:0; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }   /* (0.15.209: min-height 0 lets a long folder scroll inside the window, not the page behind) */
.setfolders { display:grid; gap:10px; }
.setfolder, .setlink { display:flex; align-items:center; gap:12px; width:100%; text-align:start; background:var(--card); border:1px solid var(--line); color:var(--text); border-radius:14px; padding:12px; font:inherit; cursor:pointer; transition:border-color .15s, background .15s, transform .12s; }
.setfolder:hover, .setfolder:focus-visible, .setlink:hover, .setlink:focus-visible { border-color:#4b5563; background:var(--card2); }
.setfolder:active, .setlink:active { transform:scale(.985); }
.sfi { flex:none; display:grid; place-items:center; width:54px; height:54px; border-radius:14px; background:radial-gradient(120% 120% at 30% 20%, #2a2e38, #181a20); border:1px solid rgba(255,255,255,.07); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.sf3 { display:block; width:52px; height:52px; object-fit:contain; pointer-events:none; -webkit-user-drag:none; user-select:none; filter:drop-shadow(0 3px 4px rgba(0,0,0,.45)); transition:transform .18s; } .setfolder:hover .sf3, .setfolder:focus-visible .sf3 { transform:scale(1.1) rotate(-4deg); }
.sft { flex:1; min-width:0; display:grid; gap:2px; }
.sft b { font-size:.98rem; } .sft small { color:var(--muted); font-weight:600; font-size:.76rem; line-height:1.5; }
.sfgo { flex:none; width:18px; height:18px; opacity:.55; }
.setlinks { display:grid; gap:8px; margin:0 0 10px; }
.setlink { padding:10px 12px; font-weight:800; font-size:.92rem; }
/* (0.15.206) «حسابي» in the settings: a card of who you are, then the groups of the account */
.acc { display:grid; gap:10px; }
.acc-card { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:14px; padding:16px; border-radius:16px;
  background:radial-gradient(120% 140% at 100% 0%, rgba(99,140,255,.16), transparent 60%), var(--card); border:1px solid var(--line); }
.acc-face { width:72px; height:72px; border-radius:16px; object-fit:cover; background:var(--card2); display:grid; place-items:center; border:2px solid var(--card3); }
.acc-who { display:grid; gap:3px; min-width:0; }
.acc-who > b { font-size:1.25rem; font-weight:900; overflow-wrap:anywhere; }
.acc-who > span { color:var(--muted); font-size:.88rem; min-width:0; overflow-wrap:anywhere; }
.acc-since .ic { width:14px; height:14px; vertical-align:-2px; }
.acc-safe { display:grid; justify-items:center; gap:2px; padding:8px 12px; border-radius:12px; background:var(--card2); border:1px solid var(--line); text-align:center; }
.acc-safe b { font-size:1.2rem; font-weight:900; font-variant-numeric:tabular-nums; }
.acc-safe span { font-size:.75rem; color:var(--muted); max-width:9em; }
.acc-safe.s3 { border-color:rgba(74,222,128,.45); } .acc-safe.s3 b { color:#4ade80; }
.acc-safe.s2 b, .acc-safe.s1 b, .acc-safe.s0 b { color:#fbbf24; }
.acc-h { display:flex; align-items:center; gap:8px; margin:8px 2px 0; font-size:.86rem; font-weight:800; color:var(--muted); letter-spacing:.2px; }
.acc-h .ic { width:16px; height:16px; }
.acc-out { margin-top:0; }
#vaultBox, #accountOut { margin-top:10px; }
#pSwitchBox { margin-top:12px; } #vaultBox .vrows { margin-bottom:0; }
.acclink { padding:0; background:transparent; border:0; }
.acclink .setlink span { display:grid; gap:2px; } .acclink .setlink small { font-weight:600; color:var(--muted); font-size:.8rem; }
@media (max-width:520px) { .acc-card { grid-template-columns:auto minmax(0, 1fr); } .acc-safe { grid-column:1 / -1; grid-auto-flow:column; justify-content:start; gap:8px; } .acc-face { width:60px; height:60px; } }
 .setlink > .ic:first-child { width:19px; height:19px; opacity:.9; } .setlink span { flex:1; min-width:0; }
.setdlg > .drow { margin:0; padding:12px 16px; border-top:1px solid var(--line); }
/* (0.15.328) «استوديو منجنيف» in the settings (the studio's page became this folder): the two portals, «عالم جديد», the worlds, the templates */
.sethead .pdots { position:static !important; background:var(--card2); color:var(--text); }      /* (the owner's lock of the studio, beside the folder's title) */
#details.over { z-index:92; }      /* a world opened from the folder stands over the settings window, which waits under it (main.js) */
#dialog { z-index:94; }            /* and the small windows over both */
.stu { display:grid; gap:12px; }
.stu > .locknote, .stu .draft { margin:0; }
.stuports { display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; }
.stuport { position:relative; display:flex; align-items:center; gap:10px; min-width:0; padding:12px; border-radius:14px; text-align:start; font:inherit; color:var(--text); cursor:pointer; border:1px solid var(--line); background:var(--card); transition:border-color .15s, transform .12s; }
.stuport.creators { border-color:rgba(96,165,250,.45); background:radial-gradient(130% 120% at 100% 0%, rgba(96,165,250,.22), transparent 62%), var(--card); }
.stuport:hover, .stuport:focus-visible { border-color:#6b7280; } .stuport:active { transform:scale(.98); }
.stupi { flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:radial-gradient(120% 120% at 30% 20%, #2a2e38, #181a20); border:1px solid rgba(255,255,255,.07); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px -6px var(--c, #7dd3fc); }
.stupi > .ic { width:24px; height:24px; color:var(--c, #7dd3fc); } .stupi > .ic3s { width:34px; height:34px; }
.stupt { flex:1; min-width:0; display:grid; gap:3px; }
.stupt b { font-size:.92rem; font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stupt small { display:flex; align-items:center; gap:4px; min-width:0; color:var(--muted); font-size:.74rem; font-weight:700; }
.stupt small .ic { flex:none; width:13px; height:13px; } .stupt small span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stubadge { position:absolute; top:-8px; inset-inline-end:10px; padding:1px 8px; border-radius:7px; font-size:.66rem; font-weight:900; line-height:1.6; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.stubadge.green { background:#2fae5a; color:#fff; } .stubadge.gold { background:linear-gradient(180deg, #f7cf6b, #e0a32c); color:#1c1406; } .stubadge.blue { background:#2563eb; color:#fff; }
.stunew { display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; border-radius:18px; text-align:start; font:inherit; color:var(--text); cursor:pointer;
  border:1px solid rgba(74,222,128,.45); background:radial-gradient(120% 140% at 100% 0%, rgba(34,197,94,.28), transparent 58%), radial-gradient(90% 120% at 0% 100%, rgba(56,189,248,.12), transparent 60%), var(--card);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 26px -14px rgba(34,197,94,.7); transition:border-color .15s, transform .12s, box-shadow .15s; }
.stunew:hover, .stunew:focus-visible { border-color:rgba(74,222,128,.85); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px -14px rgba(34,197,94,.9); } .stunew:active { transform:scale(.985); }
.stunb { flex:none; display:grid; place-items:center; width:68px; height:68px; border-radius:16px; background:radial-gradient(120% 120% at 30% 20%, #23402f, #12201a); border:1px solid rgba(134,239,172,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.stuni { display:block; width:64px; height:64px; object-fit:contain; pointer-events:none; -webkit-user-drag:none; user-select:none; filter:drop-shadow(0 4px 6px rgba(0,0,0,.45)); transition:transform .18s; }
.stunew:hover .stuni, .stunew:focus-visible .stuni { transform:scale(1.07) rotate(-3deg); }
.stunt { flex:1; min-width:0; display:grid; gap:4px; }
.stunt b { font-size:1.12rem; font-weight:900; } .stunt small { color:#cbd5e1; font-size:.8rem; font-weight:600; line-height:1.55; }
.stungo { flex:none; display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:12px; font-weight:900; font-size:.88rem; color:#fff; background:linear-gradient(180deg, #2fd27a, #16a34a); border:1px solid #0f7a37; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px -6px rgba(22,163,74,.9); }
.stungo .ic { width:16px; height:16px; }
.stuh { margin:6px 2px 0; } .stucount { min-width:22px; padding:0 7px; border-radius:99px; background:var(--card2); border:1px solid var(--line); color:var(--text); font:800 .72rem/20px system-ui, sans-serif; text-align:center; }
.stugrid { grid-template-columns:repeat(auto-fill, minmax(136px, 1fr)); gap:12px; }
.stuempty { margin:0; padding:14px; border-radius:14px; border:1px dashed var(--card3); color:var(--muted); font-size:.86rem; line-height:1.7; text-align:center; }
.stufoot { margin:0 2px; color:var(--muted); font-size:.76rem; font-weight:600; line-height:1.6; }
@media (max-width:520px) {
  .stunew { padding:12px; gap:10px; } .stunb { width:58px; height:58px; } .stuni { width:54px; height:54px; } .stungo { padding:8px 10px; } .stunt b { font-size:1.04rem; }
  .stugrid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .stuni { transition:none; } }
.setdocs { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; position:sticky; top:-14px; z-index:1; padding:8px 0; background:var(--bg2); }
.setdoc h4 { margin:2px 0 8px; font-size:1.12rem; }
.setdoc h5 { margin:16px 0 6px; font-size:.95rem; color:#fda4af; }
.setdoc p, .setdoc li { line-height:1.85; font-size:.9rem; color:#d7dbe2; }
.setdoc p { margin:0 0 8px; } .setdoc ul { margin:0 0 8px; padding-inline-start:20px; display:grid; gap:4px; }
.setdoc .setdate, .setdoc .setver { color:var(--muted); font-size:.78rem; font-weight:700; }
.setdoc .setver { margin-top:14px; padding-top:10px; border-top:1px solid var(--line); }
@media (max-width:520px) { .setdlg { max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px); } .sfi { width:50px; height:50px; } .sf3 { width:48px; height:48px; } }

/* (0.15.118) lighter browsing on phones. The two fixed bars are 94% opaque, so the blur behind them could hardly be seen,
   yet a phone's graphics chip blurred the page under them again with every dot of scrolling; and the logo's glow animated a
   shadow, which repaints for ever. Neither can be measured on a strong computer (tools/lag.mjs): both are known costs of touch devices. */
@media (pointer:coarse), (max-width:760px) {
  .topbar, .tabbar, .side, .glass { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .topbar { background:#0f1013; } .tabbar { background:#0f1013; }
  .brand .logo { animation:none; }
}
@media (prefers-reduced-motion: reduce) { .brand .logo, #bellBtn.ringing .bell3, .medalgem, .tierrow .cupbox { animation:none !important; } .sf3 { transition:none; } }
/* the board of the 200 strongest players (0.15.124): the strip on the home page that leads to it, and the list (gold, silver, bronze for the first three) */
.topstrip { display:flex; align-items:center; gap:12px; width:100%; margin:0 0 14px; padding:10px 14px; text-align:start; font:inherit; color:var(--text); cursor:pointer; border-radius:16px; border:1px solid rgba(251,191,36,.28); background:linear-gradient(100deg, rgba(251,191,36,.14), rgba(148,163,184,.08) 55%, rgba(194,65,12,.12)); transition:border-color .15s, transform .12s; }
.topstrip:hover, .topstrip:focus-visible { border-color:rgba(251,191,36,.6); } .topstrip:active { transform:scale(.99); }
.tsmedals { flex:none; display:flex; align-items:flex-end; gap:3px; } .tsmedals i { display:grid; place-items:center; width:26px; border-radius:8px 8px 4px 4px; font:900 .82rem/1 system-ui, sans-serif; font-style:normal; color:#1c1917; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
.tsmedals .g { height:38px; background:linear-gradient(180deg, #fde68a, #d97706); order:2; } .tsmedals .s { height:30px; background:linear-gradient(180deg, #f1f5f9, #94a3b8); order:1; } .tsmedals .b { height:24px; background:linear-gradient(180deg, #fed7aa, #c2410c); order:3; }
.tstext { flex:1; min-width:0; display:grid; gap:1px; } .tstext b { font-size:.98rem; } .tstext small { color:var(--muted); font-weight:600; font-size:.76rem; }
.tb { min-height:120px; } .tbwait { display:flex; align-items:center; justify-content:center; gap:8px; padding:30px 0; } .tbwait .ic { width:18px; height:18px; }
.tbme { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:0 0 10px; padding:10px 12px; border-radius:12px; background:rgba(29,155,240,.12); border:1px solid rgba(29,155,240,.4); font-weight:800; font-size:.86rem; } .tbme .ic { width:18px; height:18px; }
.tblist { list-style:none; margin:0; padding:0; display:grid; gap:6px; max-height:min(62vh, 560px); overflow:auto; }
.tblist li { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:12px; background:var(--card); border:1px solid transparent; cursor:pointer; }
.tblist li:hover { border-color:#4b5563; } .tblist li.me { border-color:#1d9bf0; box-shadow:0 0 0 1px rgba(29,155,240,.35); }
.tbrank { flex:none; display:grid; place-items:center; min-width:32px; height:32px; padding:0 4px; border-radius:10px; background:var(--card3); font:900 .86rem/1 system-ui, sans-serif; font-variant-numeric:tabular-nums; }
.tblist img { flex:none; width:40px; height:40px; border-radius:10px; background:var(--card2); object-fit:cover; }
.tbname { flex:1; min-width:0; display:grid; } .tbname b, .tbname small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tbname small { color:var(--muted); font-weight:600; font-size:.72rem; direction:ltr; text-align:start; }
.tbtier { flex:none; font-size:.7rem; font-weight:800; padding:3px 8px; border-radius:99px; background:var(--card2); color:var(--muted); white-space:nowrap; }
.tblv { flex:none; display:grid; justify-items:end; min-width:54px; } .tblv b { font-size:1.02rem; color:var(--gold); } .tblv small { color:var(--muted); font-weight:700; font-size:.66rem; }
.tblist li.tb-gold { background:linear-gradient(100deg, rgba(253,230,138,.26), rgba(217,119,6,.14)); border-color:rgba(251,191,36,.65); padding-block:11px; }
.tblist li.tb-silver { background:linear-gradient(100deg, rgba(241,245,249,.2), rgba(148,163,184,.12)); border-color:rgba(203,213,225,.55); padding-block:9px; }
.tblist li.tb-bronze { background:linear-gradient(100deg, rgba(254,215,170,.2), rgba(194,65,12,.14)); border-color:rgba(234,138,74,.6); padding-block:9px; }
.tb-gold .tbrank { background:linear-gradient(135deg, #fde68a, #d97706); color:#422006; min-width:38px; height:38px; font-size:1rem; box-shadow:0 0 12px rgba(251,191,36,.5); }
.tb-silver .tbrank { background:linear-gradient(135deg, #f1f5f9, #94a3b8); color:#1e293b; } .tb-bronze .tbrank { background:linear-gradient(135deg, #fed7aa, #c2410c); color:#431407; }
.tb-gold img { width:46px; height:46px; } .tb-gold .tbname b { color:#fde68a; } .tb-silver .tbname b { color:#e2e8f0; } .tb-bronze .tbname b { color:#fdba74; }
@media (max-width:520px) { .tbtier { display:none; } .tblist { max-height:60vh; } }
/* the lobby of «عالم منجنيف» (worldlobby.js): the hall fills the screen; over it a name, the way out, the stick, the run button and the gate's prompt */
.wgwrap { position:relative; } .wgwrap[hidden] { display:none; } a.wgcard { text-decoration:none; }
/* (0.15.138) under the card: who made the game, and how many are in the hall now */
.wgmeta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; margin:-8px 4px 16px; }
.wgmaker { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid var(--line, rgba(255,255,255,.14)); background:rgba(255,255,255,.04); color:inherit; font:inherit; cursor:pointer; } .wgmaker[hidden] { display:none; }
.wgmaker .wgmby { font-size:.78rem; font-weight:700; opacity:.7; } .wgmaker .wgmname { font-weight:900; } .wgmaker .wgmuser { opacity:.55; font-weight:700; font-size:.78rem; }
.wgmaker .verified .ic { width:16px; height:16px; } .wgmaker:hover { background:rgba(255,255,255,.08); }
.wgnow { display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:.86rem; opacity:.8; } .wgnow.on { opacity:1; } .wgnow .now3 { width:22px; height:22px; } .wgnow b { font-size:1rem; }
.wlscreen { position:fixed; inset:0 0 auto 0; width:100%; height:100vh; height:100lvh; min-width:var(--fitw, 0px); min-height:var(--fith, 0px); z-index:120; background:#0b0d12; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; }
.wlscreen canvas { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.wlvig { position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(4,6,12,.5) 100%), linear-gradient(180deg, rgba(4,6,12,.5), transparent 16%, transparent 80%, rgba(4,6,12,.55)); }
.wltop { position:absolute; top:calc(10px + env(safe-area-inset-top, 0px)); left:max(14px, env(safe-area-inset-left, 0px)); right:max(14px, env(safe-area-inset-right, 0px)); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; pointer-events:none; }
.wltop .iconbtn { pointer-events:auto; background:rgba(8,10,16,.62); border-color:rgba(255,255,255,.16); }
.wlname { transition:opacity 1.2s; } .wlscreen.wl-named .wlname { opacity:0; }      /* (0.15.137: after a while the name gives the screen back) */
.wlname { display:grid; gap:0; text-shadow:0 2px 14px rgba(0,0,0,.85); } .wlname small { color:#f1d48a; font-weight:800; font-size:.78rem; letter-spacing:.14em; } .wlname b { font-size:clamp(1.25rem, 4.6vw, 2rem); font-weight:900; line-height:1.15; }
.wlload { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:16px; background:radial-gradient(90% 70% at 50% 40%, #1c1610, #0a0806 70%); font-weight:800; color:#efe6d6; } .wlload[hidden] { display:none; }
.wlload > span { letter-spacing:.04em; font-size:.95rem; }
.wlseal { position:relative; width:96px; height:96px; display:grid; place-items:center; }
.wlseal i { position:absolute; inset:0; border-radius:50%; border:2px solid transparent; border-top-color:#f1d48a; border-right-color:rgba(241,212,138,.35); animation:wlspin 1.5s linear infinite; }
.wlseal i + i { inset:11px; border-top-color:transparent; border-bottom-color:#c0424a; border-left-color:rgba(192,66,74,.4); animation-duration:2.1s; animation-direction:reverse; }
.wlseal b { font:900 2.3rem/1 Georgia, serif; color:#f1d48a; text-shadow:0 0 18px rgba(241,212,138,.55); animation:wlglow 1.8s ease-in-out infinite; }
.wlbar { width:160px; height:3px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden; } .wlbar i { display:block; width:40%; height:100%; border-radius:3px; background:linear-gradient(90deg, transparent, #f1d48a, transparent); animation:wlslide 1.3s ease-in-out infinite; }
@keyframes wlspin { to { transform:rotate(360deg); } } @keyframes wlglow { 50% { opacity:.55; } } @keyframes wlslide { from { transform:translateX(-120%); } to { transform:translateX(320%); } }
/* the opening of the hall: the name of the game comes in while the eye flies down the nave, then lets the hall be */
.wlintro { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px; text-align:center; pointer-events:none; color:#fff; text-shadow:0 4px 30px rgba(0,0,0,.9), 0 0 60px rgba(241,196,90,.35); animation:wlintro 4.2s ease-in-out both; }
.wlintro small { color:#f1d48a; font-weight:800; font-size:clamp(.85rem, 2.6vw, 1.15rem); letter-spacing:.34em; animation:wlup 1.1s .35s cubic-bezier(.2,.8,.2,1) both; }
.wlintro b { font-weight:900; font-size:clamp(2.6rem, 12vw, 6.4rem); line-height:1.1; animation:wlname 1.5s .55s cubic-bezier(.16,.84,.3,1) both; }
.wlintro span { font-weight:700; font-size:clamp(.85rem, 2.4vw, 1.1rem); color:#efe6d6; animation:wlup 1.1s 1.25s cubic-bezier(.2,.8,.2,1) both; }
.wlrule { display:block; width:min(420px, 62vw); height:2px; background:linear-gradient(90deg, transparent, #f1d48a 30%, #fff 50%, #f1d48a 70%, transparent); transform-origin:50% 50%; animation:wlrule 1.2s .15s cubic-bezier(.2,.8,.2,1) both; }
@keyframes wlintro { 0% { background:rgba(8,6,4,.86); opacity:1; } 30% { background:rgba(8,6,4,.25); } 78% { opacity:1; background:rgba(8,6,4,0); } 100% { opacity:0; background:rgba(8,6,4,0); } }
@keyframes wlup { from { opacity:0; transform:translateY(16px); } } @keyframes wlrule { from { transform:scaleX(0); opacity:0; } }
@keyframes wlname { from { opacity:0; transform:scale(1.5); letter-spacing:.3em; filter:blur(10px); } }
.wlscreen.wl-opening .wltop, .wlscreen.wl-opening .wlhint, .wlscreen.wl-opening .wljoy, .wlscreen.wl-opening .wlrun, .wlscreen.wl-opening .wljump, .wlscreen.wl-opening .wlhit { opacity:0; transform:translateY(8px); }
.wltop, .wlhint, .wljoy, .wlrun, .wljump, .wlhit { transition:opacity .7s, transform .12s; }
.wlbtns { display:flex; gap:8px; pointer-events:auto; } .wlbtns .iconbtn[hidden] { display:none; } .wlbtns .iconbtn.off { color:#f0a3a3; }
@media (prefers-reduced-motion: reduce) { .wlintro, .wlintro *, .wlseal i, .wlseal b, .wlbar i { animation-duration:.01s !important; } }
.wlhint { position:absolute; inset-inline:16px; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); margin:0; text-align:center; font-weight:700; font-size:.86rem; color:#f3ede0; text-shadow:0 2px 10px #000; pointer-events:none; transition:opacity .8s; }
.wlhint.gone { opacity:0; } .wlhint .t { display:none; }
.wlenter { position:absolute; left:50%; bottom:calc(74px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); display:flex; align-items:center; gap:12px; padding:12px 18px; border-radius:16px; border:1px solid rgba(241,212,138,.75); background:linear-gradient(180deg, rgba(60,42,14,.92), rgba(24,16,6,.94)); color:#fff; font:inherit; cursor:pointer; box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 10px 30px -8px rgba(241,196,90,.55); animation:wlrise .28s ease-out; }
.wlenter[hidden] { display:none; } .wlenter > .ic { width:26px; height:26px; color:#f1d48a; } .wlenter span { display:grid; text-align:start; } .wlenter b { font-size:1.02rem; } .wlenter small { color:#e7d6a8; font-weight:700; font-size:.74rem; }
.wlenter kbd { font:900 .8rem/1 system-ui, sans-serif; padding:6px 9px; border-radius:8px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); }
@keyframes wlrise { from { opacity:0; transform:translate(-50%, 12px); } }
.wljoy, .wlrun, .wljump, .wlhit { display:none; }
.wlback { position:absolute; inset-inline-start:14px; top:calc(74px + env(safe-area-inset-top, 0px)); display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid rgba(241,212,138,.6); background:rgba(20,14,6,.82); color:#fff; font:800 .9rem/1 inherit; cursor:pointer; } .wlback[hidden] { display:none; } .wlback .ic { width:18px; height:18px; color:#f1d48a; }
.wlfade { position:absolute; inset:0; background:#eaf6ff; opacity:0; pointer-events:none; }
@media (pointer:coarse) {
  .wlhint .k { display:none; } .wlhint .t { display:inline; } .wlhint { bottom:auto; top:calc(74px + env(safe-area-inset-top, 0px)); }
  .wlenter kbd { display:none; } .wlenter { bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
  .wljoy { display:block; position:absolute; left:calc(22px + env(safe-area-inset-left, 0px)); bottom:calc(30px + env(safe-area-inset-bottom, 0px)); width:128px; height:128px; border-radius:50%; background:rgba(8,10,16,.34); border:2px solid rgba(255,255,255,.3); touch-action:none; }
  .wljoy i { position:absolute; left:50%; top:50%; width:54px; height:54px; margin:-27px 0 0 -27px; border-radius:50%; background:rgba(255,255,255,.82); box-shadow:0 4px 12px rgba(0,0,0,.5); pointer-events:none; }
  .wlrun, .wljump, .wlhit { display:grid; place-items:center; align-content:center; gap:2px; position:absolute; border-radius:50%; background:rgba(8,10,16,.5); border:2px solid rgba(255,255,255,.34); color:#fff; font:800 .68rem/1 inherit; touch-action:manipulation; -webkit-tap-highlight-color:transparent; box-shadow:0 6px 18px rgba(0,0,0,.35); }
  .wlhit { right:calc(22px + env(safe-area-inset-right, 0px)); bottom:calc(30px + env(safe-area-inset-bottom, 0px)); width:88px; height:88px; background:rgba(176,28,44,.66); border-color:rgba(255,255,255,.55); }
  .wljump { right:calc(32px + env(safe-area-inset-right, 0px)); bottom:calc(132px + env(safe-area-inset-bottom, 0px)); width:70px; height:70px; }
  .wlrun { right:calc(124px + env(safe-area-inset-right, 0px)); bottom:calc(42px + env(safe-area-inset-bottom, 0px)); width:66px; height:66px; }
  .wlhit .ic { width:30px; height:30px; } .wljump .ic { width:24px; height:24px; }
  .wlhit:active, .wljump:active { transform:scale(.92); filter:brightness(1.35); }
  @media (orientation:portrait) { .wlenter { bottom:calc(222px + env(safe-area-inset-bottom, 0px)); } }
  .wlrun .ic { width:24px; height:24px; } .wlrun.on { background:rgba(241,196,90,.9); color:#241703; border-color:#fff; }
  /* (0.15.138) the hall is as tall as the browser can be; the controls stand above the browser's own bar (--lift: what it
     covers now) and get smaller on a short screen (a phone on its side with its bars, or a page the browser made bigger) */
  @supports (height:1dvh) and (height:1lvh) {
    .wlscreen { --u:min(1px, 0.27dvh); --lift:calc(100lvh - 100dvh); }
    .wljoy { width:calc(128 * var(--u)); height:calc(128 * var(--u)); left:calc(22 * var(--u) + env(safe-area-inset-left, 0px)); bottom:calc(30 * var(--u) + env(safe-area-inset-bottom, 0px) + var(--lift)); }
    .wljoy i { width:calc(54 * var(--u)); height:calc(54 * var(--u)); margin:calc(-27 * var(--u)) 0 0 calc(-27 * var(--u)); }
    .wlhit { width:calc(88 * var(--u)); height:calc(88 * var(--u)); right:calc(22 * var(--u) + env(safe-area-inset-right, 0px)); bottom:calc(30 * var(--u) + env(safe-area-inset-bottom, 0px) + var(--lift)); }
    .wljump { width:calc(70 * var(--u)); height:calc(70 * var(--u)); right:calc(32 * var(--u) + env(safe-area-inset-right, 0px)); bottom:calc(132 * var(--u) + env(safe-area-inset-bottom, 0px) + var(--lift)); }
    .wlrun { width:calc(66 * var(--u)); height:calc(66 * var(--u)); right:calc(124 * var(--u) + env(safe-area-inset-right, 0px)); bottom:calc(42 * var(--u) + env(safe-area-inset-bottom, 0px) + var(--lift)); }
    .wlenter { bottom:calc(16px + env(safe-area-inset-bottom, 0px) + var(--lift)); }
    @media (orientation:portrait) { .wlenter { bottom:calc(222px + env(safe-area-inset-bottom, 0px) + var(--lift)); } }
  }
}

/* ---------- (0.15.141) Abu Khalid the smith: the button before him in the hall, and his window (forge.js) ---------- */
.wlsmith { border-color:rgba(255,150,70,.85); background:linear-gradient(180deg, rgba(74,32,10,.94), rgba(28,12,4,.95)); box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 10px 30px -8px rgba(255,120,40,.65); }
.wlsmith small { color:#ffd2a6; }
.fgscreen { position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)); background:rgba(4,3,2,.78); background:radial-gradient(120% 90% at 50% 40%, rgba(20,12,6,.5), rgba(4,3,2,.84)); color:#f4ead8; animation:fgIn .22s ease-out; }
.fgscreen[hidden] { display:none; }
.fgpanel { width:min(720px, 100%); max-height:100%; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; border-radius:22px; border:1px solid rgba(241,212,138,.45); background:linear-gradient(180deg, #2a1c10 0%, #17100a 100%); box-shadow:0 30px 80px -20px #000, inset 0 1px 0 rgba(255,230,180,.15); padding:14px 14px 18px; display:grid; gap:12px; }
.fghead { display:flex; align-items:center; gap:12px; }
.fgface { width:52px; height:52px; flex:none; border-radius:50%; box-shadow:0 0 0 2px #c9a05a, 0 0 18px rgba(255,140,50,.45); }
.fgface svg { width:100%; height:100%; display:block; }
.fgwho { display:grid; flex:1; min-width:0; } .fgwho b { font-size:1.15rem; color:#ffe3a1; } .fgwho small { color:#d9c39b; font-weight:700; font-size:.76rem; }
.fgpow { display:grid; text-align:center; padding:6px 10px; border-radius:12px; background:rgba(255,190,46,.12); border:1px solid rgba(255,190,46,.35); } .fgpow[hidden] { display:none; }
.fgpow small { font-size:.68rem; color:#e8cf98; } .fgpow b { font-size:1.05rem; color:#ffd36b; }
.fgsay { margin:0; padding:10px 14px; border-radius:14px 14px 14px 4px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); font-weight:700; line-height:1.6; min-height:2.6em; }
.fgsay.in { animation:fgSay .35s ease-out; }
.fgtabs { display:flex; gap:6px; padding:4px; border-radius:14px; background:rgba(0,0,0,.3); }
.fgtabs button { flex:1; padding:9px 6px; border-radius:10px; border:0; background:transparent; color:#d9c7a4; font:inherit; font-weight:800; cursor:pointer; }
.fgtabs button.on { background:linear-gradient(180deg, #c9933e, #8a5a1e); color:#1a0f04; }
.fgpane { display:grid; gap:12px; } .fgpane[hidden] { display:none; }
.fgpack { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:linear-gradient(90deg, rgba(255,190,46,.14), rgba(255,190,46,.04)); border:1px solid rgba(255,190,46,.3); }
.fgpack div { display:grid; flex:1; } .fgpack b { color:#ffe3a1; } .fgpack small { color:#d8c49e; font-size:.76rem; font-weight:600; line-height:1.5; }
.fgfree { flex:none; padding:5px 10px; border-radius:999px; background:#2fae5a; color:#fff; font-weight:900; font-size:.78rem; }
.fgscreen [data-r="common"] { --rc:#aab3bb; } .fgscreen [data-r="normal"] { --rc:#5fd07a; } .fgscreen [data-r="medium"] { --rc:#4b95ff; }
.fgscreen [data-r="strong"] { --rc:#b46cff; } .fgscreen [data-r="rare"] { --rc:#ffbe2e; } .fgscreen [data-r="mythic"] { --rc:#ff4a3d; }
.fgreel { position:relative; height:176px; border-radius:16px; overflow:hidden; background:linear-gradient(180deg, #0d0906, #1d140c 50%, #0d0906); border:1px solid rgba(241,212,138,.35); box-shadow:inset 0 0 30px rgba(0,0,0,.8); direction:ltr; }
.fgstrip { position:absolute; top:16px; left:0; display:flex; gap:10px; will-change:transform; }
.fgcard { flex:none; width:124px; height:144px; box-sizing:border-box; border-radius:12px; display:grid; justify-items:center; align-content:start; gap:2px; padding:8px 6px 6px; background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1); border-bottom:4px solid var(--rc); box-shadow:inset 0 -26px 30px -18px var(--rc); direction:rtl; }
.fgcard img { width:84px; height:84px; } .fgcard b { font-size:.72rem; text-align:center; line-height:1.25; color:#fff; max-width:100%; } .fgcard small { font-size:.64rem; font-weight:800; color:var(--rc); }
.fgcard.hit { animation:fgHit .65s ease-out forwards; }
.fgmark { position:absolute; top:0; bottom:0; left:50%; width:3px; margin-left:-1.5px; background:linear-gradient(180deg, #ffd76a, #fff5c8 50%, #ffd76a); box-shadow:0 0 12px #ffcf4a; z-index:2; }
.fgmark::before, .fgmark::after { content:""; position:absolute; left:50%; margin-left:-9px; border:9px solid transparent; }
.fgmark::before { top:-1px; border-top-color:#ffd76a; } .fgmark::after { bottom:-1px; border-bottom-color:#ffd76a; }
.fgshade { position:absolute; top:0; bottom:0; width:70px; z-index:1; pointer-events:none; } .fgshade.l { left:0; background:linear-gradient(90deg, #0d0906, transparent); } .fgshade.r { right:0; background:linear-gradient(270deg, #0d0906, transparent); }
.fgspin { justify-self:center; min-width:220px; display:grid; gap:2px; padding:12px 24px; border-radius:16px; border:1px solid #ffe3a1; background:linear-gradient(180deg, #f2c45a, #b8792a); color:#241404; font:inherit; font-weight:900; font-size:1.1rem; cursor:pointer; box-shadow:0 10px 30px -10px rgba(255,180,60,.8), inset 0 1px 0 rgba(255,255,255,.5); }
.fgspin small { font-size:.78rem; font-weight:800; opacity:.85; font-variant-numeric:tabular-nums; direction:ltr; }
.fgspin:disabled { filter:grayscale(.6) brightness(.75); cursor:default; }
.fgspin:not(:disabled) { animation:fgPulse 1.6s ease-in-out infinite; }
.fgnext[hidden] { display:none; }
.fgodds { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.fgodd { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.06); font-size:.78rem; font-weight:700; }
.fgodd i { width:10px; height:10px; border-radius:50%; background:var(--rc); box-shadow:0 0 8px var(--rc); } .fgodd b { color:var(--rc); direction:ltr; }
.fgmore { display:flex; align-items:center; justify-content:center; gap:8px; color:#bfae8e; font-size:.8rem; font-weight:700; } .fgmore .ic { width:16px; height:16px; }
.fggrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.fgmine { display:grid; justify-items:center; gap:4px; padding:10px 8px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-top:3px solid var(--rc); text-align:center; }
.fgmine.held { box-shadow:0 0 0 2px #ffd76a, 0 0 22px -6px #ffd76a; }
.fgmine img { width:88px; height:88px; } .fgmine b { font-size:.85rem; } .fgrar { color:var(--rc); font-weight:800; font-size:.72rem; }
.fgstars i { font-style:normal; color:rgba(255,255,255,.22); font-size:.9rem; } .fgstars i.on { color:#ffd76a; text-shadow:0 0 6px #ffb02e; }
.fgp { font-size:.78rem; color:#d9c7a4; } .fgp b { color:#fff; }
.fgcopies { font-size:.72rem; color:#bba98a; }
.fgbtns { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.fgbtns button { padding:8px 14px; border-radius:10px; border:1px solid rgba(241,212,138,.5); background:rgba(241,212,138,.12); color:#ffe3a1; font:inherit; font-weight:800; font-size:.82rem; cursor:pointer; }
.fgbtns button:disabled { opacity:.4; cursor:default; }
.fgbtns button[data-a="merge"]:not(:disabled) { background:linear-gradient(180deg, #ff9a3c, #c4561a); color:#fff; border-color:#ffc28a; }
.fgheld { padding:8px 14px; border-radius:10px; background:#ffd76a; color:#2a1a06; font-weight:900; font-size:.82rem; }
.fgtip { margin:0; color:#bba98a; font-size:.78rem; line-height:1.6; text-align:center; }
.fglist { display:grid; gap:6px; }
.fgrow { display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:12px; background:rgba(255,255,255,.04); border-inline-start:4px solid var(--rc); }
.fgrow img { width:52px; height:52px; flex:none; } .fgnm { display:grid; flex:1; min-width:0; } .fgnm b { font-size:.88rem; } .fgnm small { color:#bba98a; font-size:.72rem; }
.fgrow .fgrar { min-width:64px; text-align:center; } .fgch { min-width:76px; text-align:center; font-weight:900; color:#ffe3a1; font-size:.8rem; direction:ltr; }
.fgrow:not(.have) img { filter:brightness(.55) saturate(.6); }
.fgok2 .ic { width:16px; height:16px; color:#5fd07a; }
.fgwin { position:fixed; inset:0; z-index:2; display:grid; place-items:center; background:rgba(0,0,0,.86); background:radial-gradient(60% 50% at 50% 45%, color-mix(in srgb, var(--rc) 30%, transparent), rgba(0,0,0,.9)); }
.fgwin[hidden] { display:none; }
.fgrays { position:absolute; width:140vmax; height:140vmax; left:50%; top:45%; margin:-70vmax 0 0 -70vmax; background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 24%, transparent) 0deg 8deg, transparent 8deg 22deg); animation:fgRays 18s linear infinite; opacity:.85; -webkit-mask-image:radial-gradient(circle, #000 0, transparent 60%); mask-image:radial-gradient(circle, #000 0, transparent 60%); pointer-events:none; }
.fgwin[data-r="common"] .fgrays { display:none; }
.fgcardbig { position:relative; z-index:1; display:grid; justify-items:center; gap:6px; padding:18px 22px 20px; border-radius:22px; min-width:min(320px, 92vw); max-width:92vw; background:linear-gradient(180deg, rgba(40,26,14,.96), rgba(18,12,7,.97)); border:2px solid var(--rc); box-shadow:0 0 60px -10px var(--rc), 0 30px 80px -20px #000; text-align:center; }
.fgwin.go .fgcardbig { animation:fgPop .7s cubic-bezier(.2,1.5,.4,1) both; }
.fgwin.go[data-r="mythic"] .fgcardbig { animation:fgPop .7s cubic-bezier(.2,1.5,.4,1) both, fgMyth 1.2s ease-in-out .7s infinite alternate; }
.fgcardbig img { width:220px; height:220px; filter:drop-shadow(0 0 18px var(--rc)); }
.fgwin.go .fgcardbig img { animation:fgFloat 3s ease-in-out .7s infinite; }
.fgcardbig small { padding:4px 12px; border-radius:999px; background:var(--rc); color:#120b05; font-weight:900; font-size:.82rem; }
.fgcardbig b { font-size:1.4rem; color:#fff; } .fgland { color:#d9c39b; font-weight:700; font-size:.85rem; } .fgstat { color:#ffe3a1; font-weight:800; }
.fgnew { position:absolute; top:12px; inset-inline-end:12px; padding:4px 10px; border-radius:999px; background:#2fae5a; color:#fff; font-weight:900; font-size:.75rem; transform:rotate(-8deg); } .fgnew[hidden] { display:none; }
.fgcardbig .fgeq { background:linear-gradient(180deg, #f2c45a, #b8792a); color:#241404; border-color:#ffe3a1; } .fgcardbig .fgeq[hidden] { display:none; }
.fgburst { position:absolute; left:50%; top:45%; width:0; height:0; z-index:1; pointer-events:none; }
.fgburst i { position:absolute; width:8px; height:8px; margin:-4px; border-radius:50%; background:var(--rc); box-shadow:0 0 10px var(--rc), 0 0 2px #fff; opacity:0; animation:fgBurst 1.4s ease-out forwards; }
@keyframes fgIn { from { opacity:0; } to { opacity:1; } }
@keyframes fgSay { from { opacity:.2; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes fgPulse { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.04); } }
@keyframes fgHit { 0% { transform:scale(1); } 40% { transform:scale(1.12); box-shadow:0 0 30px var(--rc), inset 0 -26px 30px -18px var(--rc); } 100% { transform:scale(1.06); box-shadow:0 0 22px var(--rc), inset 0 -26px 30px -18px var(--rc); } }
@keyframes fgPop { from { transform:scale(.3) rotate(-8deg); opacity:0; } to { transform:none; opacity:1; } }
@keyframes fgFloat { 0%, 100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-8px) rotate(2deg); } }
@keyframes fgRays { to { transform:rotate(360deg); } }
@keyframes fgBurst { 0% { opacity:1; transform:translate(0, 0) scale(1.2); } 100% { opacity:0; transform:translate(var(--x), var(--y)) scale(.3); } }
@keyframes fgMyth { from { box-shadow:0 0 60px -10px #ff4a3d, 0 30px 80px -20px #000; } to { box-shadow:0 0 110px 0 #ffb347, 0 30px 80px -20px #000; } }
@media (prefers-reduced-motion:reduce) { .fgspin:not(:disabled), .fgrays, .fgwin.go .fgcardbig img { animation:none; } }
@media (max-height:560px) { .fgreel { height:146px; } .fgstrip { top:12px; } .fgcard { width:106px; height:122px; } .fgcard img { width:64px; height:64px; } .fgcardbig img { width:150px; height:150px; } .fgsay { min-height:0; } }
@media (max-width:560px) { .fgrow .fgp { display:none; } .fgrow .fgrar { min-width:0; } .fgpanel { padding:12px 10px 16px; } }

/* ---------- (0.15.145) the games of the developers: playing one (its sandboxed frame over the page), the studio of a developer, the owner's tab ---------- */
.dgscreen { position:fixed; inset:0; z-index:150; background:#000; display:flex; flex-direction:column; }
.dgbar { display:flex; align-items:center; gap:8px; padding:6px max(10px, env(safe-area-inset-right, 0px)) 6px max(10px, env(safe-area-inset-left, 0px)); padding-top:max(6px, env(safe-area-inset-top, 0px)); background:#111318; color:#fff; }
.dgbar b { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dgscreen iframe { flex:1; width:100%; border:0; background:#000; display:block; }
body.dg-open, body.gd-open { overflow:hidden; }
.gdscreen { position:fixed; inset:0; z-index:140; display:grid; place-items:center; padding:12px; background:rgba(6,7,10,.82); }
.gdscreen[hidden] { display:none; }
.gdpanel { width:min(760px, 100%); max-height:100%; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; border-radius:18px; background:#171a21; border:1px solid rgba(255,255,255,.1); padding:14px; display:grid; gap:12px; color:#e9edf4; }
.gdhead { display:flex; align-items:center; justify-content:space-between; gap:10px; } .gdhead b { display:flex; align-items:center; gap:8px; font-size:1.1rem; } .gdhead b .ic { width:20px; height:20px; }
.gdnote { display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.05); line-height:1.7; font-size:.86rem; } .gdnote .ic { flex:none; width:18px; height:18px; margin-top:3px; }
.gdnote.gdwho { background:linear-gradient(90deg, rgba(47,174,90,.16), rgba(47,174,90,.05)); border:1px solid rgba(47,174,90,.35); font-weight:700; font-size:.9rem; }
/* (0.15.192) the box «صلاحياتك» of a head: every power of the rank, one line each (heads.js powersBox), at the top of the
   developers' portal and of the control panel */
.powers { margin:0 0 12px; padding:12px 14px; border-radius:16px; background:linear-gradient(180deg, rgba(59,130,246,.14), rgba(59,130,246,.04)); border:1px solid rgba(96,165,250,.4); }
.powers > summary { display:flex; align-items:center; gap:8px; font-weight:800; font-size:1rem; cursor:pointer; list-style:none; color:#bfdbfe; }
.powers > summary::-webkit-details-marker { display:none; }
.powers > summary .ic { width:20px; height:20px; color:#fcd34d; flex:none; }
.powers > summary::after { content:"▾"; margin-inline-start:auto; opacity:.75; transition:transform .2s; }
.powers:not([open]) > summary::after { transform:rotate(90deg); }
.powers h4 { display:flex; align-items:center; gap:6px; margin:12px 0 6px; font-size:.92rem; }
.powers h4 .ic { width:17px; height:17px; flex:none; }
.powers ul { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.powers li { display:flex; align-items:flex-start; gap:8px; font-size:.88rem; line-height:1.6; }
.powers li .ic { flex:none; width:17px; height:17px; margin-top:3px; color:#4ade80; }
.powers ul.off li { opacity:.55; } .powers ul.off li .ic { color:var(--muted); }
.powers .pwlock { display:flex; gap:8px; align-items:flex-start; margin:0 0 8px; padding:8px 10px; border-radius:12px; background:rgba(251,191,36,.12); color:#fcd34d; font-size:.86rem; line-height:1.6; }
.powers .pwlock .ic { flex:none; width:17px; height:17px; margin-top:3px; }
.powers .pwfoot { margin:12px 0 0; font-size:.8rem; line-height:1.6; opacity:.75; }
#gdPowers:empty { display:none; } #gdPowers .powers { margin:0; }
.gdnew, .gdup { display:grid; gap:8px; padding:12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.gdnew input, .gdnew textarea, .gdup input, .gdup textarea, .gdadd input { width:100%; box-sizing:border-box; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.25); color:inherit; font:inherit; }
.gdup label.btn { justify-self:start; cursor:pointer; }
.gdgame { display:grid; gap:10px; padding:12px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); }
.gdtitle { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .gdtitle b { font-size:1.02rem; }
.gdvers { display:grid; gap:6px; } .gdver { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 10px; border-radius:10px; background:rgba(0,0,0,.2); }
.gdstate { padding:3px 9px; border-radius:999px; font-size:.74rem; font-weight:800; background:rgba(255,255,255,.1); }
.gdstate.green { background:rgba(47,174,90,.25); color:#7ee2a0; } .gdstate.gold { background:rgba(255,190,46,.2); color:#ffd36b; } .gdstate.red { background:rgba(220,60,60,.22); color:#ff9c9c; } .gdstate.gray { color:#b7bfcc; }
.gdwhy { flex-basis:100%; color:#ffb4b4; }
.gdacts { display:flex; gap:6px; flex-wrap:wrap; margin-inline-start:auto; }
.gdprog { position:relative; height:26px; border-radius:8px; background:rgba(0,0,0,.3); overflow:hidden; } .gdprog[hidden] { display:none; }
.gdprog i { position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg, #2fae5a, #6fd08d); transition:width .2s; }
.gdprog small { position:relative; display:block; padding:4px 10px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* (0.15.147) «بوابة المطوّرين»: its own tile on the studio page (the developers, their head and the owner only), and the rank in the portal */
.tile.portal .tthumb { border:2px solid rgba(47,174,90,.55); background:radial-gradient(120% 90% at 50% 0%, rgba(47,174,90,.32), rgba(23,26,33,.95) 70%), #171a21; }
.tile.portal.r2 .tthumb, .tile.portal.r3 .tthumb, .tile.portal.r4 .tthumb { border-color:rgba(255,196,64,.6); background:radial-gradient(120% 90% at 50% 0%, rgba(255,186,46,.3), rgba(23,26,33,.95) 70%), #171a21; }
.tile.add.newrow { grid-column-start:1; }
.tile.portal.creators .tthumb { border-color:rgba(96,165,250,.6); background:radial-gradient(120% 90% at 50% 0%, rgba(96,165,250,.3), rgba(23,26,33,.95) 70%), #171a21; }
.tile.portal .tthumb .ic.big { width:42%; height:42%; color:#fff; opacity:.92; filter:drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.gdrank { display:inline-flex; align-items:center; gap:6px; margin-inline-start:auto; padding:4px 10px; border-radius:999px; font-size:.78rem; font-weight:800; background:rgba(47,174,90,.22); color:#8fe6ad; } .gdrank[hidden] { display:none; }
.gdrank .ic { width:15px; height:15px; } .gdrank.r2, .gdrank.r3, .gdrank.r4 { background:rgba(255,190,46,.2); color:#ffd36b; }
.gdtabs { display:flex; gap:6px; padding:4px; border-radius:12px; background:rgba(0,0,0,.25); } .gdtabs[hidden] { display:none; }
.gdtabs button { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 10px; border:0; border-radius:9px; background:transparent; color:#b7bfcc; font:inherit; font-weight:800; cursor:pointer; }
.gdtabs button .ic { width:17px; height:17px; } .gdtabs button.on { background:rgba(255,255,255,.1); color:#fff; }
.gdcount { min-width:20px; padding:1px 6px; border-radius:999px; background:#e0453a; color:#fff; font-size:.72rem; line-height:1.5; } .gdcount[hidden] { display:none; }
.gdask { white-space:pre-wrap; overflow-wrap:anywhere; margin:4px 0; line-height:1.7; color:#dbe2ec; }
.gdnew select.gdpick { width:100%; box-sizing:border-box; padding:10px 12px; }
.gdby { color:#b7bfcc; font-size:.85rem; } .gdby small { opacity:.8; } .gdjudge { color:#9fb0c8; }
.gdadd { display:flex; gap:8px; margin:0 0 10px; } .gdadd input { flex:1; }
.gdpick { padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:#20242d; color:inherit; font:inherit; font-size:.85rem; }
.gdrow { display:grid; gap:4px; padding:10px; border-radius:10px; background:rgba(255,255,255,.04); margin-bottom:8px; } .gdrow .gdacts { margin-inline-start:0; }
/* (0.15.157) «بوابة المبدعين»: the accessory editor */
.crpanel { width:min(820px, 100%); }
.crbody { display:grid; gap:12px; }
.crstage { position:relative; height:280px; border-radius:14px; overflow:hidden; background:radial-gradient(circle at 50% 35%, #2c3240, #12151b 75%); touch-action:none; }
.crstage canvas { width:100%; height:100%; display:block; cursor:grab; }
.crstage small { position:absolute; inset:auto 0 8px 0; text-align:center; color:#9aa4b8; pointer-events:none; }
.crform { display:grid; grid-template-columns:1fr auto; gap:8px; } .crform input { padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.25); color:inherit; font:inherit; }
.crchips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.crchip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:inherit; font:inherit; font-size:.82rem; cursor:pointer; }
.crchip i { width:12px; height:12px; border-radius:50%; } .crchip.on { border-color:#60a5fa; background:rgba(96,165,250,.18); }
.crrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .crrow input[type=color] { width:42px; height:34px; border:0; background:none; padding:0; }
.crgrid { display:grid; grid-template-columns:auto 1fr 1fr 1fr; gap:6px 10px; align-items:center; margin-top:8px; font-size:.85rem; }
.crs { display:flex; align-items:center; gap:4px; } .crs span { color:#9aa4b8; } .crs input { width:100%; }
@media (max-width:560px) { .crgrid { grid-template-columns:1fr; } .crstage { height:240px; } }
.crmode { margin-top:2px; } .crmodel[hidden], .crparts[hidden], .crtools[hidden] { display:none; }

/* (0.15.182) the gifts of the voice rooms: the sheet, and the shows that play over the room (voicegifts.js; ours, drawn by code) */
.vxg-art{display:block;width:100%;height:100%} .vxg-art.sm{width:22px;height:22px;display:inline-block;vertical-align:middle}
.vxgks{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.vxgk{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 3px 6px;border-radius:12px;border:2px solid var(--line);background:var(--card2);color:var(--text);font:inherit;cursor:pointer;min-width:0;transition:transform .15s,border-color .15s}
.vxgkw{display:flex;flex-direction:column;gap:4px;min-width:0}
.vxgkp{display:inline-flex;align-items:center;justify-content:center;gap:3px;padding:5px 2px;border-radius:9px;border:1px solid rgba(255,200,61,.45);background:rgba(255,200,61,.1);color:#ffd35a;font:inherit;font-size:.66rem;font-weight:800;cursor:pointer}
.vxgkp .ic{width:12px;height:12px} .vxgkp:active{transform:scale(.95)}
.vxnone{text-align:center;margin:6px 0;opacity:.85}
.vxgk:active{transform:scale(.96)} .vxgk.on{border-color:#ffc83d;background:linear-gradient(180deg,rgba(255,200,61,.18),rgba(255,79,138,.12));box-shadow:0 0 14px rgba(255,200,61,.3)}
.vxgkart{width:46px;height:40px;display:flex;align-items:center;justify-content:center} .vxgkart .vxg-art{filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
.vxgk b{font-size:.68rem;line-height:1.15;text-align:center;white-space:normal} .vxgk small{display:flex;align-items:center;gap:2px;font-size:.7rem;font-weight:900;color:#ffd35a} .vxgk small .ic{width:12px;height:12px}
/* (0.15.195) a gift moves coins: what reaches who gets it (85%), and the site's 15% */
.vxgk .vxgkto{font-style:normal;font-size:.6rem;font-weight:700;color:#7ee2a8;white-space:nowrap}
.vxsplit{flex-basis:100%;text-align:center;font-size:.8rem;color:#9fdcb8}
.vxtax{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;padding:8px 10px;border-radius:12px;background:rgba(255,211,90,.1);border:1px solid rgba(255,211,90,.3);font-size:.8rem;line-height:1.6} .vxtax .ic{flex:none;width:16px;height:16px;margin-top:3px;color:#ffd35a}
.vxcost{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px} .vxcost .ic{width:14px;height:14px} .vxlow{flex-basis:100%;text-align:center;color:#ff8f6b}
.vxfx{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.vxg-show{position:absolute;inset:0;animation:vxgIn .35s ease both} .vxg-show.out{animation:vxgOut .55s ease both}
.vxg-sky{position:absolute;inset:0;width:100%;height:100%}
.vxg-banner{position:absolute;top:max(70px,10%);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:12px;white-space:nowrap;max-width:92%;
  background:linear-gradient(90deg,rgba(124,58,237,.94),rgba(236,72,153,.94));color:#fff;font-size:.86rem;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:vxgBan .6s cubic-bezier(.2,1.3,.4,1) both}
.vxg-banner .vxg-art.sm{width:30px;height:30px} .vxg-banner span{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;overflow:hidden} .vxg-banner small{flex-basis:100%;opacity:.9;font-size:.74rem}
.vxg-banner.out{opacity:0;transition:opacity .4s}
.vxg-lamp .vxg-banner{background:linear-gradient(90deg,#7a4300,#d48a07 50%,#2bd4c5)} .vxg-car .vxg-banner{background:linear-gradient(90deg,#6d0010,#e3122a 60%,#222)} .vxg-lion .vxg-banner{background:linear-gradient(90deg,#3a1d00,#d98b1c 50%,#ffd27a);color:#1b0d00}
.vxg-big{position:absolute;left:50%;top:42%;width:min(62vw,300px);aspect-ratio:1;transform:translate(-50%,-50%)}
.vxg-lamp .vxg-big{width:min(80vw,420px);aspect-ratio:140/90}
.vxg-big .vxg-art{filter:drop-shadow(0 0 28px rgba(255,90,140,.7))} .vxg-lamp .vxg-big .vxg-art{filter:drop-shadow(0 0 34px rgba(255,200,61,.85))}
.vxg-beat{animation:vxgPop .7s cubic-bezier(.2,1.6,.4,1) both,vxgBeat .66s .7s ease-in-out 3}
.vxg-rub{animation:vxgPop .6s cubic-bezier(.2,1.4,.4,1) both,vxgRub .5s .6s ease-in-out 4}
.vxg-road{position:absolute;left:0;right:0;top:calc(42% + 52px);height:3px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:vxgIn .4s ease both}
.vxg-auto{position:absolute;left:50%;top:42%;width:min(92vw,520px);aspect-ratio:300/120;transform:translate(-50%,-50%);animation:vxgDrive 1.25s cubic-bezier(.12,.9,.25,1) both}
.vxg-auto .vxg-art{filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.vxg-auto .vxg-wheel{animation:vxgSpin .25s linear infinite} .vxg-auto.parked .vxg-wheel{animation:none}
.vxg-auto.away{animation:vxgAway .85s cubic-bezier(.6,0,.9,.4) both}
.vxg-lines{position:absolute;inset:20% -60% 20% 100%;background:repeating-linear-gradient(180deg,transparent 0 10px,rgba(255,255,255,.55) 10px 12px);mask-image:linear-gradient(90deg,#000,transparent);-webkit-mask-image:linear-gradient(90deg,#000,transparent);animation:vxgIn .2s ease both,vxgOut .4s 1s ease both}
.vxg-dark{background:radial-gradient(ellipse at 50% 45%,rgba(60,30,0,.35),rgba(0,0,0,.82))}
.vxg-rays{position:absolute;left:50%;top:44%;width:180vmax;height:180vmax;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,rgba(255,200,90,.16) 0 6deg,transparent 6deg 18deg);animation:vxgRays 9s linear infinite;mask-image:radial-gradient(circle,#000 0,transparent 55%);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 55%)}
.vxg-3d{position:absolute;inset:0;width:100%;height:100%}
.vxg-film{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#060309}             /* (the whole film always: a narrow phone cut its sides) */
.vxg-wait{position:absolute;left:50%;top:44%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:4px solid rgba(255,255,255,.15);border-top-color:#ffc83d;animation:vxgSpin .8s linear infinite;box-shadow:0 0 24px rgba(255,200,61,.35)}
.vxg-shake{animation:vxgShake .5s ease-in-out 3}
@keyframes vxgIn{from{opacity:0}to{opacity:1}} @keyframes vxgOut{to{opacity:0}}
@keyframes vxgBan{from{transform:translate(-50%,-30px) scale(.8);opacity:0}to{transform:translateX(-50%);opacity:1}}
@keyframes vxgPop{from{transform:translate(-50%,-50%) scale(.2);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes vxgBeat{0%,100%{transform:translate(-50%,-50%) scale(1)}30%{transform:translate(-50%,-50%) scale(1.16)}50%{transform:translate(-50%,-50%) scale(.98)}70%{transform:translate(-50%,-50%) scale(1.08)}}
@keyframes vxgRub{0%,100%{transform:translate(-50%,-50%) rotate(0)}25%{transform:translate(-52%,-50%) rotate(-4deg)}75%{transform:translate(-48%,-50%) rotate(4deg)}}
@keyframes vxgDrive{from{transform:translate(70vw,-50%) skewX(-8deg)}80%{transform:translate(-54%,-50%) skewX(3deg)}to{transform:translate(-50%,-50%)}}
@keyframes vxgAway{to{transform:translate(-160vw,-50%) skewX(-14deg)}}
@keyframes vxgSpin{to{transform:rotate(360deg)}}
@keyframes vxgRays{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes vxgShake{0%,100%{transform:none}25%{transform:translate(4px,-3px)}50%{transform:translate(-4px,2px)}75%{transform:translate(3px,3px)}}
@media (max-width:420px){.vxgks{grid-template-columns:repeat(5,1fr);gap:4px}.vxgkart{width:38px;height:34px}.vxgk b{font-size:.6rem}}
@media (prefers-reduced-motion:reduce){.vxg-show *,.vxg-show{animation-duration:.01s!important;animation-iteration-count:1!important}}
.vxg-show.vxg-heart,.vxg-show.vxg-lamp,.vxg-show.vxg-car{background:radial-gradient(ellipse at 50% 48%,rgba(10,0,20,.1),rgba(5,0,12,.62))}
.vxg-pic{object-fit:contain} .vxgkart .vxg-pic{width:100%;height:100%;transform:scale(1.25)} .vxgkart{width:52px;height:44px}
.vxgkw .vxgk{flex:1}
/* (0.15.209, the owner: «لما اضغط على المجلدات تعلق يضغط على تحريك خلفيه وليس بداخل المجلد»): a swipe stays in the window */
/* (0.15.211: «عند ضغط زر اغلاق يعلق» on the iPhone: no :has() and no overflow lock on the page (Safari recomputed the whole page for both,
   and the page jumped as the window closed). The backdrop of the window takes no swipe at all; the folder scrolls inside itself) */
.modal { overscroll-behavior:contain; touch-action:none; }
.modal > .dialog { touch-action:auto; }
.setdlg { max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); }
/* (0.15.219) «الإنترنت»: the test of the internet, a gauge and the measured numbers (nettest.js) */
.nt { display:grid; gap:12px; justify-items:center; }
.nt-gauge { position:relative; width:min(250px, 76vw); aspect-ratio:1; }
.nt-svg { width:100%; height:100%; display:block; }
.nt-track { fill:none; stroke:var(--card2); stroke-width:12; stroke-linecap:round; }
.nt-fill { fill:none; stroke:url(#ntGrad); stroke-width:12; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .25s ease-out; }
.nt-ticks line { stroke:var(--muted); stroke-width:1.5; } .nt-ticks text { fill:var(--muted); font-size:8px; text-anchor:middle; font-weight:700; }
.nt-needle { fill:#f8fafc; filter:drop-shadow(0 0 4px rgba(168,85,247,.8)); }
#ntNeedle { transition:transform .25s ease-out; }
.nt-hub { fill:#1b1d24; stroke:#a855f7; stroke-width:3; }
.nt-read { position:absolute; left:0; right:0; bottom:3%; display:grid; justify-items:center; line-height:1.1; }
.nt-read b { font-size:2.2rem; font-weight:900; font-variant-numeric:tabular-nums; }
.nt-read span { font-size:.8rem; color:var(--muted); }
.nt-phase { margin:0; color:var(--muted); text-align:center; font-size:.9rem; }
.nt-rows { width:100%; display:grid; gap:6px; }
.nt-rows > div { display:flex; align-items:center; gap:10px; background:var(--card2); border-radius:10px; padding:9px 12px; }
.nt-rows .ic { width:18px; height:18px; color:#a78bfa; flex:none; }
.nt-rows span { flex:1; min-width:0; font-size:.9rem; }
.nt-rows b { font-variant-numeric:tabular-nums; }
.nt-verdict { width:100%; margin:0; display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border-radius:12px; font-weight:700; }
.nt-verdict .ic { width:18px; height:18px; flex:none; margin-top:3px; }
.nt-verdict.good { background:rgba(34,197,94,.12); color:#4ade80; border:1px solid rgba(74,222,128,.35); }
.nt-verdict.ok { background:rgba(234,179,8,.12); color:#facc15; border:1px solid rgba(250,204,21,.35); }
.nt-verdict.bad { background:rgba(239,68,68,.12); color:#f87171; border:1px solid rgba(248,113,113,.35); }
@media (prefers-reduced-motion: reduce) { .nt-fill, #ntNeedle { transition:none; } }
/* (0.15.221) the profile, tidied: the name, its badges, the handle in the site's letters; three equal cards with 3D pictures */
.pro .pid h2 { display:grid; gap:4px; }
.pro .pid .pnm { font-size:1.6rem; font-weight:900; line-height:1.2; overflow-wrap:anywhere; }
.pro .pbadges { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.9rem; }
.pro .pbadges:empty { display:none; }
/* (0.15.222, the owner: «خفف من حجم خط اليوزر… حجم الخط متوسط»): a medium handle, under the name and not competing with it */
.pro .phandle { direction:ltr; unicode-bidi:isolate; font-family:inherit; font-size:.95rem; font-weight:600; line-height:1.4; color:var(--muted); letter-spacing:.3px; margin-top:2px; }
.ptiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:10px; width:100%; padding-bottom:12px; }
.ptile { font:inherit; color:var(--text); cursor:pointer; display:grid; justify-items:center; align-content:center; gap:6px; min-height:104px; padding:12px 8px; border-radius:16px;
  background:linear-gradient(180deg, var(--card2), var(--card)); border:1px solid var(--line); transition:transform .12s, border-color .15s, background .15s; }
.ptile:hover, .ptile:focus-visible { border-color:#4b5563; background:var(--card2); outline:none; }
.ptile:active { transform:scale(.97); }
.ptile img { width:56px; height:56px; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.ptile span { font-weight:800; font-size:.88rem; text-align:center; line-height:1.3; }
.ptile.mark > .ic { width:28px; height:28px; padding:12px; box-sizing:content-box; border-radius:50%; }
.ptile.mark.green > .ic { color:#4ade80; background:rgba(34,197,94,.14); }
.ptile.mark.gray > .ic { color:#cbd5e1; background:rgba(148,163,184,.14); }
.ptile.mark.blue > .ic { color:#93c5fd; background:rgba(59,130,246,.16); }
.ptile:disabled { opacity:.7; cursor:default; }
/* (0.15.275) the profile's line under the name: the bio centred, then three equal cards (small word over the value) in a row, one under another on a phone */
.pro .pbio { justify-content:center; text-align:center; margin:10px 0 14px; font-size:1rem; }
.pro .pmeta { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin:0 0 16px; color:inherit; }
.pro .pmeta .pchip { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; background:var(--card2); border:1px solid var(--line); border-radius:14px; padding:12px 8px; min-width:0; }
.pro .pmeta .pchip > .ic { width:20px; height:20px; color:var(--gold); }
.pro .pmeta .pcl { display:flex; flex-direction:column; gap:2px; min-width:0; }
.pro .pmeta .pcl small { color:var(--muted); font-size:.74rem; font-weight:700; }
.pro .pmeta .pcl b { color:#f3f4f6; font-size:.95rem; font-weight:800; line-height:1.35; overflow-wrap:anywhere; }
.pro .pmeta .warnline { grid-column:1 / -1; justify-content:center; background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.3); border-radius:12px; padding:8px 12px; color:#fcd34d; }
@media (max-width:520px) {
  .pro .pmeta { grid-template-columns:1fr; gap:8px; }
  .pro .pmeta .pchip { flex-direction:row; justify-content:flex-start; gap:10px; padding:10px 14px; text-align:start; }
  .pro .pmeta .pcl { flex-direction:row; align-items:center; justify-content:space-between; flex:1; gap:8px; }
}
.pro .phead { align-items:center; }
@media (max-width:640px) { .pro .pid h2 { justify-items:center; } .pro .pbadges { justify-content:center; } .ptiles { padding-inline:0; } }
/* (0.15.279) «خدمة العملاء»: the folder of the settings (support.js) and the tab of the control panel. A red mark on the gear
   and on the folder when the team answered and the player has not read it yet */
#settingsBtn { position:relative; }
#settingsBtn.supdot::after { content:""; position:absolute; top:4px; inset-inline-end:4px; width:10px; height:10px; border-radius:50%; background:#ef4444; box-shadow:0 0 0 2px var(--bg), 0 0 8px rgba(239,68,68,.7); }
.setfolder .sfn { flex:none; min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:#ef4444; color:#fff; font:800 .72rem/20px system-ui, sans-serif; text-align:center; }
.sup { display:grid; gap:12px; }
.sup-hero { display:flex; align-items:center; gap:14px; padding:14px; border-radius:16px; border:1px solid rgba(52,211,153,.22);
  background:radial-gradient(120% 140% at 100% 0%, rgba(16,185,129,.18), transparent 60%), radial-gradient(90% 120% at 0% 100%, rgba(245,184,46,.1), transparent 60%), var(--card); }
.sup-hero img { flex:none; width:96px; height:96px; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.sup-hero div { display:grid; gap:4px; min-width:0; } .sup-hero b { font-size:1.2rem; font-weight:900; } .sup-hero span { color:var(--muted); font-size:.86rem; line-height:1.6; }
.sup-state { margin:0; padding:8px 12px; border-radius:12px; font-weight:800; font-size:.86rem; background:var(--card2); border:1px solid var(--line); }
.sup-state.s0 { color:#fcd34d; border-color:rgba(251,191,36,.3); background:rgba(251,191,36,.08); }
.sup-state.s1 { color:#6ee7b7; border-color:rgba(52,211,153,.3); background:rgba(16,185,129,.08); }
.sup-msgs { display:flex; flex-direction:column; gap:10px; max-height:min(46vh, 420px); min-height:120px; overflow:auto; overscroll-behavior:contain; padding:12px; border-radius:16px; background:var(--card); border:1px solid var(--line); }
.sup-msg { display:grid; gap:4px; max-width:86%; padding:10px 12px; border-radius:16px; line-height:1.65; }
.sup-msg.me { align-self:flex-start; background:#1f3a5f; border:1px solid rgba(96,165,250,.3); border-start-start-radius:6px; }
.sup-msg.team { align-self:flex-end; background:linear-gradient(160deg, rgba(16,185,129,.2), rgba(16,185,129,.08)); border:1px solid rgba(52,211,153,.35); border-start-end-radius:6px; }
.sup-who { display:flex; align-items:center; gap:6px; font-weight:900; font-size:.8rem; color:#6ee7b7; } .sup-who img { width:22px; height:22px; object-fit:contain; }
.sup-text { overflow-wrap:anywhere; white-space:normal; }
.sup-msg time { font-size:.7rem; color:var(--muted); font-weight:700; }
.sup-empty { color:var(--muted); font-size:.9rem; } .sup-empty p { margin:0 0 6px; } .sup-empty ul { margin:0; padding-inline-start:20px; line-height:1.9; }
.sup-form { display:grid; gap:8px; }
.sup-form textarea { width:100%; box-sizing:border-box; min-height:84px; resize:vertical; font:inherit; color:var(--text); background:var(--card2); border:1px solid var(--line); border-radius:14px; padding:10px 12px; line-height:1.6; }
.sup-form textarea:focus { outline:none; border-color:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,.18); }
.sup-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sup-safe { margin:0; display:flex; align-items:center; gap:6px; } .sup-safe .ic { width:14px; height:14px; flex:none; }
@media (max-width:520px) { .sup-hero img { width:72px; height:72px; } .sup-msg { max-width:94%; } }
/* the control panel: the list of conversations and one conversation */
.suplist { display:grid; gap:8px; }
.suprow { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:4px 10px; align-items:center; width:100%; text-align:start; font:inherit; color:var(--text); cursor:pointer; padding:10px 12px; border-radius:12px; background:var(--card); border:1px solid var(--line); }
.suprow:hover, .suprow:focus-visible { border-color:#4b5563; background:var(--card2); }
.suprow .p { color:var(--muted); font-size:.84rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; grid-column:1 / -1; }
.suptag { font-size:.74rem; font-weight:800; padding:2px 8px; border-radius:99px; background:var(--card3); white-space:nowrap; }
.suptag.s0 { background:rgba(251,191,36,.16); color:#fcd34d; } .suptag.s1 { background:rgba(16,185,129,.16); color:#6ee7b7; }
.suprow .n { margin-inline-start:6px; background:#ef4444; color:#fff; border-radius:99px; padding:0 6px; font-size:.72rem; font-weight:800; }
.adm .sup-msgs { max-height:none; min-height:0; }
.adm .sup-msg.me { align-self:flex-end; border-start-start-radius:16px; border-start-end-radius:6px; }
.adm .sup-msg.team { align-self:flex-start; border-start-end-radius:16px; border-start-start-radius:6px; }
.sup-text { -webkit-user-select:text; user-select:text; }      /* (the player copies a username or a step out of an answer) */
/* ---------- (0.15.284) «العشائر»: the page of the clans (clans.js), the clan's dialog, its chat's head ---------- */
.clhead { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.clhr { display:flex; align-items:center; gap:8px; flex:none; } .clhr .pdots, .clhead > .pdots { position:static !important; flex:none; width:38px; height:38px; border-radius:999px; background:var(--card2); }      /* (0.15.327: .pdots is absolute !important for the other pages, so here it sat over «سيرفر 1») */
/* (0.15.327) the big emblems shine: a band of light crosses the metal every few seconds, masked by the emblem's own picture (clans.js gleam) */
.clgleam { position:relative; display:inline-grid; flex:none; isolation:isolate; }
.clgleam::before { content:""; grid-area:1 / 1; z-index:-1; margin:14%; border-radius:50%; background:radial-gradient(closest-side, rgba(251,146,60,.42), rgba(251,146,60,0)); filter:blur(10px); }
.clgleam > img, .clgleam > i { grid-area:1 / 1; }
.clgleam > i { pointer-events:none; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  background:linear-gradient(110deg, transparent 40%, rgba(255,255,255,.35) 46%, rgba(255,246,225,.9) 50%, rgba(255,255,255,.35) 54%, transparent 60%) no-repeat; background-size:320% 100%; background-position:130% 0;
  mix-blend-mode:screen; animation:clgleam 5.2s ease-in-out infinite; }
@keyframes clgleam { 0%, 52% { background-position:130% 0; } 82%, 100% { background-position:-30% 0; } }
.clgleam.float { animation:clfloat 6s ease-in-out infinite; }
@keyframes clfloat { 0%, 100% { transform:translateY(0) rotate(-1.5deg); } 50% { transform:translateY(-6px) rotate(1.5deg); } }
@media (prefers-reduced-motion:reduce) { .clgleam > i, .clgleam.float { animation:none; } .clgleam > i { display:none; } }
.clshut { display:grid; justify-items:center; gap:10px; text-align:center; padding:34px 18px; margin-top:8px; border-radius:20px; border:1px solid rgba(251,146,60,.25); background:radial-gradient(120% 120% at 50% 0%, rgba(251,146,60,.12), transparent 60%), var(--bg2); }
.clshut b { display:inline-flex; align-items:center; gap:8px; font-size:1.35rem; font-weight:900; color:#fed7aa; } .clshut p { margin:0; color:var(--muted); line-height:1.7; } .clshut small { color:#fdba74; font-size:.82rem; }
.clsrv { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid rgba(251,146,60,.35); background:linear-gradient(135deg, rgba(251,146,60,.16), rgba(251,146,60,.04)); color:#fed7aa; font-weight:800; font-size:.86rem; flex:none; }
.clsrv b { color:#fff; }
.clemb { flex:none; object-fit:contain; filter:drop-shadow(0 5px 9px rgba(0,0,0,.45)); }
.cltag { color:#fdba74; font-weight:800; letter-spacing:.04em; font-size:.86em; }
.clmine { display:grid; grid-template-columns:auto 1fr; gap:12px 14px; align-items:center; padding:16px; border-radius:18px; border:1px solid rgba(251,146,60,.28);
  background:radial-gradient(120% 140% at 100% 0%, rgba(251,146,60,.16), transparent 60%), var(--bg2); box-shadow:0 10px 26px rgba(0,0,0,.28); margin-bottom:14px; }
.clmine .clmid { min-width:0; display:grid; gap:4px; } .clmine .clmid > b { font-size:1.25rem; font-weight:900; overflow:hidden; text-overflow:ellipsis; }
.clmine small { color:var(--muted); font-size:.82rem; line-height:1.7; } .clmine small b { color:#fde68a; }
.clabout { margin:2px 0 0; color:#d6d9e0; font-size:.86rem; line-height:1.6; overflow-wrap:anywhere; }
.clacts { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.clacts .btn { justify-content:center; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.clacts .btn .n { margin-inline-start:4px; }
/* (0.15.327) the card of a player with no clan: a shining emblem, what a clan gives, one big button (was a grey ghost in a dashed box) */
.clnone { display:grid; grid-template-columns:auto 1fr; gap:10px 18px; align-items:center; padding:18px; border-radius:20px; border:1px solid rgba(251,146,60,.3); margin-bottom:14px;
  background:radial-gradient(90% 120% at 100% 0%, rgba(251,146,60,.17), transparent 62%), radial-gradient(70% 90% at 0% 100%, rgba(239,68,68,.08), transparent 60%), var(--bg2); box-shadow:0 12px 28px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05); }
.clnone .clgleam { grid-row:span 2; }
.clnone .cltxt { min-width:0; display:grid; gap:5px; } .clnone .cltxt b { font-size:1.3rem; font-weight:900; } .clnone .cltxt small { color:#c3c7cf; font-size:.9rem; line-height:1.65; }
.clperks { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; align-self:start; }
.clperks li { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; border:1px solid rgba(251,146,60,.22); background:rgba(251,146,60,.08); color:#fde7cf; font-size:.82rem; font-weight:800; white-space:nowrap; }
.clperks li svg.ic { width:15px; height:15px; color:#fdba74; }
.clnone .btn { grid-column:1 / -1; justify-content:center; padding:14px 18px; font-size:1.12rem; font-weight:900; border-radius:14px; margin-top:4px; box-shadow:0 10px 22px rgba(220,38,38,.28); }
.clsec { margin:18px 0 8px; font-size:1rem; font-weight:900; }
.clsearch { display:grid; gap:8px; margin-bottom:10px; } .clsearch .pills { margin:0; }
.cllist { display:grid; gap:8px; }
.clrow { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:16px; background:var(--bg2); cursor:pointer; transition:transform .12s, border-color .12s; }
.clrow:hover { border-color:rgba(251,146,60,.4); transform:translateY(-1px); }
.clname { flex:1; min-width:0; display:grid; gap:3px; } .clname > b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1rem; }
.clname small { color:var(--muted); font-size:.78rem; display:flex; align-items:center; gap:4px; flex-wrap:wrap; } .clname small svg.ic { width:14px; height:14px; }
.cllead span { color:#cbd5e1; }
.clbtns { flex:none; display:flex; gap:6px; align-items:center; }
.clplace { flex:none; min-width:34px; text-align:center; font-weight:900; color:var(--muted); font-size:.9rem; }
.clplace.top1 { color:#fcd34d; } .clplace.top2 { color:#e2e8f0; } .clplace.top3 { color:#fdba74; }
.clbadge { font-size:.76rem; font-weight:800; padding:5px 10px; border-radius:999px; background:rgba(34,197,94,.16); color:#86efac; white-space:nowrap; }
.clbadge.wait { background:rgba(251,191,36,.14); color:#fde68a; }
.cl-dialog { width:min(680px, 96vw); }
.cldlg { display:grid; gap:12px; }
.cdtop { display:flex; gap:14px; align-items:flex-start; } .cdtop > div { flex:1; min-width:0; display:grid; gap:6px; }
.cdtop h3 { margin:0; font-size:1.3rem; font-weight:900; overflow-wrap:anywhere; } .cdtop small { color:var(--muted); }
.cdstats { display:flex; flex-wrap:wrap; gap:8px; } .cdstats span { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:10px; background:rgba(255,255,255,.05); font-size:.82rem; }
.cdjoin { display:flex; flex-wrap:wrap; gap:8px; } .cdjoin p { margin:0; }
.cdsec { border-top:1px solid var(--line); padding-top:10px; display:grid; gap:8px; } .cdsec h4 { margin:0; font-size:.95rem; }
.cdsec textarea { width:100%; resize:vertical; }
.cldlg input[type=text], .cldlg textarea, .clmake input[type=text], .clmake textarea { background:var(--card2); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:.55em .7em; font-size:.95rem; font-family:inherit; }
.cdend { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.clmems { display:grid; gap:6px; max-height:46vh; overflow-y:auto; overscroll-behavior:contain; }
.clmem { display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:12px; background:rgba(255,255,255,.04); flex-wrap:wrap; }
.clmem img { width:40px; height:40px; border-radius:11px; flex:none; cursor:pointer; background:var(--card); }
.clmem .who { flex:1; min-width:120px; display:grid; cursor:pointer; } .clmem .who b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .clmem .who small { color:var(--muted); font-size:.76rem; }
.clrank { flex:none; font-size:.74rem; font-weight:800; padding:4px 9px; border-radius:999px; background:rgba(148,163,184,.14); color:#cbd5e1; }
.clrank.r4 { background:rgba(251,191,36,.18); color:#fde68a; } .clrank.r3 { background:rgba(96,165,250,.16); color:#bfdbfe; } .clrank.r2 { background:rgba(52,211,153,.14); color:#a7f3d0; }
.clmtools { display:flex; gap:5px; flex-wrap:wrap; margin-inline-start:auto; } .clmtools .vxib.sm { width:34px; height:34px; }
.clpick { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:6px; }
.clpick button { display:grid; place-items:center; padding:5px; border-radius:12px; border:2px solid transparent; background:rgba(255,255,255,.04); cursor:pointer; }
.clpick button.on { border-color:#fb923c; background:rgba(251,146,60,.14); }
.clpick img { width:100%; height:auto; max-width:56px; }
.clmake { display:grid; gap:10px; } .clmake .field input, .clmake textarea { width:100%; }
.ldm img.clemb { width:34px; height:34px; border-radius:0; } .ldm .cltag { margin-inline-start:2px; }
/* (0.15.330) «خريطة السيرفر»: its card on the clans page and the full view over the page (clanmap.js; the 3D map itself: clanmap3d.js) */
.clmapcard { display:flex; align-items:center; gap:14px; width:100%; padding:10px; margin:0 0 14px; border-radius:20px; border:1px solid rgba(251,191,36,.28); color:inherit; font:inherit; text-align:start; cursor:pointer;
  background:radial-gradient(90% 140% at 0% 50%, rgba(56,189,248,.12), transparent 60%), radial-gradient(80% 120% at 100% 0%, rgba(251,191,36,.14), transparent 60%), var(--bg2); box-shadow:0 12px 26px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05); transition:transform .12s, border-color .12s; }
.clmapcard:hover { transform:translateY(-1px); border-color:rgba(251,191,36,.5); }
.clmapimg { flex:none; width:128px; height:84px; border-radius:14px; background:#0b1220 url(img/clanmap.jpg) center / cover no-repeat; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.clmaptxt { flex:1; min-width:0; display:grid; gap:4px; } .clmaptxt b { display:inline-flex; align-items:center; gap:7px; font-size:1.12rem; font-weight:900; } .clmaptxt b svg.ic { color:#fcd34d; }
.clmaptxt small { color:#c3c7cf; font-size:.84rem; line-height:1.6; }
.clmaphid { display:inline-flex; align-items:center; gap:5px; font-style:normal; font-size:.76rem; font-weight:800; color:#fde68a; } .clmaphid svg.ic { width:14px; height:14px; }
.clmapgo { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:999px; background:linear-gradient(180deg, #f59e0b, #b45309); color:#fff; box-shadow:0 6px 14px rgba(180,83,9,.35); }
.clmapgo svg.ic { transform:scaleX(-1); }
.cmview { position:fixed; inset:0; z-index:85; background:#05070c; display:flex; flex-direction:column; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; overscroll-behavior:contain; }
.cmhost { position:absolute; inset:0; }
.cmtop { position:absolute; top:0; left:0; right:0; z-index:3; display:flex; align-items:center; gap:10px; padding:calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px; pointer-events:none;
  background:linear-gradient(180deg, rgba(4,6,10,.82), rgba(4,6,10,0)); }
.cmtop > * { pointer-events:auto; }
.cmtop .cmx { flex:none; width:42px; height:42px; border-radius:999px; background:rgba(12,14,20,.72); border:1px solid rgba(255,255,255,.14); color:#fff; }
.cmtitle { flex:1; min-width:0; font-size:1.15rem; font-weight:900; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.7); }
.cmland { flex:none; display:inline-flex; align-items:center; gap:6px; padding:6px 12px 6px 8px; border-radius:999px; background:rgba(12,14,20,.72); border:1px solid rgba(251,191,36,.35); color:#fde68a; font-weight:800; font-size:.86rem; }
.cmland b { color:#fff; } .cmland img.clemb { width:22px; height:22px; }
.cmhint { position:absolute; left:50%; bottom:calc(env(safe-area-inset-bottom, 0px) + 18px); transform:translateX(-50%); z-index:2; padding:8px 14px; border-radius:999px; background:rgba(8,10,16,.7); color:#e5e7eb; font-size:.82rem; font-weight:700; white-space:nowrap; pointer-events:none; transition:opacity .6s; }
.cmhint.gone { opacity:0; }
.cmsheet { position:absolute; left:12px; right:12px; bottom:calc(env(safe-area-inset-bottom, 0px) + 12px); z-index:4; max-width:520px; margin:0 auto; padding:14px 16px 16px; border-radius:20px; display:grid; gap:10px;
  background:linear-gradient(180deg, rgba(24,26,34,.96), rgba(13,14,19,.97)); border:1px solid rgba(255,255,255,.1); box-shadow:0 18px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); color:var(--text); animation:cmUp .22s ease-out; touch-action:auto; }
@keyframes cmUp { from { transform:translateY(16px); opacity:0; } to { transform:none; opacity:1; } }
.cmshead { display:flex; align-items:center; gap:10px; } .cmshead b { flex:1; font-size:1.2rem; font-weight:900; } .cmshead .cmsx { flex:none; width:36px; height:36px; border-radius:999px; }
.cmsheet p { margin:0; color:#d6d9e0; line-height:1.65; } .cmwhy { color:#fdba74; font-size:.85rem; line-height:1.6; }
.cmclan { display:flex; align-items:center; gap:12px; width:100%; padding:8px 10px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:inherit; font:inherit; text-align:start; cursor:pointer; }
.cmclan > span { flex:1; min-width:0; display:grid; gap:3px; } .cmclan b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cmclan small { color:var(--muted); font-size:.8rem; display:flex; align-items:center; gap:4px; } .cmclan small svg.ic { width:14px; height:14px; }
.cmacts { display:flex; gap:8px; } .cmacts .btn { flex:1; justify-content:center; padding:12px 14px; font-weight:900; }
html.cm-open #toast { bottom:auto; top:calc(env(safe-area-inset-top, 0px) + 66px); }      /* (the panel under the map is where the toast would sit) */
@media (prefers-reduced-motion:reduce) { .cmsheet { animation:none; } }
@media (max-width:520px) {
  .clmine { grid-template-columns:auto 1fr; padding:14px; } .clmine img.clemb { width:88px; height:88px; }
  .clacts { grid-template-columns:1fr 1fr; } .clacts #clMore { grid-column:1 / -1; }
  .clnone { padding:16px 14px; gap:10px 14px; } .clnone img.clemb { width:84px; height:84px; } .clnone .clgleam { grid-row:auto; } .clnone .clperks { grid-column:1 / -1; } .clnone .cltxt b { font-size:1.18rem; }
  .clrow { padding:9px 10px; gap:9px; } .clrow img.clemb { width:46px; height:46px; }
  .clplace { min-width:26px; font-size:.82rem; }
  .cdtop { flex-direction:column; align-items:center; text-align:center; } .cdtop .cdstats, .cdtop .cdjoin { justify-content:center; }
  .clpick { grid-template-columns:repeat(4, minmax(0, 1fr)); } .clmapimg { width:92px; height:70px; } .clmapcard { gap:11px; } .clmapgo { width:34px; height:34px; }
}
/* (0.15.288) the tag of a player's clan beside their name (chat, voice rooms, profiles), and the clan under the name of a profile */
.ctag { display:inline-block; margin-inline-start:5px; padding:0 5px; border-radius:6px; background:rgba(251,146,60,.14); color:#fdba74; font-size:.74em; font-weight:800; letter-spacing:.03em; line-height:1.55; vertical-align:middle; white-space:nowrap; }
.pnm .ctag { font-size:.5em; vertical-align:.35em; }
.pclan { display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:4px 10px 4px 8px; border-radius:999px; border:1px solid rgba(251,146,60,.3); background:rgba(251,146,60,.08); color:var(--text); font:inherit; font-size:.84rem; font-weight:700; cursor:pointer; max-width:100%; }
.pclan img { flex:none; object-fit:contain; } .pclan span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pclan small { color:#fdba74; font-weight:800; flex:none; }

/* the whole site shut by the owner (src/shut.js, 0.15.325): a cover over everything, nothing of the site drawn behind it */
html.shut body { overflow:hidden; }
html.shut body > *:not(#shut) { display:none !important; }
#shut { position:fixed; inset:0; z-index:99999; display:grid; place-items:center; overflow-y:auto; padding:24px 16px; background:radial-gradient(120% 70% at 50% 18%, #1a1c22 0, #0a0b0e 55%, #050507 100%); color:var(--text, #eee); text-align:center; }
#shut .sbox { width:min(440px, 100%); display:grid; justify-items:center; gap:12px; }
#shut .sic { width:84px; height:84px; border-radius:24px; display:grid; place-items:center; background:var(--card2, #1c1c20); border:1px solid var(--line, #232327); color:#f5b301; }
#shut h1 { margin:6px 0 0; font-size:1.7rem; font-weight:900; }
#shut .why { margin:0; font-size:1.15rem; line-height:1.7; color:#fff; overflow-wrap:anywhere; background:var(--card, #141417); border:1px solid var(--line, #232327); border-radius:14px; padding:12px 18px; max-width:100%; }
#shut .sub { margin:0; color:var(--muted, #a9adb6); }
#shut .sown { margin-top:26px; background:none; border:0; color:var(--muted, #a9adb6); opacity:.55; font:inherit; font-size:.85rem; cursor:pointer; padding:12px 22px; min-height:44px; }
#shut .sown:hover { opacity:.9; }
#shut .sform { width:100%; display:grid; gap:10px; margin-top:6px; }
#shut .sform[hidden], #shut .sform input[hidden] { display:none; }
#shut .sform input { height:44px; border-radius:12px; border:1px solid var(--line, #232327); background:var(--card, #141417); color:inherit; padding:0 14px; font-size:1rem; text-align:left; }
#shut .sgo { height:44px; border-radius:12px; border:0; background:#d33; color:#fff; font:800 1rem var(--font, inherit); cursor:pointer; }
#shut .sgo:disabled { opacity:.5; }
#shut .serr { margin:0; min-height:1.3em; color:#fca5a5; font-size:.9rem; }
@media (max-height:520px) { #shut { place-items:start center; } #shut .sbox { gap:8px; } #shut .sic { width:56px; height:56px; border-radius:16px; } #shut .sic svg { width:30px; height:30px; } #shut h1 { font-size:1.3rem; } #shut .why { font-size:1rem; padding:8px 14px; } #shut .sown { margin-top:8px; } }