/* 10 Steps — table, piles, melds and hand. Shared table chrome (seats, banners,
   buttons, activity rail) lives in the shell's style.css; nothing here is generic.
   The four suits are colours, so the cards carry the palette. */

.s10-rules { margin: 0; padding-left: 20px; font-size: 12.5px; line-height: 1.7; color: var(--muted, #9DB3A6); }
.s10-rules li { margin: 2px 0; }
.s10-rules b { color: var(--ink, #E8F0EA); }

/* ---- piles ---- */
.s10-piles { display: flex; gap: 10px; justify-content: center; margin: 6px 0 10px; }
.s10-pile {
  flex: 0 0 92px; height: 108px; border-radius: 12px; cursor: pointer;
  background: #16281E; border: 1.5px solid #2C4636; color: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transition: border-color .15s, transform .1s;
}
/* `hot` means it is your move and this pile is the move — it breathes so the eye
   lands on it without a banner. */
.s10-pile.hot { border-color: #C8A44E; animation: s10-breathe 2.2s ease-in-out infinite; }
.s10-pile.drop { border-color: #6FBF8B; border-style: dashed; }
.s10-pile:hover { transform: translateY(-2px); }
.s10-pile:active { transform: scale(.97); }
@keyframes s10-breathe {
  0%, 100% { box-shadow: 0 0 0 2px rgba(200,164,78,.14); }
  50%      { box-shadow: 0 0 0 5px rgba(200,164,78,.05), 0 0 14px rgba(200,164,78,.22); }
}
.s10-plabel { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #9DB3A6; }
.s10-back {
  width: 46px; height: 62px; border-radius: 8px; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #24402F 0 6px, #1B3125 6px 12px);
  border: 1.5px solid #35513E; font-size: 18px; color: #7FA98D;
}

/* ---- a card face: the number is the whole design ---- */
/* the tint, the rim light and the shadow are all mixed from the card's own
   `color`, so the six colour rules below stay one line each and every new
   colour dresses itself. */
.s10-card, .s10-mini {
  position: relative; overflow: hidden;
  display: grid; place-items: center; border-radius: 8px;
  font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif; font-weight: 800;
  border: 1.5px solid currentColor;
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, currentColor 26%, transparent), transparent 70%),
    linear-gradient(165deg, color-mix(in srgb, currentColor 14%, #101C15), #0C160F);
  box-shadow: 0 2px 5px rgba(0,0,0,.45), inset 0 1px 0 color-mix(in srgb, currentColor 45%, transparent);
  text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 12px color-mix(in srgb, currentColor 40%, transparent);
}
.s10-card { width: 46px; height: 62px; font-size: 22px; }
.s10-mini { width: 22px; height: 28px; font-size: 12px; }
.s10-card.r, .s10-mini.r { color: #E2685F; }
.s10-card.b, .s10-mini.b { color: #5E9BE0; }
.s10-card.y, .s10-mini.y { color: #D9B54A; }
.s10-card.g, .s10-mini.g { color: #61B87C; }
.s10-card.w, .s10-mini.w { color: #C8A44E; background: linear-gradient(135deg, #33254A, #1B2E22); }
.s10-card.s, .s10-mini.s { color: #9DB3A6; }
/* a Wild is worth 25 and stands for anything — it is the one card that moves on
   its own, so it catches a slow highlight instead of sitting flat. */
.s10-card.w::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.30) 50%, transparent 58%);
  background-size: 260% 100%; animation: s10-shine 3.4s ease-in-out infinite;
}
@keyframes s10-shine { 0%, 65% { background-position: 130% 0; } 100% { background-position: -30% 0; } }

/* ---- the felt: seats around the rim, piles in the middle ---- */
/* One oval, and every seat is placed on it from JS as a left/top percentage, so
   two players sit across from each other and six share the same rim without a
   media query or a per-count rule. */
.s10-felt {
  position: relative; height: clamp(300px, 84vw, 344px);
  border-radius: 46% / 40%;
  background: radial-gradient(120% 90% at 50% 20%, #1E3A2C 0%, #14261D 62%, #0F1E17 100%);
  border: 6px solid #23150E; box-shadow: inset 0 0 0 2px #3A2417, inset 0 8px 30px rgba(0,0,0,.5);
  margin: 2px 0 4px;
}
.s10-ring { position: absolute; inset: 0; }
/* the piles sit dead centre; they shrink here so six seat chips still clear them */
.s10-felt .s10-piles {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  margin: 0; gap: 8px;
}
.s10-felt .s10-pile { flex: 0 0 72px; height: 92px; }

/* a seat chip. Centred on its point on the oval, so the oval is the only thing
   that decides where players sit. */
.s10-p {
  position: absolute; transform: translate(-50%, -50%);
  width: 90px; padding: 5px 5px 4px; border-radius: 12px; text-align: center;
  background: #16281E; border: 1.5px solid #2C4636;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.s10-p.on { border-color: #C8A44E; box-shadow: 0 0 0 2px rgba(200,164,78,.2), 0 6px 16px rgba(0,0,0,.45); }
.s10-p.open { opacity: .55; border-style: dashed; }
.s10-pav {
  position: relative; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 800 13px 'Bricolage Grotesque', sans-serif; color: #fff; background: #35513E;
}
.s10-p.t0 .s10-pav { background: #2F63D8; } .s10-p.t1 .s10-pav { background: #D96F23; }
.s10-p.t2 .s10-pav { background: #7C50E0; } .s10-p.t3 .s10-pav { background: #2E9E6B; }
.s10-p.t4 .s10-pav { background: #C8443F; } .s10-p.t5 .s10-pav { background: #2FA0B8; }
.s10-dchip {
  position: absolute; right: -5px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%;
  display: grid; place-items: center; font: 700 9px/1 'Instrument Sans', sans-serif; font-style: normal;
  background: #C8A44E; color: #14231A; border: 1.5px solid #16281E;
}
.s10-pname {
  max-width: 100%; font-size: 11.5px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s10-pstat { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: #9DB3A6; }
/* the step badge is the number itself — it is the one thing you check on someone
   else's chip, so it reads as a rung and not as another count */
.s10-pstep {
  min-width: 16px; padding: 0 4px; border-radius: 6px;
  background: #23392B; color: #CFE0D2; font-weight: 700;
}
.s10-pscore { font: 700 12px 'Bricolage Grotesque', sans-serif; color: #E8F0EA; }

/* a narrow phone has no room for six 90px chips around 144px of piles, so the
   whole table steps down a size rather than letting anything overlap */
@media (max-width: 420px) {
  .s10-p { width: 78px; }
  .s10-pname { font-size: 10.5px; }
  .s10-pstat { gap: 3px; font-size: 9.5px; }
  .s10-felt .s10-pile { flex: 0 0 62px; height: 82px; }
  .s10-felt .s10-back, .s10-felt .s10-card { width: 38px; height: 52px; font-size: 18px; }
}
/* and the smallest phones still in the wild step down once more */
@media (max-width: 340px) {
  .s10-p { width: 70px; padding: 4px 4px 3px; }
  .s10-pav { width: 24px; height: 24px; font-size: 12px; }
  .s10-felt .s10-pile { flex: 0 0 56px; height: 74px; }
  .s10-felt .s10-back, .s10-felt .s10-card { width: 34px; height: 46px; font-size: 16px; }
  .s10-felt .s10-plabel { font-size: 9px; }
}

/* ---- melds under the felt, grouped by whose they are ---- */
.s10-mrow { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.s10-mwho { font-size: 11px; color: #9DB3A6; }

/* ---- melds on the table ---- */
.s10-melds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.s10-meld {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 6px 8px; border-radius: 10px; cursor: default; color: inherit;
  background: #0E1A13; border: 1.5px solid #24402F;
}
.s10-meld.hot { border-color: #6FBF8B; cursor: pointer; box-shadow: 0 0 0 2px rgba(111,191,139,.16); }
.s10-meld.cold { opacity: .38; }
.s10-mlabel { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #9DB3A6; }
.s10-mcards { display: flex; gap: 3px; }

/* ---- lay-down tray ---- */
.s10-tabs { display: flex; flex-direction: column; gap: 6px; }
.s10-tab {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start; text-align: left;
  padding: 8px 10px; border-radius: 10px; cursor: pointer; color: inherit;
  background: #0E1A13; border: 1.5px solid #24402F;
}
.s10-tab.on { border-color: #C8A44E; }
.s10-tab.ok { border-color: #6FBF8B; }
.s10-tab > span:first-child { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: #9DB3A6; }
.s10-tcards { display: flex; gap: 3px; min-height: 28px; align-items: center; }
.s10-tcards i { font-size: 11px; color: #6C8375; }
.s10-skiprow { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- your hand ---- */
.s10-cards { display: flex; flex-wrap: wrap; gap: 6px; }
/* every hand card carries a transform at rest so hovering one only changes its
   value, never whether it is composited — no flicker on the first hover. */
/* pan-y, not none: a vertical swipe off a card still scrolls the table, while a
   sideways one is ours and becomes a drag */
.s10-cards .s10-card {
  cursor: pointer; transform: translateY(0); touch-action: pan-y;
  transition: transform .13s cubic-bezier(.2,.8,.3,1.2), box-shadow .13s, opacity .15s;
}
.s10-cards .s10-card:hover { transform: translateY(-5px); box-shadow: 0 6px 14px rgba(0,0,0,.5), inset 0 1px 0 color-mix(in srgb, currentColor 45%, transparent); }
.s10-cards .s10-card:active { transform: translateY(-2px) scale(.96); }
.s10-cards .s10-card.sel {
  transform: translateY(-12px);
  box-shadow: 0 0 0 2px #C8A44E, 0 10px 18px rgba(0,0,0,.5);
  animation: s10-pick .22s cubic-bezier(.2,.9,.3,1.4);
}
.s10-cards .s10-card.used { opacity: .34; transform: translateY(3px); }
.s10-cards .s10-card.used:hover { transform: translateY(3px); box-shadow: none; }
/* the card being carried: lifted, opaque even when it is spent in the tray, and
   without the hover transition so it tracks the finger exactly */
.s10-cards .s10-card.drag {
  transform: translateY(-8px) scale(1.06); opacity: 1; transition: none;
  box-shadow: 0 12px 20px rgba(0,0,0,.55), inset 0 1px 0 color-mix(in srgb, currentColor 45%, transparent);
}
@keyframes s10-pick { from { transform: translateY(-2px); } to { transform: translateY(-12px); } }

/* the shimmer, the breathing pile and the pick-up bounce are decoration, so
   anyone who asked the OS for stillness gets the same table without them. */
@media (prefers-reduced-motion: reduce) {
  .s10-card.w::after { animation: none; }
  .s10-pile.hot { animation: none; box-shadow: 0 0 0 2px rgba(200,164,78,.18); }
  .s10-cards .s10-card, .s10-cards .s10-card.sel { transition: none; animation: none; }
  .s10-cards .s10-card.drag { transform: scale(1.04); }
}

/* ---- standings ---- */
.s10-srow { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #1E3326; }
.s10-srow:last-child { border-bottom: 0; }
.s10-srow b { flex: 1; font-size: 13.5px; }
.s10-tot { font-weight: 700; font-size: 15px; }