/* Memory Match Showdown. Builds on ../arcade-common/pz.css (tokens, header, cards, buttons, lobby, overlay). */
body[data-tod="day"] { --accent: #ff5d8f; --accent2: #ff9a3c; --glow: rgba(255, 93, 143, .22); --ft-bg: #ffffff; --ft-ink: #14233a; --cd-shadow: 0 4px 0 rgba(20, 35, 58, .16), 0 10px 16px rgba(20, 35, 58, .12); }
body[data-tod="night"] { --accent: #b78bff; --accent2: #4fd5ff; --glow: rgba(150, 120, 255, .32); --ft-bg: #0f1740; --ft-ink: #eaf0ff; --cd-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 16px var(--cglow, rgba(120, 140, 255, .4)); }

/* ---------- menu ---------- */
.hero-art { width: 100%; height: auto; max-height: 230px; display: block; margin: 10px 0 0; overflow: visible; }
.hero-art text { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', system-ui, sans-serif; fill: var(--accent2); }
.hero-art .hc { transform-box: fill-box; transform-origin: center; animation: floaty 4.2s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); }
.hero-art .hc text { fill: initial; }
.hero-art .hc2 { animation-delay: -1.4s; }
.hero-art .hc3 { animation-delay: -2.8s; }
.hero-art .hspark { animation: twinkle 2.4s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-7px) rotate(var(--rot, 0deg)); } }
.hero-art .hc1 { --rot: -6deg; } .hero-art .hc3 { --rot: 6deg; }
@keyframes twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.pickers .chips { margin-bottom: 2px; }
.chips.sizes { display: grid; grid-template-columns: repeat(4, 1fr); }
.chips.sizes button { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 4px; line-height: 1.25; border-radius: 14px; min-height: 52px; }
.chips.sizes button small { font-weight: 500; font-size: .7rem; opacity: .85; }
.chips.themes button { display: inline-flex; align-items: center; gap: 6px; }
.chips.themes button i { font-style: normal; font-size: 1.15rem; }
@media (max-width: 400px) { .chips.sizes { grid-template-columns: repeat(2, 1fr); } }
.pnames { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; }
.pn { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pn input { min-width: 0; }
.lobbybox .card { box-shadow: none; border: 0; padding: 0; background: transparent; }
.lobbybox .card > h2 { display: none; }
#pzExtra .label:first-child { margin-top: 4px; }

/* ---------- play layout: the board always fits the screen ---------- */
body[data-screen="play"] { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
body[data-screen="play"] main { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
body[data-screen="play"] #scPlay { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.hud { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 6px; }
.hud .pill { justify-content: space-between; min-width: 0; padding: 5px 10px; transition: box-shadow .3s, border-color .3s, transform .2s; }
.hud .pill .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; text-align: left; }
.hud .pill .sc { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.hud .pill .fire { font-size: .8rem; }
.hud .pill.turn { transform: translateY(-1px); }
.hud.solo { display: flex; flex-wrap: wrap; justify-content: center; }
.hud.solo .pill { justify-content: center; padding: 6px 12px; }
.statusrow { display: flex; gap: 8px; align-items: stretch; }
.statusrow .status { flex: 1; min-width: 0; min-height: 44px; font-size: .95rem; padding: 6px 12px; text-align: center; }
.statusrow .btn.small { min-width: 54px; padding: 6px 12px; }
.status.mine { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; border-color: transparent; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }

.board-wrap { position: relative; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; border-radius: 22px; padding: 6px; display: flex; --tc: var(--accent); }
.board-wrap::before { content: ''; position: absolute; inset: 0; border-radius: 22px; pointer-events: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 55%, transparent); transition: box-shadow .4s; z-index: 0; }
.board-wrap[data-hot="1"]::before { box-shadow: inset 0 0 0 3px var(--tc), inset 0 0 46px color-mix(in srgb, var(--tc) 55%, transparent); animation: hot 1.1s ease-in-out infinite; }
@keyframes hot { 50% { box-shadow: inset 0 0 0 3px var(--tc), inset 0 0 70px color-mix(in srgb, var(--tc) 75%, transparent); } }
.board { margin: auto; display: grid; grid-template-columns: repeat(var(--c, 4), var(--cw, 60px)); grid-auto-rows: var(--ch, 80px); gap: var(--gap, 8px); justify-content: center; position: relative; z-index: 1; }
#fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.banner { position: absolute; left: 50%; top: 50%; z-index: 6; transform: translate(-50%, -50%) scale(.6); opacity: 0; font-weight: 800; font-size: clamp(1.3rem, 6.4vw, 2.3rem); padding: 10px 24px; border-radius: 999px; background: var(--bc, var(--accent)); color: #10182e; pointer-events: none; white-space: nowrap; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); max-width: 94%; overflow: hidden; text-overflow: ellipsis; }
.banner.show { animation: banner 1.05s ease both; }
@keyframes banner { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; } 78% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -62%) scale(1.04); opacity: 0; } }

/* ---------- cards ---------- */
.board[data-theme="animals"] { --bk1: #5be0a1; --bk2: #159a68; --bkd: #0f7a53; --emblem: '🐾'; --cglow: rgba(60, 220, 150, .55); --fbd: #1fb77a; }
.board[data-theme="food"]    { --bk1: #ffb55e; --bk2: #ff5d5d; --bkd: #c93a3a; --emblem: '🍴'; --cglow: rgba(255, 140, 90, .55); --fbd: #ff8c3a; }
.board[data-theme="space"]   { --bk1: #7a5cff; --bk2: #1d1360; --bkd: #4128b5; --emblem: '✦'; --cglow: rgba(150, 110, 255, .65); --fbd: #8f6cff; }
.board[data-theme="sports"]  { --bk1: #4aa3ff; --bk2: #1c4fd1; --bkd: #123b9c; --emblem: '★'; --cglow: rgba(70, 160, 255, .6); --fbd: #2f86ff; }
.cd { position: relative; display: block; width: var(--cw); height: var(--ch); padding: 0; margin: 0; border: 0; background: none; perspective: 900px; border-radius: calc(var(--cw) * .17); font-size: calc(var(--cw) * .5); -webkit-appearance: none; appearance: none; }
.cd .in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.34, 1.35, .5, 1); border-radius: inherit; }
.cd[data-s="1"] .in, .cd[data-s="2"] .in { transform: rotateY(180deg); }
.cd .fc { position: absolute; inset: 0; border-radius: calc(var(--cw) * .17); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; display: grid; place-items: center; }
.cd .bk { background: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, .5) 0 9%, transparent 10%), radial-gradient(circle at 78% 82%, rgba(255, 255, 255, .28) 0 7%, transparent 8%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .13) 0 7px, transparent 7px 14px), linear-gradient(145deg, var(--bk1), var(--bk2)); border: calc(var(--cw) * .05) solid #fff; box-shadow: var(--cd-shadow); }
.cd .bk::after { content: var(--emblem); font-size: calc(var(--cw) * .4); line-height: 1; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .35); opacity: .92; }
body[data-tod="night"] .cd .bk { border-color: var(--bkd); }
.cd .ft { transform: rotateY(180deg); background: var(--ft-bg); color: var(--ft-ink); border: calc(var(--cw) * .05) solid var(--fbd); box-shadow: var(--cd-shadow); font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', system-ui, sans-serif; line-height: 1; }
.cd .ft span { display: block; transform: translateY(2%); }
.cd:hover:not([data-s="1"]):not([data-s="2"]) .in { transform: translateY(-3px); }
.cd:active:not([data-s="1"]):not([data-s="2"]) .in { transform: scale(.97); }
.cd[data-s="2"] .ft { border-color: var(--oc, var(--accent)); background: color-mix(in srgb, var(--oc, var(--accent)) 16%, var(--ft-bg)); box-shadow: 0 0 0 2px var(--oc, var(--accent)), 0 0 18px color-mix(in srgb, var(--oc, var(--accent)) 60%, transparent); }
.cd[data-s="2"] { cursor: default; }
.cd.just { animation: pop .6s cubic-bezier(.3, 1.6, .5, 1); }
.cd.miss { animation: shake .42s .38s; }
@keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.cd:focus-visible { outline: 3px solid var(--accent2); outline-offset: 3px; z-index: 2; }
.board.locked .cd:not([data-s="1"]):not([data-s="2"]) { cursor: not-allowed; }
.board-wrap[data-wait="1"] .cd:not([data-s="2"]) .bk { filter: saturate(.85) brightness(.95); }

/* ---------- short landscape phones ---------- */
@media (max-height: 480px) {
  .top { padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 4px; }
  .brand { font-size: 1.05rem; }
  .icon-btn { width: 38px; height: 38px; }
  .seg button { min-height: 30px; padding: 4px 8px; }
  body[data-screen="play"] main { padding-top: 0; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  body[data-screen="play"] #scPlay { gap: 4px; }
  .hud .pill { padding: 3px 8px; font-size: .78rem; }
  .statusrow .status { min-height: 34px; font-size: .85rem; padding: 2px 10px; }
  .statusrow .btn.small { min-height: 34px; padding: 2px 10px; }
  .board-wrap { padding: 3px; }
}

/* ---------- reduced motion: no 3D flip, cards fade instead ---------- */
@media (prefers-reduced-motion: reduce) {
  .cd .in, .cd[data-s="1"] .in, .cd[data-s="2"] .in { transform: none !important; transition: none !important; }
  .cd .fc { backface-visibility: visible; -webkit-backface-visibility: visible; transition: opacity .2s; }
  .cd .ft { transform: none; opacity: 0; }
  .cd[data-s="1"] .ft, .cd[data-s="2"] .ft { opacity: 1; }
  .cd[data-s="1"] .bk, .cd[data-s="2"] .bk { opacity: 0; }
  .cd.just, .cd.miss, .status.mine, .banner.show, .board-wrap[data-hot="1"]::before { animation: none; }
  .banner.show { opacity: 1; transform: translate(-50%, -50%); }
  .hero-art .hc, .hero-art .hspark { animation: none; }
}

/* ---------- result list ---------- */
.res { display: grid; gap: 8px; margin-top: 10px; text-align: left; }
.resrow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--card2); border: 2px solid transparent; }
.resrow.win { border-color: var(--seatc); background: color-mix(in srgb, var(--seatc) 14%, var(--card2)); }
.resrow .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.resrow b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

/* ---------- header must fit a 320 px phone ---------- */
.brand { min-width: 0; font-size: clamp(1.02rem, 4.6vw, 1.6rem); }
.tabs button { font-size: clamp(.78rem, 3.4vw, .92rem); }
@media (max-width: 400px) {
  .top { padding-left: 8px; padding-right: 8px; gap: 4px; }
  .back { padding: 10px 8px; }
  .seg button { padding: 5px 8px; min-height: 36px; }
  .icon-btn { width: 42px; height: 42px; }
  .tools { gap: 5px; }
}