/* Hearts — стол (kartenspiele-kostenlos.de). Сукно рисует страница, здесь
   только карты, подписи игроков, кнопка и итоги раундов. --ht-sprite и
   --ht-back задаёт site.js (колода и рубашка из «Aussehen»), как у Durak.
   Цвет выделения (кнопки, «твой ход», выбранные карты): --own-acc и
   --own-ink от сайта (OWN_ACCENT в config.php, render.php ставит их на
   #fs-own); нет их — медный, как на kartenspiele (24.09.2026, окно EN). */
.ht{position:relative;width:100%;height:100%;overflow:hidden;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;font-family:var(--ff-ui,Manrope,system-ui,sans-serif);
  --ht-acc:var(--own-acc,#f28c4b);--ht-ink:var(--own-ink,#1d0d02);
  isolation:isolate}   /* z-index карт и итогов — только внутри стола, не поверх окон сайта */
.ht-layer{position:absolute;inset:0}
.ht-card{position:absolute;left:0;top:0;border-radius:calc(var(--cw) * .06);
  background-image:var(--ht-sprite);background-size:1300% 500%;background-repeat:no-repeat;background-color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.35),0 4px 12px -4px rgba(0,0,0,.45);
  transition:transform .38s cubic-bezier(.2,.75,.25,1),opacity .38s ease,box-shadow .15s ease,filter .15s ease;
  will-change:transform;cursor:default}
.ht-card.down{background:var(--ht-back,#8a1f24)}
/* свой ход: что можно сыграть — ярко, что нельзя — приглушено */
.ht-myturn .ht-card.ok{cursor:pointer}
.ht-myturn .ht-card.ok:hover{box-shadow:0 0 0 3px var(--ht-acc),0 10px 22px -6px rgba(0,0,0,.6)}
.ht-myturn .ht-card.no{filter:brightness(.7) saturate(.8)}
.ht-card.sel{box-shadow:0 0 0 3px var(--ht-acc),0 14px 28px -8px rgba(0,0,0,.7)}
.ht-card.got{box-shadow:0 0 0 3px #ffd36b,0 0 22px 2px rgba(255,211,107,.5)}
.ht-card.shake{animation:ht-shake .32s ease}
@keyframes ht-shake{0%,100%{margin-left:0}25%{margin-left:-6px}75%{margin-left:6px}}

.ht-tag,.ht-msg,.ht-actions{position:absolute;left:0;top:0;pointer-events:none}
.ht-tag{z-index:300;display:flex;align-items:center;gap:7px;padding:5px 10px 5px 11px;border-radius:99px;
  background:rgba(0,0,0,.3);color:#e6efe4;font:600 13px/1 var(--ff-ui,sans-serif);white-space:nowrap}
.ht-tag b{font-weight:800}
.ht-tag .sc{font-variant-numeric:tabular-nums;color:#ffd9bd;font-weight:800}
.ht-tag .mk{display:flex;gap:2px;align-items:center}
.ht-tag .mk:empty{display:none}
.ht-tag .mk i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35);font:700 9px/9px sans-serif;
  font-style:normal;text-align:center;color:transparent}
.ht-tag .mk i.mh{background:none;color:#ff6b5e;font-size:11px;line-height:9px}
.ht-tag .mk i.mq{background:none;color:#fff;font-size:11px;line-height:9px}
.ht-tag.turn{background:var(--ht-acc);color:var(--ht-ink)}
.ht-tag.turn .sc{color:var(--ht-ink)}
.ht-tag.turn .mk i{background:rgba(0,0,0,.25)}
.ht-tag.turn .mk i.mh,.ht-tag.turn .mk i.mq{background:none;color:#5a1208}
.ht-msg{z-index:320;max-width:min(560px,92%);text-align:center;font:700 15px/1.3 var(--ff-ui,sans-serif);
  color:#fff;background:rgba(8,20,12,.55);padding:8px 14px;border-radius:10px;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6)}
.ht-msg:empty{display:none}
.ht-msg.quiet{opacity:.78;font-weight:600}
.ht-actions{z-index:330;display:flex;gap:10px;pointer-events:auto;opacity:0;transition:opacity .15s ease}
.ht-actions.on{opacity:1}
.ht-btn{font:800 15px/1 var(--ff-ui,sans-serif);letter-spacing:.02em;padding:11px 18px;border-radius:10px;border:0;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;box-shadow:0 6px 16px -8px rgba(0,0,0,.7);
  text-transform:uppercase}
.ht-btn-acc{background:var(--ht-acc);color:var(--ht-ink)}
.ht-btn-acc:hover{filter:brightness(1.1)}
.ht-btn[hidden]{display:none}

.ht-end{position:absolute;inset:0;z-index:400;display:grid;place-items:center;padding:16px;
  background:rgba(6,14,9,.5);backdrop-filter:blur(3px);opacity:0;transition:opacity .25s ease}
.ht-end.on{opacity:1}
.ht-end[hidden]{display:none}
.ht-end-box{width:min(440px,100%);max-height:100%;overflow:auto;padding:22px 22px 20px;text-align:center;border-radius:16px;
  background:var(--panel,#162018);border:1px solid var(--line,#253427);color:var(--txt,#eef3ec);
  box-shadow:0 30px 80px -28px rgba(0,0,0,.9)}
.ht-end-mark{font-size:36px;line-height:1;color:#e2574c;margin-bottom:4px}
.ht-end-mark.bad{color:#b2c0b0}
.ht-end-box b{display:block;font:800 28px/1.1 var(--ff-dis,Archivo,sans-serif);letter-spacing:-.02em;margin-bottom:6px}
.ht-end-box p{margin:0 0 12px;color:var(--txt-2,#b2c0b0);font-size:15px}
.ht-score{width:100%;border-collapse:collapse;margin:6px 0 16px;font-size:14px;font-variant-numeric:tabular-nums}
.ht-score th,.ht-score td{padding:5px 6px;border-bottom:1px solid var(--line,#253427);text-align:center}
.ht-score th{font:800 11px/1.2 var(--ff-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3,#8c9a8a)}
.ht-score th:first-child,.ht-score td:first-child{text-align:left;color:var(--txt-3,#8c9a8a)}
.ht-score tfoot td{font-weight:800;border-bottom:0;padding-top:8px;color:var(--txt,#eef3ec)}
/* лучший счёт — на панели итогов (светлой в светлой теме): цвет темы сайта */
.ht-score tfoot td.best{color:var(--accent,#f28c4b)}

@media (max-width:600px){
  .ht-msg{font-size:13.5px;padding:6px 10px}
  .ht-btn{font-size:13.5px;padding:10px 14px}
  .ht-tag{font-size:12px;padding:4px 8px;gap:5px}
  .ht-tag .mk{display:none}
}
/* Низкий стол (телефон лёжа, 640×360: стол ~250 px): итоги раунда плотнее,
   без значка, из истории — два последних раунда и итог; кнопка «дальше»
   всегда видна внизу окна, даже если таблица не влезла (24.09, окно EN) */
.ht-end-box .ht-btn{position:sticky;bottom:0}
@media (max-height:480px){
  .ht-end{padding:8px}
  .ht-end-box{padding:10px 16px 12px}
  .ht-end-mark{display:none}
  .ht-end-box b{font-size:21px;margin-bottom:2px}
  .ht-end-box p{font-size:13px;margin:0 0 6px}
  .ht-score{margin:2px 0 8px;font-size:13px}
  .ht-score th,.ht-score td{padding:3px 5px}
  .ht-score tbody tr:nth-last-child(n+3){display:none}
  .ht-btn{padding:9px 16px}
}
@media (prefers-reduced-motion:reduce){.ht-card{transition:none}}