/* Solo Card Games: the table. The town square seen from above (paving, a cloth, a banner at each
   seat), the cards of the Company and Classic decks, the dialogs and the building blocks.
   Card sizes come from --cw (card width in px) set by the shell. Light = the square by day;
   dark = the square in the evening with lanterns. */

.table-mount { position: relative; }
.sq-stage { position: relative; }
.sq {
  --pave: #c9b893;
  --stones: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%23b09f7b'/%3E%3Crect x='2' y='2' width='30' height='22' rx='6' fill='%23ddcfae'/%3E%3Crect x='35' y='2' width='24' height='22' rx='6' fill='%23d4c5a1'/%3E%3Crect x='62' y='2' width='34' height='22' rx='6' fill='%23e2d5b6'/%3E%3Crect x='99' y='2' width='19' height='22' rx='6' fill='%23cfbf9a'/%3E%3Crect x='-10' y='27' width='26' height='24' rx='6' fill='%23d9caa8'/%3E%3Crect x='19' y='27' width='33' height='24' rx='6' fill='%23ddcfae'/%3E%3Crect x='55' y='27' width='22' height='24' rx='6' fill='%23d4c5a1'/%3E%3Crect x='80' y='27' width='27' height='24' rx='6' fill='%23e2d5b6'/%3E%3Crect x='110' y='27' width='26' height='24' rx='6' fill='%23cfbf9a'/%3E%3Crect x='4' y='54' width='22' height='24' rx='6' fill='%23d9caa8'/%3E%3Crect x='29' y='54' width='36' height='24' rx='6' fill='%23ddcfae'/%3E%3Crect x='68' y='54' width='25' height='24' rx='6' fill='%23d4c5a1'/%3E%3Crect x='96' y='54' width='22' height='24' rx='6' fill='%23e2d5b6'/%3E%3C/svg%3E");
  --light: radial-gradient(ellipse 80% 70% at 50% 45%, rgb(255 248 230 / 30%), transparent 70%);
  --edge: rgb(70 50 25 / 38%);
  --ink: #1e1a2b;
  --on-pave: #1e1a2b;
  --parch: #fbf5e6;
  --cloth: #7a1a27;
  --cloth-2: #661520;
  --gold: #e0a82e;
  --crimson: #b3202a;
  --red: #c0182a;
  --black: #17161c;
  --blue: #1f5fbf;
  --green: #1b7a3c;
  --idx: "Helvetica Neue", Arial, system-ui, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cw: 80px;
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  height: 600px; min-height: 380px; border-radius: 14px; isolation: isolate;
  color: var(--on-pave); font: 1rem/1.3 var(--sans);
  background: var(--pave); box-shadow: 0 2px 4px rgb(0 0 0 / 15%), 0 10px 30px rgb(30 26 43 / 18%);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
@media (prefers-color-scheme: dark) {
  .sq {
    --pave: #2a2531;
    --stones: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%2315111a'/%3E%3Crect x='2' y='2' width='30' height='22' rx='6' fill='%2337313f'/%3E%3Crect x='35' y='2' width='24' height='22' rx='6' fill='%23312b39'/%3E%3Crect x='62' y='2' width='34' height='22' rx='6' fill='%233c3544'/%3E%3Crect x='99' y='2' width='19' height='22' rx='6' fill='%232e2936'/%3E%3Crect x='-10' y='27' width='26' height='24' rx='6' fill='%2335303d'/%3E%3Crect x='19' y='27' width='33' height='24' rx='6' fill='%2337313f'/%3E%3Crect x='55' y='27' width='22' height='24' rx='6' fill='%23312b39'/%3E%3Crect x='80' y='27' width='27' height='24' rx='6' fill='%233c3544'/%3E%3Crect x='110' y='27' width='26' height='24' rx='6' fill='%232e2936'/%3E%3Crect x='4' y='54' width='22' height='24' rx='6' fill='%2335303d'/%3E%3Crect x='29' y='54' width='36' height='24' rx='6' fill='%2337313f'/%3E%3Crect x='68' y='54' width='25' height='24' rx='6' fill='%23312b39'/%3E%3Crect x='96' y='54' width='22' height='24' rx='6' fill='%233c3544'/%3E%3C/svg%3E");
    --light: radial-gradient(circle at 6% 8%, rgb(255 184 77 / 34%), transparent 26%), radial-gradient(circle at 94% 8%, rgb(255 184 77 / 34%), transparent 26%), radial-gradient(circle at 6% 92%, rgb(255 184 77 / 24%), transparent 24%), radial-gradient(circle at 94% 92%, rgb(255 184 77 / 24%), transparent 24%);
    --edge: rgb(0 0 0 / 55%);
    --on-pave: #f3ead8;
    --cloth: #5a1019;
    --cloth-2: #4a0c14;
  }
}
.sq [hidden] { display: none !important; }
.sq-ground {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 48%, transparent 55%, var(--edge)), var(--light), var(--stones) 0 0 / 120px 80px;
}
.sq-top, .sq-mid, .sq-south, .sq-bar { position: relative; z-index: 1; }
.sq-top { display: flex; justify-content: center; align-items: flex-start; gap: 10px; padding: 8px 10px 0; min-height: 50px; }
.sq-mid { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; gap: 10px; padding: 6px 10px; }
.sq-side { flex: none; display: flex; align-items: center; justify-content: center; width: 124px; }
.sq-cloth {
  position: relative; flex: 1 1 auto; min-width: 0; border-radius: 12px;
  background: repeating-linear-gradient(45deg, rgb(255 255 255 / 3.5%) 0 2px, transparent 2px 22px), repeating-linear-gradient(-45deg, rgb(255 255 255 / 3.5%) 0 2px, transparent 2px 22px), linear-gradient(180deg, var(--cloth), var(--cloth-2));
  border: 3px solid var(--gold);
  box-shadow: inset 0 0 0 5px var(--cloth), inset 0 0 0 6px rgb(224 168 46 / 55%), inset 0 0 40px rgb(0 0 0 / 30%), 0 6px 16px rgb(0 0 0 / 30%);
}
.sq-board { position: absolute; inset: 0; }
.sq-cloth::before {
  content: ""; position: absolute; left: 50%; top: 50%; height: 84%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgb(224 168 46 / 16%); box-shadow: inset 0 0 0 9px rgb(224 168 46 / 3%), inset 0 0 0 10px rgb(224 168 46 / 9%);
}
.sq.roomy .sq-bar { justify-content: flex-end; align-items: center; }
.sq.roomy .sq-bar .sq-prompt { flex: 1 1 auto; min-width: 0; height: 46px; margin-right: 8px; color: #f6efe0; }
.sq.roomy .sq-bar .sq-prompt-text { font-size: 1.1rem; }
.sq-south { flex: none; padding: 0 8px; }
.sq-prompt { display: flex; align-items: center; gap: 10px; height: 52px; padding: 2px 2px; }
.sq-prompt-text {
  flex: 1 1 auto; min-width: 0; margin: 0; font-weight: 600; font-size: 1.05rem; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sq-actions { display: flex; gap: 6px; flex: none; }
.sq-actions .sq-btn { white-space: nowrap; }
.sq-hand { position: relative; }
.sq-bar {
  flex: none; display: flex; justify-content: center; gap: 8px; padding: 7px 8px 8px;
  background: linear-gradient(180deg, rgb(30 26 43 / 88%), rgb(30 26 43 / 96%)); border-top: 2px solid var(--gold);
}
.sq-tool {
  flex: none; min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  border: 1px solid #c9b48a; background: var(--parch); color: var(--ink); font: 600 1rem/1 var(--sans);
}
.sq-tool:hover { background: #fff; }
.sq-tool[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); }
.sq-tool.primary { background: var(--crimson); border-color: #f3c766; color: #fff8ec; }
.sq-tool:disabled { opacity: .45; cursor: default; }
.sq-tool .short { display: none; }
/* ---------------------------------------------------------------- the speaker (sound on or off) */
.sq .sq-bar .sq-tool.sq-snd { flex: 0 0 46px; width: 46px; min-width: 46px; padding: 0; position: relative; }
.sq-snd::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='%23000'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='%23000'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sq-snd.off::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='%23000'/%3E%3Cpath d='M16.5 9.5l5 5M21.5 9.5l-5 5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='%23000'/%3E%3Cpath d='M16.5 9.5l5 5M21.5 9.5l-5 5'/%3E%3C/svg%3E"); }
.sq-snd.off { color: #6b5a3e; }
.sq-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
@media (forced-colors: active) { .sq-snd::before { background: ButtonText; } }
.sq :focus-visible { outline: 3px solid #f3c766; outline-offset: 2px; box-shadow: 0 0 0 6px var(--ink); }

/* ---------------------------------------------------------------- seats: a banner and a shield each */
.seat {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 12px 5px 7px;
  background: linear-gradient(180deg, #fffaf0, #f1e6cc); color: var(--ink); border: 1px solid #c9b48a; border-radius: 10px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 22%); transition: box-shadow .2s;
}
.seat-shield { flex: none; display: block; width: 34px; }
.seat-shield .shield { display: block; width: 100%; height: auto; }
.seat-text { display: flex; flex-direction: column; min-width: 0; }
.seat-name { font: 700 1.08rem/1.15 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-score { font-size: .92rem; font-weight: 600; white-space: nowrap; }
.seat-sub { font-size: .9rem; color: #9b1b26; font-weight: 600; white-space: nowrap; }
.seat.turn { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold), 0 0 18px 4px rgb(224 168 46 / 70%); }
.sq-side .seat {
  flex-direction: column; text-align: center; width: 118px; padding: 10px 6px 22px;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%); border-radius: 8px 8px 0 0;
}
.sq-side .seat.turn { background: linear-gradient(180deg, #fff3cf, #f3d98f); }
.sq-side .seat-shield { width: 42px; }
.sq-side .seat-text { align-items: center; max-width: 100%; }
.sq-prompt .seat { padding: 3px 10px 3px 5px; flex: none; }
.sq-prompt .seat-text { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; max-width: 12.5rem; }
.sq-prompt .seat-sub { flex-basis: 100%; }
.sq-prompt .seat-shield { width: 28px; }

/* narrow: west, north and east share the top row; toolbar labels may wrap onto two lines */
.sq[data-layout="narrow"] .sq-top { gap: 6px; padding: 6px 6px 0; }
.sq[data-layout="narrow"] .sq-top .seat { flex: 1 1 0; padding: 4px 6px 4px 4px; gap: 5px; }
.sq[data-layout="narrow"] .seat-shield { width: 22px; }
.sq[data-layout="narrow"] .seat-name { font-size: .95rem; }
.sq[data-layout="narrow"] .seat-score, .sq[data-layout="narrow"] .seat-sub { font-size: .9rem; line-height: 1.15; }
/* three seats share the top row on a phone: a long line wraps instead of being cut off */
.sq[data-layout="narrow"] .sq-top .seat-score, .sq[data-layout="narrow"] .sq-top .seat-sub { white-space: normal; text-wrap: balance; grid-column: 1 / -1; }
/* the shield sits beside the name and the lines below use the banner's full width */
.sq[data-layout="narrow"] .sq-top .seat { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 5px; row-gap: 0; align-content: start; }
.sq[data-layout="narrow"] .sq-top .seat-text { display: contents; }
.sq[data-layout="narrow"] .sq-mid { padding: 6px 6px; }
.sq[data-layout="narrow"] .sq-side { display: none; }
.sq[data-layout="narrow"] .sq-south { padding: 0 4px; }
.sq[data-layout="narrow"] .sq-prompt { gap: 6px; height: 60px; }
/* on a phone the instruction gets three lines and the player's banner stacks name over score, so
   "what to do next" is never cut off */
.sq[data-layout="narrow"] .sq-prompt-text { font-size: .9rem; line-height: 1.18; -webkit-line-clamp: 3; }
.sq[data-layout="narrow"] .sq-prompt .seat-sub { display: none; }
.sq[data-layout="narrow"] .sq-prompt .seat { padding: 3px 8px 3px 5px; gap: 6px; }
.sq[data-layout="narrow"] .sq-prompt .seat-text { flex-direction: column; align-items: flex-start; max-width: 7.5rem; }
.sq[data-layout="narrow"] .sq-prompt .seat-shield { width: 22px; }
.sq[data-layout="narrow"] .sq-bar { gap: 5px; padding: 6px 5px 7px; }
.sq[data-layout="narrow"] .sq-tool { flex: 1 1 0; min-width: 0; padding: 0 2px; font-size: .9rem; line-height: 1.08; white-space: normal; hyphens: manual; overflow-wrap: normal; }
.sq .sq-tool.tight, .sq[data-layout="narrow"] .sq-tool.tight { font-size: .78rem; }
.sq-tool.shortest .long { display: none; }
.sq-tool.shortest .short { display: inline; }
.sq[data-layout="narrow"] .sq-info { font-size: .9rem; max-width: 48%; }
.sq[data-layout="narrow"] .sq-info-b { display: none; }
.sq[data-layout="narrow"] .herald { font-size: 1rem; top: 6px; max-width: 94%; padding: .25rem .7rem; }

/* ---------------------------------------------------------------- the cloth: Herald, corners, the trick */
.herald {
  position: absolute; z-index: 4; top: 8px; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: 70%;
  padding: .28rem 1.1rem; border-radius: 4px; text-align: center; pointer-events: none;
  background: linear-gradient(180deg, #fbefc9, #ecd38d); color: #6e1219; border: 1px solid #a8812a;
  font: 700 1.15rem/1.25 var(--serif); box-shadow: 0 2px 8px rgb(0 0 0 / 35%); opacity: 0; transition: opacity .6s;
}
.herald:empty { display: none; }
.herald.on { opacity: 1; }
.sq-info { position: absolute; z-index: 2; margin: 0; font-size: .9rem; line-height: 1.2; color: rgb(251 245 230 / 88%); pointer-events: none; max-width: 38%; }
.sq-info-l { left: 12px; bottom: 9px; }
.sq-info-r { right: 12px; bottom: 9px; text-align: right; }
.sq-info-b { left: 12px; top: 12px; padding: 2px 8px; border-radius: 999px; background: rgb(0 0 0 / 22%); color: #ffd1d1; font-weight: 700; }
.sq-info:empty { display: none; }
.trick { position: absolute; left: 50%; top: calc(50% + 12px); width: 0; height: 0; }
.trick-slot { position: absolute; width: var(--cw); height: calc(var(--cw) * 1.4); }
.trick-slot.at-n { left: calc(var(--cw) * -.5); top: calc(var(--cw) * -1.34); }
.trick-slot.at-s { left: calc(var(--cw) * -.5); top: calc(var(--cw) * -.06); }
.trick-slot.at-w { left: calc(var(--cw) * -1.62); top: calc(var(--cw) * -.7); }
.trick-slot.at-e { left: calc(var(--cw) * .62); top: calc(var(--cw) * -.7); }
.trick-slot .card { cursor: default; }
.trick-choices {
  position: absolute; z-index: 6; left: 50%; top: 50%; translate: -50% -50%; width: min(92%, 26rem);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); gap: 6px; padding: 10px;
  background: rgb(251 246 234 / 97%); border-radius: 10px; box-shadow: 0 6px 18px rgb(0 0 0 / 35%);
}
.set-heart { position: absolute; z-index: 5; left: 50%; top: 50%; width: calc(var(--cw) * 1.6); height: calc(var(--cw) * 1.6); margin: calc(var(--cw) * -.8) 0 0 calc(var(--cw) * -.8); fill: #e2283a; opacity: 0; pointer-events: none; filter: drop-shadow(0 0 12px rgb(255 120 120 / 70%)); }
.trick-center { position: absolute; z-index: 3; left: 50%; top: calc(50% + 12px); translate: -50% -50%; display: flex; gap: 10px; align-items: center; }
.trick-center:empty { display: none; }
.seat.out { opacity: .4; filter: grayscale(.6); }
.card-crown {
  position: absolute; z-index: 3; right: 6%; top: 1.5%; width: calc(var(--cw) * .26); height: calc(var(--cw) * .18); background: var(--gold);
  clip-path: polygon(0 100%, 0 25%, 22% 60%, 50% 0, 78% 60%, 100% 25%, 100% 100%); filter: drop-shadow(0 1px 1px rgb(0 0 0 / 50%));
}
.ix .ix-extra { width: calc(var(--cw) * .14); height: calc(var(--cw) * .14); margin-top: 2px; }
.ix .ix-extra.s-H, .ix .ix-extra.s-D { fill: var(--red); }
.ix .ix-extra.s-C, .ix .ix-extra.s-S { fill: var(--black); }
.four-color .ix .ix-extra.s-D { fill: var(--blue); }
.four-color .ix .ix-extra.s-C { fill: var(--green); }
.trick-extra { position: absolute; z-index: 2; top: 10px; right: 12px; }
.sq-veil { position: absolute; inset: 0; z-index: 20; background: #0d0a14; opacity: 0; pointer-events: none; border-radius: 14px; }
.sq-fw { position: absolute; inset: 0; z-index: 30; width: 100%; height: 100%; pointer-events: none; }

/* ---------------------------------------------------------------- cards */
.card {
  --house: #26232e;
  position: absolute; left: 0; top: 0; display: block; width: var(--cw); height: calc(var(--cw) * 1.4);
  margin: 0; padding: 0; overflow: hidden; cursor: pointer; text-align: left;
  border: 1px solid #a8956c; border-radius: calc(var(--cw) * .075);
  background: linear-gradient(160deg, #fffbf1 0%, var(--parch) 45%, #f1e5c8 100%);
  box-shadow: 0 1px 2px rgb(0 0 0 / 28%), 0 3px 9px rgb(0 0 0 / 20%);
  color: var(--black); font-family: var(--idx); transition: transform .12s ease-out; isolation: isolate;
}
.card.s-H, .card.s-D { color: var(--red); }
.four-color .card.s-D { color: var(--blue); }
.four-color .card.s-C { color: var(--green); }
.card.s-H { --house: #8c1b26; }
.card.s-D { --house: #b8851d; }
.card.s-C { --house: #2f5d3a; }
.card.s-S { --house: #26232e; }
.card.up { transform: translateY(calc(var(--cw) * -.22)); }
.card.no::after { content: ""; position: absolute; inset: 0; background: rgb(46 34 20 / 30%); }
.card.no { cursor: default; }
.card.hint { box-shadow: 0 0 0 3px var(--gold), 0 0 20px 5px rgb(224 168 46 / 90%); }
.card.new { box-shadow: 0 0 0 3px #3d8a55, 0 3px 9px rgb(0 0 0 / 25%); }
.card.gone { opacity: 0; }
.card.lady { box-shadow: 0 0 0 3px var(--black), 0 0 26px 8px rgb(255 255 255 / 55%); }
.cf { position: absolute; inset: 0; pointer-events: none; }
.ix { position: absolute; left: 2.5%; top: 2.5%; width: 25%; display: flex; flex-direction: column; align-items: center; line-height: 1; z-index: 2; }
.ix b { display: block; font: 800 calc(var(--cw) * .31)/.95 var(--idx); letter-spacing: -.02em; }
.ix b.ten { font-size: calc(var(--cw) * .265); letter-spacing: -.1em; margin-left: -.1em; }
.ix .suit { display: block; width: calc(var(--cw) * .2); height: calc(var(--cw) * .2); margin-top: calc(var(--cw) * .025); fill: currentColor; }
.ix2 { left: auto; top: auto; right: 2.5%; bottom: 2%; width: 17%; transform: rotate(180deg); }
.ix2 b { font-size: calc(var(--cw) * .17); }
.ix2 b.ten { font-size: calc(var(--cw) * .145); }
.ix2 .suit { width: calc(var(--cw) * .12); height: calc(var(--cw) * .12); margin-top: calc(var(--cw) * .015); }
.pn {
  position: absolute; left: 28%; top: 3%; right: 4%; bottom: 19%; overflow: hidden;
  border: max(2px, calc(var(--cw) * .028)) solid var(--house); border-radius: calc(var(--cw) * .04);
  background: var(--house); box-shadow: 0 0 0 1px rgb(224 168 46 / 70%);
}
.pn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; display: block; }
.pn-ph { position: absolute; inset: 0; display: grid; place-items: center; }
.pn.noimg { visibility: hidden; }
.pn-ph .suit { width: 55%; height: 55%; fill: rgb(255 255 255 / 20%); }
.pips {
  position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: var(--strip); box-sizing: border-box; display: flex; flex-wrap: wrap;
  justify-content: center; align-content: center; gap: 1px 1px; padding: 1px 3px; background: #f6edd6; border-bottom: 1px solid var(--house);
}
.pn.has-pips img { top: var(--strip); height: calc(100% - var(--strip)); }
.pips .suit { width: calc((100% - 6px) / var(--per) - 1px); max-width: calc(var(--cw) * .11); height: calc(var(--cw) * .1); fill: currentColor; }
.card.classic .pn, .pn-c { left: 27%; right: 27%; top: 9%; bottom: 9%; border: 0; background: none; box-shadow: none; overflow: visible; }
.pn-c .pip { position: absolute; width: calc(var(--cw) * .17); height: calc(var(--cw) * .17); translate: -50% -50%; fill: currentColor; }
.pn-c .pip.flip { rotate: 180deg; }
.pn-c .ace { position: absolute; inset: 0; display: grid; place-items: center; }
.pn-c .ace .suit { width: calc(var(--cw) * .42); height: calc(var(--cw) * .42); fill: currentColor; }
.pn-c .court {
  position: absolute; inset: 4% 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%;
  border: max(1.5px, calc(var(--cw) * .018)) solid currentColor; border-radius: calc(var(--cw) * .04);
  background: linear-gradient(180deg, rgb(224 168 46 / 16%), rgb(224 168 46 / 4%));
}
.pn-c .court b { font: 700 calc(var(--cw) * .4)/1 var(--serif); }
.pn-c .court .suit { width: calc(var(--cw) * .26); height: calc(var(--cw) * .26); fill: currentColor; }
.card.down {
  border-color: #5a1019;
  background:
    linear-gradient(45deg, transparent 45%, rgb(224 168 46 / 55%) 46% 54%, transparent 55%) 0 0 / calc(var(--cw) * .2) calc(var(--cw) * .2),
    linear-gradient(-45deg, transparent 45%, rgb(224 168 46 / 55%) 46% 54%, transparent 55%) 0 0 / calc(var(--cw) * .2) calc(var(--cw) * .2),
    radial-gradient(circle at 50% 50%, #9e2230, #6e1520 75%);
  box-shadow: inset 0 0 0 calc(var(--cw) * .045) #f6efe0, inset 0 0 0 calc(var(--cw) * .065) var(--gold), 0 1px 2px rgb(0 0 0 / 28%), 0 3px 9px rgb(0 0 0 / 20%);
}
.card.down::before {
  content: ""; position: absolute; left: 32%; top: 34%; width: 36%; height: 32%; background: var(--gold);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); box-shadow: inset 0 0 0 3px #6e1520;
}
.card.down::after {
  content: ""; position: absolute; left: 38%; top: 39%; width: 24%; height: 20%; background: #8c1b26;
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
}

/* ---------------------------------------------------------------- the hand and other blocks */
.blk-hand { position: relative; width: 100%; }
.blk-pile { --step: .3; position: relative; flex: none; width: var(--cw); height: calc(var(--cw) * 1.4); }
.blk-pile.fan-down { height: calc(var(--cw) * 1.4 * (1 + var(--step) * (var(--fan-n) - 1))); }
.blk-pile.fan-right { width: calc(var(--cw) * (1 + var(--step) * (var(--fan-n) - 1))); }
.blk-empty {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 2px dashed rgb(246 239 224 / 60%); border-radius: calc(var(--cw) * .075); background: rgb(0 0 0 / 10%);
  color: rgb(246 239 224 / 85%); font: 700 calc(var(--cw) * .28)/1 var(--serif);
}
.blk-pile.dest > .card:last-of-type, .blk-pile.dest > .blk-empty { box-shadow: 0 0 0 3px var(--gold), 0 0 16px 4px rgb(224 168 46 / 85%); }
.blk-pile.picked > .card:last-of-type { transform: translateY(calc(var(--cw) * -.14)); box-shadow: 0 0 0 3px var(--gold), 0 6px 14px rgb(0 0 0 / 35%); }
.blk-count {
  position: absolute; z-index: 3; right: -8px; top: -8px; min-width: 1.7em; padding: .15em .35em; border-radius: 999px; text-align: center;
  background: var(--ink); color: #fbf5e6; font: 700 .9rem/1 var(--sans); border: 2px solid var(--gold);
}
.blk-row { display: flex; justify-content: center; align-items: flex-start; gap: calc(var(--cw) * .15); }
.blk-grid { display: grid; grid-template-columns: repeat(var(--cols), var(--cw)); gap: calc(var(--cw) * .15); justify-content: center; }
.board-free { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--cw) * .2); padding: 40px 10px 34px; }
.blk-pegs { display: block; width: min(100%, 34rem); height: auto; }
.peg-wood { fill: #9a6a35; stroke: #5b3a1a; stroke-width: 2; }
.peg-hole { fill: #3b2410; }
.peg-hole.five { fill: #1f1206; }
.peg-hole.game { fill: var(--gold); stroke: #5b3a1a; }
.peg-back { stroke: #1e1a2b; stroke-width: .6; }

/* ---------------------------------------------------------------- dialogs over the table */
.sq-shade {
  position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 10px;
  background: rgb(20 16 28 / 55%); border-radius: 14px;
}
.sq-panel {
  display: flex; flex-direction: column; width: 100%; max-width: 36rem; max-height: 100%;
  background: #fbf6ea; color: #1e1a2b; border: 2px solid var(--gold, #e0a82e); border-radius: 12px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 40%); font: 1rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-user-select: text; user-select: text;
  color-scheme: light; /* the panel is parchment in both themes: native radios and fields stay light */
}
.sq-panel h2::before { content: none; }
.sq-panel h2, .sq-panel h3 { color: #1e1a2b; padding: 0; text-wrap: balance; }
.sq-panel thead th { background: transparent; border-bottom: 2px solid #1e1a2b; }
.sq-panel tbody tr:nth-child(even) { background: transparent; }
.sq-panel th, .sq-panel td { color: #1e1a2b; vertical-align: middle; }
.sq-panel dt { margin: 0; }
.sq-panel li + li { margin-top: .25rem; }
.sq-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 4px 18px; }
.sq-panel-head h2 { margin: 0; font: 700 1.35rem/1.2 Georgia, "Iowan Old Style", Palatino, serif; color: #1e1a2b; }
.sq-panel-body { overflow: auto; padding: 4px 18px 12px; overscroll-behavior: contain; }
.sq-panel-body h3 { margin: 14px 0 6px; font: 700 1.05rem/1.2 Georgia, "Iowan Old Style", Palatino, serif; }
.sq-panel-body p { margin: .4rem 0; }
.sq-panel-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 10px 18px 14px; border-top: 1px solid #e3d5b3; }
.sq-btn {
  min-height: 44px; padding: 0 16px; border-radius: 8px; cursor: pointer; border: 1px solid #b9a782;
  background: #fff; color: #1e1a2b; font: 600 1rem/1.1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.sq-btn:hover { background: #fff7e3; }
.sq-btn.primary { background: #b3202a; border-color: #8f1820; color: #fff8ec; }
.sq-btn.primary:hover { background: #961a23; }
.sq-btn:disabled { opacity: .45; cursor: default; }
.sq-btn.hint { box-shadow: 0 0 0 3px #e0a82e, 0 0 14px 3px rgb(224 168 46 / 85%); }
.sq-actions .sq-btn { min-height: 46px; }
.sq-x { min-width: 44px; min-height: 44px; border: 0; background: none; font: 400 2rem/1 Georgia, serif; cursor: pointer; color: #1e1a2b; border-radius: 8px; }
.sq-field { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.sq-field legend { padding: 0; margin-bottom: 5px; font-weight: 700; }
.sq-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.sq-choice {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px; cursor: pointer;
  border: 1px solid #d6c6a6; border-radius: 8px; background: #fff;
}
.sq-choice input { width: 20px; height: 20px; margin: 0; accent-color: #b3202a; }
.sq-choice:has(input:checked) { border-color: #b3202a; background: #fdeceb; font-weight: 700; }
.sq-choice:has(input:focus-visible) { outline: 3px solid #1e1a2b; outline-offset: 2px; }
.sq-help { color: #554c61; font-size: .92rem; }
.sq-rules { margin: .3rem 0 .6rem; padding-left: 1.2rem; }
.sq-rules li { margin: .25rem 0; }
.sq-table-wrap { overflow-x: auto; }
.sq-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sq-table th, .sq-table td { padding: 7px 8px; border-bottom: 1px solid #e3d5b3; text-align: right; white-space: nowrap; }
.sq-table th[scope="row"], .sq-table thead th:first-child { text-align: left; }
.sq-table thead th { font-size: .9rem; color: #554c61; }
.sq-table tr.me th, .sq-table tr.me td { background: #fdf3d8; font-weight: 700; }
.sq-note { font-weight: 600; color: #8f1820; }
.sq-big { font: 700 1.3rem/1.3 Georgia, "Iowan Old Style", Palatino, serif; color: #8f1820; }
.sq-center { text-align: center; }
.sq-hand-list { list-style: none; margin: 0; padding: 0; }
.sq-hand-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid #efe4c9; }
.sq-hand-list strong { min-width: 4.2rem; font-family: Georgia, serif; }
.sq-hand-text { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
.sq-ht-suit { display: inline-flex; align-items: center; gap: 4px; font: 700 1.1rem/1.2 "Helvetica Neue", Arial, sans-serif; color: #17161c; }
.sq-ht-suit.s-H, .sq-ht-suit.s-D { color: #c0182a; }
.four-color ~ .sq-shade .sq-ht-suit.s-D { color: #1f5fbf; }
.four-color ~ .sq-shade .sq-ht-suit.s-C { color: #1b7a3c; }
.sq-ht-suit .suit { width: 1.05em; height: 1.05em; fill: currentColor; }
.sq-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sq-stats { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; margin: 0; }
.sq-stats dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.sq-days { margin: 0; padding-left: 1.2rem; }
.sq-text { box-sizing: border-box; width: 100%; padding: 6px 8px; border: 1px solid #b9a782; border-radius: 6px; font: .9rem/1.35 ui-monospace, Menlo, Consolas, monospace; background: #fff; color: #1e1a2b; resize: vertical; }
.sq-copy p { margin: .4rem 0; }
@media (max-width: 30rem) {
  .sq-table th, .sq-table td { padding: 6px 4px; font-size: .92rem; }
  .sq-table thead th { white-space: normal; vertical-align: bottom; font-size: .9rem; }
  .sq-menu { grid-template-columns: 1fr; } .sq-panel-body { padding: 4px 12px 10px; } .sq-panel-foot { padding: 8px 12px 12px; } }

/* the Intermission's screens are in work.css */
.sq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px; }
@media (prefers-reduced-motion: reduce) { .card, .seat { transition: none; } }
@media print { .sq-stage { display: none; } }