/* Captain's Club · game: Memory Sri Lanka (club/js/game-memory.js). Every rule is scoped to .gm--memory.
   One centred column; from 720 px the head is centred too and the board shrinks on a short window, so the 16 cards
   and the Captain's line fit without scrolling (phones keep the full width: bigger cards to tap).
   Cards: a yellow CIAO back and a paper front, turned in 3D (a cross-fade with reduced motion). */
.gm--memory{--mem-w:560px;max-width:calc(680px + var(--gx) + var(--gxr))}
.gm--memory .mem{display:grid;gap:14px;width:min(100%,var(--mem-w));margin:0 auto}
@media (min-width:720px){
  .gm--memory{--mem-w:min(560px,max(360px,100vh - 370px))}
  .gm--memory .shead{justify-content:center;text-align:center}
  .gm--memory .shead__lead{margin-left:auto;margin-right:auto}
}
@supports (height:100svh){@media (min-width:720px){.gm--memory{--mem-w:min(560px,max(360px,100svh - 370px))}}}

/* ---------- HUD: moves · pairs · time ---------- */
.gm--memory .mem__hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.gm--memory .mem__stat{display:grid;gap:1px;min-width:0;padding:7px 10px 6px 12px;border-radius:14px;background:#fff;border:2.5px solid var(--ink);box-shadow:var(--sh-hard-s)}
.gm--memory .mem__stat dt{display:flex;align-items:center;gap:5px;min-width:0;font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm--memory .mem__stat dt .i{width:14px;height:14px;stroke-width:2.4;color:var(--ink)}
.gm--memory .mem__stat dd{margin:0;font-weight:900;font-size:1.35rem;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gm--memory .mem__stat--pairs{background:var(--y)}
.gm--memory .mem__stat--pairs dt{color:var(--y-ink)}

/* ---------- the board ---------- */
.gm--memory .mem__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,2.2vw,14px)}
.gm--memory .mem__card{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;border-radius:14px;perspective:700px;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:transform .2s var(--ease)}
.gm--memory .mem__card:focus-visible{outline:3px solid var(--ink);outline-offset:5px;border-radius:17px}
.gm--memory .mem__in{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .5s var(--spring)}
.gm--memory .mem__card.is-up .mem__in{transform:rotateY(180deg)}
.gm--memory .mem__face{position:absolute;inset:0;display:grid;place-items:center;border-radius:14px;border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:background-color .25s,border-color .2s,box-shadow .2s}
/* the back: brand yellow, the app's halftone dots, a dashed frame like a ticket's perforation, the CIAO letters */
.gm--memory .mem__back{background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.45) 0,transparent 55%),radial-gradient(rgba(11,11,12,.16) 1.2px,transparent 1.5px) 0 0/9px 9px,var(--y)}
.gm--memory .mem__back::before{content:"";position:absolute;inset:5px;border:2px dashed rgba(11,11,12,.38);border-radius:9px}
.gm--memory .mem__logo{position:relative;display:grid;place-items:center;width:64%;padding:7% 8%;border-radius:999px;background:var(--y);border:2px solid var(--ink);color:var(--ink);box-shadow:2px 2px 0 var(--ink);transform:rotate(-8deg)}
.gm--memory .mem__logo .logo{width:100%;height:auto}
/* the front: paper and the 3D art */
.gm--memory .mem__front{transform:rotateY(180deg);background:radial-gradient(circle at 50% 42%,#fff 0,#fff 38%,var(--paper) 72%)}
.gm--memory .mem__art{width:84%;height:84%;object-fit:contain;-webkit-user-select:none;user-select:none;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(11,11,12,.2))}
.gm--memory .mem__name{display:none;padding:0 8%;font-weight:800;font-size:clamp(.62rem,2.6vw,.9rem);line-height:1.15;text-align:center;overflow-wrap:anywhere}
.gm--memory .mem__art.is-missing{display:none}
.gm--memory .mem__art.is-missing~.mem__name{display:block}
.gm--memory .mem__ok{position:absolute;right:5%;top:5%;display:grid;place-items:center;width:clamp(18px,24%,28px);aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--y);opacity:0;transform:scale(.4);transition:opacity .2s,transform .35s var(--spring)}
.gm--memory .mem__ok .i{width:70%;height:70%;stroke-width:3.2}
.gm--memory .mem__card.is-match .mem__front{background:radial-gradient(circle at 50% 42%,#fff 0,var(--y-100) 70%)}
.gm--memory .mem__card.is-match .mem__ok{opacity:1;transform:none}
.gm--memory .mem__card.is-miss .mem__front{border-color:var(--sl-maroon);box-shadow:3px 3px 0 var(--sl-maroon)}
.gm--memory .mem__card:not(.is-up){cursor:pointer}
.gm--memory .mem__card.is-match{cursor:default}
.gm--memory .mem__grid.is-busy .mem__card{cursor:default}
@media (hover:hover){
  .gm--memory .mem__grid:not(.is-busy) .mem__card:not(.is-up):hover{transform:translate(-2px,-2px)}
  .gm--memory .mem__grid:not(.is-busy) .mem__card:not(.is-up):hover .mem__back{box-shadow:5px 5px 0 var(--ink)}
}
.gm--memory .mem__card:not(.is-up):active{transform:translate(2px,2px)}
.gm--memory .mem__card:not(.is-up):active .mem__back{box-shadow:1px 1px 0 var(--ink)}

/* motion: the deal, the shake of a wrong pair, the pop of a right one, the wave at the end */
@media (prefers-reduced-motion:no-preference){
  .gm--memory .mem__grid.is-deal .mem__card{animation:memDeal .42s var(--spring) backwards;animation-delay:var(--d,0ms)}
  .gm--memory .mem__grid .mem__card.is-miss{animation:memShake .42s .25s}   /* over the deal: a pair tried during it still shakes */
  .gm--memory .mem__card.is-match .mem__in{animation:memPop .4s .42s var(--spring)}
  .gm--memory .mem__grid.is-won .mem__card{animation:memWave .6s var(--ease);animation-delay:var(--d,0ms)}
}
@keyframes memDeal{from{opacity:0;transform:translateY(14px) scale(.7) rotate(-6deg)}}
@keyframes memShake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@keyframes memPop{0%{transform:rotateY(180deg)}45%{transform:rotateY(180deg) scale(1.1)}100%{transform:rotateY(180deg)}}
@keyframes memWave{40%{transform:translateY(-10px) rotate(-3deg)}75%{transform:translateY(2px)}}
/* reduced motion: no turning, the faces simply swap */
@media (prefers-reduced-motion:reduce){
  .gm--memory .mem__in,.gm--memory .mem__card.is-up .mem__in{transform:none;transition:none}
  .gm--memory .mem__front{transform:none;opacity:0;transition:opacity .15s}
  .gm--memory .mem__back{transition:opacity .15s}
  .gm--memory .mem__card.is-up .mem__front{opacity:1}
  .gm--memory .mem__card.is-up .mem__back{opacity:0}
  .gm--memory .mem__card,.gm--memory .mem__ok{transition:none}
}

/* ---------- the Captain's line ---------- */
.gm--memory .mem__say{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:center;margin-top:4px}
.gm--memory .mem__av{position:relative;width:56px;height:56px;border-radius:50%;background:var(--y);border:2.5px solid var(--ink);overflow:hidden;box-shadow:3px 3px 0 var(--ink)}
.gm--memory .mem__cap{position:absolute;width:160%;max-width:none;left:-24%;top:-2%;filter:none}
.gm--memory .mem__bub{display:flex;align-items:center;min-height:calc(2.9em + 26px);padding:11px 16px;border-width:2.5px;border-radius:18px;font-size:.92rem;line-height:1.45;box-shadow:var(--sh-hard-s)}
.gm--memory .mem__bub::before{content:"";position:absolute;left:-10px;top:50%;width:16px;height:16px;margin-top:-8px;background:#fff;border-left:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(45deg) skew(8deg,8deg)}

/* ---------- end card slot, shuffle, record, keyboard tip ---------- */
.gm--memory .mem__end:empty{display:none}
.gm--memory .mem__end .gres{margin-top:0}
.gm--memory .mem__foot{display:grid;gap:12px}
.gm--memory .mem__tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px}
.gm--memory .mem__rec{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;background:var(--y-100);border:1.5px solid var(--ink);font-size:.78rem;font-weight:800}
.gm--memory .mem__rec .i{width:14px;height:14px}
.gm--memory .mem__keys{display:none}
@media (hover:hover) and (pointer:fine){
  .gm--memory .mem__keys{display:flex;align-items:flex-start;gap:8px;font-size:.82rem;color:var(--steel);line-height:1.45}
  .gm--memory .mem__keys .i{width:17px;height:17px;flex:none;margin-top:1px}
}
@media (min-width:720px){.gm--memory .mem__bub{min-height:calc(2.9em + 22px);padding:9px 15px;font-size:.9rem}}
@media (max-width:370px){
  .gm--memory .mem__stat{padding:6px 8px 5px 9px}
  .gm--memory .mem__stat dt{letter-spacing:.06em}
  .gm--memory .mem__stat dd{font-size:1.2rem}
  .gm--memory .mem__card,.gm--memory .mem__face{border-radius:12px}
  .gm--memory .mem__back::before{inset:4px;border-radius:7px}
}

/* ---------- a phone on its side (or any short, wide window): the board on the left, as tall as the screen
   between the top bar and the tabs, so all 16 cards show at once; HUD, Captain and shuffle on the right ---------- */
@media (orientation:landscape) and (max-height:520px){
  .gm--memory{--mem-b:clamp(220px,100vh - 150px,400px)}
  .gm--memory .mem{width:100%;grid-template-columns:var(--mem-b) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;grid-template-areas:"grid hud" "grid say" "grid foot" "grid .";column-gap:22px}
  .gm--memory .mem__hud{grid-area:hud}
  .gm--memory .mem__grid{grid-area:grid;align-self:start;gap:10px}
  .gm--memory .mem__say{grid-area:say;margin-top:0}
  .gm--memory .mem__foot{grid-area:foot}
  .gm--memory .mem__end{grid-column:2;grid-row:2 / 5;align-self:start}
}
@supports (height:100svh){@media (orientation:landscape) and (max-height:520px){.gm--memory{--mem-b:clamp(220px,100svh - 150px,400px)}}}