/* Matching screens share the original background and translucent bubble skins. */
.matching-screen { grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 0; }
.matching-screen[hidden] { display: none !important; }
.matching-screen .match-header { gap: 8px; }
.matching-screen .match-brand { white-space: nowrap; }
.matching-screen .match-controls { gap: 5px; }
.matching-screen .match-controls .control { width: 44px; height: 44px; flex: 0 0 44px; }
.matching-screen .control:disabled { opacity: .35; cursor: default; }
.matching-screen .match-hud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 560px; width: 100%; margin: 20px auto 10px; padding: 12px 0; border-top: 1px solid #c7e5f012; border-bottom: 1px solid #c7e5f012; }
.matching-screen .match-stat { display: flex; flex-direction: column; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.matching-screen .match-stat + .match-stat { border-left: 1px solid #c7e5f012; }
.matching-screen .match-stat > span { font-size: 10px; color: #8ba6b7; letter-spacing: .3px; }
.matching-screen .match-stat strong { font-weight: 500; font-size: 20px; letter-spacing: -.6px; color: #d8ecef; }
.matching-screen .match-stat .is-urgent { color: #ffbaa9; }
.matching-screen .match-arena { min-width: 0; min-height: 0; position: relative; overflow: hidden; touch-action: none; isolation: isolate; }
.matching-screen .match-targets, .matching-screen .match-objects, .matching-screen .match-effects { position: absolute; inset: 0; pointer-events: none; }
.matching-screen .match-targets { z-index: 2; }
.matching-screen .match-objects { z-index: 3; }
.matching-screen .match-effects { z-index: 6; overflow: hidden; }
.matching-screen .match-target { position: absolute; left: 0; top: 0; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: hsl(var(--hue) 80% 83%); pointer-events: auto; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.matching-screen .match-target .bubble-skin { opacity: .8; border-width: 1.5px; }
.matching-screen .match-target::after { content: ''; position: absolute; inset: -5px; border: 1px dashed hsl(var(--hue) 60% 78% / .25); border-radius: 50%; pointer-events: none; transition: border-color .16s, transform .16s; }
.matching-screen .match-symbol { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: Arial, sans-serif; font-size: clamp(23px, 4vw, 34px); font-weight: 400; line-height: 1; pointer-events: none; color: hsl(var(--hue) 85% 88%); text-shadow: 0 0 12px hsl(var(--hue) 70% 70% / .18); }
.matching-screen .match-target .match-symbol { top: 40%; font-size: 30px; }
.matching-screen .match-target-name { position: absolute; top: 65%; left: 0; width: 100%; font-size: 9px; font-weight: 500; letter-spacing: 1px; line-height: 1; text-transform: uppercase; pointer-events: none; }
.matching-screen .match-target:focus-visible { outline: 2px solid #efffff; outline-offset: 8px; }
.matching-screen .match-target.is-over .bubble-skin { filter: brightness(1.6); }
.matching-screen .match-target.is-over::after { border-color: hsl(var(--hue) 80% 80% / .9); transform: scale(1.08); }
.matching-screen.has-selected-bubble .match-target { cursor: crosshair; }
.matching-screen .match-object { min-width: 44px; min-height: 44px; color: #d8ecef; cursor: grab; }
.matching-screen .match-object.is-selected { z-index: 4; cursor: grabbing; }
.matching-screen .match-object.is-selected .bubble-skin { outline: 2px solid #ddfff1a6; outline-offset: 4px; filter: brightness(1.22); }
.matching-screen .match-object .match-symbol { font-size: 25px; }
.matching-screen .match-bonus .bubble-skin { border: 2px solid #ff9c43dc; border-radius: 0; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); background: radial-gradient(ellipse at 28% 18%, #fff8eb66, transparent 42%), radial-gradient(ellipse at 76% 80%, #ff571c55, transparent 65%), radial-gradient(circle at 50% 46%, #ff8b2729 30%, #ff751c66 79%, #ffd2a9b0 98%); box-shadow: inset 2px 3px 6px #ffffff35, inset -4px -4px 10px #ff601c66, 0 0 18px #ff802929; }
.matching-screen .match-bonus .match-symbol { color: #ffe2c4; left: 50%; top: 50%; width: 95%; height: 95%; transform: translate(-50%, -50%); filter: drop-shadow(0 1px 3px #9f370d); }
.matching-screen .bonus-octagon { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linejoin: round; }
.matching-screen .match-center-hint { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px; z-index: 0; pointer-events: none; user-select: none; opacity: .65; }
.matching-screen .match-center-hint > span:first-child { font-size: 10px; color: #83a4b4; letter-spacing: 3px; }
.matching-screen .match-center-hint > span:last-child { font: italic 23px Georgia, serif; color: #7595a3; }
.matching-screen .match-footer { min-height: 29px; padding-top: 10px; font-size: 10px; color: #8da8b6; gap: 8px; }
.matching-screen .match-footer > span:last-child { white-space: nowrap; color: #b6d3d7; font-variant-numeric: tabular-nums; }
.matching-screen .match-overlay { position: absolute; z-index: 10; inset: 0; display: grid; place-items: center; overflow-y: auto; overscroll-behavior: contain; touch-action: auto; padding: 12px 4px; }
.matching-screen .match-overlay[hidden] { display: none; }
.matching-screen .has-match-overlay .match-targets, .matching-screen .has-match-overlay .match-objects { opacity: .12; pointer-events: none; }
.matching-screen .has-match-overlay .match-center-hint { display: none; }
.matching-screen .match-overlay-card { width: min(100%, 400px); position: relative; padding: 23px 22px 12px; border: 1px solid #b5dbe71c; border-radius: 24px; background: linear-gradient(145deg, #142c3ef5, #0b1c28f7); box-shadow: 0 18px 70px #020c132b; text-align: center; }
.matching-screen .match-eyebrow { margin: 0 0 13px; color: #9ab9c7; font-size: 9px; font-weight: 600; letter-spacing: 2.8px; }
.matching-screen .match-overlay h2 { font-size: clamp(27px, 4vw, 38px); font-weight: 400; line-height: 1.13; letter-spacing: -1.2px; margin: 0; color: #e0edf2; }
.matching-screen .match-overlay h2 em { font-family: Georgia, serif; font-weight: 400; color: #b6d8d9; }
.matching-screen .match-overlay-copy { color: #a3bbc7; font-size: 12px; line-height: 1.7; margin: 14px 0; }
.matching-screen .match-overlay-copy strong { color: #c7dddd; font-weight: 500; }
.matching-screen .match-rule-symbols { display: flex; justify-content: center; gap: 13px; margin: 10px 0; }
.matching-screen .match-rule-symbols span { width: 33px; height: 33px; display: grid; place-items: center; color: hsl(var(--hue) 80% 82%); font-size: 24px; border-radius: 50%; border: 1px solid hsl(var(--hue) 80% 78% / .25); }
.matching-screen .match-overlay-rules { font-size: 11px; color: #c2d4db; line-height: 1.8; margin: 12px 0 8px; }
.matching-screen .match-input-help { font-size: 10px; line-height: 1.65; color: #8ca8b8; margin: 8px auto 14px; max-width: 290px; }
.matching-screen .match-overlay-actions { display: flex; flex-direction: column; gap: 7px; }
.matching-screen .match-primary, .matching-screen .match-secondary, .matching-screen .match-text-button { min-height: 44px; width: 100%; padding: 10px 14px; border-radius: 13px; cursor: pointer; touch-action: manipulation; font-size: 12px; font-weight: 600; }
.matching-screen .match-primary { background: #a7e7dd; color: #123741; border: 1px solid #c7fff04a; }
.matching-screen .match-primary:hover { background: #c0f0e7; }
.matching-screen .match-secondary { background: #a7e7dd0a; color: #b9d9de; border: 1px solid #c7fff02a; }
.matching-screen .match-text-button { border: 0; color: #99b6c6; background: transparent; font-weight: 400; }
.matching-screen .match-primary:focus-visible, .matching-screen .match-secondary:focus-visible, .matching-screen .match-text-button:focus-visible { outline: 2px solid #edfff8; outline-offset: 3px; }
.matching-screen .match-result-score { margin: 18px 0 12px; font-size: 44px; font-weight: 400; color: #d9f1eb; letter-spacing: -1.5px; }
.matching-screen .match-result-score span { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .4px; color: #8daebe; }
.matching-screen .match-result-best { font-size: 11px; color: #a4cbc9; margin: 0 0 18px; }
.matching-screen .match-feedback { position: absolute; transform: translate(-50%, -50%); max-width: 190px; white-space: nowrap; font-size: 14px; font-weight: 600; color: #d9fff1; text-shadow: 0 2px 8px #07151f; animation: match-feedback .95s ease-out both; }
.matching-screen .match-feedback.match-warning { color: #f4c6b4; font-size: 12px; }
.matching-screen .match-trail { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--hue) 80% 78% / .5); transform: translate(-50%, -50%); animation: match-trail .35s ease-out both; }
@keyframes match-feedback { 0% { opacity: 0; transform: translate(-50%, 0); } 15%, 55% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -40px); } }
@keyframes match-trail { to { opacity: 0; transform: translate(-50%, -50%) scale(.2); } }
@media (max-width: 600px) {
  .matching-screen .match-hud { margin-top: 12px; padding: 9px 0; }
  .matching-screen .match-stat strong { font-size: 18px; }
  .matching-screen .match-overlay-card { padding: 19px 18px 8px; }
}
@media (max-width: 380px) {
  .matching-screen .match-brand { font-size: 21px; }
  .matching-screen .match-brand .brand-mark { display: none; }
  .matching-screen .match-controls { gap: 3px; }
  .matching-screen .match-target .match-symbol { font-size: 26px; }
  .matching-screen .match-target-name { font-size: 8px; letter-spacing: .5px; }
  .matching-screen .match-footer { font-size: 9px; }
  .matching-screen .match-overlay-card { padding-left: 14px; padding-right: 14px; }
  .matching-screen .match-overlay-copy { font-size: 11px; margin: 10px 0; }
  .matching-screen .match-input-help { margin-bottom: 10px; }
}
@media (max-height: 650px) {
  .matching-screen .match-overlay { padding-top: 4px; padding-bottom: 4px; }
  .matching-screen .match-overlay-card { padding-top: 15px; }
  .matching-screen .match-eyebrow { margin-bottom: 8px; }
  .matching-screen .match-overlay h2 { font-size: 28px; }
  .matching-screen .match-rule-symbols { margin: 7px 0; }
  .matching-screen .match-overlay-rules { margin-top: 8px; }
}
@media (max-height: 450px) and (min-width: 500px) {
  .matching-screen .match-overlay { padding: 4px; }
  .matching-screen .match-overlay-card { padding: 12px 15px 5px; }
  .matching-screen .match-overlay h2 { font-size: 25px; }
  .matching-screen .match-eyebrow { margin-bottom: 5px; }
  .matching-screen .match-rule-symbols { display: none; }
  .matching-screen .match-overlay-copy, .matching-screen .match-overlay-rules { margin: 7px 0; line-height: 1.5; }
  .matching-screen .match-input-help { margin: 6px 0; font-size: 9px; }
  .matching-screen .match-overlay-actions { gap: 2px; }
  .matching-screen .match-result-score { font-size: 32px; margin: 8px 0; }
  .matching-screen .match-result-best { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .matching-screen .match-trail { display: none; }
  .matching-screen .match-feedback { animation: none !important; opacity: 1; }
}

.matching-screen .match-overlay .match-countdown-number { font-size: 88px; line-height: 1.3; font-variant-numeric: tabular-nums; color: #b6e7df; }

@media (max-height: 650px) {
  .matching-screen .match-overlay[data-kind="intro"] .match-rule-symbols,
  .matching-screen .match-overlay[data-kind="intro"] .match-overlay-copy { display: none; }
  .matching-screen .match-overlay[data-kind="intro"] .match-overlay-rules { font-size: 10px; line-height: 1.6; margin: 12px 0 7px; }
  .matching-screen .match-overlay[data-kind="intro"] .match-input-help { font-size: 9px; line-height: 1.5; margin: 7px 0 11px; }
}

/* Preserve the Rune-sized square, with no border and controls at the bottom. */
.matching-screen { display: flex; flex-direction: column; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
.matching-screen .match-header { flex: 0 0 auto; justify-content: center; }
.matching-screen .match-brand { font-size: 22px; }
.matching-screen .match-hud { flex: 0 0 auto; margin-top: 10px; margin-bottom: 0; }
.matching-screen .match-arena { position: absolute; flex: none; outline: none; border: 0; border-radius: 0; background: transparent; }
.matching-screen .match-bottom { margin-top: auto; flex: 0 0 auto; z-index: 3; }
.matching-screen .match-footer { position: absolute; left: var(--match-field-left); top: calc(var(--match-field-end) + 12px); width: var(--match-field-size); padding: 0; min-height: 24px; line-height: 1.5; }
.matching-screen .match-controls { justify-content: center; gap: 16px; }
.matching-screen .match-controls .control { width: 44px; height: 44px; flex: 0 0 44px; }
.matching-screen .match-overlay { inset: var(--match-content-top, 110px) max(12px, env(safe-area-inset-right)) var(--match-content-bottom, 96px) max(12px, env(safe-area-inset-left)); }
.matching-screen .match-target .match-symbol { font-size: clamp(17px, calc(var(--match-field-size) * .09), 30px); }
.matching-screen .match-target-name { font-size: clamp(6px, calc(var(--match-field-size) * .026), 9px); letter-spacing: .5px; }
@media (max-height: 500px) {
  .matching-screen .match-header { display: none; }
  .matching-screen .match-hud { margin-top: 0; padding: 7px 0; }
  .matching-screen .match-stat { gap: 3px; }
  .matching-screen .match-stat strong { font-size: 17px; }
  .matching-screen .match-footer { min-height: 18px; font-size: 9px; }
}

/* Rune-style transient status and persistent bonus reminder below the square. */
.matching-screen .match-footer { top: calc(var(--match-field-end) + 58px * var(--match-field-scale)); flex-direction: column; justify-content: flex-start; gap: calc(10px * var(--match-field-scale)); text-align: center; }
.matching-screen .match-footer > [data-match-help] { display: block; min-height: calc(30px * var(--match-field-scale)); font-size: clamp(10px, calc(20px * var(--match-field-scale)), 18px); color: #efbbce; line-height: 1.5; }

/* Matching-only currency: keep the existing four-stat HUD and square field. */
.matching-screen .match-header { justify-content: space-between; }
.matching-screen .match-wallet { display: flex; align-items: center; gap: 7px; color: #c2e4e3; font-size: 10px; font-variant-numeric: tabular-nums; }
.matching-screen .match-wallet strong { font-size: 14px; font-weight: 500; }
.matching-screen .match-result-diamonds { font-size: 14px; line-height: 1.6; color: #b4e9dd; margin: 10px 0; }
.matching-screen .match-result-diamonds span { font-size: 11px; color: #a3bbc7; }
.matching-screen .match-wallet-note { font-size: 10px; line-height: 1.5; color: #8ca8b8; margin: 10px 0; }
.matching-screen .match-bonus { cursor: pointer; }
.matching-screen .bonus-octagon text { stroke: none; fill: currentColor; font: 500 29px Arial, sans-serif; }
@media (max-width: 380px) {
  .matching-screen .match-wallet { gap: 4px; font-size: 9px; }
  .matching-screen .match-wallet strong { font-size: 12px; }
}

.matching-screen .match-overlay { align-items: safe center; }
.matching-screen .match-how-to { margin: 3px 0 5px; color: #8ca8b8; font-size: 10px; line-height: 1.6; }
.matching-screen .match-how-to summary { min-height: 34px; display: list-item; align-content: center; cursor: pointer; color: #b9d9de; }
.matching-screen .match-how-to summary:focus-visible { outline: 2px solid #ddfff1; border-radius: 5px; }
.matching-screen .match-how-to p { text-align: left; margin: 8px 0; }
.matching-screen .match-stat > span { min-height: 22px; display: flex; align-items: center; text-align: center; }

/* Collection stays in menus and pause screens, never over active play. */
.matching-screen .match-panel-links { display: grid; grid-template-columns: 1fr 1fr; margin-top: 2px; }
.matching-screen .match-panel-links .match-text-button { font-size: 11px; color: #abc6d1; }
.matching-screen .match-how-to summary { min-height: 44px; }
.matching-screen .match-result-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 11px 0; margin: 10px 0 0; border-top: 1px solid #b5dbe71c; border-bottom: 1px solid #b5dbe71c; }
.matching-screen .match-result-summary > div { display: flex; flex-direction: column; gap: 5px; }
.matching-screen .match-result-summary strong { font-size: 20px; color: #b4e9dd; font-weight: 500; font-variant-numeric: tabular-nums; }
.matching-screen .match-result-summary span { font-size: 10px; color: #9ebac7; }
.matching-screen .match-result-balance { font-size: 11px; color: #a3bbc7; margin: 9px 0; }
.matching-screen .match-new-milestone { color: #dacb9f; font-size: 11px; line-height: 1.5; margin: 10px 0; }
.matching-screen .match-tutorial-art { display: flex; align-items: center; justify-content: center; gap: 22px; min-height: 108px; margin-top: 12px; color: #ace7df; font: 34px Arial, sans-serif; }
.matching-screen .tutorial-bubble, .matching-screen .tutorial-target { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid #a2dfd66e; border-radius: 50%; background: radial-gradient(circle at 28% 18%, #e1fff329, transparent 50%), #90d0c808; box-shadow: inset -4px -5px 11px #9befe614; }
.matching-screen .tutorial-target { width: 72px; height: 72px; outline: 1px dashed #a2dfd644; outline-offset: 5px; }
.matching-screen .tutorial-arrow { font-size: 24px; color: #7c9cab; }
.matching-screen .tutorial-bonus { display: grid; place-items: center; width: 65px; height: 65px; font-size: 23px; color: #ffe0b7; background: #e99c3c25; clip-path: polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.matching-screen .tutorial-glow { box-shadow: 0 0 0 2px #9ae8dc88, 0 0 20px #9ae8dc22; }
.matching-screen .match-collection-balance { color: #c1eadd; font-size: 19px; margin: 14px 0; font-variant-numeric: tabular-nums; }
.matching-screen .match-collection-balance > span { font-size: 11px; color: #9cb8c4; }
.matching-screen .match-collection-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid #b5dbe71c; border-radius: 12px; margin: 10px 0; }
.matching-screen .match-collection-tabs button { border: 0; border-radius: 8px; min-height: 44px; color: #9cb8c4; font-size: 11px; background: transparent; cursor: pointer; }
.matching-screen .match-collection-tabs button[aria-selected="true"] { background: #acd8d51a; color: #d1e9e6; }
.matching-screen .match-collection-body { max-height: clamp(132px, calc(100dvh - 455px), 280px); overflow-y: auto; overscroll-behavior: contain; text-align: left; scrollbar-width: thin; scrollbar-color: #789cac55 transparent; }
.matching-screen .match-theme-list { display: grid; gap: 6px; padding: 0 2px; }
.matching-screen .match-theme-choice { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 63px; padding: 9px 12px; border: 1px solid #bedbe517; border-radius: 12px; background: #89bbd006; color: #c7dce3; text-align: left; cursor: pointer; }
.matching-screen .match-theme-name { display: flex; flex: 1; flex-direction: column; gap: 4px; font-size: 12px; }
.matching-screen .match-theme-name small { font-size: 10px; color: #8faebb; }
.matching-screen .match-theme-view { font-size: 10px; color: #a7cece; }
.matching-screen .match-theme-swatch { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--theme-accent); border-radius: 50%; color: #afe5e1; font-size: 20px; background: #9cdfd908; box-shadow: 0 0 12px var(--theme-shadow); }
.matching-screen .match-collection-note, .matching-screen .match-lifetime-help { font-size: 10px; line-height: 1.6; color: #8ca8b8; margin: 10px 0; }
.matching-screen .match-lifetime-help summary { min-height: 44px; align-content: center; cursor: pointer; color: #b3cbd3; }
.matching-screen .match-lifetime-help p { text-align: left; }
.matching-screen .match-milestone { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid #b5dbe714; }
.matching-screen .match-milestone-mark { font-size: 24px; color: #718f9d; width: 26px; flex: 0 0 26px; text-align: center; }
.matching-screen .match-milestone > div { display: grid; gap: 4px; flex: 1; }
.matching-screen .match-milestone strong { font-size: 11px; font-weight: 500; color: #acc6d1; }
.matching-screen .match-milestone span:not(.match-milestone-mark), .matching-screen .match-milestone small { font-size: 9px; line-height: 1.5; color: #7f9aa9; }
.matching-screen .match-milestone small { min-width: 44px; text-align: right; }
.matching-screen .match-milestone progress { appearance: none; width: 100%; height: 3px; border: 0; border-radius: 3px; background: #9fc9d31b; }
.matching-screen .match-milestone progress::-webkit-progress-bar { background: #9fc9d31b; border-radius: 3px; }
.matching-screen .match-milestone progress::-webkit-progress-value { background: #8fcbbd; border-radius: 3px; }
.matching-screen .match-milestone progress::-moz-progress-bar { background: #8fcbbd; border-radius: 3px; }
.matching-screen .match-milestone.is-unlocked .match-milestone-mark, .matching-screen .match-milestone.is-unlocked small { color: #d5c48b; }
.matching-screen .match-milestone.is-unlocked strong { color: #d0e2e1; }
.matching-screen .match-theme-sample { height: 126px; display: flex; align-items: center; justify-content: center; margin: 14px 0 0; }
.matching-screen .match-preview-bubble { display: grid; place-items: center; width: 77px; height: 77px; font-size: 36px; color: #b8f2eb; border: 2px solid var(--theme-accent); border-radius: 50%; background: radial-gradient(circle at 28% 18%, #e1fff34d, transparent 50%), #90d0c808; box-shadow: inset -5px -6px 15px #9befe620, 0 0 25px var(--theme-shadow); }
.matching-screen .match-preview-trail { display: flex; gap: 9px; align-items: center; margin-right: 12px; }
.matching-screen .match-preview-trail i { width: 8px; height: 8px; border-radius: 50%; background: var(--theme-accent); box-shadow: 0 0 7px var(--theme-shadow); }
.matching-screen .match-preview-trail i:nth-child(1) { opacity: .15; transform: scale(.5); }
.matching-screen .match-preview-trail i:nth-child(2) { opacity: .35; transform: scale(.65); }
.matching-screen .match-preview-trail i:nth-child(3) { opacity: .6; transform: scale(.85); }
.matching-screen .match-collection-message { font-size: 11px; line-height: 1.6; color: #a9c9d0; min-height: 36px; margin: 10px 0 14px; }
.matching-screen .match-primary:disabled { opacity: .45; cursor: default; }
.matching-screen .match-collection-tabs button:focus-visible, .matching-screen .match-theme-choice:focus-visible, .matching-screen .match-lifetime-help summary:focus-visible { outline: 2px solid #d5f7ef; outline-offset: 2px; }
.matching-screen[data-match-theme="default"], .matching-screen [data-theme="default"] { --theme-accent: #91c9cb60; --theme-shadow: transparent; }
.matching-screen[data-match-theme="lagoon"], .matching-screen [data-theme="lagoon"] { --theme-accent: #9ae6db; --theme-shadow: #9ae6db25; }
.matching-screen[data-match-theme="twilight"], .matching-screen [data-theme="twilight"] { --theme-accent: #cbb5ed; --theme-shadow: #cbb5ed25; }
.matching-screen[data-match-theme="aurora"], .matching-screen [data-theme="aurora"] { --theme-accent: #ead49b; --theme-shadow: #ead49b25; }
.matching-screen:not([data-match-theme="default"]) .match-object:not(.match-bonus)::after { content: ''; position: absolute; inset: 3px; border: 1px solid var(--theme-accent); border-radius: 50%; opacity: .7; pointer-events: none; box-shadow: 0 0 9px var(--theme-shadow); }
.matching-screen:not([data-match-theme="default"]) .match-trail { background: var(--theme-accent); box-shadow: 0 0 7px var(--theme-shadow); }
@media (max-height: 650px) {
  .matching-screen .match-tutorial-art { min-height: 82px; margin-top: 8px; }
  .matching-screen .match-theme-sample { height: 96px; }
  .matching-screen .match-overlay[data-kind="collection"] h2 { font-size: 26px; }
  .matching-screen .match-collection-balance { margin: 10px 0; }
  .matching-screen .match-overlay[data-kind="result"] .match-overlay-copy { margin: 8px 0; }
  .matching-screen .match-result-summary { padding: 8px 0; }
}
@media (max-height: 450px) and (min-width: 500px) {
  .matching-screen .match-tutorial-art { min-height: 66px; }
  .matching-screen .match-theme-sample { height: 80px; }
  .matching-screen .match-collection-body { max-height: 132px; }
}
.matching-screen .match-collection-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
.matching-screen .match-collection-heading h2 { font-size: 26px; }
.matching-screen .match-collection-heading .match-collection-balance { margin: 0; font-size: 17px; text-align: right; flex: 0 0 auto; }
.matching-screen .match-collection-heading .match-collection-balance span { display: block; font-size: 9px; margin-top: 3px; }
.matching-screen .match-preview-assurance { color: #8ca8b8; font-size: 10px; margin: -5px 0 8px; }
@media (max-height: 650px) {
  .matching-screen .match-theme-sample { height: 80px; margin-top: 9px; }
  .matching-screen .match-collection-message { min-height: 28px; margin: 8px 0 10px; }
  .matching-screen .match-overlay[data-kind="theme-preview"] .match-overlay-copy { font-size: 11px; margin: 8px 0; line-height: 1.5; }
}
/* Blue gem currency is separate from score; flight effects never intercept input. */
.matching-screen .match-diamond-icon { width: 16px; height: 18px; display: inline-block; vertical-align: -3px; flex: 0 0 auto; filter: drop-shadow(0 0 5px #43bfff20); }
.matching-screen .match-currency-value { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.matching-screen .match-wallet .match-diamond-icon { width: 12px; height: 14px; }
.matching-screen .match-collection-balance .match-diamond-icon { width: 18px; height: 20px; }
.matching-screen .match-result-currency { display: inline-flex; justify-content: center; align-items: center; gap: 5px; }
.matching-screen .match-result-balance .match-diamond-icon { width: 12px; height: 14px; }
.matching-screen .match-currency-effects { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 9; }
.matching-screen .match-diamond-flight { position: absolute; left: 0; top: 0; display: flex; gap: 5px; align-items: center; width: max-content; pointer-events: none; color: #bcecff; font: 500 13px Arial, sans-serif; filter: drop-shadow(0 2px 5px #05203888); animation: match-diamond-flight .75s cubic-bezier(.3,.05,.45,1) both; will-change: transform, opacity; }
.matching-screen .match-diamond-flight .match-diamond-icon { width: 23px; height: 26px; }
@keyframes match-diamond-flight {
  0% { opacity: 0; transform: translate(calc(var(--flight-from-x) - 20px), calc(var(--flight-from-y) - 20px)) scale(.85); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--flight-to-x) - 20px), calc(var(--flight-to-y) - 12px)) scale(.65); }
}
@media (max-height: 650px) { .matching-screen .match-theme-sample { height: 66px; } }
@media (max-width: 380px) {
  .matching-screen .match-currency-value { gap: 3px; }
  .matching-screen .match-stat .match-diamond-icon { width: 13px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) { .matching-screen .match-diamond-flight { display: none; animation: none; } }
/* Level stays in the requested footer position, separate from transient notices. */
.matching-screen .match-wallet-short-label { display: none; }
.matching-screen .tutorial-diamond .match-diamond-icon { width: 38px; height: 42px; }
@media (max-height: 650px) {
  .matching-screen .match-overlay[data-kind="tutorial"] .match-tutorial-art { min-height: 64px; margin-top: 6px; }
  .matching-screen .match-overlay[data-kind="tutorial"] .match-overlay-copy { margin: 9px 0; line-height: 1.5; }
  .matching-screen .match-overlay[data-kind="tutorial"] .match-input-help { line-height: 1.45; margin: 7px 0; }
  .matching-screen .match-overlay[data-kind="tutorial"] .match-overlay-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .matching-screen .match-overlay[data-kind="tutorial"] .match-primary,
  .matching-screen .match-overlay[data-kind="tutorial"] .match-text-button { grid-column: 1 / -1; }
  .matching-screen .match-overlay-actions:has([data-tutorial-action="back"]) .match-primary { grid-column: 2; grid-row: 1; }
  .matching-screen [data-tutorial-action="back"] { grid-column: 1; grid-row: 1; }
  .matching-screen .match-result-summary { gap: 9px; margin-top: 12px; }
}
@media (max-width: 380px) {
  .matching-screen .match-wallet-label { display: none; }
  .matching-screen .match-wallet-short-label { display: inline; }
}

.matching-screen .match-footer > .match-bonus-reminder { color: #e6a76c; font-size: clamp(6px, calc(13px * var(--match-field-scale)), 11px); letter-spacing: .35px; white-space: normal; }

/* Rune's matching-only score awards: white flights coexist; yellow is latest only. */
.matching-screen .match-score-effects { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 8; font-family: Arial, sans-serif; font-weight: 400; }
.matching-screen .match-score-rays { stroke: #fff505; }
.matching-screen.has-score-effects .match-center-hint > span:last-child { visibility: hidden; }

/* Reconstructed expanded field: measured HUD/receipt bounds drive its geometry.
   Footer is independent of the arena so measuring it cannot create a resize loop. */
.matching-screen { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.matching-screen .match-footer { position: relative; left: auto; top: auto; width: 100%; margin-top: auto; margin-bottom: 8px; flex: 0 0 auto; min-height: 36px; gap: 2px; }
.matching-screen .match-footer > [data-match-help] { min-height: 18px; font-size: 12px; line-height: 18px; }
.matching-screen .match-footer > .match-bonus-reminder { font-size: 10px; line-height: 14px; }
.matching-screen .match-bottom { margin-top: 0; }
.matching-screen .match-controls { min-height: 44px; }
@media (orientation: landscape) and (max-height: 500px) {
  .matching-screen { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .matching-screen .match-hud { padding: 5px 0; }
  .matching-screen .match-stat > span { min-height: 16px; font-size: 9px; }
  .matching-screen .match-stat strong { font-size: 16px; line-height: 19px; }
  .matching-screen .match-footer { min-height: 24px; gap: 0; }
  .matching-screen .match-footer > [data-match-help] { min-height: 12px; font-size: 10px; line-height: 12px; }
  .matching-screen .match-footer > .match-bonus-reminder { font-size: 9px; line-height: 12px; }
}

/* Aqua stays green-turquoise across its entire skin, rather than sharing
   the original iridescent blue/violet rim with Blue. The existing circle cue,
   name, hit area and translucent/glossy treatment remain unchanged. */
.matching-screen [data-match-color="aqua"] .bubble-skin {
  border-color: hsl(162 82% 76% / .72);
  background: radial-gradient(ellipse at 28% 18%, #ffffff28 0%, #ffffff02 32%, transparent 50%), radial-gradient(ellipse at 76% 80%, hsl(155 85% 62% / .22), transparent 65%), radial-gradient(circle at 50% 46%, hsl(162 78% 58% / .08) 37%, hsl(162 85% 65% / .12) 55%, hsl(162 85% 70% / .24) 79%, hsl(162 80% 80% / .66) 98%);
  box-shadow: inset 2px 3px 6px #ffffff23, inset -4px -4px 9px hsl(155 85% 62% / .32), 0 0 18px hsl(162 80% 60% / .06);
}

/* Reconstructed v7: internal violet identity stays stable, visual Blue stays blue. */
.matching-screen [data-match-color="violet"] .bubble-skin {
  background: radial-gradient(ellipse at 28% 18%, #ffffff28, transparent 50%), radial-gradient(ellipse at 76% 80%, hsl(220 95% 65% / .15), transparent 65%), radial-gradient(circle at 50% 46%, transparent 37%, hsl(230 85% 70% / .16) 79%, hsl(225 80% 80% / .55) 98%);
  box-shadow: inset 2px 3px 6px #ffffff23, inset -4px -4px 9px hsl(220 90% 65% / .25), 0 0 18px hsl(230 80% 60% / .045);
}
.matching-screen .match-overlay[data-kind="countdown"] { left: var(--match-field-left); top: var(--match-field-top); width: var(--match-field-size); height: var(--match-field-height); bottom: auto; right: auto; padding: 8px; }
.matching-screen .match-overlay[data-kind="countdown"] .match-eyebrow { font-size: clamp(17px, 4vw, 24px); letter-spacing: .3px; color: #bdeeff; font-weight: 600; }