:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0a0a0a;color:#fafafa}.menu-screen{min-height:100vh;display:grid;place-items:center;padding:2rem}.menu-card{text-align:center;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:1.5rem;padding:3rem 4rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.menu-title{font-size:5rem;font-weight:900;letter-spacing:.1em;margin:0 0 .25rem;text-shadow:0 0 40px rgba(255,255,255,.1)}.menu-subtitle{color:#fff6;font-size:1.1rem;margin-bottom:2.5rem;letter-spacing:.3em;text-transform:uppercase}.menu-buttons{display:flex;flex-direction:column;gap:.75rem}.btn{padding:.75rem 2rem;border:none;border-radius:.75rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}.btn-primary{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;box-shadow:0 4px 15px #e74c3c4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #e74c3c66}.game-screen{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;padding:1rem;gap:.5rem;max-width:1200px;margin:0 auto}.opponents-row{display:flex;justify-content:center;gap:2rem;padding:.5rem 0}.opponent{display:flex;flex-direction:column;align-items:center;gap:.5rem}.opponent-info{display:flex;gap:.75rem;align-items:center}.opponent-name{font-weight:600;font-size:.9rem}.opponent-count{font-size:.75rem;color:#fff6;background:#ffffff0f;padding:.15rem .5rem;border-radius:999px}.opponent-cards{display:flex;gap:-.5rem}.opponent-card-slot{width:30px;height:42px;background:linear-gradient(135deg,#1a1a2e,#16213e);border:1.5px solid #3a3a5e;border-radius:6px;margin-left:-10px;position:relative}.opponent-card-slot:first-child{margin-left:0}.game-area{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.pile-area{display:flex;align-items:center;gap:2rem}.draw-pile{cursor:pointer;transition:transform .2s}.draw-pile:hover{transform:translateY(-5px)}.draw-card{width:90px;height:130px;background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #3a3a5e;border-radius:10px;display:grid;place-items:center;position:relative;overflow:hidden}.draw-card:before{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border:2px solid rgba(255,255,255,.05);border-radius:6px}.draw-label{font-weight:800;font-size:.8rem;letter-spacing:.15em;color:#ffffff4d}.discard-pile{position:relative}.chosen-color-indicator{position:absolute;bottom:-28px;left:50%;transform:translate(-50%);padding:.15rem .6rem;border-radius:999px;font-size:.65rem;font-weight:700;letter-spacing:.1em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);white-space:nowrap}.direction-indicator{font-size:1.5rem;color:#ffffff40}.status-bar{text-align:center;display:flex;flex-direction:column;gap:.25rem}.status-message{font-size:.95rem;color:#fff9}.status-message.your-turn{color:#f1c40f;font-weight:600}.last-action{font-size:.75rem;color:#ffffff40}.uno-card{width:72px;height:105px;border:2.5px solid;border-radius:10px;position:relative;cursor:default;display:grid;place-items:center;transition:all .15s ease;font-family:inherit;padding:0;outline:none;flex-shrink:0}.uno-card.small{width:55px;height:80px}.card-corner{position:absolute;font-size:.7rem;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}.card-corner.top-left{top:5px;left:7px}.card-corner.bottom-right{bottom:5px;right:7px;transform:rotate(180deg)}.card-center{font-size:1.6rem;font-weight:900;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3);background:#ffffff26;width:40px;height:40px;border-radius:50%;display:grid;place-items:center}.uno-card.small .card-center{width:28px;height:28px;font-size:1.1rem}.uno-card.small .card-corner{font-size:.55rem}.card-back{display:grid;place-items:center;width:100%;height:100%}.card-back-logo{font-size:1.2rem;font-weight:900;letter-spacing:.1em;color:#ffffff26}.uno-card.playable{cursor:pointer;animation:pulse-glow 2s infinite}.uno-card.playable:hover{transform:translateY(-12px) scale(1.05);box-shadow:0 12px 30px #00000080,0 0 20px #ffffff1a;z-index:10}@keyframes pulse-glow{0%,to{box-shadow:0 0 5px #ffffff1a}50%{box-shadow:0 0 15px #fff3}}.player-hand-area{padding:.5rem 0 1rem}.player-label{display:flex;justify-content:center;align-items:center;gap:.75rem;margin-bottom:.75rem}.player-name{font-weight:600;font-size:.9rem}.player-card-count{font-size:.75rem;color:#fff6;background:#ffffff0f;padding:.15rem .5rem;border-radius:999px}.player-hand{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem}.color-picker-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:grid;place-items:center;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.color-picker{background:#14141ef2;border:1px solid rgba(255,255,255,.1);border-radius:1.5rem;padding:2rem 3rem;text-align:center}.color-picker h3{margin:0 0 1.5rem;font-size:1.2rem;font-weight:600}.color-options{display:flex;gap:1rem}.color-btn{width:60px;height:60px;border-radius:50%;border:3px solid rgba(255,255,255,.2);cursor:pointer;transition:all .2s}.color-btn:hover{transform:scale(1.15);border-color:#fff;box-shadow:0 0 20px #ffffff4d}.score-board{margin:1.5rem 0;display:flex;flex-direction:column;gap:.5rem}.score-row{display:flex;justify-content:space-between;padding:.5rem 1rem;background:#ffffff0a;border-radius:.5rem;font-size:.9rem}