:root {
  --bg: #08071a; --text: #f6f5ff; --muted: #a7a3cc; --dim: #625e88;
  --glass: rgba(255,255,255,.05); --glass2: rgba(255,255,255,.085); --stroke: rgba(255,255,255,.09); --stroke2: rgba(255,255,255,.16);
  --v: #7c5cff; --p: #ff4d8d; --o: #ffb347; --c: #2de0c4; --b: #3db8ff; --red: #ff4d5e; --lime: #a6f56b; --gold: #ffcf4d;
  --grad: linear-gradient(100deg, #7c5cff, #ff4d8d 55%, #ffb347);
  --card: linear-gradient(160deg, rgba(30,25,72,.78), rgba(18,15,46,.74));
  --word: 'Play', 'Inter', system-ui, sans-serif;
  --h: 124px; --top: 66px;
}
* { box-sizing: border-box; }
/* no sideways scrolling; clip (not hidden) on body keeps the sticky top bar working */
html, body { margin: 0; max-width: 100%; }
html { overflow-x: hidden; }
html, body { overflow-x: clip; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; color: inherit; cursor: pointer; }
input, select { font-family: inherit; }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hidden { display: none !important; }

/* ================= BACKGROUND ================= */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(1200px 700px at 15% -10%, #2a1a6e 0%, transparent 60%), radial-gradient(900px 600px at 110% 110%, #5a1340 0%, transparent 60%), var(--bg); }
/* (the orbs: a disc as blurred by 80px, drawn once as a soft gradient — a live blur on a moving layer was worked out again
   every frame, behind every page: slow phones, loud fans. The box is 160px bigger each side, the glow's own reach.) */
.orb { position: absolute; margin: -160px; border-radius: 50%; animation: orb 18s ease-in-out infinite alternate;
  background: radial-gradient(circle closest-side, rgb(var(--oc)) 0%, rgb(var(--oc) / .93) 26%, rgb(var(--oc) / .5) 59%, rgb(var(--oc) / .16) 78%, rgb(var(--oc) / .03) 92%, rgb(var(--oc) / 0) 100%); }
.o1 { --oc: 91 60 255; width: 780px; height: 780px; opacity: .45; left: -120px; top: 10%; }
.o2 { --oc: 255 61 139; width: 700px; height: 700px; opacity: .3; right: -80px; top: 45%; animation-duration: 22s; }
.o3 { --oc: 255 159 46; width: 620px; height: 620px; opacity: .15; left: 40%; bottom: -120px; animation-duration: 26s; }
.fl.soft { color: transparent; text-shadow: 0 0 6px rgba(255,255,255,.085); }   /* (a soft letter: drawn once, then only moved) */
@keyframes orb { 50% { transform: translate(120px, -60px) scale(1.2); } 100% { transform: translate(-40px, 80px) scale(.9); } }
.fl { position: absolute; font-weight: 900; color: rgba(255,255,255,.075); animation: drift linear infinite; user-select: none; }
@keyframes drift { from { transform: translateY(110vh) rotate(0deg); } to { transform: translateY(-20vh) rotate(var(--r)); } }
.noise { position: absolute; inset: 0; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body.danger .o1 { --oc: 255 36 66; }
main { position: relative; z-index: 1; }

/* ================= BUTTONS (chunky game style: thick edge, glossy cap) ================= */
.btn { --edge: rgba(0,0,0,.5); --cap: rgba(255,255,255,.26); position: relative; isolation: isolate; border: 0; border-radius: 18px;
  height: 56px; padding: 0 24px; font-size: 15px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.28);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -4px 0 rgba(0,0,0,.18), 0 6px 0 var(--edge), 0 14px 22px -12px rgba(0,0,0,.8);
  transition: transform .09s ease-out, box-shadow .09s ease-out, filter .15s; }
.btn::before { content: ''; position: absolute; z-index: -1; left: 10px; right: 10px; top: 5px; height: 38%; border-radius: 12px 12px 18px 18px / 10px 10px 16px 16px;
  background: linear-gradient(var(--cap), rgba(255,255,255,0)); pointer-events: none; }
.btn:hover { filter: brightness(1.08) saturate(1.05); transform: translateY(-1px); }
.btn:active { transform: translateY(5px); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.18), 0 1px 0 var(--edge), 0 4px 10px -6px rgba(0,0,0,.8); }
.btn:disabled { opacity: .4; pointer-events: none; filter: grayscale(.4); }
.btn svg.i { width: 19px; height: 19px; stroke-width: 2.6; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.btn-primary { --edge: #8a5a0a; background: linear-gradient(180deg, #ffe58f 0%, #f6c84a 48%, #e3a61f 100%); }
.btn-accent { --edge: #9b2150; background: linear-gradient(180deg, #ff8db5 0%, #ff5a94 45%, #e23c79 100%); }
.btn-secondary { --edge: #120e2e; --cap: rgba(255,255,255,.14); background: linear-gradient(180deg, #3b3570 0%, #2a2556 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 2px 0 rgba(255,255,255,.14), 0 6px 0 var(--edge), 0 14px 22px -12px rgba(0,0,0,.8); }
.btn-secondary:active { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 2px 0 rgba(255,255,255,.14), 0 1px 0 var(--edge); }
.btn-danger { --edge: #8f1631; background: linear-gradient(180deg, #ff8a8f 0%, #ff4d5e 45%, #e02c47 100%); }
.btn-danger.live:not(:disabled) { animation: stopPulse 1.8s ease-in-out infinite; }
@keyframes stopPulse { 50% { filter: brightness(1.12); } }
.btn-lg { height: 64px; font-size: 17px; border-radius: 20px; }
.btn-sm { height: 40px; border-radius: 13px; padding: 0 16px; font-size: 12px; box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 4px 0 var(--edge); }
.btn-sm::before { top: 3px; left: 6px; right: 6px; border-radius: 8px; }
.btn-sm:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 1px 0 var(--edge); }
.btn .ar { display: flex; transition: transform .2s; } .btn:hover .ar { transform: translateX(3px); }
.icon-btn { position: relative; width: 42px; height: 42px; border-radius: 13px; border: 1px solid var(--stroke); background: var(--glass); display: flex; align-items: center; justify-content: center; flex: none; transition: all .2s; }
.icon-btn:hover { background: var(--glass2); border-color: var(--stroke2); }
.link { background: none; border: 0; padding: 0; color: #b9a9ff; font-weight: 700; font-size: 14px; }
.link:hover { text-decoration: underline; }

/* ================= TOP BAR ================= */
.top { position: sticky; top: 0; z-index: 40; height: var(--top); background: rgba(10,8,30,.7); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-bottom: 1px solid var(--stroke); }
.top-in { max-width: 1240px; height: 100%; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; }
.mini-tiles { display: flex; gap: 3px; }
.mini-tiles span { width: 22px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 0 rgba(0,0,0,.35); }
.brand b { font-weight: 900; font-size: 15px; letter-spacing: .5px; }
/* the site's own logo (the home page's header) */
.brand-logo { display: block; width: 36px; height: 36px; flex: none; filter: drop-shadow(0 3px 8px rgba(0,0,0,.55)) drop-shadow(0 0 6px rgba(255,200,80,.18)); }
@media (max-width: 640px) { .brand-logo { width: 32px; height: 32px; } }
.nav { display: flex; gap: 2px; margin-left: 14px; }
.nav button { border: 0; background: none; color: var(--muted); font-weight: 700; font-size: 14px; padding: 9px 13px; border-radius: 11px; display: flex; align-items: center; gap: 8px; transition: all .2s; }
.nav button svg.i { width: 17px; height: 17px; }
.nav button:hover { color: var(--text); background: var(--glass); }
.nav button.on { color: var(--text); background: var(--glass2); }
.nav a { color: var(--muted); font-weight: 700; font-size: 14px; padding: 9px 13px; border-radius: 11px; display: flex; align-items: center; gap: 8px; text-decoration: none; transition: all .2s; }
.nav a svg.i { width: 17px; height: 17px; }
.nav a:hover { color: var(--text); background: var(--glass); }
a.menu-item { color: inherit; text-decoration: none; }
.sp { flex: 1; }
/* custom dropdown (language) */
.dd { position: relative; }
.dd-btn { width: 100%; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border-radius: 13px; border: 1px solid var(--stroke);
  background: var(--glass); color: var(--text); font-weight: 700; font-size: 13px; text-align: left; transition: border-color .2s, background .2s; }
.dd-btn:hover, .dd.open .dd-btn { border-color: var(--stroke2); background: var(--glass2); }
.dd-btn svg.i { width: 16px; height: 16px; color: var(--muted); }
.dd-val { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-chev { transition: transform .25s; }
.dd.open .dd-chev { transform: rotate(180deg); }
.dd-top { width: 168px; }
.dd-full .dd-btn { height: 52px; border-radius: 14px; padding: 0 16px; font-size: 15px; background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.14); }
.dd-list { position: absolute; z-index: 70; top: calc(100% + 8px); left: 0; right: 0; min-width: 100%; margin: 0; padding: 6px; list-style: none;
  max-height: 320px; overflow-y: auto; border-radius: 16px; border: 1px solid var(--stroke2);
  background: linear-gradient(160deg, rgba(46,34,112,.97), rgba(26,20,64,.97) 60%, rgba(66,22,68,.96));
  box-shadow: 0 24px 50px rgba(0,0,0,.55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  animation: popIn .2s cubic-bezier(.3,1.4,.5,1); transform-origin: top center; }
.dd-list li { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 11px; cursor: pointer; font-size: 14px; font-weight: 700; color: #e6e3fb; transition: background .15s; }
.dd-list li:hover { background: rgba(255,255,255,.08); }
.dd-list li span { flex: 1; }
.dd-list li small { font-size: 11px; font-weight: 800; letter-spacing: .8px; color: var(--dim); }
.dd-list li .dd-ok { width: 16px; height: 16px; color: var(--lime); opacity: 0; }
.dd-list li.on { background: rgba(124,92,255,.22); color: #fff; }
.dd-list li.on .dd-ok { opacity: 1; }
.fld-label { display: block; font-size: 12px; font-weight: 700; color: #d6d2f2; margin-bottom: 6px; }

/* scrollbars (keep rounded corners intact) */
* { scrollbar-width: thin; scrollbar-color: rgba(160,140,255,.55) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 10px; border: 3px solid transparent; background: linear-gradient(180deg, #9b85ff, #ff5a94) padding-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #b3a2ff, #ff7aa9) padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
.acct { display: flex; align-items: center; gap: 8px; border: 1px solid var(--stroke); background: var(--glass); padding: 4px 10px 4px 4px; border-radius: 14px; }
.acct:hover { background: var(--glass2); }
.acct-name { font-weight: 800; font-size: 13px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ava { position: relative; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; color: #fff; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.ava .lv { position: absolute; bottom: -5px; right: -6px; height: 18px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: #3a2400; font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.ava svg.i { width: 18px; height: 18px; }
.burger { display: none; }
@media (max-width: 899px) {
  .nav, .brand b, .acct-name, .acct > svg { display: none; }
  .burger { display: flex; }
  .dd-top { width: auto; }
  .dd-top .dd-val { display: none; }
  .dd-top .dd-list { left: auto; right: 0; min-width: 210px; }
}
/* narrow phones (most are 360-412 wide): the top bar's buttons sit closer and the language button is the globe alone,
   so the menu button always fits; nothing is taken away (the site's name may shorten with "…" as the very last resort) */
@media (max-width: 420px) {
  .top-in { gap: 4px !important; padding: 0 6px !important; }
  .top-in .icon-btn, .top-in .bonus-btn, .dd-top .dd-btn { width: 36px; height: 36px; }
  .brand { gap: 4px; min-width: 0; flex-shrink: 1; }
  .brand-t { min-width: 0; overflow: hidden; }
  .brand-t small, .brand > b { overflow: hidden; text-overflow: ellipsis; }
  .top-in > :not(.brand):not(.sp) { flex-shrink: 0; }
  .dd-top .dd-chev { display: none; }
  .dd-top .dd-btn { padding: 0 !important; justify-content: center; }
  .top-in .bonus-btn { padding: 0; justify-content: center; }
  #loginBtn { padding: 0 8px !important; }
}

/* popovers */
.wrap-rel { position: relative; }
/* the top bar is blurred itself, so its popovers cannot blur the page: they get an almost solid background instead */
.pop { position: absolute; top: calc(100% + 10px); right: 0; width: 300px; padding: 16px; border-radius: 20px; z-index: 50;
  background: linear-gradient(160deg, rgba(40,30,100,.97), rgba(24,18,60,.97) 55%, rgba(58,20,62,.96)); border: 1px solid var(--stroke2);
  box-shadow: 0 24px 60px rgba(0,0,0,.5); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); animation: popIn .22s cubic-bezier(.3,1.4,.5,1); transform-origin: top right; }
@keyframes popIn { from { opacity: 0; transform: scale(.92) translateY(-6px); } }
.pop h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.snd { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.snd:last-child { border: 0; }
.snd .si { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--glass2); }
.snd .si svg.i { width: 17px; height: 17px; }
.snd b { font-size: 14px; display: block; margin-bottom: 8px; }
.acct-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.acct-head b { display: block; font-size: 15px; } .acct-head span { font-size: 12px; color: var(--muted); }
.menu-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 10px; border: 0; background: none; border-radius: 11px; font-weight: 700; font-size: 14px; text-align: left; }
.menu-item:hover { background: rgba(255,255,255,.07); }
.menu-item svg.i { width: 18px; height: 18px; color: var(--muted); }
.menu-item.danger { color: #ff8b95; } .menu-item.danger svg.i { color: #ff8b95; }

/* ================= CONTROLS ================= */
.switch { width: 48px; height: 28px; border-radius: 14px; border: 0; background: rgba(255,255,255,.16); position: relative; flex: none; transition: background .25s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .3s cubic-bezier(.3,1.5,.5,1); }
.switch.on { background: var(--v); }
.switch.on::after { transform: translateX(20px); }
.rng { position: relative; --pc: 50%; --pn: .5; }
.rng input { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 5px; outline: none; margin: 0; cursor: pointer;
  background: linear-gradient(90deg, #7c5cff, #b35cff) 0 0 / var(--pc) 100% no-repeat, rgba(255,255,255,.1); }
.rng.thin input { height: 6px; }
.rng input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 5px rgba(124,92,255,.3), 0 3px 8px rgba(0,0,0,.4); transition: transform .15s; }
.rng input:active::-webkit-slider-thumb { transform: scale(1.12); }
.rng.thin input::-webkit-slider-thumb { width: 18px; height: 18px; box-shadow: 0 0 0 4px rgba(124,92,255,.3); }
.rng input::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 5px rgba(124,92,255,.3); }
.rng input::-moz-range-progress { height: 10px; border-radius: 5px; background: #7c5cff; }
.rng .bub { position: absolute; bottom: 24px; left: calc(13px + (100% - 26px) * var(--pn)); transform: translateX(-50%); padding: 4px 10px; border-radius: 9px; background: #fff; color: #110f2b; font-size: 13px; font-weight: 900; pointer-events: none; white-space: nowrap; }
.rng .bub::after { content: ''; position: absolute; left: 50%; bottom: -4px; margin-left: -5px; border: 5px solid transparent; border-top-color: #fff; border-bottom: 0; }
.ticks { display: flex; justify-content: space-between; margin-top: 10px; padding: 0 6px; font-size: 11px; font-weight: 700; color: var(--dim); }

/* ================= CARDS ================= */
/* solid enough that the floating background letters fade behind text */
.card { position: relative; border-radius: 26px; background: var(--card); border: 1px solid var(--stroke);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: hidden; }
.card::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.06), transparent 60%); }
@media (hover: hover) and (pointer: fine) { .card:hover::before { opacity: 1; } }
.label { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.page { max-width: 1240px; margin: 0 auto; padding: 22px 16px 40px; }
.in { animation: in .6s cubic-bezier(.2,.9,.3,1) backwards; }
@keyframes in { from { opacity: 0; transform: translateY(18px); } }

/* ================= HOME ================= */
.home { display: grid; gap: 18px; }
.hero { padding: 26px 22px; display: flex; flex-direction: column; gap: 20px; }
.tiles { display: flex; gap: 8px; }
.tile { position: relative; width: 58px; height: 64px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 900; color: #fff;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.2), 0 6px 0 rgba(0,0,0,.35);
  animation: drop .8s cubic-bezier(.3,1.6,.5,1) backwards, bob 3.2s ease-in-out infinite; }
.tile { perspective: 300px; }
.tile .tl { display: inline-block; text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.tile .tl.flip { animation: tileFlip .46s cubic-bezier(.4,0,.2,1); }
@keyframes tileFlip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); opacity: .2; } 100% { transform: rotateX(0); } }
@keyframes drop { from { opacity: 0; transform: translateY(-50px) rotate(-12deg); } }
@keyframes bob { 50% { transform: translateY(-6px) rotate(var(--rot, 0deg)); } }
.kicker { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 3px; color: var(--muted); }
.kicker b { color: #ff8db4; }
.tagline { font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -.4px; margin: 10px 0 0; max-width: 420px; }
.tagline span { color: var(--muted); font-weight: 600; }
.cta { display: flex; flex-direction: column; gap: 10px; }
/* home: game-menu rows — play is the main one, joining a room is the quieter second */
.menu-row { position: relative; isolation: isolate; width: 100%; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; color: #fff;
  border: 0; border-radius: 18px; -webkit-user-select: none; user-select: none; transition: transform .09s ease-out, box-shadow .09s ease-out, filter .15s, background .2s, border-color .2s; }
.menu-row .mr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.menu-row b { font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-row small { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-row .mr-ico { flex: none; display: grid; place-items: center; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.menu-row .mr-chev { flex: none; transition: transform .2s; }
.mr-play { --edge: #8a5a0a; padding: 12px 14px; background: linear-gradient(180deg, #ffe58f 0%, #f6c84a 48%, #e3a61f 100%); text-shadow: 0 2px 0 rgba(0,0,0,.25);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -4px 0 rgba(0,0,0,.18), 0 5px 0 var(--edge), 0 12px 20px -12px rgba(0,0,0,.85); }
.mr-play::before { content: ''; position: absolute; z-index: -1; left: 10px; right: 10px; top: 5px; height: 38%; border-radius: 12px 12px 18px 18px / 10px 10px 16px 16px;
  background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,0)); pointer-events: none; }
.mr-play .mr-ico { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 0 rgba(0,0,0,.18); }
.mr-play .mr-ico svg.i { width: 20px; height: 20px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.mr-play b { font-size: 17px; letter-spacing: .4px; text-transform: uppercase; }
.mr-play small { color: rgba(255,255,255,.88); text-shadow: none; }
.mr-play .mr-chev { width: 22px; height: 22px; stroke-width: 2.8; }
.mr-play:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.18), 0 1px 0 var(--edge), 0 4px 10px -6px rgba(0,0,0,.8); }
.mr-join { padding: 9px 14px; background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.12); }
.mr-join .mr-ico { width: 34px; height: 34px; border-radius: 10px; color: var(--c); background: rgba(45,224,196,.14); }
.mr-join .mr-ico svg.i { width: 18px; height: 18px; }
.mr-join b { font-size: 14px; }
.mr-join small { color: var(--muted); font-size: 11px; }
.mr-join .mr-chev { width: 18px; height: 18px; color: var(--muted); }
.mr-join:active { transform: scale(.985); }
.mr-join .mr-lock { flex: none; width: 16px; height: 16px; color: #f3c35a; opacity: .9; }
.mr-join.locked .mr-ico { color: var(--muted); background: rgba(255,255,255,.06); }
.mr-join.locked b { color: var(--muted); }
[data-ads-open].ad-locked { opacity: .4; cursor: not-allowed; pointer-events: none; }
@media (hover: hover) {
  .mr-play:hover { filter: brightness(1.07); transform: translateY(-1px); }
  .mr-play:active { transform: translateY(4px); }
  .mr-join:hover { border-color: rgba(45,224,196,.45); background: rgba(45,224,196,.06); }
  .menu-row:hover .mr-ico { transform: scale(1.08) rotate(-6deg); }
  .menu-row:hover .mr-chev { transform: translateX(3px); }
}
@media (max-width: 520px) {
  .mr-play { padding: 11px 12px; }
  .mr-play b { font-size: 15px; }
  .mr-play .mr-ico { width: 36px; height: 36px; }
}
.mystats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ms { padding: 12px; border-radius: 16px; background: rgba(0,0,0,.2); border: 1px solid var(--stroke); }
.ms b { display: block; font-size: 20px; font-weight: 900; margin-top: 4px; font-variant-numeric: tabular-nums; }
.guest-note { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.setup { padding: 22px; display: flex; flex-direction: column; gap: 22px; }
.setup .h3 { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -.3px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.badge { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 8px; background: rgba(166,245,107,.14); color: var(--lime); letter-spacing: .5px; }
.blk .hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 36px; gap: 10px; }
.blk .hd b { font-size: 15px; }
.inline { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.inline .t b { display: block; font-size: 15px; } .inline .t span { font-size: 12px; color: var(--muted); }
.note { font-size: 12px; color: var(--muted); line-height: 1.5; display: flex; gap: 8px; }
.note svg.i { width: 16px; height: 16px; color: var(--b); margin-top: 1px; }

/* seats */
.plist { display: flex; flex-direction: column; gap: 8px; }
#plist { gap: 0; }
/* each seat expands / collapses smoothly (grid 1fr <-> 0fr) */
.seat-wrap { display: grid; grid-template-rows: 1fr; opacity: 1; transform: none;
  transition: grid-template-rows .38s cubic-bezier(.3,1,.4,1), opacity .3s ease, transform .38s cubic-bezier(.3,1.3,.5,1); }
.seat-wrap.collapsed { grid-template-rows: 0fr; opacity: 0; transform: translateX(-14px) scale(.97); }
.seat-in { min-height: 0; overflow: hidden; padding-bottom: 8px; }
/* flex row: avatar | name (grows) | switch pinned right; the difficulty line wraps below */
.seat-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 8px; padding: 10px 12px; border-radius: 16px;
  background: rgba(0,0,0,.18); border: 1px solid var(--stroke); border-left-width: 4px; transition: background .4s ease, border-color .4s ease; }
.seat-row .ava { transition: background .4s, color .4s, border-color .4s; }
.seat-row .ava.ava-pop { animation: avaPop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes avaPop { 0% { transform: scale(.55) rotate(-25deg); } 100% { transform: none; } }
.seat-row .sr-main { transition: opacity .15s ease, transform .15s ease; }
.seat-row .sr-main.swap { opacity: 0; transform: translateY(-3px); }
.sr-extra { flex: 0 0 100%; padding-left: 50px; overflow: hidden; transition: height .35s cubic-bezier(.3,1,.4,1), opacity .15s ease, transform .15s ease; }
.sr-extra.swap { opacity: 0; transform: translateY(-4px); }
.seat-row .ava { flex: none; }
.seat-row .sr-main { flex: 1 1 0; min-width: 0; }
.seat-row .kswitch { flex: none; margin-left: auto; }
.seat-row .sr-main b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-row .sr-main span { display: block; font-size: 12px; color: var(--muted); }
.seat-row.me-row { border-left-color: var(--p); }
.seat-row.human { border-color: rgba(45,224,196,.28); border-left-color: var(--c); background: rgba(45,224,196,.06); }
.seat-row.human .ava { background: rgba(45,224,196,.16); color: var(--c); box-shadow: none; border: 1px dashed rgba(45,224,196,.5); }
.seat-row.ai { border-color: rgba(124,92,255,.3); border-left-color: var(--v); background: rgba(124,92,255,.08); }
.chip-you { display: inline-block !important; margin-top: 3px; font-size: 10px !important; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #ff9cbf !important; }
/* human / AI switch */
.kswitch { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 4px 2px; font-size: 12px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.kswitch .ks-l, .kswitch .ks-r { color: var(--dim); transition: color .25s; }
.kswitch.is-human .ks-l { color: #86f3e0; }
.kswitch.is-ai .ks-r { color: #d2c8ff; }
.ks-track { position: relative; isolation: isolate; width: 64px; height: 34px; border-radius: 17px; flex: none;
  background: linear-gradient(180deg, #0f7a6a, #1fb89f); box-shadow: inset 0 3px 6px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.08); }
/* the AI colour fades in over the human colour (gradients cannot transition directly) */
.ks-track::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #4a2fc4, #7c5cff);
  opacity: 0; transition: opacity .35s ease; }
.kswitch.is-ai .ks-track::before { opacity: 1; }
.kswitch:active .ks-knob svg.i { transform: scale(.85); }
.ks-knob { z-index: 1; position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #ffffff, #dcdcf0); color: #1a1640; box-shadow: 0 3px 0 rgba(0,0,0,.3), 0 4px 10px rgba(0,0,0,.35);
  transition: transform .38s cubic-bezier(.3,1.5,.5,1), color .3s, width .15s; }
.ks-knob svg.i { width: 16px; height: 16px; stroke-width: 2.4; transition: transform .3s; }
.kswitch.is-ai .ks-knob { transform: translateX(30px); color: #5f3fe6; }
.kswitch.is-human .ks-knob { color: #0f7a6a; }
.kswitch:active .ks-knob { width: 32px; }
.kswitch:disabled { cursor: default; opacity: .55; }                     /* (a visitor: bots only, the switch locked) */
.kswitch:disabled:active .ks-knob { width: 28px; }
/* difficulty */
.seat-row .lvl { display: flex; gap: 8px; padding: 2px 0 4px; }
.lv { --lc: #9a96c4; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22); color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .3px;
  transition: color .3s, border-color .3s, background .3s, box-shadow .3s, transform .2s cubic-bezier(.3,1.6,.5,1); }
.lv:active { transform: scale(.95); }
.lv .bars i { transition: opacity .3s, transform .3s; }
.lv.on .bars i { animation: barUp .4s cubic-bezier(.3,1.6,.5,1) backwards; }
.lv.on .bars i:nth-child(2) { animation-delay: .05s; } .lv.on .bars i:nth-child(3) { animation-delay: .1s; }
@keyframes barUp { from { transform: scaleY(.2); } }
.lv:hover { color: var(--text); border-color: rgba(255,255,255,.18); }
.lv-easy { --lc: #6ee7a0; } .lv-med { --lc: #ffc24d; } .lv-hard { --lc: #ff6b7d; }
.lv .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.lv .bars i { width: 4px; border-radius: 2px; background: currentColor; opacity: .25; }
.lv .bars i:nth-child(1) { height: 6px; } .lv .bars i:nth-child(2) { height: 10px; } .lv .bars i:nth-child(3) { height: 14px; }
.lv-easy .bars i:nth-child(1), .lv-med .bars i:nth-child(-n+2), .lv-hard .bars i { opacity: 1; }
.lv.on { color: var(--lc); border-color: color-mix(in srgb, var(--lc) 60%, transparent); background: color-mix(in srgb, var(--lc) 14%, rgba(0,0,0,.2));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--lc) 35%, #000), inset 0 1px 0 rgba(255,255,255,.12); }
.seat-row .hn { font-size: 12px; color: #86f3e0; display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.seat-row .hn svg.i { width: 14px; height: 14px; }
@media (max-width: 520px) {
  .kswitch .ks-l, .kswitch .ks-r { display: none; }
  .sr-extra { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .seat-wrap, .sr-extra, .ks-knob, .ks-track::before, .lv { transition: none; }
}

/* ================= ROOM ================= */
.room { max-width: 660px; margin: 0 auto; padding: 26px 22px; display: flex; flex-direction: column; gap: 18px; }
.code { display: flex; gap: 8px; justify-content: center; }
.code span { width: 50px; height: 62px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 900; font-family: var(--word);
  background: rgba(0,0,0,.25); border: 1px solid var(--stroke2); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); animation: drop .7s cubic-bezier(.3,1.6,.5,1) backwards; }
.code span.dash { width: 16px; background: none; border: 0; box-shadow: none; color: var(--dim); }
.copy-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.btn.btn-sq { width: 40px; padding: 0; flex: none; }
.seat { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(0,0,0,.18); border: 1px solid var(--stroke);
  transition: height .32s cubic-bezier(.4,0,.2,1), opacity .22s, transform .32s cubic-bezier(.4,0,.2,1), padding .32s, margin .32s, border-width .32s; }
.seat.seat-flip { opacity: .15; transform: scale(.97); }
.seat.seat-in { animation: seatIn .38s cubic-bezier(.2,.9,.3,1.15); }
@keyframes seatIn { from { opacity: 0; transform: translateX(-14px) scale(.97); } }
/* a removed seat slides out and folds its space away */
.seat.seat-out { height: 0 !important; opacity: 0; transform: translateX(28px) scale(.96); padding-top: 0; padding-bottom: 0; margin-bottom: -8px;
  border-width: 0; overflow: hidden; pointer-events: none; }
.seat .t { flex: 1; min-width: 0; } .seat .t b { display: block; font-size: 15px; } .seat .t span { font-size: 12px; color: var(--muted); }
.seat.wait { border-style: dashed; border-color: rgba(45,224,196,.35); }
.seat.wait .ava { background: rgba(45,224,196,.12); color: var(--c); box-shadow: none; }
.tag { font-size: 12px; font-weight: 900; padding: 4px 9px; border-radius: 8px; white-space: nowrap; }
.tag.g { background: rgba(166,245,107,.14); color: var(--lime); } .tag.s { background: rgba(255,207,77,.14); color: var(--gold); } .tag.u { background: rgba(61,184,255,.14); color: var(--b); }
.tag.x { background: rgba(255,77,94,.14); color: var(--red); } .tag.m { background: rgba(255,255,255,.07); color: var(--dim); } .tag.v { background: rgba(124,92,255,.2); color: #cfc4ff; }
.typing { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 4px; }
.typing i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: tp 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tp { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.wait-host { text-align: center; color: var(--muted); font-size: 14px; padding: 6px 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }

/* ================= GAME ================= */
.players { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 12px; margin-bottom: 6px; scrollbar-width: none; }
.players::-webkit-scrollbar { display: none; }
.pc { flex: none; min-width: 150px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: rgba(20,16,50,.75); border: 1px solid var(--stroke); position: relative; overflow: hidden; }
.pc.me-c { border-color: rgba(255,77,141,.45); }
.pc.left { opacity: .45; }
.pc .ava { width: 36px; height: 36px; font-size: 14px; border-radius: 11px; }
.pc .t { min-width: 0; flex: 1; } .pc .t b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.pc .t span { font-size: 11px; color: var(--muted); }
.pc .sc { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.pc .pg { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--pcol); transition: width .5s; }
.bump { animation: bump .5s cubic-bezier(.3,1.8,.5,1); }
@keyframes bump { 40% { transform: scale(1.1); } }
.layout { display: grid; gap: 16px; }
.stage { padding: 18px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.reel { width: var(--h); height: var(--h); border-radius: 28px; overflow: hidden; position: relative; flex: none;
  background: linear-gradient(160deg, #221a52, #140f33); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12), inset 0 2px 0 rgba(255,255,255,.15), 0 16px 34px -10px rgba(0,0,0,.6); }
.reel::before, .reel::after { content: ''; position: absolute; left: 0; right: 0; height: 32%; z-index: 2; pointer-events: none; }
.reel::before { top: 0; background: linear-gradient(#140f33, transparent); }
.reel::after { bottom: 0; background: linear-gradient(transparent, #140f33); }
.strip { will-change: transform; }
.cell { height: var(--h); line-height: var(--h); text-align: center; font-size: calc(var(--h) * .58); font-weight: 900; color: rgba(255,255,255,.85); font-family: var(--word); }
.cell.final { color: #ffd76a; text-shadow: 0 3px 0 #b86a1f; }
.reel.landed { animation: landed .8s cubic-bezier(.3,1.7,.5,1); box-shadow: inset 0 0 0 2px #ffcf4d, 0 0 0 5px rgba(255,207,77,.12), 0 16px 34px -10px rgba(0,0,0,.6); }
@keyframes landed { 0% { transform: scale(.88); } 60% { transform: scale(1.06); } }
.info { min-width: 0; }
.clock { font-size: 46px; font-weight: 900; letter-spacing: -1px; font-variant-numeric: tabular-nums; line-height: 1; margin: 8px 0 12px; font-family: var(--word); }
.bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.bar div { height: 100%; width: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--c), var(--v)); transition: width .25s linear; }
.status { margin-top: 12px; font-size: 14px; color: var(--muted); min-height: 20px; }
.status.st-pop { animation: spop .4s; }
@keyframes spop { from { opacity: 0; transform: translateY(6px); } }
.danger .clock { color: var(--red); animation: beat 1s infinite; }
.danger .bar div { background: var(--red); }
@keyframes beat { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.07); } }
.actions { display: flex; gap: 10px; }
/* category cards */
.cats { display: grid; grid-template-columns: 1fr; gap: 14px; counter-reset: cat; }
.field { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 14px; border-radius: 22px;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--fc) 22%, transparent) 0%, transparent 55%),
              linear-gradient(160deg, #221b52 0%, #161236 100%);
  border: 1px solid color-mix(in srgb, var(--fc) 30%, rgba(255,255,255,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 5px 0 color-mix(in srgb, var(--fc) 28%, #06050f), 0 16px 26px -16px rgba(0,0,0,.9);
  transition: transform .25s cubic-bezier(.3,1.4,.5,1), box-shadow .25s, border-color .25s; animation: in .5s cubic-bezier(.2,.9,.3,1) backwards; counter-increment: cat; }
/* big letter watermark after the draw */
.field::after { content: attr(data-letter); position: absolute; z-index: -1; right: 18px; bottom: -26px; font-family: var(--word); font-size: 110px; font-weight: 700; line-height: 1;
  color: color-mix(in srgb, var(--fc) 14%, transparent); pointer-events: none; transition: opacity .4s; }
/* left accent stripe */
.field::before { content: ''; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--fc), color-mix(in srgb, var(--fc) 40%, transparent)); }
.field:focus-within { transform: translateY(-3px) scale(1.01); border-color: color-mix(in srgb, var(--fc) 75%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 7px 0 color-mix(in srgb, var(--fc) 40%, #06050f), 0 0 0 4px color-mix(in srgb, var(--fc) 18%, transparent), 0 22px 34px -16px rgba(0,0,0,.9); }
.field.good { border-color: color-mix(in srgb, var(--fc) 60%, transparent); }
.field .fi { position: relative; width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex: none; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, var(--fc) 100%, #fff 15%), color-mix(in srgb, var(--fc) 70%, #1a1040));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.2), 0 4px 0 color-mix(in srgb, var(--fc) 35%, #06050f); }
.field .fi svg.i { width: 24px; height: 24px; stroke-width: 2.2; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.field .fi::after { content: counter(cat); position: absolute; top: -6px; left: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; color: #fff; background: #15112f; border: 2px solid color-mix(in srgb, var(--fc) 70%, transparent); }
.field .bd { flex: 1; min-width: 0; }
.field label { display: block; font-size: 11px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 4px;
  color: color-mix(in srgb, var(--fc) 75%, #fff); }
.field input { width: 100%; background: transparent; border: 0; border-bottom: 2px solid rgba(255,255,255,.08); outline: none; color: var(--text); font-family: var(--word);
  font-size: 22px; font-weight: 700; letter-spacing: .3px; padding: 2px 0 5px; transition: border-color .25s; }
.field input:focus { border-bottom-color: color-mix(in srgb, var(--fc) 80%, transparent); }
.field input::placeholder { color: color-mix(in srgb, var(--fc) 30%, #5f5b86); font-weight: 400; }
.field input:disabled { opacity: .55; }
.field .ok { width: 32px; height: 32px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--fc); color: #08071a;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--fc) 40%, #000); transform: scale(0) rotate(-90deg); transition: transform .45s cubic-bezier(.3,1.8,.5,1); }
.field .ok svg { width: 18px; height: 18px; stroke-width: 3; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s .15s; }
.field.good .ok { transform: scale(1) rotate(0); } .field.good .ok svg { stroke-dashoffset: 0; }

/* waiting for the results after stop */
.counting { position: fixed; inset: 0; z-index: 65; display: flex; align-items: center; justify-content: center; background: rgba(4,3,14,.45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade .2s; }
.cnt-card { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 36px; border-radius: 26px; border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(160deg, rgba(46,34,112,.96), rgba(26,20,64,.96) 55%, rgba(66,22,68,.95)); box-shadow: 0 30px 60px rgba(0,0,0,.5); animation: popIn .3s cubic-bezier(.3,1.4,.5,1); }
.cnt-card b { font-size: 15px; font-weight: 800; letter-spacing: .4px; }
.cnt-ring { position: relative; width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cnt-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #7c5cff, #ff4d8d, #ffb347, #2de0c4, #7c5cff);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  animation: spin 1s linear infinite; }
.cnt-ring span { font-family: var(--word); font-size: 44px; font-weight: 700; color: #ffd76a; text-shadow: 0 3px 0 #b86a1f; animation: bob 1.4s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cnt-dots { display: flex; gap: 6px; }
.cnt-dots i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: tp 1.1s infinite; }
.cnt-dots i:nth-child(2) { animation-delay: .15s; } .cnt-dots i:nth-child(3) { animation-delay: .3s; }
.plus { position: fixed; z-index: 80; pointer-events: none; font-size: 13px; font-weight: 900; padding: 4px 10px; border-radius: 999px; background: #fff; color: #110f2b; animation: plus .9s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes plus { 0% { opacity: 0; transform: translateY(6px) scale(.8); } 20% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-46px); } }
@media (max-width: 899px) {
  /* --kb: height of the phone keyboard (0 when closed): the Letter/Stop bar rides on top of it, and the page gets room below */
  #game { padding-bottom: calc(120px + var(--kb, 0px)); }
  .stage .actions { position: fixed; left: 0; right: 0; bottom: var(--kb, 0px); z-index: 30; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(8,7,26,.95) 32%); transition: bottom .12s ease-out; }
  .stage .actions .btn { flex: 1; }
}

/* ================= SHEETS (translucent gradient) ================= */
/* no blur on the dim layer: a blurred parent would cancel the sheet's own blur (the page would show through) */
.overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(4,3,14,.55); animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: 100%; max-width: 580px; max-height: 90vh; overflow-y: auto; padding: 12px 20px calc(22px + env(safe-area-inset-bottom));
  background: linear-gradient(160deg, rgba(46,34,112,.9), rgba(26,20,64,.9) 55%, rgba(66,22,68,.88));
  backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.14); border-radius: 28px 28px 0 0; box-shadow: 0 -20px 60px rgba(0,0,0,.4); animation: up .4s cubic-bezier(.2,.9,.3,1); }
@keyframes up { from { transform: translateY(100%); } }
.grab { width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); margin: 0 auto 16px; }
.sh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.sh h2 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -.4px; }
.sheet .btn { width: 100%; }
.sheet .note { margin-top: 12px; }
.menu-list { display: flex; flex-direction: column; gap: 2px; }
.menu-sep { height: 1px; margin: 6px 4px; background: rgba(255,255,255,.08); }
/* the phone menu drops down from the top bar, like the sound and account popovers */
#s-menu { align-items: flex-start; justify-content: flex-end; padding: calc(var(--top) + 8px) 12px 0; background: rgba(4,3,14,.3);
  backdrop-filter: none; -webkit-backdrop-filter: none; animation: fade .2s; }
#s-menu .sheet { width: 100%; max-width: 300px; max-height: calc(100vh - var(--top) - 24px); padding: 8px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(46,34,112,.9), rgba(26,20,64,.9) 55%, rgba(66,22,68,.88)); border: 1px solid var(--stroke2);
  box-shadow: 0 24px 60px rgba(0,0,0,.5); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  animation: popIn .22s cubic-bezier(.3,1.4,.5,1); transform-origin: top right; scrollbar-gutter: auto; }
#s-menu .menu-item { padding: 12px 12px; font-size: 15px; }
#s-menu .menu-item svg.i { width: 19px; height: 19px; }
.how { color: #cfcbea; font-size: 15px; line-height: 1.6; } ol.how { padding-left: 20px; margin: 0; } .how li { margin-bottom: 10px; } .how b { color: #fff; }
/* forms */
.form { display: flex; flex-direction: column; gap: 12px; }
.sheet { scrollbar-gutter: stable; }
.sheet::-webkit-scrollbar { width: 12px; }
.sheet::-webkit-scrollbar-track { margin: 26px 0; }
.sheet::-webkit-scrollbar-thumb { border-width: 4px; }
.fld label { display: block; font-size: 12px; font-weight: 700; color: #d6d2f2; margin-bottom: 6px; }
.fld input { width: 100%; height: 50px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 0 14px; color: var(--text); font-size: 16px; outline: none; transition: border-color .2s; }
.fld input:focus { border-color: #a58fff; }
.fld input[readonly] { opacity: .6; }
.fld small { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #d6d2f2; }
.chk input { width: 18px; height: 18px; accent-color: var(--v); }
.form-err { min-height: 18px; font-size: 13px; font-weight: 700; color: #ff9aa4; margin: 0; }
.form-ok { color: var(--lime); }
.switch-line { text-align: center; font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.divider { height: 1px; background: rgba(255,255,255,.1); margin: 18px 0; }
.text-code { width: 100%; height: 60px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 0 16px; color: var(--text); font-family: var(--word); font-size: 26px; font-weight: 700; letter-spacing: 6px; text-align: center; outline: none; text-transform: uppercase; }
.text-code:focus { border-color: #a58fff; }
/* results */
.rh { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.rl-letter { width: 62px; height: 62px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 700; font-family: var(--word); flex: none; color: #fff;
  background: linear-gradient(180deg, #8b72ff, #6848ea); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 4px 0 #3d2aa3; }
.rh-title { font-size: 24px; font-weight: 900; letter-spacing: -.4px; }
.rrow { padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.08); opacity: 0; transform: translateY(10px); transition: all .4s cubic-bezier(.2,.9,.3,1); }
.rrow.show { opacity: 1; transform: none; }
.rrow .a { display: flex; align-items: center; gap: 12px; }
.rrow .fi { color: var(--fc); display: flex; }
.rrow .t { flex: 1; min-width: 0; }
.rrow .k { display: block; font-size: 11px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; font-weight: 800; }
.rrow .v { display: block; font-size: 18px; font-family: var(--word); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow .v.em { color: var(--dim); }
.rrow .oth { margin: 6px 0 0 32px; font-size: 12px; color: #c4c0e2; line-height: 1.7; }
.rrow .oth span { white-space: nowrap; margin-right: 12px; }
.stand { display: flex; flex-direction: column; gap: 8px; }
.st { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.2); }
.st.me { box-shadow: inset 0 0 0 1px rgba(255,77,141,.5); }
.st .pos { width: 22px; font-weight: 900; color: var(--muted); }
.st .ava { width: 32px; height: 32px; border-radius: 10px; font-size: 13px; }
.st .t { flex: 1; font-weight: 800; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st .t small { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }
.st .rp { font-size: 13px; font-weight: 800; color: var(--lime); }
.st .tot { font-size: 17px; font-weight: 900; min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
/* podium */
.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 10px; margin: 22px 0 18px; }
.pd { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.pd .ava { width: 52px; height: 52px; font-size: 20px; border-radius: 16px; }
.pd b { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd .col { width: 100%; height: 0; border-radius: 14px 14px 6px 6px; display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; font-size: 20px; font-weight: 900;
  transition: height 1s cubic-bezier(.2,.9,.3,1); background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); border: 1px solid var(--stroke); overflow: hidden; }
.pd.p1 .col { background: linear-gradient(180deg, rgba(255,207,77,.45), rgba(255,160,60,.06)); border-color: rgba(255,207,77,.5); }
.pd.p2 .col { background: linear-gradient(180deg, rgba(220,226,240,.35), rgba(200,210,230,.05)); }
.pd.p3 .col { background: linear-gradient(180deg, rgba(214,140,82,.4), rgba(214,140,82,.05)); }
.crown { font-size: 26px; animation: bob 2s ease-in-out infinite; }
.end { max-width: 620px; margin: 10px auto; padding: 28px 22px; text-align: center; }
.end .rest { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.empty { text-align: center; color: var(--muted); padding: 24px 0; }
.toast { position: fixed; top: calc(var(--top) + 14px); left: 50%; transform: translateX(-50%); z-index: 90; padding: 12px 18px; border-radius: 14px; background: #fff; color: #110f2b; font-weight: 800; font-size: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.4); animation: toast 2.8s forwards; max-width: calc(100vw - 32px); text-align: center; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -10px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

@media (min-width: 900px) {
  :root { --h: 190px; --top: 72px; }
  .page { padding: 32px 32px 60px; }
  .home { grid-template-columns: 1fr 1.15fr; align-items: start; }
  .hero { padding: 34px 32px; position: sticky; top: calc(var(--top) + 24px); }  .tile { width: 70px; height: 78px; font-size: 40px; border-radius: 18px; }
  .setup { padding: 28px; }
  .layout { grid-template-columns: 340px 1fr; align-items: start; gap: 22px; }
  .stage { grid-template-columns: 1fr; justify-items: center; text-align: center; position: sticky; top: calc(var(--top) + 20px); padding: 28px 24px; }
  .info { width: 100%; }
  .clock { font-size: 58px; }
  .actions { flex-direction: column; width: 100%; } .actions .btn { width: 100%; }
  .cats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .field { padding: 18px 20px 18px 18px; }
  .overlay { align-items: center; }
  .sheet { border-radius: 28px; padding-top: 26px; }
  .grab { display: none; }
}

.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }

/* loader icon inside the ring */
.cnt-ring span.ico { display: flex; animation: bob 1.4s ease-in-out infinite; color: #fff; text-shadow: none; }
.cnt-ring span.ico svg.i { width: 40px; height: 40px; stroke-width: 2; filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); }

/* connection bar */
.netbar { position: fixed; z-index: 70; top: calc(var(--top) + 10px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 24px); padding: 10px 16px; border-radius: 14px; font-size: 14px; font-weight: 800; color: #fff;
  box-shadow: 0 4px 0 rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.45); animation: nbIn .35s cubic-bezier(.3,1.4,.5,1); }
@keyframes nbIn { from { opacity: 0; transform: translate(-50%, -14px); } }
/* discreet notice: a player left, the game goes on */
.notice { position: fixed; z-index: 68; top: calc(var(--top) + 10px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px;
  max-width: calc(100vw - 32px); padding: 8px 15px 8px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.92);
  background: rgba(22,18,52,.72); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); pointer-events: none; animation: nbIn .4s cubic-bezier(.3,1.3,.5,1); transition: opacity .35s, transform .35s; }
.notice.out { opacity: 0; transform: translate(-50%, -10px); }
.notice #ntText { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notice .nt-ico { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,122,130,.18); color: #ff9aa1; }
.notice .nt-ico svg.i { width: 14px; height: 14px; stroke-width: 2.4; }
.netbar.offline { background: linear-gradient(180deg, #ff7a82, #e2384b); }
.netbar.busy { background: linear-gradient(180deg, #ffc24d, #e0901c); color: #2a1800; }
.netbar.ok { background: linear-gradient(180deg, #6ee7a0, #22b36b); color: #062414; }
.netbar .nb-ico { display: flex; } .netbar .nb-ico svg.i { width: 18px; height: 18px; stroke-width: 2.4; }
.netbar .nb-spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
.netbar.ok .nb-spin { display: none; }

/* spinner inside buttons */
.btn.loading, .menu-item.loading { pointer-events: none; }
.btn.loading > *, .btn.loading { color: transparent; text-shadow: none; }
.btn.loading > * { opacity: 0; }
.btn.loading::after, .menu-item.loading::after { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.95); border-right-color: transparent; animation: spin .7s linear infinite; }
.menu-item { position: relative; }
.menu-item.loading > * { opacity: .25; }
.menu-item.loading::after { left: auto; right: 14px; margin-left: 0; border-color: #ff8b95; border-right-color: transparent; }

/* skeleton rows (leaderboard / history) */
.st.skel { animation: in .4s ease backwards; }
.sk { display: block; border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.06) 100%);
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.sk-ava { width: 32px; height: 32px; border-radius: 10px; flex: none; }
.sk-line { flex: 1; height: 14px; }
.sk-num { width: 42px; height: 18px; flex: none; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* account placeholder until we know who is logged in */
.acct-skel { display: flex; align-items: center; gap: 8px; height: 46px; padding: 4px 12px 4px 4px; border-radius: 14px; border: 1px solid var(--stroke); background: var(--glass); }
.acct-skel i { width: 38px; height: 38px; border-radius: 12px; }
.acct-skel b { width: 64px; height: 12px; border-radius: 6px; }
.acct-skel i, .acct-skel b { background: linear-gradient(90deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.06) 100%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@media (max-width: 899px) { .acct-skel b { display: none; } .acct-skel { padding: 4px; } }

/* reel "breathing" while waiting for the host */
.reel.waiting { animation: breathe 1.8s ease-in-out infinite; }
.reel.waiting .cell { animation: bob 1.8s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: inset 0 0 0 2px rgba(255,255,255,.2), 0 0 0 6px rgba(124,92,255,.18), 0 16px 34px -10px rgba(0,0,0,.6); transform: scale(1.03); } }

@media (prefers-reduced-motion: reduce) {
  .sk, .acct-skel i, .acct-skel b, .reel.waiting, .reel.waiting .cell { animation: none; }
}
/* ================= MOBILE: everything fits the screen, no sideways scrolling ================= */
img, svg, canvas { max-width: 100%; }
@media (max-width: 899px) {
  /* popovers open as sheets under the top bar instead of hanging off the edge */
  .pop, .dd-top .dd-list { position: fixed; top: calc(var(--top) + 8px); left: 12px; right: 12px; width: auto; min-width: 0; transform-origin: top center; }
  /* the fixed Letter/Stop bar must be positioned against the screen: no blur/clip on its card */
  .stage.card { backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; background: linear-gradient(160deg, rgba(34,28,80,.96), rgba(20,16,50,.95)); }
  /* player chips wrap into a grid instead of a sideways strip */
  .players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; padding: 2px 0 10px; }
  .pc { min-width: 0; padding: 8px 10px; gap: 8px; }
  .pc .t b { max-width: none; }
  .pc .sc { font-size: 16px; }
}
@media (max-width: 520px) {
  .page { padding: 16px 12px 32px; }
  .top-in { gap: 6px; padding: 0 10px; }
  .icon-btn { width: 38px; height: 38px; border-radius: 12px; }
  .mini-tiles span { width: 19px; height: 23px; font-size: 11px; border-radius: 5px; }
  .dd-top .dd-btn { height: 38px; padding: 0 8px; gap: 4px; }
  #loginBtn { padding: 0 12px; font-size: 11px; letter-spacing: .4px; }
  .acct { padding: 3px; } .acct .ava { width: 32px; height: 32px; font-size: 13px; }
  .acct-skel { height: 40px; } .acct-skel i { width: 32px; height: 32px; }
  /* buttons may wrap long translations instead of overflowing */
  .btn { white-space: normal; text-align: center; line-height: 1.15; padding: 0 14px; font-size: 13px; letter-spacing: .5px; min-width: 0; }
  .btn-lg { font-size: 15px; }
  .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero { padding: 20px 16px; gap: 16px; }
  .tile { width: 52px; height: 58px; font-size: 28px; border-radius: 14px; }
  .tagline { font-size: 19px; }
  .setup { padding: 18px 14px; gap: 18px; }
  .lvl { gap: 6px; } .lv { font-size: 11px; gap: 5px; padding: 0 4px; min-width: 0; }
  .code { gap: 5px; } .code span { width: 38px; height: 50px; font-size: 24px; border-radius: 11px; } .code span.dash { width: 10px; }
  .room { padding: 20px 14px; }
  .stage { gap: 12px; padding: 14px; }
  .clock { font-size: 38px; }
  .field { gap: 10px; padding: 12px 12px 12px 12px; }
  .field .fi { width: 44px; height: 44px; border-radius: 14px; }
  .field input { font-size: 19px; }
  .field::after { font-size: 84px; right: 10px; bottom: -20px; }
  .sheet { padding-left: 14px; padding-right: 14px; }
  .rrow .oth { margin-left: 0; }
  .end { padding: 22px 14px; }
  .pd .ava { width: 44px; height: 44px; font-size: 17px; }
  .toast { font-size: 13px; }
}
@media (max-width: 370px) {
  .mini-tiles span:nth-child(n+3) { display: none; }
  .tiles { gap: 6px; } .tile { width: 46px; height: 52px; font-size: 25px; }
  .code span { width: 34px; height: 46px; font-size: 21px; }
}
/* focus ring only for keyboard users — never after a tap or a click */
:focus { outline: none; }
:focus-visible { outline: 2px solid #b3a2ff; outline-offset: 3px; border-radius: 12px; }
input:focus-visible, .field input:focus-visible, .text-code:focus-visible, .fld input:focus-visible { outline: none; }
.kswitch:focus-visible { outline: none; }
.kswitch:focus-visible .ks-track { box-shadow: inset 0 3px 6px rgba(0,0,0,.45), 0 0 0 3px rgba(179,162,255,.6); }
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 7px rgba(179,162,255,.45), 0 3px 8px rgba(0,0,0,.4); }
/* touch screens have no real hover: stop hover styles from sticking after a tap */
@media (hover: none) {
  .card::before { display: none; }
  .btn:hover { filter: none; transform: none; }
  .lv:not(.on):hover { color: var(--muted); border-color: rgba(255,255,255,.08); }
  .icon-btn:hover { background: var(--glass); border-color: var(--stroke); }
  .dd-btn:hover { border-color: var(--stroke); background: var(--glass); }
  .nav button:hover { color: var(--muted); background: none; }
  .acct:hover { background: var(--glass); }
  .dd-list li:hover, .menu-item:hover { background: none; }
}
/* mobile: no tap highlight, no text selection and no light effects on the setup controls */
* { -webkit-tap-highlight-color: transparent; }
.kswitch, .lv, .seat-row, .rng, .ticks, .blk { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (max-width: 899px) {
  .card::before { display: none !important; }
  .setup .rng input { -webkit-tap-highlight-color: transparent; outline: none !important; }
  .setup .rng input::-webkit-slider-thumb { -webkit-tap-highlight-color: transparent; }
}
/* ================= TURNS, STOP COUNTDOWN, WORD CHECK ================= */
/* language of the words (room / game) */
.words-in { align-self: center; display: inline-flex; align-items: center; gap: 6px; margin: 0 auto; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800;
  color: #cfc4ff; background: rgba(124,92,255,.16); border: 1px solid rgba(124,92,255,.3); }
.info .words-in { margin-top: 10px; }
/* letters played in this game */
.played { margin-top: 12px; }
.played .label { display: block; margin-bottom: 6px; }
.pl-list { display: flex; flex-wrap: wrap; gap: 5px; }
@media (min-width: 900px) { .pl-list { justify-content: center; } }
.pl-list span { min-width: 26px; height: 28px; padding: 0 6px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--word);
  font-size: 15px; font-weight: 700; color: #cfcbea; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); animation: popIn .3s cubic-bezier(.3,1.4,.5,1) backwards; }
.pl-list span.now { color: #2a1800; background: linear-gradient(180deg, #ffe08a, #ffc24d); border-color: transparent; box-shadow: 0 2px 0 #b86a1f; }
/* your turn: the Letter button breathes and an arrow says "tap" */
.spin-wrap { position: relative; display: flex; }
.spin-wrap .btn { flex: 1; }
.tap-hint { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 2; display: none; flex-direction: column; align-items: center; gap: 1px;
  transform: translateX(-50%); color: #ffd76a; pointer-events: none; }
.tap-hint b { font-size: 11px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; color: #2a1800;
  background: linear-gradient(180deg, #ffe08a, #ffc24d); box-shadow: 0 2px 0 #b86a1f; white-space: nowrap; }
.tap-hint svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.spin-wrap.my-turn .tap-hint { display: flex; animation: tapBob 1.2s ease-in-out infinite; }
.spin-wrap.my-turn .btn { animation: turnGlow 1.6s ease-in-out infinite; }
@keyframes tapBob { 50% { transform: translate(-50%, 6px); } }
@keyframes turnGlow { 50% { filter: brightness(1.15); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -4px 0 rgba(0,0,0,.18), 0 6px 0 var(--edge), 0 0 0 6px rgba(162,141,255,.28), 0 0 34px rgba(124,92,255,.55); } }
@media (min-width: 900px) { .spin-wrap { width: 100%; } .actions .spin-wrap { margin-top: 30px; } }
@media (max-width: 899px) { .stage .actions .spin-wrap { flex: 1; } }
/* STOP stays clickable but looks muted until every category is filled */
/* STOP: fills with a wavy red liquid as the categories are done; full = gold edge + a shine passing */
.stop-btn { --edge: #4a0f1e; --fill: 0%; overflow: hidden; background: #5e1628; justify-content: center; gap: 12px; }
.stop-btn::before { display: none; }
.stop-btn .sb-fill { position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: var(--fill); background: #ff4d5e; transition: width .55s cubic-bezier(.3,1.2,.5,1); }
.stop-btn .sb-fill::after { content: ''; position: absolute; top: 0; bottom: 0; right: -11px; width: 12px; animation: sbWave 1.1s linear infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24'%3E%3Cpath d='M0 0h5c9 6-7 18 1 24H0z' fill='%23ff4d5e'/%3E%3C/svg%3E") repeat-y; }
.stop-btn[style*="--fill: 0%"] .sb-fill::after { display: none; }
@keyframes sbWave { to { background-position: 0 24px; } }
.stop-btn .sb-fill i { position: absolute; bottom: -8px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.35); animation: sbBub 2.4s ease-in infinite; }
.stop-btn .sb-fill i:nth-child(1) { right: 18%; } .stop-btn .sb-fill i:nth-child(2) { right: 42%; width: 4px; height: 4px; animation-delay: .8s; }
.stop-btn .sb-fill i:nth-child(3) { right: 66%; width: 5px; height: 5px; animation-delay: 1.5s; }
@keyframes sbBub { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-64px); opacity: 0; } }
.stop-btn .sb-gloss { position: absolute; z-index: 1; left: 10px; right: 10px; top: 5px; height: 36%; border-radius: 12px 12px 18px 18px / 10px 10px 16px 16px;
  background: linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,0)); pointer-events: none; overflow: hidden; }
.stop-btn .sb-label, .stop-btn .sb-count { position: relative; z-index: 2; }
.stop-btn .sb-label { letter-spacing: 3px; }
.stop-btn .sb-count { padding: 3px 9px; border-radius: 999px; font-size: 12px; letter-spacing: .5px; background: rgba(255,255,255,.14); text-shadow: none; transition: background .3s, color .3s; }
.stop-btn.full { box-shadow: inset 0 0 0 2px #ffcf4d, inset 0 -4px 0 rgba(0,0,0,.18), 0 6px 0 var(--edge), 0 0 22px rgba(255,207,77,.35); }
.stop-btn.full .sb-count { background: #a6f56b; color: #173404; }
.stop-btn.full .sb-gloss { top: 0; bottom: 0; height: auto; left: 0; right: 0; border-radius: inherit; background: none; }
.stop-btn.full .sb-gloss::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -50%; transform: skewX(-20deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0)); animation: sbShine 2.2s ease-in-out infinite; }
@keyframes sbShine { 0% { left: -50%; } 60%, 100% { left: 130%; } }
.stop-btn.full:active { box-shadow: inset 0 0 0 2px #ffcf4d, 0 1px 0 var(--edge); }
@media (prefers-reduced-motion: reduce) { .stop-btn .sb-fill::after, .stop-btn .sb-fill i, .stop-btn.full .sb-gloss::after { animation: none; } }
/* calm countdown after someone hits STOP (never steals focus) */
.stopbar { position: fixed; z-index: 69; top: calc(var(--top) + 10px); left: 50%; transform: translateX(-50%); width: min(440px, calc(100vw - 24px)); pointer-events: none;
  padding: 11px 14px 12px; border-radius: 18px; color: #fff; background: rgba(28,16,44,.86); border: 1.5px solid rgba(255,112,128,.55);
  box-shadow: 0 0 0 4px rgba(255,77,94,.12), 0 18px 40px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: nbIn .4s cubic-bezier(.3,1.3,.5,1); }
.sb-top { display: flex; align-items: center; gap: 11px; }
.sb-ico { width: 30px; height: 30px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, #ff8a8f, #e02c47); box-shadow: 0 2px 0 #8f1631; animation: stopPulse 1s ease-in-out infinite; }
.sb-ico svg.i { width: 14px; height: 14px; }
.sb-txt { min-width: 0; display: flex; flex-direction: column; }
.sb-txt b { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-txt span { font-size: 12px; color: #ffb3ba; font-weight: 700; font-variant-numeric: tabular-nums; }
.sb-bar { height: 6px; margin-top: 10px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.sb-bar i { display: block; height: 100%; border-radius: 3px; transform-origin: left center; background: linear-gradient(90deg, #ff4d5e, #ffb347); }
/* word check */
.rv-note { margin: 0 0 8px; }
.rv-row { padding: 10px 0; }
.rv-k { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: color-mix(in srgb, var(--fc) 75%, #fff); margin-bottom: 7px; }
.rv-k .fi { display: flex; color: var(--fc); } .rv-k .fi svg.i { width: 16px; height: 16px; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.rw { position: relative; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; padding: 6px 11px 6px 9px; border-radius: 12px; font-family: var(--word);
  font-size: 15px; font-weight: 700; color: var(--text); background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.1); line-height: 1.2; }
.rw > i { width: 8px; height: 8px; border-radius: 50%; background: var(--pc); flex: none; }
.rw small { font-family: 'Inter', system-ui, sans-serif; font-size: 10px; font-weight: 800; color: var(--muted); letter-spacing: .3px; }
.rw span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw.own { border-color: color-mix(in srgb, var(--pc) 45%, transparent); }
.rw.empty { color: var(--dim); }
.rw.bad { color: #ff9aa4; text-decoration: line-through; text-decoration-thickness: 2px; opacity: .8; }
.rw.vote { cursor: pointer; transition: background .2s, border-color .2s, transform .15s; }
.rw.vote:active { transform: scale(.96); }
.rw.vote em { display: none; width: 18px; height: 18px; border-radius: 50%; place-items: center; background: var(--red); color: #fff; flex: none; }
.rw.vote em svg.i { width: 11px; height: 11px; stroke-width: 3.2; }
.rw.vote.rej { background: rgba(255,77,94,.14); border-color: rgba(255,77,94,.6); }
.rw.vote.rej span { text-decoration: line-through; text-decoration-thickness: 2px; color: #ffb3ba; }
.rw.vote.rej em { display: grid; }
.rw.vote:disabled { cursor: default; opacity: .75; }
@media (hover: hover) { .rw.vote:not(:disabled):hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); } }
.rv-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 16px 0 14px; }
.rv-who { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-who .ava { width: 34px; height: 34px; font-size: 13px; border-radius: 11px; opacity: .45; transition: opacity .3s, transform .3s; }
.rv-who .ava.ok { opacity: 1; animation: bump .5s cubic-bezier(.3,1.8,.5,1); }
.rv-who .ava b { position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: #0b2a00; border: 2px solid #1c1540; }
.rv-who .ava b svg.i { width: 10px; height: 10px; stroke-width: 3.4; }
.rv-time { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
/* room: drop an empty seat */
.seat .seat-x { width: 40px; height: 40px; border-radius: 13px; color: var(--muted); }
.seat .seat-x svg.i { width: 16px; height: 16px; }
@media (hover: hover) { .seat .seat-x:hover { color: #ff9aa4; border-color: rgba(255,77,94,.4); background: rgba(255,77,94,.1); } }
@media (max-width: 520px) { .seat { flex-wrap: wrap; } .seat .t { flex: 1 1 60%; } .seat .btn-sm { margin-left: auto; } }
@media (prefers-reduced-motion: reduce) {
  .spin-wrap.my-turn .tap-hint, .spin-wrap.my-turn .btn, .sb-ico { animation: none; }
}
/* time left for the player who draws the letter */
.turn-time { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.turn-time i { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.turn-time b { display: block; height: 100%; border-radius: 2px; transform-origin: left center; background: linear-gradient(90deg, var(--c), var(--v)); transition: transform .25s linear; }
.turn-time.low { color: #ffb3ba; }
.turn-time.low b { background: linear-gradient(90deg, #ff4d5e, #ffb347); }
/* categories: one row in the setup, the choice opens in a sheet */
.cat-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; text-align: left; color: var(--text);
  background: rgba(0,0,0,.2); border: 1px solid var(--stroke); transition: border-color .2s, background .2s, transform .15s; -webkit-user-select: none; user-select: none; }
.cat-row:active { transform: scale(.985); }
@media (hover: hover) { .cat-row:hover { border-color: var(--stroke2); background: rgba(255,255,255,.04); } }
.cat-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cat-row .t b { font-size: 14px; }
.cat-row .t span { font-size: 12px; color: var(--muted); font-weight: 700; }
.cr-ico { display: flex; flex: none; max-width: 46%; overflow: hidden; padding-left: 6px; }
.cr-ico i { width: 26px; height: 26px; margin-left: -6px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff;
  background: linear-gradient(160deg, var(--fc), color-mix(in srgb, var(--fc) 60%, #1a1040)); border: 2px solid #1b1642; }
.cr-ico i svg.i { width: 13px; height: 13px; stroke-width: 2.4; }
.cr-chev { color: var(--muted); width: 18px; height: 18px; transition: transform .2s; }
@media (hover: hover) { .cat-row:hover .cr-chev { transform: translateX(3px); } }
/* the list in the sheet, with animated check boxes */
.cat-list { display: flex; flex-direction: column; gap: 8px; }
.cp { --fc: #9b85ff; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 15px; text-align: left; color: var(--muted);
  font-size: 15px; font-weight: 800; background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.07);
  transition: color .25s, background .25s, border-color .25s, transform .2s cubic-bezier(.3,1.6,.5,1);
  animation: in .45s cubic-bezier(.2,.9,.3,1) backwards; animation-delay: var(--d); -webkit-user-select: none; user-select: none; }
.cp:active { transform: scale(.98); }
.cp-ico { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; opacity: .45;
  background: linear-gradient(160deg, var(--fc), color-mix(in srgb, var(--fc) 60%, #1a1040)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
  transition: opacity .25s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.cp-ico svg.i { width: 19px; height: 19px; }
.cp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-box { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.25); transition: background .25s, border-color .25s, transform .35s cubic-bezier(.3,1.8,.5,1); }
.cp-box svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .3s .05s ease-out; }
.cp.on { color: #fff; border-color: color-mix(in srgb, var(--fc) 45%, transparent); background: color-mix(in srgb, var(--fc) 12%, rgba(0,0,0,.2)); }
.cp.on .cp-ico { opacity: 1; transform: scale(1.04); }
.cp.on .cp-box { background: var(--fc); border-color: var(--fc); transform: scale(1.08); box-shadow: 0 2px 0 color-mix(in srgb, var(--fc) 40%, #000); }
.cp.on .cp-box svg { stroke-dashoffset: 0; }
@media (hover: hover) { .cp:not(.on):hover { color: var(--text); border-color: rgba(255,255,255,.16); } }
@media (prefers-reduced-motion: reduce) { .cp { animation: none; } }

/* history: period filter, rows, loading more */
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 14px;
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); }
.seg button { height: 34px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-size: 13px; font-weight: 800; transition: background .2s, color .2s; }
.seg button.on { background: rgba(124,92,255,.35); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
@media (hover: hover) { .seg button:not(.on):hover { color: var(--text); } }
.hist-row { animation: in .35s cubic-bezier(.2,.9,.3,1) backwards; }
.hist-row .pos { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: rgba(255,255,255,.07); color: var(--muted); flex: none; }
.hist-row .pos.p1 { background: rgba(255,207,77,.2); color: var(--gold); }
.hist-row .pos.p2 { background: rgba(220,226,240,.16); color: #dfe4f2; }
.hist-row .pos.p3 { background: rgba(214,140,82,.2); color: #e9a26b; }
.hist-row .tot { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.hist-row .tot small { font-size: 10px; font-weight: 700; color: var(--muted); }
.hist-more { display: flex; justify-content: center; padding: 14px 0 4px; color: var(--muted); }
.res-note { margin: 12px 0 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }

/* level: line + progress in the account menu, milestone sheet, notice colours */
.lvl-line { margin: -2px 0 8px; padding: 0 2px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.lvl-txt { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.lvl-txt b { font-size: 13px; color: var(--gold); }
.lvl-txt span { font-size: 11px; color: var(--muted); text-align: right; }
.lvl-line i { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.lvl-line i b { display: block; height: 100%; border-radius: 3px; transform-origin: left center; background: linear-gradient(90deg, #ffcf4d, #ff8a5c); transition: transform .5s; }
/* the new level: a gold medal on turning light, like the leaderboard's window (a title row and ✕, no big button) */
.lvl-sheet { text-align: center; }
.lvl-sheet .sh h2 { background: linear-gradient(90deg, #fff3c4, #ffcf4d 60%, #ff9d5c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lvl-hero { position: relative; width: 190px; height: 170px; margin: 0 auto 6px; display: grid; place-items: center; }
.lvl-rays { position: absolute; inset: 0; border-radius: 50%; opacity: .55;
  background: repeating-conic-gradient(from 0deg, rgba(255,207,77,.35) 0 9deg, transparent 9deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%); mask: radial-gradient(circle, #000 25%, transparent 70%); animation: lvlSpin 18s linear infinite; }
.lvl-ring { position: absolute; width: 132px; height: 132px; border-radius: 50%; border: 2px solid rgba(255,207,77,.45); animation: lvlRing 2.4s ease-out infinite; }
.lvl-big { position: relative; width: 112px; height: 112px; border-radius: 50%; display: grid; place-content: center; gap: 0;
  background: radial-gradient(circle at 35% 28%, #fff4c6, #ffcf4d 45%, #e09422 75%, #a9640f);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.28), inset 0 -8px 14px rgba(120,60,0,.35), 0 0 0 6px rgba(255,207,77,.14), 0 18px 36px rgba(0,0,0,.5), 0 0 40px rgba(255,190,70,.35);
  animation: lvlPop .7s cubic-bezier(.3,1.6,.5,1); }
.lvl-big::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; border: 1.5px dashed rgba(122,70,8,.45); }
.lvl-big small { font-size: 10px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: #6b3f06; line-height: 1; }
.lvl-big span { font-family: var(--word); font-size: 46px; font-weight: 700; line-height: 1; color: #3a2400; text-shadow: 0 2px 0 rgba(255,255,255,.45); }
@keyframes lvlPop { 0% { transform: scale(.3) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.12) rotate(6deg); opacity: 1; } }
@keyframes lvlSpin { to { transform: rotate(360deg); } }
@keyframes lvlRing { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.lvl-text { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.lvl-bonus { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 9px 16px; border-radius: 14px;
  background: rgba(255,207,77,.1); border: 1px solid rgba(255,207,77,.35); animation: lvlIn .5s .35s cubic-bezier(.3,1.4,.5,1) backwards; }
.lvl-bonus.hidden { display: none; }
.lvl-bonus b { font-size: 20px; font-weight: 900; color: #ffe08a; font-variant-numeric: tabular-nums; }
.lvl-bonus small { font-size: 12px; font-weight: 700; color: var(--muted); }
.lvl-coin { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, #ffc94d 55%, #c9871b);
  box-shadow: inset 0 0 0 2px rgba(122,70,8,.35), 0 2px 4px rgba(0,0,0,.4); }
@keyframes lvlIn { from { transform: translateY(10px) scale(.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lvl-rays, .lvl-ring, .lvl-big, .lvl-bonus { animation: none; } }
.notice[data-ico="star"] .nt-ico { background: rgba(255,207,77,.2); color: var(--gold); }
.notice[data-ico="server"] .nt-ico { background: rgba(255,194,77,.16); color: #ffc24d; }

/* phone: sheets with a text field open near the top, so the keyboard never covers their button */
@media (max-width: 899px) {
  #s-join, #s-nick { align-items: flex-start; padding: calc(var(--top) + 10px) 12px 0; }
  #s-join .sheet, #s-nick .sheet { border-radius: 24px; padding-top: 18px; padding-bottom: 18px; max-height: calc(100vh - var(--top) - 20px);
    animation: popIn .26s cubic-bezier(.3,1.4,.5,1); transform-origin: top center; }
  #s-join .grab, #s-nick .grab { display: none; }
}
/* home: "create an account" line, with a softly highlighted Sign up on the right */
.guest-note { justify-content: space-between; padding: 10px 10px 10px 14px; border-radius: 16px;
  background: rgba(124,92,255,.08); border: 1px solid rgba(124,92,255,.2); }
.guest-note span { flex: 1 1 170px; line-height: 1.4; }
.guest-note .link { margin-left: auto; flex: none; padding: 8px 16px; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 800; text-decoration: none;
  border: 1.5px solid transparent; background: linear-gradient(rgba(36,28,86,.96), rgba(36,28,86,.96)) padding-box, linear-gradient(100deg, #9b85ff, #ff5a94) border-box;
  box-shadow: 0 6px 16px -8px rgba(255,77,141,.7); transition: transform .15s, box-shadow .2s, background .2s; }
.guest-note .link:active { transform: scale(.96); }
@media (hover: hover) {
  .guest-note .link:hover { text-decoration: none; box-shadow: 0 8px 20px -8px rgba(255,77,141,.9);
    background: linear-gradient(rgba(52,40,112,.96), rgba(52,40,112,.96)) padding-box, linear-gradient(100deg, #b3a2ff, #ff7aa9) border-box; }
}

/* room: categories of this room (chip, tap to see the names) */
.room-cats { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rc-btn { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; border-radius: 999px; color: var(--text);
  background: rgba(0,0,0,.22); border: 1px solid var(--stroke); font-size: 12px; transition: border-color .2s, background .2s; }
.rc-btn b { font-weight: 800; }
.rc-ico { display: flex; padding-left: 6px; }
.rc-ico i { width: 22px; height: 22px; margin-left: -6px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, var(--fc), color-mix(in srgb, var(--fc) 60%, #1a1040)); border: 2px solid #1b1642; }
.rc-ico i svg.i { width: 11px; height: 11px; stroke-width: 2.4; }
.rc-chev { width: 16px; height: 16px; color: var(--muted); transition: transform .25s; }
.rc-btn.open .rc-chev { transform: rotate(180deg); }
@media (hover: hover) { .rc-btn:hover { border-color: var(--stroke2); } }
.rc-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 460px; animation: popIn .22s cubic-bezier(.3,1.4,.5,1); }
.rc-list span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--fc) 14%, rgba(0,0,0,.2)); border: 1px solid color-mix(in srgb, var(--fc) 40%, transparent); }
.rc-list span svg.i { width: 13px; height: 13px; color: var(--fc); }

/* word check: reasons and objections */
.rw[data-n].contested { border-color: rgba(255,77,94,.55); }
.rw.contested::after { content: attr(data-n); position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: grid; place-items: center; font-family: 'Inter', system-ui, sans-serif; font-size: 10px; font-weight: 900; color: #fff; background: var(--red); border: 2px solid #1c1540; }
.rv-why { margin-top: 10px; padding: 10px; border-radius: 14px; background: rgba(255,77,94,.08); border: 1px solid rgba(255,77,94,.3); animation: popIn .22s cubic-bezier(.3,1.4,.5,1); }
.why-q { display: block; font-size: 12px; font-weight: 800; color: #ffb3ba; margin-bottom: 8px; }
.why-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.why { padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--muted); background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.1);
  transition: background .2s, color .2s, border-color .2s; }
.why.on { color: #fff; background: rgba(255,77,94,.35); border-color: rgba(255,77,94,.7); }
.why-txt { width: 100%; margin-top: 8px; height: 40px; padding: 0 12px; border-radius: 12px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.14);
  color: var(--text); font-size: 16px; outline: none; }
.why-txt:focus { border-color: #ff8b95; }
.rv-obj { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.rv-obj:empty { display: none; }
.obj, .rr-obj span { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 12px; color: #ffb3ba; }
.obj svg.i, .rr-obj svg.i { width: 12px; height: 12px; stroke-width: 3; color: var(--red); }
.obj s, .rr-obj s { color: #fff; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.obj em { font-style: normal; color: var(--muted); }
.rr-obj { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 0 32px; }
@media (max-width: 520px) { .rr-obj { margin-left: 0; } }

/* phone menu: your card on top */
.menu-acct { padding: 6px 6px 0; }
.menu-acct .acct-head { padding-bottom: 12px; margin-bottom: 10px; }
.menu-acct .lvl-line { margin-bottom: 6px; }

/* account settings: tabs, folding sections, compact buttons */
.set-tabs { margin-bottom: 16px; }
.set-pane { display: flex; flex-direction: column; gap: 12px; animation: fade .2s; }
.set-actions { display: flex; justify-content: flex-end; }
.sheet .set-actions .btn, .sheet .set-row .btn { width: auto; min-width: 120px; }
.acc, .set-row { border-radius: 16px; background: rgba(0,0,0,.2); border: 1px solid var(--stroke); }
.acc summary, .set-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.acc summary { list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc-ico { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #cfc4ff; background: rgba(124,92,255,.18); }
.acc-ico svg.i { width: 18px; height: 18px; }
.acc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.acc-t b { font-size: 14px; }
.acc-t small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.acc-chev { width: 18px; height: 18px; color: var(--muted); transition: transform .25s; }
.acc[open] .acc-chev { transform: rotate(180deg); }
.acc[open] summary { border-bottom: 1px solid rgba(255,255,255,.07); }
.acc > .form { padding: 14px; animation: fade .25s; }
.acc-danger .acc-ico { color: #ff8b95; background: rgba(255,77,94,.15); }
.acc-danger[open] { border-color: rgba(255,77,94,.35); }
@media (max-width: 520px) {
  .set-row { flex-wrap: wrap; }
  .set-row .acc-t { flex-basis: calc(100% - 48px); }
  .sheet .set-row .btn { margin-left: 48px; }
}

/* word check: one card per contested word (objections, the author's answer, the host's call) */
.oc { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: rgba(255,77,94,.07); border: 1px solid rgba(255,77,94,.28);
  animation: popIn .22s cubic-bezier(.3,1.4,.5,1); }
.oc-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; }
.oc-h s { font-family: var(--word); font-weight: 700; color: #fff; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.oc-h span { font-size: 12px; color: var(--muted); }
.oc-l { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; font-size: 13px; color: #ffc7cc; line-height: 1.4; }
.oc-l svg.i { width: 12px; height: 12px; stroke-width: 3; color: var(--red); align-self: center; }
.oc-l.re { color: #9fe1cb; }
.oc-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 4px; }
.oc-act > span { font-size: 12px; font-weight: 800; color: var(--muted); margin-right: 2px; }
.reply-txt { width: 100%; height: 38px; padding: 0 12px; border-radius: 12px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.14);
  color: var(--text); font-size: 16px; outline: none; }
.reply-txt:focus { border-color: #2de0c4; }
.vbtn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--muted);
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.12); transition: background .2s, color .2s, border-color .2s; }
.vbtn svg.i { width: 13px; height: 13px; stroke-width: 3; }
.vbtn.keep.on { color: #0b2a00; background: var(--lime); border-color: var(--lime); }
.vbtn.cut.on { color: #fff; background: var(--red); border-color: var(--red); }
.vd { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 9px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 900; }
.vd svg.i { width: 11px; height: 11px; stroke-width: 3.2; }
.vd.keep { background: rgba(166,245,107,.18); color: var(--lime); }
.vd.cut { background: rgba(255,77,94,.2); color: #ff9aa4; }
.oc-wait { font-size: 11px; font-weight: 700; color: var(--muted); }
.rv-obj { gap: 8px; }
/* results: the next letter starts by itself */
.res-next { margin: 10px 0 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.res-next:empty { display: none; }

/* ================= PUBLIC ROOMS, REQUESTS, START COUNTDOWN, CHAT, ONLINE ================= */
/* home: live numbers, up front */
.live-strip { grid-column: 1 / -1; position: relative; display: flex; align-items: stretch; gap: 10px; padding: 12px; border-radius: 24px;
  background: linear-gradient(120deg, rgba(166,245,107,.1), rgba(124,92,255,.14) 45%, rgba(255,77,141,.1)); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 34px -20px rgba(0,0,0,.9); animation: in .45s cubic-bezier(.2,.9,.3,1) backwards; }
.live-strip.hidden { display: none; }
.live-tag { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 900;
  letter-spacing: 1px; text-transform: uppercase; color: #0f2a05; background: var(--lime); box-shadow: 0 3px 0 #3f7a1c; }
.live-tag i { width: 8px; height: 8px; border-radius: 50%; background: #e0303f; box-shadow: 0 0 0 3px rgba(224,48,63,.25); animation: liveBlink 1.2s ease-in-out infinite; }
@keyframes liveBlink { 50% { opacity: .25; } }
/* each box: icon on the left, the number, and what it is underneath */
.lsi { --lc: #b9a9ff; flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 1px; align-items: center;
  padding: 10px 14px; border-radius: 16px; text-align: left; background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.08); color: var(--text); font: inherit; }
.lsi.hidden { display: none; }
.lsi em { grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--lc);
  background: color-mix(in srgb, var(--lc) 16%, transparent); }
.lsi em svg.i { width: 20px; height: 20px; }
.lsi b { font-size: 24px; font-weight: 900; line-height: 1.05; letter-spacing: -.5px; color: var(--lc); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lsi span { font-size: 12px; font-weight: 800; color: #d6d2f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lsi-on { --lc: var(--lime); } .lsi-rooms { --lc: #b9a9ff; } .lsi-games { --lc: var(--gold); } .lsi-words { --lc: #7fd3ff; }
button.lsi { cursor: pointer; transition: transform .15s, border-color .15s; }
button.lsi:active { transform: scale(.97); }
@media (hover: hover) { button.lsi:hover { border-color: rgba(255,255,255,.28); transform: translateY(-2px); } }
@media (max-width: 640px) {
  .live-strip { flex-wrap: wrap; gap: 8px; padding: 14px 10px 10px; margin-top: 8px; border-radius: 20px; }
  .live-tag { position: absolute; top: -10px; left: 14px; padding: 4px 10px; font-size: 10px; }
  .lsi { flex: 1 1 calc(50% - 4px); padding: 10px; column-gap: 8px; }
  .lsi em { width: 32px; height: 32px; border-radius: 10px; }
  .lsi em svg.i { width: 17px; height: 17px; }
  .lsi b { font-size: 19px; }
  .lsi span { font-size: 11px; }
}
/* home: the "Open rooms" button, with a live count */
.mr-rooms .mr-ico { color: var(--lime); background: rgba(166,245,107,.14); }
.mr-badge { flex: none; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 13px; font-weight: 900; color: #0f2a05; background: var(--lime); box-shadow: 0 0 0 3px rgba(166,245,107,.2); animation: onPulse 2s ease-in-out infinite; }
.mr-badge.hidden { display: none; }
@media (hover: hover) { .mr-rooms:hover { border-color: rgba(166,245,107,.45); background: rgba(166,245,107,.06); } }
/* centered modals (not a drawer from the bottom), on every screen */
.overlay.modal { align-items: center; padding: 16px; }
.overlay.modal .sheet { border-radius: 26px; padding: 22px; animation: popIn .28s cubic-bezier(.3,1.3,.5,1); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
/* the rooms modal: big, cards in a grid, the list scrolls inside */
#s-rooms .sheet.rooms-sheet { max-width: 1080px; height: min(86vh, 900px); max-height: none; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 0; }
.rm-head { display: flex; align-items: center; gap: 12px; }
.rm-head h2 { margin: 0; flex: 1; min-width: 0; font-size: 24px; font-weight: 900; letter-spacing: -.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-ico { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; color: #0f2a05;
  background: linear-gradient(180deg, #c8ff9a, #7fd84a); box-shadow: 0 3px 0 #3f7a1c, inset 0 1px 0 rgba(255,255,255,.5); }
.rm-ico svg.i { width: 22px; height: 22px; stroke-width: 2.4; }
.rm-head .online-chip.hidden { display: none; }
.rooms-sheet .rooms-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rooms-sheet .seg { margin: 0; }
.rooms-sheet .seg small { opacity: .7; font-weight: 900; margin-left: 2px; }
.rm-new { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border-radius: 18px; text-align: left; color: var(--text); font: inherit; cursor: pointer;
  background: rgba(166,245,107,.07); border: 1.5px dashed rgba(166,245,107,.45); transition: background .15s, border-color .15s, transform .1s; }
.rm-new:active { transform: scale(.99); }
@media (hover: hover) { .rm-new:hover { background: rgba(166,245,107,.13); border-color: rgba(166,245,107,.75); } }
.rm-plus { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #0f2a05; background: var(--lime); box-shadow: 0 3px 0 #3f7a1c; }
.rm-plus svg.i { width: 20px; height: 20px; stroke-width: 3; }
.rm-new .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rm-new b { font-size: 15px; font-weight: 900; }
.rm-new small { font-size: 12px; font-weight: 600; color: var(--muted); }
@media (max-width: 640px) { .rm-new { padding: 8px 12px; } .rm-new small { display: none; } .rm-plus { width: 32px; height: 32px; } }
/* games page: a friend's code, next to the live numbers and next to "open a public table" */
.lsi-code { --lc: #7fd3ff; grid-template-columns: auto minmax(0, 1fr); }
/* (its words go on a second line when the box is narrow: never out of its border, in any language) */
.lsi-code b { font-size: 16px; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
.rm-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.rm-new.rm-code { background: rgba(127,211,255,.07); border-color: rgba(127,211,255,.45); }
.rm-code .rm-plus { color: #06283a; background: #7fd3ff; box-shadow: 0 3px 0 #2c7aa6; }
@media (hover: hover) { .rm-new.rm-code:hover { background: rgba(127,211,255,.13); border-color: rgba(127,211,255,.75); } }
@media (max-width: 640px) { .lsi-code b { font-size: 14px; } .rm-acts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } }
.rooms-body { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -14px; padding: 4px 14px 22px; scrollbar-gutter: stable; }
.rooms-body::-webkit-scrollbar { width: 12px; }
.rooms-body::-webkit-scrollbar-thumb { border-width: 4px; }
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.rooms-grid .empty { grid-column: 1 / -1; padding: 60px 10px; }
/* one room card */
.rcard { --sc: var(--lime); position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 20px; cursor: pointer; outline: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--col) 16%, rgba(0,0,0,.25)), rgba(0,0,0,.28)); border: 1.5px solid rgba(255,255,255,.1);
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.8); transition: transform .18s cubic-bezier(.3,1.4,.5,1), border-color .18s, box-shadow .18s;
  animation: popIn .35s cubic-bezier(.3,1.3,.5,1) backwards; }
.rcard::before { content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--sc); opacity: .9; }
.rcard.s-full { --sc: var(--red); }
.rcard.s-playing { --sc: var(--gold); }
.rcard.s-private { --sc: #a9a4d6; }
.rcard.s-full, .rcard.s-playing, .rcard.s-private { opacity: .86; }
.rcard.s-private .rc-st, .rc-st.s-private { --sc: #a9a4d6; }
.rcard.mine { border-color: rgba(166,245,107,.6); }
.rcard:focus-visible { border-color: #a58fff; }
.rcard:active { transform: scale(.985); }
@media (hover: hover) { .rcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--sc) 55%, transparent); box-shadow: 0 18px 34px -16px rgba(0,0,0,.9); opacity: 1; } }
.rc-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rc-top .ava { width: 42px; height: 42px; border-radius: 14px; font-size: 17px; flex: none; }
.rc-host { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-host b { font-size: 15px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-host small { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-st { --sc: var(--lime); flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 900;
  color: var(--sc); background: color-mix(in srgb, var(--sc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 40%, transparent); }
.rc-st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sc); }
.rcard.s-free .rc-st::before, .rc-st.s-free::before { animation: onPulse 2s ease-in-out infinite; }
.rcard.s-full .rc-st, .rc-st.s-full { --sc: var(--red); }
.rcard.s-playing .rc-st, .rc-st.s-playing { --sc: var(--gold); }
.rc-seats { display: flex; align-items: center; gap: 10px; }
.rc-dots { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; }
.rc-dots i { width: 14px; height: 14px; border-radius: 5px; background: rgba(255,255,255,.08); border: 1.5px dashed rgba(255,255,255,.22); }
.rc-dots i.on { background: var(--sc); border: 0; box-shadow: 0 2px 0 rgba(0,0,0,.3); }
/* a seat whose player left a running game: crossed out, not "free" */
.rc-dots i.gone { position: relative; background: rgba(255,77,94,.08); border: 1.5px solid rgba(255,77,94,.35); }
.rc-dots i.gone::after { content: ''; position: absolute; left: 1px; right: 1px; top: 50%; height: 1.5px; background: rgba(255,120,130,.7); transform: rotate(-45deg); }
.st.free.gone { border-color: rgba(255,77,94,.25); }
.st.free.gone .ava { color: #ff9aa4; background: rgba(255,77,94,.1); }
.st.free.gone .t { white-space: normal; }
.rc-seats b { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.rc-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.rc-meta span { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #cfcbea; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.07); }
.rc-meta svg.i { width: 12px; height: 12px; }
.rc-foot { margin-top: auto; display: flex; }
.rc-foot .btn { width: 100%; }
.rc-foot .tag { width: 100%; text-align: center; padding: 8px; }
@media (max-width: 640px) {
  .overlay.modal { padding: calc(var(--top) + 8px) 10px 10px; }
  #s-rooms .sheet.rooms-sheet { height: calc(100vh - var(--top) - 18px); height: calc(100dvh - var(--top) - 18px); padding: 16px 14px 0; gap: 12px; border-radius: 24px; }
  .rm-head h2 { font-size: 20px; }
  .rm-ico { width: 38px; height: 38px; border-radius: 12px; }
  .rooms-sheet .rooms-stats { grid-template-columns: 1fr 1fr; }
  .rooms-sheet .rooms-stats span { padding: 8px 10px; }
  .rooms-sheet .rooms-stats span b { font-size: 15px; }
  .rooms-body { margin: 0 -8px; padding: 2px 8px 16px; }
  .rooms-grid { grid-template-columns: 1fr; gap: 10px; }
  .rm-head .online-chip { padding: 5px 9px; }
}
/* one room in full */
#s-roomv .sheet { max-width: 520px; display: flex; flex-direction: column; gap: 10px; }
#s-roomv .sh { margin-bottom: 0; }
.rmv-info { justify-content: flex-start; }
.rmv-h { margin-top: 6px; }
.rmv-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.rmv-cats span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--fc) 14%, rgba(0,0,0,.2)); border: 1px solid color-mix(in srgb, var(--fc) 40%, transparent); }
.rmv-cats span svg.i { width: 13px; height: 13px; color: var(--fc); }
.st .ava svg.i { width: 16px; height: 16px; }
.st.free { background: transparent; border: 1.5px dashed rgba(255,255,255,.14); }
.st.free .ava { background: rgba(255,255,255,.06); color: var(--muted); }
.st.free .t { color: var(--muted); font-weight: 700; }
.rmv-act { margin-top: 8px; display: flex; justify-content: center; }
.rmv-act .btn { width: 100%; }
.online-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--text);
  background: rgba(166,245,107,.1); border: 1px solid rgba(166,245,107,.3); }
.online-chip i, .on-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(166,245,107,.2); animation: onPulse 2s ease-in-out infinite; flex: none; }
@keyframes onPulse { 50% { box-shadow: 0 0 0 6px rgba(166,245,107,0); } }
.room-tags { display: flex; justify-content: center; }
.room-tags .tag.hidden { display: none; }
.req-box { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 18px; background: rgba(124,92,255,.08); border: 1px solid rgba(124,92,255,.3); }
.seat.req { flex-wrap: wrap; }
.seat.req .btn-sm svg.i { width: 15px; height: 15px; }
@media (max-width: 520px) { .seat.req .t { flex-basis: calc(100% - 60px); } .seat.req .btn-sm { flex: 1; } }
/* the game starts in… */
.start-bar { padding: 12px 14px; border-radius: 18px; background: rgba(45,224,196,.08); border: 1.5px solid rgba(45,224,196,.45); animation: popIn .3s cubic-bezier(.3,1.4,.5,1); }
.start-bar .sb-ico { background: linear-gradient(180deg, #6ff0d8, #14a88f); box-shadow: 0 2px 0 #0a5c4f; color: #04342c; }
.start-bar .sb-txt { flex: 1; }
.start-bar .sb-txt span { color: #9fe1cb; font-size: 14px; font-weight: 800; }
.start-bar .sb-bar i { background: linear-gradient(90deg, #2de0c4, #7c5cff); transition: transform .2s linear; }
/* host: remove a player during the game */
.pc .pc-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; border: 0;
  background: rgba(255,77,94,.16); color: #ff9aa4; opacity: .75; }
.pc .pc-x svg.i { width: 13px; height: 13px; }
@media (hover: hover) { .pc .pc-x:hover { opacity: 1; background: rgba(255,77,94,.3); } }
/* online */
.ava .ava-on { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--lime); border: 2px solid #1c1540; }
.stand .st .on-dot { margin: 0 2px; }
/* chat */
.chat-fab { position: fixed; z-index: 35; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 54px; height: 54px; border-radius: 18px; border: 0; color: #fff;
  display: grid; place-items: center; background: linear-gradient(180deg, #ffe58f 0%, #f6c84a 48%, #e3a61f 100%); box-shadow: 0 5px 0 #8a5a0a, 0 14px 26px -10px rgba(0,0,0,.8);
  transition: transform .15s; animation: popIn .3s cubic-bezier(.3,1.4,.5,1); }
.chat-fab svg.i { width: 24px; height: 24px; }
.chat-fab:active { transform: translateY(3px); }
.chat-fab b { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center;
  font-size: 11px; font-weight: 900; background: var(--p); border: 2px solid var(--bg); }
@media (max-width: 899px) { body[data-page="game"] .chat-fab { bottom: calc(96px + var(--kb, 0px) + env(safe-area-inset-bottom)); width: 46px; height: 46px; border-radius: 15px; } }
.chat-sheet { display: flex; flex-direction: column; }
.chat-list { display: flex; flex-direction: column; gap: 8px; min-height: 180px; max-height: min(52vh, 460px); overflow-y: auto; padding: 4px 2px 10px; }
.cm { display: flex; }
.cm.me { justify-content: flex-end; }
.cb { max-width: 82%; padding: 8px 12px; border-radius: 16px 16px 16px 6px; background: rgba(0,0,0,.28); border: 1px solid var(--stroke); display: flex; flex-direction: column; gap: 2px; }
.cm.me .cb { border-radius: 16px 16px 6px 16px; background: rgba(124,92,255,.28); border-color: rgba(124,92,255,.45); }
.cb b { font-size: 12px; }
.cb span { font-size: 15px; line-height: 1.35; word-break: break-word; }
.cb small { align-self: flex-end; font-size: 10px; color: var(--muted); }
.chat-form { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.chat-form input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 14px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14);
  color: var(--text); font-size: 16px; outline: none; }
.chat-form input:focus { border-color: #a58fff; }
.sheet .chat-form .btn { width: 44px; height: 44px; }
/* waiting for the host to accept */
.wait-sheet { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wait-sheet .cnt-ring { margin: 6px 0 4px; }
.wait-sheet h2 { margin: 0; font-size: 20px; font-weight: 900; }
.wait-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.wait-info span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #cfcbea; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.07); }
.wait-info svg.i { width: 13px; height: 13px; }
@media (max-width: 899px) { #s-wait, #s-chat { align-items: flex-start; padding: calc(var(--top) + 10px) 10px 0; }
  #s-wait .sheet, #s-chat .sheet { border-radius: 24px; animation: popIn .26s cubic-bezier(.3,1.4,.5,1); }
  #s-wait .grab, #s-chat .grab { display: none; }
  .chat-list { max-height: calc(100vh - var(--top) - var(--kb, 0px) - 190px); } }

/* rooms modal: the numbers (icon | number over its label; long labels wrap inside the box) */
.rooms-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rooms-stats:empty { display: none; }
.rooms-stats span { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px;
  background: rgba(0,0,0,.2); border: 1px solid var(--stroke); min-width: 0; overflow: hidden; }
.rooms-stats span b { font-size: 17px; font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rooms-stats span em { grid-column: 2; font-style: normal; font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.rooms-stats svg.i { grid-row: 1 / 3; width: 18px; height: 18px; color: #b9a9ff; }
.lsi span { white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }

/* ================= GAMES PAGE (one card per game) ================= */
.lobby-page a.brand, .lobby-page a.acct { color: inherit; text-decoration: none; }
.dd-list li a { flex: 1; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.lobby { display: flex; flex-direction: column; gap: 22px; }
.lb-hero { display: flex; flex-direction: column; gap: 8px; }
.lb-title { margin: 0; font-size: clamp(30px, 5vw, 46px); font-weight: 900; letter-spacing: -1px; line-height: 1.05;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lb-sub { margin: 0; color: var(--muted); font-size: 16px; font-weight: 600; max-width: 560px; }
.lb-hero .live-strip { margin-top: 10px; }
.lb-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
/* a game card: the picture on top, the text and the button below */
.gcard { --accent: #7c5cff; position: relative; display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; color: var(--text); text-decoration: none;
  background: var(--card); border: 1px solid var(--stroke); box-shadow: 0 22px 50px -26px rgba(0,0,0,.9);
  transition: transform .25s cubic-bezier(.3,1.4,.5,1), border-color .25s, box-shadow .25s; }
.gcard::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.08), transparent 60%); }
/* (the card under the mouse rises: lobby.js puts gc-hov on it and keeps it while the mouse is anywhere in the place the
   card had before it rose — with :hover a mouse at its lower edge was left below it, the card came down under it again,
   rose again: it shook) */
@media (hover: hover) and (pointer: fine) {
  a.gcard.gc-hov { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 32px 60px -26px rgba(0,0,0,.95); }
  .gcard.gc-hov::before { opacity: 1; }
  a.gcard.gc-hov .gc-btn { filter: brightness(1.08); }
  a.gcard.gc-hov .gc-btn .ar { transform: translateX(4px); }
}
a.gcard:active { transform: scale(.985); }
.gc-art { position: relative; height: 210px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 70%), rgba(0,0,0,.18); border-bottom: 1px solid var(--stroke); }
.gc-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; flex: 1; }
.gc-body h2 { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -.4px; }
.gc-body p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; flex: 1; }
.gc-tags { display: flex; gap: 8px; min-height: 26px; }
.gc-live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 800;
  color: var(--lime); background: rgba(166,245,107,.1); border: 1px solid rgba(166,245,107,.3); }
.gc-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); animation: onPulse 2s ease-in-out infinite; }
.gc-soon { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase;
  color: var(--gold); background: rgba(255,207,77,.12); border: 1px solid rgba(255,207,77,.35); }
.gc-btn { align-self: flex-start; margin-top: 6px; }
.gcard.soon { cursor: default; }
.gcard.soon .gc-btn { opacity: .55; pointer-events: none; }
/* word game art: bouncing letter tiles and category icons floating around */
.gc-zoo { --accent: #7c5cff; }
.gz-tiles { display: flex; gap: 10px; z-index: 1; }
.gz-tile { width: 62px; height: 70px; border-radius: 16px; display: grid; place-items: center; font-size: 34px; font-weight: 900; color: #fff;
  background: linear-gradient(160deg, var(--c), color-mix(in srgb, var(--c) 55%, #1a1040)); text-shadow: 0 3px 0 rgba(0,0,0,.25);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.2), 0 7px 0 rgba(0,0,0,.35);
  transform: rotate(var(--r)); animation: drop .8s cubic-bezier(.3,1.6,.5,1) var(--d) backwards, gzBob 3.4s ease-in-out var(--d) infinite; }
.gz-tile.flip { animation: tileFlip .46s cubic-bezier(.4,0,.2,1), gzBob 3.4s ease-in-out var(--d) infinite; }
@keyframes gzBob { 50% { transform: translateY(-8px) rotate(var(--r)); } }
.gz-ico { position: absolute; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); animation: gzFloat 6s ease-in-out infinite; }
.gz-ico svg.i { width: 22px; height: 22px; }
.gz-i1 { left: 8%; top: 14%; color: #ffb347; } .gz-i2 { right: 9%; top: 16%; color: #a6f56b; animation-delay: -1.5s; }
.gz-i3 { left: 12%; bottom: 12%; color: #3db8ff; animation-delay: -3s; } .gz-i4 { right: 13%; bottom: 10%; color: #ff8db4; animation-delay: -4.5s; }
@keyframes gzFloat { 50% { transform: translateY(-10px) rotate(8deg); } }
/* twenty-one art: a fan of cards that breathes, chips floating, a big 21 behind */
.gc-21 { --accent: #1fa971; }
.g21-num { position: absolute; font-size: 150px; font-weight: 900; letter-spacing: -6px; color: rgba(255,255,255,.05); line-height: 1; }
@media (max-width: 640px) {
  .lobby { gap: 16px; }
  .lb-games { grid-template-columns: 1fr; gap: 14px; }
  .gc-art { height: 170px; }
  .gz-tile { width: 50px; height: 58px; font-size: 28px; border-radius: 13px; }
  .gc-body { padding: 16px 16px 20px; }
  .gc-btn { align-self: stretch; }
  .lobby-page .dd-top { width: auto; }
  .lobby-page .dd-top .dd-val { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gz-tile, .gz-ico, .g21c, .g21-chips .g21ch { animation: none; }
}

/* account menu: your numbers in every game */
.gstats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 8px; }
.gstats:empty { display: none; }
.gstats div { padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.25); font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.25; }
.gstats b { display: block; font-size: 15px; font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; }

/* games page: the account menu (links look like the game pages' menu buttons) */
.lobby-page a.menu-item { color: inherit; text-decoration: none; }
.lobby-page .acct svg.i { width: 16px; height: 16px; color: var(--muted); }

/* games page: twenty-one with the table's own cards and chips */
.g21-real { position: relative; width: 270px; height: 180px; z-index: 1; }
.g21-cards .cd { --cw: 78px; position: absolute; left: 76px; top: 26px; transform-origin: 50% 120%;
  transform: rotate(calc(var(--i) * 15deg)) translateX(calc(var(--i) * 8px)); animation: g21Fan 4s ease-in-out infinite; }
@keyframes g21Fan { 50% { transform: rotate(calc(var(--i) * 19deg)) translateX(calc(var(--i) * 10px)) translateY(-4px); } }
/* (.g21-chips in front: cards.css loads after this file and its .ch is position: relative) */
.g21-chips .g21ch { position: absolute; animation: g21Chip 5s ease-in-out infinite; }
.g21-chips { position: absolute; inset: 0; pointer-events: none; }
.g21ch.c1 { left: 8%; top: 14%; } .g21ch.c2 { right: 9%; top: 16%; animation-delay: -1.2s; }
.g21ch.c3 { left: 12%; bottom: 12%; animation-delay: -2.5s; } .g21ch.c4 { right: 13%; bottom: 10%; animation-delay: -3.7s; }
@keyframes g21Chip { 50% { transform: translateY(-9px) rotate(30deg); } }
.lobby-page a.btn { text-decoration: none; }
.lobby-page .nav a:hover { text-decoration: none; }
/* the coming games: a row that slides */
.soon-games { display: flex; flex-direction: column; gap: 12px; }
.soon-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.soon-head h2 { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -.3px; }
.soon-nav { display: flex; gap: 8px; }
.soon-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 10px; }
.soon-row::-webkit-scrollbar { display: none; }
.scard { flex: none; width: 220px; scroll-snap-align: start; border-radius: 22px; overflow: hidden; background: var(--card); border: 1px solid var(--stroke); }
.sc-art { height: 130px; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 0%, rgba(124,92,255,.28), transparent 70%), rgba(0,0,0,.18);
  border-bottom: 1px solid var(--stroke); filter: saturate(.9); }
.sc-art svg { width: 100%; height: 100%; }
.sc-body { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px 14px 14px; }
.sc-body b { font-size: 16px; font-weight: 900; }
/* the leaderboard on the games page */
.lbm-sheet { max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
.lbm-sheet .sh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lbm-sheet .sh h2 { margin: 0; font-size: 20px; font-weight: 900; }
.lbm-sheet .lbm-sub { margin: -4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
/* the site's footer: questions, terms, privacy */
.site-foot { position: relative; z-index: 1; max-width: 1240px; margin: 10px auto 0; padding: 18px 16px 30px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px; border-top: 1px solid var(--stroke); color: var(--muted); font-size: 13px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-foot a { color: var(--muted); text-decoration: none; font-weight: 700; }
.site-foot a:hover { color: var(--text); }
/* phones: the links over the whole width, two by two (an odd first one alone on its row), the © under them in the middle */
@media (max-width: 640px) {
  .site-foot { flex-direction: column; align-items: stretch; gap: 14px; padding: 20px 16px calc(26px + env(safe-area-inset-bottom)); text-align: center; }
  .site-foot nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .site-foot nav a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 10px; border-radius: 12px; line-height: 1.25;
    background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); }
  .site-foot nav a:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .site-foot small { font-size: 12px; opacity: .8; }
}
/* the site's pages (terms, privacy, questions) */
.info-page { max-width: 820px; }
.info-page h1 { margin: 6px 0 14px; font-size: clamp(26px, 4vw, 36px); font-weight: 900; letter-spacing: -.5px; }
.info-page .card { padding: 22px 24px; }
.info-page h2 { margin: 20px 0 6px; font-size: 17px; font-weight: 900; }
.info-page h2:first-child { margin-top: 0; }
.info-page p { margin: 0 0 10px; color: #d9d6f0; line-height: 1.65; }
.info-page .upd { color: var(--muted); font-size: 13px; }
.info-langs { display: flex; gap: 4px; flex-wrap: wrap; }
.info-langs a { padding: 5px 8px; border-radius: 8px; font-size: 12px; font-weight: 800; color: var(--muted); text-decoration: none; background: rgba(255,255,255,.05); }
.info-langs a.on { background: rgba(124,92,255,.28); color: #fff; }

/* your picture: it fills the avatar circle (the initial stays under it) */
.ava, .av { position: relative; }
.ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: 1; }
.ava .lv, .ava .ava-on { z-index: 2; }
.ava-row { display: flex; align-items: center; gap: 16px; margin: 4px 0 16px; }
.ava.ava-big { width: 72px; height: 72px; border-radius: 22px; font-size: 28px; font-weight: 900; display: grid; place-items: center; flex: none; }
.ava-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* cutting your picture: drag it and zoom, the circle shows what is kept */
.ava-sheet { max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.ava-sheet .sh { display: flex; align-items: center; justify-content: space-between; }
.ava-sheet .sh h2 { margin: 0; }

/* the Leave window: what leaving a game that has started costs */

/* buying chips (the games page): the packs, each with a real chip */
.shop-note, .shop-small { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.shop-small { font-size: 12px; color: var(--dim); }
.shop-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.shop-pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px 14px;
  border-radius: 18px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: var(--text); cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s; }
.shop-pack:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(255,207,77,.5); background: rgba(255,207,77,.08); }
.shop-pack:disabled { opacity: .55; cursor: default; }
.shop-pack.busy { opacity: 1; border-color: var(--gold); }
.shop-pack .sp-ch { margin-bottom: 6px; }
.shop-pack b { font-size: 20px; font-weight: 900; }
.shop-pack span { font-size: 12px; color: var(--muted); }
.shop-pack em { margin-top: 8px; font-style: normal; font-weight: 800; padding: 6px 12px; border-radius: 999px; background: var(--gold); color: #1a1400; }
.shop-err { margin: 0; color: var(--red); font-weight: 700; font-size: 13.5px; }
/* menus always in front: the top bar (and its menus) and the sheets get their own layer, so cards turning over on the
   table (Safari on phones draws them in 3D) never show through them */
.top, .overlay { transform: translateZ(0); }
.gstats.one { grid-template-columns: 1fr; }

/* the games page: 10 Phases, a set and a run of its real cards (and a Skip turning in a corner) */
.gc-10 { --accent: #2de0c4; }
.g10-num { position: absolute; font-size: 150px; font-weight: 900; letter-spacing: -6px; color: rgba(255,255,255,.05); line-height: 1; }
.g10-real { position: relative; width: 300px; height: 170px; z-index: 1; }
.g10-set, .g10-run { position: absolute; top: 30px; width: 130px; height: 120px; }
.g10-set { left: 0; } .g10-run { right: 0; }
.g10-real .cd { --cw: 62px; position: absolute; left: 34px; top: 0; transform-origin: 50% 120%;
  transform: rotate(calc(var(--i) * 13deg)) translateX(calc(var(--i) * 6px)); animation: g10Fan 4.4s ease-in-out infinite; }
.g10-run .cd { animation-delay: -2.2s; }
@keyframes g10Fan { 50% { transform: rotate(calc(var(--i) * 17deg)) translateX(calc(var(--i) * 8px)) translateY(-4px); } }
.g10-skip { position: absolute; inset: 0; pointer-events: none; }
/* backgammon art: the board with its checkers, two dice that roll now and then */
.gc-tv { --accent: #d4924a; }
.gtv-board { position: relative; z-index: 1; width: 290px; max-width: 86%; filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)); }
.gtv-die { position: absolute; z-index: 2; width: 34px; height: 34px; padding: 5px; border-radius: 8px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); box-sizing: border-box;
  background: radial-gradient(circle at 30% 24%, #fffef8, #f3ebd8 52%, #d4c7a4); box-shadow: inset 0 -2px 3px rgba(90,70,30,.35), inset 0 2px 2px rgba(255,255,255,.9), 0 9px 12px -3px rgba(0,0,0,.6); }
.gtv-die i { width: 6px; height: 6px; border-radius: 50%; place-self: center; background: radial-gradient(circle at 40% 35%, #44444e, #0c0c10); box-shadow: inset 0 1px 1px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.6); }
.gtv-board .gtv-move { animation: gtvMove 6s ease-in-out infinite; }
.gtv-board .gtv-sweep { animation: gtvSweep 7s ease-in-out infinite; }
@keyframes gtvMove { 0%, 30% { transform: translate(0, 0) scale(1); opacity: 1; } 44% { transform: translate(17px, -6px) scale(1.2); }
  58%, 86% { transform: translate(34px, 0) scale(1); opacity: 1; } 92% { transform: translate(34px, 0); opacity: 0; } 93% { transform: translate(0, 0); opacity: 0; } 100% { opacity: 1; } }
@keyframes gtvSweep { 0%, 55% { transform: translateX(0); } 100% { transform: translateX(400px); } }.gtv-die.g1 { left: 58%; top: 34%; animation: gtvRoll 5s ease-in-out infinite; }
.gtv-die.g2 { left: 68%; top: 50%; animation: gtvRoll 5s ease-in-out -.35s infinite; }
.gtv-die.g1 i:nth-child(1) { grid-area: 1 / 1; } .gtv-die.g1 i:nth-child(2) { grid-area: 1 / 3; } .gtv-die.g1 i:nth-child(3) { grid-area: 2 / 2; }
.gtv-die.g1 i:nth-child(4) { grid-area: 3 / 1; } .gtv-die.g1 i:nth-child(5) { grid-area: 3 / 3; }
.gtv-die.g2 i:nth-child(1) { grid-area: 1 / 1; } .gtv-die.g2 i:nth-child(2) { grid-area: 2 / 2; } .gtv-die.g2 i:nth-child(3) { grid-area: 3 / 3; }
@keyframes gtvRoll { 0%, 62% { transform: rotate(-14deg); } 70% { transform: translate(-24px, -30px) rotate(160deg); } 78% { transform: translate(-6px, 4px) rotate(300deg); }
  84% { transform: translate(-2px, -6px) rotate(340deg); } 90%, 100% { transform: rotate(346deg); } }
@media (prefers-reduced-motion: reduce) { .gtv-die, .gtv-board .gtv-move, .gtv-board .gtv-sweep { animation: none; } }
.g10-skip .cd { --cw: 44px; position: absolute; right: 7%; top: 12%; animation: g10Skip 6s ease-in-out infinite; }
@keyframes g10Skip { 50% { transform: translateY(-8px) rotate(18deg); } }
@media (prefers-reduced-motion: reduce) { .g10-real .cd, .g10-skip .cd { animation: none; } }
/* biriba art: a run of hearts spreading out into a biriba, a joker hopping on top */
.gc-br { --accent: #5aa2ff; }
.gbr-real { position: relative; z-index: 1; width: 300px; height: 170px; }
.gbr-run { position: absolute; left: 50%; top: 34px; width: 0; }
.gbr-real .gbrc { --cw: 56px; position: absolute; left: calc(-160px + var(--i) * 16px); top: 0; box-shadow: -3px 0 6px rgba(0,0,0,.25), 0 12px 18px -8px rgba(0,0,0,.7);
  animation: gbrSpread 5s ease-in-out infinite; }
@keyframes gbrSpread { 0%, 15%, 100% { transform: none; } 45%, 75% { transform: translateX(calc(var(--i) * 20px - 40px)) translateY(calc(var(--i) * -1.5px)); } }
.gbr-real .gbr-jk { --cw: 50px; position: absolute; right: 16px; top: 8px; transform: rotate(16deg); box-shadow: 0 0 0 2px #ffd866, 0 14px 22px -8px rgba(0,0,0,.8);
  animation: gbrJoker 5s ease-in-out infinite; }
@keyframes gbrJoker { 0%, 40%, 100% { transform: rotate(16deg); } 55% { transform: translateY(-14px) rotate(-8deg); } 70% { transform: rotate(22deg); } }
@media (prefers-reduced-motion: reduce) { .gbr-real .gbrc, .gbr-real .gbr-jk { animation: none; } }
/* zygos art: a tower of wood, stone and steel on a rock at dusk; it sways a little and a crack comes and goes */
.gc-zy { --accent: #f0a064; }
.gzy { position: relative; z-index: 1; width: 290px; max-width: 92%; filter: drop-shadow(0 18px 22px rgba(0,0,0,.6)); overflow: visible; }
.gzy .gzy-t { transform-origin: 140px 132px; animation: gzyWobble 5.5s ease-in-out infinite; }
.gzy .gzy-crack { opacity: 0; animation: gzyCrack 5.5s ease-in-out infinite; }
@keyframes gzyWobble { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-1.2deg); } 55% { transform: rotate(1deg); } 75% { transform: rotate(-.35deg); } }
@keyframes gzyCrack { 0%, 40% { opacity: 0; } 55%, 85% { opacity: .9; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gzy .gzy-t, .gzy .gzy-crack { animation: none; } }
/* ploutos art: the corner of a black board in gold, houses and a hotel, two dice that tumble now and then, coins */
.gc-pu { --accent: #f2c14e; }
.gpu { position: relative; z-index: 1; width: 290px; max-width: 92%; filter: drop-shadow(0 18px 22px rgba(0,0,0,.6)); overflow: visible; }
.gpu .gpu-d1 { transform-origin: 111px 143px; animation: gpuDie 4.8s cubic-bezier(.3,.7,.3,1) infinite; }
.gpu .gpu-d2 { transform-origin: 151px 147px; animation: gpuDie 4.8s cubic-bezier(.3,.7,.3,1) .12s infinite; }
.gpu .gpu-h1, .gpu .gpu-h2, .gpu .gpu-ht { animation: gpuDrop 4.8s ease-out infinite; }
.gpu .gpu-h2 { animation-delay: .15s; } .gpu .gpu-ht { animation-delay: .3s; }
.gpu .gpu-logo { animation: gpuShine 4.8s ease-in-out infinite; }
@keyframes gpuDie { 0%, 62% { transform: none; } 70% { transform: translate(-6px, -22px) rotate(-160deg); } 80% { transform: translate(-2px, 0) rotate(-340deg); } 86% { transform: translate(0, -5px) rotate(-356deg); } 92%, 100% { transform: rotate(-360deg); } }
@keyframes gpuDrop { 0%, 8% { transform: translateY(-14px); opacity: 0; } 16% { transform: translateY(1px); opacity: 1; } 20%, 100% { transform: none; opacity: 1; } }
@keyframes gpuShine { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gpu .gpu-d1, .gpu .gpu-d2, .gpu .gpu-h1, .gpu .gpu-h2, .gpu .gpu-ht, .gpu .gpu-logo { animation: none; } }
/* draughts art: the walnut board at an angle, turned pieces, a king; a man jumps over a black one and takes it */
.gc-nt { --accent: #c9a36a; }
.gnt { position: relative; z-index: 1; width: 260px; height: 260px; margin: -25px 0; max-width: none; max-height: none !important; flex: none; overflow: visible;
  transform: perspective(900px) rotateX(52deg) rotateZ(-6deg); filter: drop-shadow(0 22px 18px rgba(0,0,0,.6)); }
.gnt .gnt-hop { animation: gntHop 5s ease-in-out infinite; }
.gnt .gnt-gone { animation: gntGone 5s ease-in-out infinite; }
.gnt .gnt-sweep { animation: gntSweep 6s ease-in-out infinite; }
@keyframes gntHop { 0%, 55% { transform: none; opacity: 1; } 63% { transform: translate(22px, -30px); } 71%, 92% { transform: translate(44px, -44px); opacity: 1; }
  96% { transform: translate(44px, -44px); opacity: 0; } 97% { transform: none; opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes gntGone { 0%, 66% { transform: none; opacity: 1; } 76%, 94% { transform: translateY(-6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes gntSweep { 0%, 50% { transform: translateX(0); } 100% { transform: translateX(340px); } }
@media (max-width: 640px) { .gnt { width: 220px; height: 220px; } }@media (prefers-reduced-motion: reduce) { .gnt .gnt-hop, .gnt .gnt-gone, .gnt .gnt-sweep { animation: none; } }
/* battleship art: the sea from above with its grid, a warship rocking a little, a shell into the water, a hit */
.gc-nv { --accent: #5fc4e8; }
/* Domino art: a turn of the line on green felt in a walnut frame; a tile is laid at its end now and then */
.gc-do { --accent: #2a9a6a; }
.gdo { position: relative; z-index: 1; width: 290px; max-width: 92%; max-height: calc(100% - 14px); overflow: visible; filter: drop-shadow(0 16px 20px rgba(0,0,0,.55)); }
.gdo .gdo-lay { animation: gdoLay 5s ease-in-out infinite; }
@keyframes gdoLay { 0%, 35% { transform: translate(150px, 120px); opacity: 0; } 45% { opacity: 1; } 70%, 92% { transform: translate(223px, 132px); opacity: 1; } 100% { transform: translate(223px, 132px); opacity: 0; } }
@media (max-width: 640px) { .gdo { max-height: calc(100% - 42px); align-self: start; margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) { .gdo * { animation: none !important; } }
/* Solitaire art: the seven columns on a violet nebula, modern dark cards; a red Queen lands on a black King now and then */
.gc-so { --accent: #8f7bff; }
.gso { position: relative; z-index: 1; width: 290px; max-width: 92%; max-height: calc(100% - 14px); overflow: visible; filter: drop-shadow(0 16px 20px rgba(0,0,0,.55)); }
.gso .gso-lay { animation: gsoLay 5.5s ease-in-out infinite; }
@keyframes gsoLay { 0%, 30% { transform: translate(56px, 20px); opacity: 0; } 38% { opacity: 1; } 62%, 92% { transform: translate(194px, 89px); opacity: 1; } 100% { transform: translate(194px, 89px); opacity: 0; } }
@media (max-width: 640px) { .gso { max-height: calc(100% - 42px); align-self: start; margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) { .gso * { animation: none !important; } }
/* Hangman art: a gallows under the moon, the figure swaying on its rope, the word half found; a letter opens now and then */
.gc-hm { --accent: #f2c46d; }
.ghm { position: relative; z-index: 1; width: 290px; max-width: 92%; max-height: calc(100% - 14px); overflow: visible; filter: drop-shadow(0 16px 20px rgba(0,0,0,.55)); }
.ghm .ghm-sway { transform-box: view-box; transform-origin: 176px 34px; animation: ghmSway 4s ease-in-out infinite alternate; }
@keyframes ghmSway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.ghm .ghm-open { animation: ghmOpen 5s ease-in-out infinite; }
@keyframes ghmOpen { 0%, 40% { opacity: 0; transform: translateY(4px); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (max-width: 640px) { .ghm { max-height: calc(100% - 42px); align-self: start; margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) { .ghm * { animation: none !important; } }
/* Sudoku art: a paper board on a walnut desk; a number is written in now and then and a light runs along its row */
.gc-sd { --accent: #f2c96b; }
.gsd { position: relative; z-index: 1; width: 290px; max-width: 92%; max-height: calc(100% - 14px); overflow: visible; filter: drop-shadow(0 16px 20px rgba(0,0,0,.55)); }
.gsd .gsd-pop { transform-box: fill-box; transform-origin: center; animation: gsdPop 5s ease-out infinite; }
@keyframes gsdPop { 0%, 30% { opacity: 0; transform: scale(1.8); } 38%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.gsd .gsd-sweep { animation: gsdSweep 5s ease-in-out infinite; }
@keyframes gsdSweep { 0%, 38% { transform: translateX(0); opacity: 0; } 40% { opacity: 1; } 58% { transform: translateX(180px); opacity: 1; } 60%, 100% { transform: translateX(180px); opacity: 0; } }
.gsd .gsd-pen { transform-box: view-box; animation: gsdPen 5s ease-in-out infinite; }
@keyframes gsdPen { 0%, 22% { translate: 0 0; } 32% { translate: -6px -3px; } 40%, 100% { translate: 0 0; } }
@media (max-width: 640px) { .gsd { max-height: calc(100% - 42px); align-self: start; margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) { .gsd * { animation: none !important; } }
/* Reversi art: a green board in a dark frame; a dark disc is placed and the light discs it closes turn over */
.gc-rv { --accent: #2eaa6e; }
.grv { position: relative; z-index: 1; width: 290px; max-width: 92%; max-height: calc(100% - 14px); overflow: visible; filter: drop-shadow(0 16px 20px rgba(0,0,0,.55)); }
.grv .grv-put { transform-box: fill-box; transform-origin: center; animation: grvPut 6s ease-out infinite; }
@keyframes grvPut { 0%, 24% { opacity: 0; transform: translateY(-10px) scale(1.5); } 31%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.grv .grv-flip { transform-box: fill-box; transform-origin: center; animation: grvFlip 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes grvFlip { 0%, 33% { transform: scaleX(1); } 38% { transform: scaleX(0); } 43%, 100% { transform: scaleX(1); } }
.grv .grv-to { animation: grvTo 6s step-end infinite; animation-delay: var(--d, 0s); }
@keyframes grvTo { 0% { opacity: 0; } 38% { opacity: 1; } 97% { opacity: 0; } }
@media (max-width: 640px) { .grv { max-height: calc(100% - 42px); align-self: start; margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) { .grv * { animation: none !important; } .grv .grv-to { opacity: 0; } }
/* chess: the picture of the board (its own file) */
.gc-ch { --accent: #e6c56b; }
.gch { position: relative; z-index: 1; display: block; width: 290px; max-width: 92%; height: auto; max-height: calc(100% - 14px); object-fit: contain;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.55)); }
@media (max-width: 640px) { .gch { max-height: calc(100% - 42px); align-self: start; margin-top: 8px; } }
/* tichu: its picture (its own file, animated) */
.gc-tc { --accent: #e2b85c; }
.gtc { position: relative; z-index: 1; display: block; width: 290px; max-width: 92%; height: auto; max-height: calc(100% - 14px); object-fit: contain;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.45)); }
@media (max-width: 640px) { .gtc { max-height: calc(100% - 42px); align-self: start; margin-top: 8px; } }
/* belote: its picture (its own file, animated) */
.gc-bl { --accent: #c9a24e; }
.gbl { position: relative; z-index: 1; display: block; width: 290px; max-width: 92%; height: auto; max-height: calc(100% - 14px); object-fit: contain;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.45)); }
@media (max-width: 640px) { .gbl { max-height: calc(100% - 42px); align-self: start; margin-top: 8px; } }
/* koltsina: its picture (its own file, animated) */
.gc-kl { --accent: #8fa98a; }
.gkl { position: relative; z-index: 1; display: block; width: 290px; max-width: 92%; height: auto; max-height: calc(100% - 14px); object-fit: contain;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.45)); }
@media (max-width: 640px) { .gkl { max-height: calc(100% - 42px); align-self: start; margin-top: 8px; } }
/* prefa and thanasis: their pictures (their own files, animated) */
.gc-pf { --accent: #c9973e; } .gc-tn { --accent: #1d5fb0; }
.gpf, .gtn { position: relative; z-index: 1; display: block; width: 290px; max-width: 92%; height: auto; max-height: calc(100% - 14px); object-fit: contain;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.55)); }
@media (max-width: 640px) { .gpf, .gtn { max-height: calc(100% - 42px); align-self: start; margin-top: 8px; } }
/* xeri and agonia: their pictures (their own files, animated) */
.gc-xr { --accent: #e9a873; } .gc-ag { --accent: #ff3d6e; }
.gxr, .gag { position: relative; z-index: 1; display: block; width: 290px; max-width: 92%; height: auto; max-height: calc(100% - 14px); object-fit: contain;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.55)); }
@media (max-width: 640px) { .gxr, .gag { max-height: calc(100% - 42px); align-self: start; margin-top: 8px; } }
/* Last Card art: three of its cards fanned over a colour ring that turns, the middle one breathing */
.gc-lc { --accent: #e8344a; }
.glc { position: relative; z-index: 1; width: 290px; max-width: 92%; max-height: calc(100% - 14px); overflow: visible; }
.glc .glc-ring { transform-box: fill-box; transform-origin: center; animation: glcSpin 14s linear infinite; }
.glc .glc-c2 { animation: glcLift 3.6s ease-in-out infinite; }
.glc .glc-call { transform-box: fill-box; transform-origin: center; animation: glcCall 3.6s ease-in-out infinite; }
@keyframes glcSpin { to { transform: rotate(360deg); } }
@keyframes glcLift { 50% { transform: translate(140px, 82px); } }
@keyframes glcCall { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.12); } 80% { transform: scale(.98); } }
@media (max-width: 640px) { .glc { max-height: calc(100% - 40px); align-self: start; margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) { .glc * { animation: none !important; } }
.gnv { position: relative; z-index: 1; width: 290px; max-width: 92%; filter: drop-shadow(0 18px 22px rgba(0,0,0,.6)); overflow: visible; }
.gnv .gnv-waves { animation: gnvWave 14s ease-in-out infinite alternate; }
.gnv .gnv-wake { animation: gnvWake 3s ease-in-out infinite; }
.gnv .gnv-stack circle { transform-box: fill-box; transform-origin: center; animation: gnvSmoke 3.4s ease-out infinite; }
.gnv .gnv-stack circle:nth-child(2) { animation-delay: -1.1s; } .gnv .gnv-stack circle:nth-child(3) { animation-delay: -2.2s; }
.gnv .gnv-plume circle { transform-box: fill-box; transform-origin: center; animation: gnvPlume 3s ease-out infinite; }
.gnv .gnv-plume circle:nth-child(2) { animation-delay: -1s; } .gnv .gnv-plume circle:nth-child(3) { animation-delay: -2s; }
.gnv .gnv-fl { transform-box: fill-box; transform-origin: 50% 100%; animation: gnvFlame .42s ease-in-out infinite alternate; }
.gnv .gnv-fl.f2 { animation-duration: .34s; animation-delay: -.2s; }
.gnv .gnv-glow { transform-box: fill-box; transform-origin: center; animation: gnvGlow 1.4s ease-in-out infinite alternate; }
.gnv .gnv-trace { animation: gnvTrace 4s linear infinite; }
.gnv .gnv-col { transform-box: fill-box; transform-origin: 50% 100%; animation: gnvCol 4s ease-out infinite; }
.gnv .gnv-ring { transform-box: fill-box; transform-origin: center; animation: gnvRing 4s ease-out infinite; opacity: 0; }
.gnv .gnv-ring.r2 { animation-delay: .25s; }
.gnv .gnv-boom { transform-box: fill-box; transform-origin: center; animation: gnvBoom 4s ease-out 2s infinite; opacity: 0; }
@keyframes gnvWave { to { transform: translateX(-10px); opacity: .3; } }
@keyframes gnvWake { 50% { opacity: .12; } }
@keyframes gnvSmoke { 0% { transform: translate(0, 0) scale(.6); opacity: .9; } 100% { transform: translate(-14px, -6px) scale(1.8); opacity: 0; } }
@keyframes gnvPlume { 0% { transform: translate(4px, 10px) scale(.5); opacity: .95; } 100% { transform: translate(-10px, -14px) scale(1.7); opacity: 0; } }
@keyframes gnvFlame { from { transform: scale(.85, .8) skewX(-6deg); } to { transform: scale(1.08, 1.15) skewX(6deg); } }
@keyframes gnvGlow { to { opacity: .55; } }
@keyframes gnvTrace { 0% { stroke-dashoffset: 26; opacity: 0; } 5% { opacity: 1; } 38% { stroke-dashoffset: -230; opacity: 1; } 42%, 100% { stroke-dashoffset: -260; opacity: 0; } }
@keyframes gnvCol { 0%, 40% { transform: scaleY(.05); opacity: 0; } 46% { opacity: .95; } 58% { transform: scaleY(1); opacity: .9; } 100% { transform: scaleY(.2) scaleX(2.2); opacity: 0; } }
@keyframes gnvRing { 0%, 41% { transform: scale(.2); opacity: 0; } 46% { opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes gnvBoom { 0%, 60% { transform: scale(.1); opacity: 0; } 64% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(2.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gnv * { animation: none !important; } }
/* ludo art: a printed board in a wooden frame seen at an angle, turned pawns, an ivory die (3D) thrown now and then */
.gc-ld { --accent: #e3a21a; }
.gld-board { position: relative; z-index: 1; width: 180px; height: 180px; transform: perspective(700px) rotateX(26deg) rotate(-8deg);
  filter: drop-shadow(0 18px 20px rgba(0,0,0,.65)); overflow: visible; }
.gld-die { position: absolute; z-index: 2; left: calc(50% + 70px); top: 20%; width: 38px; height: 38px; container-type: size; perspective: 300px;
  animation: gldHop 5s ease-in-out infinite; }
.gld-die::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: -18%; height: 34%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); }
.gld-cube { position: absolute; inset: 0; transform-style: preserve-3d; animation: gldCube 5s cubic-bezier(.3,.7,.3,1) infinite; }
.gld-f { position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 15%; box-sizing: border-box; border-radius: 16%;
  background: radial-gradient(130% 130% at 28% 22%, #fffef9 0%, #f3ecdc 55%, #d9cdb2 100%); box-shadow: inset 0 0 0 1px rgba(140,115,75,.3), inset 0 0 6cqw rgba(150,120,70,.28);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gld-f i { place-self: center; width: 64%; aspect-ratio: 1; border-radius: 50%; }
.gld-f i.on { background: radial-gradient(circle at 40% 35%, #3b3a44, #0e0e13 70%); box-shadow: inset 0 1px 1px rgba(0,0,0,.7); }
.gld-f.gf1 { transform: translateZ(50cqw); } .gld-f.gf6 { transform: rotateY(180deg) translateZ(50cqw); }
.gld-f.gf3 { transform: rotateY(90deg) translateZ(50cqw); } .gld-f.gf4 { transform: rotateY(-90deg) translateZ(50cqw); }
.gld-f.gf2 { transform: rotateX(90deg) translateZ(50cqw); } .gld-f.gf5 { transform: rotateX(-90deg) translateZ(50cqw); }
@keyframes gldHop { 0%, 55%, 100% { transform: none; } 68% { transform: translate(-12px, -22px); } 82% { transform: translateY(2px); } }
@keyframes gldCube { 0%, 55% { transform: rotateX(-20deg) rotateY(-24deg) rotateX(0deg) rotateY(180deg); }
  85%, 100% { transform: rotateX(-20deg) rotateY(-24deg) rotateX(360deg) rotateY(540deg); } }
@media (prefers-reduced-motion: reduce) { .gld-die, .gld-cube { animation: none; } .gld-cube { transform: rotateX(-20deg) rotateY(-24deg) rotateY(180deg); } }

/* full screen at a game's table (any game): the site's bar and footer go; the icon of the button shows the way it goes */
.fs-btn .fs-off { display: none; } .fs-btn.on .fs-off { display: inline; } .fs-btn.on .fs-on { display: none; }
body.game-fs[data-page="table"] { --top: 0px; }
body.game-fs[data-page="table"] header.top, body.game-fs[data-page="table"] footer.site-foot { display: none; }
body.game-fs[data-page="table"] .page#table { max-width: none; margin-top: 0; padding-top: 10px; }/* full screen at a table: the page is exactly the screen, nothing scrolls (each game fits its parts in, and lets only
   its long lists scroll inside); the small "Leave" waits in the game's bar always (.fs-leave) */
body.game-fs[data-page="table"] { height: 100dvh; overflow: hidden; }
body.game-fs[data-page="table"] .page#table { height: 100dvh; margin: 0; padding: 10px 12px; box-sizing: border-box; overflow: hidden; }
/* the word game: a small full-screen button at the top right of the letter's card */
@media (max-width: 899px) { .stage { position: relative; } }
.zoo-fs { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 10px;
  border: 1px solid var(--stroke2); background: var(--glass); color: var(--muted); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.zoo-fs:hover { background: var(--glass2); color: var(--text); border-color: rgba(255,255,255,.3); }
.zoo-fs svg.i { width: 17px; height: 17px; }
.zoo-fs.hidden { display: none; }
body.game-fs[data-page="game"] { --top: 0px; }
body.game-fs[data-page="game"] header.top, body.game-fs[data-page="game"] footer.site-foot { display: none; }
/* the word game: "Leave" at the top left of the letter's card (the full-screen button is at the top right) */
.zoo-leave { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px; border-radius: 10px;
  border: 1px solid var(--stroke2); background: var(--glass); color: var(--muted); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s; }
.zoo-leave:hover { background: rgba(255,77,94,.14); color: #ffd9dc; border-color: rgba(255,120,130,.6); }
.zoo-leave svg.i { width: 16px; height: 16px; }/* (room above the letter for the two small buttons, so they never sit on it) */
#stage { padding-top: 54px; }
/* ================= leaving a game (every game): a small card in the middle, in the games' style ================= */
.overlay.modal .sheet.qd { width: min(360px, 100%); max-width: 360px; padding: 26px 22px 20px; text-align: center; border-radius: 26px; overflow: visible;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255,110,120,.18), transparent 62%), linear-gradient(165deg, rgba(42,31,100,.97), rgba(17,13,44,.98));
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 80px -20px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.1); }
.qd-ic { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; color: #ffc2c7;
  background: radial-gradient(circle at 35% 30%, rgba(255,150,160,.38), rgba(255,77,94,.12) 70%);
  box-shadow: 0 0 0 1px rgba(255,140,150,.4), 0 0 30px rgba(255,77,94,.35); animation: qdIn .5s cubic-bezier(.3,1.5,.5,1); }
.qd-ic.gold { color: #ffe08a; background: radial-gradient(circle at 35% 30%, rgba(255,224,138,.38), rgba(255,207,77,.1) 70%);
  box-shadow: 0 0 0 1px rgba(255,216,102,.45), 0 0 30px rgba(255,207,77,.3); }
.qd-ic svg.i { width: 26px; height: 26px; }
.qd h2 { margin: 0 0 6px; font-size: 20px; font-weight: 900; letter-spacing: -.3px; }
.qd-txt { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
/* what leaving costs: a gold chip and the amount, in red */
.qd-cost { margin: 16px auto 0; width: max-content; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 20px 8px;
  border-radius: 16px; background: rgba(255,77,94,.1); border: 1px solid rgba(255,110,120,.35); animation: qdIn .45s .08s cubic-bezier(.3,1.5,.5,1) backwards; }
.qd-cost.hidden { display: none; }
.qd-cost small { font-size: 10.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: #ffb3b8; }
.qd-cost b { display: inline-flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 900; line-height: 1.1; color: #ff8a93; font-variant-numeric: tabular-nums; }
.qd-chip { width: 22px; height: 22px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c9, #ffcf4d 55%, #b8860b);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), inset 0 0 0 5px rgba(184,134,11,.7), 0 2px 6px rgba(0,0,0,.5); }
/* two small buttons side by side */
.qd-acts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sheet .qd-b { width: auto; }
.qd-b { height: 38px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
  font: 800 13px 'Inter', system-ui, sans-serif; letter-spacing: .3px; color: #fff; white-space: nowrap; transition: transform .1s, filter .15s, background .15s, opacity .15s; }
.qd-b svg.i { width: 15px; height: 15px; }
.qd-b.keep { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); }
.qd-b.keep:hover { background: rgba(255,255,255,.15); }
.qd-b.go { border: 0; background: linear-gradient(180deg, #ff8a8f, #e02c47); box-shadow: 0 3px 0 #8f1631, 0 8px 18px -6px rgba(224,44,71,.6); }
.qd-b.go:hover { filter: brightness(1.08); }
.qd-b:active { transform: translateY(1px); }
.qd-b.loading { opacity: .6; pointer-events: none; }
@keyframes qdIn { from { transform: scale(.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .qd-ic, .qd-cost { animation: none; } }
/* ---------- my look (twenty-one, Ten Steps, backgammon, biriba, ludo): the button on the setup, the window ---------- */
.lk-mine { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 14px; padding: 10px 14px 10px 10px; box-sizing: border-box; border-radius: 18px; cursor: pointer;
  text-align: left; color: var(--text); background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid var(--stroke);
  transition: border-color .2s, box-shadow .2s; }
.lk-mine:hover { border-color: rgba(255,216,102,.55); box-shadow: 0 0 18px -6px rgba(255,216,102,.6); }
.lk-mine-pv { flex: none; display: grid; place-items: center; width: 92px; height: 62px; overflow: hidden; }
.lk-mine-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.lk-mine-t b { font-size: 14.5px; }
.lk-mine-t small { font-size: 12px; color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; }
.lk-mine-go { flex: none; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #2a1800; background: linear-gradient(180deg, #ffe38a, #e5a92e); }
body.lk-lock { overflow: hidden; }
.lkm { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(4,3,14,.66); animation: fade .2s; }
.lkm.hidden { display: none; }
.lkm-box { display: flex; flex-direction: column; width: min(520px, 100%); max-height: calc(100dvh - 32px); box-sizing: border-box; overflow: hidden; padding: 18px 16px 14px;
  border-radius: 24px; color: var(--text); background: linear-gradient(165deg, rgba(42,31,100,.98), rgba(17,13,44,.98)); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); }
.lkm-t { margin: 0 0 10px; text-align: center; font-size: 14px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #ffe08a; }
.lkm-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px 6px; }
.lkm-live { display: grid; place-items: center; height: 104px; margin: 0 0 4px; overflow: hidden; }
.lkm-live > * { transform: scale(1.5); }
.lkm-h { margin: 14px 0 7px; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lkm-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(112px, 100%), 1fr)); gap: 8px; min-width: 0; }
.lkm-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 8px 6px 7px; border-radius: 14px; cursor: pointer; color: var(--text);
  background: rgba(255,255,255,.04); border: 1px solid var(--stroke); overflow: hidden; transition: transform .15s, border-color .2s; }
.lkm-tile:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.35); }
.lkm-tile.on { border-color: #ffd866; box-shadow: 0 0 0 1px #ffd866, 0 0 18px -6px rgba(255,216,102,.7); background: rgba(255,216,102,.08); }
.lkm-tile small { display: block; width: 100%; font-size: 10.5px; font-weight: 700; line-height: 1.25; text-align: center; color: rgba(223,228,255,.8);
  overflow-wrap: anywhere; hyphens: auto; }
.lkm-pv { display: grid; place-items: center; width: 100%; height: 66px; overflow: hidden; }
.lkm-note { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.lkm-acts { flex: none; display: flex; gap: 8px; justify-content: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }
.lkm-acts .btn { flex: 1; max-width: 200px; }
/* the previews: cards, a cloth, a board, a die */
.lkp-cards { display: flex; align-items: center; justify-content: center; }
.lkp-cards .lkp-cd { --cw: 34px; box-shadow: 0 6px 12px -6px rgba(0,0,0,.8); }
.lkp-cards .lkp-cd + .lkp-cd { margin-left: -8px; transform: rotate(8deg); }
.lkp-felt { display: flex; align-items: center; justify-content: center; width: 88px; height: 58px; border-radius: 10px;
  background: radial-gradient(ellipse at 50% 40%, var(--f1), var(--f2) 62%, var(--f3)); box-shadow: inset 0 0 0 3px var(--rim1), inset 0 0 0 5px var(--rim2), 0 8px 16px -8px rgba(0,0,0,.8); }
.lkp-felt .lkp-cd { --cw: 26px; } .lkp-felt .lkp-cd + .lkp-cd { margin-left: -6px; transform: rotate(8deg); }
.lkp-ld.ld-mini-box { position: relative; left: auto; top: auto; width: 54px; height: 54px; transform: none; margin: 6px; }
.lkp-tv { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; }
.lkp-tv .tv-mini { position: relative; left: auto; top: auto; width: 86px; --u: .555px; animation: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.lkp-tv .tv-mini .art-ck { --u: .555px; animation: none; }
.lkp-row { display: inline-flex; align-items: center; gap: 8px; }
.lkp-cks { position: relative; display: block; width: 92px; height: 50px; --u: 4.2px; }
.lkp-cks .ck { left: 30%; top: 46%; transition: none; }
.lkp-cks .ck.p1 { left: 70%; }
.lkp-cks.one { --u: 5.4px; }
.lkp-cks.one .ck.p0 { left: 32%; } .lkp-cks.one .ck.p1 { left: 68%; }
.lkp-die { display: inline-grid; place-items: center; width: 40px; height: 40px; perspective: 400px; }
.lkp-die .tv-die.art-die { --u: 6.5px; position: relative; left: auto; top: auto; margin: 0; animation: none; }
/* the games' pictures drawn 280 × 180 (ploutos, draughts, battleship): never taller than their card's picture space
   (a phone: it is lower), so nothing is cut at the bottom — they scale down whole instead */
.gpu, .gnt, .gnv { max-height: calc(100% - 14px); }
@media (max-width: 640px) { .gpu, .gnv { align-self: start; margin-top: 8px; max-height: calc(100% - 42px); } }
/* ================= the final standings: flags in the breeze, a trophy, a podium of stone by place ================= */
.end { position: relative; overflow: hidden; padding: 34px 22px 24px; }
.end-bunting { position: absolute; left: -2%; right: -2%; top: 0; height: 46px; display: flex; justify-content: space-between; pointer-events: none;
  background: radial-gradient(60% 18px at 50% 0, transparent 97%, rgba(255,255,255,.35) 98%, transparent 100%) 0 -2px / 100% 22px no-repeat; }
.end-bunting i { position: relative; top: calc(6px + sin(var(--i) * 0.48rad) * 6px); width: 22px; height: 26px; transform-origin: 50% 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%); animation: endFlap 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.21s);
  background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 60%), var(--fc); filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); }
.end-bunting i:nth-child(5n+1) { --fc: #ff5a6e; } .end-bunting i:nth-child(5n+2) { --fc: #ffcf4d; } .end-bunting i:nth-child(5n+3) { --fc: #5fd1f0; }
.end-bunting i:nth-child(5n+4) { --fc: #a6f56b; } .end-bunting i:nth-child(5n+5) { --fc: #a28dff; }
@keyframes endFlap { 0%, 100% { transform: rotate(-7deg) skewX(4deg); } 50% { transform: rotate(8deg) skewX(-5deg); } }
.end-head { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 16px; }
.end-trophy { width: 54px; height: 54px; filter: drop-shadow(0 6px 14px rgba(255,207,77,.45)); animation: endTrophy 3s ease-in-out infinite; }
.end-trophy svg { width: 100%; height: 100%; display: block; }
@keyframes endTrophy { 50% { transform: translateY(-4px) rotate(-3deg); } }
.end-head h2 { margin: 0; font-size: 21px; font-weight: 900; letter-spacing: -.2px; }
/* the podium: three steps of stone, the first the highest; the place cut in the front; a flag on the first */
.podium { gap: 6px; margin: 26px 0 18px; padding: 0 4px; border-bottom: 3px solid rgba(255,255,255,.08); }
.pd { position: relative; gap: 6px; }
.pd .ava { width: 54px; height: 54px; border-radius: 50%; font-size: 20px; box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 10px 20px -8px rgba(0,0,0,.8); }
.pd.p1 .ava { width: 66px; height: 66px; box-shadow: 0 0 0 3px #ffcf4d, 0 0 26px rgba(255,207,77,.45), 0 12px 24px -8px rgba(0,0,0,.8); }
.pd.p2 .ava { box-shadow: 0 0 0 3px #d9dde8, 0 10px 20px -8px rgba(0,0,0,.8); }
.pd.p3 .ava { box-shadow: 0 0 0 3px #d08a52, 0 10px 20px -8px rgba(0,0,0,.8); }
.pd-crown { width: 30px; height: 30px; margin-bottom: -8px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); animation: bob 2s ease-in-out infinite; }
.pd b { font-size: 13.5px; }
.pd-sc { font-style: normal; font-size: 13px; font-weight: 900; padding: 2px 10px; border-radius: 999px; background: rgba(0,0,0,.3); font-variant-numeric: tabular-nums; }
.pd .col { position: relative; padding: 0; align-items: center; overflow: visible; border: 0; border-radius: 10px 10px 2px 2px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -10px 18px rgba(0,0,0,.25), 0 12px 22px -12px rgba(0,0,0,.9); }
.pd .col::before { content: ''; position: absolute; left: -3px; right: -3px; top: -8px; height: 10px; border-radius: 6px 6px 2px 2px; background: inherit; filter: brightness(1.25);
  box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.pd.p1 .col { background: linear-gradient(180deg, #ffe08a, #e5a92e 55%, #a8721a); }
.pd.p2 .col { background: linear-gradient(180deg, #f1f3f8, #b8bfcc 55%, #7d8596); }
.pd.p3 .col { background: linear-gradient(180deg, #f0b98a, #c47a3e 55%, #8a4d1e); }
.pd-n { position: relative; z-index: 1; margin-top: 14px; font-size: 34px; font-weight: 900; line-height: 1; color: rgba(0,0,0,.28);
  text-shadow: 0 1px 0 rgba(255,255,255,.45), 0 -1px 0 rgba(0,0,0,.2); }
.pd.p1 .pd-n { font-size: 44px; }
/* (the flag on the first step: a pole and a pennant in the breeze) */
.pd-flag { position: absolute; right: 10%; top: -54px; width: 3px; height: 48px; border-radius: 2px; background: linear-gradient(90deg, #ddd, #888); }
.pd-flag i { position: absolute; left: 3px; top: 2px; width: 26px; height: 16px; transform-origin: 0 50%; clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: linear-gradient(180deg, #ff6b7d, #d8263f); animation: endPennant 1.6s ease-in-out infinite; }
@keyframes endPennant { 0%, 100% { transform: skewY(-6deg) scaleX(1); } 50% { transform: skewY(7deg) scaleX(.86); } }
.end .rest .st { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); }
.end-acts { margin-top: 18px; }
.qd-b.gold { border: 0; color: #2a1800; background: linear-gradient(180deg, #fff1b8, #ffd866 40%, #e5a92e); box-shadow: 0 3px 0 #7a4c10, 0 8px 18px -6px rgba(229,169,46,.6); }
.qd-b.gold:hover { filter: brightness(1.06); }
@media (prefers-reduced-motion: reduce) { .end-bunting i, .end-trophy, .pd-flag i, .pd-crown { animation: none; } }
/* twenty-one: what you leave with — green when won, red when lost, plain when neither; under it, the table */
.qd-cost.cash { width: auto; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.qd-cost.cash small { color: #d9d6f5; text-transform: none; letter-spacing: .1px; font-size: 12.5px; text-align: center; }
.qd-cost.cash b { color: #fff; }
.qd-cost.cash.pos { background: rgba(80,220,150,.1); border-color: rgba(80,220,150,.35); }
.qd-cost.cash.pos small { color: #9fe8c2; } .qd-cost.cash.pos b { color: #7ee2ad; }
.qd-cash-sub { margin: 2px 0 0; max-width: 260px; font-size: 11.5px; font-weight: 600; line-height: 1.35; text-align: center; color: rgba(255,255,255,.62); }
.qd-cost.cash.neg { background: rgba(255,90,100,.1); border-color: rgba(255,90,100,.35); }
.qd-cost.cash.neg small { color: #ffb3b8; } .qd-cost.cash.neg b { color: #ff8a93; }
.t21-cashnote { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }

/* (2026-10) the settings: one size whatever the tab (profile, security, account), modern; the picture's buttons small */
.set-sheet { display: flex; flex-direction: column; height: min(600px, 90dvh); max-height: 90dvh; }
.set-sheet > .set-pane { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.set-sheet .set-tabs { flex: none; margin-bottom: 14px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.set-sheet .set-tabs button { border-radius: 10px; font-size: 13px; font-weight: 800; }
.set-sheet .ava-row { gap: 16px; padding: 14px; margin-bottom: 14px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.set-sheet .ava-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ava-chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 10px; border-radius: 11px; cursor: pointer;
  font: 700 12.5px 'Inter', system-ui, sans-serif; color: var(--text); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); }
.ava-chip:hover { border-color: rgba(170,150,255,.6); }
.ava-chip svg.i { width: 16px; height: 16px; }
.ava-chip.del { color: #ffb3b8; }
.ava-chip.del:hover { border-color: rgba(255,90,100,.6); }
.ava-chip.hidden { display: none; }
.set-sheet .set-row, .set-sheet .acc { border-radius: 16px; }

/* (2026-10) inside the games: the windows (offers, deeds, auctions, results) and the side panels get small, quiet
   buttons like Last Card's — the home page, the setup and the waiting room keep their big ones, and so do the
   buttons you play with (roll, draw, hit…) */
:is(#puModal, #results, #review, .t21-side, .pm-acts, .lkm-acts) .btn { height: 38px; padding: 0 16px; border-radius: 12px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .2px; text-transform: none; text-shadow: none; box-shadow: 0 4px 12px -6px rgba(0,0,0,.7); }
:is(#puModal, #results, #review, .t21-side, .pm-acts, .lkm-acts) .btn::before { display: none; }
:is(#puModal, #results, #review, .t21-side, .pm-acts, .lkm-acts) .btn:active { transform: translateY(1px); box-shadow: 0 2px 6px -4px rgba(0,0,0,.7); }
:is(#puModal, #results, #review, .t21-side, .pm-acts, .lkm-acts) .btn svg.i { width: 16px; height: 16px; stroke-width: 2.2; filter: none; }
:is(#puModal, #results, #review, .t21-side, .pm-acts, .lkm-acts) .btn-primary { color: #2a1800; background: linear-gradient(180deg, #ffe58f 0%, #f6c84a 48%, #e3a61f 100%); }
:is(#puModal, #results, #review, .t21-side, .pm-acts, .lkm-acts) .btn-secondary { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
:is(#puModal, #results, #review, .t21-side, .pm-acts, .lkm-acts) .btn-sm { height: 34px; }
/* the small tools on the tables (leave, full screen, sound, pause): one look in every game — dark glass, a fine edge,
   12px corners, a gold edge when pointed at (the leave one red) */
.tool21, .pause-mini, .tv-tool, .nt-tool, .nv-tool, .pu-tool, .zoo-leave, .zoo-fs { border-radius: 12px !important; background: rgba(10,8,30,.55) !important;
  border: 1px solid rgba(255,255,255,.16) !important; color: #f1ecff !important; box-shadow: none !important; }
.tool21:hover, .pause-mini:hover, .tv-tool:hover, .nt-tool:hover, .nv-tool:hover, .pu-tool:hover, .zoo-fs:hover { border-color: rgba(255,216,102,.55) !important; }
.fs-leave:hover, .nv-leave:hover, .tv-leave:hover, .nt-leave:hover, .zy-leave:hover, .zoo-leave:hover { border-color: rgba(255,90,78,.6) !important; color: #ffb3ab !important; }

/* ---------- the leaderboard (lib/board.js): podium, the list as long as it is, my place at the bottom, a player's card */
.lbx { display: flex; flex-direction: column; }
.lbx-sub { margin: -6px 0 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.lbx-total { align-self: flex-start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
  color: var(--muted); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.lbx-total:empty { display: none; }
.lbx .podium { margin-top: 30px; }
.lbx .pd { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lbx .pd .ava, .lbx .pd b { transition: transform .18s; }
.lbx .pd:hover .ava { transform: translateY(-3px) scale(1.04); }
.lbx .pd.me b { color: #ff9cc0; }
.lbx .pd-sc small { font-size: 10px; font-weight: 700; opacity: .7; }
.lbx-list { gap: 6px; }
.lbx-row { width: 100%; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; background: rgba(255,255,255,.045);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: background .15s, transform .15s; animation: in .35s ease backwards; -webkit-tap-highlight-color: transparent; }
.lbx-row:hover { background: rgba(255,255,255,.09); }
.lbx-row:active { transform: scale(.99); }
.lbx-row .pos { width: auto; min-width: 26px; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.lbx-row .tot small { display: block; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: lowercase; }
.lbx-row.me { background: linear-gradient(90deg, rgba(255,77,141,.2), rgba(124,92,255,.14)); box-shadow: inset 0 0 0 1.5px rgba(255,77,141,.55); }
.lbx-sent { display: flex; justify-content: center; padding: 16px 0 6px; }
.lbx-spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.7); border-right-color: transparent; animation: spin .8s linear infinite; }
/* my place: a bar that stays at the bottom of the window while the list scrolls under it */
.lbx-me { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 14px; border-radius: 16px;
  font-size: 13.5px; font-weight: 800; line-height: 1.35; background: linear-gradient(90deg, rgba(70,30,100,.98), rgba(40,28,104,.98));
  box-shadow: inset 0 0 0 1.5px rgba(255,77,141,.5), 0 -10px 24px -8px rgba(0,0,0,.75), 0 10px 20px -10px rgba(0,0,0,.6); }
.lbx-me .ava.sm { width: 30px; height: 30px; border-radius: 10px; font-size: 12px; }
.lbx-me .ava .ava-on { display: none; }
/* a player's card */
.lbx-ov { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4,3,14,.74);
  animation: fade .2s; }
/* (the blur behind the card only with a mouse: on phones a blur coming in over the whole page flashes — a darker shade instead) */
@media (hover: hover) and (pointer: fine) { .lbx-ov { background: rgba(4,3,14,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } }
.lbx-ov.out { opacity: 0; transition: opacity .2s; }
.lbx-wait { opacity: 0; animation: spin .8s linear infinite, lbxWait .2s .25s forwards; }     /* (only when the answer is slow) */
@keyframes lbxWait { to { opacity: 1; } }
.lbx-card { position: relative; width: min(340px, 100%); padding: 26px 20px 20px; border-radius: 26px; text-align: center; color: #fff;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255,77,141,.22), transparent 60%), linear-gradient(165deg, #2e2270, #1a1440 60%, #3a1640);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 80px rgba(0,0,0,.65); animation: popIn .3s cubic-bezier(.3,1.3,.5,1); }
.lbx-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: #fff; background: rgba(255,255,255,.08); }
.lbx-x svg.i { width: 16px; height: 16px; }
.lbx-c-in { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 120px; justify-content: center; }
.lbx-card .ava.big { width: 78px; height: 78px; border-radius: 50%; font-size: 30px; box-shadow: 0 0 0 3px rgba(255,255,255,.2), 0 14px 30px -10px rgba(0,0,0,.8); }
.lbx-card .ava.big .ava-on { width: 16px; height: 16px; right: 2px; bottom: 2px; border-width: 3px; }
.lbx-card h3 { margin: 4px 0 0; font-size: 20px; font-weight: 900; word-break: break-word; }
.lbx-lvl { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 900; color: #3a2400;
  background: linear-gradient(180deg, #fff1b8, #ffd866 45%, #e5a92e); box-shadow: 0 3px 0 #7a4c10, 0 8px 18px -6px rgba(229,169,46,.6); }
.lbx-lvl svg { width: 15px; height: 15px; fill: #7a4c10; }
.lbx-on { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.lbx-on i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); }
.lbx-on.on { color: var(--lime); }
.lbx-on.on i { background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.lbx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 8px; }
.lbx-st { display: flex; flex-direction: column; gap: 3px; padding: 10px 4px; border-radius: 14px; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.lbx-st b { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.lbx-st small { font-size: 10.5px; font-weight: 700; color: var(--muted); line-height: 1.2; }
.lbx-fav { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 14px;
  background: rgba(124,92,255,.16); box-shadow: inset 0 0 0 1px rgba(124,92,255,.35); }
.lbx-fav small { font-size: 12px; font-weight: 700; color: var(--muted); }
.lbx-fav b { font-size: 14px; font-weight: 900; text-align: right; }
.lbx-since { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .lbx-row, .lbx-card { animation: none; } }
/* ---------- choosing your picture (lib/avapick.js): one of the site's 100 */
.avp-ov { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4,3,14,.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .2s; }
.avp-ov.out { opacity: 0; transition: opacity .2s; }
.avp { display: flex; flex-direction: column; gap: 12px; width: min(560px, 100%); max-height: min(86vh, 760px); padding: 20px; border-radius: 26px; color: #fff;
  background: linear-gradient(165deg, #2e2270, #1a1440 60%, #3a1640); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 80px rgba(0,0,0,.65);
  animation: popIn .3s cubic-bezier(.3,1.3,.5,1); }
.avp-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.avp-h h3 { margin: 0; font-size: 19px; font-weight: 900; }
.avp-x { width: 34px; height: 34px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255,255,255,.08); }
.avp-x svg.i { width: 16px; height: 16px; }
/* (the list scrolls in its own box; the grid inside it keeps its full height, so the pictures never squeeze into one another) */
.avp-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 6px; }
.avp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 10px; }
.avp-it { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; min-height: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.06); overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255,255,255,.1); transition: transform .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.avp-it img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; pointer-events: none; }
.avp-it:hover { transform: scale(1.05); box-shadow: 0 0 0 2px rgba(255,255,255,.4); }
.avp-it.on { box-shadow: 0 0 0 3px #ff4d8d, 0 0 18px rgba(255,77,141,.55); }
.avp-it.saving::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.35) radial-gradient(circle, transparent 30%, transparent 31%); }
.avp-err { margin: 0; min-height: 0; font-size: 12.5px; color: #ff9aa4; text-align: center; }
.avp-err:empty { display: none; }
@media (max-width: 480px) { .avp { padding: 16px; } .avp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } }
/* the questions asked from inside the settings (remove your picture?) come over them, never behind */
#s-confirm, #s-avadel { z-index: 70; }

/* ---------- every game table: a quick double tap or click never selects (blues) the table, its cards or tiles, and a
   long press opens no menu — on any device; text fields stay as they are ---------- */
#table, #table *, .page.game-board, .page.game-board * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#table input, #table textarea, #table [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* ================= SIGN IN: Google, the hidden field against bots, forgot password ================= */
.btn-google { --edge: #b9b6cc; width: 100%; background: linear-gradient(180deg, #ffffff 0%, #eeedf6 100%); color: #26233f; text-shadow: none; text-transform: none; letter-spacing: .2px; font-weight: 800; text-decoration: none; }
.btn-google .i-g { width: 22px; height: 22px; flex: none; }
.or-line { display: flex; align-items: center; gap: 12px; margin: 4px 0; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: var(--stroke2); }
.hp-field { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.forgot-line { margin: -4px 0 0; text-align: right; font-size: 13px; }
/* the bars at the bottom of every page: "confirm your email", the admin's announcement */
.site-bars { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; width: min(720px, calc(100vw - 24px)); pointer-events: none; }
.site-bar { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; width: min(720px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 16px; background: linear-gradient(160deg, rgba(43,33,104,.96), rgba(26,21,66,.96)); border: 1px solid var(--stroke2); box-shadow: 0 18px 40px -16px rgba(0,0,0,.8); backdrop-filter: blur(10px); font-size: 14px; line-height: 1.35; pointer-events: auto; }
.site-bars .site-bar { position: relative; left: auto; bottom: auto; transform: none; width: 100%; }
.site-bar .sb-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.site-bar .sb-btn { height: 38px; padding: 0 14px; font-size: 12px; border-radius: 12px; flex: none; }
.site-bar .sb-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 10px; background: var(--glass2); display: grid; place-items: center; }
.vf-bar svg.i { color: var(--o); }
.vf-bar .vf-main { font-size: 14px; font-weight: 700; white-space: normal; overflow: visible; }
.vf-bar .vf-spam { margin-top: 3px; font-size: 12px; line-height: 1.4; color: rgba(233,230,255,.72); }
/* the eye next to a password (log in, sign up, a new password) */
.pwd-wrap { position: relative; }
.pwd-wrap input { padding-right: 48px; }
.pw-eye { position: absolute; top: 0; right: 3px; width: 42px; height: 100%; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; }
.pw-eye:hover, .pw-eye.on { color: var(--text); }
.pw-eye svg.i { width: 20px; height: 20px; }
.pw-eye .pw-slash { display: none; }
.pw-eye.on .pw-slash { display: inline; }
/* a new password / a link that no longer works: one card in the middle, the logo on top (phones too) */
.acct-page { min-height: calc(100vh - 70px); min-height: calc(100dvh - 70px); display: grid; place-items: center; padding: 32px 16px 56px; }
.acct-page .acct-card { width: min(440px, 100%); padding: 34px 30px 30px; text-align: center; }
.acct-page .acct-logo { display: block; width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 22px; box-shadow: 0 14px 34px -12px rgba(246,200,74,.55); }
.acct-page h1 { margin: 0 0 6px; font-size: clamp(22px, 5.5vw, 28px); font-weight: 900; letter-spacing: -.4px; line-height: 1.2; }
.acct-page .acct-sub { margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.acct-page .form { max-width: none; margin-top: 20px; text-align: left; }
.acct-page .acct-btn { width: 100%; margin-top: 6px; }
@media (max-width: 560px) {
  .acct-page { place-items: start center; padding-top: 22px; }
  .acct-page .acct-card { padding: 26px 18px 22px; }
  .acct-page .acct-logo { width: 64px; height: 64px; border-radius: 18px; }
}
@media (max-width: 560px) {
  .site-bar { flex-wrap: wrap; gap: 8px 10px; font-size: 13px; }
  .site-bar .sb-btn { margin-left: auto; }
}body[data-page="room"] .site-bar, body[data-page="game"] .site-bar, body[data-page="table"] .site-bar, body[data-page="room"] .site-bars, body[data-page="game"] .site-bars, body[data-page="table"] .site-bars { display: none; }
.fld select, .fld textarea { width: 100%; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 12px 14px; color: var(--text); font-size: 16px; outline: none; font-family: inherit; transition: border-color .2s; }
.fld select { height: 50px; padding: 0 12px; }
.fld select option { background: #1b1740; color: var(--text); }
.fld textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.fld select:focus, .fld textarea:focus { border-color: #a58fff; }
.contact-form { max-width: 560px; }/* the admin's messages: a window to one player, a banner to everyone */
.bc-modal { z-index: 80; }
.bc-modal .bc-txt { white-space: pre-line; text-align: left; font-size: 14.5px; color: var(--text); max-height: 50vh; overflow: auto; }
.bc-modal a.qd-b { text-decoration: none; color: inherit; }
.bc-bar svg.i { color: var(--c); }
.bc-bar.stack-up { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 70px); }
@media (max-width: 560px) { .bc-bar.stack-up { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 104px); } }
/* reporting a player */
.rp-who, .rp-why { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-opt { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 12px; background: rgba(0,0,0,.22); border: 1px solid var(--stroke2); font-size: 14px; cursor: pointer; }
.rp-opt input { accent-color: var(--p); margin: 0; }
.rp-opt:has(input:checked) { border-color: var(--p); background: rgba(255,77,141,.14); }.sh .rp-flag { margin-left: auto; margin-right: 6px; color: #ffb3b8; }
/* free chips for an ad: the window */
.ad-modal { z-index: 85; }
.overlay.modal .sheet.ad-sheet { position: relative; width: min(380px, 100%); padding: 26px 22px 18px; text-align: center; overflow: visible;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255,207,77,.22), transparent 62%), linear-gradient(170deg, #2b2168, #17133d); border: 1px solid rgba(255,216,102,.28); }
.ad-x { position: absolute; top: 10px; right: 10px; }
.ad-chip { position: relative; width: 104px; height: 104px; margin: -62px auto 10px; display: grid; place-items: center; }
.ad-chip i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c9, #ffcf4d 52%, #b8860b); box-shadow: 0 10px 26px -8px rgba(0,0,0,.7), inset 0 -5px 0 rgba(0,0,0,.18); }
.ad-chip i:nth-child(2) { inset: 9px; background: none; border: 3px dashed rgba(120,72,0,.55); box-shadow: none; animation: adSpin 14s linear infinite; }
.ad-chip i:nth-child(3) { inset: 22px; background: radial-gradient(circle at 40% 35%, #fff3b0, #f5c13b); box-shadow: inset 0 2px 6px rgba(0,0,0,.25); }
.ad-chip b { position: relative; font: 900 21px/1 'Inter', system-ui, sans-serif; color: #5a3500; letter-spacing: -.5px; }
@keyframes adSpin { to { transform: rotate(360deg); } }
.ad-sheet h2 { margin: 0 0 6px; font-size: 21px; font-weight: 900; }
.ad-txt { margin: 0 0 12px; color: #d8d3ff; font-size: 14px; line-height: 1.45; }
.ad-meter { display: grid; gap: 6px; justify-items: center; margin-bottom: 14px; }
.ad-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ad-dots i { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(180deg, #ffe08a, #e5a92e); box-shadow: 0 2px 0 #7a4c10; }
.ad-dots i.used { background: rgba(255,255,255,.14); box-shadow: none; }
.ad-left { color: var(--muted); font-size: 12px; font-weight: 700; }
.ad-state { display: none; align-items: center; justify-content: center; gap: 12px; margin: 0 0 14px; min-height: 48px; }
.ad-state.show { display: flex; }
.ad-ring { position: relative; width: 44px; height: 44px; flex: none; display: none; }
.ad-state.spin .ad-ring, .ad-state.ok .ad-ring { display: block; }
.ad-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.ad-ring circle { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 4; }
.ad-ring .arc { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 30 120; }
.ad-state.spin .ad-ring svg { animation: adSpin 1s linear infinite; }
.ad-state.ok .ad-ring .arc { stroke: #7ee2ad; stroke-dasharray: 120 0; }
.ad-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 900; color: #7ee2ad; }
.ad-msg { margin: 0; font-size: 13.5px; font-weight: 700; text-align: left; }
.ad-state.ok .ad-msg { color: #9fe8c2; } .ad-state.bad .ad-msg { color: #ffb3b8; }
/* the button: gold, a play mark in a dark tile, the chips it gives; when it can be pressed a shine runs over it now and
   then and a ring breathes round it; pressed, it sinks; not yet (a wait, the day's videos used): grey and still */
.ad-go-box { position: relative; }
.ad-go-pulse { position: absolute; inset: -5px; border-radius: 21px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px rgba(255,216,102,.7), 0 0 22px rgba(255,200,80,.45); }
.ad-go-box.ready .ad-go-pulse { animation: adPulse 2.4s ease-out infinite; }
@keyframes adPulse { 0% { opacity: .9; transform: scale(.97); } 70%, 100% { opacity: 0; transform: scale(1.06); } }
.ad-go { position: relative; isolation: isolate; overflow: hidden; width: 100%; height: 58px; display: flex; align-items: center; gap: 12px; padding: 0 9px 0 9px;
  border: 0; border-radius: 16px; cursor: pointer; color: #2a1800; font: 900 16px/1.15 'Inter', system-ui, sans-serif; letter-spacing: .2px; text-align: left;
  background: linear-gradient(180deg, #ffeaa8 0%, #f8ca4a 46%, #e1a21d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -3px 0 rgba(120,70,0,.32), 0 0 0 1px rgba(255,222,130,.7), 0 12px 26px -10px rgba(246,190,60,.85);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease; }
.ad-go:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -3px 0 rgba(120,70,0,.32), 0 0 0 1px rgba(255,230,150,.9), 0 18px 32px -10px rgba(246,190,60,.95); }
.ad-go:active:not(:disabled) { transform: translateY(1px) scale(.99); box-shadow: inset 0 2px 6px rgba(120,70,0,.35), 0 0 0 1px rgba(255,222,130,.7), 0 6px 14px -8px rgba(246,190,60,.7); }
.ad-go:focus-visible { outline: 2px solid #fff3c4; outline-offset: 3px; }
.ad-go-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #ffd866;
  background: linear-gradient(160deg, #3a2306, #1d1102); box-shadow: inset 0 0 0 1px rgba(255,216,102,.35), 0 3px 8px -3px rgba(60,30,0,.6); }
.ad-go-ic svg { width: 18px; height: 18px; fill: currentColor; margin-left: 2px; }
.ad-go-t { flex: 1; min-width: 0; }
.ad-go-amt { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px 0 7px; border-radius: 11px;
  background: rgba(42,24,0,.14); box-shadow: inset 0 0 0 1px rgba(120,70,0,.18); font-variant-numeric: tabular-nums; }
.ad-go-coin { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c9, #ffcf4d 52%, #b8860b); box-shadow: inset 0 0 0 1.5px rgba(120,72,0,.5); }
.ad-go-shine { position: absolute; top: -10%; bottom: -10%; left: 0; width: 28%; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform: translateX(-120%) skewX(-18deg); }
.ad-go-box.ready .ad-go-shine { opacity: 1; animation: adShine 3.4s ease-in-out infinite; }
@keyframes adShine { 0%, 58% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(460%) skewX(-18deg); } }
.ad-go:disabled { cursor: default; color: rgba(255,255,255,.62); background: linear-gradient(180deg, #4a4568, #2e2a47);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.ad-go:disabled .ad-go-ic { color: rgba(255,255,255,.45); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ad-go:disabled .ad-go-amt { display: none; }
@media (prefers-reduced-motion: reduce) { .ad-go-box.ready .ad-go-pulse, .ad-go-box.ready .ad-go-shine { animation: none; } }
.ad-note { margin: 12px 0 0; font-size: 11px; color: var(--dim); line-height: 1.4; }
.ad-join { display: inline-block; margin: 12px auto 0; padding: 4px 10px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700;
  text-decoration: underline; text-decoration-color: rgba(255,207,77,.45); text-underline-offset: 3px; cursor: pointer; }
.ad-join:hover, .ad-join:focus-visible { color: var(--gold); }/* the header button */
.bonus-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px 0 8px; border-radius: 999px; border: 1px solid rgba(255,216,102,.45);
  background: linear-gradient(180deg, rgba(255,216,102,.2), rgba(255,170,40,.08)); color: #ffe7a3; font-weight: 800; font-size: 13px; cursor: pointer; white-space: nowrap; }
.bonus-btn .bonus-coin { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c9, #ffcf4d 55%, #b8860b); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.bonus-btn:hover { filter: brightness(1.1); }
@media (max-width: 899px) { .bonus-btn span { display: none; } .bonus-btn { padding: 0 8px; } }
/* ================= the final standings (2026-10): black glass blocks with neon edges, the winner in gold ================= */
.end { background: radial-gradient(70% 55% at 50% 30%, rgba(255,190,70,.14), transparent 65%), radial-gradient(60% 50% at 15% 80%, rgba(60,170,255,.08), transparent 70%),
  radial-gradient(60% 50% at 85% 80%, rgba(190,90,255,.09), transparent 70%), linear-gradient(180deg, #14122a, #0b0a19); border-color: rgba(255,255,255,.07); }
.end .end-bunting { display: none; }
.podium.pd2 { position: relative; display: grid; grid-template-columns: 1fr 1.12fr 1fr; align-items: end; gap: 0; margin: 34px -6px 10px; padding: 0; border: 0; }
.pd2 .pd { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; animation: pdUp .7s cubic-bezier(.2,1.2,.4,1) both; animation-delay: var(--d); }
@keyframes pdUp { from { opacity: 0; transform: translateY(26px); } }
.pd2 .pd-who { position: relative; display: grid; place-items: center; width: 92px; height: 92px; }
.pd2 .pd-ava { width: 74px; height: 74px; border-radius: 50%; font-size: 30px; font-weight: 800; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.4); position: relative; z-index: 2;
  box-shadow: 0 0 0 5px #20212c, 0 0 0 9px var(--ring, #c9d1e0), 0 0 22px 4px var(--glow, rgba(150,200,255,.35)), 0 16px 26px -10px rgba(0,0,0,.9); }
.pd2 .p2 .pd-ava { --ring: #b9c4d6; --glow: rgba(110,200,255,.35); background: radial-gradient(circle at 35% 30%, #a9b4c8, #5c6578) !important; }
.pd2 .p3 .pd-ava { --ring: #b06be0; --glow: rgba(190,100,255,.4); background: radial-gradient(circle at 35% 30%, #c27ee8, #6a2a9c) !important; }
.pd2 .p1 .pd-who { width: 150px; height: 128px; margin-top: 18px; }
.pd2 .p1 .pd-ava { width: 82px; height: 82px; font-size: 34px; --ring: #f5c542; --glow: rgba(255,200,70,.55);
  box-shadow: 0 0 0 5px #3a2a08, 0 0 0 10px #f5c542, 0 0 0 12px #8a5a0a, 0 0 34px 8px rgba(255,190,60,.45), 0 18px 28px -10px rgba(0,0,0,.9); }
.pd2 .pd-ava .ava-img { border-radius: 50%; }
.pd2 .pd-laurel { position: absolute; left: 50%; top: 50%; width: 200px; height: 150px; max-width: none; max-height: none; transform: translate(-50%, -46%); z-index: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
@media (max-width: 560px) { .pd2 .pd-laurel { width: 142px; height: 106px; } }
.pd2 .pd-crown2 { position: absolute; top: -30px; left: 50%; width: 58px; height: 38px; transform: translateX(-50%); z-index: 3; filter: drop-shadow(0 0 8px rgba(255,207,77,.75)); animation: pdCrown 2.4s ease-in-out infinite; }
@keyframes pdCrown { 50% { transform: translate(-50%, -4px); } }
.pd2 .pd-name { margin-top: 6px; font-size: 17px; font-weight: 700; color: #e9e7f5; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd2 .p1 .pd-name { font-size: 19px; color: #fff; }
.pd2 .pd-base { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.pd2 .pd-sc { position: relative; z-index: 2; margin-bottom: -16px; font-style: normal; font-size: 17px; font-weight: 900; padding: 6px 16px; border-radius: 999px;
  background: rgba(14,13,22,.92); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px -8px rgba(0,0,0,.9); font-variant-numeric: tabular-nums; color: #9fb4cf; }
.pd2 .pd-sc.pos { color: #8fe0b8; } .pd2 .pd-sc.neg { color: #ff6b6b; }
.pd2 .p1 .pd-sc { font-size: 20px; color: #ffd866; }
.pd2 .p1 .pd-sc.neg { color: #ff6b6b; }
.pd2 .pd-block { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 26px rgba(0,0,0,.7)); }
.pd2 .p2 .pd-block { filter: drop-shadow(0 22px 26px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(60,190,255,.18)); }
.pd2 .p1 .pd-block { filter: drop-shadow(0 22px 26px rgba(0,0,0,.7)) drop-shadow(0 0 26px rgba(255,190,60,.25)); }
.pd2 .p3 .pd-block { filter: drop-shadow(0 22px 26px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(190,90,255,.2)); }
.pd2 .pd-sparks { position: absolute; inset: -30px 0 40%; pointer-events: none; }
.pd2 .pd-sparks b { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 3px; height: 3px; border-radius: 50%; background: #ffd27a;
  box-shadow: 0 0 6px 2px rgba(255,190,90,.7); animation: pdSpark 2.7s ease-in-out infinite; animation-delay: var(--d); opacity: .0; }
.pd2 .pd-sparks b:nth-child(3n) { background: #9ad9ff; box-shadow: 0 0 6px 2px rgba(120,200,255,.6); }
.pd2 .pd-sparks b:nth-child(4n) { background: #e2b4ff; box-shadow: 0 0 6px 2px rgba(200,140,255,.6); }
@keyframes pdSpark { 0%, 100% { opacity: 0; transform: scale(.4); } 45% { opacity: 1; transform: scale(1.2); } }
/* the two buttons under it: a dark pill home, a gold pill again */
.end .end-acts { gap: 16px; margin-top: 26px; }
.end .end-acts .qd-b { height: 54px; padding: 0 30px; font-size: 17px; font-weight: 800; gap: 10px; border-radius: 999px; }
.end .end-acts .qd-b svg.i { width: 20px; height: 20px; }
.end .end-acts .qd-b.keep { background: linear-gradient(180deg, #2b2a3b, #1b1a28); border: 1px solid rgba(255,255,255,.12); color: #d9d6ea; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px -12px rgba(0,0,0,.9); }
.end .end-acts .qd-b.gold { color: #2a1800; background: linear-gradient(180deg, #ffe58f, #f6c84a 48%, #e3a61f); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 0 #8a5a0a, 0 0 26px rgba(255,190,60,.35); }
@media (max-width: 560px) {
  .podium.pd2 { margin: 26px -10px 6px; }
  .pd2 .pd-who { width: 64px; height: 64px; } .pd2 .pd-ava { width: 52px; height: 52px; font-size: 21px; }
  .pd2 .p1 .pd-who { width: 104px; height: 92px; } .pd2 .p1 .pd-ava { width: 60px; height: 60px; font-size: 24px; }
  .pd2 .pd-crown2 { width: 42px; height: 28px; top: -22px; }
  .pd2 .pd-name { font-size: 13px; } .pd2 .p1 .pd-name { font-size: 15px; }
  .pd2 .pd-sc { font-size: 13px; padding: 4px 10px; margin-bottom: -12px; } .pd2 .p1 .pd-sc { font-size: 15px; }
  .end .end-acts .qd-b { height: 48px; padding: 0 22px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .pd2 .pd, .pd2 .pd-crown2, .pd2 .pd-sparks b { animation: none; opacity: 1; } }

/* ================= the buttons (2026-10): no more violet — gold for the main action, dark glass for the others ================= */
.btn-primary { --edge: #8a5a0a; color: #2a1800; text-shadow: none; background: linear-gradient(180deg, #ffe58f 0%, #f6c84a 48%, #e3a61f 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(0,0,0,.12), 0 6px 0 var(--edge), 0 0 24px -6px rgba(255,190,60,.45), 0 14px 22px -12px rgba(0,0,0,.8); }
.btn-primary svg.i { filter: none; }
.btn-primary:active { box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.12), 0 1px 0 var(--edge), 0 4px 10px -6px rgba(0,0,0,.8); }
.btn-secondary { --edge: #08070f; --cap: rgba(255,255,255,.1); background: linear-gradient(180deg, #2c2b3c 0%, #1b1a29 100%); color: #e6e3f5;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.1), 0 6px 0 var(--edge), 0 14px 22px -12px rgba(0,0,0,.8); }
.mr-play, .chat-fab, .bt-p, .tv-chat, .bt-ok { color: #2a1800 !important; text-shadow: none !important; }
.mr-play .mr-ico svg, .mr-play small, .mr-play b { color: #2a1800; }

/* ================= the looks shop: tables, card backs, dice, frames — big pictures, gold to buy ================= */
.overlay.modal .sheet.cs-sheet { width: min(920px, 100%); max-height: min(90vh, 940px); overflow: auto; padding: 0 0 18px;
  background: radial-gradient(80% 40% at 50% 0, rgba(255,200,90,.1), transparent 70%), linear-gradient(180deg, #17152a, #0d0c1a); border: 1px solid rgba(255,255,255,.08); }
.cs-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 20px 22px 12px; background: linear-gradient(180deg, #17152a 70%, rgba(23,21,42,0)); }
.cs-head > div { flex: 1; min-width: 0; }
.cs-head h2 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -.3px; }
.cs-head p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.cs-bal { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 8px; border-radius: 999px; background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,216,102,.35); font-size: 16px; font-weight: 900; color: #ffe08a; font-variant-numeric: tabular-nums; }
.cs-coin { width: 24px; height: 24px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c9, #ffcf4d 52%, #b8860b);
  box-shadow: inset 0 0 0 2px rgba(122,76,16,.45), inset 0 -2px 0 rgba(0,0,0,.2); }
.cs-tabs { display: flex; gap: 6px; margin: 2px 22px 16px; padding: 5px; border-radius: 999px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); overflow-x: auto; }
.cs-tabs button { flex: 1; min-width: max-content; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: #bdb8dc; font-weight: 800; font-size: 14px; cursor: pointer; }
.cs-tabs button.on { background: linear-gradient(180deg, #ffe58f, #e9b23a); color: #2a1800; box-shadow: 0 4px 14px -6px rgba(255,190,60,.6); }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; padding: 0 22px; }
.cs-card { position: relative; border-radius: 20px; overflow: hidden; background: #121020; border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 18px 34px -20px rgba(0,0,0,.9); animation: csIn .45s cubic-bezier(.2,1.2,.4,1) both; animation-delay: var(--d); transition: transform .2s, border-color .2s; }
/* lift and grow together so the card's bottom edge stays under the pointer (no flicker) */
.cs-card:hover { transform: translateY(-2px) scale(1.025); border-color: rgba(255,216,102,.3); }
.cs-card.on { border-color: rgba(255,216,102,.75); box-shadow: 0 0 0 1px rgba(255,216,102,.4), 0 0 30px -8px rgba(255,200,80,.45), 0 18px 34px -20px rgba(0,0,0,.9); }
@keyframes csIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.cs-art { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; }
.cs-art-table { background: center / cover no-repeat; }
.cs-art-table img { position: absolute; width: 22%; aspect-ratio: 2 / 3; filter: drop-shadow(0 8px 10px rgba(0,0,0,.55)); }
.cs-art-table .cs-c1 { left: 34%; top: 22%; transform: rotate(-10deg); } .cs-art-table .cs-c2 { left: 46%; top: 24%; transform: rotate(8deg); }
.cs-art-back { background: radial-gradient(70% 70% at 50% 40%, #2a2546, #0e0c1a); }
.cs-art-back img { position: absolute; height: 82%; aspect-ratio: 2 / 3; filter: drop-shadow(0 10px 14px rgba(0,0,0,.6)); }
.cs-art-back .cs-b1 { transform: translateX(-34%) rotate(-12deg); } .cs-art-back .cs-b3 { transform: translateX(34%) rotate(12deg); } .cs-art-back .cs-b2 { z-index: 1; }
.cs-art-dice { background: radial-gradient(70% 80% at 50% 40%, #1f6b4a, #0b2e20 80%); }
.cs-art-dice .cos-dice { transform: scale(1.15); }
.cs-art-frame { background: radial-gradient(70% 70% at 50% 40%, #2a2546, #0e0c1a); }
.cs-art-frame img { height: 86%; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.cs-foot { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.cs-foot b { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; font-weight: 900; font-size: 14px; cursor: pointer; white-space: nowrap; }
.cs-btn.buy { background: linear-gradient(180deg, #ffe58f, #f6c84a 48%, #e3a61f); color: #2a1800; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 0 #8a5a0a; }
.cs-btn.buy .cs-coin { width: 18px; height: 18px; }
.cs-where { margin: -4px 14px 12px; font-size: 12px; line-height: 1.35; color: #9fe6c1; }
.cs-btn:disabled { opacity: .5; pointer-events: none; }
@media (max-width: 560px) { .cs-grid { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px; } .cs-head { padding: 16px 14px 10px; } .cs-tabs { margin: 0 12px 12px; }
  .cs-foot { flex-wrap: wrap; } .cs-foot b { flex-basis: 100%; font-size: 13px; } }

/* ================= the controls (2026-10): gold instead of violet ================= */
.switch.on { background: linear-gradient(180deg, #ffd866, #e3a61f); }
.rng input { background: linear-gradient(90deg, #f6c84a, #ffb347) 0 0 / var(--pc) 100% no-repeat, rgba(255,255,255,.1); }
.rng input::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(255,200,80,.3), 0 3px 8px rgba(0,0,0,.4); }
.rng.thin input::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255,200,80,.3); }
.rng input::-moz-range-thumb { box-shadow: 0 0 0 5px rgba(255,200,80,.3); }
.rng input::-moz-range-progress { background: #f6c84a; }
.ks-track::before { background: linear-gradient(180deg, #b8860b, #f6c84a); }
.kswitch.is-ai .ks-r { color: #ffe08a; }
.kswitch.is-ai .ks-knob { color: #8a5a0a; }
.dd-list li.on { background: rgba(255,207,77,.16); }
.info-langs a.on { background: rgba(255,207,77,.2); color: #ffe08a; }
.acc-ico { color: #ffd77a; background: rgba(255,207,77,.1); }
.chat-form input:focus, .rcard:focus-visible { border-color: rgba(255,207,77,.75); }
.cm.me .cb { background: rgba(255,200,80,.16); border-color: rgba(255,200,80,.38); }
.seat-row.ai { border-color: rgba(255,207,77,.22); border-left-color: #f6c84a; background: rgba(255,207,77,.05); }
/* ================= THE WINDOWS (2026-10, v2): each game's own colour (--gacc) and mark; compact, quiet buttons ================= */
.overlay { background: rgba(3,2,10,.66); }
@media (min-width: 640px) { .overlay:not(#s-menu) { align-items: center; padding: 20px; } }
.sheet { position: relative; max-width: 460px; padding: 0 22px calc(20px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0;
  background: radial-gradient(90% 55% at 0% 0%, color-mix(in srgb, var(--gacc, #f6c84a) 16%, transparent), transparent 60%), linear-gradient(180deg, #181725, #11101b);
  backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 30px 70px -18px rgba(0,0,0,.9); }
.sheet::before { content: ''; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--gacc, #f6c84a), transparent); opacity: .85; }
@media (min-width: 640px) { .overlay:not(#s-menu) > .sheet { border-radius: 22px; animation: popIn .28s cubic-bezier(.25,1.2,.4,1); } .sheet .grab { display: none; } }
.set-sheet, .lbm-sheet { max-width: 520px; }
.grab { margin: 10px auto 4px; background: rgba(255,255,255,.16); }
/* the head: the game's mark in a tile, the title, a round close */
.sh { display: flex; align-items: center; gap: 12px; margin: 0 -22px 16px; padding: 16px 22px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.sh h2 { flex: 1; min-width: 0; font-size: 18px; font-weight: 800; letter-spacing: -.2px; color: #fff; }
.sh .icon-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); }
.sh .icon-btn svg.i { width: 17px; height: 17px; }
.sh .icon-btn:hover { background: rgba(255,255,255,.09); }
#s-menu .sheet { max-width: 300px; padding: 8px; border-radius: 18px; background: linear-gradient(180deg, #1a1929, #12111e); }
#s-menu .sheet::before { display: none; }
/* the fields: quiet, the game's colour when you write */
.form { gap: 12px; }
.fld label, .fld-label { font-size: 12px; font-weight: 700; color: #a9a4c2; margin-bottom: 6px; }
.fld input, .fld select, .fld textarea, .text-code { background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.08); border-radius: 11px; box-shadow: none; transition: border-color .2s, box-shadow .2s; }
.fld input { height: 44px; padding: 0 14px; font-size: 15px; }
.fld input:focus, .fld select:focus, .fld textarea:focus, .text-code:focus { border-color: color-mix(in srgb, var(--gacc, #f6c84a) 80%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gacc, #f6c84a) 22%, transparent); }
.fld input::placeholder { color: #5f5b78; }
.fld small { font-size: 11.5px; }
.chk input { accent-color: var(--gacc, #f6c84a); }
.link { color: color-mix(in srgb, var(--gacc, #f6c84a) 70%, #fff); font-weight: 700; }
.switch-line { font-size: 13px; color: #8f8aa8; margin: 2px 0 0; }
.form-err { color: #ff8f99; font-size: 12.5px; min-height: 16px; }
.forgot-line { margin: -2px 0 0; }
.forgot-line .link { font-size: 12.5px; color: #a9a4c2; font-weight: 600; }
.forgot-line .link:hover { color: #fff; }
.remember-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.remember-chk { align-items: center; font-size: 12.5px; }
.remember-chk input { margin: 0; }
/* sign up: the box for the terms (13+, terms, privacy) and the same words under "Continue with Google" */
.terms-chk { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: #b9b4d4; cursor: pointer; }
.terms-chk input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #f6c84a; cursor: pointer; }
.terms-chk a, .g-terms a { color: #f3d88a; text-decoration: underline; text-underline-offset: 2px; }
.terms-chk a:hover, .g-terms a:hover { color: #fff; }
.g-terms { margin: -2px 0 0; font-size: 11.5px; line-height: 1.45; color: #8f8aa8; text-align: center; }
/* the buttons of a window: compact, in the game's colour (never the big chunky ones) */
.sheet .btn { width: 100%; height: 44px; padding: 0 18px; border-radius: 11px; font-size: 14.5px; font-weight: 800; letter-spacing: .1px; text-transform: none; text-shadow: none; gap: 8px; }
.sheet .btn::before { display: none; }
.sheet .btn svg.i { width: 17px; height: 17px; filter: none; }
.sheet .btn-primary { --edge: transparent; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.25);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gacc, #f6c84a) 88%, #fff), color-mix(in srgb, var(--gacc, #f6c84a) 82%, #000));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 20px -10px color-mix(in srgb, var(--gacc, #f6c84a) 80%, transparent); }
.sheet .btn-primary:hover { filter: brightness(1.07); transform: none; }
.sheet .btn-primary:active, .sheet .btn-secondary:active { transform: translateY(1px); }
.sheet .btn-secondary { --edge: transparent; background: rgba(255,255,255,.06); color: #e6e3f5; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.sheet .btn-secondary:hover { background: rgba(255,255,255,.1); transform: none; }
.sheet .btn-danger { --edge: transparent; background: rgba(255,90,100,.14); color: #ffb0b7; box-shadow: inset 0 0 0 1px rgba(255,90,100,.35); text-shadow: none; }
.sheet .btn-sm { width: auto; height: 36px; padding: 0 16px; font-size: 13px; border-radius: 10px; }
/* Google: the official white button, compact */
.btn.btn-google { --edge: transparent; height: 44px; border-radius: 11px; background: #fff; color: #1f1f1f; text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 600;
  text-shadow: none; border: 1px solid #dadce0; box-shadow: 0 1px 2px rgba(0,0,0,.3); gap: 10px;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.btn.btn-google::before { display: none; }
/* (hover as Google's own button: a light grey shade and a lifted shadow — the logo and the words stay as they are) */
.btn.btn-google:hover { background: #eef1f6; border-color: #c4c9d2; box-shadow: 0 4px 14px -4px rgba(66,133,244,.55), 0 1px 3px rgba(0,0,0,.3); filter: none; transform: translateY(-1px); }
.btn.btn-google:active { background: #e3e7ee; box-shadow: 0 1px 2px rgba(0,0,0,.3); transform: none; }
.btn.btn-google .i-g { width: 18px; height: 18px; }
.or-line { font-size: 11px; color: #6f6a8c; letter-spacing: 1.2px; margin: 0; }
.or-line::before, .or-line::after { background: rgba(255,255,255,.08); }
/* tabs: a slim line under the chosen one, in the game's colour */
.seg, .set-sheet .set-tabs { display: flex; gap: 2px; padding: 0; margin: -6px 0 16px; border-radius: 0; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.seg button, .set-sheet .set-tabs button { flex: 1; height: 38px; border-radius: 0; background: none !important; color: #8f8aa8; font-size: 13px; font-weight: 700; box-shadow: none !important;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.seg button.on, .set-sheet .set-tabs button.on { color: #fff; border-bottom-color: var(--gacc, #f6c84a); }
/* settings: the picture beside its buttons, then the rows; no boxes in boxes */
.set-sheet { height: min(560px, 88dvh); }
.set-sheet .ava-row { display: flex; align-items: center; gap: 14px; padding: 0 0 16px; margin: 0 0 14px; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 0; background: none; }
.set-sheet .ava-big { width: 58px; height: 58px; font-size: 22px; border-radius: 50%; }
.ava-chip { height: 32px; padding: 0 12px 0 9px; border-radius: 9px; font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #e6e3f5; }
.ava-chip:hover { border-color: color-mix(in srgb, var(--gacc, #f6c84a) 60%, transparent); }
.set-actions { justify-content: flex-end; margin-top: 2px; }
.set-sheet .set-row, .set-sheet .acc, .acc { border-radius: 12px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); }
.acc summary, .set-row { padding: 11px 12px; gap: 11px; }
.acc-ico { width: 32px; height: 32px; border-radius: 9px; color: color-mix(in srgb, var(--gacc, #f6c84a) 75%, #fff); background: color-mix(in srgb, var(--gacc, #f6c84a) 12%, transparent); }
.acc-ico svg.i { width: 17px; height: 17px; }
.acc-t b { font-size: 14px; } .acc-t small { font-size: 12px; }
.acc[open] { border-color: color-mix(in srgb, var(--gacc, #f6c84a) 30%, transparent); }
.acc > .form { padding: 4px 12px 12px; }
.set-row .btn { width: auto; }
.dd-full .dd-btn { height: 44px; border-radius: 11px; background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.08); }
.menu-item:hover { background: rgba(255,255,255,.05); }

/* the contact page, the new-password page: a calm form, a compact button */
.contact-form { gap: 14px; max-width: 560px; }
.contact-form .fld input, .contact-form .fld select { height: 44px; }
.ct-acts { display: flex; justify-content: flex-end; }
.ct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; border: 0; border-radius: 11px; cursor: pointer;
  font: 800 14px/1 'Inter', system-ui, sans-serif; color: #2a1800; text-decoration: none; background: linear-gradient(180deg, #ffe58f, #e9b23a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 18px -10px rgba(255,190,60,.7); }
.ct-btn:hover { filter: brightness(1.05); text-decoration: none; }
.ct-btn svg.i { width: 16px; height: 16px; }
.ct-done { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 18px 8px 8px; }
.ct-done h2 { margin: 4px 0 0; }
.ct-done p { max-width: 440px; margin: 0 0 8px; color: var(--muted); }
.ct-ok { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #a9f2c9, #2fbf7a 60%, #157a4a);
  box-shadow: 0 0 0 8px rgba(47,191,122,.14), 0 16px 30px -12px rgba(47,191,122,.6); animation: popIn .45s cubic-bezier(.25,1.4,.4,1); }
.ct-ok svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.cs-mine { position: absolute; z-index: 2; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 7px; border-radius: 999px;
  background: rgba(10,30,20,.82); color: #9ff0c6; font-size: 11.5px; font-weight: 900; letter-spacing: .2px; box-shadow: 0 0 0 1px rgba(126,226,173,.45), 0 6px 14px -6px rgba(0,0,0,.8); backdrop-filter: blur(4px); }
.cs-mine svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cs-btn.buy:disabled { opacity: 1; filter: grayscale(.85) brightness(.6); cursor: not-allowed; box-shadow: none; }
.cs-short { margin: -6px 14px 12px; font-size: 11.5px; font-weight: 700; color: #ff9aa4; text-align: right; }

/* the looks shop (2026-10-18): wide on a computer (the window of the windows is narrower), the whole screen on a phone */
.overlay.modal .sheet.cs-sheet { width: 100%; max-width: min(1120px, calc(100vw - 40px)); max-height: min(92vh, 1000px); padding: 0 0 22px; border-radius: 26px; }
.cs-sheet .cs-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; padding: 0 24px; }
.cs-sheet .cs-head { padding: 22px 24px 12px; }
.cs-sheet .cs-tabs { margin: 2px 24px 18px; }
@media (max-width: 760px) {
  .overlay.modal .sheet.cs-sheet { max-width: calc(100vw - 16px); max-height: 94vh; border-radius: 20px; }
  .cs-sheet .cs-grid { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 10px; }
  .cs-sheet .cs-head { padding: 16px 12px 10px; gap: 10px; }
  .cs-sheet .cs-head h2 { font-size: 19px; }
  .cs-sheet .cs-head p { font-size: 12px; }
  .cs-sheet .cs-bal { height: 34px; padding: 0 12px 0 6px; font-size: 14px; }
  .cs-sheet .cs-tabs { margin: 0 10px 12px; }
  .cs-sheet .cs-tabs button { height: 34px; padding: 0 12px; font-size: 13px; }
  .cs-sheet .cs-foot { padding: 10px; }
  .cs-sheet .cs-where { margin: -4px 10px 10px; font-size: 11px; }
}
@media (max-width: 340px) { .cs-sheet .cs-grid { grid-template-columns: 1fr; } }

/* the picture's window (2026-10-18): the frames bought first, then the free pictures */
.avp-frames { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.avp-frames.hidden { display: none; }
.avp-sub { margin: 0 0 10px; font-size: 12px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: #ffd866; }
.avp-frow { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.avp-fr { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04); color: inherit; font: inherit; cursor: pointer; transition: transform .15s, border-color .2s; }
.avp-fr:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); }
.avp-fr.on { border-color: #ffd866; box-shadow: 0 0 0 1px #ffd866, 0 0 18px -6px rgba(255,216,102,.7); background: rgba(255,216,102,.08); }
.avp-fr-pic { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.avp-fr-me { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.1); }
.avp-fr-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.avp-fr small { font-size: 10.5px; font-weight: 700; line-height: 1.2; text-align: center; color: rgba(235,232,250,.85); }

/* the look windows of the games (2026-10-18): larger, every choice drawn larger so you see what you pick */
.lkm-box { width: min(840px, 100%); padding: 22px 22px 16px; }
.lkm-t { font-size: 15px; margin-bottom: 12px; }
.lkm-live { height: 170px; }
.lkm-live > * { transform: none; zoom: 2.1; }
.lkm-h { margin: 18px 0 9px; font-size: 12px; }
.lkm-row { grid-template-columns: repeat(auto-fill, minmax(min(168px, 100%), 1fr)); gap: 10px; }
.lkm-tile { gap: 8px; padding: 10px 8px 9px; border-radius: 16px; }
.lkm-tile small { font-size: 12px; }
.lkm-pv { height: 108px; }
.lkm-pv > * { zoom: 1.5; }
.lkm-pv > .cos-ut-art { zoom: 1; width: 94%; height: 94%; aspect-ratio: auto; }
.cos-uts { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; }
.cos-ut small { font-size: 12px; }
@media (max-width: 600px) {
  .lkm { padding: 8px; }
  .lkm-box { max-height: calc(100dvh - 16px); padding: 16px 12px 12px; border-radius: 20px; }
  .lkm-live { height: 132px; }
  .lkm-live > * { zoom: 1.7; }
  .lkm-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lkm-pv { height: 94px; }
  .lkm-pv > * { zoom: 1.3; }
  .lkm-pv > .cos-ut-art { zoom: 1; }
  .cos-uts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
i.avp-fr-me { display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 20px; color: #fff; background: linear-gradient(160deg, #3a3550, #1b1828); box-shadow: inset 0 0 0 1px rgba(255,216,102,.35); }
/* (the look windows of chess, draughts and battleship over the page's top bar too) */
#chLookModal, #ntLookModal, #nvLookModal { z-index: 400; }

/* (lib/scrolllock.js) while a window covers the screen the page behind it stays still, where it was */
html.wa-noscroll, html.wa-noscroll body { overflow: hidden !important; }
/* a window's own scroll stops at its ends: the wheel or the finger never goes on to the page behind */
.overlay, .overlay .sheet, .cs-sheet, .lkm, .lkm-body, .avp-ov, .avp-scroll, .nt-modal, .nv-modal, .rv-modal, .ch-lk-box, .nt-lk-box, .nv-lk-box, .rv-lk-box,
#puLookModal, #puLookModal .lk-body, .pm-box, .kl-res-in { overscroll-behavior: contain; }

/* the looks shop (2026-10-18): one fixed size whatever the tab — the head, the tabs and the close button never move;
   only the cards scroll inside; on a phone the whole screen */
#csModal { z-index: 300; }
.overlay.modal .sheet.cs-sheet { display: flex; flex-direction: column; overflow: hidden;
  width: min(1120px, calc(100vw - 40px)); max-width: min(1120px, calc(100vw - 40px)); height: min(86vh, 940px); min-height: min(86vh, 560px); max-height: none; padding: 0; }
.cs-sheet .cs-head { position: static; flex: none; background: none; }
.cs-sheet .cs-tabs { flex: none; }
/* the tabs: a pill that keeps its ends whole; inside it the tabs scroll sideways, fading at the end that has more, with
   an arrow there (it moves them) — so it shows there is more to see */
.cs-tabs-wrap { position: relative; flex: none; margin: 2px 24px 18px; border-radius: 999px; overflow: hidden; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); }
.cs-tabs-wrap .cs-tabs, .cs-sheet .cs-tabs-wrap .cs-tabs { margin: 0; border: 0; border-radius: 0; background: none; scrollbar-width: none; scroll-behavior: smooth; }
.cs-tabs-wrap .cs-tabs::-webkit-scrollbar { display: none; }
.cs-tabs-wrap.more-r .cs-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent calc(100% - 14px)); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent calc(100% - 14px)); }
.cs-tabs-wrap.more-l .cs-tabs { -webkit-mask-image: linear-gradient(90deg, transparent 14px, #000 64px); mask-image: linear-gradient(90deg, transparent 14px, #000 64px); }
.cs-tabs-wrap.more-l.more-r .cs-tabs { -webkit-mask-image: linear-gradient(90deg, transparent 14px, #000 64px, #000 calc(100% - 64px), transparent calc(100% - 14px));
  mask-image: linear-gradient(90deg, transparent 14px, #000 64px, #000 calc(100% - 64px), transparent calc(100% - 14px)); }
.cs-tarr { position: absolute; top: 50%; z-index: 2; width: 30px; height: 30px; margin-top: -15px; border: 0; border-radius: 50%; display: none; place-items: center; cursor: pointer;
  color: #2a1800; background: linear-gradient(180deg, #ffe58f, #e9b23a); box-shadow: 0 4px 12px -4px rgba(0,0,0,.7); }
.cs-tarr svg.i { width: 16px; height: 16px; stroke-width: 3; }
.cs-tarr.l { left: 5px; } .cs-tarr.r { right: 5px; }
.cs-tabs-wrap.more-l .cs-tarr.l, .cs-tabs-wrap.more-r .cs-tarr.r { display: grid; animation: csArr 1.6s ease-in-out infinite; }
@keyframes csArr { 50% { transform: translateX(2px); } }
@keyframes csArrL { 50% { transform: translateX(-2px); } }
.cs-tabs-wrap.more-l .cs-tarr.l { animation-name: csArrL; }
@media (max-width: 760px) { .cs-tabs-wrap { margin: 0 10px 12px; } }
.cs-sheet .cs-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; align-content: start; grid-auto-rows: max-content;
  padding: 6px 18px 24px 24px; }
.cs-sheet .shop-err { flex: none; margin: 8px 24px 14px; }
@media (max-width: 760px) {
  #csModal.overlay.modal { padding: 0; align-items: stretch; }
  .overlay.modal .sheet.cs-sheet { width: 100vw; max-width: 100vw; height: 100dvh; min-height: 0; border-radius: 0; border: 0;
    padding-bottom: env(safe-area-inset-bottom); }
  .cs-sheet .cs-head { padding-top: max(16px, env(safe-area-inset-top)); }
  .cs-sheet .cs-grid { padding: 6px 6px 18px 10px; }
  .cs-sheet .shop-err { margin: 6px 12px 10px; }
}
.cs-sheet .cs-card { min-height: max-content; }

/* the looks shop: the moment of buying (no redraw — only that card celebrates) */
.cs-card.just-bought { animation: csBuy .9s cubic-bezier(.2,1.4,.4,1) both; border-color: rgba(255,216,102,.9);
  box-shadow: 0 0 0 2px rgba(255,216,102,.65), 0 0 46px -6px rgba(255,200,80,.75), 0 18px 34px -20px rgba(0,0,0,.9); z-index: 2; }
@keyframes csBuy { 0% { transform: scale(1); } 28% { transform: translateY(-8px) scale(1.045); } 60% { transform: translateY(-3px) scale(1.01); } 100% { transform: none; } }
.cs-card.just-bought .cs-art { animation: csArtGlow 1.2s ease-out; }
@keyframes csArtGlow { 0% { filter: brightness(1); } 25% { filter: brightness(1.35) saturate(1.2); } 100% { filter: none; } }
.cs-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255,246,200,.0) 38%, rgba(255,246,200,.75) 50%, rgba(255,246,200,0) 62%, transparent 70%);
  transform: translateX(-120%); animation: csSweep .9s .12s ease-out forwards; }
@keyframes csSweep { to { transform: translateX(120%); } }
.cs-sparks { position: absolute; left: 50%; top: 38%; z-index: 4; width: 0; height: 0; pointer-events: none; }
.cs-spark { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%;
  background: radial-gradient(circle, #fffbe6 0%, #ffd866 45%, rgba(255,170,40,0) 75%); box-shadow: 0 0 8px rgba(255,214,102,.9);
  opacity: 0; animation: csSpark 1s var(--t) cubic-bezier(.15,.8,.3,1) forwards; }
.cs-spark:nth-child(3n) { border-radius: 2px; transform: rotate(45deg); }
@keyframes csSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.6); }
  70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(1.1); } }
.cs-card.just-bought .cs-mine { animation: csMinePop .7s .25s cubic-bezier(.3,1.7,.5,1) both; }
@keyframes csMinePop { 0% { opacity: 0; transform: scale(.3) translateY(-6px); } 100% { opacity: 1; transform: none; } }
.cs-card.just-bought .cs-where { animation: csWhereIn .5s .45s ease-out both; }
@keyframes csWhereIn { from { opacity: 0; transform: translateY(6px); } }
.cs-bal.cs-spent { animation: csSpent .7s ease-out; }
@keyframes csSpent { 30% { transform: scale(1.08); box-shadow: 0 0 22px -4px rgba(255,214,102,.8); } }
@media (prefers-reduced-motion: reduce) { .cs-card.just-bought, .cs-card.just-bought .cs-art, .cs-flash, .cs-spark, .cs-card.just-bought .cs-mine, .cs-bal.cs-spent { animation: none !important; } .cs-sparks, .cs-flash { display: none; } }

/* the looks shop: the name always whole (on its own line, two lines if it needs them), the price button on the row under it */
.cs-sheet .cs-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
.cs-sheet .cs-foot b { flex: none; width: 100%; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; overflow-wrap: anywhere; }
.cs-sheet .cs-foot .cs-btn { align-self: flex-start; }
@media (max-width: 760px) { .cs-sheet .cs-foot b { flex-basis: auto; } .cs-sheet .cs-foot { gap: 8px; } }

/* the looks shop: limited looks — a tag in the corner, "only N left", sold out (still shown, dimmed, at the end) */
.cs-tag { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 900; letter-spacing: .3px; color: #f4efe3; background: rgba(10,8,18,.72); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); }
.cs-tag.gold { color: #2a1800; border-color: transparent; background: linear-gradient(180deg, #ffe58f, #e9b23a); box-shadow: 0 0 16px -4px rgba(255,200,80,.8); }
.cs-card.unique:not(.gone) { border-color: rgba(255,216,102,.45); box-shadow: 0 0 0 1px rgba(255,216,102,.2), 0 0 28px -12px rgba(255,200,80,.7), 0 18px 34px -20px rgba(0,0,0,.9); }
.cs-tag.out { color: #ffd3d8; background: rgba(60,8,18,.78); border-color: rgba(255,120,140,.35); }
.cs-left { margin: -4px 14px 12px; font-size: 12px; font-weight: 800; color: #ffb35c; }
.cs-soldout { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 900;
  color: #ffb3bd; background: rgba(255,90,110,.1); border: 1px solid rgba(255,90,110,.35); }
.cs-card.gone .cs-art { filter: saturate(.55) brightness(.75); }
.cs-card.gone:hover { transform: none; }
@media (max-width: 760px) { .cs-tag { top: 8px; right: 8px; height: 22px; padding: 0 8px; font-size: 10px; } .cs-card.own .cs-tag { display: none; } .cs-left { margin: -4px 10px 10px; font-size: 11px; } }

/* (ADS_DEMO on localhost) the pretend ad over the whole screen */
.ad-demo { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.88); animation: fade .2s; }
.ad-demo-in { position: relative; width: min(560px, 100%); padding: 34px 26px 26px; border-radius: 22px; text-align: center; color: #fff;
  background: radial-gradient(90% 70% at 50% 0, rgba(255,200,90,.22), transparent 70%), linear-gradient(160deg, #1d1a2e, #0b0a14); border: 1px solid rgba(255,216,102,.35);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); }
.ad-demo-tag { position: absolute; top: 12px; left: 14px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .4px;
  color: #2a1800; background: linear-gradient(180deg, #ffe58f, #e9b23a); }
.ad-demo-art { display: flex; justify-content: center; gap: 14px; margin: 6px 0 18px; }
.ad-demo-art i { width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c9, #ffcf4d 52%, #b8860b);
  box-shadow: inset 0 0 0 4px rgba(122,76,16,.35), 0 12px 22px -10px rgba(0,0,0,.8); animation: adCoin 1.4s ease-in-out infinite; }
.ad-demo-art i:nth-child(2) { animation-delay: .2s; } .ad-demo-art i:nth-child(3) { animation-delay: .4s; }
@keyframes adCoin { 50% { transform: translateY(-10px) rotate(12deg); } }
.ad-demo-in h3 { margin: 0 0 6px; font-size: 22px; font-weight: 900; }
.ad-demo-in p { margin: 0 0 18px; font-size: 13.5px; color: #c9c4e6; }
.ad-demo-bar { height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.1); }
.ad-demo-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #ffe58f, #e9b23a); transition: width linear; }
.ad-demo-n { position: absolute; top: 12px; right: 14px; min-width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 900; background: rgba(255,255,255,.1); }
.ad-demo-x { margin-top: 16px; height: 34px; padding: 0 16px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.06);
  color: #e6e3f5; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
/* the looks shop: the admin's discount on every look — the old price struck through, the new one on the button */
.cs-buyrow { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-old { font-size: 13px; font-weight: 700; color: rgba(235,232,250,.55); }
.cs-off { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 900; color: #0e2a1a; background: linear-gradient(180deg, #9ff2c2, #3fc985); }

/* ---------- the welcome after logging in or signing up (lib/welcome.js): a golden flash, the mark and the name */
.wl-ov { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden; pointer-events: none; animation: wlIn .2s ease-out both; }
.wl-ov.out { animation: wlOut .6s ease-in-out both; }
.wl-glow { position: absolute; inset: -25%; background: radial-gradient(circle at 50% 50%, rgba(255,226,150,.62), rgba(255,176,60,.22) 24%, rgba(10,7,24,.6) 58%, rgba(6,5,16,.82));
  animation: wlGlow 1.6s ease-out both; }
.wl-ring { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; border: 2px solid rgba(255,228,160,.95);
  box-shadow: 0 0 34px rgba(255,196,90,.75), inset 0 0 24px rgba(255,196,90,.5); animation: wlRing 1.15s cubic-bezier(.2,.7,.3,1) both; }
.wl-ring.r2 { animation-delay: .2s; border-color: rgba(255,244,214,.6); }
.wl-ring.r3 { animation-delay: 1.3s; animation-duration: 1.5s; border-color: rgba(255,236,190,.5); }   /* (the second wave) */
.wl-spark.w2 { width: 4px; height: 4px; margin: -2px 0 0 -2px; animation-duration: 1.2s; }
.wl-spark { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff1c2;
  box-shadow: 0 0 10px #ffcf5c, 0 0 20px rgba(255,180,60,.6); animation: wlSpark .95s cubic-bezier(.15,.7,.3,1) var(--d) both; }
.wl-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 16px; animation: wlCard .75s cubic-bezier(.2,1.35,.4,1) .06s both, wlFloat 2.2s ease-in-out .8s infinite alternate; }
.wl-logo { width: 88px; height: 88px; border-radius: 24px; box-shadow: 0 0 0 1px rgba(255,222,150,.45), 0 0 40px rgba(255,190,80,.55), 0 20px 50px rgba(0,0,0,.5); }
.wl-text { max-width: 92vw; font-size: clamp(22px, 5.4vw, 36px); font-weight: 900; line-height: 1.2; text-align: center; color: #fff6dc; letter-spacing: .3px;
  text-shadow: 0 2px 20px rgba(255,180,60,.7), 0 1px 2px rgba(0,0,0,.6); overflow-wrap: anywhere; }
/* the chat for a visitor: read only, a word and the way to an account */
.chat-guest { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.chat-guest span { flex: 1; font-size: 13px; line-height: 1.4; color: #cfcbe6; }
.chat-guest.hidden { display: none; }
@keyframes wlIn { from { opacity: 0; } }
@keyframes wlOut { to { opacity: 0; } }
@keyframes wlGlow { 0% { opacity: 0; transform: scale(.55); } 22% { opacity: 1; } 100% { opacity: .9; transform: scale(1); } }
@keyframes wlRing { from { transform: scale(.2); opacity: 1; } to { transform: scale(5.5); opacity: 0; } }
@keyframes wlSpark { from { transform: rotate(var(--a)) translateY(0) scale(1.2); opacity: 1; } to { transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) scale(.2); opacity: 0; } }
@keyframes wlCard { from { opacity: 0; transform: scale(.7) translateY(12px); } }
@keyframes wlFloat { to { transform: translateY(-4px) scale(1.015); } }
@media (prefers-reduced-motion: reduce) { .wl-ring, .wl-spark { display: none; } .wl-glow, .wl-card { animation: wlIn .3s both; } }

/* ---------- the games page: "open rooms" opens the same window as in the games, for every game (lib/rooms.js) */
#lvRooms[data-rooms-open] { cursor: pointer; border-radius: 14px; transition: background .15s, transform .15s; }
#lvRooms[data-rooms-open]:hover { background: rgba(255,255,255,.06); transform: translateY(-1px); }
#lvRooms[data-rooms-open]:focus-visible { outline: 2px solid #ffd866; outline-offset: 2px; }
.lobby-page #s-rooms, .lobby-page #s-roomv { z-index: 300; }
.lobby-page #s-roomv { z-index: 310; }
.rooms-games { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; flex: none; }
.rooms-games button { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.rooms-games button small { padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: 11px; }
.rooms-games button.on { background: rgba(124,92,255,.25); border-color: rgba(185,169,255,.5); color: #fff; }
@media (hover: hover) { .rooms-games button:hover { color: #fff; border-color: rgba(255,255,255,.25); } }
/* "open a public table" from the games page: which game (then there, its own setup) */
.lobby-page #s-rpick, .lobby-page #s-learn, .lobby-page #s-code { z-index: 320; }
/* the leaderboard in the account menu: phones only (computers have it in the menu at the top) */
@media (min-width: 900px) { #acctPop .lb-m { display: none; } }
/* a visitor on a phone: the site's leaderboard as a cup in the bar (lobby.html) */
.lb-top { display: none; }
@media (max-width: 899px) { .lb-top { display: flex; flex: none; } .lb-top svg.i { color: var(--gold); } }
/* learn how to play: in the menu (computers); on phones, where the menu is hidden, a small pill in the bar */
.learn-m { display: none; }
@media (max-width: 899px) {
  .learn-m { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 9px; border-radius: 999px; flex: none;
    border: 1px solid rgba(166,245,107,.45); background: linear-gradient(160deg, rgba(166,245,107,.18), rgba(45,224,196,.1)); color: #eaffd6;
    font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
  .learn-m svg.i { width: 18px; height: 18px; color: var(--lime); }
  .learn-m:active { transform: scale(.97); }
}
@media (max-width: 360px) { .learn-m span { display: none; } .learn-m { padding: 0 9px; } }
.rpick-sheet { max-width: 640px; }
.rpick-sheet .rm-head .rm-plus { width: 38px; height: 38px; }
.rpick-sheet .rm-head h2 { white-space: normal; overflow: visible; line-height: 1.2; }
.rpick-sub { margin: 14px 0 16px; color: var(--muted); font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.rpick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; max-height: min(62vh, 520px); overflow-y: auto; padding: 2px; }
.rpick-g { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 16px 10px 13px; border-radius: 18px; text-decoration: none; color: var(--text);
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.1);
  animation: rpickIn .32s cubic-bezier(.2,.8,.3,1.2) both; transition: transform .15s, border-color .15s, background .15s; }
.rpick-g b { font-size: 14px; font-weight: 900; text-align: center; line-height: 1.2; }
.rpick-logo { width: 48px; height: 48px; display: grid; place-items: center; filter: drop-shadow(0 4px 7px rgba(0,0,0,.45)); transition: transform .2s; }
.rpick-logo svg, .rpick-logo img { width: 46px; height: 46px; display: block; }
.rpick-g:active { transform: scale(.97); }
.rpick-g:focus-visible { outline: 2px solid #ffd866; outline-offset: 2px; }
@media (hover: hover) { .rpick-g:hover { transform: translateY(-2px); border-color: rgba(166,245,107,.6); background: rgba(166,245,107,.09); }
  .rpick-g:hover .rpick-logo { transform: scale(1.08) rotate(-3deg); } }
@keyframes rpickIn { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) { .rpick-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .rpick-g { padding: 12px 6px 10px; } .rpick-g b { font-size: 12.5px; }
  .rpick-logo, .rpick-logo svg, .rpick-logo img { width: 38px; height: 38px; } }
/* ---------- "learn how it's played" (game/demo.py): the line over the table, nothing to press under it */
.demo-bar { position: relative; z-index: 5; display: flex; align-items: center; gap: 12px; max-width: 1208px; margin: 12px auto 0;
  padding: 8px 8px 8px 12px; border-radius: 16px; background: linear-gradient(100deg, rgba(124,92,255,.24), rgba(255,77,141,.13));
  border: 1px solid rgba(185,169,255,.35); box-shadow: 0 12px 30px -20px rgba(0,0,0,.9); }
.demo-tag { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  background: #ffd866; color: #2a1d00; font-size: 11.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.demo-tag i { width: 7px; height: 7px; border-radius: 50%; background: #e5343f; animation: demoBlink 1.4s ease-in-out infinite; }
@keyframes demoBlink { 50% { opacity: .25; } }
.demo-cap { flex: 1; min-width: 0; margin: 0; font-size: 13.5px; font-weight: 650; line-height: 1.35; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: opacity .25s, transform .25s; }
.demo-cap.out { opacity: 0; transform: translateY(4px); }
.demo-exit { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: var(--text); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.demo-exit svg.i { width: 16px; height: 16px; }
@media (hover: hover) { .demo-exit:hover { background: rgba(255,77,141,.2); border-color: rgba(255,77,141,.6); } }
@media (max-width: 560px) { .demo-bar { margin: 8px 10px 0; gap: 8px; padding: 6px 6px 6px 8px; } .demo-cap { font-size: 12px; }
  .demo-exit { width: 34px; padding: 0; justify-content: center; } .demo-exit span { display: none; } }
/* (a demo is laid out as full screen — no site bar — and the table gets the screen minus this line: nothing cut) */
body.demo-on { --dbar: 60px; }
body.demo-on.game-fs .demo-bar { box-sizing: border-box; height: calc(var(--dbar) - 8px); max-width: none; margin: 8px 12px 0; }
body.demo-on.game-fs[data-page="table"] .page#table { height: calc(100dvh - var(--dbar)); }
body.demo-on.game-fs[data-page="table"] .page#table:has(.pu-layout) { min-height: calc(100dvh - var(--dbar)); }
@media (min-width: 1101px) { body.demo-on.game-fs .t21-layout.pu-layout { --bs: min(calc(100dvh - 20px - var(--dbar)), calc(100vw - 600px)); } }
@media (min-width: 1101px) and (max-width: 1360px) { body.demo-on.game-fs .t21-layout.pu-layout { --bs: min(calc(100dvh - 20px - var(--dbar)), calc(100vw - 380px)); } }
body.demo-on.game-fs .ld-layout .ld-boardbox { width: min(100%, calc(100dvh - 176px - var(--dbar))); }
@media (max-width: 1100px) { body.demo-on.game-fs .pu-boardbox { width: min(100%, calc(100dvh - 150px - var(--dbar))); }
  body.demo-on.game-fs[data-page] .pu-boardbox { width: min(100cqw, calc(100dvh - 230px - var(--dbar))); } }
@media (max-width: 620px) { body.demo-on.game-fs .ld-layout .ld-boardbox { width: min(100%, calc(100dvh - 210px - var(--dbar))); } }
@media (max-width: 560px) { body.demo-on { --dbar: 54px; } body.demo-on.game-fs .demo-bar { margin: 6px 8px 0; } }
/* (everything of the game shows as in a real one; only nothing can be pressed — the page still scrolls) */
body.demo-on main > .page:not(#home) * { pointer-events: none !important; }
html:has(body.demo-on), body.demo-on { overscroll-behavior-y: none; }     /* (phones: no pull-to-refresh by mistake) */
.demo-again { display: block; margin: 14px auto 0; }
/* the one tap that starts it (and lets the sound play): the game's page dimmed behind, its logo, one big button */
.demo-start { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(4,3,14,.66);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fade .25s; transition: opacity .25s; }
.demo-start.out { opacity: 0; }
.ds-card { width: min(400px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 24px 22px; border-radius: 28px; text-align: center;
  background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--gacc, #f6c84a) 22%, transparent), transparent 62%), linear-gradient(180deg, #1b1930, #11101b);
  border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 80px -10px rgba(0,0,0,.85); animation: popIn .35s cubic-bezier(.3,1.3,.5,1); }
.ds-logo { width: 84px; height: 84px; display: grid; place-items: center; filter: drop-shadow(0 8px 16px rgba(0,0,0,.55)); animation: dsBob 2.6s ease-in-out infinite; }
.ds-logo svg, .ds-logo img { width: 80px; height: 80px; display: block; }
@keyframes dsBob { 50% { transform: translateY(-5px) rotate(-2deg); } }
.ds-card h2 { margin: 4px 0 0; font-size: 24px; font-weight: 900; }
.ds-card p { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.ds-go { width: 100%; height: 54px; font-size: 16px; gap: 10px; }
.ds-go svg.i { width: 20px; height: 20px; }
.ds-back { margin-top: 4px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .ds-logo { animation: none; } }
/* in a game, after that choice: the new table's card, the public switch on, shown for a moment */
/* (a glow of its own, over the card: the card's own animations are left alone, nothing plays again) */
.card.pub-hint::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(166,245,107,.75), 0 0 28px rgba(166,245,107,.25); animation: pubHint 2.4s ease both; }
@keyframes pubHint { 0%, 100% { opacity: 0; } 15%, 70% { opacity: 1; } }
/* the level card in the games page's account menu (the same as in the games) */
#acctPop .lvl-line { margin: 10px 0 4px; }


/* ---- the two shops open over everything, a game's look windows too (lib/shop.js) ---- */
#shopModal, #csModal { z-index: 600; }
/* ---- a look of the shop not bought yet, in every look window: dimmed, a lock, its price ("Get it" on hover and when
   clicked, then the shop opens on it) ---- */
.lk-locked { position: relative; overflow: hidden; cursor: pointer; }
.lk-locked .lk-dim { position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: rgba(8,6,14,.6); pointer-events: none; transition: background .2s; }
.lk-locked:hover .lk-dim, .lk-locked:focus-visible .lk-dim { background: rgba(8,6,14,.44); }
.lk-locked > small, .lk-locked > span:not([class]) { position: relative; z-index: 2; opacity: .78; }
.lk-locked .lk-badge { position: absolute; top: 6px; right: 6px; z-index: 3; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  color: #f3c35a; background: linear-gradient(180deg, #1f1b26, #121016); border: 1px solid rgba(243,195,90,.6); box-shadow: 0 2px 8px rgba(0,0,0,.55); }
.lk-locked .lk-ic { width: 14px; height: 14px; display: block; }
.lk-locked .lk-price { position: absolute; top: 6px; left: 6px; z-index: 3; display: inline-flex; align-items: center; height: 22px; padding: 0 8px 0 3px; border-radius: 999px;
  font-size: 11px; font-weight: 800; line-height: 1; color: #ffe6a3; background: rgba(16,13,22,.9); border: 1px solid rgba(243,195,90,.5);
  transition: background .2s, color .2s, border-color .2s, transform .2s; }
.lk-locked .lk-price .cs-coin { width: 15px; height: 15px; margin-right: 4px; }
.lk-locked .lk-price em { max-width: 0; overflow: hidden; white-space: nowrap; font-style: normal; transition: max-width .25s ease, margin .25s ease; }
.lk-locked:hover .lk-price em, .lk-locked:focus-visible .lk-price em, .lk-locked.lk-go .lk-price em { max-width: 110px; margin-left: 5px; }
.lk-locked.lk-go .lk-price { color: #2a1800; background: linear-gradient(180deg, #ffe58f, #e3a61f); border-color: #ffe58f; transform: scale(1.06); }
.lk-locked.lk-go { animation: lkGo .42s ease; }
@keyframes lkGo { 0% { transform: scale(1); } 40% { transform: scale(.95); } 100% { transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .lk-locked.lk-go { animation: none; } }
/* the shop opened from a locked look: its card lit for a moment */
.cs-card.cs-focus { box-shadow: 0 0 0 2px #ffd866, 0 0 34px -6px rgba(255,216,102,.75); }

/* ---- a table in the shop: its surface clear; a quiet row of the games played on it at the bottom ---- */
.cs-art-table .cs-trow { position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 9px;
  padding: 5px 11px 4px; border-radius: 12px; background: rgba(0,0,0,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.cs-trow i { display: block; line-height: 0; filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)); }
.cs-trow svg { display: block; }
.cs-trow .ct-deck svg { width: 30px; height: 26px; }
.cs-trow .ct-die svg { width: 15px; height: 15px; } .cs-trow .ct-die.t2 { transform: rotate(14deg) translateY(-1px); margin-left: -4px; }
.cs-trow .ct-ck svg { width: 18px; height: 18px; }
.cs-trow .ct-pw svg { width: 13px; height: 17px; }
.cs-trow .ct-chip svg { width: 16px; height: 16px; }

/* ---- the settings window's Save: obsidian and gold, never the game's colour ---- */
.sheet .set-actions .btn-primary { color: #f5d27a; text-shadow: none; letter-spacing: .03em;
  background: linear-gradient(180deg, #1f1b25 0%, #131118 100%);
  box-shadow: inset 0 0 0 1px rgba(243,195,90,.6), inset 0 1px 0 rgba(255,236,180,.12), 0 8px 18px -10px rgba(0,0,0,.9); }
.sheet .set-actions .btn-primary:hover { filter: none; color: #ffe6a3; background: linear-gradient(180deg, #27222e 0%, #17141c 100%);
  box-shadow: inset 0 0 0 1px #f3c35a, inset 0 1px 0 rgba(255,236,180,.16), 0 0 20px -6px rgba(243,195,90,.55); }
.sheet .set-actions .btn-primary:disabled { opacity: .55; }
/* (the same obsidian and gold: "Log in" in the bar, "Ask to join" on a room's card and in its window) */
.btn.btn-obsidian { color: #f5d27a; text-shadow: none; letter-spacing: .03em;
  background: linear-gradient(180deg, #1f1b25 0%, #131118 100%);
  box-shadow: inset 0 0 0 1px rgba(243,195,90,.6), inset 0 1px 0 rgba(255,236,180,.12), 0 8px 18px -10px rgba(0,0,0,.9); }
.btn.btn-obsidian:hover { filter: none; color: #ffe6a3; background: linear-gradient(180deg, #27222e 0%, #17141c 100%);
  box-shadow: inset 0 0 0 1px #f3c35a, inset 0 1px 0 rgba(255,236,180,.16), 0 0 20px -6px rgba(243,195,90,.55); }
.btn.btn-obsidian:active { transform: translateY(1px); box-shadow: inset 0 0 0 1px #f3c35a, 0 2px 8px -4px rgba(0,0,0,.9); }
.btn.btn-obsidian svg.i { color: #f5d27a; }

/* ---- visitors without an account: what an account gives, locked in the menu; the invitation after a game ---- */
.menu-item.locked { color: var(--muted); }
.menu-item.locked .lk { margin-left: auto; width: 15px; height: 15px; color: #f3c35a; opacity: .85; }
.menu-perk { display: block; width: 100%; margin: 2px 0 4px; padding: 6px 10px; border: 0; background: none; text-align: left;
  font-size: 12.5px; font-weight: 700; color: #f5d27a; cursor: pointer; }
.menu-perk:hover { color: #ffe6a3; text-decoration: underline; }
.g-invite svg.i { color: #f3c35a; }

/* ---- buying chips: the packs side by side on a wide screen (as many columns as packs, at most 4), two by two on
   tablets and phones, one under the other on the smallest; the same space between them everywhere ---- */
.overlay.modal .sheet.shop-sheet { max-width: 780px; }
.shop-packs { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 18px; }
.shop-pack { min-height: 152px; justify-content: center; padding: 20px 14px 16px; }
.shop-pack b { overflow-wrap: anywhere; text-align: center; }
@media (max-width: 900px) {
  .overlay.modal .sheet.shop-sheet { max-width: 560px; }
  .shop-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .shop-pack:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .shop-packs { gap: 16px; }
  .shop-pack { min-height: 132px; padding: 16px 10px 14px; }
  .shop-pack em { min-height: 32px; display: inline-flex; align-items: center; }
}
@media (max-width: 359.98px) { .shop-packs { grid-template-columns: 1fr; } }
/* a pack chosen: over the window, «taking you to Stripe's secure page» (a lock in a turning ring) */
.shop-sheet { position: relative; }
.shop-go { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px; border-radius: inherit; text-align: center; background: rgba(12,10,32,.92); animation: fade .2s; }
.shop-go.hidden { display: none; }
.shop-go-ring { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; color: var(--gold); }
.shop-go-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255,207,77,.2);
  border-top-color: var(--gold); animation: spin .9s linear infinite; }
.shop-go-ring svg.i { width: 24px; height: 24px; }
.shop-go b { font-size: 16px; font-weight: 800; color: var(--text); }
.shop-go span:last-child { font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .shop-go-ring::before { animation-duration: 2.4s; } }
/* the player's own purchases (from their menu): one line each — when, the chips, how much */
.buys-list { display: flex; flex-direction: column; gap: 6px; max-height: min(60vh, 520px); overflow-y: auto; }
.buys-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.buys-when { min-width: 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.buys-chips { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-variant-numeric: tabular-nums; }
.buys-chips .ch { flex: none; width: 26px; height: 26px; margin: 0; }
.buys-chips .ch::after { font-size: 0; }
.buys-cash { font-style: normal; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.buys-spin { display: block; margin: 18px auto; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--muted);
  border-right-color: transparent; animation: spin .8s linear infinite; }
@media (max-width: 420px) { .buys-row { grid-template-columns: minmax(0, 1fr) auto; } .buys-when { grid-column: 1 / -1; } }

/* ================= FRIENDS (lib/friends.js): the button in the bar and the panel from the right ================= */
.fr-btn { color: #f3dca6; }
.fr-btn:hover { color: #ffe9b8; border-color: rgba(232,194,122,.4); }
.fr-badge { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; font: 800 11px/1 'Inter', system-ui, sans-serif; color: #2a1800;
  background: linear-gradient(180deg, #fff1b8, #ffd866 45%, #e5a92e); box-shadow: 0 0 0 2px #0c0a1f, 0 4px 10px -2px rgba(229,169,46,.6); animation: frPop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes frPop { from { transform: scale(.3); } to { transform: scale(1); } }
.fr-wrap { position: fixed; inset: 0; z-index: 88; }
.fr-scrim { position: absolute; inset: 0; background: rgba(3,2,10,.62); opacity: 0; transition: opacity .25s; }
.fr-wrap.in .fr-scrim { opacity: 1; }
.fr-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); display: flex; flex-direction: column;
  background: radial-gradient(520px 260px at 100% 0%, rgba(232,194,122,.10), transparent 70%), linear-gradient(180deg, #15122c 0%, #0d0b1e 55%, #0a0918 100%);
  border-left: 1px solid rgba(232,194,122,.22); box-shadow: -30px 0 80px -20px rgba(0,0,0,.8);
  transform: translateX(104%); transition: transform .3s cubic-bezier(.2,.8,.2,1); padding-bottom: env(safe-area-inset-bottom); }
.fr-panel::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(255,226,160,.55) 30%, rgba(255,226,160,.12) 80%, transparent); }
.fr-wrap.in .fr-panel { transform: none; }
html.fr-open, html.fr-open body { overflow: hidden; }
.fr-head { display: flex; align-items: center; gap: 13px; padding: 20px 20px 14px; }
.fr-crest { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; color: #2a1800;
  background: linear-gradient(145deg, #fff3c9, #e8c27a 50%, #a8782c); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 22px -8px rgba(232,194,122,.7); }
.fr-crest svg.i { width: 22px; height: 22px; stroke-width: 2.1; }
.fr-ht { flex: 1; min-width: 0; }
.fr-ht h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: .2px; background: linear-gradient(180deg, #fff, #f1dcae); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fr-count { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .3px; }
.fr-x { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--stroke); background: var(--glass); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.fr-x:hover { background: var(--glass2); border-color: var(--stroke2); }
.fr-find { position: relative; display: flex; gap: 8px; margin: 0 20px; padding: 5px 5px 5px 40px; border-radius: 15px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); transition: border-color .2s, box-shadow .2s; }
.fr-find:focus-within { border-color: rgba(232,194,122,.55); box-shadow: 0 0 0 4px rgba(232,194,122,.1); }
.fr-find.dis { opacity: .45; pointer-events: none; }
.fr-find-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; }
.fr-find-ic svg.i { width: 18px; height: 18px; }
.fr-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font-size: 15px; }
.fr-find input::placeholder { color: var(--dim); }
.fr-find-b { height: 36px; padding: 0 15px; border-radius: 11px; border: 0; font-weight: 800; font-size: 13px; color: #2a1800;
  background: linear-gradient(180deg, #fff1b8, #ffd866 40%, #e5a92e); box-shadow: 0 2px 0 #7a4c10; }
.fr-find-b.loading, .fr-b.loading { opacity: .55; pointer-events: none; }
.fr-err { margin: 9px 22px 0; font-size: 13px; color: #ff9aa5; font-weight: 600; }
.fr-found { margin: 12px 20px 0; }
.fr-row.hit { position: relative; padding-right: 38px; background: linear-gradient(135deg, rgba(232,194,122,.12), rgba(232,194,122,.03)); border-color: rgba(232,194,122,.3); animation: frIn .25s ease; }
.fr-hit-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 8px; background: none; color: var(--muted); display: grid; place-items: center; }
.fr-hit-x:hover { color: var(--text); background: var(--glass2); }
.fr-hit-x svg.i { width: 15px; height: 15px; }
@keyframes frIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fr-tabs { position: relative; display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); margin: 16px 20px 4px; padding: 4px; border-radius: 13px; background: rgba(255,255,255,.04); border: 1px solid var(--stroke); }
.fr-tabs button { position: relative; z-index: 1; height: 36px; border: 0; background: none; font-weight: 700; font-size: 13.5px; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: color .2s; }
.fr-tabs button.on { color: #2a1800; }
.fr-tab-bar { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 2)); transform: translateX(calc(100% * var(--i, 0))); border-radius: 10px;
  background: linear-gradient(180deg, #fff1b8, #f1cf7a 45%, #d9a441); box-shadow: 0 4px 14px -6px rgba(229,169,46,.7); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.fr-tdot { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 800; line-height: 18px;
  background: #e8344a; color: #fff; box-shadow: 0 0 0 2px rgba(10,9,24,.6); }
.fr-body { flex: 1; overflow-y: auto; padding: 4px 20px 20px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.fr-sec { margin: 16px 2px 8px; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #cdb98d; }
.fr-list { display: flex; flex-direction: column; gap: 6px; }
.fr-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 11px; border-radius: 15px; border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.025); transition: background .2s, border-color .2s; }
.fr-row:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.fr-row.off .fr-ava { opacity: .62; }
.fr-ava { position: relative; width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: #f6eedb;
  background: linear-gradient(145deg, #3a2f6e, #221b48); box-shadow: inset 0 0 0 1.5px rgba(232,194,122,.35); }
.fr-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.fr-ava.pic { background: none; }
.fr-on { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: #5d5a7c; box-shadow: 0 0 0 2.5px #110f26; }
.fr-on.yes { background: #39d98a; }
.fr-on.play { background: #ffcf4d; }
.fr-who { flex: 1; min-width: 0; }
.fr-who b { display: block; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; min-width: 0; }
.fr-lv { flex: none; font-style: normal; font-size: 11px; font-weight: 800; color: #e8c27a; padding: 2px 7px; border-radius: 999px; background: rgba(232,194,122,.1); border: 1px solid rgba(232,194,122,.22); }
.fr-sub { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--dim); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-sub.on { color: #6fe3a8; }
.fr-sub.play { color: #ffd979; }
.fr-sub.sent, .fr-sub.friends { color: #e8c27a; }
.fr-sub svg.i, .fr-tag svg.i { width: 13px; height: 13px; }
.fr-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #e8c27a; padding: 3px 9px; border-radius: 999px; background: rgba(232,194,122,.08); border: 1px dashed rgba(232,194,122,.35); }
.fr-reqtxt { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.3; }
.fr-reqtxt b { display: inline; color: var(--text); }
.fr-row.req { flex-wrap: wrap; }
.fr-acts { position: relative; display: flex; align-items: center; gap: 6px; flex: none; }
.fr-row.req .fr-acts.two { width: 100%; padding-left: 56px; }
.fr-row.req .fr-acts.two .fr-b { flex: 1; }
.fr-more { width: 34px; height: 34px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--muted); display: grid; place-items: center; transition: all .2s; }
.fr-more:hover, .fr-more.on { color: var(--text); background: var(--glass2); border-color: var(--stroke); }
.fr-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 3; min-width: 200px; padding: 6px; border-radius: 14px; background: #1b1736; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px -10px rgba(0,0,0,.75); animation: frIn .18s ease; }
.fr-menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 0; border-radius: 10px; background: none; font-size: 14px; font-weight: 600; text-align: left; }
.fr-menu button:hover { background: rgba(255,255,255,.07); }
.fr-menu button.danger { color: #ff8b97; }
.fr-menu svg.i { width: 18px; height: 18px; }
.fr-b { height: 34px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 800; font-size: 13px; white-space: nowrap; transition: filter .2s, background .2s; }
.fr-b svg.i { width: 15px; height: 15px; }
.fr-b.sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.fr-b.gold { border: 0; color: #2a1800; background: linear-gradient(180deg, #fff1b8, #ffd866 40%, #e5a92e); box-shadow: 0 2px 0 #7a4c10, 0 6px 14px -6px rgba(229,169,46,.6); }
.fr-b.red { border: 0; color: #fff; background: linear-gradient(180deg, #ff8a8f, #e02c47); box-shadow: 0 2px 0 #8f1631; }
.fr-b.ghost { color: var(--text); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); }
.fr-b.ghost:hover { background: rgba(255,255,255,.12); }
.fr-b.gold:hover, .fr-b.red:hover { filter: brightness(1.07); }
.fr-b:active { transform: translateY(1px); }
.fr-row.fr-ask { flex-wrap: wrap; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.05); animation: frIn .2s ease; }
.fr-row.fr-ask p { flex: 1; min-width: 0; margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--text); }
.fr-yn { display: flex; gap: 8px; width: 100%; justify-content: flex-end; }
.fr-yn .fr-b { min-width: 84px; }
.fr-empty { margin: 34px 8px; text-align: center; color: var(--muted); }
.fr-empty span { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; display: grid; place-items: center; color: #e8c27a; background: rgba(232,194,122,.08); border: 1px solid rgba(232,194,122,.2); }
.fr-empty span svg.i { width: 28px; height: 28px; }
.fr-empty p { margin: 0 auto; max-width: 290px; font-size: 14px; line-height: 1.55; }
.fr-blocked { margin-top: 20px; border-top: 1px solid var(--stroke); padding-top: 12px; }
.fr-blocked summary { cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 700; color: var(--dim); padding: 4px 2px 10px; }
.fr-blocked summary::-webkit-details-marker { display: none; }
.fr-blocked summary::before { content: '▸ '; }
.fr-blocked[open] summary::before { content: '▾ '; }
.fr-row.blk .fr-ava { opacity: .5; }
.fr-skel { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.fr-skel i { height: 66px; border-radius: 15px; background: rgba(255,255,255,.04); animation: frSk 1.2s ease-in-out infinite alternate; }
@keyframes frSk { from { opacity: .5; } to { opacity: 1; } }
.fr-foot { display: flex; flex-direction: column; gap: 10px; padding: 14px 20px 16px; border-top: 1px solid var(--stroke); font-size: 13.5px; font-weight: 600; color: var(--muted); }
.fr-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fr-sw .switch { flex: none; }
.fr-who-find { display: flex; flex-direction: column; gap: 8px; }
.fr-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.fr-seg button { min-height: 34px; padding: 4px 6px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.2; transition: background .2s, color .2s; }
.fr-seg button:hover { color: var(--text); background: rgba(255,255,255,.06); }
.fr-seg-h { font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--dim); }
.fr-seg button.on { color: #2a1800; background: linear-gradient(180deg, #fff1b8, #ffd866 40%, #e5a92e); box-shadow: 0 2px 0 #7a4c10; }
.fr-foot .switch.on { background: linear-gradient(180deg, #ffd866, #e3a61f); }
@media (max-width: 575.98px) {
  .fr-panel { width: 100%; border-left: 0; }
  .fr-head { padding: 16px 16px 12px; }
  .fr-find, .fr-tabs, .fr-found { margin-left: 16px; margin-right: 16px; }
  .fr-body { padding: 4px 16px 16px; }
  .fr-foot { padding: 12px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) { .fr-panel, .fr-scrim, .fr-tab-bar { transition: none; } .fr-badge, .fr-skel i { animation: none; } }
/* friends: inviting to the table (the host's waiting room) and the invitation card */
.fr-hint { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; padding: 11px 13px; border-radius: 14px; font-size: 13px; line-height: 1.4; color: #f3dca6;
  background: linear-gradient(135deg, rgba(232,194,122,.13), rgba(232,194,122,.04)); border: 1px solid rgba(232,194,122,.28); }
.fr-hint svg.i { width: 18px; height: 18px; color: #e8c27a; }
.fr-b.done { opacity: .75; color: #e8c27a; cursor: default; }
.fr-row.inv { flex-wrap: wrap; background: linear-gradient(135deg, rgba(232,194,122,.12), rgba(232,194,122,.03)); border-color: rgba(232,194,122,.3); }
.fr-row.inv .fr-acts.two { width: 100%; padding-left: 56px; }
.fr-row.inv .fr-acts.two .fr-b { flex: 1; }
.fr-reqtxt .fr-game { color: #ffd979; }

/* friends: the conversation (bubbles, the box to write, the report) */
.fr-panel.chatting > .fr-find, .fr-panel.chatting > .fr-err, .fr-panel.chatting > .fr-found, .fr-panel.chatting > .fr-tabs,
.fr-panel.chatting > .fr-body, .fr-panel.chatting > .fr-foot { display: none !important; }
.fr-tabs button { padding: 0 6px; white-space: nowrap; }
.fr-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--stroke); }
.fc-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; border-bottom: 1px solid var(--stroke); }
.fc-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; }
.fc-who .fr-ava { width: 40px; height: 40px; font-size: 16px; }
.fc-who .fr-sub { display: block; margin-top: 2px; }
.fc-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 8px; display: flex; flex-direction: column; gap: 4px; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; outline: 0; }
.fc-start { margin: 10px auto 14px; max-width: 280px; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.fc-older { align-self: center; margin: 4px 0 12px; height: 30px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--stroke2); background: var(--glass); font-size: 12px; font-weight: 700; color: var(--muted); }
.fc-older:hover { color: var(--text); background: var(--glass2); }
.fc-day { display: flex; justify-content: center; margin: 12px 0 6px; }
.fc-day span { font-size: 11px; font-weight: 700; letter-spacing: .4px; color: #cdb98d; padding: 3px 10px; border-radius: 999px; background: rgba(232,194,122,.08); }
.fc-b { position: relative; max-width: 80%; padding: 8px 12px 6px; border-radius: 17px; animation: frIn .18s ease; }
.fc-b p { margin: 0; font-size: 14.5px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.fc-b time { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 600; text-align: right; opacity: .55; }
.fc-b.me { align-self: flex-end; border-bottom-right-radius: 5px; background: linear-gradient(160deg, #3b2a78, #2a1f5c);
  box-shadow: inset -2px 0 0 rgba(232,194,122,.75), 0 6px 16px -10px rgba(0,0,0,.8); }
.fc-b.them { align-self: flex-start; border-bottom-left-radius: 5px; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.09); }
.fc-b.me + .fc-b.them, .fc-b.them + .fc-b.me { margin-top: 6px; }
.fc-seen { align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; margin: 2px 4px 0 0; font-size: 11px; font-weight: 700; color: #e8c27a; }
.fc-seen svg.i { width: 13px; height: 13px; }
.fc-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--stroke); position: relative; }
.fc-form textarea { flex: 1; min-width: 0; resize: none; max-height: 120px; padding: 11px 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045); color: var(--text); font: 500 14.5px/1.35 'Inter', system-ui, sans-serif; outline: 0; transition: border-color .2s, box-shadow .2s; }
.fc-form textarea:focus { border-color: rgba(232,194,122,.55); box-shadow: 0 0 0 4px rgba(232,194,122,.1); }
.fc-form textarea::placeholder { color: var(--dim); }
.fc-left { position: absolute; right: 70px; bottom: 20px; font-size: 11px; font-weight: 700; color: var(--dim); pointer-events: none; }
.fc-send { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; color: #2a1800;
  background: linear-gradient(180deg, #fff1b8, #ffd866 40%, #e5a92e); box-shadow: 0 3px 0 #7a4c10, 0 8px 18px -8px rgba(229,169,46,.7); }
.fc-send:active { transform: translateY(1px); }
.fc-send.loading { opacity: .55; pointer-events: none; }
.fc-send svg.i { width: 19px; height: 19px; }
.fc-report { display: flex; flex-direction: column; gap: 10px; margin: 0 14px 10px; padding: 13px; border-radius: 15px; background: #1b1736; border: 1px solid rgba(255,139,151,.3); animation: frIn .2s ease; }
.fc-report b { font-size: 14px; }
.fc-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.fc-reasons label { cursor: pointer; }
.fc-reasons input { position: absolute; opacity: 0; pointer-events: none; }
.fc-reasons span { display: inline-block; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); }
.fc-reasons input:checked + span { border-color: rgba(255,139,151,.7); background: rgba(255,77,94,.16); color: #ffd3d8; }
.fc-reasons input:focus-visible + span { outline: 2px solid #e8c27a; outline-offset: 2px; }
.fc-report input[type=text] { height: 38px; padding: 0 12px; border-radius: 11px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.045); color: var(--text); font-size: 13.5px; outline: 0; }
.fc-head .fr-menu { min-width: 170px; }
.fr-menu button:disabled { opacity: .38; cursor: default; background: none; }
.fr-chatb { color: #e8c27a; }
.fc-row { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.fc-row.new { border-color: rgba(232,194,122,.3); background: rgba(232,194,122,.06); }
.fc-top { display: flex; align-items: baseline; gap: 8px; }
.fc-top b { flex: 1; min-width: 0; }
.fc-top time { flex: none; font-size: 11.5px; font-weight: 600; color: var(--dim); }
.fc-row.new .fc-top time { color: #e8c27a; }
.fc-prev { display: flex; align-items: center; gap: 8px; margin-top: 3px; min-width: 0; }
.fc-prev span { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-row.new .fc-prev span { color: var(--text); font-weight: 600; }
.fc-n { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; color: #2a1800;
  background: linear-gradient(180deg, #fff1b8, #ffd866 45%, #e5a92e); }
@media (max-width: 575.98px) { .fc-b { max-width: 86%; } .fc-msgs { padding: 12px 12px 8px; } }/* friends: the emoji at hand in a conversation */
.fc-emo-b { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.045); font-size: 21px; line-height: 1; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.fc-emo-b:hover, .fc-emo-b[aria-expanded="true"] { background: rgba(232,194,122,.12); border-color: rgba(232,194,122,.45); }
.fc-emo { position: absolute; left: 14px; right: 14px; bottom: calc(100% + 6px); z-index: 4; max-height: 290px; overflow-y: auto; overscroll-behavior: contain; padding: 8px;
  border-radius: 16px; background: #1b1736; border: 1px solid rgba(232,194,122,.28); box-shadow: 0 18px 40px -12px rgba(0,0,0,.8); animation: frIn .18s ease;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.fc-emo-g { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.fc-emo-h { margin: 8px 4px 6px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #cdb98d; }
.fc-emo button { height: 38px; border: 0; border-radius: 10px; background: none; font-size: 21px; line-height: 1; display: grid; place-items: center; transition: background .15s, transform .15s; }
.fc-emo button:hover { background: rgba(255,255,255,.08); transform: scale(1.12); }
.fc-emo button img { width: 28px; height: 28px; display: block; }
@media (max-width: 359.98px) { .fc-emo-g { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* friends: a game in a message (its still logo; a message of games only = small cards with the name) */
.fc-gi { width: 22px; height: 22px; vertical-align: -5px; margin: 0 1px; }
.fc-b.games p { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-gcard { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; min-width: 76px; max-width: 110px; padding: 9px 8px 7px; border-radius: 13px;
  background: rgba(0,0,0,.22); border: 1px solid rgba(232,194,122,.3); }
.fc-gcard img { width: 44px; height: 44px; display: block; }
.fc-gcard b { font-size: 12px; font-weight: 700; line-height: 1.25; text-align: center; color: #f3dca6; overflow-wrap: anywhere; }
/* friends: «clear for me» asks first in a small window over the conversation */
.fr-chat { position: relative; }
.fc-ask { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 20px; background: rgba(8,6,20,.62); animation: frIn .16s ease; }
.fc-ask-card { width: 100%; max-width: 300px; padding: 20px 18px 16px; border-radius: 20px; text-align: center; background: linear-gradient(180deg, #221c44, #17132f);
  border: 1px solid rgba(232,194,122,.3); box-shadow: 0 24px 50px -14px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06); }
.fc-ask-ic { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; color: #e8c27a; background: rgba(232,194,122,.1); border: 1px solid rgba(232,194,122,.28); }
.fc-ask-ic svg.i { width: 24px; height: 24px; }
.fc-ask-card h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 800; }
.fc-ask-card p { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.fc-ask-card .fr-yn { justify-content: center; }
.fc-ask-card .fr-b.loading { opacity: .6; pointer-events: none; }

/* ===== the top bar (2026-11): one frame with the logo inside, quiet items, gold and onyx ===== */
/* (the frame runs from edge to edge, glued to the very top; the logo and the buttons stay where they were, in the middle) */
.topx { background: linear-gradient(rgba(255,255,255,.035), rgba(255,255,255,.035)), rgba(12,10,30,.8); border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.topx .top-in { height: 100%; margin: 0 auto; padding: 0 10px 0 14px; gap: 4px; }
@media (min-width: 1272px) { .topx .top-in { max-width: 1240px; } }
@media (max-width: 1271px) { .topx .top-in { margin: 0 16px; } }
.topx .brand { flex: none; margin-right: 20px; }
.topx .brand-logo { width: 34px; height: 34px; }
.topx .brand > b { font-family: 'Cinzel', serif; font-weight: 700; font-size: 18px; letter-spacing: .16em; color: #f3e6c4; }
/* (a game's page keeps its own logo and name; the visitor's menu button is not needed, the bar shows every page) */
.topx .burger { display: none !important; }
/* the nav and the quiet items: icon and words, no boxes */
.topx .nav { gap: 4px; margin-left: 0; }
.topx .nav a, .topx .nav button, .topx .tb-q, .topx .dd-top .dd-btn, .topx .icon-btn, .topx .fr-btn, .topx .bonus-btn, .topx .tb-buy {
  position: relative; display: flex; align-items: center; gap: 8px; width: auto; height: 40px; padding: 0 11px; border: 0; border-radius: 10px; background: none;
  color: var(--muted); font-weight: 500; font-size: 13.5px; white-space: nowrap; text-decoration: none; cursor: pointer; filter: none; box-shadow: none; }
.topx .nav a:hover, .topx .nav button:hover, .topx .dd-top .dd-btn:hover, .topx .dd-top.open .dd-btn, .topx .icon-btn:hover, .topx .fr-btn:hover, .topx .bonus-btn:hover, .topx .tb-buy:hover {
  color: #fff; background: rgba(255,255,255,.05); border: 0; filter: none; }
.topx .nav svg.i, .topx .icon-btn svg.i, .topx .fr-btn svg.i, .topx .tb-buy svg.i, .topx .dd-top .dd-btn svg.i { width: 17px; height: 17px; color: inherit; }
.topx .nav a.on, .topx .nav button.on { color: #fff; background: none; }
.topx .nav a.on svg.i, .topx .nav button.on svg.i { color: var(--gold); }
/* the page you are on: a thin line, brightest in the middle, thinning out to both ends, with a soft glow */
.topx .nav a.on::before, .topx .nav button.on::before { content: ''; position: absolute; left: 10%; right: 10%; bottom: 0; height: 5px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,207,77,.4), transparent 70%); filter: blur(3px); }
.topx .nav a.on::after, .topx .nav button.on::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: 2px; height: 1px; border-radius: 1px;
  background: radial-gradient(ellipse 50% 100% at center, #ffe08a 0%, #ffcf4d 35%, rgba(255,207,77,.35) 70%, transparent 100%); }
/* (on a computer the line is under the word only, not under the icon; on a phone — icons only — it stays as above) */
@media (min-width: 900px) {
  .topx .nav a.on::before, .topx .nav button.on::before, .topx .nav a.on::after, .topx .nav button.on::after { content: none; }
  .topx .nav a.on > span, .topx .nav button.on > span { position: relative; align-self: stretch; display: flex; align-items: center; }
  .topx .nav a.on > span::before, .topx .nav button.on > span::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255,207,77,.4), transparent 70%); filter: blur(3px); }
  .topx .nav a.on > span::after, .topx .nav button.on > span::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: 2px; height: 1px; border-radius: 1px;
    background: radial-gradient(ellipse 50% 100% at center, #ffe08a 0%, #ffcf4d 35%, rgba(255,207,77,.35) 70%, transparent 100%); }
}
.topx .dd-top { width: auto; }
.topx .dd-top .dd-val { flex: none; color: #fff; font-weight: 600; font-size: 12.5px; letter-spacing: .05em; }
.topx .dd-top .dd-btn .dd-chev { width: 14px; height: 14px; opacity: .6; }
/* (a game's page: the code in the bar, the code and the name in the menu) */
.topx .dd-top .dd-code { color: #fff; font-weight: 600; font-size: 12.5px; letter-spacing: .05em; }
.topx .dd-top .dd-code ~ .dd-val, .topx .tb-lang-m .dd-globe { display: none; }
.topx .dd-top .dd-list { left: auto; right: 0; min-width: 210px; }
.topx .fr-btn { color: var(--muted); }
.topx .fr-badge { top: 3px; right: 3px; }
.topx .tb-buy svg.i { color: var(--gold); }
.topx .bonus-btn .bonus-coin { position: relative; width: 19px; height: 19px; flex: none; background: radial-gradient(circle at 35% 30%, #fffbe6, #ffd55e 50%, #a87a10); box-shadow: none; }
.topx .bonus-btn .bonus-coin::after { content: ''; position: absolute; left: 7.5px; top: 5px; border-left: 6px solid #5a3e00; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.topx .bonus-btn.hidden { display: none; }
.topx .tb-sep { width: 1px; height: 20px; margin: 0 6px; flex: none; background: rgba(255,255,255,.1); }
/* log in: black onyx, a gold edge, gold letters, a light passing every 5 seconds (it moves, nothing is redrawn) */
.topx .tb-login { position: relative; overflow: hidden; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 18px 0 14px; border-radius: 10px; flex: none;
  white-space: nowrap; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; color: #ffd866; cursor: pointer;
  background: linear-gradient(180deg, #26232e 0%, #0d0c12 55%, #050508 100%) padding-box, linear-gradient(135deg, #fff1b8 0%, #e0a93a 30%, #7a5410 55%, #f3c95a 80%, #fff1b8 100%) border-box;
  border: 1.5px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 22px -10px rgba(255,190,60,.55); transition: box-shadow .2s; }
.topx .tb-login svg.i { width: 17px; height: 17px; color: #ffd866; }
.topx .tb-login::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 36px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,230,160,.22), transparent); transform: translateX(-50px) skewX(-20deg); animation: tbShine 5s ease-in-out infinite; }
@keyframes tbShine { 0%, 72% { transform: translateX(-50px) skewX(-20deg); } 100% { transform: translateX(220px) skewX(-20deg); } }
.topx .tb-login:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 26px -8px rgba(255,190,60,.8); }
@media (prefers-reduced-motion: reduce) { .topx .tb-login::after { animation: none; display: none; } }
/* your account: the avatar with a gold ring, the name and ⌄ */
.topx .acct { gap: 9px; height: 40px; padding: 0 8px 0 4px; margin-left: 4px; border: 0; border-radius: 10px; background: rgba(255,255,255,.06); font-size: 13.5px; }
.topx .acct:hover { background: rgba(255,255,255,.09); }
.topx .acct-name { font-weight: 600; font-size: 13.5px; }
.topx .acct > svg.i { width: 14px; height: 14px; opacity: .6; }
.topx .acct .ava, .topx .acct-head .ava { width: 32px; height: 32px; border-radius: 50%; font-weight: 700; font-size: 13px; background: #0d0c12 !important; color: #ffd866; box-shadow: 0 0 0 1.5px #e0a93a; }
.topx .acct .ava .lv { bottom: -6px; right: -8px; height: 16px; min-width: 16px; font-size: 9.5px; padding: 0 4px; }
.topx .acct-head .ava { width: 40px; height: 40px; font-size: 15px; }
/* the account menu */
.topx #acctPop { width: 320px; padding: 8px; border-radius: 16px; max-height: calc(100vh - var(--top) - 16px); max-height: calc(100dvh - var(--top) - 16px); overflow-y: auto;
  background: linear-gradient(180deg, #1b1840, #121031); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 50px -16px rgba(0,0,0,.9); backdrop-filter: none; -webkit-backdrop-filter: none; }
.topx #acctPop .acct-head { gap: 11px; padding: 10px 10px 12px; margin-bottom: 0; }
.topx #acctPop .acct-head b { font-size: 14px; }
.topx #acctPop .lvl-line, .topx #acctPop .gstats { margin-left: 8px; margin-right: 8px; }
.topx .pop, .topx .dd-list { overscroll-behavior: contain; }      /* (with the scripts: the page under a window never moves) */
.topx .am-t { display: flex; align-items: center; gap: 8px; padding: 10px 10px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.topx .am-t svg.i { width: 15px; height: 15px; color: var(--gold); }
.topx .tb-lang-m { padding: 2px 10px 6px; }
.topx .tb-lang-m .dd-btn { height: 38px; gap: 8px; padding: 0 10px 0 12px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,207,77,.35); font-size: 13.5px; font-weight: 600; }
.topx .tb-lang-m .dd-btn:hover, .topx .tb-lang-m.open .dd-btn { background: rgba(255,255,255,.08); border-color: rgba(255,207,77,.55); }
.topx .tb-lang-m .dd-code { color: #ffd866; font-weight: 700; font-size: 11.5px; letter-spacing: .05em; }
.topx .tb-lang-m .dd-chev { opacity: .8; color: #ffd866; }
/* (inside the menu the list opens in place, under the box, so the menu only grows) */
.topx .tb-lang-m .dd-list { position: static; margin-top: 6px; max-height: none; background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.08); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.topx .tb-lang-m .dd-list li { padding: 9px 10px; font-size: 13.5px; }
.topx .am-snd { padding: 0 10px; }
.topx .am-snd .snd { padding: 8px 0; border: 0; grid-template-columns: 30px 1fr auto; }
.topx .am-snd .snd .si { width: 30px; height: 30px; }
.topx .am-snd .snd b { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
/* (the vibration row has no slider: its empty place goes, so its switch stays on the same line) */
.topx .snd > span:empty { display: none; }
.topx .snd:has(> span:empty) b { margin-bottom: 0; }
.topx .am-snd .switch { width: 34px; height: 20px; }
.topx .am-snd .switch::after { top: 2px; left: 2px; width: 16px; height: 16px; }
.topx .am-snd .switch.on::after { transform: translateX(14px); }
.topx .am-sep { height: 1px; margin: 6px 4px; background: rgba(255,255,255,.08); }
.topx #acctPop .menu-item { height: 40px; padding: 0 10px; gap: 11px; font-weight: 500; font-size: 13.5px; color: #e9e6ff; }
.topx #acctPop .menu-item.danger { color: #ff8a95; }
.topx #sndPop { background: linear-gradient(180deg, #1b1840, #121031); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* the sound button: a speaker on a computer; on a phone, where it holds the language too, the settings sliders */
.topx .ic-set { display: none; }
.topx .snd-lang:not(.on) { display: none; }
.topx #sndPop .snd-lang .am-t { padding: 0 0 8px; }
.topx #sndPop .tb-lang-m { padding: 0 0 14px; }
/* tablets and phones: every item is its icon alone, only «Log in» keeps its word; the site's name hides. The items spread
   evenly over the whole width (no empty middle, the same rhythm on every phone), «Log in» clear of the screen's edge */
@media (max-width: 899px) {
  .topx .top-in { margin: 0; padding: 0 12px; gap: 0; justify-content: space-between; }
  .topx .sp, .topx .tb-sep, .topx .dd-top.tb-lang, .topx .ic-snd { display: none; }
  .topx .ic-set { display: block; }
  .topx .nav { display: contents; }
  .topx #nvHome { display: none; }                 /* (a game's page: its logo goes to the same place) */
  .topx .brand { margin-right: 0; }
  .topx .brand > b, .topx .brand-t, .topx .acct-name, .topx .acct > svg, .topx .tb-t, .topx .nav span, .topx .bonus-btn span, .topx .dd-top .dd-val, .topx .dd-top .dd-code, .topx .dd-top .dd-chev { display: none; }
  .topx .nav a, .topx .nav button, .topx .dd-top .dd-btn, .topx .icon-btn, .topx .fr-btn, .topx .bonus-btn, .topx .tb-buy { width: 38px; height: 38px; padding: 0; gap: 0; justify-content: center; }
  .topx .nav svg.i, .topx .icon-btn svg.i, .topx .fr-btn svg.i, .topx .tb-buy svg.i, .topx .dd-top .dd-btn svg.i { width: 19px; height: 19px; }
  .topx .bonus-btn .bonus-coin { width: 21px; height: 21px; }
  .topx .bonus-btn .bonus-coin::after { left: 8.5px; top: 6px; }
  .topx .tb-login { height: 38px; padding: 0 12px 0 10px; gap: 7px; font-size: 13px; margin: 0; }
  .topx .acct { padding: 0 2px; background: none; margin: 0; }
  .topx #acctPop { width: auto; }
}
@media (max-width: 420px) {
  .topx .top-in { gap: 0 !important; padding: 0 10px !important; margin: 0; }
  .topx .brand-logo { width: 30px; height: 30px; }
  .topx .acct .ava .lv { right: -4px; }
  .topx .nav a, .topx .nav button, .topx .dd-top .dd-btn, .topx .icon-btn, .topx .fr-btn, .topx .bonus-btn, .topx .tb-buy { width: 34px; height: 36px; }
  .topx .tb-login, .topx #loginBtn { padding: 0 10px 0 8px !important; gap: 6px; font-size: 12.5px; letter-spacing: .04em; }
}
/* (the games page's «Log in» has an id with older phone rules: they give way here) */
@media (max-width: 520px) and (min-width: 421px) { .topx #loginBtn { padding: 0 12px 0 10px; font-size: 13px; letter-spacing: .04em; } }
@media (max-width: 380px) {
  .topx .top-in { padding: 0 10px !important; }
  .topx .nav a, .topx .nav button, .topx .dd-top .dd-btn, .topx .icon-btn, .topx .fr-btn, .topx .bonus-btn, .topx .tb-buy { width: 32px; }
  .topx .tb-login svg.i { display: none; }
  .topx .tb-login, .topx #loginBtn { padding: 0 9px !important; font-size: 12px; letter-spacing: 0; }
}