.hearts-game{
  background:
    radial-gradient(ellipse at 50% 46%,rgba(34,151,146,.28),transparent 43%),
    repeating-linear-gradient(35deg,rgba(255,255,255,.012) 0 1px,transparent 1px 7px),
    linear-gradient(145deg,#0d5960,#073845 70%);
}
.hrt-table{min-height:600px;padding:16px}
.hrt-table:before{
  content:"";position:absolute;inset:54px 85px 118px;border:1px solid rgba(128,224,216,.11);
  border-radius:46%;box-shadow:inset 0 0 80px rgba(0,0,0,.12);pointer-events:none
}
.hrt-player{
  min-width:104px;padding:7px 10px;border:1px solid rgba(255,255,255,.1);border-radius:14px;
  background:rgba(2,24,33,.54);box-shadow:0 6px 18px rgba(0,0,0,.18);transition:.18s ease
}
.hrt-player.active{border-color:#ffd161;box-shadow:0 0 0 2px rgba(255,209,97,.18),0 7px 22px rgba(0,0,0,.23);transform:scale(1.04)}
.hrt-player.north.active{transform:translateX(-50%) scale(1.04)}
.hrt-avatar{
  display:grid;place-items:center;width:27px;height:27px;margin-bottom:3px;border-radius:50%;
  background:linear-gradient(145deg,#56c6d0,#357ca4);color:#fff;font:700 11px/1 Fredoka,sans-serif;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.16)
}
.hrt-cardfan{position:relative;width:72px;height:39px;margin:5px auto 2px}
.hrt-cardfan i{
  position:absolute;left:25px;top:1px;width:24px;height:34px;border:2px solid #e8e2d2;border-radius:4px;
  background:repeating-linear-gradient(45deg,#28598b 0 2px,#3970a6 2px 5px);box-shadow:0 2px 4px rgba(0,0,0,.25);
  transform-origin:50% 100%
}
.hrt-cardfan i:nth-child(1){transform:translateX(-18px) rotate(-16deg)}
.hrt-cardfan i:nth-child(2){transform:translateX(-10px) rotate(-8deg)}
.hrt-cardfan i:nth-child(3){transform:rotate(0)}
.hrt-cardfan i:nth-child(4){transform:translateX(10px) rotate(8deg)}
.hrt-cardfan i:nth-child(5){transform:translateX(18px) rotate(16deg)}
.hrt-trick{
  width:300px;height:260px;border:1px solid rgba(143,225,219,.18);border-radius:42%;
  background:radial-gradient(ellipse,rgba(0,0,0,.1),rgba(0,0,0,.025) 65%,transparent 66%);
  box-shadow:inset 0 0 35px rgba(0,0,0,.08)
}
.hrt-trick:before{content:"";position:absolute;inset:21px;border:1px dashed rgba(171,231,225,.1);border-radius:42%}
.hrt-trick-label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:rgba(197,232,231,.38);
  font:700 9px/1 "Space Grotesk",sans-serif;letter-spacing:.14em;text-transform:uppercase
}
.hrt-play{width:70px}.hrt-message{
  top:64%;width:auto;min-width:260px;padding:8px 15px;border:1px solid rgba(255,255,255,.09);
  border-radius:20px;background:rgba(3,28,38,.62);box-shadow:0 5px 18px rgba(0,0,0,.14)
}
.hrt-hand{bottom:20px;height:155px;width:min(94%,760px)}
.hrt-hand:before{
  content:"YOUR HAND";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  color:rgba(188,222,223,.44);font:700 8px/1 "Space Grotesk",sans-serif;letter-spacing:.16em
}
.hrt-hand.active:after{
  content:"";position:absolute;left:14%;right:14%;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,#ffd060,transparent);box-shadow:0 0 15px #ffd060
}
.hrt-hand .playing-card{
  width:82px;max-width:82px;margin-left:-22px;border-color:#cbd0d1;border-radius:8px;
  background:linear-gradient(145deg,#fff 0%,#fff 70%,#f0f2f1 100%);
  transform:translateY(var(--lift,0)) rotate(var(--rot,0deg));transition:transform .15s,filter .15s;
  touch-action:none;user-select:none;-webkit-user-drag:none
}
.hrt-drop-target{box-shadow:0 0 0 3px #ffd058 inset,0 0 22px rgba(255,208,88,.6);border-radius:12px}
.hrt-hand .playing-card:hover:not(.illegal),.hrt-hand .playing-card.pass-selected{
  transform:translateY(-16px) rotate(var(--rot,0deg))
}
.hrt-corner{position:absolute;display:flex;flex-direction:column;align-items:center;width:24%;font:700 13px/.82 Fredoka,sans-serif}
.hrt-corner i{font:400 13px/1 serif;font-style:normal;margin-top:2px}.hrt-corner.top{left:4px;top:6px}.hrt-corner.bottom{right:4px;bottom:6px;transform:rotate(180deg)}
.hrt-center{position:absolute;inset:18% 22%;display:grid;place-items:center;font:400 34px/1 serif}
.hrt-center.court{border:2px solid currentColor;border-radius:7px;background:linear-gradient(135deg,rgba(235,183,65,.15),rgba(47,126,161,.1));font:700 27px/1 Fredoka,sans-serif}
.hrt-center.court small{display:block;font:400 18px/1 serif}.hrt-mini-pips{position:absolute;inset:11% 18%;display:block;font:400 18px/1 serif}.hrt-mini-pips i{position:absolute;font-style:normal}
.hrt-play .hrt-corner{font-size:10px}.hrt-play .hrt-corner i{font-size:10px}.hrt-play .hrt-center{font-size:27px}.hrt-play .hrt-center.court{font-size:21px}.hrt-play .hrt-mini-pips{font-size:13px}
@media(max-width:700px){
  .hrt-table{min-height:570px}.hrt-table:before{inset:65px 36px 110px}.hrt-player{min-width:76px;padding:5px}
  .hrt-avatar{width:23px;height:23px}.hrt-cardfan{transform:scale(.82);margin:1px auto -2px}.hrt-trick{width:225px;height:220px}
  .hrt-play{width:58px}.hrt-message{top:64%;min-width:210px;font-size:10px}.hrt-hand{height:132px}
  .hrt-hand .playing-card{width:67px;max-width:67px;margin-left:-25px}.hrt-center{font-size:27px}.hrt-mini-pips{font-size:14px}
}
@media(max-width:410px){
  .hrt-table{min-height:550px}.hrt-table:before{inset:67px 15px 105px}.hrt-player{min-width:63px}
  .hrt-player.west{left:2px}.hrt-player.east{right:2px}.hrt-player b{display:none}.hrt-cardfan{transform:scale(.7);margin:-3px auto -6px}
  .hrt-trick{width:185px;height:190px}.hrt-message{min-width:180px}.hrt-hand .playing-card{margin-left:-29px}
}