:root{
  --bg:#0f1020; --bg2:#171933; --card:#1d2042; --card2:#262a55; --line:#333865;
  --fg:#f3f4ff; --dim:#9ea3d1; --acc:#ff5d8f; --acc2:#7c5cff; --ok:#3ddc97; --warn:#ffb84d; --bad:#ff5c6c;
  --r:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{min-height:100dvh;background:radial-gradient(1200px 600px at 50% -10%,#2a2470 0%,var(--bg) 60%) no-repeat,var(--bg)}
#app{max-width:560px;margin:0 auto;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
h1{font-size:2.4rem;margin:.6em 0 .1em;text-align:center;user-select:none;-webkit-user-select:none}
h2{font-size:1.25rem;margin:0 0 .6em}
h3{font-size:1rem;margin:.2em 0 .5em;color:var(--dim);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.sub{text-align:center;color:var(--dim);margin:0 0 1.2em}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:14px 0}
.center{text-align:center}
.dim{color:var(--dim)}
.small{font-size:.85rem}
.err{color:var(--bad);min-height:1.2em;margin:.6em 0 0;font-size:.95rem}
.row{display:flex;gap:8px;align-items:stretch}
.row.wrap{flex-wrap:wrap}
.grow{flex:1}
.gap{height:10px}

.btn{appearance:none;border:0;border-radius:14px;padding:14px 16px;min-height:48px;font:inherit;font-weight:700;color:var(--fg);background:var(--card2);cursor:pointer;transition:transform .08s,filter .15s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:linear-gradient(135deg,var(--acc),var(--acc2))}
.btn.big{width:100%;font-size:1.1rem;padding:16px}
.btn.ok{background:var(--ok);color:#06231a}
.btn.bad{background:var(--bad);color:#2a0308}
.btn.ghost{background:transparent;border:1px solid var(--line)}
.btn.icon{min-width:48px;padding:0 12px}
.btn.sel{outline:3px solid var(--acc);outline-offset:1px}
.btn.block{display:block;width:100%;text-align:left}
.link{background:none;border:0;color:var(--dim);font:inherit;padding:8px 0;cursor:pointer;text-decoration:underline}

input[type=text]{width:100%;min-height:48px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);color:var(--fg);font:inherit;font-size:1.05rem;padding:10px 14px}
input[type=text]:focus{outline:2px solid var(--acc2);border-color:transparent}
label{display:block;margin:0 0 6px;color:var(--dim);font-size:.9rem}
.cells{display:flex;gap:10px;justify-content:center;margin:10px 0}
.cells input{width:64px;height:72px;text-align:center;font-size:2rem;font-weight:800;text-transform:uppercase;padding:0;border-radius:14px}
.or{text-align:center;color:var(--dim);margin:14px 0 0;font-size:.9rem}

.bar{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.bar .code{font-weight:800;letter-spacing:.15em;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 10px;cursor:pointer}
.bar .sp{flex:1}
.dot{width:4px;height:4px;border-radius:50%;background:#ffffff33;display:inline-block;margin-left:4px;cursor:pointer;padding:6px;background-clip:content-box}

.bigcode{font-size:3rem;font-weight:900;letter-spacing:.2em;text-align:center;margin:.1em 0}
.players{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border-radius:999px;background:hsl(var(--h,250) 45% 28%);border:1px solid hsl(var(--h,250) 50% 40%);font-weight:600;max-width:100%}
.chip .av{font-size:1.3rem;line-height:1}
.chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.off{opacity:.45}
.chip.me{outline:2px solid var(--acc);outline-offset:1px}
.chip.small{padding:4px 10px 4px 6px;font-size:.9rem}
.chip.vote{cursor:pointer}
.chip.pop{animation:pop .35s ease-out}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.tag{font-size:.7rem;padding:2px 6px;border-radius:6px;background:#ffffff22;color:var(--dim);font-weight:700}

.games{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gcard{background:var(--card2);border:2px solid transparent;border-radius:14px;padding:12px;text-align:left;color:var(--fg);font:inherit;cursor:pointer;min-height:110px}
.gcard.sel{border-color:var(--acc)}
.gcard.soon{opacity:.4;cursor:default}
.gcard .e{font-size:1.8rem}
.gcard .t{font-weight:800;margin:4px 0 2px}
.gcard .d{font-size:.8rem;color:var(--dim)}
.opt{display:flex;gap:10px;align-items:center;padding:10px 0;font-size:1rem;color:var(--fg);cursor:pointer}
.opt input{width:22px;height:22px;accent-color:var(--acc)}

.secret{background:var(--bg2);border:2px dashed var(--line);border-radius:var(--r);padding:20px;text-align:center;min-height:110px;display:flex;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;user-select:none;-webkit-user-select:none}
.secret .w{font-size:2rem;font-weight:900}
.bigcard{background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:22px;padding:26px 20px;text-align:center;font-size:1.35rem;font-weight:700;margin:14px 0;min-height:140px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px}
.kind{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--acc);color:#fff}
.kind.dare{background:var(--acc2)}
.banner{border-radius:var(--r);padding:14px;text-align:center;font-weight:800;font-size:1.2rem;margin:12px 0;background:var(--card2)}
.banner.win{background:linear-gradient(135deg,var(--ok),#2aa7a0);color:#06231a}
.banner.warn{background:var(--warn);color:#2b1a00}
ol.order{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:6px}
ol.order li{display:flex;align-items:center;gap:8px}
ol.order .n{width:26px;height:26px;border-radius:50%;background:var(--acc2);display:grid;place-items:center;font-weight:800;font-size:.85rem}
.votes{display:flex;flex-direction:column;gap:8px}
.votebtn{display:flex;align-items:center;gap:10px}
.votebtn .cnt{margin-left:auto}
.score{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}
.cheat{margin-top:18px;padding:10px 12px;border-radius:12px;background:#00000055;border:1px dashed #ffffff22;font-size:.8rem;color:#b9bdf0;opacity:.85}
.cheat b{color:#fff}
.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;padding:20px;z-index:10}
.modal .card{width:100%;max-width:380px}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,30px);background:#000d;color:#fff;padding:10px 16px;border-radius:12px;opacity:0;pointer-events:none;transition:.25s;max-width:90vw;text-align:center;z-index:20}
#toast.on{opacity:1;transform:translate(-50%,0)}
.spin{display:inline-block;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.stepper{display:flex;align-items:center;gap:14px}
.stepper .btn{width:48px;padding:0;font-size:1.5rem;line-height:1}
.stepper .val{min-width:64px;text-align:center;font-size:1.3rem;font-weight:800}
.lvl{font-size:.8rem;font-weight:800;padding:3px 10px;border-radius:999px;background:#ffffff18;letter-spacing:.02em}
.lvl-soft{color:#7dffb0}.lvl-medium{color:#ffe27a}.lvl-hard{color:#ffab5e}.lvl-extreme{color:#ff7a8a}
.hint{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:6px 0 4px;font-size:.95rem}
.hint .small{color:var(--warn)}
.setting{margin:10px 0 14px}
.setting .sl{color:var(--dim);font-size:.9rem;margin-bottom:6px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg .btn{min-height:42px;padding:8px 14px;font-size:.95rem}
.opt span{flex:1}

/* i18n + profils */
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.langsw{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.langsw button{appearance:none;border:0;background:transparent;color:var(--dim);font:inherit;font-size:.8rem;font-weight:800;padding:6px 10px;cursor:pointer}
.langsw button.on{background:var(--acc2);color:#fff}
.who{color:var(--acc);font-weight:900}
.tag{font-size:.75rem;color:var(--dim);border:1px solid var(--line);border-radius:8px;padding:1px 6px}
.warnbox{border-color:var(--warn);color:var(--warn);margin:8px 0;font-size:.9rem}
.votes + .btn,.votes + p + .btn{margin-top:10px}

/* interrupteurs */
.opt small{display:block;font-size:.8rem;margin-top:2px;font-weight:400}
.opt{justify-content:space-between}
input.switch{appearance:none;-webkit-appearance:none;flex:none;width:48px;height:28px;border-radius:14px;background:var(--card2);border:1px solid var(--line);position:relative;cursor:pointer;transition:background .15s;accent-color:initial}
input.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s}
input.switch:checked{background:linear-gradient(135deg,var(--acc),var(--acc2));border-color:transparent}
input.switch:checked::after{transform:translateX(20px)}
/* réglages Loup-Garou */
.wwset h4{margin:18px 0 8px;font-size:.85rem;text-transform:uppercase;letter-spacing:.07em;color:var(--dim)}
.wwset .sl{color:var(--dim);font-size:.9rem;margin-bottom:6px}
.chip-btn{min-height:40px;padding:8px 14px;font-size:.9rem}
.wwsum{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:12px 0;font-size:.95rem}
.wwsum.warn{border-color:var(--warn)}
.rolegrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rolecard{position:relative;appearance:none;text-align:left;border:1px solid var(--line);background:var(--bg2);color:var(--fg);border-radius:14px;padding:10px 10px 10px 12px;font:inherit;cursor:pointer;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i n" "d d";gap:2px 8px;align-items:center;transition:transform .08s,border-color .15s,background .15s}
.rolecard:active{transform:scale(.97)}
.rolecard .ri{grid-area:i;font-size:1.5rem}
.rolecard .rn{grid-area:n;font-weight:800;font-size:.95rem;padding-right:18px}
.rolecard .rd{grid-area:d;font-size:.75rem;color:var(--dim);line-height:1.25}
.rolecard .rt{position:absolute;top:8px;right:10px;font-weight:900;color:var(--dim)}
.rolecard.on{border-color:var(--acc2);background:linear-gradient(135deg,rgba(255,93,143,.16),rgba(124,92,255,.22))}
.rolecard.on .rt{color:var(--ok)}
.rolecard.wolves.on{border-color:var(--bad);background:linear-gradient(135deg,rgba(255,92,108,.2),rgba(124,92,255,.12))}
@media (max-width:360px){.rolegrid{grid-template-columns:1fr}}

.rolecard.blocked{opacity:.4;cursor:not-allowed}
.rolecard .rb{grid-area:d;font-size:.72rem;color:var(--dim);font-style:italic}
.wwpresets small{display:block;margin-top:6px}
.setting small.dim{display:block;margin-top:4px}

.theme-chip{appearance:none;border:1px solid var(--line);background:var(--bg2);color:var(--dim);border-radius:999px;padding:8px 12px;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}
.theme-chip.on{color:var(--fg);border-color:var(--acc2);background:linear-gradient(135deg,rgba(255,93,143,.16),rgba(124,92,255,.22))}

/* ---- Poker ---- */
.pcard{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:64px;border-radius:8px;background:#fff;color:#111;font-weight:800;font-size:1.05rem;line-height:1.05;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.pcard.red{color:#d31f3a}.pcard b{font-size:1.1rem}
.pcard.back{background:repeating-linear-gradient(45deg,#3a3f9c,#3a3f9c 6px,#2b2f78 6px,#2b2f78 12px);border:2px solid #fff}
.pcard.empty{background:rgba(255,255,255,.06);box-shadow:none;border:1px dashed var(--line)}
.pcard.sm{width:30px;height:42px;font-size:.78rem;border-radius:6px}.pcard.sm b{font-size:.85rem}
.pcard.lg{width:72px;height:100px;font-size:1.5rem;border-radius:12px}.pcard.lg b{font-size:1.7rem}
.pk-mycards{display:flex;gap:10px;justify-content:center;margin:8px 0}
.pk-mine{text-align:center}
.pk-input{width:100%;min-width:0;font:inherit;font-size:1.1rem;font-weight:700;text-align:center;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);color:var(--fg)}
.pk-actions .row{margin:8px 0}.pk-actions .grow{flex:1}
.pk-result div{margin:2px 0}
.pk-bank summary{cursor:pointer;font-weight:800}
.pk-log{margin:10px 0}
/* ---- Codenames ---- */
.cn-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.cn-col{border-radius:14px;padding:10px;border:1px solid var(--line)}
.cn-col h3{margin:0 0 8px;font-size:.95rem}
.cn-col.red{background:rgba(255,92,108,.12);border-color:rgba(255,92,108,.5)}.cn-col.blue{background:rgba(77,163,255,.12);border-color:rgba(77,163,255,.5)}
.cn-mem{display:flex;align-items:center;gap:6px;padding:4px 0;font-size:.9rem;flex-wrap:wrap}.cn-mem.me .nm{font-weight:800}
.cn-red-on{background:#ff5c6c;color:#2a0308}.cn-blue-on{background:#4da3ff;color:#04182b}
.cn-turn{text-align:center;font-weight:900;padding:10px;border-radius:12px;margin:8px 0}
.cn-turn.red{background:rgba(255,92,108,.25)}.cn-turn.blue{background:rgba(77,163,255,.25)}
.cn-clue{text-align:center;font-size:1.3rem;margin:6px 0}
.cn-score{display:flex;justify-content:space-around;margin:8px 0;font-weight:800}.cn-score .red{color:#ff8d98}.cn-score .blue{color:#7dbcff}
.cn-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:10px 0}
.cn-card{appearance:none;font:inherit;color:#1a1a22;background:#efe6d2;border:2px solid transparent;border-radius:8px;min-height:58px;padding:2px;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;font-weight:800;font-size:clamp(.56rem,2.6vw,.8rem);word-break:break-word;hyphens:auto}
.cn-card:disabled{cursor:default;opacity:1}
.cn-card.spy.red{border-color:#ff5c6c}.cn-card.spy.blue{border-color:#4da3ff}.cn-card.spy.neutral{border-color:#b8a98a}.cn-card.spy.assassin{border-color:#000;background:#5a5a66;color:#fff}
.cn-card.rev.red{background:#ff5c6c;color:#2a0308}.cn-card.rev.blue{background:#4da3ff;color:#04182b}.cn-card.rev.neutral{background:#b8a98a;color:#3a3220}.cn-card.rev.assassin{background:#000;color:#fff}
.cn-card.rev{opacity:.85}
.cn-card.mark{outline:3px solid var(--acc2);transform:scale(1.05)}
.langsw{flex-shrink:0}
.bar{flex-wrap:wrap}
.bar .btn{min-height:40px;padding:8px 12px}

/* ---- Poker : table ---- */
.pk-table{position:relative;width:min(100cqw,calc(100cqh * .8333));max-width:560px;margin:0 auto;aspect-ratio:5/6;container-type:inline-size;font-size:clamp(.66rem,2.5cqw,.86rem)}
.pk-felt{position:absolute;inset:8% 4%;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#1d8a5a 0%,#0f6b45 55%,#0a4a30 100%);border:clamp(6px,2cqw,12px) solid #4a3020;box-shadow:0 0 0 2px #2a1a10,inset 0 0 40px rgba(0,0,0,.55),0 12px 30px rgba(0,0,0,.5)}
.pk-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1.6cqw;z-index:1;width:70%}
.pk-board{display:flex;gap:1.2cqw;justify-content:center}
.pk-table .pcard{width:9.2cqw;height:12.8cqw;font-size:3.2cqw;border-radius:1.4cqw;max-width:52px;max-height:72px}
.pk-table .pcard b{font-size:3.6cqw}
.pk-table .pcard.sm{width:5.6cqw;height:8cqw;font-size:2.4cqw;border-radius:1cqw;max-width:30px;max-height:42px}
.pk-table .pcard.sm b{font-size:2.7cqw}
.pk-table .pcard.back{border-width:1.5px}
.pk-pot{padding:.25em .9em;border-radius:99px;background:rgba(0,0,0,.35);color:#fff;font-size:1.15em;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.pk-s{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.3em;z-index:2;width:26cqw;max-width:150px}
.pk-hole{display:flex;gap:2px;margin-bottom:-.2em}
.pk-pill{position:relative;display:flex;align-items:center;gap:.5em;padding:.4em .7em .4em .45em;border-radius:99px;background:rgba(20,22,52,.92);border:1.5px solid var(--line);max-width:100%;box-shadow:0 3px 10px rgba(0,0,0,.45)}
.pk-pill .av{font-size:1.5em;line-height:1}
.pk-info{min-width:0;line-height:1.15}
.pk-info .nm{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:14cqw}
.pk-info .stk{color:#ffd76a;font-weight:800;font-variant-numeric:tabular-nums}
.pk-s.me .pk-pill{background:linear-gradient(135deg,#3a2f8f,#5b3aa8);border-color:#8f7bff}
.pk-s.turn .pk-pill{border-color:#fff;box-shadow:0 0 0 3px var(--acc2),0 0 18px 4px rgba(124,92,255,.75);animation:pkpulse 1.4s ease-in-out infinite}
.pk-s.off{opacity:.45}
@keyframes pkpulse{50%{box-shadow:0 0 0 3px var(--acc2),0 0 26px 8px rgba(124,92,255,.35)}}
.pk-dealer{position:absolute;right:-.5em;top:-.7em;width:1.7em;height:1.7em;border-radius:50%;background:#fff;color:#111;font-weight:900;font-size:.9em;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.pk-cap{display:flex;flex-wrap:wrap;gap:.3em;justify-content:center;align-items:center;font-size:.92em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);text-align:center}
.pk-cap .tag{font-size:.85em}
.pk-cap .dim{color:#cfd3ff}
.pk-betchip{position:absolute;transform:translate(-50%,-50%);z-index:1;display:flex;align-items:center;gap:.35em;padding:.2em .7em .2em .3em;border-radius:99px;background:rgba(0,0,0,.4);color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
.pk-betchip i{width:1.3em;height:1.3em;border-radius:50%;background:radial-gradient(circle,#ff5d8f 35%,#fff 37%,#fff 45%,#ff5d8f 47%);border:1px solid #fff;display:inline-block}
.pcard.hl{box-shadow:0 0 0 3px #ffd76a,0 0 14px 3px rgba(255,215,106,.7)}
.pk-combo{display:flex;flex-direction:column;align-items:center;margin:6px 0 4px;gap:2px}
.pk-combo b{font-size:1.25rem;color:#ffd76a}

/* ---- Poker : écran sans défilement ---- */
body.pk-mode{overflow:hidden;overscroll-behavior:none}
body.pk-mode #app{height:100dvh;display:flex;flex-direction:column;padding:8px 10px calc(8px + env(safe-area-inset-bottom));overflow:hidden}
body.pk-mode #app>.bar{flex:none;margin:0 0 4px}
.pk-screen{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}
.pk-topline{flex:none;display:flex;align-items:center;gap:8px}
.pk-topline .grow{flex:1;text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-mini{min-height:34px!important;padding:4px 10px!important;font-size:.85rem;border-radius:10px}
.pk-tablewrap{flex:1;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center}
.pk-dock{flex:none;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:8px 10px;display:flex;flex-direction:column;gap:8px}
.pk-status{text-align:center;font-size:.95rem}
.pk-mine2{display:flex;align-items:center;gap:12px;justify-content:center}
.pk-mycards{display:flex;gap:8px;margin:0}
.pk-mymeta{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.pk-combo-name{font-size:1.1rem;color:#ffd76a}
.pcard.md{width:52px;height:72px;font-size:1.2rem;border-radius:9px}.pcard.md b{font-size:1.35rem}
.pk-acts,.pk-raise .row,.pk-flow{margin:0;gap:8px}
.pk-acts .btn,.pk-raise .btn{min-height:50px}
.pk-raise{display:flex;flex-direction:column;gap:6px}
.pk-raise .chip-btn{min-height:38px;padding:6px 8px}
.pk-raise .pk-input{padding:8px}
.pk-flow{align-items:center}
.pk-result{margin:0;padding:8px 12px;font-size:.92rem;flex:none}
.pk-modal .pk-menu{max-height:85dvh;overflow:auto;max-width:440px}
.pk-menu .pk-bank,.pk-menu .pk-log{margin:0 0 12px}
@media (max-height:640px){.pk-dock{gap:4px;padding:6px 8px}.pcard.md{width:42px;height:58px}}
body.pk-mode #app>.bar{flex-wrap:nowrap;gap:6px}
body.pk-mode #app>.bar .dim.small{display:none}
body.pk-mode #app>.bar .btn{min-height:36px;padding:4px 10px;font-size:.9rem}
body.pk-mode #app>.bar .code{padding:4px 8px}

/* ---- Petites animations ---- */
.btn,.theme-chip,.chip-btn{position:relative;overflow:hidden}
.fx-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.32);transform:scale(0);animation:fx-rip .55s ease-out forwards;pointer-events:none}
@keyframes fx-rip{to{transform:scale(1);opacity:0}}
@keyframes fx-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#app.fx-enter{animation:fx-enter .28s ease-out}
@keyframes fx-flip{from{opacity:0;transform:perspective(700px) rotateX(-35deg) translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.fx-flip{animation:fx-flip .4s cubic-bezier(.2,.8,.2,1)}
@keyframes fx-deal{from{opacity:0;transform:translateY(-44px) rotate(-14deg) scale(.7)}to{opacity:1;transform:none}}
.fx-deal{animation:fx-deal .4s cubic-bezier(.2,.9,.25,1) both}
@keyframes fx-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.4)}60%{transform:translate(-50%,-50%) scale(1.15)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.fx-pop{animation:fx-pop .38s ease-out}
.pk-pot b{display:inline-block}
@keyframes fx-bump{40%{transform:scale(1.3);color:#ffd76a}}
.fx-bump{animation:fx-bump .4s ease-out}
@keyframes fx-win{0%{transform:scale(.6);opacity:0}50%{transform:scale(1.35)}100%{transform:scale(1);opacity:1}}
.fx-win{display:inline-block;animation:fx-win .7s ease-out}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
.modal.fx-in{animation:fx-fade .18s ease-out}
.modal.fx-in .card{animation:fx-enter .24s ease-out}
.fx-conf{position:fixed;z-index:60;pointer-events:none;animation:fx-conf .95s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes fx-conf{0%{transform:translate(0,0) scale(.4) rotate(0);opacity:1}80%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--rot));opacity:0}}
@keyframes fx-wig{20%{transform:rotate(-5deg) scale(1.06)}40%{transform:rotate(4deg)}60%{transform:rotate(-2deg)}100%{transform:none}}
#logo{cursor:pointer}.fx-wiggle{animation:fx-wig .5s ease-out}

.pk-cheat{margin:4px 0 0!important;padding:4px 8px!important;font-size:.72rem!important;line-height:1.3;flex:none}
.cheat .cr{color:#ff8d98}