*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;min-height:100dvh;background:#0a1628;color:#fff;font-family:Segoe UI,system-ui,sans-serif;overflow-x:hidden;overflow-y:auto;touch-action:pan-y}#app{width:100%;min-height:100dvh;position:relative}.hidden{display:none!important}#loading-screen{display:flex;align-items:flex-start;justify-content:center;min-height:100dvh;background:linear-gradient(135deg,#0a1628,#1a3a5c);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1rem 0 1.2rem}.loading-content{text-align:center;max-width:420px;padding:2rem}.loading-content h1{font-size:clamp(1.8rem,5vw,2.8rem);margin-bottom:.5rem;color:#7ee8a2;text-shadow:0 0 20px rgba(126,232,162,.4)}.loading-content p{color:#aac;margin-bottom:1.2rem;font-size:1.1rem}.controls-hint{list-style:none;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1rem 1.5rem;margin-bottom:1.8rem;text-align:left}.controls-hint li{padding:.4rem 0;font-size:.95rem;color:#cce}#start-btn{background:linear-gradient(135deg,#7ee8a2,#3ec878);color:#0a1628;border:none;padding:.9rem 2.5rem;font-size:1.1rem;font-weight:700;border-radius:50px;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 20px #7ee8a24d}#start-btn:hover{transform:scale(1.05);box-shadow:0 6px 28px #7ee8a280}#start-btn:active{transform:scale(.97)}#skip-camera-btn{display:block;margin:.6rem auto 0;background:transparent;color:#ffffff8c;border:1px solid rgba(255,255,255,.2);padding:.55rem 1.6rem;font-size:.9rem;border-radius:50px;cursor:pointer;transition:color .15s,border-color .15s}#skip-camera-btn:hover{color:#fff;border-color:#ffffff80}.privacy-note{font-size:.8rem;color:#667;margin-top:1rem}#game-screen{width:100%;height:100dvh;position:relative;touch-action:none;background:#1d5b33}#game-canvas{display:block;width:100%;height:100dvh}#camera-overlay{position:absolute;top:12px;right:12px;width:140px;border-radius:12px;overflow:hidden;border:2px solid rgba(126,232,162,.4);background:#000;box-shadow:0 4px 16px #00000080}#webcam{width:140px;height:105px;object-fit:cover;display:block;transform:scaleX(-1)}#face-canvas{position:absolute;top:0;left:0;width:140px;height:105px;transform:scaleX(-1)}#face-status{background:#000000bf;padding:4px 6px;font-size:.65rem;display:flex;flex-direction:column;gap:2px;color:#7ee8a2}#hud{position:absolute;top:12px;left:50%;transform:translate(-50%);text-align:center;pointer-events:none}#score-board{font-size:clamp(1rem,3vw,1.6rem);font-weight:700;background:#00000080;padding:.4rem 1.2rem;border-radius:30px;letter-spacing:.05em;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;gap:.5rem}#score-player{color:#7ee8a2}#score-opponent{color:#e87e7e}#set-indicator{display:flex;align-items:center;gap:4px;margin-top:4px;justify-content:center}.set-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#ffffff40;border:1.5px solid rgba(255,255,255,.4);transition:background .2s}.set-dot.won{background:#7ee8a2;border-color:#7ee8a2;box-shadow:0 0 6px #7ee8a299}.set-mid{font-size:.7rem;color:#ffffff80;margin:0 2px}#swing-flash{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3rem;font-weight:900;color:#ffdd57;text-shadow:0 0 30px rgba(255,221,87,.8);pointer-events:none;animation:flashAnim .4s ease-out forwards}@keyframes flashAnim{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-80%) scale(1.4)}}.multiplayer-panel{background:#ffffff0a;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:.85rem 1rem;margin:0 auto 1rem;width:min(100%,380px)}.multiplayer-row{display:flex;gap:.5rem;justify-content:center;margin-bottom:.7rem}.secondary-btn{background:#ffffff0f;color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.55rem 1rem;font-size:.82rem;cursor:pointer}#join-room-btn.room-code-ready{background:#7ee8a233;border-color:#7ee8a2bf;box-shadow:0 0 0 2px #7ee8a233,0 0 14px #7ee8a259}.room-input-wrap{margin-bottom:.5rem}.appearance-row{display:flex;gap:.45rem;margin-bottom:.65rem}.appearance-select{flex:1;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:#0a142380;color:#fff;padding:.62rem .7rem;font-size:.88rem}.character-preview-wrap{margin-bottom:.65rem;text-align:center}.character-preview-label{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#ffffffb3;margin-bottom:.35rem}#character-preview-canvas{width:180px;height:110px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:#0a142373}#room-code-input{width:100%;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:#0a142380;color:#fff;padding:.7rem .8rem;text-align:center;font-size:1rem}.room-code-display{min-height:1.3rem;color:#7ee8a2;font-size:.8rem;text-align:center}.room-link-block{display:flex;flex-direction:column;gap:.35rem;align-items:center}.room-code-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#ffffffb3}.room-link{color:#7ee8a2;word-break:break-all;font-size:.78rem;text-decoration:underline}.copy-link-btn{border:1px solid rgba(126,232,162,.5);background:#7ee8a21a;color:#dfffe9;border-radius:999px;padding:.35rem .8rem;font-size:.75rem;cursor:pointer}@media (max-width: 768px){#camera-overlay{top:50%;right:8px;transform:translateY(-50%)}}@media (max-width: 480px){#camera-overlay{width:100px}#webcam,#face-canvas{width:100px;height:75px}}