/* Klondike: green felt, big plain cards. The kit's cards and pills, re-tinted for the felt. */
:root{--felt:#17603d;--felt-hi:#1f7a4d;--felt-lo:#0d4529;--lacquer:#0e3221;--lacquer-hi:#164330;--hair:rgba(255,255,255,.22);--gold:#ffd54a}
body{background:var(--felt-lo)}
#home,#game{isolation:isolate;z-index:0;background:radial-gradient(ellipse at 50% 25%,var(--felt-hi),var(--felt) 55%,var(--felt-lo))}
.card{background:linear-gradient(180deg,#1d5139,var(--lacquer-hi) 40%,var(--lacquer))}
.jewel{background:radial-gradient(circle at 35% 30%,#2f8159,#0f3f28 72%);box-shadow:0 0 0 2px #0e3a25,0 4px 10px rgba(0,0,0,.35)}

/* home */
.home{gap:.9em}
.home .title{font-size:clamp(2.4em,10vw,4em);color:#fff8e6;text-shadow:0 2px 0 #0b3a24,0 6px 18px rgba(0,0,0,.4)}
.home .title small{color:var(--brass-hi)}
.tagline{color:#f3f7f2}
.fan{position:relative;width:170px;height:104px;--cw:66px;--ch:92px;flex:none}
.fan .cd{transition:none;cursor:default}
.fan .f0{transform:translate(18px,10px) rotate(-12deg)}
.fan .f1{transform:translate(52px,0)}
.fan .f2{transform:translate(86px,10px) rotate(12deg)}
.modes{display:flex;flex-direction:column;gap:.5em;width:min(22em,100%)}
.mode{display:flex;flex-direction:column;align-items:flex-start;gap:.1em;padding:.6em 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 small{color:rgba(255,255,255,.82);font-size:.85em}
.mode.last{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass) inset}
.mode:hover{background:rgba(0,0,0,.32)}
.mode:focus-visible,.row:focus-visible,.choice:focus-visible,.toggle:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.links{flex-wrap:wrap}
.links .link{min-height:44px;color:#fff3c4}
@media (max-height:540px){
  .home{gap:.45em;padding:.6em 1em}
  .fan,.tagline{display:none}
  .home .title{font-size:2.3em}
  .modes{flex-direction:row;width:min(42em,100%)}
  .mode{flex:1;padding:.5em .8em}
  .card{padding:.8em 1em}
  .card h2{font-size:1.3em;margin-bottom:.35em}
  .row{padding:.4em .8em}
}

/* 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:.95em}
.status span{font-size:.85em;color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums}
#hint-btn{margin-left:auto}

/* 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)*.09)}
.cd{transition:transform .15s 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}
.cd .face{display:none;overflow:hidden;background:#fffdf8;box-shadow:0 0 0 1px rgba(0,0,0,.22),0 1px 3px rgba(0,0,0,.3)}
.cd.up .face{display:block}
.cd.up .back{display:none}
.cd .back{background:repeating-linear-gradient(45deg,rgba(255,255,255,.16) 0 2px,transparent 2px 8px),repeating-linear-gradient(-45deg,rgba(255,255,255,.16) 0 2px,transparent 2px 8px),#2f5fa8;
  box-shadow:inset 0 0 0 calc(var(--cw)*.055) #fdfdfd,inset 0 0 0 calc(var(--cw)*.07) rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.25),0 1px 3px rgba(0,0,0,.3)}
.red{color:#c4231c}
.blk{color:#17171a}
.face svg{fill:currentColor;position:absolute}
.face .r{position:absolute;left:calc(var(--cw)*.06);top:calc(var(--cw)*.035);font:800 calc(var(--cw)*.37)/1 var(--sans);letter-spacing:-.06em}
.face .s{right:calc(var(--cw)*.06);top:calc(var(--cw)*.07);width:calc(var(--cw)*.3);height:calc(var(--cw)*.3)}
.face .pip{left:50%;top:62%;width:calc(var(--cw)*.6);height:calc(var(--cw)*.6);transform:translate(-50%,-50%)}
.face .pip.small{top:83%;width:calc(var(--cw)*.28);height:calc(var(--cw)*.28)}
.face .court{position:absolute;left:12%;right:12%;top:30%;bottom:26%;display:grid;place-items:center;font:800 calc(var(--cw)*.56)/1 var(--serif);
  border:calc(var(--cw)*.025) solid currentColor;border-radius:calc(var(--cw)*.06);opacity:.9}
.slot{border:2px solid rgba(255,255,255,.26);background:rgba(0,0,0,.12)}
.slot .ghost{left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);fill:rgba(255,255,255,.2);position:absolute}
.slot .again{display:none}
.slot-s{cursor:pointer}
.slot-s.can .again{display:grid;place-items:center;position:absolute;inset:0;font-size:calc(var(--cw)*.55);color:rgba(255,255,255,.7)}
.cd.hint .face,.cd.hint .back,.slot.hint{box-shadow:0 0 0 3px var(--gold),0 0 calc(var(--cw)*.35) var(--gold);animation:glow .7s ease-in-out 3 alternate}
@keyframes glow{to{box-shadow:0 0 0 3px #fff3b0,0 0 calc(var(--cw)*.15) var(--gold)}}
.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 .16s ease-out}
@keyframes flip{from{transform:scaleX(.08)}to{transform:none}}
.cd.nudge .face{animation:nudge .26s}
@keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.kcur{position:absolute;left:0;top:0;width:calc(var(--cw) + 8px);height:calc(var(--ch) + 8px);border:3px solid var(--gold);border-radius:calc(var(--cw)*.13);pointer-events:none;z-index:6000;transition:transform .12s}
.kcur.holding{border-color:#7fd3ff;box-shadow:0 0 12px #7fd3ff}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}

/* cards over the table */
.how{margin:0 0 .4em;padding-left:1.2em}
.how li{margin:.15em 0}
.keys{font-size:.8em}
.stat-table{width:100%;border-collapse:collapse;font-size:.92em}
.stat-table th,.stat-table td{padding:.3em .35em;text-align:center}
.stat-table thead th{color:var(--brass-hi)}
.stat-table tbody th{text-align:left;color:var(--ink-soft);font-weight:600}
.stat-table tbody tr+tr{border-top:1px solid rgba(255,255,255,.08)}
.card .choice{min-height:44px;padding:.5em 1.4em}
.card .link{min-height:44px}