/* Yukon Solitaire: a pine-green table, big plain cards, light cards over it. */
:root{--pine:#2f6e5c;--pine-hi:#3f8a73;--pine-lo:#1a4439;--paper:#ffffff;--paper-2:#f2f6f4;--ink-d:#173a31;--ink-s:#4b665d;
  --go:#1f7a5c;--go-hi:#2c9a75;--go-lo:#155a43;--glow:#ffe27a;--hair:rgba(23,58,49,.15);
  --ink:var(--ink-d);--ink-soft:var(--ink-s);--ink-dim:#7a8f88;--brass:var(--go);--brass-hi:var(--go-hi);--brass-lo:var(--go-lo);--lacquer:#12332b;color-scheme:light}
body{background:var(--pine-lo);color:var(--paper)}
#home,#game{isolation:isolate;z-index:0;background:radial-gradient(ellipse at 50% 0%,#4f9a82,var(--pine) 50%,var(--pine-lo))}

/* the kit's cards, made light */
.veil{background:rgba(6,26,21,.5)}
.card{background:var(--paper);color:var(--ink-d);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(--ink-d);font-style:normal}
.card .x{border-color:var(--hair);color:var(--ink-d)}
.card .x svg{stroke:var(--ink-d)}
.pill{font-family:var(--sans);color:#fff;background:linear-gradient(180deg,var(--go-hi),var(--go) 55%,var(--go-lo));box-shadow:0 1px 0 #fff6 inset,0 3px 0 #0e4532,0 8px 16px rgba(10,60,40,.3);min-height:48px}
.pill:active{box-shadow:0 1px 0 #fff6 inset,0 1px 0 #0e4532,0 3px 8px rgba(10,60,40,.3)}
.link{color:var(--go);min-height:44px}
.row{background:var(--paper-2);border:1px solid var(--hair);color:var(--ink-d);min-height:48px}
.row small{color:var(--ink-s)}
.choice{border-color:var(--hair);background:var(--paper-2);color:var(--ink-d);min-height:44px;padding:.5em 1.4em}
.toggle{background:#c6d3ce;border-color:var(--hair)}
.toggle::after{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.toggle[aria-pressed=true]{background:var(--go)}
.toggle[aria-pressed=true]::after{background:#fff}
.stats{color:var(--ink-s)}
.stats b{color:var(--ink-d);font-family:var(--sans)}
.note{color:var(--ink-s)}
.won-name{margin:-.5em 0 .6em;text-align:center;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.78em;color:var(--go)}
.toast{background:var(--ink-d);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}
.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}
.deal-in{display:block;width:100%;margin:.6em 0 0;font:700 1.5em/1.2 var(--sans);text-align:center;padding:.4em;border-radius:.6em;border:2px solid var(--hair);color:var(--ink-d);background:var(--paper-2)}
.deal-in:focus{outline:3px solid var(--go-hi);border-color:transparent}

/* home */
.home{gap:.9em}
.lead,.menu{display:flex;flex-direction:column;align-items:center;gap:.8em}
.menu{width:min(22em,100%)}
.home .title{font:900 clamp(2.5em,11vw,4.2em)/1 var(--sans);color:#fff;text-shadow:0 3px 0 #164035,0 8px 22px rgba(0,0,0,.25);letter-spacing:-.01em}
.home .title small{color:#d8f0e6;font-size:.34em;letter-spacing:.5em;margin-top:.45em;font-weight:800;text-transform:uppercase}
.tagline{color:#eef8f4;text-shadow:none;font-size:1.1em}
.fan{position:relative;width:200px;height:110px;--cw:64px;--ch:90px;flex:none}
.fan .cd{transition:none;cursor:default}
.fan .f0{transform:translate(10px,16px) rotate(-14deg)}
.fan .f1{transform:translate(48px,3px) rotate(-5deg)}
.fan .f2{transform:translate(88px,3px) rotate(5deg)}
.fan .f3{transform:translate(126px,16px) 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(--ink-d);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(--ink-d)}
.mode small{color:var(--ink-s);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{min-width:14em}
.links{flex-wrap:wrap}
.links .link{color:#fff;font-weight:600}
/* a phone on its side: the title beside the buttons, never stacked */
@media (max-height:480px){
  .home{flex-direction:row;gap:1.4em;padding:.5em max(1em,env(safe-area-inset-right)) .5em max(1em,env(safe-area-inset-left))}
  .lead{flex:0 1 auto;min-width:0;gap:.4em}
  .menu{flex:0 1 22em;min-width:0;gap:.35em}
  .fan{display:none}
  .home .title{font-size:2.6em}
  .home .title small{display:block}
  .tagline{font-size:1em;max-width:11em}
  .modes{gap:.35em}
  .mode{flex-direction:row;align-items:baseline;gap:.6em;min-height:46px;padding:.45em .9em}
  .mode small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  #continue{min-width:0;width:100%;min-height:46px;padding:.4em 1em}
  .links .link{min-height:44px;padding:.3em .5em}
  .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:480px) and (max-width:760px){html:not(.hw-embed) body:has(#home:not([hidden])) #home{padding-top:.5em!important}}
@media (max-height:480px) and (max-width:560px){.tagline{display:none}.home .title{font-size:2.2em}}

/* 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);flex:none}
.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:1.05em}
.status span{font-size:.92em;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 .16s cubic-bezier(.25,.8,.3,1);will-change:transform;cursor:pointer}
#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,#f6f8f7);box-shadow:0 0 0 1px rgba(10,40,30,.24),0 1px 3px rgba(0,0,0,.25)}
.cd .back{display:none;background:repeating-linear-gradient(45deg,rgba(255,255,255,.13) 0 2px,transparent 2px 8px),repeating-linear-gradient(-45deg,rgba(255,255,255,.13) 0 2px,transparent 2px 8px),linear-gradient(160deg,#3d8c72,#22604e);
  box-shadow:inset 0 0 0 calc(var(--cw)*.05) #f4faf7,0 0 0 1px rgba(0,0,0,.25),0 1px 3px rgba(0,0,0,.25)}
.cd.down{cursor:default}
.cd.down .back{display:block}
.cd.down .face{display:none}
.cd.flip .face{animation:flip .28s ease-out}
@keyframes flip{0%{transform:scaleX(.05);filter:brightness(.8)}100%{transform:none}}
.red{color:#cf2e24}
.blk{color:#14181c}
.face svg{fill:currentColor;position:absolute}
.face .r{position:absolute;left:calc(var(--cw)*.06);top:calc(var(--cw)*.03);font:800 calc(var(--cw)*.42)/1 var(--sans);letter-spacing:-.05em}
.face .r.ten{letter-spacing:-.12em;font-size:calc(var(--cw)*.37)}
.face .s{right:calc(var(--cw)*.05);top:calc(var(--cw)*.06);width:calc(var(--cw)*.32);height:calc(var(--cw)*.32)}
.face .pip{left:50%;top:63%;width:calc(var(--cw)*.62);height:calc(var(--cw)*.62);transform:translate(-50%,-50%)}
.face .pip.small{top:85%;width:calc(var(--cw)*.24);height:calc(var(--cw)*.24)}
.face .court{position:absolute;left:14%;right:14%;top:32%;bottom:24%;display:grid;place-items:center;font:800 calc(var(--cw)*.5)/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,.4);background:rgba(255,255,255,.06)}
.slot-f{border-style:solid;border-color:rgba(255,255,255,.32);background:rgba(0,30,20,.16)}
.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)*.3)/1 var(--sans);color:rgba(255,255,255,.4)}
.slot-t{border-color:rgba(255,255,255,.22);background:rgba(0,30,20,.08)}
.cd.hint .face,.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.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,30,.24),0 1px 3px rgba(0,0,0,.25)}}
#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,height .12s}
.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(--ink-d)}
.how li{margin:.15em 0}
.keys{font-size:.8em}
.stat-table{width:100%;border-collapse:collapse;font-size:.92em;color:var(--ink-d)}
.stat-table th,.stat-table td{padding:.3em .35em;text-align:center}
.stat-table thead th{color:var(--go)}
.stat-table tbody th{text-align:left;color:var(--ink-s);font-weight:600}
.stat-table tbody tr+tr{border-top:1px solid var(--hair)}