/* TriPeaks Trail: dusk over the mountains, big plain cards. The kit's cards and pills, re-tinted. */
:root{--sky:#173349;--sky-lo:#0f2433;--lacquer:#10283a;--lacquer-hi:#1a3b52;--hair:rgba(255,255,255,.22);--gold:#ffd25e;--ember:#ff9f43}
body{background:var(--sky-lo)}
#home,#game{isolation:isolate;z-index:0;background:url(assets/scene.svg) center bottom/cover no-repeat,var(--sky)}
.card{background:linear-gradient(180deg,#24506b,var(--lacquer-hi) 40%,var(--lacquer))}
.card h2{color:var(--gold)}
.jewel{border-color:rgba(255,255,255,.5);background:radial-gradient(circle at 35% 30%,#3d7590,#14344a 72%);box-shadow:0 0 0 2px #10283a,0 4px 10px rgba(0,0,0,.35)}
.jewel svg{stroke:#fff}
.pill{color:#3a2408}

/* home */
.home{gap:.85em}
.home .title{font-size:clamp(2.5em,11vw,4.2em);color:#fff8e8;text-shadow:0 2px 0 #0b2231,0 6px 18px rgba(0,0,0,.45)}
.kicker{margin:-.5em 0 0;font:800 .8em/1 var(--sans);letter-spacing:.42em;color:var(--gold)}
.tagline{color:#f1f6f8}
.peak-art{position:relative;width:180px;height:96px;--cw:50px;--ch:70px;flex:none}
.peak-art .cd{cursor:default;transition:none}
.peak-art .a0{transform:translate(8px,26px) rotate(-10deg)}
.peak-art .a1{transform:translate(65px,0)}
.peak-art .a2{transform:translate(122px,26px) rotate(10deg)}
.modes{display:flex;flex-direction:column;gap:.5em;width:min(23em,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,.3);background:rgba(8,22,32,.5);color:#fff;text-align:left}
.mode b{font:800 1.2em/1.1 var(--serif);color:var(--gold)}
.mode small{color:rgba(255,255,255,.86);font-size:.85em}
.mode.last{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.mode:hover{background:rgba(8,22,32,.66)}
.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:#ffe9b0}
@media (max-height:560px){
  .home{gap:.45em;padding:.6em 1em}
  .peak-art,.tagline{display:none}
  .home .title{font-size:2.2em}
  .kicker{margin:0}
  .modes{flex-direction:row;width:min(44em,100%)}
  .mode{flex:1;padding:.5em .8em}
}
@media (max-height:560px),(max-width:420px){
  .card{padding:.8em 1em}
  .card h2{font-size:1.3em;margin-bottom:.35em}
  .row{padding:.45em .8em}
}
@media (max-height:440px){
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.6em;margin-top:.5em}
  .card .stats{margin:0}
  .card .note{margin:.3em 0}
  .card .rows{gap:.3em}
  .card .row{min-height:44px;padding:.25em .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:1.05em;font-variant-numeric:tabular-nums}
.status span{font-size:.85em;color:rgba(255,255,255,.85)}
#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)*.1);transform-origin:0 0}
.cd{transition:transform .24s cubic-bezier(.25,.8,.3,1);will-change:transform;cursor:pointer}
#board.instant .cd,#board.instant .kcur{transition:none}
.cd.fly{pointer-events:none}
.cd .face,.cd .back{position:absolute;inset:0;border-radius:inherit}
.cd .face{display:none;overflow:hidden;background:#fffdf7;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 2px 4px rgba(0,0,0,.35)}
.cd.up .face{display:block}
.cd.up .back{display:none}
.cd .back{background:url(assets/back.svg) center/100% 100%;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.35)}
.red{color:#c8221a}
.blk{color:#15161a}
.face svg{fill:currentColor;position:absolute}
.face .r{position:absolute;left:calc(var(--cw)*.07);top:calc(var(--cw)*.03);font:800 calc(var(--cw)*.46)/1 var(--sans);letter-spacing:-.07em}
.face .s{right:calc(var(--cw)*.06);top:calc(var(--cw)*.08);width:calc(var(--cw)*.3);height:calc(var(--cw)*.3)}
.face .pip{left:50%;top:66%;width:calc(var(--cw)*.62);height:calc(var(--cw)*.62);transform:translate(-50%,-50%)}
.face .court{position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);width:calc(var(--cw)*.7);height:calc(var(--cw)*.7);display:grid;place-items:center;
  border:calc(var(--cw)*.03) solid currentColor;border-radius:calc(var(--cw)*.1);font:800 calc(var(--cw)*.4)/1 var(--serif)}
.cd.can .face{box-shadow:0 0 0 2px var(--gold),0 0 calc(var(--cw)*.25) rgba(255,210,94,.8),0 2px 4px rgba(0,0,0,.35)}
.cd.hint .face,.cd.hint .back{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--gold),0 0 calc(var(--cw)*.4) var(--gold);animation:glow .6s ease-in-out 4 alternate}
@keyframes glow{to{box-shadow:0 0 0 3px #fff,0 0 0 4px var(--gold),0 0 calc(var(--cw)*.1) var(--gold)}}
.cd.flip .face{animation:flip .2s ease-out}
@keyframes flip{from{transform:scaleX(.06)}to{transform:none}}
.cd.nudge .face,.cd.nudge .back{animation:nudge .28s}
@keyframes nudge{20%{transform:translateX(-5px)}60%{transform:translateX(5px)}}
.slot{border:2px dashed rgba(255,255,255,.35);background:rgba(0,0,0,.15);display:grid;place-items:center;color:rgba(255,255,255,.6);font-size:calc(var(--cw)*.5)}
.count{position:absolute;left:0;top:0;min-width:2em;padding:.2em .5em;border-radius:999px;background:#0b1f2c;color:#fff;border:2px solid rgba(255,255,255,.7);
  font:800 1em/1 var(--sans);text-align:center;z-index:900;pointer-events:none;font-variant-numeric:tabular-nums;transition:transform .2s}
.chain{position:absolute;left:0;top:0;z-index:900;pointer-events:none;color:#fff;font:900 1.15em/1 var(--sans);padding:.35em .7em;border-radius:999px;
  background:linear-gradient(180deg,#ffb259,#e8711c);box-shadow:0 3px 0 #9c4510,0 6px 14px rgba(0,0,0,.35);white-space:nowrap;opacity:0;transition:opacity .25s}
.chain.on{opacity:1}
.chain.bump{animation:bump .3s}
@keyframes bump{40%{scale:1.3}}
.pop{position:absolute;left:0;top:0;z-index:950;pointer-events:none;font:900 1.25em/1 var(--sans);color:#fff;text-shadow:0 2px 0 #7a3b00,0 0 10px rgba(255,160,40,.9);
  white-space:nowrap;animation:rise .95s ease-out forwards}
.pop.big{font-size:1.7em;color:var(--gold)}
@keyframes rise{0%{opacity:0;translate:-50% 0;scale:.6}15%{opacity:1;scale:1.15}100%{opacity:0;translate:-50% -60px;scale:1}}
.kcur{position:absolute;left:0;top:0;border:3px solid #7fd3ff;border-radius:10px;box-shadow:0 0 12px #7fd3ff;pointer-events:none;z-index:960;transition:transform .12s,width .12s,height .12s}
#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(--gold)}
.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}
.card .pill{min-height:48px}