.game-layout{display:flex;flex-direction:column;height:100vh;position:relative;overflow:hidden}.game-topbar{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:var(--bg-surface);font-size:13px;z-index:10}.game-topbar__left,.game-topbar__right{display:flex;align-items:center;gap:12px}.game-topbar__brand{font-weight:700;color:var(--text-accent);font-family:var(--font-game)}.opponent-row{display:flex;justify-content:center;gap:12px;padding:10px 20px;flex-wrap:wrap}.opponent{display:flex;flex-direction:column;align-items:center;gap:3px}.opponent__avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;border:2px solid rgba(255,255,255,.3);transition:border .3s ease,box-shadow .3s ease}.opponent__avatar--active{border:3px solid var(--text-accent);box-shadow:0 0 12px #fbbf2499}.opponent__name{font-size:11px;color:var(--text-primary);transition:color .3s ease}.opponent__name--active{color:var(--text-accent);font-weight:700}.opponent__cards{display:flex;gap:1px}.opponent__count{font-size:10px;color:var(--text-secondary)}.game-center{flex:1;display:flex;justify-content:center;align-items:center;gap:40px;position:relative}.direction-ring{position:absolute;width:160px;height:160px;border:2px dashed rgba(251,191,36,.5);border-radius:50%;display:flex;align-items:center;justify-content:center}.direction-ring__arrow{font-size:28px;color:#fbbf24b3}.game-actions{display:flex;justify-content:center;gap:10px;padding:8px 0}.player-hand{background:var(--bg-surface);padding:14px 20px 18px;display:flex;justify-content:center;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding:0 20px;scrollbar-width:none;-ms-overflow-style:none}.player-hand::-webkit-scrollbar{display:none}.player-hand__cards{display:flex;justify-content:center}.player-hand__cards .card{margin-right:-10px;scroll-snap-align:center}.player-hand__cards .card:last-child{margin-right:0}@media(max-width:768px){.opponent-row{gap:8px;padding:6px 10px}.opponent__avatar{width:36px;height:36px;font-size:14px}.game-center{gap:24px}.direction-ring{width:120px;height:120px}}@keyframes shake{0%{transform:translate(-4px)}50%{transform:translate(4px)}to{transform:translate(-4px)}}@keyframes timerFlash{0%{opacity:1}to{opacity:.3}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.card{width:70px;height:100px;border-radius:var(--card-radius);border:var(--card-border);display:flex;align-items:center;justify-content:center;font-family:var(--font-game);font-weight:900;color:#fff;text-shadow:2px 2px 0px rgba(0,0,0,.2);box-shadow:var(--card-shadow);position:relative;flex-shrink:0;-webkit-user-select:none;user-select:none;transition:transform .2s,box-shadow .2s}.card--red{background:var(--color-red)}.card--blue{background:var(--color-blue)}.card--green{background:var(--color-green)}.card--yellow{background:var(--color-yellow);color:#1a1a2e}.card--wild{background:var(--color-wild)}.card--number .card__value{font-size:32px}.card--skip .card__value,.card--reverse .card__value{font-size:24px}.card--draw_two .card__value{font-size:20px}.card--wild .card__value{font-size:18px}.card--wild_draw_four .card__value{font-size:16px}.card--playable{border:var(--card-border-playable);box-shadow:var(--card-glow),var(--card-shadow);cursor:pointer}.card--playable:hover{transform:translateY(-12px) scale(1.05)}.card__symbol{position:absolute;top:4px;left:6px;font-size:10px;opacity:.7}.card-back{width:70px;height:100px;border-radius:var(--card-radius);border:3px solid rgba(255,255,255,.2);background:linear-gradient(145deg,#1e3a5f,#0f2744);display:flex;align-items:center;justify-content:center;font-family:var(--font-game);font-size:16px;font-weight:900;color:#ffffff80;box-shadow:var(--card-shadow);flex-shrink:0}.card-back--small{width:12px;height:18px;border-radius:3px;border:1px solid rgba(255,255,255,.3);background:var(--color-blue);font-size:0}@media(max-width:768px){.card{width:52px;height:76px;border-radius:14px;border-width:3px}.card--number .card__value{font-size:24px}.card--skip .card__value,.card--reverse .card__value{font-size:18px}.card-back{width:52px;height:76px;font-size:12px}}:root{--color-red: #ff3366;--color-blue: #4488ff;--color-green: #33cc66;--color-yellow: #fbbf24;--color-wild: conic-gradient(var(--color-red) 0deg 90deg, var(--color-blue) 90deg 180deg, var(--color-green) 180deg 270deg, var(--color-yellow) 270deg 360deg);--bg-primary: #1a1a2e;--bg-secondary: #16213e;--bg-tertiary: #0f3460;--bg-surface: rgba(0, 0, 0, .3);--bg-surface-hover: rgba(255, 255, 255, .08);--text-primary: #e2e8f0;--text-secondary: #94a3b8;--text-accent: #fbbf24;--card-border: 4px solid white;--card-border-playable: 3px solid var(--text-accent);--card-radius: 18px;--card-shadow: 3px 4px 0px rgba(0, 0, 0, .2);--card-glow: 0 0 12px rgba(251, 191, 36, .5);--font-game: "Comic Sans MS", "Chalkboard SE", "Comic Neue", cursive, sans-serif;--font-ui: system-ui, -apple-system, sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-ui);background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 50%,var(--bg-tertiary) 100%);color:var(--text-primary);min-height:100vh;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column}button{cursor:pointer;font-family:var(--font-game);border:none;outline:none}input{font-family:var(--font-ui);outline:none}.btn-primary{background:var(--text-accent);color:var(--bg-primary);padding:10px 24px;border-radius:24px;font-size:16px;font-weight:700;box-shadow:var(--card-shadow);transition:transform .15s}.btn-primary:hover{transform:scale(1.05)}.btn-primary:active{transform:scale(.97)}.btn-danger{background:var(--color-red);color:#fff;padding:8px 20px;border-radius:20px;font-size:14px;font-weight:700;box-shadow:var(--card-shadow)}.btn-secondary{background:var(--bg-surface-hover);color:var(--text-primary);padding:8px 20px;border-radius:20px;font-size:14px;border:1px solid rgba(255,255,255,.2)}