*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:radial-gradient(ellipse at 50% 30%,#161630 0%,#0c0c20 50%,#06060f 100%);
  color:#fff;-webkit-tap-highlight-color:transparent;
}

.screen{display:none;min-height:100vh;min-height:100dvh}
.screen.active{display:flex;align-items:center;justify-content:center}
.container{width:100%;max-width:440px;padding:24px;margin:0 auto;text-align:center}

/* ═══════ MENU ═══════ */
.menu-card-stack{position:relative;width:90px;height:120px;margin:0 auto 12px}
.menu-card{position:absolute;width:72px;height:104px;border-radius:12px;border:3px solid rgba(255,255,255,.85);top:0;left:50%;box-shadow:0 4px 16px rgba(0,0,0,.5)}
.mc-y{background:#FFCD05;transform:translateX(-50%) rotate(-18deg);z-index:1}
.mc-g{background:#009A44;transform:translateX(-50%) rotate(-6deg);z-index:2}
.mc-b{background:#0066B3;transform:translateX(-50%) rotate(6deg);z-index:3}
.mc-r{background:#ED1C24;transform:translateX(-50%) rotate(15deg);z-index:4}

.title{font-size:4rem;font-weight:900;font-style:italic;color:#ED1C24;text-shadow:3px 3px 0 #000,-2px -2px 0 rgba(255,205,5,.3);letter-spacing:10px;margin-bottom:2px}
.subtitle{color:rgba(255,255,255,.5);font-size:1rem;letter-spacing:2px}

.menu-buttons{margin-top:36px;display:flex;flex-direction:column;gap:14px}
.btn-primary,.btn-secondary,.btn-back{width:100%;padding:18px;border:none;border-radius:16px;font-size:1.05rem;font-weight:700;cursor:pointer;transition:transform .12s,box-shadow .12s;letter-spacing:.5px}
.btn-primary{background:linear-gradient(135deg,#ED1C24,#c0121a);color:#fff;box-shadow:0 4px 20px rgba(237,28,36,.3)}
.btn-primary:active{transform:scale(.96);box-shadow:0 2px 10px rgba(237,28,36,.2)}
.btn-secondary{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-secondary:active{transform:scale(.96)}
.btn-back{background:none;color:rgba(255,255,255,.45);font-size:.9rem;padding:12px}

/* ═══════ INPUTS ═══════ */
.input-group{margin-bottom:18px;text-align:left}
.input-group label{display:block;color:rgba(255,255,255,.5);font-size:.8rem;margin-bottom:6px;letter-spacing:.5px;text-transform:uppercase}
.input-group input{width:100%;padding:16px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.06);color:#fff;font-size:1rem;outline:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .2s}
.input-group input:focus{border-color:rgba(237,28,36,.6);box-shadow:0 0 0 3px rgba(237,28,36,.1)}
.code-input{text-transform:uppercase;letter-spacing:10px;text-align:center;font-size:1.8rem!important;font-weight:700}

/* ═══════ TOPBAR ═══════ */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:4px 0;margin-bottom:6px}
.btn-quit,.btn-quit-sm{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#ff6b6b;padding:7px 14px;border-radius:10px;font-size:.8rem;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-restart-sm{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#4488ff;padding:7px 14px;border-radius:10px;font-size:.8rem;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.direction-indicator{color:rgba(255,255,255,.4);font-size:.8rem;letter-spacing:1px}

/* ═══════ LOBBY ═══════ */
.room-code-box{margin:16px 0;padding:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.room-label{display:block;color:rgba(255,255,255,.35);font-size:.7rem;letter-spacing:3px;margin-bottom:6px;text-transform:uppercase}
.room-code{font-size:2.4rem;font-weight:900;letter-spacing:8px;color:#fff;text-shadow:0 0 20px rgba(237,28,36,.3)}
.btn-invite{width:100%;padding:14px;background:rgba(237,28,36,.1);border:1px solid rgba(237,28,36,.25);border-radius:14px;color:#ff6b6b;font-size:.9rem;font-weight:600;cursor:pointer;margin-bottom:14px;transition:background .2s}
.btn-invite:active{background:rgba(237,28,36,.2)}
.players-list{margin:14px 0}
.player-item{padding:14px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);border-radius:12px;margin-bottom:6px;font-size:1rem;text-align:left}
.info{color:rgba(255,255,255,.4);font-size:.85rem;margin:10px 0}

/* ═══════ GAME LAYOUT ═══════ */
.game-layout{display:flex;flex-direction:column;height:100vh;height:100dvh;width:100%;max-width:500px;margin:0 auto}
#game-screen.active{display:flex;align-items:stretch;justify-content:center}
.game-top{padding:8px 12px 0;flex-shrink:0}
.game-middle{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 14px;overflow:hidden;position:relative}
.game-bottom{flex-shrink:0;padding:6px 4px 14px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0))}

/* ═══════ PLAYER BAR ═══════ */
.player-bar{display:flex;gap:6px;overflow-x:auto;padding:6px 0;-webkit-overflow-scrolling:touch}
.player-bar::-webkit-scrollbar{display:none}
.player-chip{flex-shrink:0;padding:6px 12px;border-radius:20px;font-size:.75rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);white-space:nowrap;transition:all .25s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.player-chip.current{background:rgba(237,28,36,.2);border-color:rgba(237,28,36,.5);font-weight:700;box-shadow:0 0 12px rgba(237,28,36,.15)}
.player-chip.me{border-color:rgba(255,255,255,.25)}
.card-count{opacity:.5;font-size:.7rem;margin-left:2px}
.uno-mark{color:#ED1C24;font-weight:900;font-size:.7rem;animation:pulse .6s ease-in-out infinite;margin-left:3px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ═══════ TABLE CENTER ═══════ */
.last-action{color:rgba(255,255,255,.55);font-size:.82rem;margin-bottom:10px;min-height:20px;text-align:center;font-weight:500}
.table-center{display:flex;gap:28px;align-items:center;justify-content:center;margin:6px 0;position:relative}

.draw-pile{position:relative;cursor:pointer;transition:transform .12s}
.draw-pile:active{transform:scale(.92)}
.pile-label{display:block;text-align:center;color:rgba(255,255,255,.35);font-size:.7rem;margin-top:6px;font-weight:600}

.discard-area{display:flex;flex-direction:column;align-items:center;position:relative}

/* Color ring around discard */
.color-ring{width:90px;height:128px;border-radius:16px;position:absolute;top:-7px;left:-7px;z-index:0;opacity:.6;transition:all .3s}
.color-ring.cr-r{box-shadow:0 0 20px #ED1C24,0 0 40px rgba(237,28,36,.3)}
.color-ring.cr-b{box-shadow:0 0 20px #0066B3,0 0 40px rgba(0,102,179,.3)}
.color-ring.cr-g{box-shadow:0 0 20px #009A44,0 0 40px rgba(0,154,68,.3)}
.color-ring.cr-y{box-shadow:0 0 20px #FFCD05,0 0 40px rgba(255,205,5,.3)}

.color-dot{width:22px;height:22px;border-radius:50%;margin-top:8px;border:2px solid rgba(255,255,255,.15);transition:background .3s,box-shadow .3s}
.color-dot.cd-r{background:#ED1C24;box-shadow:0 0 10px rgba(237,28,36,.5)}
.color-dot.cd-b{background:#0066B3;box-shadow:0 0 10px rgba(0,102,179,.5)}
.color-dot.cd-g{background:#009A44;box-shadow:0 0 10px rgba(0,154,68,.5)}
.color-dot.cd-y{background:#FFCD05;box-shadow:0 0 10px rgba(255,205,5,.5)}

.stack-warning{color:#ff4444;font-weight:700;font-size:.95rem;animation:pulse .5s ease-in-out infinite;margin:8px 0}
.turn-info{font-size:1.05rem;margin:6px 0;font-weight:600;letter-spacing:.3px}
.turn-info.my-turn{color:#44dd66;font-size:1.1rem;text-shadow:0 0 12px rgba(68,221,102,.3)}

.action-buttons{display:flex;gap:10px;justify-content:center;margin-top:6px;flex-wrap:wrap}
.btn-uno{padding:12px 32px;border:none;border-radius:50px;background:linear-gradient(135deg,#ED1C24,#ff6600);color:#fff;font-size:1.3rem;font-weight:900;cursor:pointer;animation:unoPulse 1s ease-in-out infinite;letter-spacing:3px;font-style:italic;box-shadow:0 4px 20px rgba(237,28,36,.4);text-shadow:1px 1px 0 rgba(0,0,0,.3)}
@keyframes unoPulse{0%,100%{transform:scale(1);box-shadow:0 4px 20px rgba(237,28,36,.4)}50%{transform:scale(1.06);box-shadow:0 4px 30px rgba(237,28,36,.6)}}
.btn-catch{padding:12px 24px;border:none;border-radius:50px;background:linear-gradient(135deg,#ff3344,#cc0022);color:#fff;font-size:.95rem;font-weight:700;cursor:pointer;animation:pulse .5s ease-in-out infinite;box-shadow:0 4px 16px rgba(255,51,68,.3)}

/* ═══════ CARDS ═══════ */
.card{
  width:56px;height:84px;border-radius:10px;
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  user-select:none;flex-shrink:0;
  border:3px solid rgba(255,255,255,.9);
  box-shadow:0 2px 10px rgba(0,0,0,.5);
  transition:transform .15s,box-shadow .15s,margin-top .15s;
}

/* Corner numbers */
.c-tl{position:absolute;top:3px;left:5px;font-size:.55rem;font-weight:900;z-index:2;line-height:1;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.c-br{position:absolute;bottom:3px;right:5px;font-size:.55rem;font-weight:900;z-index:2;line-height:1;transform:rotate(180deg);text-shadow:0 1px 1px rgba(0,0,0,.25)}

/* Center oval - tilted like real UNO */
.c-oval{
  width:76%;height:58%;
  background:rgba(255,255,255,.22);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transform:rotate(-20deg) skewX(-5deg);
  z-index:1;
  box-shadow:inset 0 0 8px rgba(255,255,255,.1);
}
.c-val{
  font-size:1.4rem;font-weight:900;
  transform:rotate(20deg) skewX(5deg);
  text-shadow:1px 1px 0 rgba(0,0,0,.2);
  line-height:1;
}

/* Card colors - official UNO palette */
.card-r{background:#ED1C24;color:#fff}
.card-b{background:#0066B3;color:#fff}
.card-g{background:#009A44;color:#fff}
.card-y{background:#FFCD05;color:#1a1a1a}
.card-y .c-oval{background:rgba(0,0,0,.08)}

/* Wild card - 4 color quadrants */
.card-w{
  background:conic-gradient(from 45deg,#ED1C24 0deg 90deg,#0066B3 90deg 180deg,#009A44 180deg 270deg,#FFCD05 270deg 360deg);
  color:#fff;
}
.card-w .c-oval{background:rgba(0,0,0,.6);box-shadow:inset 0 0 10px rgba(0,0,0,.3)}
.card-w .c-val{text-shadow:0 0 8px rgba(255,255,255,.4),1px 1px 0 rgba(0,0,0,.5)}
.card-w .c-tl,.card-w .c-br{text-shadow:0 0 4px rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.8)}

/* Card back (draw pile) */
.card-back{background:#1a1a1a;border-color:#ED1C24}
.card-back .c-oval{background:#ED1C24;width:80%;height:64%;box-shadow:inset 0 0 12px rgba(0,0,0,.3),0 0 12px rgba(237,28,36,.3)}
.card-back .c-val{color:#FFCD05;font-style:italic;font-size:.85rem;letter-spacing:2px;text-shadow:1px 1px 0 rgba(0,0,0,.5)}

/* Top card (discard pile) - bigger */
.top-card{width:76px;height:114px;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.6)}
.top-card .c-tl{font-size:.75rem;top:5px;left:7px}
.top-card .c-br{font-size:.75rem;bottom:5px;right:7px}
.top-card .c-val{font-size:2rem}
.top-card .c-oval{box-shadow:inset 0 0 12px rgba(255,255,255,.15)}

/* ═══════ HAND ═══════ */
.hand-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 6px}
.hand-scroll::-webkit-scrollbar{display:none}
.hand{display:flex;gap:0;justify-content:center;min-height:100px;padding:6px 0;align-items:flex-end}
.hand .card{margin:0 -7px;cursor:default;flex-shrink:0}
.hand .card:first-child{margin-left:0}
.hand .card:last-child{margin-right:0}

/* Playable cards float up with glow */
.hand .card.playable{
  cursor:pointer;
  margin-top:0;margin-bottom:14px;
  border-color:#fff;
  animation:cardGlow 1.8s ease-in-out infinite;
}
.hand .card.playable:active{transform:scale(.9);animation:none}

@keyframes cardGlow{
  0%,100%{box-shadow:0 0 8px rgba(255,255,255,.25),0 4px 12px rgba(0,0,0,.4)}
  50%{box-shadow:0 0 22px rgba(255,255,255,.5),0 6px 24px rgba(0,0,0,.4)}
}

/* Non-playable cards slightly dimmer */
.hand .card:not(.playable){opacity:.75;border-color:rgba(255,255,255,.5)}

/* ═══════ COLOR PICKER ═══════ */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.picker-box{background:rgba(20,20,50,.95);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:32px;max-width:340px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.picker-box h2{margin-bottom:24px;font-size:1.3rem;font-weight:700;color:rgba(255,255,255,.8)}
.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cbtn{padding:0;border:none;border-radius:14px;font-size:.9rem;font-weight:800;cursor:pointer;color:#fff;transition:transform .12s,box-shadow .12s;height:80px;display:flex;align-items:center;justify-content:center;letter-spacing:1px;border:3px solid rgba(255,255,255,.8);position:relative;overflow:hidden}
.cbtn:active{transform:scale(.92)}
.cbtn-r{background:#ED1C24;box-shadow:0 4px 20px rgba(237,28,36,.4)}
.cbtn-b{background:#0066B3;box-shadow:0 4px 20px rgba(0,102,179,.4)}
.cbtn-g{background:#009A44;box-shadow:0 4px 20px rgba(0,154,68,.4)}
.cbtn-y{background:#FFCD05;color:#1a1a1a;box-shadow:0 4px 20px rgba(255,205,5,.4)}
.cbtn-r:active{box-shadow:0 2px 10px rgba(237,28,36,.3)}
.cbtn-b:active{box-shadow:0 2px 10px rgba(0,102,179,.3)}
.cbtn-g:active{box-shadow:0 2px 10px rgba(0,154,68,.3)}
.cbtn-y:active{box-shadow:0 2px 10px rgba(255,205,5,.3)}

/* ═══════ END SCREEN ═══════ */
.result-box{margin:20px 0;text-align:left}
.result-player{padding:14px 16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:12px;margin-bottom:8px;font-size:.95rem}
.result-player.winner{background:rgba(255,205,5,.1);border-color:rgba(255,205,5,.3);font-weight:700;box-shadow:0 0 16px rgba(255,205,5,.1)}

/* ═══════ TOAST ═══════ */
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(20,20,50,.92);border:1px solid rgba(255,255,255,.1);color:#fff;padding:12px 28px;border-radius:50px;font-size:.9rem;font-weight:600;opacity:0;transition:all .3s;z-index:200;pointer-events:none;white-space:nowrap;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(0,0,0,.4)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

#end-screen.active{display:flex}

/* ═══════ DRAW PILE STACK EFFECT ═══════ */
.draw-pile{position:relative}
.draw-pile::before,.draw-pile::after{
  content:'';position:absolute;
  width:56px;height:84px;border-radius:10px;
  background:#1a1a1a;border:3px solid rgba(237,28,36,.5);
}
.draw-pile::before{top:4px;left:4px;z-index:-2;opacity:.4}
.draw-pile::after{top:2px;left:2px;z-index:-1;opacity:.6}