/* ==========================================================================
   Skyjo – blaugrauer Spielfilz, matt bedruckte Karten
   ========================================================================== */
.sk { position: absolute; inset: 6px 8px 8px; display: flex; flex-direction: column; padding: 8px 10px 12px; gap: 10px; overflow: hidden; color: #e9eef5; }

/* ---------- Karten ---------- */
.sk-card {
  --c1: #3c69a8; --c2: #2c5288; --fg: #fbf6ea;
  position: relative; container-type: size; width: var(--cw, 64px); height: calc(var(--cw, 64px) * 1.4); border-radius: 9%/6.4%; flex: none; overflow: hidden;
  color: var(--fg); background: var(--grain), linear-gradient(165deg, var(--c1), var(--c2));
  box-shadow: inset 0 0 0 calc(var(--cw, 64px) * .035) #fbf6ea, inset 0 0 0 calc(var(--cw, 64px) * .045) rgba(0, 0, 0, .12), 0 1px 0 rgba(255, 255, 255, .3), 0 3px 6px rgba(0, 0, 0, .35), 0 8px 14px -6px rgba(0, 0, 0, .5);
  transition: transform .18s var(--ease), box-shadow .2s, opacity .2s;
}
.fx-fly .sk-card { --cw: 100%; height: 100% !important; }
.sk-card b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 50cqw/1 var(--display); font-variation-settings: "opsz" 144, "SOFT" 30; letter-spacing: -.04em; text-shadow: 0 2cqw 0 rgba(0, 0, 0, .18); }
.sk-card i.k { position: absolute; font: 800 15cqw/1 var(--display); font-style: normal; opacity: .9; }
.sk-card i.k1 { top: 9cqw; left: 11cqw; } .sk-card i.k2 { bottom: 9cqw; right: 11cqw; transform: rotate(180deg); }
.sk-card::after { content: ""; position: absolute; inset: 7cqw; border-radius: 6%; border: .8cqw solid rgba(255, 255, 255, .28); pointer-events: none; }
.sk-card.cm2 { --c1: #2f3d7c; --c2: #222d60; }
.sk-card.cm1 { --c1: #3f6fb0; --c2: #2f5790; }
.sk-card.c0 { --c1: #5b9fc4; --c2: #4787ab; }
.sk-card.cg { --c1: #5a9659; --c2: #457b45; }
.sk-card.cy { --c1: #e2b445; --c2: #cf9d2c; --fg: #2b231e; }
.sk-card.cy::after { border-color: rgba(43, 35, 30, .2); }
.sk-card.cr { --c1: #c44a35; --c2: #a63a28; }
.sk-card.back { --c1: #273457; --c2: #1b2541; }
.sk-card.back::before {
  content: ""; position: absolute; inset: 7cqw; border-radius: 6%;
  background: repeating-linear-gradient(45deg, rgba(251, 246, 234, .09) 0 2px, transparent 2px 9cqw), repeating-linear-gradient(-45deg, rgba(251, 246, 234, .09) 0 2px, transparent 2px 9cqw);
}
.sk-card.back span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); z-index: 2; padding: 2cqw 6cqw; border-radius: 3cqw;
  font: 800 13cqw/1 var(--display); letter-spacing: .14em; color: #d9a23a; background: #1b2541; box-shadow: 0 0 0 .8cqw rgba(217, 162, 58, .55); }
.sk-card.gone { background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }
.sk-card.gone::after, .sk-card.empty::after { display: none; }
.sk-card.empty { background: rgba(0, 0, 0, .12); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14); }
.sk-card.hint { cursor: pointer; box-shadow: inset 0 0 0 calc(var(--cw, 64px) * .035) #fbf6ea, 0 0 0 3px var(--mustard), 0 10px 18px -6px rgba(0, 0, 0, .6); }
.sk-card.dim { opacity: .5; }
.sk-me .sk-card { cursor: pointer; }
.sk-me .sk-card:active { transform: scale(.96); }

/* ---------- Mitspieler (Handy) ---------- */
.sk-opps { flex: none; display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; min-height: 0; }
.sk-opps:empty { display: none; }
.sk-opps::-webkit-scrollbar { display: none; }
.sk-opp { --cw: 21px; flex: none; padding: 6px 7px 7px; border-radius: 10px; cursor: pointer; background: rgba(8, 14, 26, .35); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .08); transition: transform .35s var(--spring), box-shadow .3s, background .3s; }
.sk-opp.cur { background: rgba(8, 14, 26, .55); box-shadow: inset 0 0 0 3px var(--turn-ring); transform: translateY(-2px); }
.sk-opp .oh { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; font: 700 17px/1 var(--hand); color: #fbf6ea; }
.sk-opp .oh .av { --s: 20px; }
.sk-opp .oh .nm { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-opp .oh b { margin-left: auto; font: 800 12px var(--display); color: #aebccd; }
.sk-opp.ready .oh b::after { content: " ✓"; color: #8fd0a6; }
.sk-opp .og { display: grid; grid-template-columns: repeat(4, var(--cw)); gap: 3px; }
.sk-opp .sk-card { border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.sk-opp .sk-card::after, .sk-opp .sk-card i.k, .sk-opp .sk-card.back span, .sk-opp .sk-card.back::before { display: none; }
.sk-opp .sk-card b { font-size: 52cqw; text-shadow: none; }
.sk-opp .sk-card.gone { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.sk-opp .sk-card.back { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .4); }

/* ---------- Tischmitte: Nachzieh- & Ablagestapel ---------- */
.sk-table { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sk-piles { --cw: clamp(56px, 17vw, 74px); display: flex; justify-content: center; gap: 26px; padding-top: 4px; }
.sk-pile { position: relative; border-radius: 9%/6.4%; }
.sk-pile.draw .stack { position: absolute; inset: 0; }
.sk-pile.draw .stack::before, .sk-pile.draw .stack::after { content: ""; position: absolute; inset: 0; border-radius: 9%/6.4%; background: #1b2541; box-shadow: inset 0 0 0 2px #fbf6ea, 0 3px 5px rgba(0, 0, 0, .4); }
.sk-pile.draw .stack::before { transform: translate(5px, 4px) rotate(4deg); }
.sk-pile.draw .stack::after { transform: translate(2px, 2px) rotate(1.5deg); }
.sk-pile.can { cursor: pointer; }
.sk-pile.can > .sk-card { box-shadow: inset 0 0 0 calc(var(--cw) * .035) #fbf6ea, 0 0 0 3px var(--mustard), 0 10px 18px -6px rgba(0, 0, 0, .6); }
.sk-pile.disc.target > .sk-card, .sk-pile.disc.picked > .sk-card { box-shadow: inset 0 0 0 calc(var(--cw) * .035) #fbf6ea, 0 0 0 3px var(--mustard), 0 10px 18px -6px rgba(0, 0, 0, .6); }
.sk-pile.disc.picked > .sk-card { transform: translateY(-10px) rotate(-3deg); }
/* gezogene Karte liegt angehoben auf dem Stapel */
.sk-held { position: absolute; inset: 0; z-index: 4; transform: translate(14%, -16%) rotate(5deg); filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .5)); touch-action: none; }
.sk-held.disc { transform: translate(-12%, -16%) rotate(-5deg); }
.sk-held.mine { cursor: grab; }
.sk-held .sk-card { box-shadow: inset 0 0 0 calc(var(--cw) * .035) #fbf6ea, 0 0 0 3px var(--mustard); }
.sk-pile.disc > .sk-card, .sk-pile.disc [data-held] { touch-action: none; }
.sk-cue { min-height: 26px; display: flex; justify-content: center; }

/* ---------- Eigenes Raster ---------- */
.sk-me { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.sk-grid { --cw: max(48px, min(86px, calc((100vw - 70px) / 4), calc((100dvh - 470px) / 4.4))); position: relative; display: grid; grid-template-columns: repeat(4, var(--cw)); gap: 8px; padding: 10px; border-radius: 14px; background: rgba(0, 0, 0, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .08); transition: box-shadow .4s; }
.sk-grid.active { box-shadow: inset 0 0 0 3px var(--turn-ring); }
.sk-score { position: absolute; right: -6px; top: -12px; min-width: 34px; padding: 4px 8px; text-align: center; border-radius: 99px; background: var(--grain), var(--paper); color: var(--ink); font: 800 14px var(--display); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }

/* ---------- Tisch-Ansicht ---------- */
.sk.table { flex-direction: row; gap: 24px; padding: 16px 20px; }
.sk.table .sk-side { flex: none; width: clamp(220px, 24%, 340px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.sk.table .sk-piles { --cw: clamp(70px, 8vw, 120px); gap: 34px; }
.sk-boards { flex: 1; min-width: 0; display: grid; gap: 16px; justify-content: center; align-content: center; }
.sk-board { padding: 10px 12px 12px; border-radius: 12px; background: rgba(8, 14, 26, .32); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .08); transition: transform .45s var(--spring), box-shadow .4s, background .4s; }
.sk-board.cur { background: rgba(8, 14, 26, .5); transform: translateY(-4px) scale(1.02); box-shadow: inset 0 0 0 3px var(--turn-ring); }
.sk-board .bh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; height: 42px; }
.sk-board .bh .av { --s: 38px; }
.sk-board .bh b { flex: 1; min-width: 0; font: 700 26px/1 var(--hand); color: #fbf6ea; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-board .bh .sc { font: 800 22px var(--display); color: #fbf6ea; }
.sk-board.ready .bh .sc::after { content: " ✓"; color: #8fd0a6; font-size: 16px; }
.sk-board .sk-grid { --cw: inherit; padding: 6px; gap: 6px; background: rgba(0, 0, 0, .18); }

/* ---------- Rundenwertung ---------- */
.sk-score-o, .sk-peek { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(14, 8, 4, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fadeIn .3s; }
.sk-score-o .sheet, .sk-peek .sheet { position: relative; max-width: 440px; }
.sk-tbl { width: 100%; border-collapse: collapse; margin: 4px 0; font-size: 15px; }
.sk-tbl th { font: 800 10.5px var(--text); color: var(--ink-3); letter-spacing: .12em; text-transform: uppercase; padding: 4px 6px; text-align: right; border-bottom: 1.5px solid var(--ink); }
.sk-tbl td { padding: 8px 6px; text-align: right; border-bottom: 1px solid var(--line); font: 700 22px/1 var(--hand); }
.sk-tbl td.nm { text-align: left; }
.sk-tbl td.nm .w { display: flex; align-items: center; gap: 8px; }
.sk-tbl td.nm .av { --s: 28px; }
.sk-tbl .fin { font: 800 9.5px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.sk-tbl td.tot { font: 800 20px var(--display); }
.sk-tbl tr.lead td.tot { color: var(--teal); }
.sk-tbl .x2 { color: var(--red); font: 800 12px var(--text); margin-left: 4px; }
.sk-collapsed { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 20; }
.sk-peek .sk-grid { --cw: min(66px, calc((100vw - 120px) / 4)); margin: 10px auto 0; background: #22304a; }
.sk-peek .ph { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sk-peek .ph .av { --s: 44px; }
.sk-peek .ph h2 { margin: 0; font-family: var(--hand); font-size: 34px; }
.sk-peek .ph .pt { font: 800 22px var(--display); }

@media (max-height: 720px) {
  .sk { gap: 6px; }
  .sk-opp { --cw: 18px; }
  .sk-piles { --cw: 52px; }
  .sk-grid { gap: 6px; padding: 8px; --cw: max(44px, min(80px, calc((100vw - 60px) / 4), calc((100dvh - 400px) / 4.4))); }
}

/* Tisch-Physik: Stapel-Historie hat die Kartenbreite des Stapels */
.sk-pile .pile-under .sk-card { --cw: inherit; }
.sk-opp .sk-card.tilt { rotate: none; translate: none; } /* Mini-Raster bleibt ordentlich lesbar */