/* Spades. Board + card redesign ported from spades-board-redesign.html, plus
   the tutorial overlay. Dark celestial table, green felt ring, gold accents.
   Targets old Android (Galaxy A10e class), 360px wide. Transforms + gradients
   only: no heavy shadows, no canvas, no libraries. */

:root {
  --table-0: #0a0f14; --table-1: #0e1620;
  --felt-top: #2f9c63; --felt-bot: #13683a; --felt-edge: #0a3f24;
  --gold: #d9b25f; --gold-2: #f0d488; --gold-d: #9c7a32;
  --navy: #1a2a4f; --navy-d: #0f1b38;
  --txt: #f3ead4; --muted: #b9c2bf;
  --us: #8fe0b0; --them: #e0a07a;
  --ok: #5ad19b; --no: #e0614f;
  /* Oval table sized to stay inside the viewport on phones, so all four seat
     pods (avatar + name + bid pill) stay fully on-screen instead of clipping
     at the west/east edges. Tablet/desktop widen it again below. */
  --d: min(88vw, 380px);
  --dh: min(60vw, 260px);
  --cy: 42%;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background: #05080b; color: var(--txt); overflow: hidden; user-select: none;
}
#app {
  position: relative; height: 100%; width: 100%; max-width: 1024px; margin: 0 auto;
  padding-top: var(--safe-t); padding-bottom: var(--safe-b);
  background: radial-gradient(120% 80% at 50% 36%, var(--table-1) 0%, var(--table-0) 60%, #05080b 100%);
  overflow: hidden;
}
/* faint star texture */
#app::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image:
    radial-gradient(1px 1px at 12% 18%, #fff6, transparent), radial-gradient(1px 1px at 78% 12%, #fff5, transparent),
    radial-gradient(1px 1px at 33% 8%, #fff4, transparent), radial-gradient(1px 1px at 64% 24%, #fff5, transparent),
    radial-gradient(1px 1px at 88% 38%, #fff4, transparent), radial-gradient(1px 1px at 8% 44%, #fff4, transparent),
    radial-gradient(1px 1px at 50% 4%, #fff6, transparent);
}

/* ---------- Top bar ---------- */
.topbar { position: relative; z-index: 6; display: flex; align-items: center; gap: 7px; padding: 8px 12px; }
.score { display: flex; gap: 6px; }
.score .pill {
  background: linear-gradient(#142033, #0d1626); border: 1px solid var(--gold-d); border-radius: 10px;
  padding: 4px 9px; font-size: 11px; font-weight: 700; line-height: 1.05; text-align: center; min-width: 50px;
}
.score .pill .plbl { display: block; opacity: .8; letter-spacing: .04em; }
.score .pill b { display: block; font-size: 16px; color: var(--gold-2); }
.score .pill.us b { color: var(--us); }
.score .pill .pbags { display: block; font-size: 9.5px; opacity: .7; margin-top: 1px; }
.topbar .mid { flex: 1; text-align: center; font-size: 12px; color: var(--muted); line-height: 1.25; }
.topbar .mid .broken {
  display: inline-block; margin-top: 2px; font-size: 10.5px; color: var(--gold-2);
  border: 1px solid var(--gold-d); border-radius: 99px; padding: 1px 8px;
}
.iconbtn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--gold-d); background: #101a28;
  color: var(--gold-2); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.iconbtn.learn { font-weight: 900; }

/* ---------- Team bid/won bar (this hand's books: won over bid, per team) ---------- */
.bidbar { position: relative; z-index: 6; display: flex; gap: 8px; padding: 0 12px 2px; }
.bidbar-side {
  flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 7px;
  background: linear-gradient(#142033, #0d1626); border: 1px solid var(--gold-d); border-radius: 10px; padding: 4px 10px;
}
.bidbar-side.us { border-color: rgba(143, 224, 176, .5); }
.bidbar-side.them { border-color: rgba(224, 160, 122, .5); }
.bidbar-side .bb-team { font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.bidbar-side.us .bb-team { color: var(--us); }
.bidbar-side.them .bb-team { color: var(--them); }
.bidbar-side .bb-frac { font-size: 17px; font-weight: 900; color: var(--gold-2); }
.bidbar-side .bb-frac b { color: #fff; }
.bidbar-side .bb-cap { font-size: 9px; color: var(--muted); letter-spacing: .03em; }

/* ---------- Table ---------- */
.table { position: absolute; inset: 84px 0 0 0; }
.felt {
  position: absolute; left: 50%; top: var(--cy); transform: translate(-50%, -50%);
  width: var(--d); height: var(--dh); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, var(--felt-top), var(--felt-bot) 70%, var(--felt-edge) 100%);
  box-shadow: 0 0 0 2px var(--gold-d), 0 0 0 10px #0a0f14, 0 0 0 11px var(--gold-d), inset 0 8px 30px rgba(0,0,0,.35);
}
.felt::after { content: ""; position: absolute; inset: 18px 30px; border-radius: 50%; border: 1px solid rgba(217,178,95,.35); }
.felt .mono { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 120px; color: rgba(255,255,255,.05); }

/* seats: avatar + name + bid/won pill, anchored ON the gold ring */
.seat { position: absolute; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 84px; }
.seat .av {
  width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(#26344f, #141d30);
  border: 2px solid var(--gold-d); display: flex; align-items: center; justify-content: center; font-size: 20px; color: #c9d4e8;
}
.seat.them .av { background: linear-gradient(#4a2f33, #301420); }
.seat.active .av { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(240,212,136,.35), 0 0 14px rgba(240,212,136,.5); animation: seatPulse 1.2s ease-in-out infinite; }
@keyframes seatPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(240,212,136,.3), 0 0 10px rgba(240,212,136,.4); } 50% { box-shadow: 0 0 0 3px rgba(240,212,136,.45), 0 0 18px rgba(240,212,136,.65); } }
.seat .name { font-size: 12px; font-weight: 700; }
.seat .bidpill {
  font-size: 10px; color: #0c100e; background: linear-gradient(var(--gold-2), var(--gold));
  border-radius: 99px; padding: 2px 7px; font-weight: 800; white-space: nowrap;
}
.seat .bidpill.ghostpill { background: transparent; color: transparent; padding: 2px 7px; }
.seat.north { left: 50%; top: calc(var(--cy) - var(--dh) / 2); transform: translate(-50%, -50%); }
.seat.south { left: 50%; top: calc(var(--cy) + var(--dh) / 2); transform: translate(-50%, -50%); }
.seat.west { left: calc(50% - var(--d) / 2 + 28px); top: var(--cy); transform: translate(-50%, -50%); }
.seat.east { left: calc(50% + var(--d) / 2 - 28px); top: var(--cy); transform: translate(-50%, -50%); }

/* ---------- Played cards (center trick area) ---------- */
.center { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.played { position: absolute; z-index: 3; }
.played img { width: 76px; height: 115px; border-radius: 8px; display: block; box-shadow: 0 4px 10px rgba(0,0,0,.55); }
.played.p-north { left: 50%; top: calc(var(--cy) - 72px); transform: translate(-50%, -50%) rotate(2deg); }
.played.p-west  { left: calc(50% - 92px); top: var(--cy); transform: translate(-50%, -50%) rotate(-7deg); }
.played.p-east  { left: calc(50% + 92px); top: var(--cy); transform: translate(-50%, -50%) rotate(7deg); }
.played.p-south { left: 50%; top: calc(var(--cy) + 68px); transform: translate(-50%, -50%) rotate(-2deg); }
.played.winning img { box-shadow: 0 0 0 2px var(--gold-2), 0 0 14px rgba(240,212,136,.7); }
.played.clearing { animation: cardClear .5s ease forwards; }
@keyframes cardClear { to { opacity: 0; transform: translate(-50%, -50%) scale(.85); } }
.trickwin {
  position: absolute; left: 50%; top: var(--cy); transform: translate(-50%, -50%);
  background: linear-gradient(var(--gold-2), var(--gold)); color: #1c1505; font-weight: 900; padding: 6px 14px;
  border-radius: 20px; font-size: 13px; box-shadow: 0 4px 10px rgba(0,0,0,.4); animation: pop .2s ease; z-index: 5; white-space: nowrap;
}
@keyframes pop { from { transform: translate(-50%, -50%) scale(.6); opacity: .4; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* The flying, flipping card during a play */
.flyer { position: absolute; z-index: 30; width: 78px; height: 118px; transform-style: preserve-3d; pointer-events: none; }
.flyer img { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 9px; box-shadow: 0 6px 14px rgba(0,0,0,.55); }
.flyer .front { transform: rotateY(180deg); }

/* Deal animation: card-backs flying from the felt out to the seats */
.deallayer { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.flycard {
  position: fixed; width: 30px; height: 44px; margin-left: -15px; margin-top: -22px; border-radius: 4px;
  background: #0c1322 url(assets/cards/back.webp) center/cover; border: 1px solid rgba(217,178,95,.45);
  box-shadow: 0 3px 6px rgba(0,0,0,.5); opacity: 0; animation: fly .4s cubic-bezier(.3,.7,.3,1) forwards; will-change: transform, opacity;
}
@keyframes fly { 0% { transform: translate(0,0) scale(.7); opacity: 0; } 18% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.92); opacity: 0; } }

/* ---------- Player hand ---------- */
.handwrap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: calc(230px + var(--safe-b)); padding-bottom: var(--safe-b);
  background: linear-gradient(180deg, transparent, rgba(5,8,11,0) 8%, rgba(5,8,11,.5) 52%, rgba(5,8,11,.9));
}
.caption { position: absolute; top: 8px; left: 8px; right: 8px; text-align: center; font-size: 11.5px; color: var(--muted); min-height: 14px; }
.caption b { color: var(--gold-2); }
.hand { --card-w: 100px; --card-h: 152px; position: absolute; left: 50%; bottom: calc(10px + var(--safe-b)); transform: translateX(-50%); width: min(520px, 100vw - 10px); height: 176px; touch-action: none; }
.card-slot {
  appearance: none; position: absolute; left: 50%; bottom: 0;
  width: var(--card-w); height: var(--card-h); margin-left: calc(var(--card-w) / -2);
  padding: 0; border: 0; background: transparent; transform-origin: bottom center;
  transform: translateX(var(--x, 0px)) translateY(calc(var(--lift, 0px) + var(--lift-extra, 0px) + var(--legal-offset, 0px) + var(--drag-lift, 0px))) rotate(var(--ang, 0deg)) scale(var(--scale, 1));
  cursor: pointer; pointer-events: none; -webkit-tap-highlight-color: transparent;
}
.card-slot .c {
  width: 100%; height: 100%; border-radius: 10px; display: block; pointer-events: none;
  box-shadow: 0 2px 5px rgba(0,0,0,.55); transition: filter .14s ease, box-shadow .14s ease;
}
/* Resting hand: legal cards sit ~10px higher than illegal ones and get a
   restrained glow; illegal cards dim slightly and sit slightly lower. Both
   stay present and absorb their own input (illegal never passes a tap or
   drag through to a neighboring legal card). */
.card-slot.legal { --legal-offset: -7px; }
.card-slot.illegal { --legal-offset: 3px; }
.card-slot.legal .c { box-shadow: 0 6px 14px rgba(0,0,0,.6), 0 0 10px rgba(240,212,136,.35); }
.card-slot.illegal .c { filter: brightness(.82) saturate(.85); }
.card-slot[aria-disabled="true"] { cursor: default; }
.card-slot.selected { --lift-extra: -16px; --scale: 1.06; z-index: 30 !important; }
.card-slot.selected .c { filter: brightness(1.08) saturate(1.08); box-shadow: 0 8px 18px rgba(0,0,0,.7), 0 0 0 2px var(--gold-2), 0 0 20px rgba(240,212,136,.6); }
@media (hover: hover) and (pointer: fine) { .card-slot.legal:not(.selected):hover { --lift-extra: -8px; } }
.card-slot:focus-visible { outline: none; }
.card-slot:focus-visible .c { outline: 3px solid var(--gold-2); outline-offset: 2px; }

/* Gesture preview (press/scrub): the card currently under the finger during
   an active gesture. Priority order is active-preview > armed-to-play >
   selected > legal > illegal, so these rules sit last and win the cascade. */
.card-slot.gesture-active { --lift-extra: -20px; --scale: 1.08; z-index: 40 !important; }
.card-slot.gesture-active .c { filter: brightness(1.12) saturate(1.12); box-shadow: 0 10px 20px rgba(0,0,0,.7), 0 0 0 2px var(--gold-2), 0 0 22px rgba(240,212,136,.55); }
.card-slot.gesture-active.illegal .c { filter: brightness(.88) saturate(.92); box-shadow: 0 8px 16px rgba(0,0,0,.6); }
.card-slot.gesture-armed .c { box-shadow: 0 12px 24px rgba(0,0,0,.7), 0 0 0 3px var(--ok), 0 0 26px rgba(90,209,155,.65); }
.shake { animation: shake .35s; }
@keyframes shake {
  20% { transform: var(--rest) translateX(-4px); } 40% { transform: var(--rest) translateX(4px); }
  60% { transform: var(--rest) translateX(-3px); } 80% { transform: var(--rest) translateX(3px); }
}

/* Floating gesture preview: an enlarged copy of the card currently under the
   finger while pressing/scrubbing/dragging. Lives outside #app (on <body>)
   so a mid-gesture render() never orphans it; JS shows/hides + repositions
   it. Never intercepts pointer input. */
.gesture-preview {
  position: fixed; left: 50%; z-index: 65; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transform: translate(-50%, 6px) scale(.94); opacity: 0;
  transition: transform 110ms ease, opacity 110ms ease;
}
.gesture-preview.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.gesture-preview img { width: 108px; height: auto; border-radius: 10px; display: block; box-shadow: 0 10px 24px rgba(0,0,0,.55), 0 0 0 2px var(--gold-2), 0 0 18px rgba(240,212,136,.4); }
.gesture-preview.illegal img { box-shadow: 0 10px 20px rgba(0,0,0,.5); filter: brightness(.85) saturate(.9); }
.gesture-preview.armed img { box-shadow: 0 12px 28px rgba(0,0,0,.6), 0 0 0 3px var(--ok), 0 0 24px rgba(90,209,155,.65); }
.gesture-preview .lbl { font-size: 11.5px; font-weight: 700; color: var(--gold-2); background: #0c1622; border: 1px solid var(--gold-d); border-radius: 999px; padding: 3px 11px; white-space: nowrap; }
.gesture-preview.illegal .lbl { color: var(--muted); }
.gesture-preview.armed .lbl { color: var(--ok); border-color: var(--ok); }
@media (max-height: 680px) { .gesture-preview img { width: 86px; } }
@media (min-width: 700px) { .gesture-preview img { width: 132px; } }

/* soft-correction tooltip (Guided Mode) */
.tip {
  position: absolute; z-index: 31; background: #101a28; border: 1px solid var(--gold-d); color: var(--gold-2);
  font-size: 11px; padding: 5px 9px; border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity .15s;
  max-width: 220px; text-align: center;
}
.tip.show { opacity: 1; }

/* ---------- Overlays (shared by game + tutorial) ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.62); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 70; }

/* Bid panel: keep the player's hand bright and readable while choosing a bid.
   The scrim is anchored to the top (behind the bid sheet) and fades to clear
   over the bottom, and the hand is lifted above the scrim so the cards are not
   dimmed at the exact moment you need to read them. */
#bidpanel.overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,.74) 0%, rgba(0,0,0,.74) 42%, rgba(0,0,0,.32) 62%, rgba(0,0,0,0) 78%);
  align-items: flex-start;
  padding-top: calc(56px + var(--safe-t, 0px));
}
body.is-bidding .handwrap { z-index: 78; }
body.is-bidding .hand .c { box-shadow: 0 6px 16px rgba(0,0,0,.6), 0 0 12px rgba(240,212,136,.4); }
.sheet {
  background: linear-gradient(#101a28, #0b121d); border: 1px solid var(--gold-d); border-radius: 16px;
  padding: 18px 16px calc(16px + var(--safe-b)); width: 100%; max-width: 360px; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.6); color: var(--txt);
}
.sheet h2 { margin: 0 0 4px; font-size: 22px; color: var(--gold-2); }
.sheet h2.win { color: var(--us); }
.sheet h2.lose { color: var(--them); }
.sheet .sub { margin: 0 0 14px; font-size: 13px; color: var(--muted); }

.bidgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.bidnum { font-size: 18px; font-weight: 800; padding: 12px 0; border-radius: 10px; border: 1px solid var(--gold-d); background: #0c1622; color: var(--txt); }
.bidnum:active { transform: translateY(2px); }
.bidnum.right { background: linear-gradient(var(--ok), #2f9c63); color: #06241a; border-color: var(--ok); }
.bidnum.wrong { background: #3a1714; border-color: var(--no); color: #ffd9d2; }
.bidspecial { display: flex; gap: 8px; justify-content: center; }
.nilbtn { background: #5a3b8a; color: #fff; font-weight: 800; padding: 12px 24px; border: 1px solid #8a6ab0; border-radius: 10px; }
.blindnil { background: #482c6e; }
.bid-wheel { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 4px -8px 12px; padding: 12px 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.bid-wheel::-webkit-scrollbar { display: none; }
.wheel-track { display: flex; gap: 8px; width: max-content; padding: 0 calc(50% - 28px); }
.wheel-num { width: 56px; height: 56px; border-radius: 50%; flex: 0 0 56px; border: 1px solid var(--gold-d); color: var(--txt); background: #0c1622; font-size: 20px; font-weight: 800; transition: transform .16s ease, background .16s ease; }
.wheel-num.selected { color: #1c1505; background: linear-gradient(var(--gold-2), var(--gold)); border-color: var(--gold-2); transform: scale(1.16); box-shadow: 0 0 0 4px rgba(240,212,136,.14); }
.wheel-help { color:var(--muted); font-size:12px; letter-spacing:.05em; margin:-4px 0 8px; transition:opacity .25s; }.wheel-help span{color:var(--gold-2)}.wheel-help.gone{opacity:0;height:0;overflow:hidden;margin:0}
.bid-current { display: flex; flex-direction: column; align-items: center; margin: -2px 0 12px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.bid-current b { color: var(--gold-2); font-size: 28px; line-height: 1; letter-spacing: 0; }
.bid-confirm { margin-top: 12px; }
.bidhint { font-size: 12px; color: var(--muted); margin: -4px 0 12px; }
.bidhint b { color: var(--gold-2); }
.bidsofar { font-size: 12.5px; color: var(--muted); margin: -2px 0 12px; }
.bidsofar .us { color: var(--us); font-weight: 700; }
.bidsofar .them { color: var(--them); font-weight: 700; }
.bidsofar b { color: var(--gold-2); font-size: 14px; }

.big { border: 1px solid transparent; border-radius: 12px; padding: 14px; font-size: 16px; font-weight: 800; color: #fff; width: 100%; }
button:focus-visible, select:focus-visible, .sw:focus-visible { outline: 3px solid #fff7e6; outline-offset: 3px; }
.big.primary { background: linear-gradient(var(--gold-2), var(--gold)); color: #1c1505; }
.big.danger { background: #8a2f28; border-color: #b04a40; }
.big.ghost { background: #16212f; border-color: var(--gold-d); color: var(--gold-2); }
.row2 { display: flex; gap: 10px; margin-top: 10px; }
.row2 .big { flex: 1; }

/* Round results */
.sheet.rr { padding: 0; overflow: hidden; max-width: 360px; }
.rrhead { background: linear-gradient(var(--navy), var(--navy-d)); color: var(--gold-2); font-weight: 900; font-size: 22px; letter-spacing: .03em; padding: 16px 12px; }
.rrcols { display: grid; grid-template-columns: 1.1fr 1.4fr 1fr; align-items: center; font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .06em; padding: 14px 16px 6px; }
.rrcols span:nth-child(2) { text-align: center; } .rrcols span:nth-child(3) { text-align: right; }
.rrrow { display: grid; grid-template-columns: 1.1fr 1.4fr 1fr; align-items: center; background: #16212f; border: 1px solid rgba(217,178,95,.18); border-radius: 12px; margin: 8px 14px; padding: 12px 14px; }
.rrrow .rrteam { font-weight: 900; font-size: 14px; padding: 4px 8px; border-radius: 8px; justify-self: start; color: #0c100e; }
.rrrow.us .rrteam { background: var(--us); } .rrrow.them .rrteam { background: var(--them); }
.rrrow .rrthis { text-align: center; font-size: 22px; font-weight: 800; }
.rrrow .rrthis.pos { color: var(--ok); } .rrrow .rrthis.neg { color: var(--no); }
.rrrow .rrtot { text-align: right; font-size: 26px; font-weight: 900; color: var(--gold-2); }
.rrtoggle { background: none; border: none; color: var(--muted); font-weight: 800; font-size: 12px; text-decoration: underline; padding: 10px; }
.rrdetail { font-size: 12px; color: var(--muted); padding: 0 18px 8px; text-align: left; }
.rrdetail .rrd { margin: 4px 0; }
.rrcont { margin: 6px 18px calc(16px + var(--safe-b)); width: calc(100% - 36px); }

/* ---------- Settings / House Rules panel ---------- */
.panel { width: 100%; max-width: 340px; background: linear-gradient(#101a28, #0b121d); border: 1px solid var(--gold-d); border-radius: 14px; padding: 0 0 14px; box-shadow: 0 20px 50px rgba(0,0,0,.6); }
.panel h2 { font-family: Georgia, serif; font-style: italic; color: var(--gold-2); text-align: center; font-size: 24px; padding: 14px; border-bottom: 1px solid rgba(217,178,95,.3); }
.panel .closex { float: right; margin: -44px 12px 0 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold-d); background: #0c1622; color: var(--gold-2); position: relative; z-index: 2; }
.psub { text-align: center; letter-spacing: .14em; font-size: 11px; color: var(--muted); margin: 12px 0 6px; }
.row { display: flex; align-items: center; justify-content: space-between; padding: 11px 18px; }
.row .lbl { font-size: 15px; }
.dd { background: #0c1622; border: 1px solid var(--gold-d); color: var(--gold-2); border-radius: 8px; padding: 8px 10px; font-size: 15px; font-weight: 700; }
.sw { width: 58px; height: 30px; border-radius: 99px; background: #0c1622; border: 1px solid var(--gold-d); position: relative; cursor: pointer; transition: background .15s; flex: 0 0 auto; }
.sw i { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(#3a4a66, #26344f); transition: left .15s, background .15s; }
.sw.on { background: linear-gradient(90deg, var(--gold-d), var(--gold)); }
.sw.on i { left: 30px; background: linear-gradient(#fff7e6, var(--gold-2)); }
.pnote { font-size: 11px; color: var(--muted); padding: 8px 18px 2px; text-align: left; }
.prowfull { padding: 8px 18px 0; }
.prow2 { display: flex; gap: 10px; padding: 8px 18px calc(8px + var(--safe-b)); }
.prow2 .big { flex: 1; }

/* ---------- Tutorial ---------- */
.tut-sheet { max-width: 380px; max-height: calc(100% - 32px); overflow-y: auto; text-align: left; }
.tut .closex { float: right; margin: -6px -4px 0 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold-d); background: #0c1622; color: var(--gold-2); }
.tut-pips { display: flex; gap: 6px; justify-content: center; margin: 2px 0 12px; }
.pip { width: 22px; height: 6px; border-radius: 99px; background: #2a3850; }
.pip.done { background: var(--ok); } .pip.cur { background: var(--gold-2); }
.tut-h { text-align: center; font-size: 22px; color: var(--gold-2); margin: 0 0 6px; }
.tut-intro { text-align: center; font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.tut-eyebrow { text-align: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }

.menu-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.menu-card { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #16212f; border: 1px solid var(--gold-d); border-radius: 12px; padding: 12px; color: var(--txt); }
.menu-card .mc-num { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(var(--gold-2), var(--gold)); color: #1c1505; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.menu-card .mc-title { flex: 1; font-weight: 700; font-size: 14px; }
.menu-card .mc-state { font-size: 12px; font-weight: 800; color: var(--gold-2); }
.menu-card.cap { background: #12182a; }
.menu-card.cap.locked { opacity: .55; }
.menu-card.cap .mc-num { background: linear-gradient(#26344f, #141d30); color: var(--gold-2); }

.rulebox { background: #16212f; border-left: 4px solid var(--gold-2); border-radius: 8px; padding: 12px 14px; font-size: 15px; font-weight: 700; color: var(--txt); margin: 6px 0; }
.src { font-size: 10.5px; color: #6f7d86; margin: 4px 2px 10px; }
.tut-body { font-size: 13.5px; line-height: 1.45; color: #d8dde2; margin: 0 0 10px; }
.ask { font-size: 14px; font-weight: 700; color: var(--gold-2); margin: 6px 0 10px; }

.drill { margin: 6px 0 10px; }
.drill.trickrow { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.handrow { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.handrow.small { gap: 4px; }
.seatcard { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.seatlbl { font-size: 10px; color: var(--muted); }
.tcard { width: 54px; height: 78px; border-radius: 6px; display: block; box-shadow: 0 2px 5px rgba(0,0,0,.5); }
.tcard.tap { cursor: pointer; }
.tcard.right { outline: 3px solid var(--ok); outline-offset: 1px; }
.tcard.wrong { outline: 3px solid var(--no); outline-offset: 1px; animation: shakeT .35s; }
@keyframes shakeT { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-3px); } }
.biddrill .handrow.small .tcard { width: 42px; height: 60px; }
.bidpad { max-width: 300px; margin: 4px auto 0; }

.tut-fb { border-radius: 10px; padding: 12px; font-size: 13.5px; line-height: 1.4; margin: 4px 0 12px; }
.tut-fb.ok { background: rgba(90,209,155,.14); border: 1px solid var(--ok); color: #cdeede; }
.tut-fb.no { background: rgba(224,97,79,.14); border: 1px solid var(--no); color: #ffd9d2; }
.tut-nav { display: flex; gap: 10px; }
.tut-nav .big { flex: 1; }

/* ---------- Home / title screen ---------- */
.overlay.home { background: radial-gradient(120% 80% at 50% 30%, #0e1620, #05080b 70%); }
.homecard { text-align: center; max-width: 320px; }
.home-spade { font-size: 60px; color: var(--gold-2); line-height: 1; }
.home-title { font-family: Georgia, serif; font-style: italic; color: var(--gold-2); font-size: 40px; margin: 2px 0; letter-spacing: .02em; }
.home-tag { color: var(--muted); font-size: 13px; margin: 2px 0 18px; }
.homecard .big { margin-top: 10px; }
.setup-sheet { max-width: 500px; max-height: calc(100vh - 28px); overflow-y: auto; text-align: left; }
.setup-sheet h2, .setup-sheet .sub { text-align: center; }
.setup-choices { display: grid; gap: 7px; }
.setup-choice { text-align: left; background: #16212f; color: var(--txt); border: 1px solid rgba(217,178,95,.35); border-radius: 10px; padding: 10px 12px; }
.setup-choice.selected { border-color: var(--gold-2); box-shadow: inset 0 0 0 1px var(--gold-2); background: #202d3e; }
.setup-choice b, .setup-choice span, .effective-summary b, .effective-summary span, .settings-summary b, .settings-summary span { display:block; }
.setup-choice span, .effective-summary span, .settings-summary span { color: var(--muted); font-size: 12px; line-height: 1.35; margin-top: 2px; }
.effective-summary, .settings-summary { background:#0c1622; border:1px solid rgba(217,178,95,.35); border-radius:10px; padding:10px 12px; margin:12px 0; }
.setup-sheet .big { margin-top: 8px; }
.custom-editor section { border-top: 1px solid rgba(217,178,95,.28); margin-top: 12px; padding-top: 8px; }
.custom-editor h3 { color: var(--gold-2); font-size: 16px; margin: 0 0 5px; }
.custom-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; font-size:14px; }
.custom-row input[type="number"], .custom-row select { max-width: 150px; background:#0c1622; color:var(--gold-2); border:1px solid var(--gold-d); border-radius:7px; padding:7px; }
.custom-row input[type="checkbox"] { width:22px; height:22px; accent-color:var(--gold-2); }

.tut-done { text-align: center; }
.tut-done .bigspade { font-size: 70px; color: var(--gold-2); text-align: center; }
.tut-done .big { margin-top: 10px; }

/* ---------- Responsive / motion ---------- */
@media (max-height: 680px) {
  .played img { width: 64px; height: 97px; }
  .handwrap { height: calc(206px + var(--safe-b)); }
  .hand { height: 160px; }
  .hand { --card-w: 88px; --card-h: 134px; }
  .felt .mono { font-size: 100px; }
}
@media (min-width: 700px) {
  :root { --d: min(82vw, 760px); --dh: min(54vw, 500px); --cy: 43%; }
  .topbar { padding-inline: 28px; }
  .bidbar { padding-inline: 28px; }
  .table { top: 88px; }
  .seat { width: 112px; }
  .seat .av { width: 52px; height: 52px; }
  .played img { width: 96px; height: 146px; }
  .played.p-north { top: calc(var(--cy) - 94px); }
  .played.p-west { left: calc(50% - 132px); }
  .played.p-east { left: calc(50% + 132px); }
  .played.p-south { top: calc(var(--cy) + 88px); }
  .handwrap { height: calc(276px + var(--safe-b)); }
  .hand { --card-w: 118px; --card-h: 180px; width: min(720px, 100vw - 34px); height: 214px; }
  .caption { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .seat.active .av, .trickwin, .played.clearing, .shake, .tcard.wrong, .flycard { animation: none !important; }
  .card-slot, .card-slot .c, .gesture-preview { transition: none; }
  .played.clearing { opacity: 0; }
}