/* Pyramid Pairs: deep teal felt, big plain cards, a sandstone back. The kit's cards and pills, re-tinted. */
:root{--felt:#155a6a;--felt-hi:#1f7488;--felt-lo:#0b3945;--lacquer:#0c3440;--lacquer-hi:#144654;--hair:rgba(255,255,255,.22);--gold:#ffd54a;--mate:#7fe0c2}
body{background:var(--felt-lo)}
#home,#game{isolation:isolate;z-index:0;background:radial-gradient(ellipse at 50% 30%,var(--felt-hi),var(--felt) 55%,var(--felt-lo))}
.card{background:linear-gradient(180deg,#1b5868,var(--lacquer-hi) 40%,var(--lacquer))}
.veil{z-index:80}
.jewel{background:radial-gradient(circle at 35% 30%,#2d8aa0,#0e4150 72%);box-shadow:0 0 0 2px #0d3b48,0 4px 10px rgba(0,0,0,.35)}

/* home */
.home{gap:.85em}
.home .title{font-size:clamp(2.2em,9vw,3.8em);color:#fff8e6;text-shadow:0 2px 0 #08313c,0 6px 18px rgba(0,0,0,.4)}
.home .title small{color:var(--brass-hi)}
.tagline{color:#f3f7f2}
.mini{position:relative;width:150px;height:118px;--cw:44px;--ch:62px;flex:none}
.mini .cd{cursor:default;transition:none}
.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,.85);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:560px){
  .home{gap:.45em;padding:.6em 1em}
  .mini,.tagline{display:none}
  .home .title{font-size:2.1em}
  .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:.35em .8em}
  .card .actions{margin-top:.4em;gap:.3em .8em;flex-direction:row;flex-wrap:wrap;justify-content:center}
  .card .stats{margin:0 0 .2em}
  .card .stats b{font-size:1.3em}
  .card .note{margin:.15em 0}
}

/* the bar floats over the felt: the pyramid's top is narrow, so its corners are free */
#game .bar{position:absolute;left:0;right:0;top:0;pointer-events:none;z-index:40;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))}
#game .bar .jewel{pointer-events:auto;width:44px;height:44px}
.bar .right{display:flex;gap:8px}
.felt{position:absolute;inset:0;overflow:hidden}
#board{position:absolute;inset:0;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#info{position:absolute;left:0;top:0;color:#fff;line-height:1.25;font-variant-numeric:tabular-nums;pointer-events:none;z-index:30;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#info b{display:block;font-size:1em;color:#fff8e6}
#info span{display:block;font-size:.88em;color:rgba(255,255,255,.88)}
#info .score{font:800 1.15em/1.2 var(--serif);color:var(--brass-hi)}

/* cards */
.cd,.slot{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);border-radius:calc(var(--cw)*.09)}
.cd{transition:transform .22s cubic-bezier(.25,.8,.3,1),translate .14s,scale .14s,filter .2s;will-change:transform;cursor:pointer;pointer-events:none}
#board{cursor:pointer}
#board.instant .cd{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,.24),0 2px 4px rgba(0,0,0,.28)}
.cd.up .face{display:block}
.cd.up .back{display:none}
.cd .back{background:radial-gradient(circle at 50% 50%,rgba(255,240,200,.35) 0 14%,transparent 15%),repeating-linear-gradient(60deg,rgba(255,236,190,.2) 0 2px,transparent 2px 9px),repeating-linear-gradient(-60deg,rgba(255,236,190,.2) 0 2px,transparent 2px 9px),#b5562e;
  box-shadow:inset 0 0 0 calc(var(--cw)*.055) #fdf8ee,inset 0 0 0 calc(var(--cw)*.07) rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.25),0 2px 4px 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)*.03);font:800 calc(var(--cw)*.42)/1 var(--sans);letter-spacing:-.07em}
.face .s{left:calc(var(--cw)*.52);top:calc(var(--cw)*.07);width:calc(var(--cw)*.28);height:calc(var(--cw)*.28)}
.face .pip{left:50%;top:70%;width:calc(var(--cw)*.56);height:calc(var(--cw)*.56);transform:translate(-50%,-50%)}
.face .court{position:absolute;left:16%;right:16%;top:53%;bottom:7%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:calc(var(--cw)*.025) solid currentColor;border-radius:calc(var(--cw)*.06);font:800 calc(var(--cw)*.4)/1 var(--serif)}
.face .court small{font:700 calc(var(--cw)*.2)/1.1 var(--sans);opacity:.75}
.cd.under{filter:brightness(.84) saturate(.85)}
.cd.done{pointer-events:none}
.cd.sel{translate:0 calc(var(--cw)*-.1)}
.cd.sel .face{box-shadow:0 0 0 3px var(--gold),0 0 calc(var(--cw)*.4) var(--gold),0 8px 16px rgba(0,0,0,.4)}
.cd.mate .face{box-shadow:0 0 0 3px var(--mate),0 0 calc(var(--cw)*.25) var(--mate)}
.cd.hint .face,.cd.hint .back,.slot.hint{box-shadow:0 0 0 3px #fff,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 var(--gold),0 0 calc(var(--cw)*.12) var(--gold)}}
.cd.nudge{animation:nudge .28s}
@keyframes nudge{25%{translate:-5px 0}75%{translate:5px 0}}
.cd.pop{animation:pop .3s ease-out}
@keyframes pop{40%{scale:1.14}}
.cd.flip .face{animation:flip .18s ease-out}
@keyframes flip{from{transform:scaleX(.08)}to{transform:none}}
.slot{border:2px solid rgba(255,255,255,.26);background:rgba(0,0,0,.12);display:grid;place-items:center;color:rgba(255,255,255,.6);font-size:calc(var(--cw)*.5)}
.slot-stock{cursor:pointer}
.slot-stock .again{display:none}
.slot-stock.can .again{display:block}
.slot small{position:absolute;bottom:calc(var(--cw)*.06);left:0;right:0;text-align:center;font-size:calc(var(--cw)*.17);color:rgba(255,255,255,.7)}
.slot-done{border-style:dashed}
.badge{position:absolute;left:0;top:0;min-width:1.8em;padding:.15em .45em;border-radius:999px;background:#0b2f39;border:1px solid rgba(255,255,255,.4);color:#fff;font:700 15px/1.2 var(--sans);text-align:center;z-index:900;pointer-events:none;font-variant-numeric:tabular-nums}
.kcur{position:absolute;left:0;top:0;width:calc(var(--cw) + 10px);height:calc(var(--ch) + 10px);border:3px solid #7fd3ff;border-radius:calc(var(--cw)*.14);box-shadow:0 0 12px #7fd3ff;pointer-events:none;z-index:950;transition:transform .12s}
.float{position:absolute;left:0;top:0;z-index:960;pointer-events:none;font:900 26px/1 var(--serif);color:var(--brass-hi);text-shadow:0 2px 0 #3b2a05,0 0 12px rgba(0,0,0,.5);animation:rise .9s ease-out forwards;white-space:nowrap}
.float.big{font-size:34px}
@keyframes rise{from{opacity:0;translate:-50% 0;scale:.6}20%{opacity:1;scale:1.1}to{opacity:0;translate:-50% -60px;scale:1}}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}

/* 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}
.card .pill{min-height:48px}
@media (prefers-reduced-motion:reduce){.float{animation:none;opacity:0}}
.toast{pointer-events:none}