/* Spider Solitaire: deep blue baize, big plain cards drawn in code. The kit's cards and pills, re-tinted. */
:root{--felt:#1c4d66;--felt-hi:#2a6886;--felt-lo:#0e2c3d;--lacquer:#0f2a3a;--lacquer-hi:#173c52;--hair:rgba(255,255,255,.22);--gold:#ffd54a;--spd:1}
body{background:var(--felt-lo)}
#home,#game{isolation:isolate;z-index:0;background:radial-gradient(ellipse at 50% 18%,var(--felt-hi),var(--felt) 55%,var(--felt-lo))}
.card{background:linear-gradient(180deg,#1f4c66,var(--lacquer-hi) 40%,var(--lacquer))}
.card h2{color:#ffe7a3}
.jewel{background:radial-gradient(circle at 35% 30%,#3a7fa3,#123a52 72%);box-shadow:0 0 0 2px #0d3047,0 4px 10px rgba(0,0,0,.35)}
.how{margin:0 0 .6em;padding-left:1.2em;display:flex;flex-direction:column;gap:.35em}
.stats.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em .6em;text-align:center;margin-top:.8em}
.choices{justify-content:center}
.choice{min-height:44px;min-width:5.5em}
.mode:focus-visible,.row:focus-visible,.choice:focus-visible,.toggle:focus-visible,#stock-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* home */
.home{gap:1em}
.brand,.pick{display:flex;flex-direction:column;align-items:center;gap:.7em}
.pick{width:min(23em,100%)}
.home .title{font-size:clamp(2.6em,11vw,4.2em);color:#fff8e6;text-shadow:0 2px 0 #0b2b3d,0 6px 18px rgba(0,0,0,.4)}
.home .title small{color:var(--brass-hi)}
.tagline{color:#eef5f9}
.fan{position:relative;width:176px;height:104px;--cw:64px;--ch:90px;--cf:27px;flex:none}
.fan .cd{transition:none;cursor:default;pointer-events:none}
.fan .f0{transform:translate(18px,12px) rotate(-14deg)}
.fan .f1{transform:translate(56px,0)}
.fan .f2{transform:translate(94px,12px) rotate(14deg)}
.modes{display:flex;flex-direction:column;gap:.5em;width:100%}
.mode{display:flex;flex-direction:column;align-items:flex-start;gap:.1em;padding:.55em 1.1em;min-height:48px;border-radius:.9em;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.22);color:#fff;text-align:left}
.mode b{font:800 1.2em/1.1 var(--serif);color:var(--brass-hi)}
.mode b em{font:600 .68em/1 var(--sans);font-style:normal;color:rgba(255,255,255,.78);margin-left:.6em;letter-spacing:.04em}
.mode small{color:rgba(255,255,255,.84);font-size:.85em}
.mode.last,.mode.cont{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.mode:hover{background:rgba(0,0,0,.32)}
.links{flex-wrap:wrap}
.links .link{min-height:44px;color:#fff3c4}
@media (max-height:560px) and (min-aspect-ratio:1/1){
  .home{flex-direction:row;gap:2.2em;padding:.6em 1.2em}
  .brand{gap:.3em}
  .tagline{display:none}
  .fan{transform:scale(.8);margin:-10px 0}
  .home .title{font-size:2.5em}
  .pick{gap:.2em;width:min(22em,55%)}
  .modes{gap:.35em}
  .mode{padding:.3em 1em;min-height:44px}
  .mode small{font-size:.78em}
}
@media (max-height:420px) and (min-aspect-ratio:1/1){ .fan{display:none} }
@media (max-height:560px){
  .card{padding:.8em 1em}
  .card h2{font-size:1.3em;margin-bottom:.4em}
  .card .rows{display:grid;grid-template-columns:1fr 1fr;gap:.4em}
  .row{padding:.45em .8em;min-height:44px}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.5em}
  .stats.grid{margin-top:.4em;gap:.4em}
  .how{gap:.15em;font-size:.92em}
}

/* the table */
#game{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overflow:hidden}
#hud{position:absolute;z-index:1;color:#fff}
#hud .jewel{width:44px;height:44px;font-size:16px;flex:none}
#game.top #hud{left:env(safe-area-inset-left);right:env(safe-area-inset-right);top:env(safe-area-inset-top);display:grid;grid-template-columns:auto 1fr auto;
  grid-template-areas:"menu status tools" "done . stock";align-items:center;gap:6px 8px;padding:8px 10px 0}
#game.rail #hud{top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);right:env(safe-area-inset-right);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:8px;gap:6px}
#menu-btn{grid-area:menu}
#status{grid-area:status;text-align:center;line-height:1.25;min-width:0}
#status b{display:block;font-size:.92em}
#status span{display:block;font-size:.8em;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
#game.rail #status{font-size:14px}
#game.rail #status span{white-space:normal}
#tools{grid-area:tools;display:flex;gap:8px}
#done-slot{grid-area:done;border:2px dashed rgba(255,255,255,.2);border-radius:8px}
#stock-btn{grid-area:stock;justify-self:end;border:2px solid rgba(255,255,255,.28);border-radius:8px;background:rgba(0,0,0,.14);padding:0;min-width:44px;min-height:44px}
#stock-btn.empty{opacity:.45}
#stock-btn.hint{box-shadow:0 0 0 3px var(--gold),0 0 18px var(--gold)}
@media (min-width:900px) and (min-height:640px){#hud .jewel{width:52px;height:52px}#status{font-size:20px}#game.rail #status{font-size:17px}}

#cards{position:absolute;inset:0;pointer-events:none;z-index:2}
.cd,.slot{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);border-radius:calc(var(--cw)*.08)}
.cd{transform-origin:0 0;pointer-events:auto;cursor:pointer;touch-action:none;will-change:transform;
  transition:transform calc(.2s*var(--spd)) cubic-bezier(.2,.8,.25,1)}
.cd.mini{pointer-events:none}
.cd.lift{transition-duration:calc(.46s*var(--spd));transition-timing-function:cubic-bezier(.55,0,.3,1)}
.cd.lift .face{box-shadow:0 0 0 2px var(--gold),0 0 20px var(--gold)}
#cards.instant .cd,#cards.instant .slot,#cards.instant .kcur,.cd.drag{transition:none!important}
.cd .face,.cd .back{position:absolute;inset:0;border-radius:inherit}
.cd .face{display:none;overflow:hidden;background:linear-gradient(180deg,#fffef9,#f8f4ea);box-shadow:0 0 0 1px rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.3)}
.cd.up .face{display:block}
.cd.up .back{display:none}
.cd .back{background:radial-gradient(circle,rgba(255,255,255,.2) 0 22%,transparent 25%) 0 0/calc(var(--cw)*.2) calc(var(--cw)*.2),linear-gradient(150deg,#a83b49,#6b1e2c);
  box-shadow:inset 0 0 0 calc(var(--cw)*.055) #f7f1e4,inset 0 0 0 calc(var(--cw)*.075) rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.3)}
.red{color:#c71f1c}
.blk{color:#15181d}
.face svg{fill:currentColor;position:absolute}
.face .r{position:absolute;left:calc(var(--cw)*.06);top:calc(var(--cf)*.06);font:800 var(--cf)/1 var(--sans);letter-spacing:-.03em}
.face .r.ten{letter-spacing:-.13em;left:calc(var(--cw)*.025)}
.face .pip{right:calc(var(--cw)*.05);top:calc(var(--cf)*.14);width:calc(var(--cf)*.7);height:calc(var(--cf)*.7)}
.face .big{left:50%;top:60%;width:calc(var(--cw)*.6);height:calc(var(--cw)*.6);transform:translate(-50%,-50%)}
.face .court{position:absolute;left:13%;right:13%;top:max(40%,calc(var(--cf)*1.3));bottom:8%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:calc(var(--cw)*.03) solid currentColor;border-radius:calc(var(--cw)*.07);background:rgba(255,215,90,.14)}
.face .court i{font:800 calc(var(--cw)*.4)/1 var(--serif);font-style:normal}
.face .court .cpip{position:static;width:calc(var(--cw)*.24);height:calc(var(--cw)*.24)}
.slot{border:2px solid rgba(255,255,255,.22);background:rgba(0,0,0,.12);pointer-events:none;transition:transform calc(.2s*var(--spd))}
.slot.hint{box-shadow:0 0 0 3px var(--gold),0 0 16px var(--gold)}
.cd.hint .face,.cd.hint .back{box-shadow:0 0 0 3px var(--gold),0 0 calc(var(--cw)*.3) var(--gold);animation:glow .6s ease-in-out 3 alternate}
@keyframes glow{to{box-shadow:0 0 0 3px #fff3b0,0 0 calc(var(--cw)*.1) var(--gold)}}
.cd.held .face{box-shadow:0 0 0 3px #7fd3ff,0 0 14px #7fd3ff}
.cd.drag .face{box-shadow:0 0 0 1px rgba(0,0,0,.2),0 12px 26px rgba(0,0,0,.45)}
.cd.flip .face{animation:flip calc(.18s*var(--spd)) ease-out}
@keyframes flip{from{transform:scaleX(.08)}to{transform:none}}
.cd.nudge .face,.cd.nudge .back{animation:nudge .28s}
@keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.kcur{position:absolute;left:0;top:0;width:calc(var(--cw) + 8px);border:3px solid var(--gold);border-radius:calc(var(--cw)*.12);pointer-events:none;z-index:3000;transition:transform .12s,height .12s}
.kcur.holding{border-color:#7fd3ff;box-shadow:0 0 12px #7fd3ff}
.badge{position:absolute;left:0;top:0;z-index:3001;min-width:24px;height:24px;border-radius:12px;background:var(--gold);color:#2a1b00;font:800 14px/24px var(--sans);text-align:center;padding:0 6px;pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,.35)}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:15}
.veil{z-index:20}