:root{--glass: rgba(255, 255, 255, .1);--border: rgba(255, 255, 255, .15);--apple-blue: #007AFF;--bg-gradient: linear-gradient(180deg, #1c1c1e 0%, #000000 100%)}body{margin:0;padding:0;height:100dvh;background:var(--bg-gradient);font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,sans-serif;color:#fff;overflow:hidden}.app-container{display:flex;flex-direction:column;height:100%;width:100%;padding:20px;box-sizing:border-box;justify-content:space-between}.header-section{margin-top:60px;text-align:center}h1{font-size:3.5rem;font-weight:800;letter-spacing:-2px;margin:0;background:linear-gradient(to bottom,#fff,#888);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.mobile-panel{background:var(--glass);backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%);border:1px solid var(--border);border-radius:35px;padding:30px;width:100%;max-width:400px;margin:0 auto 40px;box-sizing:border-box;box-shadow:0 20px 50px #0006}.apple-button{background:var(--apple-blue);color:#fff;border:none;height:60px;border-radius:18px;font-size:18px;font-weight:600;width:100%;margin-bottom:15px;cursor:pointer;transition:transform .2s cubic-bezier(.4,0,.2,1)}.apple-button:active{transform:scale(.95)}.secondary{background:#ffffff1a;border:1px solid var(--border)}input{width:100%;height:60px;background:#ffffff0d;border:1px solid var(--border);border-radius:18px;color:#fff;font-size:24px;font-weight:700;text-align:center;margin-bottom:20px;outline:none}body{background:linear-gradient(-45deg,#1c1c1e,#0f172a,#1e293b,#000);background-size:400% 400%;animation:gradientBG 15s ease infinite}@keyframes gradientBG{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.apple-button:active{transform:scale(.92)}.status-badge{display:inline-flex;align-items:center;background:#ffffff14;padding:6px 12px;border-radius:20px;font-size:12px;color:#fff9;margin-top:10px}.status-dot{width:8px;height:8px;border-radius:50%;margin-right:8px}.status-dot.online{background:#34c759;box-shadow:0 0 8px #34c759}.status-dot.offline{background:#ff3b30}.panel-title{font-size:24px;margin-bottom:8px;text-align:center}.panel-subtitle{color:#ffffff80;margin-bottom:25px;text-align:center}.welcome-text{text-align:center;font-size:18px;margin-bottom:25px}.welcome-text span{color:var(--apple-blue);font-weight:700}.room-code-display{font-size:48px;font-weight:800;color:var(--apple-blue);text-align:center;margin:20px 0;letter-spacing:4px}.text-button{background:none;border:none;color:#fff6;font-size:13px;margin-top:15px;width:100%;cursor:pointer}.player-list{background:#0003;border-radius:18px;padding:15px;margin-bottom:25px;text-align:left}.section-label{font-size:12px;text-transform:uppercase;color:#fff6;margin-bottom:10px;letter-spacing:1px}.player-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05)}.player-item:last-child{border:none}.kick-button{background:#ff3b3033;color:#ff3b30;border:none;padding:4px 10px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer}.notification-wrapper{position:fixed;top:30px;left:0;width:100%;display:flex;justify-content:center;align-items:center;z-index:10000;pointer-events:none}.custom-notification{background:#ff3b30e6;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);padding:12px 20px;border-radius:20px;color:#fff;font-weight:600;font-size:14px;box-shadow:0 10px 25px #0000004d;border:1px solid rgba(255,255,255,.2);max-width:85vw;text-align:center;word-wrap:break-word}.switch{position:relative;display:inline-block;width:44px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ffffff1a;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#34c759}input:checked+.slider:before{transform:translate(20px)}.info-btn{background:#ffffff26;border:none;color:#fff;width:24px;height:24px;border-radius:50%;margin-right:10px;font-size:14px;cursor:pointer}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:20000}.info-card{background:#1c1c1e;padding:25px;border-radius:24px;width:80%;max-width:320px;text-align:center;border:1px solid rgba(255,255,255,.1)}.info-card h3{margin-bottom:15px;color:#34c759}.info-card p{font-size:14px;line-height:1.5;color:#ebebf5;margin-bottom:20px}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05)}.lobby-main-layout{display:flex;flex-direction:column;height:100%;max-height:75vh}.lobby-fixed-top{flex-shrink:0;padding-bottom:10px}.lobby-scrollable-content{flex-grow:1;overflow-y:auto;padding:10px 5px;margin:5px 0;scrollbar-width:none}.lobby-scrollable-content::-webkit-scrollbar{display:none}.lobby-fixed-bottom{flex-shrink:0;padding-top:15px;display:flex;flex-direction:column;gap:10px;border-top:1px solid rgba(255,255,255,.1)}.player-list-container{background:#ffffff0d;padding:12px;border-radius:20px}.settings-grid{display:flex;flex-direction:column;gap:8px}.text-button.danger{color:#ff3b30;font-weight:500;margin-top:5px}.settings-popup{width:100%;max-width:500px;background:#1c1c1e;border-top-left-radius:25px;border-top-right-radius:25px;padding:20px 20px 40px;box-sizing:border-box;box-shadow:0 -10px 30px #00000080}.popup-handle{width:40px;height:5px;background:#fff3;border-radius:10px;margin:0 auto 15px}.settings-list{width:100%;margin:20px 0}.setting-label-group{display:flex;align-items:center;gap:10px}.player-list-static{background:#ffffff0d;border-radius:20px;padding:10px;margin-bottom:20px;width:100%}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:flex-end;justify-content:center;z-index:5000}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.05)}.game-table{display:flex;flex-direction:column;justify-content:space-between;height:85vh;width:100%;position:relative}.game-table{display:flex;flex-direction:column;height:100%;width:100%;position:relative;overflow:hidden}.uno-card{width:80px;height:120px;border-radius:12px;display:flex;justify-content:center;align-items:center;font-weight:700;font-size:24px;color:#fff;box-shadow:0 4px 15px #0000004d;border:2px solid white;position:relative;transition:transform .2s}.red{background:linear-gradient(135deg,#ff3b30,#ff2d55)}.blue{background:linear-gradient(135deg,#007aff,#5856d6)}.green{background:linear-gradient(135deg,#34c759,#248a3d)}.yellow{background:linear-gradient(135deg,#fc0,#ff9500)}.black{background:#1c1c1e}.my-hand-container{display:flex;justify-content:center;align-items:flex-end;padding-bottom:40px;height:200px}.opponents-container{display:flex;justify-content:space-around;padding-top:20px}.opponent-badge{background:#ffffff1a;padding:10px 15px;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.opponents-bar{display:flex;justify-content:center;gap:10px;padding:15px;z-index:10}.center-deck-area{flex:1;display:flex;justify-content:center;align-items:center;gap:20px;z-index:5}.my-hand-wrapper{position:absolute;bottom:-30px;left:50%;transform:translate(-50%);width:120%;height:200px;display:flex;justify-content:center;align-items:flex-end;z-index:10}.uno-card-visual{width:70px;height:105px;border-radius:12px;position:relative;display:flex;justify-content:center;align-items:center;font-weight:800;font-size:28px;color:#fff;box-shadow:0 8px 20px #0006;border:3px solid rgba(255,255,255,.9);-webkit-user-select:none;user-select:none;cursor:pointer;background-size:cover;text-shadow:0 2px 4px rgba(0,0,0,.5)}.active-turn{box-shadow:0 0 20px #34c759;border:2px solid #34c759;transform:scale(1.05)}.mobile-panel{display:flex;flex-direction:column;height:600px;position:relative;overflow:hidden}.game-table-active .header-section{padding:5px}.game-table-active .header-section h1{font-size:1.2rem;opacity:.8}.card-corner{position:absolute;top:4px;left:6px;font-size:.9rem;font-weight:900;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.card-emoji{font-size:1.8rem}.opponent-hand-visual{display:flex;justify-content:center;margin-top:5px}.mini-card-back{width:15px;height:22px;background:linear-gradient(135deg,#444,#000);border:1px solid rgba(255,255,255,.2);border-radius:3px;margin-left:-8px;box-shadow:1px 1px 3px #00000080}