/* Memory Match: a green felt table, ivory tiles with jade backs. */
:root{
  --felt:#1F5E47;--felt-hi:#2A7259;--felt-lo:#143F30;--jade:#2E8A68;--jade-lo:#1B5C44;--jade-line:#BFE6D2;
  --ivory:#FFFDF6;--ivory-lo:#ECE6D2;--edge:#C9BE9E;--star:#F2B227;--cream:#FBF4E2;--cream-soft:#D7E8DD;
}
body{background:radial-gradient(ellipse at 50% 35%,var(--felt-hi),var(--felt) 55%,var(--felt-lo))}
.fc{font-family:"Noto Serif SC","Songti SC","Hiragino Mincho ProN","Noto Serif CJK SC","Source Han Serif SC",SimSun,serif}

/* ------------------------------------------------------------------ home */
.home{align-items:center;justify-content:center;gap:1.2em;padding:1em;text-align:center;overflow:auto;color:var(--cream)}
.home-head{display:flex;flex-direction:column;align-items:center;gap:.35em}
.home-icon{width:4.4em;height:4.4em;border-radius:1em;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.title{font:800 clamp(2.3em,10vw,3.6em)/1 var(--sans);letter-spacing:-.01em;margin:0;color:var(--cream);text-shadow:0 2px 10px rgba(0,0,0,.3)}
.tagline{margin:0;color:var(--cream-soft);font-size:1.12em}
.home-body{display:flex;flex-direction:column;align-items:center;gap:.9em;width:min(26em,100%)}
.stepper{display:flex;align-items:center;gap:.6em;width:100%;justify-content:center}
.step{width:56px;height:56px;border-radius:16px;border:1px solid var(--hair);background:var(--panel);font-size:2em;line-height:1;font-weight:700;color:var(--ink);padding:0 0 .12em;flex:none}
.step:disabled{opacity:.4;cursor:default}
.step:active:not(:disabled){transform:translateY(1px)}
.step:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.step-mid{flex:1;max-width:14em;min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--panel);color:var(--ink);border:1px solid var(--hair);border-radius:16px;padding:.35em .6em;line-height:1.2}
.step-mid b{font-size:1.35em}
.step-mid small{color:var(--ink-soft);font-size:.85em}
.stars{color:var(--star);font-size:1.15em;letter-spacing:.12em}
.stars.none{color:#C9D1DB}
.home .pill{background:linear-gradient(180deg,#FFD978,var(--gold));color:#3A2A06;box-shadow:0 3px 0 #A97C14,0 8px 18px rgba(0,0,0,.25)}
.home .pill:active{box-shadow:0 1px 0 #A97C14,0 4px 10px rgba(0,0,0,.2)}
.home .link{color:var(--cream)}
.home .pill:focus-visible,.home .link:focus-visible{outline-color:var(--gold)}
.links{display:flex;gap:.2em;justify-content:center;flex-wrap:wrap}
.home > :first-child{margin-top:auto}.home > :last-child{margin-bottom:auto}
@media (orientation:landscape) and (max-height:520px){
  .home{flex-direction:row;gap:1.6em;padding:.6em 1em}
  .home > *{margin-block:auto!important}
  html:not(.hw-embed) body:has(#home:not([hidden])) #home.home{padding-top:.6em!important}
  .home-head{flex:0 1 auto;padding-top:2.6em}
  html.hw-embed .home-head{padding-top:0}
  .home-icon{width:3em;height:3em}
  .title{font-size:2.2em}
  .home-body{gap:.5em;flex:0 1 22em}
  .step-mid{min-height:64px}
  .home .pill{padding:.5em 2em}
  .links .link{min-height:44px;padding:.2em .5em}
}
@media (max-height:420px){.tagline{display:none}}

/* ---------------------------------------------------------------- game */
#game{flex-direction:column}
.bar{display:flex;align-items:center;justify-content:space-between;gap:.5em;padding:max(.5em,env(safe-area-inset-top)) .7em .3em;width:min(36em,100%);margin:0 auto}
.felt{flex:1;min-height:0;min-width:0;display:grid;place-items:center;padding:6px}
.dock{display:flex;align-items:center;justify-content:center;gap:.6em;padding:.4em .6em max(.6em,env(safe-area-inset-bottom))}
.icon-btn{width:48px;height:48px;border-radius:14px;border:1px solid var(--hair);background:var(--panel);display:grid;place-items:center;padding:0;flex:none}
.icon-btn svg,.tool svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.readout{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;min-width:4.8em;padding:0 .7em;border-radius:14px;background:var(--panel);border:1px solid var(--hair);line-height:1.1;flex:1 1 0;max-width:8em}
.readout span{font-weight:800;font-size:1.15em;font-variant-numeric:tabular-nums;white-space:nowrap}
.readout small{color:var(--ink-soft);font-size:.78em;white-space:nowrap;font-variant-numeric:tabular-nums}
.readout.tries.low span{color:var(--bad)}
.readout.bump{animation:bump .3s ease-out}
@keyframes bump{40%{transform:scale(1.12)}}
.tool{display:flex;align-items:center;gap:.4em;min-height:48px;padding:0 1em;border-radius:14px;border:1px solid var(--hair);background:var(--panel);font-weight:700}
.tool:disabled{opacity:.5;cursor:default}
.tool:active:not(:disabled),.icon-btn:active{transform:translateY(1px)}
.icon-btn:focus-visible,.tool:focus-visible,.board:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* the tiles: a 3D turn, jade back, ivory face */
.board{--tw:70px;--th:91px;--gap:calc(var(--tw)*.12);position:relative;display:grid;grid-template-columns:repeat(var(--c),var(--tw));grid-template-rows:repeat(var(--r),var(--th));gap:var(--gap);
  touch-action:manipulation;user-select:none;-webkit-user-select:none;outline-offset:8px;border-radius:12px}
.tile{position:relative;width:var(--tw);height:var(--th);perspective:calc(var(--tw)*8);cursor:pointer}
.turn{position:absolute;inset:0;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .3s cubic-bezier(.3,.7,.4,1.15)}
.back,.face{position:absolute;inset:0;border-radius:calc(var(--tw)*.12);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.back{background:linear-gradient(155deg,#3BA07A,var(--jade) 45%,var(--jade-lo));
  box-shadow:0 calc(var(--tw)*.05) 0 #0E3B2C,0 calc(var(--tw)*.1) calc(var(--tw)*.2) rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.back::before{content:"";position:absolute;inset:11%;border-radius:calc(var(--tw)*.07);border:2px solid rgba(191,230,210,.55);
  background:repeating-linear-gradient(45deg,rgba(191,230,210,.13) 0 2px,transparent 2px 9px),repeating-linear-gradient(-45deg,rgba(191,230,210,.13) 0 2px,transparent 2px 9px)}
.back::after{content:"";position:absolute;left:50%;top:50%;width:26%;height:20%;transform:translate(-50%,-50%) rotate(45deg);background:var(--jade-line);border-radius:3px;opacity:.85}
.face{transform:rotateY(180deg);background:linear-gradient(160deg,#FFF 0%,var(--ivory) 45%,var(--ivory-lo) 100%);display:grid;place-items:center;
  box-shadow:0 calc(var(--tw)*.05) 0 var(--edge),0 calc(var(--tw)*.1) calc(var(--tw)*.2) rgba(0,0,0,.3),inset 0 0 0 1px rgba(0,0,0,.06)}
.face svg{width:88%;height:88%;display:block;pointer-events:none}
.tile.up .turn,.board.peek .tile .turn{transform:rotateY(180deg)}
@media (hover:hover){.tile:not(.up):not(.done):hover .back{filter:brightness(1.1)}}
.tile:not(.up):not(.done):active .turn{transform:scale(.96)}
.tile.cur::after{content:"";position:absolute;inset:-5px;border-radius:calc(var(--tw)*.16);box-shadow:0 0 0 3px #fff,0 0 12px rgba(255,255,255,.7);pointer-events:none}
.tile.done .face{box-shadow:0 0 0 3px var(--gold),0 0 calc(var(--tw)*.35) rgba(255,214,100,.85)}
.tile.done{animation:matched .5s cubic-bezier(.3,1.6,.5,1)}
.tile.done.rest{animation:none;opacity:.5;transform:scale(.93);transition:opacity .4s,transform .4s;cursor:default}
.tile.done.rest .face{box-shadow:0 calc(var(--tw)*.04) 0 var(--edge)}
@keyframes matched{0%{transform:scale(1)}45%{transform:scale(1.13)}100%{transform:scale(1)}}
.tile.miss .face{box-shadow:0 0 0 3px #F08A7E,0 calc(var(--tw)*.05) 0 var(--edge)}
.tile.miss{animation:shake .38s}
@keyframes shake{20%{transform:translateX(-5px) rotate(-2deg)}50%{transform:translateX(5px) rotate(2deg)}80%{transform:translateX(-2px)}}
.board.won .tile{animation:wave .8s ease-out both;animation-delay:calc(var(--d)*45ms)}
@keyframes wave{40%{transform:translateY(calc(var(--tw)*-.22)) scale(1.06)}}
.board.won .tile.done.rest{opacity:1;transform:none}
.pop{position:absolute;z-index:6;left:0;top:0;transform:translate(-50%,-50%);pointer-events:none;font:900 1.5em/1 var(--sans);color:#FFE07A;white-space:nowrap;
  text-shadow:0 2px 0 #7A5200,0 4px 14px rgba(0,0,0,.5);animation:rise 1s ease-out forwards}
@keyframes rise{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}20%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-160%) scale(1)}}

#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}

/* a phone on its side, or a short frame: the bar and tools at the sides */
@media (orientation:landscape) and (max-height:520px){
  #game{flex-direction:row}
  .bar{flex-direction:column;justify-content:center;width:auto;margin:0;padding:.4em .3em .4em max(.5em,env(safe-area-inset-left));gap:.4em}
  .readout{min-width:6em;flex:0 0 auto;min-height:44px}
  .dock{flex-direction:column;padding:.4em max(.5em,env(safe-area-inset-right)) .4em .3em;gap:.5em}
  .tool{min-width:6.4em;justify-content:flex-start}
}
@media (max-width:380px){.tool span{display:none}.tool{padding:0 .9em}.readout{min-width:4.2em;padding:0 .4em}}

/* cards */
.card.result h2{color:var(--felt)}
.card.lost h2{color:var(--ink)}
.big-stars{display:flex;justify-content:center;gap:.25em;font-size:2.6em;line-height:1;margin:.05em 0 .25em}
.big-stars span{color:#D6DDE6}
.big-stars .got{color:var(--star);animation:star .45s cubic-bezier(.3,1.7,.5,1) both;animation-delay:calc(var(--k)*140ms);text-shadow:0 2px 8px rgba(242,178,39,.45)}
@keyframes star{from{transform:scale(0) rotate(-40deg)}}
.how p{margin:.25em 0}
.how-art{display:flex;justify-content:center;gap:.4em;margin:.1em 0 .6em}
.mini{width:2.6em;height:3.4em;border-radius:.4em;display:grid;place-items:center}
.mini.down{background:linear-gradient(155deg,#3BA07A,var(--jade) 45%,var(--jade-lo));box-shadow:0 3px 0 #0E3B2C}
.mini.up{background:linear-gradient(160deg,#FFF,var(--ivory-lo));box-shadow:0 3px 0 var(--edge),0 0 0 2px var(--gold)}
.mini svg{width:88%;height:88%}
@media (max-height:420px){.how-art{display:none}}
/* short screens: cards stay whole, their buttons side by side */
@media (max-height:520px){
  .card{padding:.8em 1em .8em;width:min(34em,100%)}
  .card h2{font-size:1.3em;margin:0 0 .35em}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.5em}
  .card .actions .pill{padding:.45em 1.4em;font-size:1.05em}
  .card .stats{margin:.1em 0 .2em}
  .card .note{margin:.15em 0}
  .big-stars{font-size:2em;margin:0}
  .how{display:grid;grid-template-columns:1fr 1fr;column-gap:1.2em;font-size:.92em}
  .how .note{grid-column:1/-1}
  .rows{gap:.35em}
  .card .row{min-height:44px;padding:.35em .8em}
}
/* a card over play: on a narrow screen the Arcade button sits where the bar is, so the bar steps aside; toasts never cover a card */
@media (max-width:760px){html:not(.hw-embed) body:has(> .veil) #game .bar{visibility:hidden}}
body:has(> .veil) .toast{display:none}