.uno-entry>p,.uno-entry>small{grid-column:1/-1}
.uno-layout{display:grid;grid-template-columns:minmax(230px,290px) 1fr;min-height:570px}
.uno-layout>aside{padding:18px;border-right:1px solid var(--line);display:grid;align-content:start;gap:14px}
.uno-layout>aside>header{display:flex;justify-content:space-between}
.uno-layout>aside>small{color:var(--muted);font-size:8px}
.uno-players{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.uno-players li{padding:9px;border:1px solid var(--line);border-left:4px solid #888;border-radius:11px;background:var(--soft);display:grid;grid-template-columns:25px 1fr auto;align-items:center;gap:5px}
.uno-players li.p0{border-left-color:#e14949}
.uno-players li.p1{border-left-color:#e4b93e}
.uno-players li.p2{border-left-color:#3b9661}
.uno-players li.p3{border-left-color:#347fc4}
.uno-players li.me{box-shadow:inset 0 0 0 1px var(--accent)}
.uno-players li.turn{background:#efd25d22}
.uno-players li>i{font-style:normal;font-size:8px}
.uno-players li strong{font-size:10px}
.uno-players li b{font-size:8px}
.uno-players li span{grid-column:2/4;color:#b52b37;font-size:8px;font-weight:950}
.uno-host{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.uno-layout>main{position:relative;min-width:0;padding:22px;background:radial-gradient(circle,#323338,#131318 76%);color:#fff;display:grid;place-items:center}
.uno-table{width:100%;display:grid;justify-items:center;gap:22px}
.uno-table>header{display:flex;align-items:center;justify-content:center;gap:12px}
.uno-table>header>span{font-size:28px}
.uno-table>header>strong{font-size:10px}
.uno-current{padding:7px 13px;border-radius:99px;color:#fff;font-size:9px;font-weight:900}
.uno-piles{display:flex;align-items:center;gap:24px}
.uno-deck{width:82px;aspect-ratio:.68;border:4px solid #fff;border-radius:13px;background:#19191d;color:#fff;display:grid;place-items:center;cursor:pointer}
.uno-deck b{font:900 25px Georgia,serif;transform:rotate(-12deg)}
.uno-deck small{font-size:6px}
.uno-hand{width:100%;min-height:145px;padding:15px 5px;display:flex;justify-content:center;align-items:flex-end;gap:5px;overflow-x:auto}
.uno-hand-head{width:100%;margin-bottom:-19px;padding:0 8px;display:flex;align-items:center;justify-content:space-between;gap:10px}.uno-hand-head>strong{font-size:9px;color:#d7d7dc;text-transform:uppercase;letter-spacing:.08em}.uno-hand-head>button{padding:7px 11px;border:1px solid #ffffff55;border-radius:99px;background:#09090ca8;color:#fff;font-size:8px;font-weight:850;cursor:pointer}.uno-hand-head>button:hover,.uno-hand-head>button:focus-visible{border-color:#efd25d;background:#efd25d;color:#1d190b;outline:0}.uno-hand-head>button span{font-size:11px}
.uno-card{position:relative;width:72px;aspect-ratio:.68;padding:5px;border:4px solid #fff;border-radius:13px;color:#fff;box-shadow:0 7px 13px #0006;display:grid;place-items:center;flex:0 0 auto}
.uno-card>i{position:absolute;left:5px;top:4px;font-style:normal;font-size:8px}
.uno-card>strong{font:900 24px/1 sans-serif;transform:rotate(-10deg);text-shadow:0 2px #0003}
.uno-card>small{position:absolute;right:5px;bottom:4px;font-weight:900}
.uno-card.playable{cursor:pointer;transition:transform .15s}
.uno-card.playable:hover,.uno-card.playable:focus-visible{transform:translateY(-13px);outline:3px solid #efd25d}
.c-R{background:#d83c3c}
.c-Y{background:#d7aa21;color:#231d0d}
.c-G{background:#328c57}
.c-B{background:#327bc0}
.c-W{background:conic-gradient(#d83c3c 0 25%,#d7aa21 0 50%,#328c57 0 75%,#327bc0 0)}
.uno-color-choice{position:absolute;inset:0;background:#0c0c0edb;display:grid;place-content:center;justify-items:center;gap:14px;z-index:8}
.uno-color-choice>strong{font:700 19px Georgia,serif}
.uno-color-choice>div{display:flex;gap:8px}
.uno-color-choice>div button{width:72px;height:72px;border:4px solid #fff;border-radius:50%;color:#fff;font-size:8px;font-weight:900;cursor:pointer}
.uno-color-choice>button{border:0;background:transparent;color:#fff;font-size:28px}
.uno-wait{text-align:center}
.uno-wait>strong{font:900 clamp(50px,9vw,100px) Georgia,serif;color:#efd25d}
.uno-wait h3{font:700 28px Georgia,serif}
.uno-feedback{min-height:17px;margin:10px 18px;color:var(--muted);font-size:9px}
.uno-turn-banner{width:min(100%,620px);padding:10px 15px;border:1px solid #ffffff2b;border-radius:14px;background:#09090cb8;display:flex;align-items:center;justify-content:space-between;gap:12px}
.uno-turn-banner strong{font-size:12px;color:#fff}.uno-turn-banner span{font-size:8px;color:#d6d6db;text-align:right}
.uno-table.is-my-turn .uno-turn-banner{border-color:#efd25d;background:#efd25d;box-shadow:0 0 0 4px #efd25d22,0 0 30px #efd25d55;animation:unoTurnPulse 1.35s ease-in-out infinite}.uno-table.is-my-turn .uno-turn-banner strong,.uno-table.is-my-turn .uno-turn-banner span{color:#1d190b}
.uno-direction{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid #ffffff2b;border-radius:12px;background:#09090c99}.uno-direction>span{font-size:29px;line-height:1;animation:unoDirection 3.2s linear infinite}.uno-direction>div{display:grid;gap:2px}.uno-direction b{font-size:9px}.uno-direction small{font-size:7px;color:#bbb}
.uno-players li.turn{outline:2px solid #efd25d;animation:unoPlayerTurn 1.25s ease-in-out infinite}.uno-players li.vulnerable{border-color:#ff4a5d;background:#ff314b20;box-shadow:0 0 18px #ff314b44}.uno-players li.vulnerable span{color:#ff5365;animation:unoWarning .65s steps(2,end) infinite}
.uno-call-actions{width:min(100%,620px);display:grid;gap:8px}.uno-call-actions button{min-height:62px;padding:10px 18px;border:3px solid #fff;border-radius:17px;color:#fff;box-shadow:0 8px 0 #0005,0 0 30px currentColor;cursor:pointer;display:grid;place-items:center;animation:unoCall .65s ease-in-out infinite alternate}.uno-call-actions b{font:900 clamp(21px,4vw,34px)/1 Georgia,serif}.uno-call-actions small{font-size:8px}.uno-call{background:#d83c3c}.uno-counter{background:linear-gradient(115deg,#6d1c86,#d52f4b,#d7aa21);background-size:200% 200%;animation:unoCall .65s ease-in-out infinite alternate,unoCounterColor 1.2s linear infinite!important}
.uno-special-effect{position:absolute;z-index:7;inset:50% auto auto 50%;width:min(88%,500px);padding:22px;border:4px solid #fff;border-radius:22px;background:#151519ee;color:#fff;text-align:center;box-shadow:0 20px 70px #000;transform:translate(-50%,-50%);pointer-events:none;display:grid;gap:8px;animation:unoEffectIn 1.8s both}.uno-special-effect strong{font:900 clamp(38px,9vw,82px)/1 Georgia,serif;color:#efd25d}.uno-special-effect span{font-size:10px}.uno-special-effect.effect-R strong{animation:unoReverse .7s ease-in-out}.uno-special-effect.effect-S{animation:unoSkip 1.8s both}.uno-special-effect.effect-D2{animation:unoShake 1.8s both}.uno-special-effect.effect-W4{background:conic-gradient(#d83c3cee,#d7aa21ee,#328c57ee,#327bc0ee,#d83c3cee);animation:unoWild 1.8s both}.uno-special-effect.effect-counter{background:#d32644f2;animation:unoCounterSlam 1.8s both}.uno-special-effect.effect-counter strong{color:#fff;font-size:clamp(28px,7vw,64px)}
@keyframes unoTurnPulse{50%{transform:scale(1.025);box-shadow:0 0 0 7px #efd25d19,0 0 42px #efd25d88}}@keyframes unoDirection{to{transform:rotate(360deg)}}@keyframes unoPlayerTurn{50%{transform:translateX(3px)}}@keyframes unoWarning{50%{opacity:.35}}@keyframes unoCall{to{transform:translateY(-4px) scale(1.015)}}@keyframes unoCounterColor{50%{background-position:100% 50%}}@keyframes unoEffectIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-9deg)}15%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}@keyframes unoReverse{to{transform:rotate(-360deg)}}@keyframes unoSkip{0%{opacity:0;transform:translate(-130%,-50%) rotate(-15deg)}18%,78%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(70%,-50%) rotate(12deg)}}@keyframes unoShake{0%{opacity:0}14%,75%{opacity:1}20%,30%,40%{transform:translate(calc(-50% - 12px),-50%)}25%,35%,45%{transform:translate(calc(-50% + 12px),-50%)}100%{opacity:0}}@keyframes unoWild{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}18%,78%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(270deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2) rotate(540deg)}}@keyframes unoCounterSlam{0%{opacity:0;transform:translate(-50%,-180%) scale(1.6) rotate(-8deg)}17%{opacity:1;transform:translate(-50%,-50%) scale(.9) rotate(3deg)}25%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}
.uno-celebrate{position:fixed;z-index:5000;inset:0;pointer-events:none;overflow:hidden}
.uno-celebrate>strong{position:absolute;z-index:2;left:50%;top:22%;padding:18px 30px;border:5px solid #fff;border-radius:20px;background:#17171b;color:#efd25d;font:900 clamp(48px,11vw,110px) Georgia,serif;transform:translateX(-50%) rotate(-5deg);animation:unoPop .6s both}
.uno-celebrate>i{position:absolute;left:calc(var(--x)*1%);top:-20px;width:16px;height:25px;border:2px solid #fff;border-radius:4px;animation:unoFall 2.3s var(--d) ease-in both}
@keyframes unoPop{from{opacity:0;transform:translateX(-50%) scale(.3) rotate(20deg)}
}
@keyframes unoFall{to{transform:translateY(110vh) rotate(720deg)}
}
html[data-theme="dark"] .uno-players li{background:#211a1d}
@media(max-width:800px){.uno-layout{grid-template-columns:1fr}
.uno-layout>aside{border-right:0;border-bottom:1px solid var(--line)}
.uno-layout>main{min-height:590px;padding:12px 5px}
.uno-table{gap:14px}
.uno-turn-banner{align-items:flex-start;flex-direction:column}
.uno-turn-banner span{text-align:left}
.uno-direction>span{font-size:24px}
.uno-card{width:60px}
.uno-hand{justify-content:flex-start}
.uno-color-choice>div button{width:58px;height:58px}
.uno-call-actions{padding:0 6px}
.uno-special-effect{padding:18px 12px}
}
@media(prefers-reduced-motion:reduce){.uno-card,.uno-celebrate>*,.uno-turn-banner,.uno-direction>span,.uno-players li,.uno-call-actions button,.uno-special-effect,.uno-special-effect strong{animation:none!important;transition:none!important}
}