/* Scorpion Solitaire — per-game styles. Premium crimson/charcoal card-table, distinct from Golf's green.
   Same card-craft as Golf (off-white serif stock, crisp SVG suits, one grounded shadow) — but suit MATTERS
   here, so every face-up card shows rank + a suit pip in the corner. Flat-ish felt: no orbs, no glass, no emoji. */
.scorp{
  --cardw: min(11vw, 50px);
  --cardh: calc(var(--cardw) * 1.42);          /* tall columns — Scorpion stacks deep */
  --felt-a:#5a1d2e; --felt-b:#3a1320; --felt-c:#220a13;   /* deep crimson card-table */
  --frame:#241a2e;                              /* charcoal-plum surround/chrome */
  --gold:#ffbf00; --gold-soft:#fdef79;
  --card:#fcfbf7; --ink:#1a1a1a; --red:#c62828;
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  padding: calc(12px + env(safe-area-inset-top,0px)) 8px calc(16px + env(safe-area-inset-bottom,0px));
  border-radius: 22px;
  background: radial-gradient(ellipse at 50% 34%, var(--felt-a) 0%, var(--felt-b) 60%, var(--felt-c) 100%);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  overflow: hidden;
  isolation: isolate;
  font-family:"Convergence", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* APP MODE: felt fills the phone; deep charcoal shows only in the safe-area insets (card-table frame).
   Top-anchored — Scorpion columns grow tall, so no vertical-center clipping. */
html.tz-app-mode body, html.tz-app-mode .site-main, html.tz-app-mode #game-root{ background:#160a10 !important; }
html.tz-app-mode .scorp{ min-height: calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); border-radius:0; box-shadow:none; }

/* ---- eye-comfort toggle (SVG moon/sun, not emoji) ---- */
.s-eye{ position:absolute; top:calc(12px + env(safe-area-inset-top,0px)); right:14px; z-index:4;
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  background:var(--frame); color:#f3ecd8; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:transform .12s, background .15s; }
.s-eye:active{ transform:scale(.9); }
.s-eye .ico{ width:17px; height:17px; }
.s-eye .ico-sun{ display:none; }
html.calm .s-eye .ico-moon{ display:none; }
html.calm .s-eye .ico-sun{ display:inline; }

/* HUD */
.s-hud{ display:flex; gap:8px; justify-content:center; margin:2px 0 12px; flex-wrap:wrap; padding:0 46px; }
.s-chip{ display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:8px;
  background: var(--frame); border:1px solid rgba(255,255,255,.14);
  color:#ecdfe6; font-size:12px; font-weight:600; }
.s-chip span{ opacity:.7; font-weight:600; }
.s-chip span.of{ opacity:.5; margin-left:1px; }
.s-chip b{ color:var(--gold-soft); font-variant-numeric: tabular-nums; }
.s-chip.streak b{ color: var(--gold); }
.s-chip .ico{ width:15px; height:15px; }
.s-chip.suits{ transition: transform .2s, background .2s; }
.s-chip.suits.hot{ background: linear-gradient(90deg,#ffb347,#ff7a59); border-color:#ffcaa0; transform: scale(1.04); }
.s-chip.suits.hot b, .s-chip.suits.hot span, .s-chip.suits.hot .ico{ color:#3a1d00; opacity:1; }

/* tableau — 7 columns, can grow tall */
.s-tableau{ display:flex; gap: clamp(3px, 1.2vw, 8px); justify-content:center; align-items:flex-start;
  min-height: calc(var(--cardh) * 5.2); }
.s-col{ display:flex; flex-direction:column; align-items:center; width:var(--cardw); }

/* card — off-white stock, serif rank, ONE grounded shadow (same craft as Golf) */
.card{ width:var(--cardw); height:var(--cardh); border-radius:7px;
  background: var(--card); color: var(--ink);
  border:1px solid rgba(0,0,0,.14);
  box-shadow: 0 2px 5px rgba(0,0,0,.30);
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
  font-weight:700; user-select:none; -webkit-user-select:none; position:relative; }
/* corner index: rank (serif) then a small suit pip beneath — suit MATTERS in Scorpion */
.card .ix{ position:absolute; top:5%; left:8%; display:flex; flex-direction:column; align-items:center; line-height:.82; }
.card .ix b{ font-family:"Bitter", Georgia, "Times New Roman", serif; font-size: calc(var(--cardw) * .46); font-weight:700; }
.card .ix .ixsuit{ width: calc(var(--cardw) * .26); height: calc(var(--cardw) * .26); margin-top:2px; }
/* one big centered suit pip */
.card .pip{ position:absolute; inset:0; box-sizing:border-box; padding-top:14%; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.card .pip .suit{ width: calc(var(--cardw) * .46); height: calc(var(--cardw) * .46); }
.card.red{ color:var(--red); }
.suit{ fill:currentColor; display:block; }
.card.fly{ box-shadow:0 10px 24px rgba(0,0,0,.5); pointer-events:none; }   /* the sliding clone during a move */

/* face-down card BACK — clean crimson weave + gold edge (not a blob) */
.card.down{ background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 5px, transparent 5px 10px),
    linear-gradient(160deg,#7a2342,#54142e);
  border:1px solid var(--gold-soft); box-shadow: 0 2px 5px rgba(0,0,0,.34); }
.card.down .bk{ width:62%; height:74%; border-radius:5px;
  border:1px solid rgba(255,210,120,.5); box-shadow: inset 0 0 0 2px rgba(255,255,255,.06); }
.card.slot{ background: rgba(255,255,255,.05); border:1.5px dashed rgba(255,255,255,.16); box-shadow:none; cursor:pointer; }
.card.sel{ box-shadow: 0 0 0 2px var(--gold), 0 4px 14px rgba(255,200,90,.45);
  transform: translateY(-2px); transition: transform .08s, box-shadow .08s; z-index:2; }
.card.sel:active{ transform: translateY(0) scale(.97); }
.card.shake{ animation: s-shake .32s; }
@keyframes s-shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
/* Hint glow — same gold pulse Golf uses for its demo target */
.card.hint-target{ box-shadow:0 0 0 3px var(--gold), 0 0 20px rgba(255,210,120,.75) !important; z-index:3;
  animation:s-pulse 1s ease-in-out infinite; }
.s-btn.hint-target{ box-shadow:0 0 0 2px var(--gold), 0 0 16px rgba(255,210,120,.7) !important; animation:s-pulse 1s ease-in-out infinite; }
@keyframes s-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }

/* Coach (Guide me) glow — the persistent gold pulse the reusable TzCoach loop adds/removes.
   Scorpion's own crimson-gold language; glows BOTH the source card and its destination column
   (the whole move), and the Deal 3 button when nothing fits. Warmer + a touch wider than the
   one-shot Hint glow so an always-on highlight reads clearly without strobing the board. */
.card.sc-coach-glow{ box-shadow:0 0 0 3px var(--gold), 0 0 22px rgba(255,191,0,.85) !important; z-index:3;
  animation:sc-coach-pulse 1.25s ease-in-out infinite; }
.s-col .card.slot.sc-coach-glow{ border-color:var(--gold); background:rgba(255,191,0,.12); }
.s-btn.sc-coach-glow{ box-shadow:0 0 0 2px var(--gold), 0 0 16px rgba(255,191,0,.7) !important;
  animation:sc-coach-pulse 1.25s ease-in-out infinite; }
@keyframes sc-coach-pulse{ 0%,100%{ transform:scale(1); box-shadow:0 0 0 3px var(--gold), 0 0 14px rgba(255,191,0,.55); }
  50%{ transform:scale(1.05); box-shadow:0 0 0 3px var(--gold-soft), 0 0 26px rgba(255,191,0,.95); } }

/* hint + controls */
.s-hint{ text-align:center; font-size:13px; color:#e5d3dc; opacity:.9; margin:14px 6px 12px; min-height:18px; }
.s-hint.warn{ color:#ffc6a6; }
.s-controls{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.s-btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border-radius:9px; cursor:pointer;
  background: var(--frame); border:1px solid rgba(255,255,255,.14); color:#f3e8ee;
  font-size:13px; font-weight:700; transition: transform .12s, background .15s, opacity .15s; }
.s-btn:active{ transform: scale(.95); }
.s-btn .ico{ width:16px; height:16px; }
.s-btn b{ opacity:.7; font-weight:700; font-variant-numeric: tabular-nums; }
.s-btn.primary{ background: var(--gold); border-color:var(--gold-soft); color:#1a1a1a; }
.s-btn.ad{ background: linear-gradient(90deg,#ffb347,#ff8a3d); border-color:#ffcd9a; color:#3a1d00; }
.s-btn.ad.armed{ box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(255,200,90,.6); }
.s-btn.spent{ opacity:.4; pointer-events:none; }
/* Guide me — the teaching CTA, in Scorpion's OWN crimson/charcoal+gold (NOT Golf's green).
   Resting: gold-ringed charcoal-plum with a warm gold label so it stands apart from the plain
   chrome buttons. Active (on): solid gold like the primary action, label flips to "Stop". */
.s-btn.coach{ background: linear-gradient(180deg,#3a2740,#2a1c33); border-color:var(--gold); color:var(--gold-soft);
  box-shadow: inset 0 0 0 1px rgba(255,191,0,.18), 0 0 10px rgba(255,191,0,.16); }
.s-btn.coach .ico{ stroke:var(--gold-soft); }
.s-btn.coach.on{ background:var(--gold); border-color:var(--gold-soft); color:#2a0d18;
  box-shadow:0 0 0 2px rgba(255,191,0,.45), 0 0 16px rgba(255,191,0,.5); }
.s-btn.coach.on .ico{ stroke:#2a0d18; }
.ico{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ico.fill{ fill:currentColor; stroke:none; }

/* win overlay */
#win{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:6px; padding:20px; background: rgba(20,8,12,.84); backdrop-filter: blur(6px);
  opacity:0; visibility:hidden; transition: opacity .3s; }
#win.show{ opacity:1; visibility:visible; }
#win h2{ color:#fff; font-size:24px; margin:2px 0; }
#win p{ color:#f0cfd9; font-size:14px; margin:0 0 8px; }

.s-confetti{ position:fixed; top:-20px; width:9px; height:14px; border-radius:2px; z-index:9999; pointer-events:none; }

/* ---- meta layer: daily bar + day-streak + week calendar ---- */
.s-daily{ display:flex; align-items:center; justify-content:center; gap:12px; margin:0 0 10px; flex-wrap:wrap; }
.s-daystreak{ display:inline-flex; align-items:center; gap:4px; font-size:12px; color:#e5d3dc;
  background:var(--frame); border:1px solid rgba(255,255,255,.12); padding:4px 10px; border-radius:999px; }
.s-daystreak b{ color:var(--gold); font-weight:800; font-variant-numeric:tabular-nums; }
.s-week{ display:inline-flex; gap:5px; }
.s-dot{ width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; color:rgba(255,255,255,.35); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.s-dot.done{ color:var(--gold); background:rgba(255,200,90,.16); border-color:rgba(255,200,90,.45); }
.s-dot.today{ outline:2px solid rgba(255,255,255,.32); outline-offset:1px; }
.s-btn.daily{ background:var(--frame); border-color:rgba(255,255,255,.16); color:#f3e8ee; }
.s-btn.daily.on{ background:var(--gold); border-color:var(--gold-soft); color:#1a1a1a; box-shadow:0 0 0 2px rgba(255,191,0,.4); }

/* ---- Calm Night theme — warm, low blue-light. Swaps felt + card tokens only (no orbs). ---- */
html.calm .scorp{ --felt-a:#4a2a22; --felt-b:#33201b; --felt-c:#231713; --frame:#33241a; --ink:#2b2520; --card:#fbf6ea; }
html.calm.tz-app-mode body, html.calm.tz-app-mode .site-main, html.calm.tz-app-mode #game-root{ background:#1a1009 !important; }
html.calm .card.red{ color:#b1442f; }
html.calm .s-eye{ background:#3a2c1a; color:#ffe0a8; }
html.calm .card.down{ background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 5px, transparent 5px 10px),
    linear-gradient(160deg,#5a3a22,#3e2716);
  border-color:#caa86a; }
html.calm .card.down .bk{ border-color:rgba(202,168,106,.6); }