/* Memo Opal — game-specific styles (shell handles frame, buttons, modals) */
:root { --accent: #7c5cff; --accent-2: #ff6fb5; --accent-3: #3fd6f5;
  --opal-sheen: conic-gradient(from 210deg at 30% 30%, #b9a8ff, #ffb3d9, #9ef0ff, #c8ffd9, #fff3b0, #b9a8ff); }

/* ---------- Home ---------- */
.home { width: 100%; max-width: 460px; min-height: 100%; display: flex; flex-direction: column; align-items: center; }
.hero { position: relative; width: min(46vw, 210px, 26vh); aspect-ratio: .87; margin: 1vh auto 0; }
.hero-glow { position: absolute; inset: 8% 4% 12%; border-radius: 50%; background: var(--opal-sheen); filter: blur(34px); opacity: .7; animation: spin 14s linear infinite; }
.hero-opal { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: float 3.6s ease-in-out infinite; transition: opacity .9s; }
.hero-opal.b { opacity: 0; }
.hero-shadow { position: absolute; left: 22%; right: 22%; bottom: -6%; height: 8%; border-radius: 50%; background: rgba(40, 20, 90, .22); filter: blur(6px); animation: shadow 3.6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-9%) rotate(-3deg); } }
@keyframes shadow { 50% { transform: scaleX(.75); opacity: .5; } }
@keyframes spin { to { transform: rotate(360deg); } }

.logo-title { margin: 3vh 0 4px; font: 700 clamp(40px, 11vw, 60px)/1 var(--font-display); letter-spacing: -.01em; }
.logo-title span { background: linear-gradient(100deg, var(--accent), var(--accent-2) 45%, var(--accent-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tagline { margin: 0 0 3vh; color: var(--ink-2); font-weight: 700; text-align: center; }
.install-btn { display: none; }
.ig-can-install .install-btn { display: inline-flex; }
.ig-native .install-btn { display: none !important; }

/* ---------- Sub-pages ---------- */
.page-head { width: min(720px, 100%); display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 14px; }
.page-head h2 { margin: 0; font: 700 30px/1 var(--font-display); }
.page-sub { width: min(720px, 100%); margin: -6px 0 14px; color: var(--ink-2); font-weight: 600; }

.level-grid { width: min(720px, 100%); display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding-bottom: 20px; }
.level { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px 16px; min-height: 118px;
  border: 0; border-radius: var(--r-lg); cursor: pointer; text-align: left; background: var(--surface-solid);
  box-shadow: 0 5px 0 var(--lip), var(--shadow); transition: transform .12s, box-shadow .12s; }
.level:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--lip), var(--shadow); }
.level .n { font: 700 34px/1 var(--font-display); background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.level .nm { font-weight: 800; font-size: 15px; }
.level .meta { font-size: 13px; color: var(--ink-3); font-weight: 700; }
.level .ig-stars { font-size: 18px; margin-top: auto; }
.level.locked { cursor: not-allowed; opacity: .55; box-shadow: 0 3px 0 var(--lip); }
.level.locked .n { background: none; color: var(--ink-3); }
.level .lock { position: absolute; top: 14px; right: 14px; width: 22px; color: var(--ink-3); }
.level.next::after { content: "Next"; position: absolute; top: 12px; right: 12px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

.opal-grid { width: min(720px, 100%); display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; padding-bottom: 20px; }
.opal-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.opal-tile img { border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,0)); width: 70%; aspect-ratio: .87; object-fit: contain; }
.opal-tile span { font-size: 12px; font-weight: 800; text-align: center; line-height: 1.15; }
.opal-tile.locked img { filter: brightness(0) opacity(.18); }
.opal-tile.locked span { color: var(--ink-3); }

/* ---------- HUD ---------- */
.game-screen { padding: 0 10px 10px; overflow: hidden; }
.hud { width: min(980px, 100%); flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 2px 10px; }
.hud-level { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
.hud-level b { font: 700 22px/1 var(--font-display); color: var(--accent); }
.hud-level span { font: 700 17px/1.1 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-stats { display: flex; gap: 6px; }
.hud-stats .ig-chip { height: 34px; padding: 0 11px; font-size: 14px; }
.hud-btns { display: flex; gap: 6px; }
.hud-btns .ig-icon-btn[disabled] { opacity: .35; pointer-events: none; }
@media (max-width: 560px) {
  .hud-level { flex-basis: calc(100% - 110px); }
  .hud-stats { order: 3; width: 100%; justify-content: space-between; }
  .hud-stats .ig-chip { flex: 1; justify-content: center; }
}

/* ---------- Board & cards ---------- */
.board-wrap { position: relative; flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; }
.board { display: grid; grid-template-columns: repeat(var(--cols), var(--cw)); gap: var(--gap); perspective: 900px; }
.card { width: var(--cw); height: calc(var(--cw) / .8); padding: 0; border: 0; background: none; cursor: pointer; border-radius: calc(var(--cw) * .16);
  animation: deal .45s var(--ease-pop) both; animation-delay: calc(var(--i) * 14ms); }
.card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.card-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .42s var(--ease-soft); }
.card.up .card-in, .card.matched .card-in { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: calc(var(--cw) * .16); }
/* Back: the IGAW card back — opal sheen + brand gem */
.face.back { background: var(--opal-sheen); box-shadow: 0 3px 0 var(--lip), 0 6px 16px -8px rgba(60, 30, 140, .45); overflow: hidden; }
.face.back::before { content: ""; position: absolute; inset: 7%; border-radius: calc(var(--cw) * .11); border: max(1.5px, calc(var(--cw) * .025)) solid rgba(255, 255, 255, .75);
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.55) 0 1.5px, transparent 2px) 0 0 / calc(var(--cw) * .16) calc(var(--cw) * .16); }
.face.back::after { content: ""; position: absolute; inset: 0; background: url(../shell/igaw-logo.svg) center / 40% no-repeat; opacity: .92; filter: drop-shadow(0 2px 3px rgba(60,30,140,.35)); }
/* Front: pearl card with Opal */
.face.front { transform: rotateY(180deg); display: grid; place-items: center; background: linear-gradient(160deg, #ffffff, #efeaf8);
  box-shadow: 0 3px 0 rgba(34,29,58,.14), 0 6px 16px -8px rgba(60,30,140,.35); }
.face.front img { width: 82%; height: 82%; object-fit: contain; pointer-events: none; }
.card.matched { cursor: default; }
.card.matched .face.front { box-shadow: 0 0 0 max(2px, calc(var(--cw) * .03)) var(--good), 0 0 18px 2px color-mix(in srgb, var(--good) 45%, transparent); animation: pop .5s var(--ease-pop); }
.card.matched.done .face.front { box-shadow: 0 0 0 max(2px, calc(var(--cw) * .025)) color-mix(in srgb, var(--good) 45%, transparent); }
.card.miss .card-in { animation: shake .4s; }
@keyframes deal { from { opacity: 0; transform: translateY(18px) scale(.8); } }
@keyframes pop { 40% { transform: scale(1.1); } }
@keyframes shake { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }

/* Match callout (Opal's name) */
.callout { position: absolute; left: 50%; top: 4px; transform: translate(-50%, -8px); opacity: 0; pointer-events: none; z-index: 5;
  padding: 8px 16px; border-radius: 999px; background: var(--surface-solid); box-shadow: var(--shadow); font: 700 16px/1 var(--font-display); white-space: nowrap;
  transition: opacity .25s, transform .35s var(--ease-pop); }
.callout.on { opacity: 1; transform: translate(-50%, 0); }
.callout.preview { background: var(--ink); color: var(--bg); }

/* ---------- Result sheet ---------- */
.result-stars { display: flex; justify-content: center; gap: 8px; font-size: 54px; margin: 2px 0 8px; }
.result-stars svg { width: 1em; height: 1em; color: var(--ink-3); opacity: .35; transform: scale(.6); transition: transform .5s var(--ease-pop), color .3s, opacity .3s; }
.result-stars svg.on { color: var(--gold); opacity: 1; transform: scale(1); filter: drop-shadow(0 3px 0 rgba(0,0,0,.12)); }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 4px; }
.result-stats div { padding: 10px 6px; border-radius: var(--r-md); background: var(--surface-2); text-align: center; }
.result-stats b { display: block; font: 700 22px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.result-stats small { color: var(--ink-3); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.result-score { text-align: center; font: 700 44px/1 var(--font-display); margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.result-note { text-align: center; font-weight: 800; color: var(--accent); min-height: 1.3em; margin: 6px 0 0; }
.result-new { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.result-new img { width: 40px; aspect-ratio: .87; object-fit: contain; animation: deal .5s var(--ease-pop) both; }

/* Help sheet */
.howto { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.howto li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; font-weight: 700; color: var(--ink-2); line-height: 1.4; }
.howto li::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-family: var(--font-display);
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

/* Scores sheet */
.score-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 4px; scrollbar-width: none; }
.score-tabs button { flex: none; height: 36px; min-width: 42px; padding: 0 12px; border-radius: 99px; border: 0; cursor: pointer; font-weight: 800; background: var(--surface-2); }
.score-tabs button[aria-pressed="true"] { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }