/* LivesWispear games */
:root{--bg:#000;--card:#161616;--card2:#1f1f1f;--text:#fff;--muted:#a1a1a6;--line:#2a2a2a;--accent:#7b4dff;--accent2:#9c7bff;--gold:#e9c46a;
  --red:#e5484d;--green:#30a46c;--yellow:#f5b400;--blue:#3e63dd;color-scheme:dark}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--bg:#f4f4f7;--card:#fff;--card2:#f0eef6;--text:#0b0b0f;--muted:#55555d;--line:#e2e2ea;--accent:#6a3fe8;--accent2:#6a3fe8;--gold:#8a6a12;color-scheme:light}}
:root[data-theme="light"]{--bg:#f4f4f7;--card:#fff;--card2:#f0eef6;--text:#0b0b0f;--muted:#55555d;--line:#e2e2ea;--accent:#6a3fe8;--accent2:#6a3fe8;--gold:#8a6a12;color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Atkinson Hyperlegible",Verdana,"Segoe UI",system-ui,sans-serif;font-size:17px;line-height:1.55}
a{color:var(--accent2)}
.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.g-head{border-bottom:1px solid var(--line)}
.g-head .wrap{display:flex;align-items:center;gap:18px;min-height:68px;flex-wrap:wrap}
.mark{display:inline-block;width:88px;height:44px;background:var(--text);-webkit-mask:url(/assets/lettering.png) left center/contain no-repeat;mask:url(/assets/lettering.png) left center/contain no-repeat}
.home{color:var(--text);font-weight:700;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.home:hover{text-decoration:underline}
.who{margin-left:auto;color:var(--muted);font-size:15px}
main{padding:36px 0 64px}
h1,h2,h3{font-family:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;letter-spacing:-0.02em;line-height:1.1;margin:0 0 10px}
h1{font-size:clamp(34px,6vw,52px);font-weight:800}
h2{font-size:24px;font-weight:800}
p{margin:0 0 12px}
.lede{font-size:19px;color:var(--muted);max-width:42em}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin:24px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:22px;display:flex;flex-direction:column;gap:12px}
.card p{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;border:2px solid var(--line);background:transparent;color:var(--text);font:inherit;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.small{min-height:40px;padding:0 14px;font-size:14px}
.btn:disabled{opacity:.45;cursor:default}
.btn:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid var(--accent2);outline-offset:3px}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.join label{font-weight:700;font-size:15px}
select,input{min-height:48px;padding:0 14px;border-radius:14px;border:2px solid var(--line);background:var(--card2);color:var(--text);font:inherit}
.row{display:flex;gap:8px}
.row input{flex:1 1 auto;min-width:0;text-transform:uppercase;letter-spacing:.15em}
.actions{display:flex;flex-direction:column;gap:10px}
.note{color:var(--muted);font-size:15px}
.msg{min-height:24px;font-weight:700}
.rules{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:22px;margin-top:8px}
.rules ul{margin:0;padding-left:22px}.rules li{margin-bottom:6px}
.code{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:30px;letter-spacing:.18em}
.players{list-style:none;padding:0;margin:18px 0;display:flex;flex-direction:column;gap:8px}
.pl{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.pl.empty{color:var(--muted)}
.dot{width:16px;height:16px;border-radius:50%;background:var(--line);flex:0 0 auto}
.dot.s0{background:var(--red)}.dot.s1{background:var(--green)}.dot.s2{background:var(--yellow)}.dot.s3{background:var(--blue)}
.play-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.status{font-size:19px;font-weight:700;min-height:30px}
.layout{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.side{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:12px}
.scores{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.scores li{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:var(--card);border:2px solid var(--line)}
.scores li.turn{border-color:var(--accent)}
.scores .pts{margin-left:auto;font-weight:800}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
footer{border-top:1px solid var(--line);padding:22px 0 40px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:center;text-align:center}
footer a{color:var(--muted)}
footer img{width:40px;height:40px;object-fit:contain;vertical-align:middle}

/* ---------- Ludo ---------- */
.ludo{position:relative;width:min(92vw,560px);aspect-ratio:1;display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);border-radius:18px;overflow:hidden;background:#0d0d10;border:2px solid var(--line);flex:0 0 auto}
.lc{border:1px solid rgba(0,0,0,.12)}
.lc.track{background:#f4f1ea}.lc.c0{background:var(--red)}.lc.c1{background:var(--green)}.lc.c2{background:var(--yellow)}.lc.c3{background:var(--blue)}
.lc.star{background:#f4f1ea;color:#888;display:flex;align-items:center;justify-content:center;font-size:clamp(9px,2vw,15px)}
.lbase{border-radius:0;display:flex;align-items:center;justify-content:center}
.lbase.c0{background:var(--red)}.lbase.c1{background:var(--green)}.lbase.c2{background:var(--yellow)}.lbase.c3{background:var(--blue)}
.lbase .in{width:70%;height:70%;border-radius:16%;background:rgba(255,255,255,.92)}
.lcenter{background:conic-gradient(from 45deg, var(--yellow) 0 25%, var(--blue) 0 50%, var(--red) 0 75%, var(--green) 0 100%)}
.tok{position:absolute;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.45);padding:0;cursor:default;transition:left .25s,top .25s}
.tok.s0{background:var(--red)}.tok.s1{background:var(--green)}.tok.s2{background:var(--yellow)}.tok.s3{background:var(--blue)}
.tok.can{cursor:pointer;animation:pulse 1s ease-in-out infinite;outline:3px solid #fff;outline-offset:1px;z-index:2}
.tok.can::after{content:'';position:absolute;inset:-12px;border-radius:50%}
@keyframes pulse{50%{transform:scale(1.15)}}
@media (prefers-reduced-motion: reduce){.tok.can{animation:none}.tok{transition:none}}
.dice{width:92px;height:92px;border-radius:22px;background:#fff;border:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:14px;gap:4px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.dice:disabled{cursor:default;opacity:.55}
.pip{border-radius:50%;background:#111;width:100%;height:100%;visibility:hidden}
.pip.on{visibility:visible}
.dice-row{display:flex;align-items:center;gap:16px}

/* ---------- Chess ---------- */
.chess{width:min(92vw,560px);aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border-radius:16px;overflow:hidden;border:2px solid var(--line);flex:0 0 auto;user-select:none}
.cq{border:0;padding:0;display:flex;align-items:center;justify-content:center;font-size:min(8.6vw,52px);line-height:1;position:relative;cursor:pointer;font-family:"Segoe UI Symbol","Noto Sans Symbols 2","DejaVu Sans",system-ui,sans-serif}
.cq.l{background:#eeeed2}.cq.d{background:#769656}
.cq.last{box-shadow:inset 0 0 0 999px rgba(255,214,0,.38)}
.cq.sel{box-shadow:inset 0 0 0 999px rgba(123,77,255,.55)}
.cq.chk{box-shadow:inset 0 0 0 999px rgba(229,72,77,.65)}
.cq .hint{position:absolute;width:30%;height:30%;border-radius:50%;background:rgba(0,0,0,.28)}
.cq .hint.cap{width:86%;height:86%;background:transparent;border:5px solid rgba(0,0,0,.28)}
.pw{color:#fff;text-shadow:0 0 1px #000,0 0 2px #000,1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
.pb{color:#111;text-shadow:0 0 1px #fff}
.coord{position:absolute;font-size:10px;font-family:system-ui,sans-serif;opacity:.7}
.coord.f{right:3px;bottom:1px}.coord.r{left:3px;top:1px}
.cq.l .coord{color:#769656}.cq.d .coord{color:#eeeed2}
.promo{display:flex;gap:8px;flex-wrap:wrap}
.promo button{width:64px;height:64px;font-size:44px;border-radius:14px;border:2px solid var(--line);background:#eeeed2;cursor:pointer}
.moves{max-height:220px;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 14px;font-size:15px}
.moves ol{margin:0;padding-left:28px}
.capt{font-size:24px;letter-spacing:2px;min-height:30px}

/* ---------- Word Weave ---------- */
.wboard{width:min(94vw,600px);aspect-ratio:1;display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);gap:2px;background:var(--line);border:2px solid var(--line);border-radius:14px;overflow:hidden;flex:0 0 auto}
.wc{border:0;padding:0;background:#20222b;color:#c9cbd6;font-size:clamp(7px,1.6vw,11px);font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;font-family:system-ui,sans-serif}
.wc.p3W{background:#b8475a;color:#fff}.wc.p2W{background:#c97c95;color:#fff}.wc.p3L{background:#2f6fb0;color:#fff}.wc.p2L{background:#7bb3d9;color:#0b2235}
.wc.center{background:#c97c95;color:#fff;font-size:clamp(10px,2.4vw,18px)}
.tile{position:absolute;inset:0;background:#f3dfae;color:#2b1d0e;border-radius:4px;display:flex;align-items:center;justify-content:center;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:clamp(11px,2.6vw,20px)}
.tile.fresh{background:#ffd966;box-shadow:inset 0 0 0 2px #7b4dff}
.tile.lastmv{background:#f7e7b9;box-shadow:inset 0 0 0 2px #e9c46a}
.tile small{position:absolute;right:2px;bottom:0;font-size:clamp(5px,1.1vw,9px);font-weight:700}
.rack{display:flex;gap:6px;flex-wrap:wrap}
.rt{width:48px;height:52px;border-radius:10px;border:0;background:#f3dfae;color:#2b1d0e;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:24px;position:relative;cursor:pointer;box-shadow:0 3px 0 #c9b27c}
.rt small{position:absolute;right:5px;bottom:3px;font-size:11px}
.rt.sel{outline:3px solid var(--accent2);transform:translateY(-4px)}
.rt.swap{outline:3px dashed #e5484d}
.wbtns{display:flex;flex-wrap:wrap;gap:8px}
.preview{font-weight:700;min-height:24px}

/* ---------- top bar with back and exit ---------- */
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.topbar .wrap{display:flex;align-items:center;gap:10px;min-height:64px}
.iconbtn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:2px solid var(--line);background:transparent;color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none}
.iconbtn svg{width:22px;height:22px}
.tb-title{flex:1 1 auto;min-width:0;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.brand{display:inline-flex;align-items:center;min-height:44px}
.brand .mark{width:76px;height:38px}
.who{font-size:14px;color:var(--muted)}
.play-head .row{display:flex;gap:8px;flex-wrap:wrap}
#g-play{background:radial-gradient(ellipse at 30% 0%,rgba(123,77,255,.18),transparent 60%);border-radius:28px;padding:6px 0 10px}
.stage{perspective:1400px;perspective-origin:50% 20%;flex:0 0 auto;padding:6px 0 28px;max-width:100%}
body:not(.flat) .ludo,body:not(.flat) .chess{width:min(84vw,540px)}
body:not(.flat) .wboard{width:min(86vw,580px)}
body:not(.flat) .stage{padding-left:min(4vw,22px);padding-right:min(4vw,22px)}

/* ---------- 3D Ludo ---------- */
.ludo{box-shadow:0 10px 0 #2a1e14,0 28px 50px rgba(0,0,0,.55);border:0;transition:transform .5s ease}
body:not(.flat) .ludo{transform:rotateX(24deg);transform-style:preserve-3d}
.tok{border:0;box-shadow:0 3px 0 rgba(0,0,0,.35),0 6px 10px rgba(0,0,0,.35);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.75),rgba(255,255,255,0) 42%),var(--c);transform-origin:50% 100%;transition:left .3s ease,top .3s ease}
.tok.s0{--c:var(--red)}.tok.s1{--c:var(--green)}.tok.s2{--c:var(--yellow)}.tok.s3{--c:var(--blue)}
.tok::before{content:'';position:absolute;left:24%;right:24%;top:-62%;height:62%;border-radius:50% 50% 40% 40%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.8),rgba(255,255,255,0) 45%),var(--c);box-shadow:0 2px 3px rgba(0,0,0,.3)}
body:not(.flat) .tok{transform:rotateX(-24deg) translateZ(1px)}
.tok.can{animation:glow 1.1s ease-in-out infinite;outline:0}
@keyframes glow{50%{box-shadow:0 0 0 5px #fff,0 0 18px 6px rgba(255,255,255,.85)}}
.lc.track,.lc.star{background:linear-gradient(145deg,#fbf8f1,#e9e3d6)}
.lbase .in{box-shadow:inset 0 4px 10px rgba(0,0,0,.18)}
/* dice: a real 3D cube */
.dice3d{width:96px;height:96px;border:0;background:transparent;padding:0;perspective:500px;cursor:pointer;flex:0 0 auto}
.dice3d:disabled{cursor:default}
.dice3d:disabled .cube{filter:saturate(.6) brightness(.85)}
.cube{position:relative;width:76px;height:76px;margin:10px;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.8,.2,1.05)}
.face{position:absolute;inset:0;border-radius:16px;background:linear-gradient(145deg,#ffffff,#e4e4ea);box-shadow:inset 0 0 0 2px rgba(0,0,0,.06),inset 0 -4px 8px rgba(0,0,0,.12);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:11px;gap:3px}
.face .pip{background:radial-gradient(circle at 40% 35%,#555,#0b0b0f 70%)}
.f1{transform:translateZ(38px)}.f6{transform:rotateY(180deg) translateZ(38px)}.f3{transform:rotateY(90deg) translateZ(38px)}
.f4{transform:rotateY(-90deg) translateZ(38px)}.f5{transform:rotateX(90deg) translateZ(38px)}.f2{transform:rotateX(-90deg) translateZ(38px)}
.dice3d.ready .cube{animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{translate:0 -6px}}

/* ---------- 3D Chess ---------- */
.chess{border:12px solid #6b4a2b;border-radius:14px;box-shadow:0 12px 0 #3e2a17,0 34px 60px rgba(0,0,0,.6);transition:transform .5s ease;background:#6b4a2b}
body:not(.flat) .chess{transform:rotateX(26deg);transform-style:preserve-3d}
.cq.l{background:linear-gradient(145deg,#f3e2c3,#e6cfa6)}.cq.d{background:linear-gradient(145deg,#b98a5e,#a3764c)}
.cq.l .coord{color:#a3764c}.cq.d .coord{color:#f3e2c3}
.cq>span.pw,.cq>span.pb{display:inline-block;transform-origin:50% 88%;filter:drop-shadow(0 5px 3px rgba(0,0,0,.45));transition:transform .3s ease}
body:not(.flat) .cq>span.pw,body:not(.flat) .cq>span.pb{transform:rotateX(-26deg) translateZ(2px) scale(1.06)}
.cq.sel>span.pw,.cq.sel>span.pb{transform:translateY(-6%) scale(1.12)}
body:not(.flat) .cq.sel>span.pw,body:not(.flat) .cq.sel>span.pb{transform:rotateX(-26deg) translateZ(2px) translateY(-10%) scale(1.15)}
.pw{color:#fffdf7}.pb{color:#1b1410}

/* ---------- 3D Word Weave ---------- */
.wboard{box-shadow:0 10px 0 #15161d,0 28px 50px rgba(0,0,0,.55);transition:transform .5s ease}
body:not(.flat) .wboard{transform:rotateX(18deg);transform-style:preserve-3d}
.tile{background:linear-gradient(160deg,#fbecc6,#e8cd8e);box-shadow:0 2px 0 #b8975a,inset 0 1px 0 rgba(255,255,255,.7);border-radius:5px}
.tile.fresh{background:linear-gradient(160deg,#fff1a6,#ffd447);box-shadow:0 2px 0 #b8901f,0 0 0 2px #7b4dff}
.rt{background:linear-gradient(160deg,#fbecc6,#e8cd8e);box-shadow:0 5px 0 #b8975a,0 8px 14px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.75);transition:transform .15s ease}
.rt:hover{transform:translateY(-3px)}
.rt.sel{transform:translateY(-8px);box-shadow:0 9px 0 #b8975a,0 14px 18px rgba(0,0,0,.35),0 0 0 3px var(--accent2);outline:0}
.wc.p3W{background:linear-gradient(145deg,#c95467,#a63a4d)}.wc.p2W,.wc.center{background:linear-gradient(145deg,#d68aa2,#b96a84)}
.wc.p3L{background:linear-gradient(145deg,#3a7cc0,#285e98)}.wc.p2L{background:linear-gradient(145deg,#8cc0e3,#6aa6cf)}
@media (prefers-reduced-motion: reduce){.cube{transition:none}.dice3d.ready .cube{animation:none}.tok.can{animation:none;box-shadow:0 0 0 4px #fff}}