:root{
  --red:#e5262a;--blue:#1f6fe5;--yellow:#f7c51e;--green:#22a447;
  --ink:#fff;--muted:#b9b3e6;--card:rgba(255,255,255,.08);--line:rgba(255,255,255,.14);
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#120b2e;color:var(--ink);
  font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-weight:800;
  -webkit-user-select:none;user-select:none;overscroll-behavior:none;touch-action:manipulation}
input{-webkit-user-select:text;user-select:text}
.hidden{display:none!important}
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%,#3b1e8f 0%,#1b0f4a 45%,#0c0722 100%)}
.bg:after{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 20% 110%,rgba(229,38,42,.25),transparent 40%),
  radial-gradient(circle at 110% 30%,rgba(31,111,229,.25),transparent 40%);}
.bg i{position:absolute;width:40vmax;height:40vmax;border-radius:50%;filter:blur(60px);opacity:.28;animation:drift 22s ease-in-out infinite alternate}
.bg i:nth-child(1){background:var(--red);left:-10vmax;top:-10vmax}
.bg i:nth-child(2){background:var(--blue);right:-12vmax;top:20vh;animation-delay:-6s}
.bg i:nth-child(3){background:var(--yellow);left:10vw;bottom:-18vmax;animation-delay:-11s;opacity:.18}
.bg i:nth-child(4){background:var(--green);right:-5vmax;bottom:-10vmax;animation-delay:-3s;opacity:.2}
@keyframes drift{to{transform:translate(8vmax,6vmax) scale(1.15)}}

.screen{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;overflow-y:auto;
  padding:calc(12px + var(--safe-t)) 14px calc(14px + var(--safe-b));animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}}
.home-wrap,.panel-wrap{width:100%;max-width:440px;margin:auto 0;display:flex;flex-direction:column;gap:14px}

.logo{text-align:center;margin-top:6px}
.logo-dome{width:118px;height:118px;margin:0 auto -6px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.5));animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-3deg)}}
.logo-text{margin:0;font-family:"Lilita One",Nunito,sans-serif;font-weight:400;font-size:clamp(40px,12.5vw,58px);letter-spacing:1px;line-height:1}
.logo-text span{background:linear-gradient(180deg,#fff7b0 0%,#ffd23f 40%,#ff8a00 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:2px #5a1d00;paint-order:stroke fill;filter:drop-shadow(0 4px 0 #3a1260) drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.tag{margin:8px 0 0;color:var(--muted);font-weight:700;font-size:14px}

.card{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));border:1px solid var(--line);
  border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:12px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15)}
.lbl{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.lbl.center{text-align:center}
.inp{width:100%;font:inherit;font-size:18px;color:#fff;background:rgba(0,0,0,.28);border:2px solid rgba(255,255,255,.16);border-radius:14px;padding:13px 14px;outline:none;transition:border-color .2s}
.inp:focus{border-color:#ffd23f}
.code-inp{text-transform:uppercase;letter-spacing:8px;text-align:center;font-family:"Lilita One",Nunito;font-size:24px;padding:10px}
.join-row{display:flex;gap:10px}
.join-row .btn{flex:0 0 96px}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:1px}
.or:before,.or:after{content:"";flex:1;height:1px;background:var(--line)}

.btn{position:relative;font:inherit;font-size:17px;font-weight:900;color:#fff;border:0;border-radius:16px;padding:15px 18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s,filter .2s,box-shadow .2s;letter-spacing:.3px}
.btn:active{transform:translateY(2px) scale(.98)}
.btn:disabled{filter:grayscale(.8) brightness(.7);cursor:default}
.btn .ico{font-size:20px}
.btn-primary{background:linear-gradient(180deg,#ffcf3a,#ff8f1f);color:#4a1800;box-shadow:0 6px 0 #b14f00,0 12px 24px rgba(255,140,0,.35)}
.btn-primary:active{box-shadow:0 3px 0 #b14f00}
.btn-green{background:linear-gradient(180deg,#4be27a,#1f9d4a);box-shadow:0 6px 0 #0f6a2e,0 12px 24px rgba(30,160,70,.35);text-shadow:0 1px 0 rgba(0,0,0,.3)}
.btn-ghost{background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.18)}
.btn-link{background:none;color:var(--muted);padding:6px;font-size:15px;text-decoration:underline;text-underline-offset:3px}
.btn.small{font-size:14px;padding:10px 14px}
.btn.big{font-size:20px;padding:18px}
.btn-danger{background:linear-gradient(180deg,#ff6b6b,#d62f2f);box-shadow:0 5px 0 #8e1515}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.topbar h2{margin:0;font-family:"Lilita One";font-weight:400;font-size:24px;letter-spacing:.5px}
.iconbtn{font:inherit;width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.1);color:#fff;font-size:20px;cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.iconbtn:active{transform:scale(.94)}
.iconbtn.round{border-radius:50%;width:52px;height:52px;font-size:24px}

.resume{background:rgba(255,210,63,.12);border:1px solid rgba(255,210,63,.4);border-radius:16px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px}

/* lobby */
.code-card{align-items:center}
.code-tiles{display:flex;gap:8px;justify-content:center}
.code-tiles b{animation-fill-mode:backwards;width:52px;height:64px;display:grid;place-items:center;font-family:"Lilita One";font-weight:400;font-size:40px;color:#4a1800;
  background:linear-gradient(180deg,#fff4b8,#ffc93a);border-radius:14px;box-shadow:0 5px 0 #b46a00,0 10px 20px rgba(0,0,0,.35);animation:pop .4s backwards}
.code-tiles b:nth-child(2){animation-delay:.05s}.code-tiles b:nth-child(3){animation-delay:.1s}.code-tiles b:nth-child(4){animation-delay:.15s}.code-tiles b:nth-child(5){animation-delay:.2s}
@keyframes pop{from{transform:scale(.3);opacity:0}70%{transform:scale(1.1)}}
.seats{display:flex;flex-direction:column;gap:10px}
.seat{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:rgba(0,0,0,.22);border:2px solid transparent;min-height:64px;transition:background .3s,border-color .3s}
.seat.enter{animation:fadeIn .35s}
.seat.filled{border-color:color-mix(in srgb,var(--c) 70%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 30%,transparent),rgba(0,0,0,.2))}
.seat .pegico{width:36px;height:44px;flex:0 0 auto}
.seat .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px}
.seat .nm small{display:block;font-size:12px;color:var(--muted);font-weight:700}
.seat .empty{color:var(--muted);font-weight:700}
.badge{font-size:11px;padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.15);text-transform:uppercase;letter-spacing:.8px}
.badge.you{background:#ffd23f;color:#4a1800}
.badge.off{background:#6b2a2a}
.seat .x{width:34px;height:34px;border-radius:10px;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:16px;cursor:pointer}
.seat .add{font:inherit;font-size:13px;padding:8px 12px;border-radius:12px;border:1px dashed rgba(255,255,255,.35);background:none;color:#fff;cursor:pointer}
.wait{text-align:center;color:var(--muted);padding:10px;font-weight:700}
.dots:after{content:"";animation:dots 1.4s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* local */
.lseat{display:flex;align-items:center;gap:10px}
.lseat .pegico{width:30px;height:38px;flex:0 0 auto}
.seg{display:flex;background:rgba(0,0,0,.3);border-radius:12px;padding:3px;flex:0 0 auto}
.seg button{font:inherit;font-size:12px;border:0;background:none;color:var(--muted);padding:8px 9px;border-radius:9px;cursor:pointer}
.seg button.on{background:#fff;color:#2a1660}
.lseat .inp{font-size:15px;padding:9px 10px;min-width:0;flex:1}
.lseat .bn{flex:1;color:var(--muted);font-size:14px}

/* game */
#game{padding:0;overflow:hidden}
.game-layout{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:calc(8px + var(--safe-t)) 6px calc(12px + var(--safe-b))}
.game-top{width:100%;max-width:640px;display:flex;align-items:flex-start;gap:6px}
.chips{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px;min-width:0}
.chip{position:relative;display:flex;align-items:center;gap:8px;border-radius:16px;padding:6px 10px 6px 6px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(0,0,0,.22));border:2px solid rgba(255,255,255,.08);min-width:0;transition:transform .3s cubic-bezier(.3,1.5,.5,1),border-color .25s,background .25s,box-shadow .3s}
.chip .pegico{width:28px;height:38px;flex:0 0 auto;filter:drop-shadow(0 3px 3px rgba(0,0,0,.4))}
.chip .ct{min-width:0;flex:1}
.chip.empty{opacity:.3}
.chip .cn{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15}
.chip .me{font-size:9px;background:#ffd23f;color:#4a1800;padding:1px 5px;border-radius:6px;vertical-align:2px}
.chip .pd{display:flex;gap:4px;align-items:center;margin-top:4px}
.chip .pd s{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 75%,#fff 10%)}
.chip .pd s.on{background:var(--c);box-shadow:inset 0 -2px 0 rgba(0,0,0,.3)}
.chip .pd s.fin{background:radial-gradient(circle at 35% 30%,#fff7c0,#ffc21a 60%,#b07800);box-shadow:0 0 6px #ffd23f}
.chip .lv{font-style:normal;font-size:9.5px;padding:1px 6px;border-radius:6px;margin-left:auto;text-transform:uppercase;letter-spacing:.5px}
.lv-easy{background:#2f9e5b}.lv-medium{background:#d98a12}.lv-hard{background:#c42b2b}
.chip.active{border-color:var(--c);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 50%,transparent),rgba(0,0,0,.25));transform:scale(1.03);box-shadow:0 0 22px color-mix(in srgb,var(--c) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.chip.active .pegico{animation:hopIdle .9s ease-in-out infinite}
.chip .st{position:absolute;top:-7px;right:6px;font-size:10px;padding:1px 6px;border-radius:8px;background:#6b2a2a}
.chip .bubble{position:absolute;left:50%;top:100%;transform:translateX(-50%);font-size:34px;z-index:5;animation:bubble 2.2s forwards;pointer-events:none}
@keyframes bubble{0%{transform:translate(-50%,-10px) scale(.2);opacity:0}15%{transform:translate(-50%,6px) scale(1.2);opacity:1}80%{opacity:1}100%{transform:translate(-50%,40px) scale(1);opacity:0}}

.board-wrap{position:relative;flex:0 0 auto;width:100%;display:flex;align-items:center;justify-content:center;min-height:0;padding:0}
#board{width:300px;height:300px;flex:0 0 auto;overflow:hidden;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));touch-action:manipulation}
.board-wrap.shake #board{animation:shake .45s}
@keyframes shake{20%{transform:translate(-6px,3px) rotate(-.6deg)}40%{transform:translate(5px,-4px) rotate(.5deg)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}
#toasts{position:absolute;left:0;right:0;top:17%;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;z-index:4}
.toast{font-family:"Lilita One";font-weight:400;font-size:26px;letter-spacing:.5px;padding:10px 20px;border-radius:18px;background:rgba(15,8,40,.82);border:2px solid var(--c,#ffd23f);
  box-shadow:0 10px 30px rgba(0,0,0,.5);animation:toast 1.7s forwards;text-align:center;max-width:90%}
.toast.big{font-size:38px}
@keyframes toast{0%{transform:scale(.4);opacity:0}12%{transform:scale(1.12);opacity:1}22%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-30px)}}

.game-bottom{position:relative;width:100%;max-width:640px;display:flex;flex-direction:column;gap:8px;align-items:center}
.status{min-height:26px;font-size:16px;text-align:center;display:flex;gap:8px;align-items:center;justify-content:center;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.status .timer{font-size:13px;background:rgba(255,255,255,.14);padding:2px 8px;border-radius:99px}
.status .timer:empty{display:none}
.status .timer.warn{background:#d62f2f;animation:pulse .6s infinite alternate}
@keyframes pulse{to{transform:scale(1.1)}}
.controls{display:flex;align-items:center;gap:14px}
.btn-roll{width:180px;height:62px;border-radius:99px;font-family:"Lilita One";font-weight:400;font-size:30px;letter-spacing:2px;color:#4a1800;
  background:linear-gradient(180deg,#fff3a6,#ffc53a 45%,#ff8a1f);box-shadow:0 7px 0 #a84a00,0 14px 30px rgba(255,150,0,.45),inset 0 2px 0 rgba(255,255,255,.7)}
.btn-roll.ready{animation:ready 1s ease-in-out infinite}
@keyframes ready{50%{transform:scale(1.06);box-shadow:0 7px 0 #a84a00,0 14px 40px rgba(255,190,0,.8),inset 0 2px 0 rgba(255,255,255,.7)}}
.btn-roll:disabled{filter:grayscale(.9) brightness(.55);box-shadow:0 4px 0 #3a3a3a}
.emotes{position:absolute;bottom:72px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:8px;border-radius:20px;background:rgba(15,8,40,.92);border:1px solid var(--line);z-index:6;animation:fadeIn .2s}
.emotes button{font-size:28px;background:none;border:0;padding:6px;cursor:pointer;border-radius:12px}
.emotes button:active{background:rgba(255,255,255,.15)}

/* svg board bits */
.peg{cursor:pointer}
.peg .pi{transition:filter .2s}
.peg.can .pi{animation:hopIdle .7s ease-in-out infinite;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px #fff) brightness(1.2)}
.peg.cant .pi{filter:grayscale(.55) brightness(.72);opacity:.8}
.src{animation:srcPulse .9s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes srcPulse{from{opacity:.55;transform:scale(.9)}to{opacity:1;transform:scale(1.12)}}
@keyframes hopIdle{50%{transform:translateY(-12px)}}
.dest{animation:destPulse 1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes destPulse{50%{opacity:.35;transform:scale(1.25)}}
.pad.on{animation:padGlow 1.6s ease-in-out infinite}
@keyframes padGlow{0%,100%{opacity:0}50%{opacity:.16}}
#domeG{cursor:pointer}
#domeG.ready .glass{animation:domeGlow 1.1s ease-in-out infinite}
@keyframes domeGlow{50%{filter:drop-shadow(0 0 18px #ffe27a)}}

/* modal */
.modal{position:fixed;inset:0;background:rgba(5,2,20,.72);display:grid;place-items:center;z-index:20;padding:16px;animation:fadeIn .25s;backdrop-filter:blur(4px)}
.modal-card{width:100%;max-width:420px;max-height:88vh;overflow-y:auto;background:linear-gradient(180deg,#2c1a6e,#1a0f45);border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:0 30px 80px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:12px}
.modal-card h3{margin:0;font-family:"Lilita One";font-weight:400;font-size:28px;text-align:center}
.modal-card p,.modal-card li{font-weight:700;color:#ddd8ff;line-height:1.45;font-size:15px}
.modal-card ul{padding-left:20px;margin:0}
.win-title{font-family:"Lilita One";font-size:44px;text-align:center;line-height:1.05;color:var(--c);text-shadow:0 4px 0 rgba(0,0,0,.4),0 0 30px var(--c)}
.rank{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.25)}
.rank b{font-family:"Lilita One";font-weight:400;font-size:22px;width:28px;text-align:center}
.rank .nm{flex:1}
.rank small{color:var(--muted);font-weight:700}
.net{position:fixed;top:calc(8px + var(--safe-t));left:50%;transform:translateX(-50%);background:#d62f2f;padding:6px 14px;border-radius:99px;font-size:13px;z-index:30;box-shadow:0 6px 20px rgba(0,0,0,.4)}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:25}

@media (min-width:900px) and (min-aspect-ratio:5/4){
  .game-layout{display:grid;justify-content:stretch;grid-template-columns:1fr 340px;grid-template-rows:auto auto 1fr;gap:12px 20px;padding:16px 24px;max-width:1300px;margin:0 auto}
  .board-wrap{grid-row:1/4;grid-column:1;height:100%;min-height:0;flex:1}
  .game-top{grid-column:2;flex-wrap:wrap}
  .chips{grid-template-columns:1fr;gap:10px;order:3;flex-basis:100%;margin-top:8px}
  .chip{padding:10px 14px 10px 10px}
  .chip .pegico{width:36px;height:48px}
  .chip .cn{font-size:18px}
  .chip .pd s{width:13px;height:13px}
  .chip.active{transform:translateX(-8px) scale(1.02)}
  .game-top .iconbtn[data-mute]{margin-left:auto}
  .game-bottom{grid-column:2;grid-row:3;justify-content:flex-start;align-self:start}
  .status{font-size:19px;min-height:50px}
}
@media (max-height:640px){.btn-roll{height:52px;font-size:24px;width:150px}.iconbtn.round{width:44px;height:44px}}

.invite-url{font-size:13px;color:var(--muted);font-weight:700;letter-spacing:.3px;background:rgba(0,0,0,.25);padding:6px 12px;border-radius:99px}
.share-main{width:100%}
.share-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;width:100%}
.share-row .btn{padding:11px 6px;font-size:13px;text-decoration:none}
.btn-wa{background:linear-gradient(180deg,#3ee07a,#16a34a);box-shadow:0 4px 0 #0c6b30}
.btn-wa:before{content:"";width:16px;height:16px;flex:0 0 auto;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.1-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.3 0 .5l-.4.5c-.1.2-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.3 2.4 1.5.3.1.5.1.6-.1l.9-1c.2-.3.4-.2.6-.1l1.9.9c.3.1.5.2.5.3.1.2.1.7-.1 1.3z'/%3E%3C/svg%3E")}
.bot-lvl{display:flex;gap:3px;background:rgba(0,0,0,.3);border-radius:10px;padding:2px}
.bot-lvl button{font:inherit;font-size:11px;border:0;background:none;color:var(--muted);padding:5px 7px;border-radius:8px;cursor:pointer}
.bot-lvl button.on{background:#fff;color:#2a1660}
.badge.lvl-easy{background:#2f9e5b}.badge.lvl-medium{background:#d98a12}.badge.lvl-hard{background:#c42b2b}
.seat .adds{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.seat .add{padding:7px 9px}
.lseat .lv{display:flex;gap:2px}

.watch-pill{position:absolute;top:calc(56px + var(--safe-t));left:50%;transform:translateX(-50%);font-size:12px;padding:4px 10px;border-radius:99px;background:rgba(20,10,50,.85);border:1px solid var(--line);z-index:3;white-space:nowrap}
#game .game-top{position:relative}
#game .watch-pill{position:static;transform:none;font-size:12px}
.spec-home{display:none}
#game.spectator .spec-home{display:flex}
#game.spectator #btnRoll,#game.spectator #btnEmote,#game.spectator #btnCode{display:none}
#game.spectator #domeG{cursor:default}
#flash{position:fixed;left:50%;bottom:calc(30px + var(--safe-b));transform:translate(-50%,40px);opacity:0;background:#fff;color:#2a1660;padding:10px 18px;border-radius:99px;font-size:15px;z-index:40;box-shadow:0 10px 30px rgba(0,0,0,.4);pointer-events:none}
#flash.show{animation:flash 1.8s forwards}
@keyframes flash{0%{opacity:0;transform:translate(-50%,40px)}12%{opacity:1;transform:translate(-50%,0)}80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,10px)}}
.modal-card .code-tiles b{animation-fill-mode:backwards;width:44px;height:54px;font-size:32px}

#iconDefs{position:absolute;width:0;height:0;overflow:hidden}
#lobbyFoot .btn{width:100%}
.seat:not(.filled){flex-wrap:wrap}
.seat:not(.filled) .nm{flex:1 1 calc(100% - 60px)}
.seat:not(.filled) .adds{flex:1 1 100%;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-left:48px}
.seat .bot-lvl{margin-top:6px;width:max-content}
.share-row .btn{font-size:12.5px;white-space:nowrap}

.seat .add{white-space:nowrap;font-size:12.5px}

.chip .tbar{position:absolute;left:10px;right:10px;bottom:3px;height:4px;border-radius:3px;background:linear-gradient(90deg,#fff,var(--c));transform-origin:left;transition:transform .5s linear;box-shadow:0 0 8px var(--c)}
.chip .tbar.warn{background:#ff4d4d;animation:pulse .5s infinite alternate}

.game-bottom .status{font-size:17px}

.chip .lv{flex:0 0 auto}
.game-brand{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:640px}
.game-brand b{font-family:"Lilita One";font-weight:400;font-size:26px;letter-spacing:1px;background:linear-gradient(180deg,#fff7b0,#ffd23f 45%,#ff8a00);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #3a1260)}
.game-brand span{font-size:12px;color:var(--muted);background:rgba(255,255,255,.08);border:1px solid var(--line);padding:3px 10px;border-radius:99px;letter-spacing:.5px}
@media (max-height:760px){.game-brand{display:none}}
@media (min-width:900px) and (min-aspect-ratio:5/4){.game-brand{grid-column:2;justify-content:flex-start}.game-top{grid-row:auto}}
#lobbyFoot{position:sticky;bottom:0;z-index:5;padding:10px 0 4px;margin-top:-4px;background:linear-gradient(180deg,transparent,rgba(12,7,34,.92) 35%)}

/* ---- v1.1 house rules, callouts, feedback */
.rules-card{padding:12px 14px}
.rules-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.rules-head b{font-size:14px;letter-spacing:.3px}
.rules-head .rs{flex:1;font-size:12px;font-weight:700;color:#ffd23f;opacity:.9}
.rules-head .btn.small{padding:6px 10px;font-size:12px;min-height:0;width:auto;margin:0}
.rule-lines{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.rule-lines li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.3;color:rgba(255,255,255,.86)}
.rule-lines li span{flex:0 0 18px;text-align:center}
#modalCard .rule-lines{margin:6px 0 12px;text-align:left}
.rules-ed{display:grid;gap:2px;margin:4px 0 12px}
.rrow{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid rgba(255,255,255,.08)}
.rrow:last-child{border-bottom:0}
.rrow .rt{flex:1;font-weight:700;font-size:14px;text-align:left}
.rrow .rt small{display:block;font-weight:500;font-size:11.5px;opacity:.65;margin-top:2px}
.sw{flex:0 0 auto;width:48px;height:28px;border-radius:14px;border:0;background:rgba(255,255,255,.18);position:relative;cursor:pointer;transition:background .2s}
.sw i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.35);transition:transform .2s}
.sw.on{background:linear-gradient(180deg,#4ade80,#16a34a)}
.sw.on i{transform:translateX(20px)}
.seg3{display:flex;background:rgba(0,0,0,.25);border-radius:10px;padding:2px}
.seg3 button{border:0;background:none;color:#fff;font-weight:800;font-size:13px;padding:6px 11px;border-radius:8px;cursor:pointer}
.seg3 button.on{background:#ffd23f;color:#2a1d00}
.toast.callout{display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,rgba(28,20,52,.96),rgba(16,11,32,.96));border:2px solid var(--c);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 18px color-mix(in srgb,var(--c) 45%,transparent);font-size:14px;padding:9px 14px;animation:callIn .35s cubic-bezier(.2,1.6,.4,1) both}
.toast.callout i{font-style:normal;font-size:20px}
@keyframes callIn{from{transform:scale(.6) translateY(-8px);opacity:0}to{transform:none;opacity:1}}
.chip .st.tok{background:none;padding:0;font-size:12px}
.fb{margin:10px 0 4px;text-align:center}
.fb-q{font-weight:800;font-size:15px;margin-bottom:8px}
.fb-row{display:flex;justify-content:center;gap:6px}
.fb-b{font-size:28px;width:48px;height:48px;border-radius:14px;border:2px solid transparent;background:rgba(255,255,255,.08);cursor:pointer;transition:transform .15s}
.fb-b:active{transform:scale(.9)}
.fb-b.on{border-color:#ffd23f;background:rgba(255,210,63,.18);transform:scale(1.08)}
.fb-c{display:flex;gap:6px;margin-top:8px}
.fb-c .inp{flex:1;margin:0;font-size:14px;padding:10px}
.fb-c .btn{width:auto;margin:0}

/* ---- v1.2 chat */
.tb-r{display:flex;gap:6px;justify-self:end}
.chat-btn{position:relative}
.chat-btn.on{background:rgba(255,210,63,.22);border-color:#ffd23f}
.chat-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#ef4444;color:#fff;font:800 11px/18px system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px #1a1033;animation:callIn .3s both}
.chat-sheet{width:100%;max-width:640px;box-sizing:border-box;background:linear-gradient(180deg,rgba(34,24,66,.97),rgba(18,12,38,.97));border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:8px 10px 10px;display:flex;flex-direction:column;gap:6px;box-shadow:0 10px 30px rgba(0,0,0,.45);animation:sheetIn .22s ease-out both}
.chat-sheet.hidden{display:none}
@keyframes sheetIn{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.cs-head{display:flex;align-items:center;gap:8px}
.cs-head b{font-size:14px}
.cs-sub{flex:1;font-size:11px;opacity:.7}
.cs-btn{border:0;background:rgba(255,255,255,.08);color:#fff;border-radius:10px;width:32px;height:28px;font-size:14px;cursor:pointer}
.cs-hist{max-height:84px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.3;overscroll-behavior:contain;padding-right:2px}
.chat-sheet:not(.in-game) .cs-hist{max-height:150px}
.cs-empty{opacity:.55;font-size:12px;text-align:center;padding:4px 0}
.cm b{font-weight:800;margin-right:5px}
.cm b i{font-style:normal;font-weight:600;font-size:10.5px;opacity:.8;background:rgba(255,255,255,.1);padding:1px 5px;border-radius:6px}
.cm span{color:rgba(255,255,255,.92);word-break:break-word}
.cm.me span{color:#ffe792}
.cs-quick{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0;-webkit-overflow-scrolling:touch}
.cs-quick::-webkit-scrollbar{display:none}
.cs-quick button{flex:0 0 auto;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;font-weight:700;font-size:13px;padding:7px 11px;border-radius:999px;cursor:pointer;white-space:nowrap}
.cs-quick button:active{transform:scale(.94);background:rgba(255,210,63,.25)}
.cs-quick button:disabled{opacity:.45}
.cs-form{display:flex;gap:6px}
.cs-form input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.3);color:#fff;border-radius:12px;padding:9px 12px;font-size:16px}
.cs-send{border:0;border-radius:12px;width:44px;background:linear-gradient(180deg,#ffd23f,#f59e0b);color:#3a2500;font-size:18px;font-weight:900;cursor:pointer}
.cs-mutes{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cs-mutes.hidden{display:none}
.cs-mutes .lbl{width:100%;margin:0}
.cs-mute{border:2px solid var(--c);background:rgba(0,0,0,.25);color:#fff;border-radius:10px;padding:5px 9px;font-size:12px;font-weight:700;cursor:pointer}
.cs-mute.on{opacity:.55;text-decoration:line-through}
#bubbles{position:fixed;inset:0;pointer-events:none;z-index:40}
.cbubble{position:fixed;background:#fff;color:#1b1430;font:800 13px/1.25 system-ui,sans-serif;padding:7px 11px;border-radius:14px;border:2px solid var(--c);box-shadow:0 6px 18px rgba(0,0,0,.4);animation:bubIn .28s cubic-bezier(.2,1.6,.4,1) both;word-break:break-word}
.cbubble:before{content:"";position:absolute;top:-8px;left:calc(var(--ax,50%) - 7px);border:7px solid transparent;border-top:0;border-bottom:8px solid var(--c)}
.cbubble.free{left:50%;top:calc(12px + var(--i,0) * 40px);transform:translateX(-50%);max-width:86vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbubble.free:before{display:none}
.cbubble.free b{color:var(--c)}
.cbubble.out{opacity:0;transition:opacity .4s}
@keyframes bubIn{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
#game.spectator #btnChat{display:inline-flex}
#btnChat.nochat{visibility:hidden;pointer-events:none}

#game.chat-open .game-brand{display:none}

.rgrp{font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#ffd23f;opacity:.85;margin:10px 2px 0;text-align:left}
.rsum{text-align:center;font-size:12px;font-weight:800;color:#ffd23f;margin:-6px 0 4px;letter-spacing:.5px}
.seg3 button{white-space:nowrap}
.rules-ed .btn-link.small{margin:8px auto 0;font-size:13px}
#modalCard .rules-ed{max-height:62vh;overflow-y:auto;overscroll-behavior:contain;padding-right:2px}

/* ---- v1.2.2 chat notifications */
#chatToasts{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 8px);transform:translateX(-50%);width:min(92vw,420px);display:flex;flex-direction:column;gap:6px;z-index:60;pointer-events:none}
.chat-toast{pointer-events:auto;display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;cursor:pointer;color:#fff;padding:9px 12px 9px 10px;border-radius:16px;
  background:linear-gradient(180deg,rgba(36,26,72,.97),rgba(20,14,44,.97));box-shadow:0 10px 28px rgba(0,0,0,.5),0 0 0 2px var(--c),0 0 22px color-mix(in srgb,var(--c) 45%,transparent);
  animation:ctIn .38s cubic-bezier(.2,1.5,.4,1) both;font-family:inherit}
.chat-toast.out{opacity:0;transform:translateY(-10px);transition:opacity .35s,transform .35s}
.ct-dot{flex:0 0 14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 35%,transparent)}
.ct-body{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.ct-body b{color:var(--c);font-size:13px;font-weight:900;filter:brightness(1.25)}
.ct-body b em{font-style:normal;font-weight:700;font-size:10.5px;color:#fff;opacity:.75;background:rgba(255,255,255,.12);padding:1px 6px;border-radius:6px;margin-left:4px}
.ct-body>span{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-go{font-style:normal;font-size:18px;opacity:.8}
@keyframes ctIn{from{opacity:0;transform:translateY(-18px) scale(.92)}to{opacity:1;transform:none}}
.chat-btn.unread{border-color:#ef4444;animation:chatGlow 1.6s ease-in-out infinite}
@keyframes chatGlow{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}50%{box-shadow:0 0 0 7px rgba(239,68,68,0)}}
.chat-badge.bump{animation:badgeBump .5s cubic-bezier(.2,1.8,.4,1)}
@keyframes badgeBump{0%{transform:scale(.4)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
.cbubble{font-size:14px;padding:8px 12px}
@media (prefers-reduced-motion:reduce){.chat-btn.unread{animation:none;box-shadow:0 0 0 3px rgba(239,68,68,.6)}}

/* ---------- v1.3 Power-Ups */
.puq-glow{opacity:.7;animation:puGlow 1.6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
.puq-disc{stroke:#fff;stroke-width:2.5}
.puq-ring{fill:none;stroke:#fff6c4;stroke-width:4;stroke-dasharray:10 7;animation:puSpin 6s linear infinite;transform-box:fill-box;transform-origin:center}
.puq-t{font-family:"Lilita One",Nunito;font-size:34px;fill:#5a2d00;paint-order:stroke;stroke:#fff3b0;stroke-width:2;animation:puBob 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.puq.surge .puq-disc{stroke:#ff5d8f;stroke-width:5}
.pud-bg{fill:none;stroke:rgba(255,210,63,.18);stroke-width:5}
.pud-arc{fill:none;stroke:#ffd23f;stroke-width:5;stroke-linecap:round;opacity:.75}
.pud-t{font-family:"Lilita One";font-size:22px;fill:#ffd23f;opacity:.85}
.pubomb{animation:puTick .5s steps(2) infinite}
.puwall rect{filter:drop-shadow(0 4px 3px rgba(0,0,0,.5))}
@keyframes puGlow{from{opacity:.45;transform:scale(.85)}to{opacity:1;transform:scale(1.2)}}
@keyframes puSpin{to{transform:rotate(360deg)}}
@keyframes puBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes puTick{50%{opacity:.6}}
.peg.pu-ghost{opacity:.5;filter:drop-shadow(0 0 8px #d9f0ff)}
.peg.pu-fort{filter:drop-shadow(0 0 6px #ffd23f) drop-shadow(0 0 2px #fff)}
.peg.pu-ice{filter:saturate(.3) brightness(1.25) drop-shadow(0 0 6px #9fe3ff)}
.pu-tags{position:absolute;left:4px;bottom:-9px;display:flex;gap:1px;font-size:11px;line-height:1;z-index:2;pointer-events:none}
.pu-tags i{font-style:normal;background:rgba(15,8,40,.9);border-radius:6px;padding:1px 2px}
.pu-tags u{text-decoration:none;background:rgba(15,8,40,.9);border:1.5px solid var(--t);border-radius:6px;padding:0 2px}
/* tray */
.pu-tray{display:flex;align-items:center;gap:10px;justify-content:center;width:100%}
.pu-tray .pu-tl{font-size:12px;color:var(--muted);max-width:110px;text-align:right;line-height:1.2}
.pu-slots{display:flex;gap:8px}
.pu-slot{position:relative;width:58px;height:50px;border-radius:14px;border:2px solid var(--t,rgba(255,255,255,.2));background:var(--tg,rgba(255,255,255,.06));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;cursor:pointer;color:#1a0f45;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 4px 10px rgba(0,0,0,.35)}
.pu-slot span{font-size:22px;line-height:1}
.pu-slot em{font-style:normal;font-size:8.5px;font-weight:900;white-space:nowrap;overflow:hidden;max-width:54px;text-overflow:ellipsis;color:#1a0f45}
.pu-slot.empty{background:rgba(255,255,255,.05);border:2px dashed rgba(255,210,63,.35);box-shadow:none;color:rgba(255,210,63,.5)}
.pu-slot.empty span{font-family:"Lilita One";font-size:20px}
.pu-slot.ready{animation:puReady 1.1s ease-in-out infinite alternate}
@keyframes puReady{from{box-shadow:0 0 0 0 var(--t),inset 0 2px 0 rgba(255,255,255,.5)}to{box-shadow:0 0 18px 3px var(--t),inset 0 2px 0 rgba(255,255,255,.5);transform:translateY(-2px)}}
.pu-log{font-size:12.5px;color:#ddd8ff;background:rgba(255,255,255,.06);border-radius:99px;padding:3px 12px;max-width:94%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.pu-log span{margin-right:5px}.pu-log b{margin-left:6px;opacity:.6}
.pu-loglist{list-style:none;padding:0!important;display:flex;flex-direction:column;gap:6px}
.pu-loglist li{display:flex;gap:8px;font-size:14px!important}
/* cards */
.pu-reveal{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:6;pointer-events:none}
.pu-reveal>*{pointer-events:auto}
.pu-card{position:relative;text-align:center;border-radius:22px;background:var(--tg);border:3px solid #fff;color:#1a0f45;box-shadow:0 0 0 4px var(--td),0 0 40px var(--t),0 20px 50px rgba(0,0,0,.6);overflow:hidden}
.pu-card::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.65) 50%,transparent 60%);animation:puShine 1.6s .3s ease-in-out;pointer-events:none;transform:translateX(-60%)}
@keyframes puShine{to{transform:translateX(60%)}}
.pu-card.big{width:min(250px,64vw);padding:14px 16px 12px;animation:puFlip .55s cubic-bezier(.2,1.4,.4,1) both;cursor:pointer}
.pu-card.big.out{animation:puOut .26s ease-in forwards}
.pu-card.t-legendary,.pu-card.t-chaos{box-shadow:0 0 0 4px var(--td),0 0 70px 10px var(--t),0 20px 50px rgba(0,0,0,.6)}
@keyframes puFlip{from{transform:perspective(600px) rotateY(100deg) scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes puOut{to{transform:scale(.7) translateY(30px);opacity:0}}
.pc-who{font-size:13px;font-weight:900;color:#fff;background:var(--pc,#1a0f45);border-radius:99px;padding:3px 10px;display:inline-block;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.pc-tier{font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-top:6px;opacity:.8}
.pc-ico{font-size:64px;line-height:1.1;filter:drop-shadow(0 6px 6px rgba(0,0,0,.35));animation:puPop .6s .2s cubic-bezier(.3,1.8,.5,1) both}
@keyframes puPop{from{transform:scale(.2) rotate(-30deg)}to{transform:none}}
.pc-name{font-family:"Lilita One";font-size:30px;line-height:1.05}
.pc-sub{font-size:14px;margin-top:4px;line-height:1.3}
.pc-how{font-size:12.5px;margin-top:8px;background:rgba(255,255,255,.55);border-radius:12px;padding:6px 8px;line-height:1.3;text-align:left}
.pc-tap{font-size:10px;opacity:.55;margin-top:6px}
.pu-card.mini{padding:12px;margin-top:4px}
.pu-card.mini .pc-ico{font-size:48px}
.pu-splash{display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:18px;background:rgba(15,8,40,.9);border:3px solid var(--c);box-shadow:0 0 30px var(--c);font-family:"Lilita One";font-size:22px;max-width:88%;animation:puSplash 1.8s forwards}
.pu-splash i{font-style:normal;font-size:34px}
@keyframes puSplash{0%{transform:scale(.3);opacity:0}12%{transform:scale(1.08);opacity:1}20%{transform:none}85%{opacity:1}100%{opacity:0;transform:translateY(-20px)}}
.pu-banner{position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 14px;border-radius:99px;background:linear-gradient(90deg,#7e2bd6,#ff4f7b);box-shadow:0 0 22px rgba(255,79,123,.6);white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis;animation:puBan 1.2s ease-in-out infinite alternate}
.pu-banner .pb-i{font-size:20px}
@keyframes puBan{to{box-shadow:0 0 34px rgba(255,79,123,.95)}}
.pu-why{text-align:center;background:rgba(255,255,255,.08);border-radius:12px;padding:8px}
.pu-tgts{display:flex;flex-direction:column;gap:8px}
.pu-tgt{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:8px 12px;border-radius:14px;border:2px solid var(--c);background:color-mix(in srgb,var(--c) 22%,transparent);color:#fff;font:inherit;cursor:pointer}
.pu-tgt .pegico,.pu-tgt .pi{grid-row:span 2;width:30px;height:40px;font-size:28px;display:grid;place-items:center}
.pu-tgt b{font-size:16px}.pu-tgt small{font-size:12.5px;color:#ddd8ff}
.pu-tgt.sug{box-shadow:0 0 16px var(--c)}
.pu-tgt.off{opacity:.45;filter:grayscale(.7);cursor:not-allowed;border-style:dashed}
.pu-tgt .tier{font-style:normal;font-size:11px;margin-left:4px}
.pu-tl{font-size:13px;color:var(--muted);text-align:center}
.pu-choose{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;background:rgba(10,5,30,.55);backdrop-filter:blur(2px)}
.pch-card{background:linear-gradient(180deg,#2c1a6e,#1a0f45);border:2px solid #ffd23f;border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:12px;max-width:320px;width:86%;box-shadow:0 0 40px rgba(255,210,63,.4);text-align:center;animation:puFlip .4s both}
.pch-card small{color:var(--muted);font-weight:700}
.pch-dice{display:flex;gap:18px;justify-content:center}
.pch-die{background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;font:inherit;animation:puPop .5s both}
.pch-die:nth-child(2){animation-delay:.12s}
.pch-svg{width:92px;height:92px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5));transition:transform .15s}
.pch-die:active .pch-svg,.pch-die:hover .pch-svg{transform:scale(1.08) rotate(-4deg)}
.pch-die b{font-family:"Lilita One";font-size:22px}
.rrow.sub{padding-left:18px;border-left:3px solid rgba(255,210,63,.4)}
.pu-row.on{background:linear-gradient(90deg,rgba(255,210,63,.12),transparent);border-radius:12px}
.newtag{font-size:9px;background:#ff4f7b;color:#fff;border-radius:6px;padding:1px 5px;vertical-align:2px;margin-left:4px}
.pu-guide{background:rgba(255,255,255,.05);border-radius:14px;padding:8px 12px}
.pu-guide summary{cursor:pointer;font-weight:900;color:#ffd23f}
.pu-guide ul{margin:8px 0!important}
.pu-guide li{font-size:13.5px!important}
.pg-tier{margin-top:8px;border-left:4px solid var(--t);padding-left:8px}
.pg-tier>b{color:var(--t);font-size:13px;letter-spacing:1px;text-transform:uppercase}
.pg-it{font-size:13px;color:#ddd8ff;font-weight:700;line-height:1.35}
.pg-it span{display:inline-block;width:22px}
.pg-it b{color:#fff}
#game.pu-on .game-bottom{gap:6px}
.peg.nope .pi{animation:pegNope .35s}
@keyframes pegNope{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pu-splash.out{animation:puOut .26s ease-in forwards}
.pu-banner{white-space:normal;border-radius:16px;width:max-content;max-width:92%;line-height:1.25;text-align:left}

/* v1.3.1 intensity picker: tag under each button + full description */
.seg3.tagged button{display:flex;flex-direction:column;align-items:center;line-height:1.1;padding-top:6px;padding-bottom:6px}
.seg3.tagged button small{display:block;font-size:10px;font-weight:500;opacity:.8;margin-top:2px;white-space:nowrap}
.pu-int .pu-desc{max-width:none}
.rrow.pu-int{flex-wrap:wrap;gap:6px}
.rrow.pu-int .rt{flex:1 1 100%}
.rrow.pu-int .seg3{flex:1 1 100%}
.rrow.pu-int .seg3 button{flex:1}

/* v1.4.0 Knockback wordmark */
.logo-text{line-height:0}
.logo-text .kb-mark{width:min(340px,86vw);height:auto;display:block;margin:0 auto}
.game-brand b.kb-small{background:none;-webkit-background-clip:initial;background-clip:initial;color:inherit;filter:none;line-height:0;display:block}
.kb-mark.sm{width:150px;height:auto;display:block}

/* ---------------- accounts & levels (v1.5) ---------------- */
.fr-rookie{--f1:#a7a0c9;--f2:#6d6596}.fr-bronze{--f1:#f0a565;--f2:#9a5524}.fr-silver{--f1:#f4f7fb;--f2:#8e9bb0}.fr-gold{--f1:#fff1a0;--f2:#e0a100}
.fr-emerald{--f1:#9dffd0;--f2:#109a5c}.fr-diamond{--f1:#e3fbff;--f2:#3fb8e8}.fr-legend{--f1:#ffd23f;--f2:#ff4fa3}
.av{position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#3a2580,#160d3a 70%);box-shadow:0 0 0 3px var(--f2),0 0 0 5px var(--f1),0 6px 14px rgba(0,0,0,.45)}
.av .pegico{width:60%;height:72%;margin-top:4%}
.av .avl{position:absolute;bottom:-6px;right:-6px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;font-size:12px;line-height:22px;text-align:center;
  background:linear-gradient(180deg,var(--f1),var(--f2));color:#1d1036;box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.6);font-weight:900}
.av.sm{width:38px;height:38px}.av.sm .avl{min-width:18px;height:18px;line-height:18px;font-size:10px;bottom:-5px;right:-6px}
.av.md{width:50px;height:50px}
.av.lg{width:96px;height:96px;box-shadow:0 0 0 4px var(--f2),0 0 0 8px var(--f1),0 0 34px color-mix(in srgb,var(--f1) 55%,transparent),0 10px 24px rgba(0,0,0,.5)}
.av.lg .avl{min-width:34px;height:34px;line-height:34px;font-size:17px;border-radius:17px;bottom:-8px;right:-8px}
.fr-legend.av,.fr-diamond.av{animation:frGlow 3s ease-in-out infinite}
@keyframes frGlow{50%{filter:brightness(1.18) saturate(1.2)}}
.who-box{display:flex;flex-direction:column;gap:10px}
.who{display:flex;align-items:center;gap:12px;width:100%;font:inherit;color:#fff;text-align:left;border-radius:16px;padding:10px 12px;
  background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.18));border:2px solid rgba(255,255,255,.12)}
.who-in{cursor:pointer;border-color:color-mix(in srgb,var(--f1,#fff) 45%,transparent)}
.who .wt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.who .wt b{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who .wt small{font-size:12px;color:var(--muted);font-weight:800}
.who .chev{font-size:28px;color:var(--muted);line-height:1}
.who .gav{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);filter:grayscale(.3)}
.who .gav .pegico,.jp-who .gav .pegico{width:24px;height:32px}
.btn-gold{background:linear-gradient(180deg,#fff0a6,#ffc21a 55%,#f09a00);color:#3d2300;box-shadow:0 5px 0 #a56400,0 10px 22px rgba(255,190,0,.3)}
.btn-gold.small{padding:9px 14px;font-size:14px}
.signup{font-size:15px;padding:13px 14px}
.who-links{display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}
.who-links .btn-link{font-size:13px;padding:2px}
.xpbar{height:9px;border-radius:6px;background:rgba(0,0,0,.4);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.5);margin-top:4px}
.xpbar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#ffd23f,#ff8f1f,#ff5a5f);box-shadow:0 0 10px rgba(255,190,60,.6);transition:width .8s cubic-bezier(.3,1.2,.5,1)}
.xpnums{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:3px}
.auth-hero{font-size:44px;text-align:center;filter:drop-shadow(0 6px 12px rgba(0,0,0,.4));margin-bottom:-4px}
.auth-p{text-align:center;margin:0 0 6px;color:#e6e1ff;font-weight:700;line-height:1.4;font-size:15px}
.auth-err{min-height:18px;font-size:13px;color:#ff9d9d;text-align:center}
.auth-err.good{color:#7dffa8}
.auth-fine{text-align:center;font-size:12px;color:var(--muted);margin:0}
.btn-inline{font:inherit;background:none;border:0;color:#ffd23f;text-decoration:underline;cursor:pointer;padding:0}
.code6{text-align:center;font-size:30px;letter-spacing:12px;font-family:"Lilita One",Nunito,sans-serif;padding:12px 8px}
.jp-who{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;border-radius:14px;background:rgba(0,0,0,.25);font-size:16px}
.lname{flex:1;font-size:16px}.lname small{color:var(--muted);font-size:12px}
/* level tag above names, frame glow on the peg */
.chip .lvt{position:absolute;top:-8px;left:8px;z-index:2}
.lvt,.lvt-in{display:inline-block;font-style:normal;font-size:9.5px;line-height:1;padding:3px 6px;border-radius:7px;font-weight:900;letter-spacing:.3px;
  background:linear-gradient(180deg,var(--f1),var(--f2));color:#1d1036;box-shadow:0 2px 5px rgba(0,0,0,.45)}
.rank .lvt{margin-right:6px;vertical-align:2px}
.chip.framed .pegico{filter:drop-shadow(0 0 3px var(--f1)) drop-shadow(0 0 6px color-mix(in srgb,var(--f2) 70%,transparent)) drop-shadow(0 3px 3px rgba(0,0,0,.4))}
/* profile */
.prof-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:24px;
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--f1) 22%,transparent),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04))}
.prof-hero .xpbar,.prof-hero .xpnums{width:100%}
.ph-name{font-family:"Lilita One",Nunito,sans-serif;font-size:30px;margin-top:10px;text-shadow:0 3px 8px rgba(0,0,0,.4)}
.ph-sub{color:var(--muted);font-size:14px;margin-top:-4px}
.ph-meta{display:flex;justify-content:space-between;width:100%;font-size:12px;color:#e6e1ff}
.ph-next{font-size:13px;color:var(--muted)}.ph-next b{color:#ffd23f}
.sec-h{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pstats div{display:flex;flex-direction:column;align-items:center;padding:10px 4px;border-radius:14px;background:rgba(0,0,0,.22)}
.pstats i{font-style:normal;font-size:18px}.pstats b{font-family:"Lilita One",Nunito,sans-serif;font-size:24px;font-weight:400}.pstats small{font-size:11px;color:var(--muted)}
.ph-since{font-size:12px;color:var(--muted);text-align:center}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bdg{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:10px 4px;border-radius:14px;background:rgba(0,0,0,.25);opacity:.42;filter:grayscale(1)}
.bdg.got{opacity:1;filter:none;background:linear-gradient(180deg,rgba(255,210,63,.22),rgba(0,0,0,.2));box-shadow:inset 0 0 0 1.5px rgba(255,210,63,.5)}
.bdg i{font-style:normal;font-size:26px}.bdg b{font-size:12px}.bdg small{font-size:10px;color:var(--muted);line-height:1.2}
.recent{display:flex;flex-direction:column;gap:6px}
.rg{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.22)}
.rg-x{font-family:"Lilita One",Nunito,sans-serif;color:#ffd23f;font-size:20px;min-width:48px}
.rg-t{flex:1;min-width:0;display:flex;flex-direction:column}.rg-t small{font-size:11px;color:var(--muted)}.rg-d{font-size:11px;color:var(--muted)}
.prof-act{gap:10px}
.priv-box{padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.22);font-size:13px}.priv-box p{margin:4px 0 0;color:#ddd8f7;font-weight:700;line-height:1.4}
.btn-link.danger{color:#ff9d9d}
.muted{color:var(--muted)}
.lv-how p,.lv-how li,.priv p{font-weight:700;line-height:1.45;color:#e6e1ff;font-size:14px}
.lv-how h4{margin:12px 0 4px;color:#ffd23f}
.lv-how ul{padding-left:4px;list-style:none;margin:0}.lv-how li{margin:4px 0}
.xpt{width:100%;border-collapse:separate;border-spacing:0 4px;font-size:14px}
.xpt td{padding:7px 10px;background:rgba(0,0,0,.25)}.xpt td:first-child{border-radius:10px 0 0 10px}.xpt td:last-child{border-radius:0 10px 10px 0;text-align:right;color:#ffd23f;white-space:nowrap}
.xpt small{color:var(--muted);font-size:11px}
.frames{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 6px}
.fr-cell{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}.fr-cell b{font-size:12px;margin-top:4px}.fr-cell small{font-size:10px;color:var(--muted);margin-top:-4px}
.xpwin{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:14px;background:linear-gradient(180deg,rgba(255,210,63,.2),rgba(0,0,0,.25));box-shadow:inset 0 0 0 1.5px rgba(255,210,63,.45)}
.xpwin .xw-top{display:flex;justify-content:space-between;align-items:center}
.xw-x{font-family:"Lilita One",Nunito,sans-serif;font-weight:400;font-size:26px;color:#ffd23f;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.xw-up{background:linear-gradient(180deg,#fff0a6,#ffc21a);color:#3d2300;padding:3px 10px;border-radius:10px;animation:pulseUp 1.2s ease-in-out infinite}
@keyframes pulseUp{50%{transform:scale(1.08)}}
.xpwin small{font-size:11px;color:#e6e1ff}
.xpwin.guest{align-items:center;text-align:center}
/* guest sign-up: inviting but quieter than Host */
.btn.signup{background:linear-gradient(180deg,rgba(255,210,63,.2),rgba(255,160,0,.1));color:#ffe27a;border:2px solid rgba(255,210,63,.65);box-shadow:0 0 18px rgba(255,200,60,.15);font-size:14px;padding:10px 12px;line-height:1.25}
.who-links{justify-content:center;gap:14px}
.who-links{flex-wrap:nowrap;margin-top:-4px}

/* ---------- v1.6 win podium, awards, knockback stamp, item-ready nudge */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:6px;margin:6px 0 2px;min-height:178px}
.pod{flex:1 1 0;max-width:118px;display:flex;flex-direction:column;align-items:center;min-width:0}
.pod-who{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;opacity:0;animation:podPop .45s cubic-bezier(.2,1.6,.4,1) forwards;animation-delay:calc(var(--d) + .35s);min-width:0;max-width:100%}
.pod-who .av{width:46px;height:46px}.pod-who .av .avl{min-width:18px;height:18px;line-height:18px;font-size:10px;bottom:-4px;right:-6px}
.pod-peg .pegico{width:34px;height:46px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.45))}
.pl1 .pod-who .av{width:58px;height:58px}.pl1 .pod-peg .pegico{width:42px;height:56px}
.pod-nm{font-weight:900;font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}
.pl1 .pod-nm{font-size:15px;color:var(--l)}
.pod-who small{color:var(--muted);font-weight:700;font-size:11px}
.pod-crown{position:absolute;top:-22px;font-size:24px;animation:crownBob 1.6s ease-in-out infinite;animation-delay:1.2s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.pod-blk{width:100%;margin-top:6px;border-radius:12px 12px 4px 4px;display:grid;place-items:start center;padding-top:6px;
  background:linear-gradient(180deg,var(--l),var(--c) 55%,color-mix(in srgb,var(--c) 60%,#000));box-shadow:inset 0 3px 0 rgba(255,255,255,.35),0 6px 14px rgba(0,0,0,.4);
  transform-origin:bottom;transform:scaleY(0);animation:podRise .5s cubic-bezier(.2,1.3,.4,1) forwards;animation-delay:var(--d)}
.pod-blk b{font-family:"Lilita One";font-weight:400;font-size:22px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.pl1 .pod-blk{height:78px}.pl1 .pod-blk b{font-size:28px}.pl2 .pod-blk{height:54px}.pl3 .pod-blk{height:38px}.pl3 .pod-blk b{font-size:19px}
.pl1 .pod-blk{box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 0 22px color-mix(in srgb,var(--l) 55%,transparent),0 6px 14px rgba(0,0,0,.4)}
.pod-4{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:10px;background:rgba(0,0,0,.25);border-left:4px solid var(--c);font-weight:800;font-size:13px}
.pod-4 b{font-family:"Lilita One";font-weight:400;color:var(--muted)}.pod-4 .pegico{width:20px;height:26px}.pod-4 span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pod-4 small{color:var(--muted)}
.awards{display:flex;gap:6px;justify-content:center}
.aw{flex:1 1 0;min-width:0;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 4px 5px;border-radius:12px;background:rgba(0,0,0,.28);border:1.5px solid color-mix(in srgb,var(--c) 70%,transparent);font-size:12px;font-weight:800;line-height:1.15;text-align:center;
  opacity:0;animation:podPop .4s ease-out forwards;animation-delay:1.3s}
.aw:nth-child(2){animation-delay:1.45s}.aw:nth-child(3){animation-delay:1.6s}
.aw i{font-style:normal;font-size:18px}.aw em{font-style:normal;font-size:9px;letter-spacing:.3px;text-transform:uppercase;color:var(--muted)}
.aw span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}.aw small{font-size:10.5px;color:color-mix(in srgb,var(--c) 50%,#fff)}
.pod-note{margin:-2px 0 0;text-align:center;font-size:10.5px;font-weight:700;color:var(--muted);opacity:.8}
@keyframes podRise{to{transform:scaleY(1)}}
@keyframes podPop{0%{opacity:0;transform:translateY(14px) scale(.6)}100%{opacity:1;transform:none}}
@keyframes crownBob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-4px) rotate(6deg)}}
.kb-stamp{position:absolute;left:50%;top:44%;z-index:6;pointer-events:none;text-align:center;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:14px 22px 12px;border-radius:20px;background:linear-gradient(180deg,rgba(28,20,52,.95),rgba(14,9,30,.95));border:3px solid var(--c);
  box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 30px color-mix(in srgb,var(--c) 55%,transparent);animation:kbIn 1.6s cubic-bezier(.2,1.5,.4,1) forwards}
.kb-stamp b{font-family:"Lilita One";font-weight:400;font-size:44px;line-height:.95;color:#fff;letter-spacing:1px;transform:rotate(-6deg);
  text-shadow:0 4px 0 color-mix(in srgb,var(--c) 70%,#000),0 0 22px var(--c)}
.kb-stamp small{font-weight:900;font-size:14px;color:var(--k,#ffd23f);margin-top:4px}
.kb-stamp i{font-style:normal;font-weight:700;font-size:12px;color:var(--muted)}
@keyframes kbIn{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2) rotate(8deg)}14%{opacity:1;transform:translate(-50%,-50%) scale(.94) rotate(-2deg)}
  20%{transform:translate(-50%,-50%) scale(1.03)}26%,82%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
#puTray.nudge .pu-slot.ready{animation:trayNudge .5s ease-in-out 3}
#puTray.nudge .pu-tl{color:#ffd23f}
@keyframes trayNudge{0%,100%{transform:translateY(0)}40%{transform:translateY(-9px) scale(1.08)}70%{transform:translateY(2px)}}
@media (prefers-reduced-motion:reduce){
  .pod-blk,.pod-who,.aw{animation:none!important;transform:none;opacity:1}
  .pod-crown,.chip.active .pegico,.puq-glow,.puq-ring{animation:none!important}
  .kb-stamp{animation:kbFade 1.6s linear forwards}
  #puTray.nudge .pu-slot.ready{animation:none}
  .board-wrap.shake #board{animation:none!important}
}
@keyframes kbFade{0%,80%{opacity:1}100%{opacity:0}}

/* ===================================================== v1.7 ARENAS & TWISTS */
/* page tint per arena (board art itself is themed in SVG) */
#game.ar-volcano{background:radial-gradient(120% 80% at 50% 40%,#4a1306 0%,#1c0603 60%,#0a0201 100%)}
#game.ar-ice{background:radial-gradient(120% 80% at 50% 35%,#2b6ea8 0%,#123a66 55%,#071a33 100%)}
#game.ar-haunted{background:radial-gradient(120% 80% at 50% 35%,#3b1f63 0%,#170b2c 60%,#07030f 100%)}
#game.ar-space{background:radial-gradient(120% 80% at 50% 40%,#2a1660 0%,#0b0a2e 55%,#02020c 100%)}
/* static board deco */
.arv-crack{fill:none;stroke:#ff7a1a;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px #ff4d00);animation:arGlow 3.2s ease-in-out infinite}
.arv-bub{fill:#ffb347;opacity:.55;animation:arBub 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes arGlow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes arBub{0%,100%{transform:scale(.6);opacity:.25}50%{transform:scale(1.15);opacity:.7}}
.ari-arrow{fill:#e8f8ff;stroke:#3a86c0;stroke-width:2.5;opacity:.9}
.ari-flake{fill:#fff;opacity:.55;animation:arTw 5s ease-in-out infinite}
.arh-fog{fill:#d9ccff;opacity:.08;animation:arFog 9s ease-in-out infinite alternate}
@keyframes arFog{from{transform:translateX(-24px)}to{transform:translateX(24px)}}
.arh-bat{fill:#0b0614;stroke:#6b4fa8;stroke-width:1;animation:arBat 3.4s ease-in-out infinite}
@keyframes arBat{0%,100%{transform:translateY(0) scaleX(1)}50%{transform:translateY(-8px) scaleX(.7)}}
.arh-swirl{animation:arSpin 6s linear infinite}
.ars-star{fill:#fff;animation:arTw 3.6s ease-in-out infinite}
@keyframes arTw{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes arSpin{to{transform:rotate(360deg)}}
/* live hazards */
.arv-warn .arv-wg{animation:arWarn .9s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes arWarn{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
.ars-disc{animation:arSpin 2.6s linear infinite}
.ars-next{opacity:.85;animation:arTw 1.8s ease-in-out infinite}
.ar-bully .arb-in{animation:arBreath 1.6s ease-in-out infinite;transform-origin:0 0}
.ar-bully .arb-aura{animation:arAura 1.6s ease-in-out infinite;transform-origin:0 3px;filter:drop-shadow(0 0 4px #ff2020)}
@keyframes arAura{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.9;transform:scale(1.12)}}
@keyframes arBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.04,.97)}}
/* peg marks: bounty coin + On Fire flames */
.peg .arb,.peg .arf{display:none}
.peg.ar-bounty .arb{display:inline}
.peg.ar-fire .arf{display:inline}
.peg .arb-c{animation:arCoinBob 1.4s ease-in-out infinite}
@keyframes arCoinBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.peg .arf1{animation:arFlick .45s ease-in-out infinite alternate;transform-origin:0 2px}
.peg .arf2{animation:arFlick .32s ease-in-out infinite alternate-reverse;transform-origin:0 0}
@keyframes arFlick{from{transform:scale(1,1)}to{transform:scale(.88,1.14)}}
.ar-fire-tag{animation:arTw 1s ease-in-out infinite}
/* ambient particles over the board (transform/opacity only) */
.ar-amb{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.ar-amb span{position:absolute;left:var(--x);top:0;will-change:transform,opacity;animation:var(--t) linear var(--d) infinite}
.amb-volcano span{top:auto;bottom:-10px;width:6px;height:6px;border-radius:50%;background:radial-gradient(#ffe14d,#ff6a00 60%,transparent 70%);animation-name:arEmber;transform:scale(var(--s))}
@keyframes arEmber{0%{transform:translate(0,0) scale(var(--s));opacity:0}10%{opacity:1}100%{transform:translate(30px,-90vh) scale(.2);opacity:0}}
.amb-ice span{color:#fff;font-size:14px;opacity:.8;animation-name:arSnow}
@keyframes arSnow{0%{transform:translate(0,-20px) rotate(0) scale(var(--s));opacity:0}10%{opacity:.85}100%{transform:translate(-40px,90vh) rotate(300deg) scale(var(--s));opacity:0}}
.amb-haunted span{top:auto;bottom:10%;width:120px;height:36px;border-radius:50%;background:radial-gradient(rgba(210,190,255,.22),transparent 70%);animation-name:arWisp}
@keyframes arWisp{0%{transform:translate(-80px,0) scale(var(--s));opacity:0}30%{opacity:1}100%{transform:translate(160px,-40vh) scale(var(--s));opacity:0}}
.amb-space span{width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px #b9a6ff;animation-name:arDrift}
.amb-space span:nth-child(5n){width:90px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff);animation-name:arShoot}
@keyframes arDrift{0%{transform:translate(0,10vh) scale(var(--s));opacity:0}50%{opacity:1}100%{transform:translate(12px,70vh) scale(var(--s));opacity:0}}
@keyframes arShoot{0%,82%{transform:translate(-60px,6vh) rotate(25deg);opacity:0}86%{opacity:1}100%{transform:translate(260px,30vh) rotate(25deg);opacity:0}}
/* Final Showdown */
.board-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;transition:opacity 1.2s;background:radial-gradient(closest-side at 50% 50%,transparent 62%,rgba(120,0,10,.55) 90%,rgba(40,0,5,.85) 100%)}
#game.ar-sd .board-wrap::after{opacity:1}
.board-wrap.ar-thump::after{animation:arThump 1s ease-out}
@keyframes arThump{0%{opacity:1}12%{opacity:.7}25%{opacity:1}35%{opacity:.8}100%{opacity:1}}
.board-wrap.ar-thump #board{animation:arThumpB .5s ease-out}
@keyframes arThumpB{0%{transform:scale(1)}15%{transform:scale(1.012)}30%{transform:scale(1)}45%{transform:scale(1.008)}100%{transform:scale(1)}}
.ar-sd-banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:6;pointer-events:none;text-align:center;font-family:"Lilita One";color:#fff;animation:arBanIn .6s cubic-bezier(.2,1.4,.4,1) both;filter:drop-shadow(0 8px 18px rgba(0,0,0,.6))}
.ar-sd-banner small{display:block;font-size:18px;letter-spacing:3px;color:var(--c);text-transform:uppercase}
.ar-sd-banner b{display:block;font-weight:400;font-size:clamp(46px,14vw,78px);line-height:.92;letter-spacing:2px;background:linear-gradient(180deg,#fff,#ffd23f 45%,#ff3d00);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.5px rgba(60,0,0,.6)}
.ar-sd-banner span{display:inline-block;margin-top:8px;font-family:Nunito,sans-serif;font-weight:800;font-size:15px;padding:6px 14px;border-radius:99px;background:rgba(20,4,8,.82);border:2px solid var(--c)}
.ar-sd-banner.out{animation:arBanOut .4s ease-in forwards}
@keyframes arBanIn{from{transform:translate(-50%,-50%) scale(2.4);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes arBanOut{to{transform:translate(-50%,-50%) scale(.8);opacity:0}}
.ar-flash{position:absolute;inset:0;z-index:7;pointer-events:none;background:#fff;animation:arFlash .9s ease-out forwards}
@keyframes arFlash{from{opacity:.9}to{opacity:0}}
.ar-coins{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.ar-coins span{position:absolute;left:var(--x);top:-30px;font-size:26px;animation:arCoin 1.5s cubic-bezier(.4,0,.8,.6) var(--d) both}
@keyframes arCoin{from{transform:translateY(0) rotate(0)}to{transform:translateY(105vw) rotate(var(--r));opacity:.2}}
/* arena intro / explainer card */
.ar-card{position:absolute;left:50%;top:50%;width:min(330px,88%);transform:translate(-50%,-50%);z-index:8;border-radius:24px;overflow:hidden;background:rgba(14,8,34,.95);border:2px solid rgba(255,255,255,.22);box-shadow:0 20px 60px rgba(0,0,0,.7);text-align:left;cursor:pointer;animation:arCardIn .45s cubic-bezier(.2,1.4,.4,1) both}
.ar-card.out{animation:arCardOut .26s ease-in forwards}
@keyframes arCardIn{from{transform:translate(-50%,-40%) scale(.85);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes arCardOut{to{transform:translate(-50%,-56%) scale(.95);opacity:0}}
.arc-art{height:92px;display:grid;place-items:center;font-size:56px;position:relative}
.arc-art span{filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));animation:puBob 2s ease-in-out infinite}
.ar-card h4{margin:12px 16px 4px;font-family:"Lilita One";font-weight:400;font-size:24px;text-align:center}
.ar-card p{display:flex;gap:10px;margin:8px 16px;font-size:14px;line-height:1.35}
.ar-card p i{font-style:normal;font-size:22px;line-height:1}
.ar-card small{display:block;text-align:center;font-size:11px;opacity:.55;margin:8px 0 12px}
/* shared arena art swatches (cards, picker tiles, guide) */
.t-classic{--ag:linear-gradient(150deg,#3a2a8f,#1c1150 60%,#0d0730)}
.t-volcano{--ag:radial-gradient(circle at 50% 110%,#ffb347 0,#ff5a00 22%,#7a1400 48%,#240603 80%)}
.t-ice{--ag:linear-gradient(160deg,#ffffff 0,#bfeeff 35%,#4ea6dc 75%,#1d5a8c)}
.t-haunted{--ag:radial-gradient(circle at 72% 28%,#fff6d6 0,#fff6d6 9%,#6b4fa8 10%,#2a1748 55%,#0b0616)}
.t-space{--ag:radial-gradient(circle at 30% 70%,#ff5fd2 0,transparent 30%),radial-gradient(circle at 75% 30%,#4da3ff 0,transparent 35%),#0a0a2e}
.t-random{--ag:conic-gradient(from 45deg,#ff5a00,#4ea6dc,#6b4fa8,#0a0a2e,#3a2a8f,#ff5a00)}
.t-bully{--ag:linear-gradient(160deg,#c9ced6,#5d636e 55%,#1d2025)}
.t-bounty{--ag:linear-gradient(160deg,#ffe58a,#d49a00 55%,#3a2400)}
.arc-art,.ar-tile,.ag-ar>span{background:var(--ag)}
/* lobby picker */
.ar-pick{margin:8px 0 6px}
.ar-pick-h{display:flex;gap:8px;align-items:baseline;font-size:13px;margin:0 2px 6px;text-align:left}
.ar-pick-h span{font-size:11.5px;opacity:.7;line-height:1.3}
.ar-tiles{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ar-tiles::-webkit-scrollbar{display:none}
.ar-tile{flex:0 0 92px;height:96px;border-radius:16px;border:2px solid rgba(255,255,255,.18);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:6px 4px;gap:1px;scroll-snap-align:start;position:relative;cursor:pointer;box-shadow:inset 0 -36px 30px -10px rgba(0,0,0,.6);font-family:Nunito,sans-serif;transition:transform .15s}
.ar-tile .ar-ti{position:absolute;top:8px;font-size:32px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.ar-tile b{font-size:12.5px;font-weight:900;text-shadow:0 1px 2px #000;white-space:nowrap}
.ar-tile small{font-size:10px;opacity:.85;text-shadow:0 1px 2px #000}
.ar-tile.on{border-color:#ffd23f;box-shadow:0 0 0 2px #ffd23f,0 6px 18px rgba(255,210,63,.35),inset 0 -36px 30px -10px rgba(0,0,0,.6);transform:translateY(-2px)}
.ar-tile.on::after{content:"✓";position:absolute;top:4px;right:6px;width:18px;height:18px;border-radius:50%;background:#ffd23f;color:#4a1800;font-size:12px;font-weight:900;display:grid;place-items:center}
.ar-tile:disabled{cursor:default;opacity:.55}
.ar-tile.on:disabled{opacity:1}
.ar-tile:active:not(:disabled){transform:scale(.95)}
.ar-tiles.in-ed{margin-top:6px}
.ar-tiles.in-ed .ar-tile{flex-basis:74px;height:74px}
.ar-tiles.in-ed .ar-ti{font-size:26px;top:6px}
.rrow.col{flex-direction:column;align-items:stretch}
/* how-to-play guide */
.ar-guide .ag-ar{display:flex;gap:10px;align-items:center;margin:6px 0;text-align:left;font-size:12.5px;line-height:1.35}
.ar-guide .ag-ar>span{flex:0 0 46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:24px}
.ar-guide .ag-ar b{display:block;font-size:13.5px}
.ar-tags i{font-style:normal}
@media (prefers-reduced-motion: reduce){
  .arv-crack,.arv-bub,.ari-flake,.arh-fog,.arh-bat,.arh-swirl,.ars-star,.ars-disc,.ars-next,.ar-bully .arb-in,.ar-bully .arb-aura,.peg .arb-c,.peg .arf1,.peg .arf2,.ar-fire-tag,.arv-warn .arv-wg{animation:none}
  .ar-amb{display:none}
  .board-wrap.ar-thump::after,.board-wrap.ar-thump #board{animation:none}
  .ar-sd-banner,.ar-card{animation-duration:.01s}
}
.ars-halo{animation:arWarn 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion: reduce){.ars-halo{animation:none}}
/* ---- v1.6.1 announcements: one at a time, reading-time durations, tap to close, 📌 to keep, feed */
.toast.ann-m{animation:callIn .35s cubic-bezier(.2,1.6,.4,1) both;transition:opacity .25s,transform .25s}
.toast.ann-m.out{opacity:0;transform:translateY(-14px)}
.toast.callout.multi{flex-direction:column;align-items:stretch;gap:5px;text-align:left}
.toast.callout .cl{display:flex;align-items:center;gap:8px}
.toast.callout .cl i{font-style:normal;font-size:19px;width:22px;text-align:center;flex:none}
.pu-card.big.ann,.pu-splash.ann,.ann-target{position:relative;overflow:hidden}
.pu-splash.ann{animation:puSplashIn .4s cubic-bezier(.2,1.4,.4,1) both;cursor:pointer;padding-right:40px}
.pu-splash.ann.out,.ann-target.out{animation:puOut .26s ease-in forwards}
.pu-splash span{display:flex;flex-direction:column}
.pu-splash small{font-family:Nunito,system-ui,sans-serif;font-weight:800;font-size:13px;line-height:1.25;opacity:.9;margin-top:2px}
@keyframes puSplashIn{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.06);opacity:1}100%{transform:none;opacity:1}}
.kb-stamp.ann{pointer-events:auto;cursor:pointer;animation:kbStampIn .45s cubic-bezier(.2,1.5,.4,1) forwards;overflow:hidden}
.kb-stamp.ann.out{animation:kbStampOut .26s ease-in forwards}
@keyframes kbStampIn{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2) rotate(8deg)}55%{opacity:1;transform:translate(-50%,-50%) scale(.94) rotate(-2deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes kbStampOut{to{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
.ann-bar{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--t,var(--c,#ffd23f));opacity:.85;transform-origin:left;animation:annBar linear forwards;pointer-events:none}
@keyframes annBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.ann.pinned .ann-bar{display:none}
.ann.pinned{box-shadow:0 0 0 3px #ffd23f,0 14px 40px rgba(0,0,0,.6)}
.ann-pin{position:absolute;top:6px;right:6px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(0,0,0,.28);color:#fff;font-size:16px;line-height:34px;padding:0;cursor:pointer;z-index:2}
.ann.pinned .ann-pin{background:#ffd23f;color:#1b1430;font-weight:900}
.ann-target{width:min(290px,78vw);text-align:center;padding:14px 16px 14px;border-radius:22px;cursor:pointer;color:#fff;
  background:radial-gradient(120% 90% at 50% 0%,#ff3b5c 0%,#9d0f2c 55%,#3a0716 100%);border:4px solid #fff;
  box-shadow:0 0 0 4px #ff3b5c,0 0 50px rgba(255,59,92,.85),0 18px 40px rgba(0,0,0,.6);animation:atIn .5s cubic-bezier(.2,1.6,.4,1) both}
.ann-target .at-h{font-family:"Lilita One";font-size:27px;letter-spacing:.5px;text-shadow:0 3px 0 #5c0718;animation:atPulse .5s ease-in-out 4 alternate}
.ann-target .at-i{font-size:58px;line-height:1.1;margin:2px 0;filter:drop-shadow(0 5px 6px rgba(0,0,0,.45))}
.ann-target .at-m{font-size:17px;font-weight:800}
.ann-target .at-m b{color:#ffe27a}
.ann-target .at-s{font-size:13.5px;margin-top:6px;background:rgba(0,0,0,.28);border-radius:12px;padding:6px 8px;line-height:1.3}
.ann-target .pc-tap{opacity:.7}
@keyframes atIn{0%{transform:scale(1.8) rotate(-6deg);opacity:0}60%{transform:scale(.95) rotate(1deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes atPulse{to{transform:scale(1.07)}}
#game.hitflash .board-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;border-radius:18px;box-shadow:inset 0 0 0 6px #ff3b5c,inset 0 0 90px 30px rgba(255,59,92,.55);animation:hitFlash 1.5s ease-out forwards}
@keyframes hitFlash{0%,30%,60%{opacity:1}15%,45%{opacity:.35}100%{opacity:0}}
.feed{position:relative;width:100%;max-width:94%;display:flex;flex-direction:column;align-items:center;z-index:7}
.feed-line{display:flex;align-items:center;gap:6px;max-width:100%;font:700 12.5px/1.3 Nunito,system-ui,sans-serif;color:#ddd8ff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:4px 12px;cursor:pointer}
.feed-line .fd-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.feed-line .fd-i{flex:none}
.feed-line .fd-n{flex:none;margin-left:4px;font-size:11px;color:#ffd23f;background:rgba(255,210,63,.14);padding:1px 7px;border-radius:99px}
.feed-list{position:absolute;bottom:calc(100% + 6px);left:0;right:0;margin:0 auto;max-width:380px;max-height:min(46vh,340px);overflow:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,rgba(30,22,58,.98),rgba(16,11,34,.98));border:2px solid rgba(255,255,255,.16);border-radius:18px;padding:10px 10px 8px;box-shadow:0 -10px 40px rgba(0,0,0,.55);animation:sheetIn .2s ease-out both}
.feed-list .fd-h{font-family:"Lilita One";font-size:17px;margin:0 4px 6px}
.feed-list .fd-h small{font:700 11px Nunito,system-ui,sans-serif;opacity:.6;margin-left:6px}
.feed-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.feed-list li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.3;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.05);border-left:4px solid var(--c)}
.feed-list li.new{background:rgba(255,210,63,.12)}
.feed-list li span{flex:none;width:22px;text-align:center}
.feed-list li em{font-style:normal}
.feed-list .fd-log{margin-top:8px;width:100%;font-size:14px;padding:8px}
@media (prefers-reduced-motion:reduce){
  .ann-target,.ann-target .at-h,.pu-splash.ann,.kb-stamp.ann{animation:none!important}
  .kb-stamp.ann{opacity:1}
  #game.hitflash .board-wrap::after{animation:hitFade 1.5s linear forwards}
}
@keyframes hitFade{0%,60%{opacity:1}100%{opacity:0}}

/* v1.6.1 pacing: 'Your turn!' / 'X's turn' handover cue */
.turn-cue{position:absolute;left:50%;top:50%;z-index:6;pointer-events:none;display:flex;align-items:center;gap:8px;padding:8px 16px 8px 10px;border-radius:999px;
  background:rgba(14,10,30,.82);border:2px solid var(--c);box-shadow:0 0 24px color-mix(in srgb,var(--c) 60%,transparent);color:#fff;font-weight:800;font-size:17px;
  white-space:nowrap;transform:translate(-50%,-50%);animation:tcIn 1.1s ease both}
.turn-cue.me{font-size:22px;padding:10px 20px 10px 12px;background:color-mix(in srgb,var(--c) 45%,rgba(14,10,30,.9))}
.turn-cue svg{width:26px;height:26px}
@keyframes tcIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}30%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(.96)}}
.chip.handover{animation:chipHand .9s ease}
@keyframes chipHand{0%{box-shadow:0 0 0 0 var(--c)}35%{box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 70%,transparent),0 0 30px var(--c)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.turn-cue{animation:tcFade 1.1s linear both}.chip.handover{animation:none}@keyframes tcFade{0%,100%{opacity:0}15%,75%{opacity:1}}}
/* v1.8.x phone-width fix: House rules sheet was ~550px wide on every phone (grid column sized to the arena picker's
   full tile strip), so toggles sat off-screen and descriptions didn't wrap. Pin the column to the sheet width,
   let text wrap, keep toggles at the right, and let the arena strip scroll inside its own row only. */
.rules-ed{grid-template-columns:minmax(0,1fr);overflow-x:hidden}
.rules-ed>*{min-width:0;max-width:100%}
.rrow .rt{min-width:0;overflow-wrap:anywhere}
.rrow .rt small{overflow-wrap:anywhere}
.rrow>.sw{margin-left:auto}
.rrow>.seg3{flex:0 1 auto;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.rrow.col>.ar-tiles,.ar-tiles{min-width:0;max-width:100%}
.modal-card{overflow-x:hidden}
.modal-card>*{min-width:0;max-width:100%}
/* local setup: bot level buttons wrap under the seat on narrow phones instead of pushing off-screen */
.lseat{flex-wrap:wrap;row-gap:6px}
.lseat .lv{flex-wrap:wrap;margin-left:auto}
@media (max-width:380px){.lseat .lv{flex:1 1 100%;justify-content:flex-end}.lseat .lv button{padding:7px 8px}}
.rrow{flex-wrap:wrap;row-gap:8px}
.rrow .rt{flex:1 1 170px}
.rrow>.seg3{margin-left:auto}
.rrow.col{flex-wrap:nowrap}
.rrow.col .rt{flex:0 0 auto}
/* arena picker inside House rules: wrap into a tidy grid so every arena is visible without sideways scrolling */
.ar-tiles.in-ed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;scroll-snap-type:none;padding:4px 2px 4px}
.ar-tiles.in-ed .ar-tile{width:auto;min-width:0}
.ar-tiles.in-ed .ar-tile b{font-size:11.5px;white-space:normal;text-align:center;line-height:1.05}

/* v1.8.5 crowd reactions */
.controls.has-crowd{gap:10px}
.iconbtn.round.crowd-btn{width:44px;height:44px;font-size:21px}
.crowd-btn:disabled{opacity:.35;filter:grayscale(.6)}
.crowd-btn.on{box-shadow:0 0 0 3px #7dd3fc}
.crowd-pick{position:absolute;bottom:72px;left:50%;transform:translateX(-50%);z-index:30;display:flex;gap:4px;padding:6px 8px;border-radius:99px;background:rgba(20,16,48,.94);border:1px solid rgba(125,211,252,.5);box-shadow:0 8px 24px rgba(0,0,0,.45);animation:crPop .18s ease-out}
.crowd-pick button{width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.08);font-size:24px;line-height:1;cursor:pointer;transition:transform .1s}
.crowd-pick button:active{transform:scale(1.25)}
@keyframes crPop{from{opacity:0;transform:translate(-50%,8px) scale(.9)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.crowd-fly{position:absolute;bottom:4%;z-index:12;pointer-events:none;display:flex;flex-direction:column;align-items:center;animation:crFly 3.1s cubic-bezier(.25,.6,.4,1) forwards;will-change:transform,opacity}
.crowd-fly span{font-size:38px;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
.crowd-fly b{margin-top:2px;font-size:11px;font-weight:800;color:#fff;background:var(--c);padding:1px 7px;border-radius:99px;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.crowd-fly.mine span{font-size:44px}
@keyframes crFly{0%{opacity:0;transform:translate(0,20px) scale(.6)}12%{opacity:1;transform:translate(calc(var(--dx)*.2),0) scale(1.1) rotate(var(--rot))}
  50%{transform:translate(var(--dx),-38vh) scale(1) rotate(calc(var(--rot)*-1))}85%{opacity:.9}100%{opacity:0;transform:translate(calc(var(--dx)*-.4),-70vh) scale(.9) rotate(var(--rot))}}
@media (prefers-reduced-motion:reduce){.crowd-fly{animation:crFade 2.4s ease forwards;bottom:40%}@keyframes crFade{0%,100%{opacity:0}15%,75%{opacity:1}}}

/* ---- v1.8.6 Twists: Revenge markers + Mystery rounds (TWISTS block in js/app.js) */
.tw-tags{left:auto;right:4px;top:-9px;bottom:auto;gap:2px}
.tw-rv{display:inline-flex;align-items:center;gap:2px;font-style:normal;background:rgba(15,8,40,.92);border:2px solid var(--v);border-radius:8px;padding:1px 4px 1px 2px;font-size:12px;box-shadow:0 0 8px var(--v)}
.tw-rv b{font-size:9px;font-weight:900;color:#fff;letter-spacing:.3px}
.tw-rv s{width:9px;height:9px;border-radius:50%;background:var(--v);border:1.5px solid #fff;display:inline-block}
.tw-rv.me{background:#ff3b5c;border-color:#fff;animation:twRvPulse 1.6s ease-in-out infinite}
@keyframes twRvPulse{50%{box-shadow:0 0 14px #ff3b5c,0 0 0 3px rgba(255,59,92,.35)}}
.chip.tw-hit{animation:twHit .8s ease}
@keyframes twHit{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.peg .twm{display:none;pointer-events:none}
.peg.tw-rv .twm{display:inline}
.tw-safe .tw-sg{animation:twGlow 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes twGlow{50%{opacity:.55;transform:scale(1.12)}}
.tw-badge{position:absolute;top:4px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:6px;max-width:92%;padding:4px 12px 4px 6px;border-radius:99px;border:2px solid #b98cff;background:rgba(30,12,70,.92);color:#fff;font:800 12px Nunito,system-ui,sans-serif;box-shadow:0 0 16px rgba(185,140,255,.6);cursor:pointer;white-space:nowrap;animation:twBadgeIn .45s cubic-bezier(.2,1.6,.4,1) both}
.tw-badge span{font-size:15px}
.tw-badge b{font-family:"Lilita One";font-weight:400;font-size:13px;color:#d9c2ff}
.tw-badge em{font-style:normal;overflow:hidden;text-overflow:ellipsis}
@keyframes twBadgeIn{from{transform:translateX(-50%) scale(.4);opacity:0}to{transform:translateX(-50%);opacity:1}}
.tw-card{position:relative;overflow:hidden;width:min(300px,80vw);text-align:center;padding:14px 16px 16px;border-radius:22px;cursor:pointer;color:#fff;
  background:radial-gradient(120% 90% at 50% 0%,#8a4dff 0%,#3b1585 55%,#160736 100%);border:4px solid #fff;
  box-shadow:0 0 0 4px #b98cff,0 0 50px rgba(185,140,255,.85),0 18px 40px rgba(0,0,0,.6);animation:twCardIn .55s cubic-bezier(.2,1.5,.4,1) both}
.tw-card .twc-h{font-family:"Lilita One";font-size:22px;padding:0 28px;letter-spacing:1px;color:#ffe46b;text-shadow:0 2px 0 #2a0b66}
.tw-card .twc-r{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;opacity:.8;margin-top:2px}
.tw-card .twc-i{font-size:58px;line-height:1.15;margin-top:4px;animation:puPop .6s .2s cubic-bezier(.3,1.8,.5,1) both}
.tw-card .twc-n{font-family:"Lilita One";font-size:27px;line-height:1.05}
.tw-card .twc-s{font-size:14px;margin-top:6px;line-height:1.3;font-weight:700}
.tw-card .pc-how{color:#1b1430}
@keyframes twCardIn{0%{transform:rotate(-8deg) scale(.3);opacity:0}70%{transform:rotate(2deg) scale(1.05);opacity:1}100%{transform:none;opacity:1}}
.tw-rev{position:relative;overflow:hidden;width:min(290px,78vw);text-align:center;padding:14px 16px;border-radius:22px;cursor:pointer;color:#fff;
  background:radial-gradient(120% 100% at 50% 0%,var(--c) 0%,#2a0b2a 75%);border:4px solid #fff;box-shadow:0 0 0 4px var(--v),0 0 50px var(--c),0 18px 40px rgba(0,0,0,.6);animation:twRevIn .5s cubic-bezier(.2,1.6,.4,1) both}
.tw-rev .twr-h{font-family:"Lilita One";font-size:36px;padding:0 26px;line-height:1.05;color:#ffe46b;text-shadow:0 3px 0 #000,0 0 18px rgba(255,80,80,.8)}
.tw-rev .twr-s{font-size:16px;font-weight:900;margin-top:4px}
.tw-rev .twr-xp{display:inline-block;margin-top:8px;padding:3px 12px;border-radius:99px;background:#ffd23f;color:#3a2200;font-weight:900;font-size:15px}
.tw-rev .twr-n{font-size:11px;opacity:.75;margin-top:6px;letter-spacing:.5px}
@keyframes twRevIn{0%{transform:scale(2.2) rotate(6deg);opacity:0}55%{transform:scale(.94) rotate(-2deg);opacity:1}100%{transform:none;opacity:1}}
.tw-card.ann.out,.tw-rev.ann.out{animation:puOut .26s ease-in forwards}
.tw-guide summary{color:#ffe46b}
@media (prefers-reduced-motion: reduce){
  .tw-rv.me,.tw-safe .tw-sg,.chip.tw-hit{animation:none}
  .tw-card,.tw-rev,.tw-badge,.tw-card .twc-i{animation:none}
  .tw-card.ann.out,.tw-rev.ann.out{animation:none;opacity:0}
}
/* v1.8.7 victory celebrations: first-time note on the win screen */
.cel-note{margin:4px 0 10px;padding:8px 10px;border-radius:12px;background:rgba(255,210,63,.12);border:1px solid rgba(255,210,63,.35);font-size:13px;line-height:1.35;text-align:center}

/* v1.8.9 version badge on the home screen */
.ver-badge{align-self:center;position:relative;display:inline-flex;align-items:center;gap:6px;margin:2px auto 0;padding:7px 14px;border-radius:999px;
  font-size:12.5px;font-weight:800;color:var(--muted);text-decoration:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:background .2s,color .2s,transform .1s}
.ver-badge i{font-style:normal;opacity:.6}
.ver-badge b{color:#ffd23f;font-weight:900}
.ver-badge:hover,.ver-badge:focus-visible{background:rgba(255,255,255,.12);color:#fff}
.ver-badge:focus-visible{outline:3px solid #ffd23f;outline-offset:2px}
.ver-badge:active{transform:scale(.96)}
.ver-badge.fresh{color:#fff;border-color:rgba(255,210,63,.45);background:rgba(255,210,63,.1)}
.ver-dot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:#ff3b4a;border:2px solid #1b0f4a;box-shadow:0 0 10px rgba(255,59,74,.8);animation:verDot 1.6s ease-in-out infinite}
@keyframes verDot{50%{transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.ver-dot{animation:none}}
/* ---------------- v1.9.2 Secret Missions */
.ms-pill{display:flex;align-items:center;gap:8px;width:min(360px,94%);margin:0 auto 6px;padding:6px 10px 6px 8px;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--c,#c9a0ff) 55%,#ffd23f);background:linear-gradient(100deg,rgba(40,18,70,.92),rgba(22,10,44,.92));color:#fff;font:inherit;text-align:left;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
.ms-pill.hidden{display:none}
.ms-pill>i{font-style:normal;font-size:20px;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.ms-pill>span{flex:1;min-width:0;font-size:12.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ms-pill>span em{display:block;font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#ffd23f;opacity:.9}
.ms-pill>b{flex:none;font-size:11px;padding:3px 7px;border-radius:9px;background:rgba(255,255,255,.1);white-space:nowrap}
.ms-pill.done{border-color:#ffd23f;background:linear-gradient(100deg,#5a3d00,#2b1c00);animation:msGlow 2.4s ease-in-out infinite}
.ms-pill.done>b{background:#ffd23f;color:#2b1c00}
.ms-pill.fail{opacity:.6}
@keyframes msGlow{50%{box-shadow:0 0 18px rgba(255,210,63,.55),inset 0 1px 0 rgba(255,255,255,.1)}}
.ms-col{color:var(--l);text-shadow:0 0 8px var(--c)}
.ms-card{position:absolute;left:50%;top:50%;width:min(330px,90%);transform:translate(-50%,-50%);z-index:9;border-radius:22px;overflow:hidden;cursor:pointer;color:#fff;text-align:left;
  background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--c) 35%,transparent),transparent 60%),linear-gradient(170deg,#2c1650,#140a2a 70%);border:2px solid #ffd23f;box-shadow:0 20px 60px rgba(0,0,0,.75),0 0 0 4px rgba(255,210,63,.15);animation:msIn .5s cubic-bezier(.2,1.4,.4,1) both}
.ms-card.out{animation:arCardOut .26s ease-in forwards}
@keyframes msIn{from{transform:translate(-50%,-38%) rotate(-4deg) scale(.8);opacity:0}to{transform:translate(-50%,-50%) rotate(0) scale(1);opacity:1}}
.msc-top{height:70px;position:relative;background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 8px,transparent 8px 16px)}
.msc-stamp{position:absolute;left:14px;top:16px;padding:3px 9px;border:2.5px solid #ff4d5a;color:#ff4d5a;font-family:"Lilita One";font-size:15px;letter-spacing:.12em;border-radius:6px;transform:rotate(-9deg);opacity:.9;animation:msStamp .5s .35s cubic-bezier(.3,1.6,.5,1) both}
@keyframes msStamp{from{transform:rotate(-9deg) scale(2.2);opacity:0}}
.msc-seal{position:absolute;right:16px;top:12px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:28px;background:radial-gradient(circle at 35% 30%,var(--l),var(--c) 55%,color-mix(in srgb,var(--c) 60%,#000));box-shadow:0 4px 10px rgba(0,0,0,.5),inset 0 -3px 6px rgba(0,0,0,.3)}
.msc-who{text-align:center;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#ffd23f;margin-top:2px}
.msc-body{text-align:center;padding:6px 16px 4px;transition:filter .35s,opacity .35s}
.msc-ico{font-size:38px;line-height:1.1}
.ms-card h4{margin:2px 0 4px;font-family:"Lilita One";font-weight:400;font-size:24px}
.msc-goal{font-size:17px;font-weight:800;line-height:1.3}
.msc-prog{display:inline-block;margin-top:6px;font-size:12px;padding:3px 10px;border-radius:10px;background:rgba(255,255,255,.1)}
.ms-card p{display:flex;gap:10px;margin:8px 16px;font-size:13px;line-height:1.35}
.ms-card p i{font-style:normal;font-size:19px;line-height:1}
.ms-card small{display:block;text-align:center;font-size:11px;opacity:.55;margin:8px 0 12px}
.msc-peek{display:none}
.ms-card.sealed small{visibility:hidden}
.ms-card.sealed .msc-body,.ms-card.sealed p{filter:blur(9px);opacity:.5;pointer-events:none}
.ms-card.sealed .msc-peek{display:block;margin:10px 16px 0;padding:10px;border-radius:12px;text-align:center;font-weight:800;background:rgba(255,210,63,.15);border:1px dashed #ffd23f}
.ms-reveal{margin:10px 0 4px;padding:10px;border-radius:16px;background:linear-gradient(170deg,rgba(44,22,80,.9),rgba(20,10,42,.9));border:1.5px solid rgba(255,210,63,.5)}
.msv-h{text-align:center;font-family:"Lilita One";font-size:17px;color:#ffd23f;margin-bottom:6px}
.msr{display:flex;align-items:center;gap:8px;padding:6px 8px;margin-top:5px;border-radius:12px;background:rgba(255,255,255,.05);border-left:4px solid var(--c);animation:msFlip .55s var(--d,.9s) cubic-bezier(.3,1.3,.5,1) both;transform-origin:50% 50%}
.msr.ok{background:linear-gradient(90deg,rgba(255,210,63,.18),rgba(255,255,255,.04))}
@keyframes msFlip{from{transform:rotateX(90deg);opacity:0}}
.msr-peg svg{width:20px;height:26px;display:block}
.msr-t{flex:1;min-width:0;font-size:12.5px;line-height:1.3;text-align:left}
.msr-t em{display:block;font-style:normal;font-size:10.5px;opacity:.7}
.msr>b{text-align:right;font-size:18px;line-height:1}
.msr>b small{display:block;font-size:10.5px;color:#ffd23f;white-space:nowrap;margin-top:2px}
@media (prefers-reduced-motion:reduce){.ms-card,.msc-stamp,.msr,.ms-pill.done{animation:none}}
.ms-done-card{width:min(290px,78vw);text-align:center;padding:42px 16px 14px;border-radius:22px;cursor:pointer;color:#fff;position:relative;
  background:radial-gradient(120% 90% at 50% 0%,#ffe27a 0%,#c98a00 45%,#4a2a00 100%);border:4px solid #fff;box-shadow:0 0 0 4px #ffd23f,0 0 50px rgba(255,210,63,.8),0 18px 40px rgba(0,0,0,.6);animation:atIn .5s cubic-bezier(.2,1.6,.4,1) both}
.mdc-stamp{display:inline-block;font-family:"Lilita One";font-size:20px;letter-spacing:.06em;color:#3a1d00;background:#fff3c4;border-radius:10px;padding:3px 12px;transform:rotate(-4deg);box-shadow:0 3px 0 #8a5a00;animation:msStamp .45s .2s cubic-bezier(.3,1.6,.5,1) both}
.mdc-i{font-size:54px;line-height:1.15;margin-top:6px;filter:drop-shadow(0 5px 6px rgba(0,0,0,.45))}
.ms-done-card>b{display:block;font-family:"Lilita One";font-weight:400;font-size:24px;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.mdc-t{font-size:15px;font-weight:800;margin-top:2px}
.ms-done-card small{display:block;margin-top:8px;font-size:12.5px;background:rgba(0,0,0,.28);border-radius:12px;padding:6px 8px}
@media (prefers-reduced-motion:reduce){.ms-done-card,.mdc-stamp{animation:none}}
/* v1.9.1 First-time tips: one friendly "NEW!" coach card, queued by Ann (progress bar + 📌 come from .ann) */
.tip-card{position:relative;overflow:hidden;width:min(300px,82vw);text-align:left;padding:12px 16px 12px;border-radius:20px;cursor:pointer;color:#fff;
  background:linear-gradient(165deg,#173a5e 0%,#10233f 60%,#0b1830 100%);border:3px solid var(--c,#7dd3fc);
  box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 36px color-mix(in srgb,var(--c,#7dd3fc) 70%,transparent),0 18px 40px rgba(0,0,0,.6);animation:tipIn .45s cubic-bezier(.2,1.4,.4,1) both}
.tip-card.out{animation:puOut .26s ease-in forwards}
.tip-card .tp-h{display:flex;align-items:center;gap:8px;padding-right:34px;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:800;opacity:.95}
.tp-new{display:inline-block;background:#ffd23f;color:#1b1430;border-radius:999px;padding:2px 8px;font-family:"Lilita One",sans-serif;font-size:12px;letter-spacing:1px;font-weight:400;line-height:1.3;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.tip-card .tp-h span{opacity:.8}
.tip-card .tp-i{font-size:44px;line-height:1.1;margin-top:6px;text-align:center}
.tip-card .tp-t{font-family:"Lilita One",sans-serif;font-size:23px;line-height:1.1;text-align:center;margin-top:2px;color:var(--c,#7dd3fc)}
.tip-card .tp-b{font-size:15px;line-height:1.38;margin-top:8px;font-weight:600}
.tip-card .tp-rules{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:3px;font-size:14px;line-height:1.3;font-weight:600;text-align:left}
.tip-card .tp-rules li{display:flex;gap:7px;align-items:flex-start;min-width:0;overflow-wrap:anywhere}
.tip-card .tp-rules li span{flex:0 0 1.4em;text-align:center}
.tip-card .tp-f{font-size:12px;margin-top:10px;opacity:.85;text-align:center}
.tip-card .tp-off{background:none;border:0;color:#7dd3fc;text-decoration:underline;font:inherit;font-weight:800;padding:6px 4px;cursor:pointer;min-height:32px}
.tip-card.replay{margin:4px auto 12px;cursor:default;animation:none}
.pc-how .tp-new,.twc-h .tp-new{font-size:10px;padding:1px 6px;vertical-align:2px}
@keyframes tipIn{0%{transform:translateY(18px) scale(.9);opacity:0}100%{transform:none;opacity:1}}
.tips-guide .tg-intro{font-size:13.5px;margin:6px 0}
.tips-guide .tg-btns{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 4px}
.tips-guide .tg-btns .btn{flex:1 1 auto;min-height:40px}
.tips-guide .tg-cat{margin-top:10px}
.tips-guide .tg-cat>b{font-size:13px}
.tips-guide .tg-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tg-tip{display:inline-flex;align-items:center;gap:5px;max-width:100%;min-height:36px;padding:6px 10px;border-radius:999px;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:inherit;font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-align:left}
.tg-tip.seen{opacity:.75}
.tg-tip:not(.seen)::after{content:"new";font-size:9px;text-transform:uppercase;background:#ffd23f;color:#1b1430;border-radius:999px;padding:1px 5px;margin-left:2px}
@media (prefers-reduced-motion:reduce){.tip-card{animation:none}}
/* v1.9.5 tips inside Secret Missions cards */
.ms-card .ms-new,.ms-done-card .ms-new{position:absolute;top:10px;left:10px;z-index:2}
.msv-tip{font-size:14px;line-height:1.35;background:rgba(0,0,0,.28);border-radius:12px;padding:7px 10px;margin:4px 0 8px;text-align:left}
.ms-done-card .pc-how{margin-top:8px;font-size:14px;line-height:1.35;text-align:left}
/* ---------- Daily Challenge */
.daily-box{margin:0 0 12px}
.dc-card{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:18px;
  background:linear-gradient(135deg,rgba(255,210,63,.24),rgba(255,93,93,.16) 60%,rgba(120,80,255,.18));border:1px solid rgba(255,210,63,.55);
  box-shadow:0 8px 22px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.18);color:#fff}
.dc-card:active{transform:scale(.985)}
.dc-ic{font-size:30px;line-height:1;flex:0 0 auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.dc-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dc-t small{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#ffe48a}
.dc-t b{font-family:"Lilita One",Nunito,sans-serif;font-weight:400;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-t em{font-style:normal;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-t em i{font-style:normal;color:#ffd23f}
.dc-r{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.dc-cd{font-variant-numeric:tabular-nums;font-size:15px;background:rgba(0,0,0,.3);padding:4px 8px;border-radius:9px}
.dc-r small{font-size:10px;color:var(--muted);margin-top:2px}
.dc-hero{text-align:center;margin:-4px 0 10px}
.dc-hero>span{font-size:46px;display:block;line-height:1.1}
.dc-hero small{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#ffe48a}
.dc-hero h3{margin:2px 0 4px}
.dc-hero p{margin:0;font-size:14px;color:var(--muted)}
.dc-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 10px}
.dc-facts div{background:rgba(0,0,0,.25);border-radius:12px;padding:7px 6px;text-align:center;min-width:0}
.dc-facts small{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.dc-facts b{font-size:12.5px;display:block;overflow-wrap:anywhere}
.dc-more{background:rgba(0,0,0,.2);border-radius:12px;padding:8px 10px;margin:0 0 8px;font-size:14px}
.dc-more summary{cursor:pointer}
.dc-more .rule-lines{margin:8px 0 0}
.dc-score{list-style:none;margin:8px 0 0;padding:0}
.dc-score li{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--line);font-size:13px}
.dc-score li span{width:20px;text-align:center}
.dc-score li b{margin-left:auto;color:#ffd23f;white-space:nowrap}
.dc-score small{color:var(--muted)}
.dc-note{font-size:12px;color:var(--muted);margin:8px 0 2px}
.dc-mine{text-align:center;font-size:14px;margin:4px 0 8px}
.dc-mine b{color:#ffd23f}
.dc-guest{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:rgba(255,210,63,.1);border:1px solid rgba(255,210,63,.35);border-radius:12px;padding:8px 10px;margin:0 0 10px;font-size:13px}
.dc-guest span{flex:1 1 180px}
.dc-lbl{margin:14px 0 6px}
.dc-tabs{justify-content:center;margin:0 auto 8px;width:max-content;max-width:100%}
.dc-sub{font-size:12px;color:var(--muted);margin:0 0 6px;text-align:center}
.dc-board{list-style:none;margin:0 0 8px;padding:0;max-height:38vh;overflow:auto}
.dc-board li{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:10px;font-size:14px}
.dc-board li:nth-child(odd){background:rgba(255,255,255,.05)}
.dc-board li.me{background:rgba(255,210,63,.18);outline:1px solid rgba(255,210,63,.5)}
.dc-rk{width:26px;text-align:center;flex:0 0 auto}
.dc-nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-nm small{color:var(--muted)}
.dc-days{color:var(--muted);font-size:11px}
.dc-sc{color:#ffd23f;font-variant-numeric:tabular-nums}
.dc-empty{text-align:center;color:var(--muted);font-size:13px;padding:12px 0}
.dc-meline{text-align:center;font-size:13px;margin:0 0 8px}
.dc-res{background:linear-gradient(180deg,rgba(255,210,63,.16),rgba(0,0,0,.2));border:1px solid rgba(255,210,63,.45);border-radius:16px;padding:10px 12px;margin:10px 0}
.dc-res-h{font-size:12px;text-align:center;color:#ffe48a;margin:0 0 6px}
.dc-lines{list-style:none;margin:0;padding:0}
.dc-lines li{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:3px 0;opacity:0;animation:dcIn .35s ease-out forwards}
.dc-lines li:nth-child(2){animation-delay:.12s}.dc-lines li:nth-child(3){animation-delay:.24s}.dc-lines li:nth-child(4){animation-delay:.36s}
.dc-lines li:nth-child(5){animation-delay:.48s}.dc-lines li:nth-child(6){animation-delay:.6s}
.dc-lines li b{color:#8ff0a4}.dc-lines li.neg b{color:#ff9a9a}
.dc-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.dc-total b{font-family:"Lilita One",Nunito,sans-serif;font-weight:400;font-size:30px;color:#ffd23f;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.dc-tag{text-align:center;font-size:13px;color:var(--muted)}
.dc-nb{font-style:normal;background:linear-gradient(180deg,#fff0a6,#ffc21a);color:#3d2300;padding:2px 8px;border-radius:8px;animation:pulseUp 1.2s ease-in-out infinite}
@keyframes dcIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dc-lines li{animation:none;opacity:1}.dc-nb{animation:none}}