/* UNO table, settings, modals and animations. */
.c-red{--uno:#d52b49}.c-yellow{--uno:#e8b82d}.c-green{--uno:#178452}.c-blue{--uno:#2063c5}
.uno-rules{margin:10px 0 0;padding-left:22px;line-height:1.9;color:#5f5377}
.uno-table .players{gap:14px}
.uno-seat{min-width:118px;transition:transform .25s,box-shadow .25s}
.uno-seat.active{transform:translateY(-4px);animation:uno-glow 1.6s ease-in-out infinite}
.uno-backs{display:flex;justify-content:center;height:30px;margin:8px auto 0;padding-left:10px}
.uno-backs i{width:20px;height:28px;margin-left:-10px;border-radius:4px;border:2px solid #fff;background:radial-gradient(ellipse at center,#ffd336 0 28%,transparent 30%),linear-gradient(135deg,#2a2440,#433a6b);box-shadow:0 1px 3px #2421311f}
.uno-flag{color:#fff;background:#d52b49;border-radius:10px;padding:1px 7px;font-size:11px;animation:uno-pop .5s cubic-bezier(.3,1.6,.5,1) both}
.uno-board{display:flex;align-items:center;justify-content:center;gap:clamp(18px,5vw,48px);flex-wrap:wrap;position:relative;padding:8px 0}
.uno-dir{font-size:46px;line-height:1;color:#594bed;opacity:.5;animation:uno-spin 6s linear infinite}
.uno-dir.ccw{animation-direction:reverse}
.uno-deck{position:relative;width:96px;height:134px;padding:0;border-radius:11px;background:none;box-shadow:none}
.uno-deck .uno-back{position:absolute;inset:0;border-radius:10px;border:3px solid #fff;background:radial-gradient(ellipse 60% 38% at 50% 50%,#d52b49 0 96%,transparent 100%),linear-gradient(135deg,#1f1a33,#3d3466);box-shadow:0 3px 0 #2421312b,0 9px 16px #27213b26}
.uno-deck .uno-back:nth-child(2){transform:translate(-3px,-3px)}.uno-deck .uno-back:nth-child(3){transform:translate(-6px,-6px)}
.uno-deck .uno-back:nth-child(3):after{content:'UNO';position:absolute;inset:0;display:grid;place-items:center;transform:rotate(-18deg);font:italic 900 24px/1 Arial,sans-serif;color:#ffd336;text-shadow:2px 2px 0 #2a2440}
.uno-deck em{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-weight:700;font-size:14px;color:#594bed}
.uno-deck:not(:disabled){cursor:pointer;animation:uno-bob 1.8s ease-in-out infinite}
.uno-deck:hover:not(:disabled){background:none;box-shadow:none;transform:translateY(-6px) rotate(-2deg)}
.uno-deck:disabled{opacity:1}.uno-deck:disabled em{color:#8a819d}
.uno-deck.pulled .uno-back:nth-child(3){animation:uno-pull .35s ease-in forwards}
.uno-pile{position:relative;padding:10px;border-radius:20px;background:radial-gradient(circle,color-mix(in srgb,var(--uno) 35%,transparent) 0,transparent 70%);transition:background .4s}
.uno-pile .playing-card{width:112px;height:157px;margin:0;transform:rotate(-4deg);box-shadow:0 0 0 4px #fff,0 0 0 8px var(--uno),0 12px 26px #27213b40;transition:box-shadow .4s}
.uno-pile .playing-card.enter{animation:uno-land .5s cubic-bezier(.2,1.4,.4,1) backwards}
.uno-stack{position:absolute;right:-14px;top:-12px;background:#d52b49;color:#fff;font:900 22px/1 Arial,sans-serif;padding:10px 12px;border-radius:30px;border:3px solid #fff;box-shadow:0 6px 14px #d52b4955;animation:uno-throb .9s ease-in-out infinite}
.uno-color{display:flex;align-items:center;gap:8px;font-weight:800;color:#3b3352;background:#fff;border-radius:30px;padding:8px 16px 8px 8px;box-shadow:0 3px 0 #d9d1e9}
.uno-color span{width:24px;height:24px;border-radius:50%;background:var(--uno);box-shadow:0 0 0 3px color-mix(in srgb,var(--uno) 30%,transparent);animation:uno-throb 1.6s ease-in-out infinite}
.uno-turn{font-weight:700;margin:26px 0 0}.uno-turn.mine{color:#594bed;font-size:20px}
.uno-hand{gap:0;padding-top:34px}
.uno-hand .playing-card{margin:5px -8px;transition:transform .2s cubic-bezier(.3,1.4,.5,1),box-shadow .2s,filter .2s,margin .2s}
.uno-hand .playing-card:hover{z-index:2}
.uno-hand.my-turn .playing-card.playable{transform:translateY(-10px);box-shadow:0 0 0 3px #594bed,0 14px 22px #594bed40}
.uno-hand.my-turn .playing-card.playable:hover:not(:disabled){transform:translateY(-24px) scale(1.06)}
.uno-hand.my-turn .playing-card.blocked{opacity:.55}
.uno-hand .playing-card.dealt{animation:uno-deal .45s cubic-bezier(.2,1.2,.4,1) calc(var(--i,0)*70ms) backwards}
.uno-hand .playing-card.shake{animation:uno-shake .4s}
.uno-hand .playing-card.gone{visibility:hidden}
.uno-ghost{position:fixed;z-index:60;margin:0;pointer-events:none}
.uno-actions{justify-content:center;margin-top:10px}
.uno-call{background:linear-gradient(135deg,#ffd336,#ff8a3d);color:#2a2440;font:italic 900 22px/1 Arial,sans-serif;padding:14px 30px;border-radius:40px;box-shadow:0 5px 0 #c86a2a;animation:uno-throb 1.1s ease-in-out infinite}
.uno-call:hover:not(:disabled){background:linear-gradient(135deg,#ffe066,#ff9a52)}
.uno-call.on{background:#d52b49;color:#fff;box-shadow:0 5px 0 #8f1830,0 0 0 6px #d52b4933;animation:none;transform:scale(1.06)}
.uno-call.small-call{font-size:17px;padding:10px 22px;margin:4px 0 14px}
.uno-result h2{font-size:32px;animation:uno-pop .6s cubic-bezier(.3,1.6,.5,1) both}
/* Host settings */
.uno-settings h2{margin:0}
.uno-presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:20px 0}
.uno-preset{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:#fff;color:#3b3352;border:2px solid #e3def2;border-radius:16px;padding:14px 18px}
.uno-preset span{font-size:13px;color:#776f8b;font-weight:400}
.uno-preset.on{border-color:#594bed;background:#f3f0ff;box-shadow:0 0 0 4px #594bed1f}
.uno-preset:hover:not(:disabled){background:#f6f4ff;color:#3b3352}
.uno-field{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--line)}
.uno-field>span{font-weight:700}
.uno-chips{display:flex;gap:8px;flex-wrap:wrap}
.uno-chip{background:#fff;color:#4d426e;border:1px solid #dcd9ef;padding:9px 16px}
.uno-chip.on{background:#594bed;color:#fff;border-color:#594bed}
.uno-toggles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.uno-toggle{display:flex;align-items:flex-start;gap:14px;text-align:left;background:#fff;color:#3b3352;border:1px solid #e3def2;border-radius:14px;padding:14px 16px}
.uno-toggle:hover:not(:disabled){background:#f6f4ff;color:#3b3352}
.uno-toggle small{display:block;color:#776f8b;font-weight:400;line-height:1.5;margin-top:3px}
.uno-switch{flex:0 0 auto;position:relative;width:42px;height:24px;border-radius:20px;background:#d8d3e8;transition:background .2s;margin-top:2px}
.uno-switch:after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.uno-toggle[aria-checked=true] .uno-switch{background:#594bed}.uno-toggle[aria-checked=true] .uno-switch:after{transform:translateX(18px)}
.uno-settings button:disabled{opacity:.75;cursor:default}
/* Modals */
.uno-modal-wrap{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:#28223b80;backdrop-filter:blur(6px);animation:uno-fade .2s ease both}
.uno-modal-wrap.out{animation:uno-fade .18s ease reverse both}.uno-modal-wrap.out .uno-modal{animation:uno-modal-out .18s ease both}
.uno-modal{width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:26px;padding:28px 24px 22px;text-align:center;box-shadow:0 30px 80px #31284255;animation:uno-modal-in .35s cubic-bezier(.2,1.4,.4,1) both}
.uno-modal h2{margin:4px 0 6px}.uno-modal p{margin:0 0 14px}
.uno-cancel{margin-top:16px}
.uno-wheel{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(300px,100%);aspect-ratio:1;margin:8px auto 0}
.uno-swatch{background:var(--uno);color:#fff;font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:10px;box-shadow:inset 0 -6px 0 #0002;transition:transform .2s cubic-bezier(.3,1.5,.5,1),filter .2s,box-shadow .2s}
.uno-swatch.c-red{border-radius:100% 12px 12px 12px}
.uno-swatch.c-yellow{border-radius:12px 100% 12px 12px;color:#3a2f0e}
.uno-swatch.c-green{border-radius:12px 12px 12px 100%}
.uno-swatch.c-blue{border-radius:12px 12px 100% 12px}
.uno-swatch:hover:not(:disabled),.uno-swatch:focus-visible{background:var(--uno);filter:brightness(1.08);transform:scale(1.06);box-shadow:inset 0 -6px 0 #0002,0 10px 24px color-mix(in srgb,var(--uno) 50%,transparent)}
.uno-wheel .uno-swatch{animation:uno-pop .4s cubic-bezier(.3,1.6,.5,1) both}
.uno-wheel .uno-swatch:nth-child(2){animation-delay:.05s}.uno-wheel .uno-swatch:nth-child(3){animation-delay:.1s}.uno-wheel .uno-swatch:nth-child(4){animation-delay:.15s}
.uno-wheel-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.uno-wheel-card .playing-card{width:70px;height:98px;margin:0;box-shadow:0 0 0 5px #fff,0 10px 24px #27213b55;animation:uno-wobble 2.4s ease-in-out infinite}
.uno-kicker{font-weight:700;color:#594bed;text-transform:uppercase;letter-spacing:1px}
.uno-drawn{perspective:800px;margin:6px 0 12px}
.uno-drawn .playing-card{width:120px;height:168px;animation:uno-flip .7s cubic-bezier(.3,1.3,.5,1) both}
.uno-modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.uno-modal-actions button{min-width:150px}
.uno-targets{display:grid;gap:10px}
.uno-targets button{display:flex;align-items:center;gap:6px;text-align:left;border-radius:16px;padding:12px 16px}
.uno-targets button span:last-child{margin-left:auto;color:#776f8b}
/* Event banner and confetti */
.uno-banner{position:fixed;left:50%;top:38%;z-index:55;transform:translate(-50%,-50%);pointer-events:none;background:#2a2440;color:#fff;font-weight:900;font-size:clamp(20px,4vw,30px);padding:16px 30px;border-radius:40px;box-shadow:0 18px 50px #2a244055;white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis;animation:uno-banner 1.5s cubic-bezier(.2,1.3,.4,1) both}
.uno-banner.hit{background:#d52b49}.uno-banner.swap{background:#2063c5}.uno-banner.mine{background:#594bed}
.uno-banner.uno{background:linear-gradient(135deg,#ffd336,#ff8a3d);color:#2a2440;font-style:italic;font-size:clamp(30px,7vw,52px);text-shadow:3px 3px 0 #fff8}
.uno-confetti{position:fixed;inset:0;pointer-events:none;z-index:54;overflow:hidden}
.uno-confetti i{position:absolute;top:-20px;left:var(--x);width:10px;height:16px;border-radius:2px;background:var(--c);animation:uno-fall 3.2s cubic-bezier(.3,.6,.6,1) var(--d) both}
@keyframes uno-deal{from{opacity:0;transform:translate(0,-140px) rotate(-25deg) scale(.6)}}
@keyframes uno-land{from{opacity:0;transform:translateY(-70px) rotate(-30deg) scale(1.35)}60%{opacity:1}}
@keyframes uno-shake{0%,100%{translate:0}20%,60%{translate:-7px}40%,80%{translate:7px}}
@keyframes uno-pull{to{transform:translate(40px,120px) rotate(18deg);opacity:0}}
@keyframes uno-spin{to{rotate:360deg}}
@keyframes uno-bob{0%,100%{translate:0}50%{translate:0 -5px}}
@keyframes uno-throb{0%,100%{scale:1}50%{scale:1.08}}
@keyframes uno-pop{from{opacity:0;scale:.4}}
@keyframes uno-glow{0%,100%{box-shadow:0 3px 0 #d9d1e9,0 0 0 0 #594bed44}50%{box-shadow:0 3px 0 #d9d1e9,0 0 0 10px #594bed00}}
@keyframes uno-fade{from{opacity:0}}
@keyframes uno-modal-in{from{opacity:0;transform:translateY(30px) scale(.85)}}
@keyframes uno-modal-out{to{opacity:0;transform:translateY(16px) scale(.92)}}
@keyframes uno-wobble{0%,100%{rotate:-6deg}50%{rotate:6deg}}
@keyframes uno-flip{from{transform:rotateY(180deg) scale(.6);opacity:0}50%{opacity:1}}
@keyframes uno-banner{0%{opacity:0;scale:.5}15%{opacity:1;scale:1.08}25%{scale:1}80%{opacity:1}100%{opacity:0;translate:0 -30px}}
@keyframes uno-fall{to{transform:translateY(105vh) rotate(var(--r))}}
@media(max-width:650px){.uno-pile .playing-card{width:92px;height:129px}.uno-deck{width:80px;height:112px}.uno-dir{font-size:32px}.uno-hand .playing-card{width:74px;height:104px;margin:4px -6px}.uno-seat{min-width:0}}
@media(prefers-reduced-motion:reduce){.uno-table *,.uno-hand *,.uno-modal-wrap,.uno-modal-wrap *,.uno-banner,.uno-settings *{animation:none!important;transition:none!important}}
/* Bot controls, shared by every table */
.bot-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:12px;position:relative;z-index:3}
.auto-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;margin-top:12px;position:relative;z-index:3}
.auto-start{background:#fff;color:#3b3352;border:1px solid #dcd9ef;padding:9px 18px}
.auto-start:hover:not(:disabled){background:#f0edff;color:#3b3352}
.auto-stop{background:#d52b49;color:#fff;padding:9px 18px;animation:uno-throb 1.6s ease-in-out infinite}
.auto-stop:hover:not(:disabled){background:#b8203a}
.auto-note{font-size:12px;color:#776f8b}
.auto-bar.on .auto-note{color:#b8203a;font-weight:700}
.auto-list{width:100%;text-align:center;font-size:12px;color:#594bed;font-weight:700}
.bot-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#3b3352;border:1px solid #e3def2;border-radius:20px;padding:5px 6px 5px 12px;font-weight:700;font-size:14px;box-shadow:0 2px 0 #0001;animation:uno-pop .35s cubic-bezier(.3,1.6,.5,1) both}
.bot-chip em{font-style:normal;font-size:11px;border-radius:10px;padding:1px 8px;color:#fff;background:#8a819d}
.bot-chip.lv-easy em{background:#19835f}.bot-chip.lv-medium em{background:#2063c5}.bot-chip.lv-hard em{background:#d52b49}
.bot-x{width:24px;height:24px;padding:0;border-radius:50%;background:#f0edf7;color:#6b6380;font-size:16px;line-height:1}
.bot-x:hover:not(:disabled){background:#d52b49;color:#fff;transform:none;box-shadow:none}
.bot-add{background:#2a2440;color:#fff;padding:9px 18px}
.bot-add:hover:not(:disabled){background:#3d3466}
.bot-note{width:100%;text-align:center;font-size:12px;color:#8a819d}
.pd-table~.bot-bar .bot-note,.pk-wrap~.bot-bar .bot-note{color:#776f8b}
.bot-levels{display:grid;gap:10px;margin:12px 0}
.bot-level{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;text-align:left;align-items:center;background:#fff;color:#2a2440;border:2px solid #e3def2;border-radius:18px;padding:12px 16px;animation:uno-pop .4s cubic-bezier(.3,1.6,.5,1) both}
.bot-level:nth-child(2){animation-delay:.06s}.bot-level:nth-child(3){animation-delay:.12s}
.bot-level span{grid-row:1/3;font-size:30px}.bot-level strong{font-size:19px}.bot-level small{color:#776f8b;font-weight:400;line-height:1.5}
.bot-level.lv-easy:hover:not(:disabled){background:#e7f6ef;border-color:#19835f;color:#2a2440}
.bot-level.lv-medium:hover:not(:disabled){background:#eaf2ff;border-color:#2063c5;color:#2a2440}
.bot-level.lv-hard:hover:not(:disabled){background:#ffeef1;border-color:#d52b49;color:#2a2440}