/* FreeCell Breeze: a sea-glass table, big plain cards, light Nordic cards over it. */
:root{--sea:#2f7f8c;--sea-hi:#4a9ba6;--sea-lo:#1d5d69;--paper:#ffffff;--paper-2:#f3f7f9;--navy:#17324a;--navy-soft:#4d6578;
  --blue:#2f6fd6;--blue-hi:#4c8cf0;--blue-lo:#1f56b0;--glow:#ffe27a;--hair:rgba(23,50,74,.14);
  --ink:var(--navy);--ink-soft:var(--navy-soft);--ink-dim:#7d8f9d;--brass:var(--blue);--brass-hi:var(--blue-hi);--brass-lo:var(--blue-lo);--lacquer:#0f3b45;color-scheme:light}
body{background:var(--sea-lo);color:var(--paper)}
#home,#game{isolation:isolate;z-index:0;background:radial-gradient(ellipse at 50% 20%,var(--sea-hi),var(--sea) 55%,var(--sea-lo))}

/* the kit's cards, made light */
.veil{background:rgba(8,30,38,.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 #173f86,0 8px 16px rgba(20,50,110,.3);min-height:48px}
.pill:active{box-shadow:0 1px 0 #fff6 inset,0 1px 0 #173f86,0 3px 8px rgba(20,50,110,.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:#c9d4dc;border-color:var(--hair)}
.toggle::after{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.toggle[aria-pressed=true]{background:var(--blue)}
.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(--sea)}
.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}
.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(--navy);background:var(--paper-2)}
.deal-in:focus{outline:3px solid var(--blue-hi);border-color:transparent}

/* home */
.home{gap:.9em}
.home .title{font:900 clamp(2.5em,11vw,4.2em)/1 var(--sans);color:#fff;text-shadow:0 3px 0 #1a5560,0 8px 22px rgba(0,0,0,.25);letter-spacing:-.01em}
.home .title small{color:#d9f3f6;font-size:.32em;letter-spacing:.55em;margin-top:.45em;font-weight:800}
.tagline{color:#effafb;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:min(22em,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{min-width:14em}
.links{flex-wrap:wrap}
.links .link{color:#fff;font-weight:600}
@media (max-height:540px){
  .home{gap:.45em;padding:.6em 1em}
  .fan,.tagline{display:none}
  .home .title{font-size:2.3em}
  .home .title small{display:inline;margin-left:.6em}
  .modes{flex-direction:row;width:min(44em,100%)}
  .mode{flex:1;padding:.5em .8em}
  .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}
}

/* 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,.88);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{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:linear-gradient(180deg,#fff,#f7f9fa);box-shadow:0 0 0 1px rgba(10,40,50,.22),0 1px 3px rgba(0,0,0,.25)}
.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,.42);background:rgba(255,255,255,.07)}
.slot-f{border-style:solid;border-color:rgba(255,255,255,.32);background:rgba(0,40,50,.14)}
.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:.12em;color:rgba(255,255,255,.5)}
.slot-t{border-color:rgba(255,255,255,.22);background:rgba(0,40,50,.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,50,.22),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}
.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)}