.mode-bar{display:flex;gap:18px;align-items:center;position:relative;z-index:3;margin:10px 0 14px;font-size:12px;color:#a8c0d2}.mode-bar select{background:#123348;color:white;border:1px solid #426078;border-radius:8px;padding:5px;font:inherit}.mode-bar button{background:#19384c;border:1px solid #426078;border-radius:8px;padding:6px 10px;font:inherit;color:#fff}#connection{margin-left:auto;color:#b9fa55;font-size:11px}.opponent.active{background:#b9fa550c;border-radius:18px;outline:1px solid #b9fa5540;padding-top:8px}.opponent.active .avatar{box-shadow:0 0 0 4px #b9fa5530,0 0 0 2px var(--lime),0 0 30px #b9fa5550}.opponent.active small{color:var(--lime);font-weight:700}#event{background:#071521e8;border:1px solid #4f7588;border-radius:12px;min-height:48px;padding:10px 13px;line-height:1.4;color:#eefaff;font-size:14px;box-shadow:0 5px 25px #0003;position:relative;z-index:2;margin-top:12px}.center{top:20%}.flying-card{position:fixed!important;top:0!important;left:0!important;z-index:1000;pointer-events:none;margin:0!important;box-shadow:0 10px 40px #0008}.history-panel{margin:26px auto 0;max-width:900px;padding:15px 20px;background:#0e2734;border:1px solid #315368;border-radius:14px}.history-panel summary{cursor:pointer;font-size:14px}.history-panel summary span{float:right;font-size:11px;color:#94b0c3}.history-panel ol{max-height:210px;overflow-y:auto;padding-left:23px;line-height:1.6;font-size:13px;color:#aec8d9}.history-panel li{padding:5px 0}.history-panel li:first-child{color:#e7ffcb}.field{display:flex;flex-direction:column;gap:7px;color:#c7dae8;font-size:13px;margin:15px 0}.field input{width:100%;padding:13px;border-radius:10px;border:1px solid #486477;background:#061927;color:white;font:inherit;font-size:16px}.join-row{display:flex;gap:14px;align-items:center}.join-row .field{flex:1}.seats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.seat{padding:14px;background:#173648;border:1px solid #35566b;border-radius:12px;overflow-wrap:anywhere}.seat small{display:block;color:#afc6d4;font-size:11px;margin-top:5px}.room-code{letter-spacing:3px;color:var(--lime);font-size:20px}#online-error{color:#ff929c;min-height:24px}dialog button:disabled{opacity:.45;cursor:default}#notice:empty{display:none}#notice{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#243f51;border:1px solid #98b6c6;padding:14px 23px;border-radius:12px;z-index:2000;max-width:90%;font-size:14px}.mode-bar [hidden]{display:none!important}
@media(min-width:601px){main{min-height:780px}.north{top:-95px}.center{top:20%}}
@media(max-width:900px){nav{flex-wrap:wrap;justify-content:flex-end;max-width:290px}.mode-bar{font-size:10px;gap:8px}}
@media(max-width:600px){header{height:90px}nav{max-width:245px}.mode-bar{flex-wrap:wrap;margin-bottom:48px}main{height:640px;min-height:640px}.north{top:-45px}.center{top:15%}#event{font-size:11px;padding:8px;min-height:42px}.history-panel{margin-top:30px;padding:12px}.history-panel summary span{display:none}#connection{width:100%;margin-left:0;font-size:10px}.your-area{bottom:47px}.seats{gap:8px}.seat{padding:10px}}
@media(min-width:601px) and (max-height:900px){.app{padding:16px 26px}header{height:80px}main{height:calc(100dvh - 160px);min-height:560px}.north{top:-65px}.avatar{width:40px;height:40px;font-size:20px}.mini-hand{height:62px}.mini-card{width:44px;height:64px}.mini-card span{font-size:12px}.center{top:16%}.piles .card{width:77px;height:112px;border-width:4px}.piles .card .big{font-size:40px}.piles .card .corner{font-size:18px}.piles .card.back:before{inset:30px 0}.piles .back>span{font-size:24px}.piles p{font-size:12px;margin:12px 0 8px}.piles small{font-size:10px;margin-top:4px}.color-indicator{padding:7px 13px;font-size:11px}.color-indicator i{width:15px;height:15px}#event{font-size:12px;padding:8px;min-height:40px}.hand{height:167px}.hand .card{width:92px;height:138px}.hand .card .big{font-size:46px}.your-area{bottom:0}h1{font-size:28px;margin:13px 0 6px}.turn-copy p{font-size:12px}.uno-area{bottom:32px}.table{bottom:25%}}