[hidden]{display:none!important}
.solo-setup{max-width:680px;margin:25px auto 55px;padding:clamp(24px,5vw,48px);border:1px solid #cbd8c1;border-radius:22px;background:#e8eddf}
.solo-setup h2{font-size:32px;margin:10px 0}.solo-setup p{line-height:1.6;color:#60715b}.solo-setup .rule-option{gap:20px}
.game-menu-button{position:fixed;top:max(14px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:100;border:1px solid #9db299;border-radius:24px;background:#f7f8eef2;color:#173f39;padding:10px 18px;font:inherit;font-weight:700;box-shadow:0 3px 12px #173f3914}
.game-menu{max-height:calc(100dvh - 32px);overflow:auto;width:min(440px,calc(100vw - 32px))}.game-menu::backdrop{background:#102e28a6;animation:menu-backdrop .22s ease-out}.game-menu .room-toolbar{display:flex;flex-direction:column;align-items:stretch;gap:12px;border-top:1px solid #ced8c4;padding-top:20px;margin-top:20px}.game-menu .room-toolbar>*{margin:0}.game-menu .secondary{width:100%}
@keyframes menu-backdrop{from{opacity:0}to{opacity:1}}
html:has(body.is-playing){overflow:hidden;overscroll-behavior:none}
body.is-playing{margin:0;width:100%;height:100vh;height:100dvh;overflow:hidden;--hand-height:clamp(58px,17dvh,150px);--card-height:clamp(54px,16dvh,127px);--card-width:calc(var(--card-height)*.677)}
body.is-playing>.topbar,body.is-playing main>.game-heading,body.is-playing main>footer,body.is-playing main>.fan-note{display:none}
body.is-playing main{width:100%;max-width:none;margin:0;padding:0;height:100%;}
body.is-playing .game{width:100%;height:100%;min-height:0;margin:0;border:0;border-radius:0;box-shadow:none;}
body.is-playing .table-topline{top:max(20px,env(safe-area-inset-top));left:22px;right:138px;z-index:3;pointer-events:none}
body.is-playing .felt{left:17%;width:66%;top:23%;height:44%;border-width:clamp(4px,.8dvh,8px)}
body.is-playing .piles{left:50%;top:50%;transform:translate(-50%,-50%);gap:0}
body.is-playing #discard{width:var(--card-width);height:var(--card-height)}
body.is-playing #discard .card,body.is-playing .hand .card{width:var(--card-width);height:var(--card-height);border-width:clamp(2px,.5dvh,4px)}
body.is-playing .card .value{font-size:calc(var(--card-height)*.4)}
body.is-playing .card .corner{font-size:calc(var(--card-height)*.13)}
body.is-playing .card .wild-wheel{width:calc(var(--card-width)*.5);height:calc(var(--card-height)*.5)}
body.is-playing .card .wild-plus{font-size:calc(var(--card-height)*.25)}
body.is-playing .current-color{bottom:7%;font-size:clamp(11px,1.8dvh,15px);gap:7px;flex-wrap:wrap}
body.is-playing .table-brand{top:9%;font-size:clamp(24px,5dvh,48px)}
body.is-playing .north,body.is-playing .north-left,body.is-playing .north-right{top:7%;right:auto;left:50%;transform:translateX(-50%)}
body.is-playing .north-left{left:43%}body.is-playing .north-right{left:68%}
body.is-playing .west,body.is-playing .east{top:41%;width:15%;transform:translateY(-15%)}
body.is-playing .west{left:1%}body.is-playing .east{right:1%}
body.is-playing .dealer-station{left:5%;top:9%;gap:clamp(12px,2vw,30px)}
body.is-playing .dealer-character{width:clamp(48px,13dvh,125px)}
body.is-playing .dealer-deck .card{width:calc(var(--card-width)*.85);height:calc(var(--card-height)*.85)}
body.is-playing .dealer-deck .back-oval b{font-size:calc(var(--card-height)*.22)}
body.is-playing .dealer-tag,body.is-playing .pile-caption{font-size:clamp(9px,1.45dvh,12px);letter-spacing:.6px}
body.is-playing .your-area{left:3%;right:3%;bottom:max(47px,calc(env(safe-area-inset-bottom) + 40px));height:var(--hand-height);display:flex;gap:16px;align-items:center}
body.is-playing .hand{width:auto;flex:1;height:calc(var(--hand-height) + 12px);padding:22px 6px 10px;align-items:flex-end;}
body.is-playing .your-info,body.is-playing .uno-area{position:static;flex-shrink:0}
body.is-playing .turn-notice{top:auto;bottom:calc(var(--hand-height) + 65px);padding:0 12px;font-size:clamp(12px,1.9dvh,16px)}
body.is-playing .table-bottom{height:35px;padding:0 20px;padding-bottom:env(safe-area-inset-bottom);box-sizing:content-box}
body.is-playing #last-action{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.is-playing .uno-reaction{position:fixed;top:18%;left:50%;transform:translateX(-50%);width:min(520px,calc(100% - 24px));margin:0;z-index:110;animation:none}
body.is-playing .connection-message{position:fixed;top:65px;left:50%;transform:translateX(-50%);max-width:80%;z-index:120;margin:0}
@media(max-height:600px) and (min-width:701px){body.is-playing .mini-hand{display:none}body.is-playing .avatar{width:32px;height:32px;font-size:18px}body.is-playing .dealer-tag{display:none}body.is-playing .table-topline{top:12px}body.is-playing .north,body.is-playing .north-left,body.is-playing .north-right{top:10%}body.is-playing .uno-button{font-size:24px;padding:8px 12px}body.is-playing .current-color{bottom:5%}body.is-playing .pile-caption{margin-top:5px}}
@media(max-width:700px){
 body.is-playing{--card-height:clamp(60px,13dvh,105px);--hand-height:calc(var(--card-height) + 20px)}
 body.is-playing .table-topline{left:12px;right:120px}.is-playing .round-label{display:none}
 body.is-playing .felt,body.is-playing .online-game[data-players="5"] .felt{left:15%;width:70%;top:27%;height:35%}
 body.is-playing .piles,body.is-playing .online-game[data-players="5"] .piles{top:48%}
 body.is-playing .north,body.is-playing .north-left,body.is-playing .north-right{top:10%;left:71%;right:auto;transform:translateX(-50%)}
 body.is-playing .north-left{left:56%}body.is-playing .north-right{left:83%}
 body.is-playing .north .player-heading,body.is-playing .north-left .player-heading,body.is-playing .north-right .player-heading{flex-direction:column;text-align:center}
 body.is-playing .north .mini-hand,body.is-playing .north-left .mini-hand,body.is-playing .north-right .mini-hand{display:none}
 body.is-playing .dealer-station,body.is-playing .online-game[data-players="5"] .dealer-station{left:3%;top:12%;gap:9px}
 body.is-playing .dealer-character{width:clamp(45px,10dvh,80px)}
 body.is-playing .dealer-deck .card{width:calc(var(--card-width)*.7);height:calc(var(--card-height)*.7)}
 body.is-playing .dealer-tag{display:none}
 body.is-playing .west,body.is-playing .east{top:40%;width:15%}body.is-playing .west{left:0}body.is-playing .east{right:0}
 body.is-playing .player-details{min-width:0!important;max-width:72px}body.is-playing .avatar{width:32px;height:32px;font-size:18px}
 body.is-playing .player-details strong{font-size:12px}body.is-playing .player-details>span{font-size:10px}
 body.is-playing .your-area{left:10px;right:10px;bottom:max(48px,calc(env(safe-area-inset-bottom) + 40px));height:var(--hand-height);display:block}
 body.is-playing .hand{width:100%;height:100%}
 body.is-playing .your-info{position:absolute;left:2px;bottom:calc(100% + 8px);gap:7px}
 body.is-playing .uno-area{position:absolute;right:2px;bottom:calc(100% + 8px)}
 body.is-playing .uno-button{font-size:23px;padding:8px 13px}body.is-playing #uno-hint{font-size:9px;max-width:125px}
 body.is-playing .turn-notice{bottom:calc(var(--hand-height) + 126px);font-size:12px;line-height:1.3}
 body.is-playing .current-color{bottom:6%;gap:4px;font-size:11px;padding:0 5px}
 body.is-playing .table-brand{font-size:26px}.is-playing .pile-caption{font-size:9px}
 body.is-playing .uno-reaction{top:22%;padding:10px}
}
@media(prefers-reduced-motion:reduce){.game-menu::backdrop{animation:none}}
@media(max-width:700px) and (max-height:500px){
 body.is-playing{--card-height:clamp(44px,17dvh,70px);--hand-height:calc(var(--card-height) + 12px)}
 body.is-playing .felt,body.is-playing .online-game[data-players="5"] .felt{top:23%;height:39%;left:19%;width:62%}
 body.is-playing .your-area{display:flex;align-items:center;bottom:35px;gap:8px}
 body.is-playing .your-info,body.is-playing .uno-area{position:static;min-width:65px;flex-shrink:0}
 body.is-playing .your-info{gap:4px}.is-playing .your-info strong{font-size:11px}
 body.is-playing .hand{width:auto;flex:1}
 body.is-playing .turn-notice{bottom:calc(var(--hand-height) + 40px);font-size:11px}
 body.is-playing .north,body.is-playing .north-left,body.is-playing .north-right{top:13%}
 body.is-playing .north{left:50%}body.is-playing .north-left{left:43%}body.is-playing .north-right{left:68%}
 body.is-playing .north .player-heading,body.is-playing .north-left .player-heading,body.is-playing .north-right .player-heading{flex-direction:row}
 body.is-playing .dealer-station,body.is-playing .online-game[data-players="5"] .dealer-station{top:15%}
 body.is-playing .dealer-deck{padding-top:0}body.is-playing .pile-caption,body.is-playing .table-brand{display:none}
 body.is-playing .current-color{bottom:4%;font-size:10px}
 body.is-playing .uno-button{font-size:19px;padding:6px 9px}
 body.is-playing .table-bottom{height:27px;font-size:10px}
 .game-menu-button{top:8px;padding:6px 13px;font-size:13px}
 body.is-playing .table-topline{top:12px}.is-playing .mode{font-size:10px}
}
.language-switch{display:inline-flex;gap:3px;align-items:center;flex-shrink:0;padding:3px;border:1px solid #afc0a9;border-radius:20px;background:#edf1e7}
.language-switch button{border:0;border-radius:16px;background:transparent;color:#43604c;padding:7px 10px;font:700 12px 'DM Sans',sans-serif;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s;line-height:1.2}
.language-switch button[aria-pressed="true"]{background:#244e40;color:#fff5cf;box-shadow:0 2px 4px #173f3920}
.language-switch button:focus-visible{outline:3px solid #9766ff;outline-offset:2px}
.topbar .language-switch{background:#254e45;border-color:#527269}.topbar .language-switch button{color:#d9e4d5}.topbar .language-switch button[aria-pressed="true"]{background:#f4d56a;color:#173f39}
.game-menu .language-switch{margin:8px 0 15px}
html[lang="ru"] .turn-notice{padding-inline:12px;line-height:1.3}
html[lang="ru"] .game-menu .room-toolbar{gap:14px}
html[lang="ru"] .pass-button{white-space:normal}
@media(max-width:700px){.header-actions{gap:7px}.language-switch button{padding:6px 8px;font-size:11px}.topbar .mode-link{max-width:100px;text-align:center;font-size:11px}html[lang="ru"] .edition{display:none}html[lang="ru"] .table-bottom-right{display:none}html[lang="ru"] .turn-notice{font-size:11px}html[lang="ru"] .current-color{font-size:10px}html[lang="ru"] .uno-area>span{max-width:130px}}