*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Arial;color:#fff;-webkit-tap-highlight-color:transparent;
  background:#0b3d2e radial-gradient(900px 600px at 50% -100px,#1c7a4e,#0b3d2e 62%,#07291f) fixed}
#app{max-width:520px;margin:0 auto;padding:10px}
header{display:flex;justify-content:space-between;align-items:center;padding:8px 4px;gap:8px;flex-wrap:wrap}
#roomInfo{font-weight:800;letter-spacing:.3px}
#conn{font-size:12px}
#conn.on{color:#8ef58e}#conn.off{color:#ff8a8a}
#trump{font-size:13px;opacity:.9}

/* ---------- лобби ---------- */
#lobby{display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:16px 14px 14px;
  backdrop-filter:blur(5px);animation:rise .5s cubic-bezier(.2,.8,.3,1) backwards}
#logo{position:relative;height:106px}
.logo-card{position:absolute;width:64px;height:88px;border-radius:8px;background-color:#fff;
  background-size:cover;box-shadow:0 8px 20px rgba(0,0,0,.45);transform:rotate(var(--rot,0deg));
  animation:float 3.6s ease-in-out infinite}
.logo-card:nth-child(2){animation-delay:.35s}
.logo-card:nth-child(3){animation-delay:.7s}
.logo-card:nth-child(4){animation-delay:1.05s}
#lobby h1{margin:0;text-align:center;font-size:28px;text-shadow:0 2px 10px rgba(0,0,0,.45)}
#lobby .sub{margin:-4px 0 4px;text-align:center;font-size:13px;opacity:.75}
input{background:#fff;color:#111;border:0;border-radius:10px;padding:11px;font-size:16px}
label.check{display:flex;align-items:center;gap:8px;font-size:14px}
label.check input{width:18px;height:18px;padding:0}
.row{display:flex;gap:8px}
button{flex:1;padding:12px;border:0;border-radius:12px;font-size:16px;font-weight:800;cursor:pointer;
  background:linear-gradient(180deg,#ffd54f,#ffb300);color:#222;
  box-shadow:0 4px 14px rgba(255,179,0,.35);transition:transform .08s,filter .2s}
button:active{transform:scale(.96)}
button:hover{filter:brightness(1.07)}
.hint{opacity:.75;font-size:13px;margin:2px 0 0}

/* ---------- игра ---------- */
#game{animation:rise .35s ease-out backwards}
#players{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.pl{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.28);padding:4px 10px 4px 4px;
  border-radius:999px;font-size:13px;transition:opacity .3s}
.pl .ava{width:24px;height:24px;border-radius:50%;flex:none;color:#222;font-weight:800;font-size:12px;
  background:linear-gradient(135deg,#ffd54f,#ff8f00);display:flex;align-items:center;justify-content:center}
.pl.me{outline:2px solid #ffca28}
.pl.att .ava{animation:ringR 1.3s ease-in-out infinite}
.pl.def .ava{animation:ringB 1.3s ease-in-out infinite}
.pl.out{opacity:.55}

#tableRow{display:flex;gap:10px;align-items:center}
#table{flex:1;min-height:150px;background:rgba(9,60,38,.65);border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 2px 14px rgba(0,0,0,.35);border-radius:14px;padding:8px;
  display:flex;gap:8px;flex-wrap:wrap;align-content:flex-start}
.pair{display:flex;background:rgba(0,0,0,.22);padding:5px;border-radius:9px;animation:pop .25s ease-out backwards}
.pair .card+.card{margin-left:-26px}
.card{width:64px;height:88px;flex:none;border-radius:8px;background-color:#fff;background-size:cover;
  background-position:center;color:#111;position:relative;box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform .15s}
.card.sel{outline:3px solid #ffca28;transform:translateY(-10px)}
.card.back{background:#b71c1c url(assets/shirt.png) center/cover}
@media (hover:hover){#hand .card:hover{transform:translateY(-8px)}}
.card.deal{animation:dealIn .5s cubic-bezier(.2,.8,.3,1.15) backwards}
.card.thrown-a{animation:throwA .35s cubic-bezier(.2,.8,.3,1) backwards}
.card.thrown-d{animation:throwD .35s cubic-bezier(.2,.8,.3,1) backwards}

/* колода + козырь */
#deckZone{flex:none}
.deckWrap{position:relative;width:170px;height:104px}
.deckWrap .card{position:absolute;box-shadow:0 3px 9px rgba(0,0,0,.45)}
#trumpCardEl{left:96px;top:8px;transform:rotate(90deg)}
#deckStack .card{left:12px;top:0}
#deckStack .card:nth-child(2){left:8px;top:3px}
#deckStack .card:nth-child(3){left:4px;top:6px}
#deckCount{position:absolute;left:4px;bottom:-8px;background:rgba(0,0,0,.6);border-radius:999px;
  padding:2px 9px;font-size:12px;white-space:nowrap}

#actions{display:flex;gap:8px;margin:8px 0}
#hand{display:flex;gap:6px;flex-wrap:wrap;min-height:104px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);padding:8px;border-radius:14px}
#status{margin:8px 2px;font-size:14px;min-height:20px;opacity:.95}
#status.err{color:#ffca28;font-weight:700}
.swap{animation:fadeSwap .3s ease-out}

/* ---------- финальный экран ---------- */
#endOverlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(3,18,12,.7);backdrop-filter:blur(4px);animation:fadeIn .3s ease-out}
.endCard{background:linear-gradient(165deg,#11593a,#0b3d2e);border:1px solid rgba(255,255,255,.16);
  border-radius:20px;padding:26px 34px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.6);
  animation:popIn .5s cubic-bezier(.2,.9,.3,1.25) .45s backwards;min-width:230px}
#endEmoji{font-size:64px;animation:bounce .8s cubic-bezier(.3,1.6,.4,1) .6s backwards}
#endText{font-size:21px;font-weight:800;margin-top:6px}
#endSub{font-size:14px;opacity:.8;margin:4px 0 16px}

.hidden{display:none!important}

/* ---------- keyframes ---------- */
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes float{0%,100%{transform:rotate(var(--rot,0deg)) translateY(0)}50%{transform:rotate(var(--rot,0deg)) translateY(-9px)}}
@keyframes dealIn{from{opacity:0;transform:translateY(-70px) rotate(-12deg) scale(.6)}}
@keyframes throwA{from{opacity:0;transform:translate(90px,-50px) rotate(14deg) scale(.7)}}
@keyframes throwD{from{opacity:0;transform:translate(28px,64px) rotate(-10deg) scale(.7)}}
@keyframes pop{from{opacity:0;transform:scale(.82)}}
@keyframes popIn{from{opacity:0;transform:scale(.55)}}
@keyframes fadeIn{from{opacity:0}}
@keyframes fadeSwap{from{opacity:0;transform:translateY(5px)}}
@keyframes ringR{0%,100%{box-shadow:0 0 0 0 rgba(255,82,82,.65)}50%{box-shadow:0 0 0 7px rgba(255,82,82,0)}}
@keyframes ringB{0%,100%{box-shadow:0 0 0 0 rgba(64,196,255,.65)}50%{box-shadow:0 0 0 7px rgba(64,196,255,0)}}
@keyframes bounce{from{transform:scale(.3)}60%{transform:scale(1.15)}to{transform:scale(1)}}

@media (max-width:430px){
  .deckWrap{width:118px;height:84px}
  .deckWrap .card{transform:scale(.76);transform-origin:top left}
  #trumpCardEl{transform:rotate(90deg) scale(.76);left:62px;top:6px}
  #deckStack .card{left:10px}
  #deckCount{font-size:11px;padding:1px 7px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}