/* ============================================================
   LUDO — FunChat Games   (all classes prefixed lu-)
   ============================================================ */
:root{
  --lu-red:#ff5a7a;--lu-green:#3ddc97;--lu-yellow:#ffd23f;--lu-blue:#4dabf7;
  --lu-card:rgba(35,20,48,.72);--lu-line:rgba(192,132,252,.18);--lu-glow:rgba(168,85,247,.35);
}
#ludoMenuView,#ludoSearchView,#ludoLobbyView,#ludoGameView{padding:0 0 96px;}
#ludoMenuView.active,#ludoSearchView.active,#ludoLobbyView.active,#ludoGameView.active{display:block;}
.lu-wrap{max-width:480px;margin:0 auto;padding:16px 16px 0;position:relative;z-index:1;}

/* ---------- hero ---------- */
.lu-hero{position:relative;text-align:center;padding:22px 10px 8px;}
.lu-hero h1{font-family:'Playfair Display',serif;font-style:italic;font-size:2.5rem;line-height:1;
  background:linear-gradient(120deg,var(--lu-red),var(--lu-yellow) 35%,var(--lu-green) 65%,var(--lu-blue));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.5px;}
.lu-hero p{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:3px;color:var(--muted);margin-top:8px;text-transform:uppercase;}
.lu-hero .lu-dice-float{position:absolute;font-size:1.7rem;opacity:.9;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));animation:lufloat 4.5s ease-in-out infinite;}
.lu-hero .d1{left:6%;top:16px;animation-delay:-1s}.lu-hero .d2{right:7%;top:30px;animation-delay:-2.4s;font-size:1.3rem}
@keyframes lufloat{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-9px) rotate(10deg)}}

/* ---------- cards ---------- */
.lu-card{background:var(--lu-card);backdrop-filter:blur(14px);border:1px solid var(--lu-line);border-radius:20px;padding:16px;margin-top:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05);}
.lu-card h3{font-family:'DM Sans',sans-serif;font-weight:800;font-size:1rem;display:flex;align-items:center;gap:8px;}
.lu-card .lu-sub{font-family:'DM Mono',monospace;font-size:.6rem;color:var(--muted);margin:4px 0 12px;line-height:1.5;}
.lu-seg{display:flex;gap:6px;background:rgba(0,0,0,.28);padding:4px;border-radius:13px;margin-bottom:10px;}
.lu-seg button{flex:1;padding:9px 0;border-radius:10px;font-family:'DM Sans',sans-serif;font-weight:700;font-size:.8rem;color:var(--text2);transition:.18s;}
.lu-seg button.on{background:linear-gradient(135deg,var(--lav2),var(--rose2));color:#fff;box-shadow:0 4px 14px var(--lu-glow);}
.lu-btn{width:100%;padding:13px;border-radius:14px;font-family:'DM Sans',sans-serif;font-weight:800;font-size:.9rem;color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#ec4899);box-shadow:0 8px 24px rgba(168,85,247,.35);transition:transform .15s,filter .15s;}
.lu-btn:active{transform:scale(.97)}.lu-btn:disabled{opacity:.45;filter:grayscale(.5);box-shadow:none}
.lu-btn.alt{background:rgba(255,255,255,.07);border:1px solid var(--lu-line);box-shadow:none;color:var(--text);}
.lu-btn.green{background:linear-gradient(135deg,#10b981,#06b6d4);box-shadow:0 8px 24px rgba(16,185,129,.3);}
.lu-btn.danger{background:rgba(244,63,94,.14);border:1px solid rgba(244,63,94,.4);color:#fb7185;box-shadow:none;}
.lu-btn.sm{width:auto;padding:9px 14px;font-size:.75rem;border-radius:11px;}
.lu-row{display:flex;gap:8px;align-items:center;}
.lu-input{flex:1;min-width:0;background:rgba(0,0,0,.3);border:1px solid var(--lu-line);border-radius:12px;padding:12px 14px;color:var(--text);
  font-family:'DM Mono',monospace;font-size:.95rem;letter-spacing:4px;text-transform:uppercase;text-align:center;}
.lu-input:focus{border-color:var(--lav);box-shadow:0 0 0 3px rgba(192,132,252,.15);}
.lu-link{color:var(--lav);font-size:.72rem;text-decoration:underline;cursor:pointer;font-family:'DM Sans',sans-serif;}

/* ---------- me strip + rank badge ---------- */
.lu-me{display:flex;align-items:center;gap:12px;}
.lu-av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex-shrink:0;
  font-family:'DM Sans',sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.4),inset 0 -3px 6px rgba(0,0,0,.25),inset 0 2px 4px rgba(255,255,255,.3);}
.lu-me .lu-nm{font-weight:800;font-size:.95rem}.lu-me .lu-st{font-family:'DM Mono',monospace;font-size:.62rem;color:var(--muted);margin-top:2px}
.lu-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:100px;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.35);
  color:#fcd34d;font-size:.62rem;font-weight:700;font-family:'DM Sans',sans-serif;white-space:nowrap;}
.lu-pts{margin-left:auto;text-align:right;font-family:'DM Mono',monospace;font-size:.6rem;color:var(--muted)}
.lu-pts b{display:block;font-size:1.05rem;color:var(--gold);font-family:'DM Sans',sans-serif}

/* ---------- leaderboard ---------- */
.lu-lb-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.05);font-size:.82rem}
.lu-lb-row:last-child{border:none}.lu-lb-row .r{width:26px;text-align:center;font-family:'DM Mono',monospace;color:var(--muted);font-weight:700}
.lu-lb-row .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.lu-lb-row .p{font-family:'DM Mono',monospace;color:var(--gold);font-weight:700}
.lu-lb-row.me{background:rgba(168,85,247,.12);border-radius:10px}

/* ---------- search ---------- */
.lu-search{text-align:center;padding:56px 10px 10px}
.lu-spin{width:120px;height:120px;margin:0 auto 22px;position:relative}
.lu-spin i{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:var(--lav);animation:luspin 1.1s linear infinite}
.lu-spin i:nth-child(2){inset:12px;border-top-color:var(--rose);animation-duration:1.6s;animation-direction:reverse}
.lu-spin i:nth-child(3){inset:24px;border-top-color:var(--lu-yellow);animation-duration:2.2s}
.lu-spin span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.4rem;animation:lupulse 1.4s ease-in-out infinite}
@keyframes luspin{to{transform:rotate(360deg)}}@keyframes lupulse{50%{transform:scale(1.15)}}
.lu-search h2{font-family:'DM Sans',sans-serif;font-size:1.2rem;font-weight:800}
.lu-search p{font-family:'DM Mono',monospace;font-size:.65rem;color:var(--muted);margin:8px 0 22px;line-height:1.7}

/* ---------- lobby ---------- */
.lu-code{text-align:center;padding:6px 0 2px}
.lu-code small{font-family:'DM Mono',monospace;font-size:.55rem;letter-spacing:3px;color:var(--muted)}
.lu-code .c{font-family:'DM Mono',monospace;font-weight:700;font-size:2.4rem;letter-spacing:10px;margin:4px 0 2px;padding-left:10px;
  background:linear-gradient(135deg,var(--lav),var(--rose));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.lu-seats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.lu-seat{position:relative;border-radius:16px;padding:12px;background:rgba(0,0,0,.25);border:1.5px dashed rgba(255,255,255,.14);min-height:78px;
  display:flex;align-items:center;gap:10px;overflow:hidden}
.lu-seat.full{border-style:solid;background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.lu-seat .bar{position:absolute;left:0;top:0;bottom:0;width:4px}
.lu-seat .nm{font-weight:700;font-size:.82rem;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lu-seat .lsb{font-family:'DM Mono',monospace;font-size:.55rem;color:var(--muted);margin-top:2px}
.lu-seat .kick{position:absolute;right:6px;top:6px;width:22px;height:22px;border-radius:50%;background:rgba(244,63,94,.18);color:#fb7185;font-size:.7rem}
.lu-seat .empty{margin:auto;font-family:'DM Mono',monospace;font-size:.6rem;color:var(--muted);text-align:center;line-height:1.5}

/* ---------- game screen (light theme, card-suit tokens) ---------- */
#ludoGameView.active{background:#f6efe2;min-height:calc(100vh - 52px)}
.lu-game{max-width:480px;margin:0 auto;padding:10px 10px 0;position:relative;z-index:1;color:#1e2128}
.lg-top{display:flex;gap:7px;align-items:stretch}
.lg-chips{flex:1;display:flex;gap:6px;min-width:0}
.lg-chip{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:6px;padding:7px 7px;border-radius:14px;background:rgba(255,255,255,.7);
  border:2px solid transparent;cursor:pointer;transition:.2s;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.lg-chip.act{background:#fff;border-color:var(--c);box-shadow:0 4px 14px -4px var(--c)}
.lg-chip b{display:block;font-size:.72rem;font-weight:800;color:#20232b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15}
.lg-chip small{display:block;font-family:'DM Mono',monospace;font-size:.55rem;color:#7b7f8a;white-space:nowrap;margin-top:1px}
.lg-chip .nm{min-width:0;flex:1}
.lg-chip.off{filter:grayscale(1);opacity:.55}
.lg-disc{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9rem;line-height:1;
  background:radial-gradient(circle at 35% 28%,var(--cl),var(--c) 55%,var(--cd));box-shadow:0 2px 4px rgba(0,0,0,.28),inset 0 0 0 1.5px rgba(255,255,255,.75)}
.lg-menu{position:relative;width:46px;flex-shrink:0;border-radius:14px;background:#fff;border:1.5px solid #d9d2c3;font-size:1.3rem;color:#2a2d36;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.lg-menu .ub,.lu-actions .ub{position:absolute;top:-6px;right:-5px;min-width:18px;height:18px;border-radius:9px;background:#f43f5e;color:#fff;font-size:.6rem;font-weight:800;display:none;align-items:center;justify-content:center;padding:0 4px;font-family:'DM Mono',monospace}
.lg-pop{position:absolute;right:10px;top:62px;z-index:50;min-width:178px;background:#fff;border:1px solid #e1dbcd;border-radius:16px;padding:6px;box-shadow:0 14px 40px rgba(0,0,0,.28);display:none}
.lg-pop.open{display:block;animation:lupop .18s}
.lg-pop button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border-radius:11px;font-size:.84rem;font-weight:700;color:#23262e;text-align:left;position:relative}
.lg-pop button:active{background:#f3eee3}.lg-pop button.red{color:#d92d4a}
.lg-pop .ub{right:10px;top:12px}
.lu-emo{position:absolute;right:4px;top:-6px;font-size:1.6rem;animation:luemo 2.2s ease-out forwards;pointer-events:none;z-index:5;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
@keyframes luemo{0%{transform:translateY(14px) scale(.4);opacity:0}15%{transform:translateY(0) scale(1.25);opacity:1}30%{transform:scale(1)}80%{opacity:1}100%{transform:translateY(-22px);opacity:0}}

.lu-boardwrap{position:relative;width:100%;aspect-ratio:1/1;margin:12px 0 12px;border-radius:20px;padding:6px;background:#202431;
  box-shadow:0 18px 40px -8px rgba(40,30,10,.45),0 0 0 1px rgba(0,0,0,.35)}
.lu-boardwrap svg{width:100%;height:100%;display:block;overflow:visible;border-radius:13px}
.lu-boardwrap.shake{animation:lushake .35s}
@keyframes lushake{0%,100%{transform:none}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,-1px)}80%{transform:translate(2px,1px)}}
.lu-tok{transition:transform .15s cubic-bezier(.3,.7,.4,1);will-change:transform;cursor:default}
.lu-tok .ring{opacity:0;fill:none;stroke:#101216;stroke-width:.9;filter:drop-shadow(0 0 1px #fff);transform-box:fill-box;transform-origin:center}
.lu-tok.can{cursor:pointer}.lu-tok.can .ring{opacity:1;animation:lupulsering 1s ease-in-out infinite}
@keyframes lupulsering{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.2);opacity:.3}}
.lu-tok .body{transform-origin:0 3px;transition:transform .15s}
.lu-tok.hop .body{animation:luhop .15s ease-out}
@keyframes luhop{50%{transform:translateY(-2.8px) scale(1.12)}}
.lu-tok.can .body{animation:lubob .7s ease-in-out infinite}
@keyframes lubob{50%{transform:translateY(-1.5px)}}
.lu-tok.back{transition:transform .5s cubic-bezier(.6,-.2,.3,1.2)}
.lu-yard.act .yfill{animation:luyard 1.2s ease-in-out infinite}
@keyframes luyard{50%{filter:brightness(1.22)}}

/* bottom card: whose turn + dice */
.lg-card{--c:#e53935;--cd:#a8201e;--ct:#fde3e2;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:24px;border:2.5px solid var(--c);
  background:linear-gradient(100deg,#fff 0%,var(--ct) 100%);box-shadow:0 10px 26px -8px var(--c);transition:border-color .25s,background .25s}
.lg-card .lg-disc{width:46px;height:46px;font-size:1.5rem;border:2px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.lu-status{flex:1;min-width:0}
.lu-status b{display:block;font-family:'DM Sans',sans-serif;font-size:1.02rem;font-weight:800;line-height:1.2;color:#1c1e25}
.lu-status span{display:block;font-family:'DM Sans',sans-serif;font-size:.74rem;color:#6a6e79;margin-top:3px}
.lu-tbar{height:4px;border-radius:4px;background:rgba(0,0,0,.08);margin-top:7px;overflow:hidden}
.lu-tbar div{height:100%;width:100%;background:var(--c);transform-origin:left}
.lu-dice{position:relative;width:64px;height:64px;border-radius:16px;flex-shrink:0;cursor:pointer;background:linear-gradient(160deg,#fff,#eceaf1);
  border:3px solid var(--c);box-shadow:0 5px 0 var(--cd),0 10px 16px rgba(0,0,0,.2);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:8px;gap:2px;transition:transform .12s,box-shadow .12s}
.lu-dice:active{transform:translateY(3px);box-shadow:0 2px 0 var(--cd)}
.lu-dice i{border-radius:50%;margin:1px;background:transparent}
.lu-dice i.on{background:radial-gradient(circle at 35% 30%,#555,#111)}
.lu-dice.six i.on{background:radial-gradient(circle at 35% 30%,#ff6b7f,#c81e3a)}
.lu-dice.ready{animation:lupulsedice 1s ease-in-out infinite}
@keyframes lupulsedice{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.lu-dice.rolling{animation:lurollspin .55s linear infinite}
@keyframes lurollspin{0%{transform:rotate(0) scale(1.06)}25%{transform:rotate(95deg) scale(.96)}50%{transform:rotate(190deg) scale(1.08)}75%{transform:rotate(280deg) scale(.96)}100%{transform:rotate(360deg) scale(1.06)}}
.lu-dice.off{opacity:.6;cursor:default;animation:none}
#luEmoTray{margin-top:10px;background:#fff;border-radius:16px;padding:6px;border:1px solid #e1dbcd}
#luEmoTray button{background:#f4efe4}
.lu-cell-pulse{animation:lucell 1s ease-in-out infinite}@keyframes lucell{50%{opacity:.4}}
.lu-actions{display:none}

/* ---------- chat sheet ---------- */
.lu-chat{position:fixed;left:0;right:0;bottom:0;z-index:900;max-width:480px;margin:0 auto;height:min(62vh,520px);border-radius:24px 24px 0 0;
  background:rgba(24,12,36,.97);backdrop-filter:blur(24px);border:1px solid var(--lu-line);border-bottom:none;box-shadow:0 -20px 60px rgba(0,0,0,.6);
  transform:translateY(105%);transition:transform .28s cubic-bezier(.3,.8,.3,1);display:flex;flex-direction:column}
.lu-chat.open{transform:none}
.lu-chat-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px;font-weight:800;font-size:.9rem}
.lu-chat-h small{font-family:'DM Mono',monospace;font-size:.52rem;color:var(--muted);font-weight:400;display:block;margin-top:2px}
.lu-chat-list{flex:1;overflow-y:auto;padding:6px 14px;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth}
.lu-msg{max-width:84%;padding:7px 11px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.08);font-size:.8rem;line-height:1.35;word-break:break-word;align-self:flex-start}
.lu-msg b{display:block;font-size:.58rem;font-family:'DM Mono',monospace;margin-bottom:2px;color:var(--c,#c4a8d8);cursor:pointer}
.lu-msg.me{align-self:flex-end;background:linear-gradient(135deg,rgba(139,92,246,.55),rgba(236,72,153,.45));border-radius:14px 14px 4px 14px}
.lu-msg.sys{align-self:center;background:rgba(244,63,94,.14);border:1px solid rgba(244,63,94,.3);color:#fda4af;font-size:.68rem;text-align:center;max-width:94%;border-radius:11px}
.lu-emotes{display:flex;gap:4px;padding:6px 12px;overflow-x:auto}.lu-emotes button{font-size:1.25rem;padding:4px 7px;border-radius:10px;background:rgba(255,255,255,.06);flex-shrink:0}
.lu-chat-f{display:flex;gap:8px;padding:8px 12px 14px}
.lu-chat-f input{flex:1;min-width:0;background:rgba(0,0,0,.35);border:1px solid var(--lu-line);border-radius:14px;padding:11px 14px;color:var(--text);font-size:.85rem}
.lu-chat-f button{width:44px;border-radius:14px;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-size:1rem}
.lu-chat-lim{font-family:'DM Mono',monospace;font-size:.52rem;color:var(--muted);text-align:center;padding:0 12px 6px}

/* ---------- modal ---------- */
.lu-modal{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(5,2,12,.78);backdrop-filter:blur(7px)}
.lu-modal.show{display:flex;animation:lufade .2s}
@keyframes lufade{from{opacity:0}}
.lu-mbox{width:100%;max-width:330px;max-height:86vh;overflow-y:auto;background:linear-gradient(160deg,#26153a,#170c26);border:1px solid var(--lu-line);border-radius:22px;padding:22px 18px;
  text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.65);animation:lupop .28s cubic-bezier(.3,1.4,.5,1)}
@keyframes lupop{from{transform:scale(.88);opacity:0}}
.lu-mbox h2{font-family:'DM Sans',sans-serif;font-size:1.1rem;font-weight:800;margin-bottom:8px}
.lu-mbox p,.lu-mbox .t{font-size:.8rem;line-height:1.55;color:var(--text2)}
.lu-mbox .btns{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.lu-mbox.rules{text-align:left;max-width:380px}.lu-mbox.rules h2{text-align:center}
.lu-mbox.rules h4{font-size:.78rem;color:var(--lav);margin:12px 0 4px;font-weight:800;letter-spacing:.3px}
.lu-mbox.rules li{font-size:.76rem;line-height:1.5;color:var(--text2);margin:3px 0 3px 16px}
.lu-note{font-size:.66rem;color:var(--muted);line-height:1.5;margin-top:10px}

/* podium */
.lu-pod{display:flex;flex-direction:column;gap:7px;margin-top:12px;text-align:left}
.lu-pod div{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:13px;background:rgba(255,255,255,.06)}
.lu-pod div:first-child{background:linear-gradient(135deg,rgba(251,191,36,.22),rgba(251,191,36,.06));border:1px solid rgba(251,191,36,.4)}
.lu-pod .m{font-size:1.3rem;width:28px;text-align:center}.lu-pod .n{flex:1;font-weight:700;font-size:.82rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lu-pod .p{font-family:'DM Mono',monospace;color:#86efac;font-weight:700;font-size:.78rem}

/* settings switches */
.lu-set{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 2px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left}
.lu-set:last-child{border:none}.lu-set b{font-size:.82rem;font-weight:700;display:block}.lu-set small{font-size:.62rem;color:var(--muted);display:block;margin-top:2px;line-height:1.4}
.lu-sw{position:relative;width:44px;height:25px;border-radius:25px;background:rgba(255,255,255,.14);flex-shrink:0;transition:.2s}
.lu-sw::after{content:'';position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 2px 4px rgba(0,0,0,.4)}
.lu-sw.on{background:linear-gradient(135deg,#8b5cf6,#ec4899)}.lu-sw.on::after{transform:translateX(19px)}
.lu-range{width:130px;accent-color:#a855f7}

#luConfetti{position:fixed;inset:0;pointer-events:none;z-index:100001}
@media(max-width:380px){.lu-hero h1{font-size:2.1rem}.lu-pan .pn{font-size:.7rem}.lu-dice{width:52px;height:52px}}

/* offline players */
.lu-tok.off{filter:grayscale(1) brightness(.9);opacity:.65}

/* avatar photo with seat-colour ring + suit badge */
.lg-pic{position:relative;display:inline-block;flex-shrink:0;border-radius:50%;border:2.5px solid var(--c);background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.28)}
.lg-pic img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.lg-pic .lgs{position:absolute;right:-3px;bottom:-3px;width:30%;height:30%;min-width:13px;min-height:13px;border-radius:50%;background:var(--c);font-style:normal;font-size:.5em;line-height:1;display:flex;align-items:center;justify-content:center;border:1.2px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.lg-pic{font-size:1em}
.lg-chip .lg-pic{font-size:.8rem}.lg-card .lg-pic{font-size:1.1rem}.lu-seat .lg-pic{font-size:.9rem}
.lg-card #luCardAv{width:auto;height:auto;border:none;box-shadow:none;background:none}

/* players beside their houses + inline chat feed */
.lg-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.lg-head b{font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:800;color:#2a2d36}
.lg-head b span{font-family:'DM Mono',monospace;font-size:.62rem;color:#7b7f8a;font-weight:600;margin-left:4px}
.lg-menu{width:42px;height:38px}
.lg-chips,.lg-chip{display:none}
.lg-prow{display:flex;justify-content:space-between;gap:10px;min-height:0}
.lg-pl{position:relative;display:flex;align-items:center;gap:9px;padding:4px 6px;border-radius:16px;cursor:pointer;min-width:0;max-width:49%;transition:.2s}
.lg-pl.right{flex-direction:row-reverse;text-align:right;margin-left:auto}
.lg-pl.empty{display:none}
.lg-pl:only-child{max-width:100%}
.lg-pl .nm{min-width:0}
.lg-pl .nm b{display:block;font-size:.8rem;font-weight:800;color:#20232b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px;line-height:1.2}
.lg-pl .nm small{display:block;font-family:'DM Mono',monospace;font-size:.6rem;color:#6d717c;margin-top:2px;white-space:nowrap}
.lg-pl.act{background:#fff;box-shadow:0 6px 18px -6px var(--c),0 0 0 2px var(--c)}
.lg-pl.off{filter:grayscale(1);opacity:.5}
.lg-avw{position:relative;width:56px;height:56px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.lg-ring{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .2s}
.lg-pl.act .lg-ring{opacity:1}
.lg-pl .lg-pic{font-size:.85rem}
.lg-prow{margin:2px 0}
.lg-feedbox{margin-top:12px;background:#fff;border:1px solid #e1dbcd;border-radius:18px;padding:8px 10px 6px;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.lg-feed{height:122px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;scroll-behavior:smooth;padding-right:2px}
.lg-feed .fl{font-family:'DM Sans',sans-serif;font-size:.76rem;line-height:1.35;color:#2b2e37;background:#f6f1e7;border-radius:10px;padding:5px 9px;word-break:break-word;animation:lufade .25s}
.lg-feed .fl.me{background:#ece6ff}
.lg-feed .fl.sys{background:#fde8ea;color:#c0233f;font-weight:700;font-size:.7rem}
.lg-feed .fl.hint{background:none;color:#9a9ca6;text-align:center;margin-top:36px}
.lg-feedin{display:flex;gap:7px;margin-top:7px}
.lg-feedin input{flex:1;min-width:0;background:#f6f1e7;border:1px solid #e1dbcd;border-radius:12px;padding:10px 12px;font-size:.82rem;color:#23262e}
.lg-feedin input:focus{border-color:#a855f7;box-shadow:0 0 0 3px rgba(168,85,247,.15)}
.lg-feedin button{width:42px;border-radius:12px;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-size:.95rem}
.lg-feedlim{font-family:'DM Mono',monospace;font-size:.55rem;color:#9a9ca6;text-align:center;margin-top:4px}

.lg-card .lg-pic{font-size:.95rem}.lg-pl .lg-pic{font-size:.75rem}

/* breathing room between the players row and the turn card */
#luTopRow{margin:4px 0 10px}
#luBotRow{margin:12px 0 14px}
.lg-card{margin-top:2px}

/* celebrations */
.lu-ringfx{transform-box:fill-box;transform-origin:center;animation:luringfx 1s ease-out forwards}
@keyframes luringfx{0%{transform:scale(.4);opacity:.95}100%{transform:scale(4.6);opacity:0}}
.lu-glowfx{transform-box:fill-box;transform-origin:center;animation:luglowfx .9s ease-out forwards}
@keyframes luglowfx{0%{transform:scale(.3);opacity:.9}60%{opacity:.6}100%{transform:scale(2.6);opacity:0}}
.lu-spark{animation:luspark .95s ease-out forwards}
@keyframes luspark{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.4) rotate(200deg);opacity:0}}
.lu-homelbl{animation:luhomelbl 1.5s ease-out forwards}
@keyframes luhomelbl{0%{transform:translateY(8px) scale(.4);opacity:0}18%{transform:translateY(0) scale(1.25);opacity:1}35%{transform:scale(1)}80%{opacity:1}100%{transform:translateY(-14px);opacity:0}}
.lu-popper{position:fixed;bottom:5vh;z-index:100002;font-size:3.4rem;pointer-events:none;transform-origin:50% 100%;animation:lupopper 1.4s ease-out forwards;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
@keyframes lupopper{0%{transform:scale(.2) rotate(-25deg);opacity:0}15%{transform:scale(1.5) rotate(10deg);opacity:1}30%{transform:scale(1) rotate(0)}85%{opacity:1}100%{transform:translateY(-30px) scale(.9);opacity:0}}
.lu-trophy{display:inline-block;animation:lutrophy 1.1s ease-in-out infinite}
@keyframes lutrophy{0%,100%{transform:translateY(0) rotate(-6deg) scale(1)}50%{transform:translateY(-8px) rotate(6deg) scale(1.12)}}
#luConfetti{z-index:100003}

#ludoPickCard.lu-off{opacity:.5;filter:grayscale(.7)}
#ludoPickCard.lu-off::after{content:'OFF';position:absolute;right:14px;top:10px;font:700 .55rem 'DM Mono',monospace;color:#fda4af;letter-spacing:1px}
#ludoPickCard{position:relative}

.lu-logo{display:block;width:84px;height:84px;margin:0 auto 10px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08)}

/* 3D cube dice */
.lu-dice{background:none!important;border:none!important;box-shadow:none!important;display:block!important;padding:0!important;perspective:460px;width:64px;height:64px}
.lu-dice:active{transform:none!important}
.lu-cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(0) rotateY(0)}
.lu-face{position:absolute;inset:0;border-radius:15px;background:linear-gradient(145deg,#ffffff 0%,#ece8f3 100%);border:3px solid var(--c,#e53935);
  box-shadow:inset 0 -5px 8px rgba(0,0,0,.1),inset 0 3px 4px #fff;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:8px;gap:2px;backface-visibility:hidden}
.lu-face i{border-radius:50%;margin:1px;background:transparent}
.lu-face i.on{background:radial-gradient(circle at 35% 30%,#555,#111);box-shadow:inset 0 1px 1px rgba(255,255,255,.25)}
.lu-face.f6 i.on{background:radial-gradient(circle at 35% 30%,#ff6b7f,#c81e3a)}
.lu-face.f1{transform:translateZ(32px)}
.lu-face.f6{transform:rotateY(180deg) translateZ(32px)}
.lu-face.f2{transform:rotateY(90deg) translateZ(32px)}
.lu-face.f5{transform:rotateY(-90deg) translateZ(32px)}
.lu-face.f3{transform:rotateX(90deg) translateZ(32px)}
.lu-face.f4{transform:rotateX(-90deg) translateZ(32px)}
.lu-dshadow{position:absolute;left:8px;right:8px;bottom:-10px;height:12px;border-radius:50%;background:rgba(0,0,0,.35);filter:blur(4px);transform:scale(1)}
.lu-dice.tossing{animation:lutoss var(--tms,1000ms) cubic-bezier(.3,.1,.3,1) both}
.lu-dice.tossing .lu-dshadow{animation:lushadow var(--tms,1000ms) ease-in-out both}
@keyframes lutoss{0%{transform:translateY(0) scale(1)}22%{transform:translateY(-46px) scale(1.22)}46%{transform:translateY(0) scale(.97)}60%{transform:translateY(-16px) scale(1.07)}74%{transform:translateY(0) scale(.99)}86%{transform:translateY(-5px) scale(1.02)}100%{transform:translateY(0) scale(1)}}
@keyframes lushadow{0%{transform:scale(1);opacity:.6}22%{transform:scale(.5);opacity:.25}46%{transform:scale(1.05);opacity:.6}60%{transform:scale(.75);opacity:.35}74%{transform:scale(1);opacity:.55}86%{transform:scale(.9);opacity:.45}100%{transform:scale(1);opacity:.55}}
.lu-dice.ready{animation:lupulsedice 1s ease-in-out infinite}
.lu-dice.ready .lu-face{box-shadow:inset 0 -5px 8px rgba(0,0,0,.1),inset 0 3px 4px #fff,0 0 14px -2px var(--c)}

/* ---------- dark mode for the game screen (Settings > Dark mode) ---------- */
#ludoGameView.lu-dark.active{background:#0e0f17}
.lu-dark .lu-game{color:#e7e8ef}
.lu-dark .lg-head b,.lu-dark .lg-pl .nm b,.lu-dark .lu-status b{color:#f1f2f8}
.lu-dark .lg-head b span,.lu-dark .lg-pl .nm small,.lu-dark .lu-status span,.lu-dark .lg-feedlim{color:#9aa0b4}
.lu-dark .lg-menu{background:#1d2030;border-color:#343a52;color:#e7e8ef}
.lu-dark .lg-pop{background:#1d2030;border-color:#343a52}
.lu-dark .lg-pop button{color:#e7e8ef}.lu-dark .lg-pop button:active{background:#2a2e44}.lu-dark .lg-pop button.red{color:#ff7b92}
.lu-dark .lg-pl.act{background:#1f2335}
.lu-dark .lg-card{background:linear-gradient(100deg,#1c1f30 0%,#262a40 100%)}
.lu-dark .lu-tbar{background:rgba(255,255,255,.1)}
.lu-dark .lg-feedbox,.lu-dark #luEmoTray{background:#1a1d2c;border-color:#323852}
.lu-dark #luEmoTray button{background:#252a3f}
.lu-dark .lg-feed .fl{background:#252a3f;color:#dfe1ec}
.lu-dark .lg-feed .fl.me{background:#31285a}
.lu-dark .lg-feed .fl.sys{background:#3a1f2b;color:#ff8da1}
.lu-dark .lg-feed .fl.hint{background:none;color:#7d8399}
.lu-dark .lg-feedin input{background:#252a3f;border-color:#323852;color:#e7e8ef}
.lu-dark .lu-boardwrap{background:#0a0b12;box-shadow:0 18px 40px -8px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.lu-dark .lu-tok .ring{stroke:#fff;filter:drop-shadow(0 0 1px #000)}
.lu-dark .lu-face{background:linear-gradient(145deg,#2c3047 0%,#1d2033 100%);box-shadow:inset 0 -5px 8px rgba(0,0,0,.35),inset 0 3px 4px rgba(255,255,255,.12)}
.lu-dark .lu-face i.on{background:radial-gradient(circle at 35% 30%,#fff,#c9cde0);box-shadow:none}
.lu-dark .lu-face.f6 i.on{background:radial-gradient(circle at 35% 30%,#ff8296,#e0304f)}
.lu-dark .lu-dice.ready .lu-face{box-shadow:inset 0 -5px 8px rgba(0,0,0,.35),0 0 14px -2px var(--c)}


/* ---------- FunChatX page wrapper ---------- */
body.lu-open{overflow:hidden;--bg:#0f0a14;--bg2:#160d1e;--surface:#1e1228;--card:#231430;--card2:#2a1a38;--rose:#ff6b9d;--rose2:#ff3d7a;--lav:#c084fc;--lav2:#a855f7;--gold:#fbbf24;--teal:#2dd4bf;--text:#f0e8f4;--text2:#c4a8d8;--muted:#8c6aa0;--border:#3d2448;--online:#4ade80;--danger:#f43f5e}
.lu-app{position:fixed;inset:0;z-index:850;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;font-family:'DM Sans',Inter,system-ui,sans-serif;color:#f0e8f4;
  background:radial-gradient(ellipse 70% 55% at 15% 10%,rgba(160,85,247,.18),transparent 60%),radial-gradient(ellipse 55% 60% at 88% 85%,rgba(255,61,122,.12),transparent 55%),#0f0a14;
  --bg:#0f0a14;--bg2:#160d1e;--surface:#1e1228;--card:#231430;--card2:#2a1a38;--rose:#ff6b9d;--rose2:#ff3d7a;--lav:#c084fc;--lav2:#a855f7;--gold:#fbbf24;--teal:#2dd4bf;--text:#f0e8f4;--text2:#c4a8d8;--muted:#8c6aa0;--border:#3d2448;--online:#4ade80;--danger:#f43f5e}
.lu-app .view{display:none;position:relative;z-index:1}
.lu-app .view.active{display:block}
.lu-nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(20,10,32,.96);border-bottom:1px solid rgba(192,132,252,.18);backdrop-filter:blur(14px)}
.lu-nav button{width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;font-size:1.05rem}
.lu-nav b{font-size:1rem;font-weight:800}
.lu-nav span{margin-left:auto;font:500 .62rem 'DM Mono',monospace;letter-spacing:1.5px;color:#8c6aa0}
.lu-nav #luThemeBtn{margin-left:0;font-size:1.05rem}
:where(.lu-app,.lu-modal,.lu-chat) :where(button){font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:where(.lu-app,.lu-modal,.lu-chat) :where(input){font-family:inherit;color:inherit;background:none;border:none;outline:none}
:where(.lu-app,.lu-modal,.lu-chat) :where(a){color:inherit;text-decoration:none}
.lu-app *,.lu-modal *,.lu-chat *{box-sizing:border-box}
.lu-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);max-width:88vw;padding:10px 16px;border-radius:12px;background:#1d1530;color:#fff;font-size:.88rem;opacity:0;pointer-events:none;transition:.2s;z-index:100010}
.lu-toast.show{opacity:1;transform:translateX(-50%)}.lu-toast.bad{background:#7f1d1d}.lu-toast.good{background:#14532d}
/* landing card */
.lu-landing-tile{display:block;width:100%;max-width:560px;height:auto;margin:0 0 18px;border-radius:18px}
.lu-play-card{max-width:420px;padding:22px;border-radius:20px;background:var(--surface,rgba(255,255,255,.04));border:1px solid var(--border,rgba(128,128,160,.25));text-align:center}
.lu-play-card .lu-play-label{font-weight:800}
.lu-status{min-height:1.2em;margin:10px 0 0;font-size:.9rem;color:var(--muted)}.lu-status.is-error{color:#e5484d}
.lu-copy{max-width:760px}.lu-copy h2{margin:30px 0 10px}.lu-copy h3{margin:18px 0 6px;font-size:1.05rem}
.lu-copy ol,.lu-copy ul{padding-left:1.2em;line-height:1.7}.lu-copy li{margin-bottom:8px}
.lu-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:18px 0}
.lu-fact{padding:14px 16px;border-radius:14px;background:var(--panel,rgba(128,128,160,.08));border:1px solid var(--border,rgba(128,128,160,.2))}
.lu-fact b{display:block;margin-bottom:4px}