/* ==========================================================================
   EMBER SOLITAIRE — Solitaire board
   ========================================================================== */
#scr-game { --shade: radial-gradient(120% 70% at 50% 45%, rgba(5,6,8,.55), rgba(5,6,8,.92)); }
#scr-game > .bg { filter: blur(2px); --dim: rgb(120,80,60); }
.game { padding-bottom: var(--safe-bottom); }

/* top bar ------------------------------------------------------------------ */
.game-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 12px 4px; max-width: 1180px; width: 100%; margin: 0 auto; }
.game-title { text-align: center; line-height: 1.1; }
.game-title .display { font-size: 17px; letter-spacing: .16em; }
.game-title .caps { font-size: 10px; margin-top: 3px; display: block; }
.gstats { display: flex; gap: 6px; }
.gstat { min-width: 58px; padding: 5px 8px 4px; text-align: center; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(20,23,27,.9), rgba(8,9,11,.9)); clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px); }
.gstat .caps { display: block; font-size: 9px; letter-spacing: .14em; }
.gstat b { display: block; font-size: 16px; font-weight: 700; color: var(--white-heat); font-variant-numeric: tabular-nums; line-height: 1.2; }
.sets-row { display: flex; justify-content: center; gap: 5px; padding: 2px 0 6px; }
.pip { width: 18px; height: 18px; display: grid; place-items: center; color: #3a3129; transition: color .3s, filter .3s; }
.pip .ico { width: 16px; height: 16px; stroke-width: 1.4; }
.pip.on { color: var(--molten-gold); filter: drop-shadow(0 0 5px rgba(227,107,40,.9)); }
.pip.on .ico { fill: rgba(227,107,40,.35); }
.pip.lit { animation: pipLit .9s var(--ease-out); }
@keyframes pipLit { 0% { transform: scale(1.8); color: #fff6de; filter: drop-shadow(0 0 12px #ffb35a); } 100% { transform: scale(1); } }

/* forged table -------------------------------------------------------------- */
.table {
  position: relative; flex: 1; min-height: 0; margin: 0 6px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  border-radius: 14px;
  background: var(--table, #15191d) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(246,162,58,.35), inset 0 0 0 3px rgba(0,0,0,.65), inset 0 0 0 4px rgba(168,116,63,.35), inset 0 0 60px rgba(0,0,0,.75), 0 0 30px rgba(227,107,40,.14), 0 12px 40px rgba(0,0,0,.6);
  max-width: 1180px; width: calc(100% - 12px); align-self: center;
}
.table::-webkit-scrollbar { display: none; }
.table::before { content: ""; position: sticky; display: block; top: 0; height: 0; }
.table-frame { position: absolute; inset: 0; pointer-events: none; border-radius: 14px; }
.board { position: relative; width: 100%; min-height: 100%; touch-action: none; --cw: 36px; --chh: 50px; }
.board:focus-visible { outline: none; }

/* cards ------------------------------------------------------------------------ */
.board { --card-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 5px rgba(0,0,0,.35); --card-shadow-lift: 0 14px 22px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.4); }
.card {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--chh);
  border-radius: calc(var(--cw) * .07);
  box-shadow: var(--card-shadow);
  will-change: transform; backface-visibility: hidden;
  contain: layout style;
  cursor: pointer;
}
.card .face, .card .back { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.card .face { background: var(--card-ivory) center / 100% 100% no-repeat; }
.card .back { display: none; background: #111 var(--back) center / 100% 100% no-repeat; box-shadow: inset 0 0 0 1px rgba(246,162,58,.25); }
.card.down .face { display: none; }
.card.down .back { display: block; }
.card.down { cursor: default; }

/* programmatic index: only on small cards where the printed corner can't be read */
.card .idx { display: none; }
.small-cards .card .idx {
  position: absolute; left: 0; top: 0; display: flex; align-items: baseline; gap: 1px;
  padding: calc(var(--cw) * .05) calc(var(--cw) * .06) calc(var(--cw) * .03) calc(var(--cw) * .06);
  min-width: 64%; height: calc(var(--cw) * .44);
  background: linear-gradient(90deg, var(--card-ivory) 0 70%, rgba(244,236,220,0));
  border-top-left-radius: inherit;
  color: var(--card-ink); pointer-events: none;
}
.small-cards .card .idx b { font-family: var(--font-display); font-weight: 700; font-size: clamp(11px, calc(var(--cw) * .36), 19px); line-height: 1; letter-spacing: -.02em; }
.small-cards .card .idx i { font-style: normal; font-size: clamp(10px, calc(var(--cw) * .3), 16px); line-height: 1; }
.small-cards .card .idx.red { color: var(--card-red); }
:root[data-large="1"] .small-cards .card .idx { height: calc(var(--cw) * .52); }
:root[data-large="1"] .small-cards .card .idx b { font-size: clamp(13px, calc(var(--cw) * .44), 22px); }
:root[data-large="1"] .small-cards .card .idx i { font-size: clamp(11px, calc(var(--cw) * .36), 18px); }
:root[data-contrast="1"] .card { box-shadow: 0 0 0 1px #000, var(--card-shadow); }
:root[data-contrast="1"] .small-cards .card .idx { background: #fffaf0; }

/* selection + hints */
.card.sel { box-shadow: 0 0 0 2px var(--molten-gold), 0 0 16px rgba(227,107,40,.7), var(--card-shadow-lift); translate: 0 -4px; transition: translate var(--dur-fast) var(--ease-out); }
.card.dragging { box-shadow: 0 0 0 1px rgba(246,162,58,.6), var(--card-shadow-lift); cursor: grabbing; }
.card.hint-src { animation: hintPulse 1.1s ease-in-out infinite; }
@keyframes hintPulse { 50% { box-shadow: 0 0 0 2px #ffcf85, 0 0 18px rgba(255,150,60,.9), var(--card-shadow); } }
.card.forged { box-shadow: 0 0 14px rgba(255,160,70,.9), 0 0 0 1px #ffcf85; }

/* empty columns + destination highlights */
.slot { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--chh); border-radius: calc(var(--cw) * .07); pointer-events: none; opacity: .5;
  box-shadow: inset 0 0 0 1px rgba(246,162,58,.16); background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.25), rgba(0,0,0,.05)); }
.slot.is-empty { opacity: 1; box-shadow: inset 0 0 0 1px rgba(246,162,58,.35), inset 0 0 18px rgba(0,0,0,.5); }
.slot.is-empty::after { content: ""; position: absolute; inset: 30% 25%; background: rgba(246,162,58,.18);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c.6 2.4 7 5.6 6.8 9.6-.1 2.6-3 3.6-5.2 1.9.1 1.9.9 3.2 2.2 4.5H8.2c1.3-1.3 2.1-2.6 2.2-4.5-2.2 1.7-5.1.7-5.2-1.9C5 8.6 11.4 5.4 12 3Z'/%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'%3E%3Cpath d='M12 3c.6 2.4 7 5.6 6.8 9.6-.1 2.6-3 3.6-5.2 1.9.1 1.9.9 3.2 2.2 4.5H8.2c1.3-1.3 2.1-2.6 2.2-4.5-2.2 1.7-5.1.7-5.2-1.9C5 8.6 11.4 5.4 12 3Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.col-hl { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--chh); border-radius: calc(var(--cw) * .08); pointer-events: none; z-index: 900; opacity: 0; transition: opacity var(--dur-fast); }
.col-hl.target { opacity: .75; box-shadow: 0 0 0 1.5px rgba(227,107,40,.75), 0 0 12px rgba(227,107,40,.35); }
.col-hl.over { opacity: 1; box-shadow: 0 0 0 2px #ffcf85, 0 0 20px rgba(255,140,50,.85), inset 0 0 18px rgba(255,140,50,.35); }
.col-hl.hint-dst { opacity: 1; animation: hintPulse2 1.1s ease-in-out infinite; }
.col-hl.kb { opacity: 1; box-shadow: 0 0 0 2px var(--white-heat), 0 0 0 4px rgba(0,0,0,.6); }
.col-hl.flash { animation: destFlash .5s var(--ease-out); }
@keyframes hintPulse2 { 0%, 100% { box-shadow: 0 0 0 2px rgba(255,190,110,.9), 0 0 10px rgba(255,140,50,.6); } 50% { box-shadow: 0 0 0 2px #fff0c8, 0 0 24px rgba(255,140,50,1); } }
@keyframes destFlash { 0% { opacity: 1; box-shadow: 0 0 0 2px #ffcf85, 0 0 24px rgba(255,140,50,.9); } 100% { opacity: 0; box-shadow: 0 0 0 1px rgba(255,140,50,0), 0 0 30px rgba(255,140,50,0); } }

/* bottom tools --------------------------------------------------------------- */
.game-bottom { display: grid; grid-template-columns: 1fr 1fr 1.2fr; align-items: center; gap: 8px; padding: 8px 14px calc(8px + var(--safe-bottom)); max-width: 640px; width: 100%; margin: 0 auto; }
.tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; color: var(--bronze-300); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-radius: 12px; transition: color var(--dur-fast), transform var(--dur-fast); }
.tool .ico { width: 26px; height: 26px; }
.tool:hover { color: var(--white-heat); }
.tool:active { transform: scale(.94); }
.tool:disabled { color: #4b433b; }
.stock { justify-self: end; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 4px; color: var(--bronze-300); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-radius: 10px; }
.stock-pile { position: relative; width: 38px; height: 53px; }
.stock-pile i { position: absolute; inset: 0; border-radius: 3px; background: #111 var(--back) center / 100% 100% no-repeat; box-shadow: 0 1px 2px rgba(0,0,0,.7), inset 0 0 0 1px rgba(246,162,58,.25); }
.stock-pile i:nth-child(2) { transform: translate(-2px, -2px); } .stock-pile i:nth-child(3) { transform: translate(-4px, -4px); }
.stock-pile i:nth-child(4) { transform: translate(-6px, -6px); } .stock-pile i:nth-child(5) { transform: translate(-8px, -8px); }
.stock-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.stock-count { font-size: 18px; color: var(--white-heat); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.stock.is-empty .stock-pile { opacity: .25; }
.stock.hint-dst .stock-pile { filter: drop-shadow(0 0 10px rgba(255,150,60,.9)); animation: stockPulse 1s ease-in-out infinite; }
@keyframes stockPulse { 50% { transform: translateY(-3px); } }
.stock.shake { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* larger screens ------------------------------------------------------------ */
@media (min-width: 700px) {
  .game-top { padding: 14px 20px 4px; }
  .game-title .display { font-size: 20px; }
  .gstat { min-width: 76px; }
  .gstat b { font-size: 19px; }
  .table { margin: 0 16px; width: calc(100% - 32px); }
  .stock-pile { width: 46px; height: 64px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  #scr-game > .fg.game { display: grid; grid-template-columns: 1fr 96px; grid-template-rows: auto auto minmax(0, 1fr); }
  .game-top { grid-column: 1 / 3; padding: 4px 10px 0; }
  .sets-row { grid-column: 1 / 3; padding: 0 0 4px; }
  .table { grid-column: 1; grid-row: 3; align-self: stretch; margin-bottom: 6px; }
  .game-bottom { grid-column: 2; grid-row: 3; grid-template-columns: 1fr; padding: 0 6px; align-content: center; gap: 2px; }
  .tool { min-height: 50px; }
  .game { min-height: 0; }
  .stock { justify-self: center; flex-direction: column; gap: 4px; }
}

/* auto-complete --------------------------------------------------------------- */
.finish-btn {
  position: absolute; left: 50%; bottom: calc(86px + var(--safe-bottom)); z-index: 25; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: #fff1d6;
  border-radius: 999px; background: radial-gradient(120% 160% at 50% 120%, rgba(227,107,40,.55), rgba(20,14,10,.96) 60%);
  box-shadow: 0 0 0 1px var(--molten-gold), 0 0 22px rgba(227,107,40,.55), 0 10px 24px rgba(0,0,0,.6);
  animation: finishIn .4s var(--ease-out);
}
.finish-btn .ico { width: 20px; height: 20px; }
.finish-btn[hidden] { display: none; }
@keyframes finishIn { from { opacity: 0; transform: translate(-50%, 10px); } }
@media (orientation: landscape) and (max-height: 520px) { .finish-btn { bottom: calc(16px + var(--safe-bottom)); left: calc(50% - 48px); } }

/* screen-reader column targets: invisible, never intercept touch, but present for TalkBack explore-by-touch */
.a11y-cols { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.a11y-col { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; background: none; border: 0; }
.a11y-col:focus-visible { opacity: 1; outline: 2px solid var(--white-heat); outline-offset: 2px; border-radius: 6px; }