/* Forty Thieves Solitaire — per-game styles. Premium navy card-table; 10 columns + 8 foundations.
   Reuses Golf Solitaire's card stock / SVG pips / fly animation, adapted to two decks where SUIT matters. */
.ft{
  /* Deep NAVY card-table (distinct from golf's green + scorpion's crimson). Flat-ish, no glow orbs. */
  --cardw: min(8.6vw, 40px);
  --cardh: calc(var(--cardw) * 1.42);            /* real playing-card aspect, small for 10+8 layout */
  --felt-a:#1a3b66; --felt-b:#102a4d; --felt-c:#0a1c36;
  --frame:#0c1f3d;                                /* deep navy surround/chrome */
  --gold:#ffbf00; --gold-soft:#fdef79;
  --card:#fcfbf7; --ink:#1a1a1a; --red:#c62828;   /* off-white card stock, like golf */
  position: relative;
  max-width: 660px;
  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% 36%, 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; darker navy shows only in the safe-area insets (card-table frame) */
html.tz-app-mode body, html.tz-app-mode .site-main, html.tz-app-mode #game-root{ background:#060f20 !important; }
html.tz-app-mode .ft{ min-height: calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  border-radius:0; box-shadow:none; display:flex; flex-direction:column; justify-content:center; }

/* HUD */
.ft-hud{ display:flex; gap:8px; justify-content:center; margin:2px 0 11px; flex-wrap:wrap; padding:0 44px; }
.ft-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:#dfe7f3; font-size:12px; font-weight:600; }
.ft-chip span{ opacity:.7; font-weight:600; }
.ft-chip span.of{ opacity:.5; margin-left:1px; }
.ft-chip b{ color:var(--gold-soft); font-variant-numeric: tabular-nums; }
.ft-chip.streak b{ color: var(--gold); }
.ft-chip .ico{ width:15px; height:15px; }
.ft-chip.home{ transition: transform .2s, background .2s; }
.ft-chip.home.hot{ background: linear-gradient(90deg,#ffcf6a,#ff9f43); border-color:#ffe0a8; transform: scale(1.04); }
.ft-chip.home.hot b, .ft-chip.home.hot span, .ft-chip.home.hot .ico{ color:#34230a; opacity:1; }

/* foundations row (8) — premium framed home for two decks, A→K by suit */
.ft-foundrow-wrap{ position:relative; margin:0 0 10px; }
.ft-foundations{ display:flex; gap: clamp(2px, 0.9vw, 6px); justify-content:center;
  padding:7px clamp(4px,1.5vw,9px); border-radius:12px;
  background: rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.ft-flabel{ text-align:center; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#bcd0ea; opacity:.55; margin:0 0 4px; }

/* deck row (stock + waste) */
.ft-deck{ display:flex; align-items:center; justify-content:center; gap: clamp(12px, 5vw, 34px); margin-bottom:13px; }
.ft-pile{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.ft-plabel{ font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#cadcf2; opacity:.55; }
.ft-stock{ width:var(--cardw); height:var(--cardh); border-radius:7px; cursor:pointer;
  background: repeating-linear-gradient(45deg,#163c66 0 6px,#0e2c50 6px 12px);
  border:1.5px solid var(--gold-soft);
  box-shadow: 3px 3px 0 -1px #0a1f3c, 6px 6px 0 -2px #07172d, 0 6px 14px rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; position:relative; transition: transform .12s; }
.ft-stock:active{ transform: scale(.95); }
.ft-stock.empty{ background: rgba(255,255,255,.05); border-style:dashed; border-color:rgba(255,255,255,.2); cursor:default; box-shadow:none; }
.ft-stockcount{ font-size:12px; font-weight:700; color:#fff; background:rgba(0,0,0,.5); border-radius:999px; padding:2px 7px; }
.ft-stock.empty .ft-stockcount{ opacity:.4; }
.ft-wastewrap{ width:var(--cardw); height:var(--cardh); border-radius:7px;
  border:1.5px dashed rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; }

/* tableau — 10 columns */
.ft-tableau{ display:flex; gap: clamp(2px, 0.9vw, 6px); justify-content:center; align-items:flex-start;
  min-height: calc(var(--cardh) * 3.2); }
.ft-col{ display:flex; flex-direction:column; align-items:center; width:var(--cardw); }

/* card — off-white stock, serif rank, ONE grounded shadow (reused from golf).
   Forty Thieves: SUIT MATTERS, so every card shows rank + a matching suit pip in the corner index,
   readable even when columns overlap heavily. */
.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,.3);
  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 + suit SIDE BY SIDE in the top strip — both stay visible when columns overlap.
   (Suit matters for every card in Forty Thieves, so the exposed band must show rank AND suit.) */
.card .ix{ position:absolute; top:6%; left:9%; right:9%; display:flex; align-items:center; gap: calc(var(--cardw) * .06); line-height:.84; }
.card .ix b{ font-family:"Bitter", Georgia, "Times New Roman", serif; font-size: calc(var(--cardw) * .5); font-weight:700; }
.card .ix .suit{ width: calc(var(--cardw) * .32); height: calc(var(--cardw) * .32); flex:none; }
/* big centred suit on the bottom (fully visible) card of a column / waste — reinforces suit */
.card .pip{ position:absolute; inset:0; box-sizing:border-box; padding-top:42%;
  display:flex; align-items:center; justify-content:center; pointer-events:none; }
.card .pip .suit{ width: calc(var(--cardw) * .44); height: calc(var(--cardw) * .44); opacity:.9; }
.card.red{ color:var(--red); }
.card.fly{ box-shadow:0 10px 24px rgba(0,0,0,.5); pointer-events:none; }   /* the sliding clone during a move */
.suit{ fill:currentColor; display:block; }

.card.slot{ background: rgba(255,255,255,.05); border:1.5px dashed rgba(255,255,255,.16); box-shadow:none; cursor:pointer; }
.card.slot .ph{ display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  font-size: calc(var(--cardw) * .5); color: rgba(255,255,255,.3); font-weight:800;
  font-family:"Bitter", Georgia, serif; }
.card.slot .ph .suit{ width: calc(var(--cardw) * .5); height: calc(var(--cardw) * .5); fill: rgba(255,255,255,.26); }
.card.big{ width: calc(var(--cardw) * 1.06); height: calc(var(--cardh) * 1.06); box-shadow: 0 5px 14px rgba(0,0,0,.45); }
.card.sel{ box-shadow: 0 0 0 2px var(--gold), 0 4px 14px rgba(255,210,120,.5);
  transform: translateY(-2px); transition: transform .08s, box-shadow .08s; z-index:3; }
.card.sel:active{ transform: translateY(0) scale(.97); }
.card.shake{ animation: ft-shake .32s; }
@keyframes ft-shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
/* gold-glow hint pulse (reused from golf's .demo-target) — highlights ONE legal move */
.card.hintglow, .ft-stock.hintglow{ box-shadow:0 0 0 3px var(--gold), 0 0 20px rgba(255,210,120,.75) !important; z-index:4;
  animation: ft-pulse 1s ease-in-out infinite; }
@keyframes ft-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }

/* ---- eye-comfort toggle + Calm Night theme (warm, low blue-light, cream cards) ---- */
.ft-eye{ position:absolute; top:calc(12px + env(safe-area-inset-top,0px)); right:14px; z-index:6;
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  background:var(--frame); color:#eaf0fb; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:transform .12s, background .15s; }
.ft-eye:active{ transform:scale(.9); }
.ft-eye .ico{ width:17px; height:17px; }
.ft-eye .ico-sun{ display:none; }
html.calm .ft-eye .ico-moon{ display:none; }
html.calm .ft-eye .ico-sun{ display:inline; }
/* Calm Night — warm low-blue-light navy felt + cream cards. Only swaps tokens, no orbs. */
html.calm .ft{ --felt-a:#26324a; --felt-b:#1a2438; --felt-c:#121829; --frame:#1c2436; --ink:#2b2520; --card:#fbf6ea; --red:#b1442f; }
html.calm.tz-app-mode body, html.calm.tz-app-mode .site-main, html.calm.tz-app-mode #game-root{ background:#0c111e !important; }
html.calm .ft-eye{ color:#ffe0a8; }
html.calm .ft-stock{ border-color:#caa86a;
  background:repeating-linear-gradient(45deg,#283248 0 6px,#1d2538 6px 12px);
  box-shadow:3px 3px 0 -1px #141a2a, 6px 6px 0 -2px #0e1320, 0 6px 14px rgba(0,0,0,.45); }

/* hint + controls */
.ft-hint{ text-align:center; font-size:13px; color:#d6e0ec; opacity:.9; margin:14px 6px 12px; min-height:18px; }
.ft-hint.warn{ color:#ffd0a0; }
.ft-trust{ text-align:center; font-size:10.5px; color:#cfdcef; opacity:.5; margin:9px 0 0; letter-spacing:.02em; }
.ft-controls{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.ft-btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:9px; cursor:pointer;
  background: var(--frame); border:1px solid rgba(255,255,255,.14); color:#e7ecf6;
  font-size:13px; font-weight:700; transition: transform .12s, background .15s, opacity .15s; }
.ft-btn:active{ transform: scale(.95); }
.ft-btn .ico{ width:16px; height:16px; }
.ft-btn.primary{ background: var(--gold); border-color:var(--gold-soft); color:#1a1a1a; }
.ft-btn.ad{ background: linear-gradient(90deg,#ffb347,#ff8a3d); border-color:#ffcd9a; color:#3a1d00; }
.ft-btn.ad.armed{ box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(255,210,120,.6); }
/* "Guide me" — FT's OWN look: navy chip with a gold rim + gold icon (NOT golf-green / scorpion-crimson).
   When ON it fills gold (the live-coach state), echoing the foundation home colour. */
.ft-btn.guide{ background: var(--frame); border-color: rgba(255,191,0,.55); color:#f3e6bd; }
.ft-btn.guide .ico{ stroke: var(--gold); }
.ft-btn.guide.on{ background: linear-gradient(90deg,var(--gold),#ffd24a); border-color:var(--gold-soft); color:#241800;
  box-shadow: 0 0 0 2px rgba(255,210,120,.5), 0 0 16px rgba(255,210,120,.55); }
.ft-btn.guide.on .ico{ stroke:#241800; }

/* per-game coach highlight — a pulsing GOLD ring in FT's navy/gold language (own keyframes, own class).
   Glows BOTH the source card and where it goes; never covers the card, only rings it. */
.card.ft-coach-glow, .ft-stock.ft-coach-glow{
  box-shadow: 0 0 0 3px var(--gold), 0 0 22px rgba(255,210,120,.85), 0 0 4px rgba(255,255,255,.6) inset !important;
  z-index:4; animation: ft-coach-pulse 1.05s ease-in-out infinite; }
@keyframes ft-coach-pulse{ 0%,100%{ box-shadow:0 0 0 3px var(--gold), 0 0 14px rgba(255,210,120,.6); }
  50%{ box-shadow:0 0 0 4px var(--gold-soft), 0 0 26px rgba(255,210,120,.95); transform:translateY(-1px) scale(1.04); } }
.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(7,13,22,.86);
  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:#cfe1f0; font-size:14px; margin:0 0 8px; }

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