/* Durak — стол (kartenspiele-kostenlos.de). Сукно рисует страница, здесь
   только карты, подписи, кнопки и итог партии. --dk-sprite и --dk-back
   задаёт site.js (колода и рубашка из «Aussehen»): рубашка — тот же узор и
   цвет, что движок рисует пасьянсам, с той же рамкой из самого узора. */
.dk{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)}
.dk-layer{position:absolute;inset:0}
.dk-card{position:absolute;left:0;top:0;border-radius:calc(var(--cw) * .06);
  background-image:var(--dk-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),box-shadow .15s ease,filter .15s ease;
  will-change:transform;cursor:default}
.dk-card.down{background:var(--dk-back,#8a1f24)}
/* свой ход: что можно положить — ярко, что нельзя — приглушено */
.dk-myturn .dk-card.ok{cursor:pointer}
.dk-myturn .dk-card.ok:hover{box-shadow:0 0 0 3px rgba(242,140,75,.9),0 10px 22px -6px rgba(0,0,0,.6)}
.dk-myturn .dk-card.no{filter:brightness(.72) saturate(.8)}
.dk-card.sel{box-shadow:0 0 0 3px #f28c4b,0 14px 28px -8px rgba(0,0,0,.7)}
.dk-card.target{cursor:pointer;box-shadow:0 0 0 3px #ffd36b,0 0 22px 2px rgba(255,211,107,.55)}
.dk-card.shake{animation:dk-shake .32s ease}
@keyframes dk-shake{0%,100%{margin-left:0}25%{margin-left:-6px}75%{margin-left:6px}}

.dk-tag,.dk-trump,.dk-msg,.dk-actions{position:absolute;left:0;top:0;pointer-events:none}
.dk-tag{font:700 13px/1 var(--ff-ui,sans-serif);color:#e6efe4;background:rgba(0,0,0,.28);
  padding:5px 10px;border-radius:99px;white-space:nowrap;z-index:300;letter-spacing:.01em}
.dk-tag.turn{background:#f28c4b;color:#1d0d02}
.dk-talon-tag{min-width:26px;text-align:center}
.dk-trump{z-index:300;display:flex;flex-direction:column;align-items:center;gap:1px;color:#e6efe4}
.dk-trump .s{font-size:22px;line-height:1;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.dk-trump .s.red{color:#ff6b5e}
.dk-trump small{font:700 10px/1 var(--ff-ui,sans-serif);letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.dk-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);transition:opacity .2s ease}
.dk-msg:empty{display:none}
.dk-msg.quiet{opacity:.75;font-weight:600}
.dk-actions{z-index:330;display:flex;gap:10px;pointer-events:auto;opacity:0;transition:opacity .15s ease}
.dk-actions.on{opacity:1}
.dk-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}
.dk-btn:hover{background:rgba(255,255,255,.24)}
.dk-btn-acc{background:#f28c4b;color:#1d0d02}
.dk-btn-acc:hover{background:#f7a36c}
.dk-btn[hidden]{display:none}

.dk-end{position:absolute;inset:0;z-index:400;display:grid;place-items:center;padding:20px;
  background:rgba(6,14,9,.55);backdrop-filter:blur(4px);opacity:0;transition:opacity .25s ease}
.dk-end.on{opacity:1}
.dk-end[hidden]{display:none}
.dk-end-box{width:min(400px,100%);padding:26px 24px 22px;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)}
.dk-end-mark{font-size:40px;line-height:1;color:#f28c4b;margin-bottom:6px}
.dk-end-mark.bad{color:#e2574c}
.dk-end-box b{display:block;font:800 30px/1.1 var(--ff-dis,Archivo,sans-serif);letter-spacing:-.02em;margin-bottom:8px}
.dk-end-box p{margin:0 0 18px;color:var(--txt-2,#b2c0b0);font-size:15px}

@media (max-width:600px){
  .dk-msg{font-size:13.5px;padding:6px 10px}
  .dk-btn{font-size:13.5px;padding:10px 14px}
  .dk-tag{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.dk-card{transition:none}}