/* Memory Match: PC layout and polish. Phones keep the single column defined inline in index.html. */
.pairs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.9rem}
.pairs li{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:10px;background:var(--lg-cream);border:1px solid var(--lg-line)}
.pairs li.empty{color:var(--lg-muted)}
.pairs .face-glyph{font-size:1.3rem;line-height:1}.pairs .who{font-weight:800}.pairs .who.host{color:var(--lg-p1)}.pairs .who.guest{color:var(--lg-p2)}
kbd{font:700 .78rem 'Nunito',system-ui,sans-serif;border:1px solid var(--lg-line);border-bottom-width:2px;border-radius:6px;padding:1px 6px;background:var(--lg-white)}
.keys{font-size:.8rem;line-height:1.7;margin:0}
.card-back{box-shadow:inset 0 -3px 0 #0000001a,0 2px 5px #00000014}
.card[data-state=down]:not([aria-disabled=true]):hover .card-inner{transform:translateY(-3px) rotateY(0)}
.card-front{box-shadow:0 2px 6px #0000001a}
.card[data-state=matched] .card-front{box-shadow:0 0 0 3px color-mix(in srgb,var(--lg-good) 35%,transparent)}
.lg-button:not(:disabled):hover{border-color:var(--lg-rose)}.lg-button:not(:disabled):active{transform:translateY(1px)}
@media(min-width:1000px){
  :root{--lg-topbar:84px}
  :root:has(.lg-roomchip){--lg-topbar:130px}
  main{max-width:1600px;padding:10px 16px;text-align:left}
  #sound{min-height:46px}
  #lobby{display:grid;grid-template-columns:repeat(2,minmax(0,520px));gap:24px;justify-content:center;align-items:start;margin-top:8px}
  #lobby .lg-lobby{margin:0;max-width:none}#lobby #setup{margin:0!important}
  .lg-lobby>a,.lg-lobby>p.lg-muted{display:none}.lg-lobby label{margin-top:10px}
  #game{background:none;border:0;box-shadow:none;padding:0;text-align:left}
  .mem-stage{--stage-h:calc(100dvh - var(--lg-topbar) - 16px);grid-template-columns:300px minmax(0,1fr) 280px;padding:0}
  .lg-rail>*{flex-shrink:0}
  .mem-left h1{margin:4px 0;font-size:2rem}
  .mem-left .info-bar{flex-direction:column;align-items:flex-start;gap:10px;margin:4px 0;font-size:1.05rem}
  .mem-left .turn-indicator{font-size:.95rem}
  .mem-left #result{margin:4px 0;font-size:1.1rem}
  .mem-left .actions{flex-direction:column;align-items:stretch;margin:6px 0}
  .mem-center #board{margin:0;max-width:none;width:min(100%,calc((var(--stage-h) - 8px) * var(--ratio,1)));flex:none;gap:10px}
  .mem-center #board.cols-6{gap:8px}
  .cols-4 .card{font-size:clamp(2rem,4.6vw,3.4rem)}.cols-5 .card{font-size:clamp(1.8rem,4vw,3rem)}.cols-6 .card{font-size:clamp(1.4rem,3vw,2.4rem)}
  .mem-right h2{font-size:1.1rem;margin:0}
}
/* PC lobby: the shared lobby card becomes two columns (who you are | how to start) so the whole menu fits one screen */
@media(min-width:1000px){
  #lobby{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);max-width:1180px;margin-left:auto;margin-right:auto}
  .lg-lobby{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;align-content:start}
  .lg-lobby>h1,.lg-lobby>.lg-status,.lg-lobby>.lg-invite{grid-column:1/-1}
  .lg-lobby>label,.lg-lobby>.lg-avatars{grid-column:1}
  .lg-lobby>.lg-row{grid-column:2;grid-row:2/4;align-content:start}
  .lg-lobby>.lg-join{grid-column:2;grid-row:4}
  .lg-lobby>.lg-status{justify-self:start}
}
@media(min-width:1000px){
  .mem-center{overflow:visible;padding:6px;box-sizing:border-box}
  .mem-center #board{width:min(100%,calc((var(--stage-h) - 20px) * var(--ratio,1)))}
  #sound{margin-bottom:6px}
  :root{--lg-topbar:90px}
}
/* phones: keep the original order (title, score, board, result, buttons) even though the markup now has rails */
@media(max-width:999px){
  .mem-stage{display:flex;flex-direction:column}
  .mem-left{display:contents}
  .mem-left>a{order:1;align-self:center}.mem-left>h1{order:2;text-align:center}.mem-left>.info-bar{order:3}
  .mem-center{order:4}
  .mem-left>#result{order:5}.mem-left>#stars{order:6}.mem-left>#stars-note{order:7}.mem-left>.actions{order:8}.mem-left>.solo-stats{order:9}
  .mem-left>h1{width:100%;margin:6px 0 0}
}