/* Forty Thieves Solitaire: a pine-green table, big plain cards, light cards over it. */
:root{--pine:#2f5d46;--pine-hi:#4a7f63;--pine-lo:#1d3f2f;--paper:#ffffff;--paper-2:#f3f6f3;--navy:#1c2f28;--navy-soft:#4f6559;
  --blue:#c4553a;--blue-hi:#dc7253;--blue-lo:#a2412b;--glow:#ffe27a;--hair:rgba(28,47,40,.14);
  --ink:var(--navy);--ink-soft:var(--navy-soft);--ink-dim:#7d8f86;--brass:var(--blue);--brass-hi:var(--blue-hi);--brass-lo:var(--blue-lo);--lacquer:#12291f;color-scheme:light}
body{background:var(--pine-lo);color:var(--paper)}
#home,#game{isolation:isolate;z-index:0;background:radial-gradient(ellipse at 50% 20%,var(--pine-hi),var(--pine) 55%,var(--pine-lo))}

/* the kit's cards, made light */
.veil{background:rgba(8,26,18,.5)}
.card{background:var(--paper);color:var(--navy);border:0;box-shadow:0 24px 60px rgba(0,0,0,.35);border-radius:1.1em}
.card h2{font:800 1.6em/1.15 var(--sans);color:var(--navy);font-style:normal}
.card .x{border-color:var(--hair);color:var(--navy)}
.card .x svg{stroke:var(--navy)}
.pill{font-family:var(--sans);color:#fff;background:linear-gradient(180deg,var(--blue-hi),var(--blue) 55%,var(--blue-lo));box-shadow:0 1px 0 #fff6 inset,0 3px 0 #7a2e1d,0 8px 16px rgba(110,40,20,.3);min-height:48px}
.pill:active{box-shadow:0 1px 0 #fff6 inset,0 1px 0 #7a2e1d,0 3px 8px rgba(110,40,20,.3)}
.link{color:var(--blue);min-height:44px}
.row{background:var(--paper-2);border:1px solid var(--hair);color:var(--navy);min-height:48px}
.row small{color:var(--navy-soft)}
.choice{border-color:var(--hair);background:var(--paper-2);color:var(--navy);min-height:44px;padding:.5em 1.4em}
.toggle{background:#c9d4ce;border-color:var(--hair)}
.toggle::after{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.toggle[aria-pressed=true]{background:var(--pine)}
.toggle[aria-pressed=true]::after{background:#fff}
.stats{color:var(--navy-soft)}
.stats b{color:var(--navy);font-family:var(--sans)}
.note{color:var(--navy-soft)}
.won-name{margin:-.5em 0 .6em;text-align:center;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.78em;color:var(--pine)}
.toast{background:var(--navy);color:#fff;border:0;box-shadow:0 8px 20px rgba(0,0,0,.3);font-weight:600;max-width:calc(100% - 2em);text-align:center;z-index:30}
.jewel{border:2px solid rgba(255,255,255,.7);background:rgba(255,255,255,.14);box-shadow:0 3px 10px rgba(0,0,0,.2)}
.jewel svg{stroke:#fff}
.jewel:hover{background:rgba(255,255,255,.24)}
.jewel:focus-visible,.pill:focus-visible,.link:focus-visible,.mode:focus-visible,.row:focus-visible,.choice:focus-visible,.toggle:focus-visible{outline:3px solid var(--glow);outline-offset:2px}

/* home: title block and buttons; side by side on a short screen */
.home{gap:.9em}
.home-head,.home-act{display:flex;flex-direction:column;align-items:center;gap:.8em}
.home-act{width:min(22em,100%)}
.home .title{font:900 clamp(2.4em,10vw,4em)/1 var(--sans);color:#fff;text-shadow:0 3px 0 #173a2a,0 8px 22px rgba(0,0,0,.25);letter-spacing:-.01em}
.home .title small{color:#e3f2e9;font-size:.32em;letter-spacing:.5em;margin-top:.45em;font-weight:800}
.tagline{color:#f1faf4;text-shadow:none;font-size:1.1em}
.fan{position:relative;width:200px;height:104px;--cw:64px;--ch:90px;flex:none}
.fan .cd{transition:none;cursor:default}
.fan .f0{transform:translate(10px,14px) rotate(-14deg)}
.fan .f1{transform:translate(48px,2px) rotate(-5deg)}
.fan .f2{transform:translate(88px,2px) rotate(5deg)}
.fan .f3{transform:translate(126px,14px) rotate(14deg)}
.modes{display:flex;flex-direction:column;gap:.55em;width:100%}
.mode{display:flex;flex-direction:column;align-items:flex-start;gap:.1em;padding:.65em 1.1em;min-height:56px;border-radius:.9em;border:0;background:rgba(255,255,255,.95);color:var(--navy);text-align:left;box-shadow:0 4px 14px rgba(0,0,0,.15);transition:transform .12s}
.mode:active{transform:scale(.98)}
.mode b{font:800 1.25em/1.1 var(--sans);color:var(--navy)}
.mode small{color:var(--navy-soft);font-size:.88em}
.mode.last{box-shadow:0 0 0 3px var(--glow),0 4px 14px rgba(0,0,0,.15)}
.mode:hover{background:#fff}
#continue{width:100%}
.links{flex-wrap:wrap}
.links .link{color:#fff;font-weight:600}
@media (max-height:700px){.fan{display:none}}
@media (max-height:540px){
  .home{flex-direction:row;gap:1.6em;padding:.6em 1em}
  .home-head{flex:0 1 auto;max-width:44%}
  .home-act{gap:.4em;width:min(20em,52%)}
  .tagline{font-size:.95em}
  .home .title{font-size:2.4em}
  .modes{gap:.35em}
  .mode{min-height:46px;padding:.35em .9em;flex-direction:row;align-items:baseline;gap:.6em}
  .mode b{font-size:1.1em}
  .mode small{font-size:.78em}
  #continue{min-height:46px;padding:.45em 1em}
  .links .link{padding:.3em .5em;min-height:44px}
  .card{padding:.8em 1em}
  .card h2{font-size:1.3em;margin-bottom:.35em}
  .row{padding:.35em .8em;min-height:44px}
  .rows{gap:.3em}
  .card .actions{margin-top:.5em}
  .how li{margin:0}
}
@media (max-height:400px){.tagline{display:none}.mode small{display:none}.home-act .links{gap:0}}

/* the bar */
.bar{padding:max(.35em,env(safe-area-inset-top)) max(.6em,env(safe-area-inset-right)) .25em max(.6em,env(safe-area-inset-left))}
.bar .jewel{width:max(44px,2.6em);height:max(44px,2.6em)}
.status{flex:1;min-width:0;text-align:center;color:#fff;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status b{display:block;font-size:1em}
.status span{font-size:.88em;color:rgba(255,255,255,.9);font-variant-numeric:tabular-nums}
#hint-btn{margin-left:auto}
@media (max-height:420px){.bar{padding-top:max(.2em,env(safe-area-inset-top));padding-bottom:.1em}.bar .jewel{width:44px;height:44px}.status b{display:inline}.status span::before{content:" · "}}

/* the table */
.felt{overflow:hidden}
#board{position:absolute;inset:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.cd,.slot{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);border-radius:calc(var(--cw)*.1)}
.cd{transition:transform .17s cubic-bezier(.25,.8,.3,1);will-change:transform;cursor:pointer}
#board.fast .cd{transition-duration:.06s}
#board.instant .cd,#board.instant .slot,#board.instant .kcur,.cd.drag{transition:none}
.cd .face,.cd .back{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.cd .face{background:linear-gradient(180deg,#fff,#f6f8f6);box-shadow:0 0 0 1px rgba(10,40,25,.24),0 1px 3px rgba(0,0,0,.25)}
.cd .back{display:none;background:repeating-linear-gradient(45deg,transparent 0 calc(var(--cw)*.09),rgba(255,235,220,.32) calc(var(--cw)*.09) calc(var(--cw)*.13)),
  repeating-linear-gradient(-45deg,transparent 0 calc(var(--cw)*.09),rgba(255,235,220,.32) calc(var(--cw)*.09) calc(var(--cw)*.13)),#c4553a;
  box-shadow:inset 0 0 0 calc(var(--cw)*.06) #fff,0 0 0 1px rgba(10,40,25,.3),0 1px 3px rgba(0,0,0,.25)}
.cd.down .face{display:none}
.cd.down .back{display:block}
.cd.down{cursor:pointer}
.red{color:#cf2e24}
.blk{color:#14181c}
.face svg{fill:currentColor;position:absolute}
/* the corner: a big rank, readable when only a strip of the card shows */
.face .r{position:absolute;left:calc(var(--cw)*.05);top:calc(var(--cw)*.02);font:800 calc(var(--cw)*.46)/1 var(--sans);letter-spacing:-.05em}
.face .r.ten{letter-spacing:-.13em;font-size:calc(var(--cw)*.4);top:calc(var(--cw)*.05)}
.face .s{right:calc(var(--cw)*.04);top:calc(var(--cw)*.05);width:calc(var(--cw)*.36);height:calc(var(--cw)*.36)}
.face .pip{left:50%;top:64%;width:calc(var(--cw)*.6);height:calc(var(--cw)*.6);transform:translate(-50%,-50%)}
.face .pip.small{top:88%;width:calc(var(--cw)*.2);height:calc(var(--cw)*.2)}
/* narrow cards (ten columns on a phone held upright): rank over suit, both big */
#board.narrow .face .r{font-size:calc(var(--cw)*.62);left:calc(var(--cw)*.07);top:calc(var(--cw)*.03)}
#board.narrow .face .r.ten{font-size:calc(var(--cw)*.5);top:calc(var(--cw)*.08);letter-spacing:-.14em;left:calc(var(--cw)*.01)}
#board.narrow .face .s{left:calc(var(--cw)*.1);right:auto;top:calc(var(--cw)*.6);width:calc(var(--cw)*.4);height:calc(var(--cw)*.4)}
#board.narrow .face .court{display:none}
#board.narrow .face .pip,#board.narrow .face .pip.small{left:auto;right:calc(var(--cw)*.04);top:auto;bottom:calc(var(--cw)*.02);transform:none;width:calc(var(--cw)*.3);height:calc(var(--cw)*.3)}
.face .court{position:absolute;left:14%;right:14%;top:44%;bottom:20%;display:grid;place-items:center;font:800 calc(var(--cw)*.46)/1 var(--sans);
  border:calc(var(--cw)*.025) solid currentColor;border-radius:calc(var(--cw)*.07);opacity:.88}
.slot{border:2px dashed rgba(255,255,255,.42);background:rgba(255,255,255,.07)}
.slot-f{border-style:solid;border-color:rgba(255,255,255,.32);background:rgba(0,30,20,.14)}
.slot-s{border-style:solid;border-color:rgba(255,255,255,.3);background:rgba(0,30,20,.2);cursor:pointer}
.slot-w{border-color:rgba(255,255,255,.25);background:rgba(0,30,20,.08)}
.slot .ghost{left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);fill:rgba(255,255,255,.28);position:absolute}
.slot .lbl{position:absolute;inset:0;display:grid;place-items:center;font:800 calc(var(--cw)*.17)/1 var(--sans);letter-spacing:.08em;color:rgba(255,255,255,.55);text-align:center}
.slot-t{border-color:rgba(255,255,255,.22);background:rgba(0,30,20,.08)}
.count{position:absolute;left:0;top:0;min-width:calc(var(--cw)*.5);padding:0 .3em;height:max(20px,calc(var(--cw)*.3));border-radius:999px;background:#fff;color:var(--navy);
  font:800 max(13px,calc(var(--cw)*.2))/max(20px,calc(var(--cw)*.3)) var(--sans);text-align:center;z-index:3000;pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .17s}
.count.zero{background:rgba(255,255,255,.25);color:#fff}
.cd.hint .face,.cd.hint .back,.slot.hint{box-shadow:0 0 0 3px var(--glow),0 0 calc(var(--cw)*.35) var(--glow);animation:glow .7s ease-in-out 3 alternate}
@keyframes glow{to{box-shadow:0 0 0 3px #fff6c8,0 0 calc(var(--cw)*.12) var(--glow)}}
.cd.drag .face{box-shadow:0 0 0 1px rgba(0,0,0,.2),0 14px 28px rgba(0,0,0,.4)}
.cd.drag{filter:brightness(1.03)}
.cd.held .face{box-shadow:0 0 0 3px #8fe0ff,0 0 14px #8fe0ff}
.cd.nudge .face{animation:nudge .28s}
@keyframes nudge{20%{transform:translateX(-5px)}50%{transform:translateX(4px)}80%{transform:translateX(-2px)}}
.cd.land .face{animation:land .22s ease-out}
@keyframes land{0%{transform:scale(1.07)}100%{transform:none}}
.cd.flip .face{animation:flip .2s ease-out}
@keyframes flip{0%{transform:scaleX(.1)}100%{transform:none}}
.cd.glow .face{animation:home .45s ease-out}
@keyframes home{0%{box-shadow:0 0 0 3px #fff,0 0 calc(var(--cw)*.6) #fff}100%{box-shadow:0 0 0 1px rgba(10,40,25,.24),0 1px 3px rgba(0,0,0,.25)}}
#board.fast .cd .face{animation-duration:.05s!important}
#board.cheer .slot-f{animation:cheer .5s ease-in-out 2 alternate}
@keyframes cheer{to{box-shadow:0 0 0 4px var(--glow),0 0 30px var(--glow)}}
.kcur{position:absolute;left:0;top:0;width:calc(var(--cw) + 10px);height:calc(var(--ch) + 10px);border:3px solid var(--glow);border-radius:calc(var(--cw)*.14);pointer-events:none;z-index:6000;transition:transform .12s}
#board.fast .kcur{transition:none}
.kcur.holding{border-color:#8fe0ff;box-shadow:0 0 12px #8fe0ff}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:15}

/* cards over the table */
.how{margin:0 0 .4em;padding-left:1.2em;color:var(--navy)}
.how li{margin:.15em 0}
.keys{font-size:.8em}
.stat-table{width:100%;border-collapse:collapse;font-size:.92em;color:var(--navy)}
.stat-table th,.stat-table td{padding:.3em .35em;text-align:center}
.stat-table thead th{color:var(--blue)}
.stat-table tbody th{text-align:left;color:var(--navy-soft);font-weight:600}
.stat-table tbody tr+tr{border-top:1px solid var(--hair)}