*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at top,#1f2937,#050816 70%);color:#fff;font-family:Tahoma,Arial,sans-serif;min-height:100vh}
#app{max-width:1200px;margin:0 auto;padding:18px}
.top{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#0f172acc;border:1px solid #ffffff20;border-radius:24px;padding:18px;box-shadow:0 20px 50px #0008}
h1,h2,h3,p{margin-top:0}
.top h1{font-size:34px;margin-bottom:4px}
.top p{color:#cbd5e1;margin-bottom:0}
.wallet{text-align:center;background:#020617;border:1px solid #ffffff18;border-radius:18px;padding:12px;min-width:190px}
.wallet b{font-size:28px;color:#facc15}
button,input,select{font-family:Tahoma,Arial,sans-serif}
button{border:0;border-radius:14px;background:#2563eb;color:#fff;font-weight:900;padding:11px 14px;cursor:pointer;box-shadow:0 10px 24px #0005}
button:hover{filter:brightness(1.1)}
input,select{width:100%;border:1px solid #ffffff20;background:#020617;color:#fff;border-radius:14px;padding:12px;margin:8px 0}
.panel{background:#0f172acc;border:1px solid #ffffff20;border-radius:24px;padding:18px;margin-top:16px;box-shadow:0 20px 50px #0006}
.row{display:flex;gap:10px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.box{background:#02061788;border:1px solid #ffffff18;border-radius:18px;padding:16px}
.box label{display:block;color:#cbd5e1;margin:10px 0}
.box input[type=checkbox]{width:auto;margin-left:8px}
.game{margin-top:16px;background:#0f172acc;border:1px solid #ffffff20;border-radius:24px;padding:16px;box-shadow:0 20px 60px #0008}
.gameHead,.scoreBoard{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:#020617aa;border:1px solid #ffffff18;border-radius:18px;padding:12px;margin-bottom:12px}
.table{position:relative;height:520px;background:
radial-gradient(circle at center,#16653455 0 20%,transparent 45%),
linear-gradient(135deg,#064e3b,#052e2b);
border:10px solid #78350f;border-radius:38px;box-shadow:inset 0 0 80px #0008,0 20px 50px #0009;overflow:hidden}
.table:before{content:"";position:absolute;inset:22px;border:2px dashed #ffffff22;border-radius:28px}
.player{position:absolute;background:#020617cc;border:1px solid #ffffff22;border-radius:18px;padding:10px;min-width:130px;text-align:center;box-shadow:0 10px 25px #0007}
.topP{top:18px;left:50%;transform:translateX(-50%)}
.bottomP{bottom:18px;left:50%;transform:translateX(-50%)}
.leftP{left:18px;top:50%;transform:translateY(-50%)}
.rightP{right:18px;top:50%;transform:translateY(-50%)}
.center{position:absolute;inset:145px 190px;display:flex;align-items:center;justify-content:center;flex-direction:column}
.trick{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;min-height:120px}
.card{width:70px;height:98px;border-radius:12px;background:#fff;color:#111;display:flex;align-items:center;justify-content:center;flex-direction:column;font-weight:900;font-size:22px;box-shadow:0 10px 20px #0007;border:2px solid #e5e7eb;transition:.2s;position:relative}
.card.red{color:#dc2626}
.card.back{background:linear-gradient(135deg,#1d4ed8,#7c3aed);color:#fff}
.card.playable{cursor:pointer;transform:translateY(-8px);box-shadow:0 18px 28px #0008,0 0 0 3px #22c55e}
.card.playable:hover{transform:translateY(-16px) scale(1.04)}
.hand{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px;min-height:110px}
.trumpChooser{background:#020617dd;border:1px solid #ffffff22;border-radius:20px;padding:16px;text-align:center;box-shadow:0 20px 50px #0008}
.trumpChooser button{margin:4px;font-size:18px}
.waiting{padding:12px;text-align:center;color:#cbd5e1}
.log{margin-top:12px;max-height:150px;overflow:auto;background:#020617aa;border:1px solid #ffffff18;border-radius:16px;padding:12px;color:#cbd5e1;line-height:1.8}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#020617;color:#fff;border:1px solid #ffffff22;border-radius:16px;padding:12px 16px;display:none;box-shadow:0 20px 50px #0009;z-index:99}
@media(max-width:800px){
  #app{padding:10px}
  .top,.grid{display:block}
  .wallet{margin-top:12px}
  .table{height:460px;border-radius:24px}
  .center{inset:135px 95px}
  .player{min-width:95px;font-size:12px}
  .card{width:52px;height:76px;font-size:17px;border-radius:10px}
  .hand{gap:4px}
}

.played-card{display:flex;flex-direction:column;align-items:center;gap:4px;transition:.45s}
.empty-trick{color:#cbd5e1;background:#02061788;border:1px dashed #ffffff30;border-radius:16px;padding:18px}
.trick.collect{animation:holdThenCollect 2s ease-in-out forwards;transform-origin:center}
.trick.collect.to-bottom{--tx:0px;--ty:150px}
.trick.collect.to-top{--tx:0px;--ty:-145px}
.trick.collect.to-left{--tx:-180px;--ty:0px}
.trick.collect.to-right{--tx:180px;--ty:0px}
@keyframes holdThenCollect{
  0%{transform:translate(0,0) scale(1);opacity:1;filter:brightness(1.2)}
  68%{transform:translate(0,0) scale(1);opacity:1;filter:brightness(1.2)}
  100%{transform:translate(var(--tx),var(--ty)) scale(.35);opacity:0;filter:brightness(.8)}
}
.trick.collect .card{box-shadow:0 0 26px #facc1580,0 12px 24px #0008}

.pile{position:absolute;background:#02061799;border:1px solid #ffffff18;border-radius:16px;padding:10px;z-index:2;min-width:126px;text-align:center;color:#cbd5e1;font-size:12px}
.team0pile{bottom:110px;right:30px}.team1pile{top:110px;left:30px}
.pileCards{height:48px;margin-top:8px;display:flex;align-items:center;justify-content:center}
.miniBack{width:28px;height:40px;border-radius:6px;background:linear-gradient(135deg,#1d4ed8,#7c3aed);border:1px solid #93c5fd;margin-right:-14px;box-shadow:0 5px 12px #0008}.miniBack:nth-child(1){margin-right:0}
.played-card{animation:cardDrop .55s cubic-bezier(.2,1.25,.3,1) both}
@keyframes cardDrop{from{transform:translateY(-70px) rotate(-8deg) scale(.75);opacity:0}to{transform:none;opacity:1}}
@media(max-width:800px){.pile{min-width:95px;font-size:10px}.team0pile{bottom:92px;right:16px}.team1pile{top:92px;left:16px}}