:root {
  color-scheme: dark;
  --ink: #eaffff;
  --muted: #89a9b8;
  --panel: rgba(5, 28, 42, .78);
  --line: rgba(95, 231, 227, .22);
  --aqua: #53efe1;
  --mint: #79efa8;
  --green: #79efa8;
  --yellow: #ffd55b;
  --blue: #44a7ff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #03111d;
  color: var(--ink);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #03111d; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background:
  radial-gradient(circle at 86% -5%, rgba(25, 182, 176, .22), transparent 34rem),
  radial-gradient(circle at 7% 42%, rgba(31, 106, 202, .18), transparent 30rem),
  linear-gradient(145deg, #041523, #020a12 74%); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.ocean-light { position: fixed; width: 38rem; height: 38rem; border-radius: 50%; filter: blur(100px); opacity: .12; pointer-events: none; }
.ocean-light-one { background: #47fff2; top: -18rem; right: -12rem; }
.ocean-light-two { background: #2e6fff; bottom: -22rem; left: -12rem; }
.shell { width: min(1480px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 100px; position: relative; z-index: 1; }
.hero { display: grid; grid-template-columns: 76px minmax(0, 1fr) 300px; grid-template-rows: auto auto; gap: 12px 22px; align-items: center; padding: 26px; border: 1px solid var(--line); background: linear-gradient(120deg, rgba(7, 35, 52, .94), rgba(5, 22, 35, .75)); border-radius: 28px; box-shadow: 0 30px 90px rgba(0, 0, 0, .32); }
.brand-mark, .hero-copy { grid-row: 1 / 3; }
.brand-mark { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 22px; color: #03111d; font-weight: 1000; font-size: 34px; background: linear-gradient(145deg, var(--aqua), #50a3ff); box-shadow: 0 0 35px rgba(75, 235, 226, .25); }
.eyebrow { margin: 0 0 8px; color: var(--aqua); font-size: 11px; font-weight: 900; letter-spacing: .2em; }
.hero h1 { margin: 0; font-size: clamp(30px, 4vw, 62px); line-height: .98; letter-spacing: -.05em; text-transform: uppercase; }
.lede { max-width: 760px; margin: 13px 0 0; color: var(--muted); line-height: 1.55; }
.identity { min-width: 300px; position: relative; display: flex; gap: 10px; align-items: center; padding: 12px; background: rgba(1, 13, 22, .62); border: 1px solid rgba(126, 241, 218, .2); border-radius: 18px; }
.identity div { min-width: 0; flex: 1; }
.identity small, .identity strong, .identity code { display: block; }
.identity small { color: var(--muted); font-size: 9px; letter-spacing: .14em; font-weight: 900; }
.identity strong { margin-top: 3px; white-space: nowrap; }
.identity code { color: #5fa2b4; font-size: 9px; overflow: hidden; text-overflow: ellipsis; }
.profile-photo { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; overflow: hidden; padding: 0; border-radius: 50%; border: 2px solid var(--aqua); background: linear-gradient(145deg, #0d5262, #176da3); color: white; cursor: pointer; box-shadow: 0 0 22px rgba(83,239,225,.2); }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-photo span { font-size: 21px; font-weight: 1000; }
.identity .identity-copy { min-width: 90px; }
.identity .icon-button { width: auto; min-width: 42px; padding: 0 9px; font-size: 8px; font-weight: 1000; letter-spacing: .06em; }
.identity .identity-reset { min-width: 38px; padding: 0; font-size: 16px; }
.profile-editor { position: absolute; z-index: 5; left: 10px; right: 10px; top: calc(100% + 8px); padding: 12px; border: 1px solid rgba(83,239,225,.35); border-radius: 14px; background: rgba(2,17,28,.98); box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.profile-editor[hidden] { display: none; }
.profile-editor label { display: block; margin-bottom: 6px; color: var(--aqua); font-size: 8px; font-weight: 1000; letter-spacing: .12em; }
.profile-editor > div { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.profile-editor input { min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; outline: none; background: #061c2a; color: var(--ink); font: 800 12px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; }
.profile-editor input:focus { border-color: var(--aqua); box-shadow: 0 0 0 2px rgba(83,239,225,.12); }
.profile-editor button { padding: 0 13px; border: 0; border-radius: 10px; background: linear-gradient(135deg,var(--aqua),var(--mint)); color: #03131b; font-size: 9px; font-weight: 1000; cursor: pointer; }
.profile-editor p { margin: 8px 0 0; color: var(--muted); font-size: 8px; line-height: 1.4; }
.merchant-credential { grid-column: 3; padding: 11px 14px; border: 1px solid rgba(83, 239, 225, .16); border-radius: 15px; background: rgba(1, 13, 22, .44); }
.merchant-credential small, .merchant-credential strong, .merchant-credential code { display: block; }
.merchant-credential small { color: var(--aqua); font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.merchant-credential strong { margin: 3px 0; font-size: 12px; }
.merchant-credential code { color: #5fa2b4; font-size: 8px; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 16px var(--mint); }
.icon-button { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: #0a2637; color: var(--aqua); cursor: pointer; }

.lab-strip { margin: 18px 0; display: flex; gap: 10px; align-items: stretch; }
.lab-strip > div { min-width: 130px; padding: 13px 17px; border: 1px solid var(--line); border-radius: 15px; background: rgba(3, 22, 34, .72); }
.lab-strip b, .lab-strip span { display: block; }
.lab-strip b { color: var(--yellow); font-size: 20px; }
.lab-strip .wallet-stat.mana b { color: #6bdcff; }
.lab-strip .wallet-stat.coin b { color: var(--yellow); }
.lab-strip span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.lab-strip button { margin-left: auto; padding: 0 20px; border-radius: 15px; border: 1px solid rgba(83, 239, 225, .38); background: rgba(11, 75, 86, .35); color: var(--aqua); font-size: 11px; font-weight: 900; letter-spacing: .1em; cursor: pointer; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 12px; }
.filters button { border: 1px solid rgba(111, 171, 191, .18); color: var(--muted); background: rgba(4, 23, 36, .76); border-radius: 999px; padding: 10px 16px; font-size: 12px; font-weight: 800; cursor: pointer; }
.filters button.is-active { color: #04151e; background: var(--aqua); border-color: transparent; }
.status { margin: 8px 0 20px; color: var(--muted); font-size: 12px; }
.status.is-ready { color: var(--mint); }
.status.is-error { color: #ff7c8f; }

.game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.game-card { min-height: 460px; position: relative; overflow: hidden; padding: 18px; display: flex; flex-direction: column; border-radius: 22px; border: 1px solid rgba(91, 189, 202, .2); background: linear-gradient(160deg, rgba(8, 42, 57, .93), rgba(3, 18, 30, .9)); box-shadow: 0 18px 40px rgba(0, 0, 0, .2); animation: card-in .45s both; animation-delay: calc(var(--order) * 35ms); }
.game-card::before { content: ""; position: absolute; inset: auto -45px -60px auto; width: 180px; height: 180px; border-radius: 50%; background: var(--accent, #3fe6dd); opacity: .08; filter: blur(4px); }
.game-card.is-multiplayer { --accent: #ffca5a; border-color: rgba(255, 202, 90, .34); }
.game-card.is-mmo { --accent: #a678ff; border-color: rgba(166, 120, 255, .34); }
.card-top { display: flex; justify-content: space-between; align-items: center; color: #628391; font: 900 9px ui-monospace, monospace; letter-spacing: .1em; }
.card-top b { color: var(--accent, var(--aqua)); }
.game-thumbnail { width: 100%; aspect-ratio: 2 / 3; margin: 14px 0 16px; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: #071522; box-shadow: 0 14px 30px rgba(0, 0, 0, .28); }
.game-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.card-category { margin: 0 0 6px; color: var(--accent, var(--aqua)); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.game-card h2 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.card-description { min-height: 54px; margin: 9px 0 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.mode-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mode-pill { padding: 5px 7px; border: 1px solid rgba(124, 175, 193, .18); border-radius: 999px; color: #7e9eab; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.mode-pill.live { color: var(--yellow); border-color: rgba(255, 213, 91, .32); }
.mode-pill.mmo { color: #c2a6ff; border-color: rgba(194, 166, 255, .3); }
.card-actions { margin-top: auto; display: grid; grid-template-columns: 1fr; gap: 7px; position: relative; z-index: 1; }
.game-card.is-multiplayer .card-actions { grid-template-columns: 1fr; }
.card-actions button { min-height: 42px; border: 0; border-radius: 12px; font-size: 10px; font-weight: 1000; letter-spacing: .08em; cursor: pointer; }
.play-button { background: #102f41; color: #a9c6d2; }
.match-button { color: #17200a; background: linear-gradient(90deg, var(--yellow), #ff9b52); box-shadow: 0 10px 25px rgba(255, 183, 73, .16); }
.pvp-stake-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.pvp-stake-actions .match-button { min-width: 0; padding-inline: 5px; }

.queue-panel { position: fixed; z-index: 1000; inset: 0; min-height: 100dvh; overflow: hidden; color: #fff; background: radial-gradient(circle at 50% 45%, rgba(40, 177, 255, .46), transparent 38%), linear-gradient(180deg, #053794 0%, #057ac2 42%, #0861a9 100%); font-family: Inter, ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; }
.queue-panel[hidden], .matchmaking-view[hidden] { display: none !important; }
.queue-panel::before { content: ""; position: absolute; inset: 0; opacity: .22; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 4px); mix-blend-mode: screen; }
.matchmaking-stars { position: absolute; inset: 6% 0; opacity: .58; background-image: radial-gradient(circle, #74e9ff 0 1.3px, transparent 1.8px), radial-gradient(circle, #ae7cff 0 1px, transparent 1.6px), radial-gradient(circle, #ffcb6d 0 1.1px, transparent 1.7px); background-size: 127px 151px, 173px 139px, 197px 181px; background-position: 11px 9px, 63px 51px, 97px 27px; animation: starsDrift 9s linear infinite; }
.matchmaking-rail { position: absolute; z-index: 2; left: 0; right: 0; height: 50px; background: linear-gradient(180deg, #12327c 0 23%, #24dafa 24% 31%, #a6fbff 32% 36%, #1748a3 37% 45%, #06133a 46% 100%); box-shadow: 0 0 22px rgba(44,224,255,.76), inset 0 -8px 14px rgba(0,0,30,.45); }
.matchmaking-rail-top { top: 0; }
.matchmaking-rail-bottom { bottom: 0; transform: rotate(180deg); filter: hue-rotate(115deg); }
.matchmaking-view { position: relative; z-index: 3; width: min(100%, 590px); height: 100%; min-height: 100dvh; margin: 0 auto; padding: max(94px, calc(env(safe-area-inset-top) + 68px)) 0 max(78px, calc(env(safe-area-inset-bottom) + 58px)); display: flex; flex-direction: column; align-items: center; text-align: center; box-sizing: border-box; }
.doodoo-wordmark { position: relative; margin-top: 9vh; color: #fff; font: 1000 clamp(22px, 5.2vw, 34px)/1 Arial Black, Impact, sans-serif; letter-spacing: -2px; -webkit-text-stroke: 3px #07112b; paint-order: stroke fill; transform: rotate(-5deg); filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.doodoo-wordmark i { position: absolute; right: -13px; top: -8px; width: 13px; height: 17px; border-radius: 60% 10% 60% 10%; background: #ffb925; border: 2px solid #271238; transform: rotate(26deg); }
.matchmaking-game-title { margin: 48px 0 5px; color: #ffe05b; font: 900 clamp(14px, 3.8vw, 20px)/1.1 system-ui, sans-serif; letter-spacing: .035em; text-shadow: 0 2px 7px rgba(40,39,97,.6); text-transform: uppercase; }
.matchmaking-heading { margin: 4px 20px 0; color: #fff; font: 1000 clamp(38px, 10.5vw, 64px)/1.04 system-ui, sans-serif; letter-spacing: -.045em; text-shadow: -4px 4px 0 #ee6c87, 4px 3px 0 #46cff3, 0 8px 14px rgba(8,40,98,.28); }
.doodoo-loader { position: relative; width: min(62vw, 310px); aspect-ratio: 1; margin-top: 40px; display: grid; place-items: center; }
.loader-rays { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from -12deg, #36f2e4 0 5deg, transparent 5deg 15deg, #21baf4 15deg 20deg, transparent 20deg 30deg, #9753ff 30deg 35deg, transparent 35deg 45deg); -webkit-mask: radial-gradient(circle, transparent 0 47%, #000 49% 64%, transparent 66%); mask: radial-gradient(circle, transparent 0 47%, #000 49% 64%, transparent 66%); filter: drop-shadow(0 0 11px rgba(81,79,255,.72)); animation: loaderSpin 2.15s linear infinite; }
.doodoo-mascot { position: relative; width: 42%; height: 34%; border-radius: 56% 44% 48% 42% / 51% 54% 46% 49%; background: linear-gradient(145deg, #fff 15%, #eef1ff 82%); transform: rotate(-4deg); box-shadow: 0 15px 34px rgba(15,40,105,.35), inset -7px -7px 9px rgba(113,121,216,.14); }
.doodoo-mascot::after { content: ""; position: absolute; left: -6%; bottom: 0; width: 31%; height: 49%; border-radius: 64% 30% 58% 56%; background: #f8f8ff; transform: rotate(-17deg); }
.mascot-eye { position: absolute; z-index: 2; top: 43%; width: 12%; aspect-ratio: .8; border-radius: 50%; background: #26185c; box-shadow: inset 2px 1px 0 #fff; }
.mascot-eye.left { left: 32%; }.mascot-eye.right { right: 28%; }
.mascot-mouth { position: absolute; z-index: 2; left: 48%; top: 60%; width: 15%; height: 10%; border: 4px solid #552362; border-top: 0; border-radius: 0 0 50% 50%; }
.doodoo-mascot b, .doodoo-mascot em { position: absolute; z-index: 2; border-radius: 50%; width: 8px; height: 8px; background: #18d7d0; right: 17%; top: 25%; }
.doodoo-mascot em { width: 7px; height: 7px; right: 10%; top: 32%; background: #874ee8; }
.searching-copy, .entering-copy { margin: auto 0 20px; color: #fff; font: 1000 clamp(15px, 4vw, 21px)/1 system-ui, sans-serif; letter-spacing: .025em; text-shadow: 0 3px 7px rgba(6,33,85,.5); }
.searching-copy span, .entering-copy span { color: #ffe054; letter-spacing: .18em; animation: dotPulse 1.1s infinite alternate; }
.waiting-pill { display: flex; align-items: center; gap: 14px; padding: 9px 20px; border-radius: 999px; background: rgba(4,29,78,.76); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); font-weight: 1000; }
.waiting-pill span { font-size: 13px; }.waiting-pill strong { color: #ffe052; font-size: 17px; font-variant-numeric: tabular-nums; }
.queue-progress, .entering-progress { position: relative; width: min(68vw, 400px); height: 7px; margin-top: 36px; padding: 3px; overflow: hidden; border-radius: 999px; background: #061843; box-shadow: 0 1px 0 rgba(255,255,255,.2); }
.queue-progress i, .entering-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #826bff 0%, #43d5fc 45%, #ffe36c 72%, #ff735f 100%); box-shadow: 0 0 11px rgba(93,233,255,.7); transition: width .18s linear; }
.queue-cancel { margin-top: 18px; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; padding: 8px 24px; color: rgba(255,255,255,.8); background: rgba(4,27,72,.34); font-size: 10px; font-weight: 900; cursor: pointer; }
.matched-view .doodoo-wordmark { margin-top: 10vh; }
.matched-heading { font-size: clamp(30px, 8.4vw, 52px); }
.versus-stage { position: relative; width: 100%; height: min(43vh, 365px); margin-top: 54px; }
.match-player { position: absolute; top: 0; width: 68%; height: 64%; box-sizing: border-box; padding: 30px 35px; display: flex; flex-direction: column; gap: 14px; color: #fff; }
.match-player::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 0 80px 0 0; transform: skewX(-8deg); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.local-player { left: -9%; align-items: flex-start; text-align: left; }
.local-player::after { background: linear-gradient(140deg, #466aff, #678cf6); }
.opponent-player { right: -9%; top: 28%; align-items: flex-end; text-align: right; justify-content: flex-end; }
.opponent-player::after { background: linear-gradient(140deg, #ff985d, #ff5968); border-radius: 80px 0 0 0; }
.match-avatar { width: clamp(68px, 19vw, 104px); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 5px solid #fff; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #745af8 42%, #19104d); box-shadow: 0 4px 18px rgba(15,24,77,.42); }
.match-avatar img { width: 100%; height: 100%; object-fit: cover; }.match-avatar span { font-size: 30px; font-weight: 1000; }
.match-avatar.is-bot span { position: relative; width: 62%; height: 50%; border-radius: 58% 42% 52% 45% / 54% 56% 44% 46%; color: transparent; background: #fff; box-shadow: inset -4px -4px 5px rgba(100,108,205,.18); transform: rotate(-4deg); }
.match-avatar.is-bot span::before { content: ""; position: absolute; left: 27%; top: 38%; width: 7px; height: 9px; border-radius: 50%; background: #271b61; box-shadow: 21px 0 0 #271b61; }
.match-avatar.is-bot span::after { content: ""; position: absolute; left: 45%; top: 59%; width: 11px; height: 6px; border: 2px solid #62316f; border-top: 0; border-radius: 0 0 50% 50%; }
.match-player strong { max-width: 75%; overflow: hidden; color: #fff; font-size: clamp(20px, 5vw, 30px); text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 4px 6px rgba(32,36,91,.44); }
.match-player small { padding: 4px 10px; border-radius: 999px; background: rgba(28,22,78,.32); font-size: 10px; font-weight: 1000; }
.pk-mark { position: absolute; z-index: 4; left: 50%; top: 42%; width: 112px; height: 120px; transform: translate(-50%,-50%) rotate(-5deg); font: 1000 76px/1 Arial Black, sans-serif; filter: drop-shadow(0 8px 5px rgba(25,40,102,.3)); }
.pk-mark span, .pk-mark b { position: absolute; -webkit-text-stroke: 4px #fff; paint-order: stroke fill; }.pk-mark span { left: 4px; top: 0; color: #fcff82; }.pk-mark b { right: 0; bottom: 0; color: #ffac2f; }
.entering-copy { margin-top: auto; margin-bottom: 5px; }.entering-progress { margin-top: 28px; }
@keyframes loaderSpin { to { transform: rotate(360deg); } }
@keyframes starsDrift { to { background-position: 138px 160px, 236px 190px, 294px 208px; } }
@keyframes dotPulse { to { opacity: .42; } }

.play-body { height: 100vh; overflow: hidden; background: #01070d; touch-action: none; }
.play-bar { display: none; }
.back-button { color: var(--aqua); text-decoration: none; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.play-bar small, .play-bar strong { display: block; }
.play-bar small { color: var(--muted); font-size: 8px; letter-spacing: .13em; }
.play-bar strong { font-size: 15px; }
/* Matchmaking screens ported from loadingnMatching.zip. */
.queue-panel { --doodoo-title-font: "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; --doodoo-body-font: Inter, system-ui, sans-serif; position: fixed; z-index: 1000; inset: 0; min-width: 320px; min-height: 100dvh; overflow: hidden; color: #fff; background: #000320; }
.queue-panel[hidden], .match-intro-page[hidden] { display: none !important; }
html:has(.queue-panel:not([hidden])), body:has(.queue-panel:not([hidden])) { overflow: hidden; }
.match-intro-page { position: fixed; inset: 0; width: 100%; min-width: 320px; height: 100dvh; max-height: 100dvh; display: grid; place-items: center; color: #fff; overflow: hidden; overscroll-behavior: none; touch-action: none; }
.finding-opponent-page { padding: 0; background: #150064 url("/assets/rodeo/matchmaking/search-backdrop.webp") center / cover no-repeat; }
.finding-opponent-page .match-search-stage { position: relative; width: min(100%, 402px); height: min(100dvh, 877px); container-type: inline-size; text-align: center; }
.finding-opponent-page .match-search-logo { position: absolute; top: 11.17%; left: 50%; width: 168px; height: 42px; transform: translateX(-50%); object-fit: contain; }
.finding-opponent-page .match-search-heading { position: absolute; top: 20.4%; left: 50%; width: 100%; display: grid; gap: 7px; justify-items: center; transform: translateX(-50%); }
.finding-opponent-page .match-search-heading p { margin: 0; color: #33dffd; font: 800 clamp(.72rem, 3.98cqw, 1rem)/18px var(--doodoo-title-font); text-transform: uppercase; }
.finding-opponent-page .match-search-heading h1, .opponent-matched-page .match-pk-heading h1 { position: relative; isolation: isolate; margin: 0; padding: 4px clamp(7px, 2.5cqw, 10px) 8px; color: #eee6fd; font: 900 clamp(1.6rem, 8.7cqw, 2.19rem)/1.1 var(--doodoo-title-font); text-shadow: 0 4px 5px rgba(26,0,84,.55); }
.finding-opponent-page .match-search-heading h1::before, .opponent-matched-page .match-pk-heading h1::before { content: attr(data-text); position: absolute; z-index: -2; inset: 0; box-sizing: border-box; padding: inherit; color: #b433f4; -webkit-text-stroke: 3px #b433f4; paint-order: stroke fill; transform: translateY(clamp(4px,1.5cqw,6px)); pointer-events: none; }
.finding-opponent-page .match-search-heading h1::after, .opponent-matched-page .match-pk-heading h1::after { content: attr(data-text); position: absolute; z-index: -1; inset: 0; box-sizing: border-box; padding: inherit; color: transparent; background: linear-gradient(180deg,#b433f4,#3f08eb); background-clip: text; -webkit-background-clip: text; -webkit-text-stroke: clamp(7px,2.5cqw,10px) transparent; pointer-events: none; }
.finding-opponent-page .match-search-orbit { position: absolute; top: 36.9%; left: 50%; width: 315px; height: 315px; transform: translateX(-50%); }
.finding-opponent-page .match-search-loader { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: matchSearchSpin 1.9s linear infinite; }
.finding-opponent-page .match-search-mascot { position: absolute; top: 50%; left: 50%; width: 147px; height: 146px; transform: translate(-50%,-50%); object-fit: contain; animation: findingOpponentMascotWait 1.6s ease-in-out infinite; }
.finding-opponent-page .match-search-status { display: none; }
.finding-opponent-page .match-search-time { position: absolute; top: 81.2%; left: 50%; display: grid; justify-items: center; gap: 5px; transform: translateX(-50%); white-space: nowrap; }
.finding-opponent-page .match-search-time span { color: #fff; font: 800 18px/22px var(--doodoo-title-font); text-transform: uppercase; }
.finding-opponent-page .match-search-time strong { color: #f58fe9; font: 900 34px/38px var(--doodoo-title-font); font-variant-numeric: tabular-nums; }
.finding-opponent-page .match-search-progress { display: none; }
.finding-opponent-page .match-search-cancel-error { position: absolute; right: 10%; bottom: 10%; left: 10%; margin: 0; color: #ffb8ce; font: 700 12px/1.35 var(--doodoo-body-font); }
.finding-opponent-page .match-search-cancel { position: absolute; bottom: 4.2%; left: 50%; width: min(60%,280px); height: 48px; padding: 0 16px; transform: translateX(-50%); border: 2px solid #92b2fe; border-radius: 24px; color: #fff; font: 900 18px/26px var(--doodoo-title-font); background: #310071; box-shadow: 0 0 30px rgba(153,0,255,.62); cursor: pointer; }
.finding-opponent-page .match-search-cancel:disabled { cursor: wait; opacity: .68; }

.opponent-matched-page { padding: 0; min-width: 0; background: #000320; }
.opponent-matched-page .match-pk-stage { position: relative; width: 100vw; height: 100dvh; container-type: size; background: #000320 url("/assets/rodeo/matchmaking/matched-background.webp") center / 105% 105% no-repeat; overflow: hidden; text-align: center; }
.opponent-matched-page .match-pk-logo { position: absolute; top: 11.2%; left: 50%; width: 55%; height: auto; transform: translateX(-50%); }
.opponent-matched-page .match-pk-heading { position: absolute; top: 20.4%; left: 0; width: 100%; display: grid; gap: 7px; justify-items: center; }
.opponent-matched-page .match-pk-heading span { color: #33dffd; font: 800 clamp(.72rem,3.98cqw,1rem)/18px var(--doodoo-title-font); text-transform: uppercase; }
.opponent-matched-page .match-pk-heading h1 { top: -5px; line-height: 1; }
.opponent-matched-page .match-pk-ready { position: absolute; top: 29.2%; left: 50%; width: 33.1%; height: auto; transform: translateX(-50%); }
.opponent-matched-page .match-pk-card { position: absolute; top: 33.5%; left: 0; width: 100%; height: 30.4%; margin: 0; animation: matchBannerEnter 620ms cubic-bezier(.16,1,.3,1) 160ms both; }
.opponent-matched-page .match-score-side { --match-profile-color: #7668ff; position: absolute; top: 0; width: 37.8%; height: 65.5cqw; padding: 0; color: #fff; }
.opponent-matched-page .match-score-side.is-player { left: 4.2%; animation: matchPkLeftEnter 760ms cubic-bezier(.16,1,.3,1) 240ms both; }
.opponent-matched-page .match-score-side.is-opponent { right: 4.2%; left: auto; --match-profile-color: #ff865f; animation: matchPkRightEnter 760ms cubic-bezier(.16,1,.3,1) 240ms both; }
.opponent-matched-page .match-score-card-art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: contain; }
.opponent-matched-page .match-score-avatar { position: absolute; z-index: 4; top: 25%; width: 55.9%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: linear-gradient(145deg,var(--match-profile-color),#07051f); }
.opponent-matched-page .match-score-side.is-player .match-score-avatar { left: 21.7%; transform: perspective(500px) rotateY(10deg); transform-origin: left center; }
.opponent-matched-page .match-score-side.is-opponent .match-score-avatar { right: 21.7%; transform: perspective(500px) rotateY(-10deg); transform-origin: right center; }
.opponent-matched-page .match-score-avatar img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.opponent-matched-page .match-score-avatar img[hidden], .opponent-matched-page .match-score-avatar span[hidden] { display: none !important; }
.opponent-matched-page .match-score-avatar span { display: grid; width: 100%; height: 100%; place-items: center; color: #fff; font: 900 clamp(1.5rem,8cqw,2.3rem)/1 var(--doodoo-title-font); }
.opponent-matched-page .match-score-copy { position: absolute; z-index: 6; top: 61.5%; left: 0; width: 100%; min-width: 0; text-align: center; }
.opponent-matched-page .match-score-copy strong { display: block; width: 100%; padding: 0 6px; color: #fff; font: 700 clamp(.76rem,3.98cqw,1rem)/normal var(--doodoo-body-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opponent-matched-page .match-score-copy small { display: block; margin-top: 3px; color: #ffe970; font: 800 clamp(.48rem,2.5cqw,.68rem)/1 var(--doodoo-body-font); text-transform: uppercase; }
.opponent-matched-page .match-pk-center { position: absolute; z-index: 8; inset: 0; pointer-events: none; }
.opponent-matched-page .match-pk-emblem { position: absolute; top: 50%; left: 50%; width: 39.8%; height: auto; transform: translate(-50%,-50%); object-fit: contain; animation: matchPkEmblemEnter 760ms cubic-bezier(.16,1,.3,1) 520ms both; }
.opponent-matched-page .match-pk-mascot { position: absolute; top: 66%; left: 5%; width: 35%; height: auto; }
.opponent-matched-page .match-pk-chest { position: absolute; top: 62%; left: 52%; width: 50%; height: auto; object-fit: contain; }
.opponent-matched-page .match-pk-status { position: absolute; top: 85%; left: 0; width: 100%; min-height: 18px; color: #fff; font: 800 clamp(.62rem,3.23cqw,.81rem)/18px var(--doodoo-title-font); text-transform: uppercase; }
.opponent-matched-page .match-pk-status i { display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: #ffe970; animation: matchStatusDot 1s ease-in-out infinite; }
.opponent-matched-page .match-pk-status i:nth-of-type(2) { animation-delay: 120ms; }
.opponent-matched-page .match-pk-status i:nth-of-type(3) { animation-delay: 240ms; }
.opponent-matched-page .match-pk-progress { --match-progress: 0; position: absolute; top: 88%; left: 50%; width: min(76%,307px); height: 38px; padding: 5px; transform: translateX(-50%); border: 3px solid #92b2fe; border-radius: 19px; overflow: hidden; background: #310071; box-shadow: 0 0 30px rgba(153,0,255,.62); }
.opponent-matched-page .match-pk-progress span { display: block; width: 100%; height: 100%; border-radius: 13px; background: linear-gradient(90deg,#1895fc,#fd42de); box-shadow: inset 2px 2px 10px rgba(255,255,255,.88); transform: scaleX(calc(var(--match-progress) * .01)); transform-origin: left center; transition: transform 180ms ease-out; }
.opponent-matched-page .match-pk-progress b { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); color: #fff; font: 800 14px/18px var(--doodoo-title-font); }

@media (min-width:700px) { .opponent-matched-page .match-pk-stage { width: min(430px,calc(100dvh * .459954)); height: min(100dvh,935px); box-shadow: 0 0 42px rgba(78,31,255,.28); } }
@media (max-width:390px) { .opponent-matched-page .match-score-side.is-player .match-score-avatar { transform: perspective(700px) rotateY(5deg); } .opponent-matched-page .match-score-side.is-opponent .match-score-avatar { transform: perspective(700px) rotateY(-5deg); } }
@media (max-height:650px) { .finding-opponent-page .match-search-orbit { width:min(315px,44vh); height:min(315px,44vh); } }
@keyframes matchSearchSpin { to { transform: rotate(360deg); } }
@keyframes findingOpponentMascotWait { 0%,100% { transform:translate(-50%,-50%) rotate(-1deg) scale(1); } 50% { transform:translate(-50%,calc(-50% - 8px)) rotate(1deg) scale(1.02); } }
@keyframes matchStatusDot { 0%,100% { opacity:.35; transform:translateY(0) scale(.82); } 50% { opacity:1; transform:translateY(-2px) scale(1.08); } }
@keyframes matchBannerEnter { from { opacity:0; transform:scale(.88); } to { opacity:1; transform:scale(1); } }
@keyframes matchPkLeftEnter { from { opacity:0; transform:translateX(-42px) rotate(-6deg); } to { opacity:1; transform:translateX(0) rotate(0); } }
@keyframes matchPkRightEnter { from { opacity:0; transform:translateX(42px) rotate(6deg); } to { opacity:1; transform:translateX(0) rotate(0); } }
@keyframes matchPkEmblemEnter { from { opacity:0; transform:translate(-50%,-50%) scale(.55) rotate(-12deg); } to { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0); } }

.match-meta { text-align: right; }
.match-meta span, .match-meta code { display: block; }
.match-meta span { color: var(--yellow); font-size: 10px; font-weight: 900; }
.match-meta code { max-width: 240px; color: #557a8b; font-size: 8px; overflow: hidden; text-overflow: ellipsis; }
.play-bar button { border: 1px solid var(--line); background: #0b2b3c; color: var(--ink); border-radius: 10px; padding: 10px 13px; font-size: 9px; font-weight: 900; cursor: pointer; }
.frame-stage { position: relative; height: 100vh; background: #020a11; touch-action: none; }
#gameFrame { width: 100%; height: 100%; display: block; border: 0; background: #020a11; touch-action: none; }
#gameFrame[hidden] { display: none; }
.merchant-voice{position:absolute;z-index:4;inset:0;pointer-events:none;font-family:Inter,system-ui,sans-serif}.merchant-voice[hidden]{display:none}.voice-roster{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;justify-content:center;gap:8px;width:min(690px,calc(100% - 180px));pointer-events:none}.voice-player{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 24px;align-items:center;gap:7px;min-width:0;flex:1;max-width:240px;height:48px;padding:5px 9px;border:1px solid rgba(71,224,255,.65);border-radius:16px;background:linear-gradient(135deg,rgba(5,25,48,.91),rgba(15,68,111,.86));box-shadow:0 8px 25px rgba(0,0,0,.35);color:#fff}.voice-player.is-rival{border-color:rgba(255,69,139,.65);background:linear-gradient(225deg,rgba(76,10,52,.91),rgba(127,22,74,.86))}.voice-player img,.voice-player .voice-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;display:grid;place-items:center;border:1px solid rgba(255,255,255,.78);background:#145984;font-size:11px;font-weight:1000}.voice-player strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.voice-player small{display:block;color:#8fefff;font-size:7px;letter-spacing:.12em}.voice-player.is-rival small{color:#ff9bc1}.voice-speaking{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;opacity:.25;color:#fff;background:rgba(255,255,255,.12);font-size:12px}.voice-speaking::before{content:"\1F399"}.voice-player.is-speaking .voice-speaking{opacity:1;background:#41e6b2;box-shadow:0 0 0 0 rgba(65,230,178,.7);animation:voicePulse .85s ease-out infinite}.voice-controls{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:flex;gap:8px;pointer-events:auto}.voice-controls button{min-width:70px;height:48px;padding:5px 9px;border:1px solid rgba(102,224,255,.5);border-radius:15px;background:rgba(4,24,40,.9);box-shadow:0 8px 24px rgba(0,0,0,.36);color:#fff;cursor:pointer}.voice-controls button i,.voice-controls button span{display:block;font-style:normal;font-weight:1000}.voice-controls button i{font-size:10px}.voice-controls button span{margin-top:2px;color:#ff879c;font-size:8px}.voice-controls button[aria-pressed="true"]{border-color:#51efc8;background:linear-gradient(135deg,rgba(13,78,91,.94),rgba(18,105,84,.94))}.voice-controls button[aria-pressed="true"] span{color:#7bffd6}.merchant-voice>p{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:calc(max(18px,env(safe-area-inset-bottom)) + 56px);margin:0;max-width:220px;color:#fff;font-size:9px;text-align:right;text-shadow:0 2px 4px #000}.merchant-voice>p:empty{display:none}@keyframes voicePulse{70%{box-shadow:0 0 0 8px rgba(65,230,178,0)}100%{box-shadow:0 0 0 0 rgba(65,230,178,0)}}
.play-wallet { display: none; }
.play-wallet span { min-width: 76px; padding: 5px 9px; border-radius: 9px; background: rgba(16,41,58,.78); }
.play-wallet small, .play-wallet strong { display: block; }
.play-wallet small { color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: .15em; }
.play-wallet strong { margin-top: 2px; color: #6bdcff; font-size: 14px; }
.play-wallet span:last-child strong { color: var(--yellow); }
.frame-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 15px; color: var(--muted); z-index: 2; }
.frame-loading[hidden] { display: none; }
.frame-loading i { width: 58px; height: 58px; border-radius: 50%; border: 2px solid rgba(83, 239, 225, .15); border-top-color: var(--aqua); animation: spin .8s linear infinite; }
.result-panel { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: min(390px, calc(100% - 32px)); padding: 26px; text-align: center; border: 1px solid rgba(83, 239, 225, .5); border-radius: 24px; background: rgba(2, 17, 28, .94); box-shadow: 0 30px 100px #000; }
.result-panel[hidden] { display: none; }
.result-panel small, .result-panel strong { display: block; }
.result-panel small { color: var(--aqua); letter-spacing: .16em; font-size: 9px; }
.result-panel strong { margin: 8px 0 10px; color: var(--yellow); font-size: 38px; }
.result-panel p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.result-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 20px; }
.result-actions[hidden],.result-note[hidden]{display:none!important}
.result-actions button { min-height: 46px; border: 1px solid var(--line); border-radius: 12px; background: #10293a; color: var(--ink); font: 900 10px/1 system-ui,sans-serif; letter-spacing: .05em; cursor: pointer; }
.result-actions button.result-action-primary { border-color: transparent; background: linear-gradient(135deg,#53efe1,#79efa8); color: #03131b; box-shadow: 0 10px 28px rgba(83,239,225,.22); }
.result-actions button.result-action-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.result-actions button:disabled { cursor: wait; opacity: .55; }
.result-panel .result-note { margin-top: 14px; font-size: 10px; }

/* Merchant self-challenge results use the player's real identity and never
   invent an opponent. AI and multiplayer rounds retain the compact result. */
.result-panel.is-solo-result {
  width: min(440px, calc(100% - 28px));
  min-width: 0;
  max-height: calc(100vh - 28px);
  overflow: auto;
  padding: 28px 30px 24px;
  border-color: rgba(146, 78, 255, .72);
  background:
    radial-gradient(circle at 50% 30%, rgba(123, 40, 255, .27), transparent 32%),
    linear-gradient(180deg, rgba(5, 3, 19, .98), rgba(12, 5, 31, .98));
  box-shadow: 0 28px 100px #000, inset 0 0 80px rgba(92, 35, 200, .14);
}
.result-panel.is-solo-result::before {
  content: "";
  position: absolute;
  inset: 11px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(154, 79, 255, .25);
  border-radius: 18px;
}
.solo-result[hidden], .duel-result[hidden], .standard-result[hidden] { display: none; }
.solo-result-title {
  display: block;
  margin: 0 0 24px !important;
  color: #ffd84f !important;
  font: 1000 clamp(42px, 10vw, 64px)/.9 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
  letter-spacing: .035em;
  text-shadow: 0 5px 0 #8c3300, 0 0 20px rgba(255, 211, 67, .55);
  transform: rotate(-1deg);
}
.is-defeat .solo-result-title {
  color: #c178ff !important;
  text-shadow: 0 5px 0 #421574, 0 0 22px rgba(174, 83, 255, .62);
}
.is-draw .solo-result-title {
  color: #70e7ff !important;
  text-shadow: 0 5px 0 #15506f, 0 0 22px rgba(84, 219, 255, .55);
}
.solo-result-player { display: grid; justify-items: center; }
.solo-result-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 142px;
  height: 142px;
  border: 6px solid #ffd84d;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #8ef2ff, #6c26d8 60%, #16092d);
  box-shadow: 0 0 0 7px rgba(255, 214, 67, .18), 0 0 35px rgba(255, 214, 67, .62);
  overflow: hidden;
  color: #fff;
  font: 1000 42px/1 system-ui, sans-serif;
}
.is-defeat .solo-result-avatar {
  border-color: #8f5ac7;
  box-shadow: 0 0 0 7px rgba(146, 83, 205, .14), 0 0 30px rgba(129, 55, 194, .48);
  filter: saturate(.72);
}
.solo-result-avatar img { width: 100%; height: 100%; object-fit: cover; }
.solo-result-badge {
  position: relative;
  z-index: 1;
  min-width: 118px;
  margin-top: -15px;
  padding: 8px 17px;
  border: 2px solid #fff2a7;
  border-radius: 9px;
  background: linear-gradient(#ffd94e, #f08e09);
  box-shadow: 0 6px 0 #8b3e05, 0 10px 20px rgba(0,0,0,.42);
  color: #fff;
  font: 1000 18px/1 Impact, Haettenschweiler, sans-serif;
  letter-spacing: .08em;
  text-shadow: 0 2px 0 #774000;
}
.solo-result-badge[hidden] { display: none; }
.solo-result-name {
  display: block;
  max-width: 90%;
  margin: 18px 0 22px !important;
  overflow: hidden;
  color: #fff !important;
  font: 1000 18px/1.2 system-ui, sans-serif !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.solo-result-summary {
  position: relative;
  padding: 28px 14px 18px;
  border: 1px solid rgba(167, 99, 255, .72);
  border-radius: 20px;
  background: rgba(12, 7, 34, .76);
}
.solo-result-summary h2 {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  padding: 0 18px;
  background: #09051d;
  color: #ffe45d;
  font: 1000 18px/1.2 system-ui, sans-serif;
  transform: translate(-50%, -55%);
  white-space: nowrap;
}
.solo-result-summary > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.solo-result-summary span { padding: 6px 12px; }
.solo-result-summary span + span { border-left: 1px solid rgba(196, 158, 255, .34); }
.solo-result-summary small { color: #ddd5f5 !important; font-size: 9px !important; letter-spacing: .08em !important; }
.solo-result-summary strong { margin: 8px 0 0 !important; color: #ffd640 !important; font-size: 30px !important; }
.solo-result-summary span:last-child strong { color: #b771ff !important; }
.result-panel.is-solo-result .result-actions { margin-top: 18px; }
.result-panel.is-solo-result .result-note { margin-top: 10px; }

/* Merchant 1v1 settlement keeps both real participants visible. The local
   player may occupy either side; the authoritative result chooses the badge. */
.result-panel.is-duel-result {
  width: min(620px, calc(100% - 28px));
  min-width: 0;
  max-height: calc(100vh - 28px);
  overflow: auto;
  padding: 28px 34px 24px;
  border-color: rgba(146, 78, 255, .72);
  background:
    radial-gradient(circle at 50% 34%, rgba(123, 40, 255, .24), transparent 36%),
    linear-gradient(180deg, rgba(5, 3, 19, .98), rgba(12, 5, 31, .98));
  box-shadow: 0 28px 100px #000, inset 0 0 80px rgba(92, 35, 200, .14);
}
.duel-result-title {
  display: block;
  margin: 0 0 26px !important;
  color: #ffd84f !important;
  font: 1000 clamp(42px, 8vw, 64px)/.9 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
  letter-spacing: .035em;
  text-shadow: 0 5px 0 #8c3300, 0 0 20px rgba(255, 211, 67, .55);
}
.is-defeat .duel-result-title {
  color: #c178ff !important;
  text-shadow: 0 5px 0 #421574, 0 0 22px rgba(174, 83, 255, .62);
}
.is-draw .duel-result-title {
  color: #70e7ff !important;
  text-shadow: 0 5px 0 #15506f, 0 0 22px rgba(84, 219, 255, .55);
}
.duel-result-players {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.duel-result-player { display: grid; min-width: 0; justify-items: center; }
.duel-result-avatar {
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  overflow: hidden;
  border: 5px solid #7650a8;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #8ef2ff, #6c26d8 60%, #16092d);
  box-shadow: 0 0 0 7px rgba(137, 80, 201, .15), 0 0 28px rgba(116, 48, 184, .42);
  color: #fff;
  font: 1000 36px/1 system-ui, sans-serif;
}
.duel-result-avatar img { width: 100%; height: 100%; object-fit: cover; }
.duel-result-player.is-winner .duel-result-avatar {
  border-color: #ffd84d;
  box-shadow: 0 0 0 7px rgba(255, 214, 67, .18), 0 0 35px rgba(255, 214, 67, .62);
}
.duel-result-player.is-loser .duel-result-avatar { filter: saturate(.55) brightness(.78); }
.duel-result-badge {
  position: relative;
  z-index: 1;
  min-width: 104px;
  margin-top: -14px;
  padding: 7px 14px;
  border: 2px solid #fff2a7;
  border-radius: 9px;
  background: linear-gradient(#ffd94e, #f08e09);
  box-shadow: 0 6px 0 #8b3e05, 0 10px 20px rgba(0,0,0,.42);
  color: #fff;
  font: 1000 16px/1 Impact, Haettenschweiler, sans-serif;
  letter-spacing: .08em;
  text-shadow: 0 2px 0 #774000;
}
.duel-result-badge[hidden] { display: none; }
.duel-result-name {
  display: block;
  max-width: 100%;
  margin: 17px 0 0 !important;
  overflow: hidden;
  color: #fff !important;
  font: 1000 17px/1.2 system-ui, sans-serif !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.duel-result-vs {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px solid #c47bff;
  border-radius: 50%;
  background: linear-gradient(145deg, #ef3dc9, #6f3ff3);
  box-shadow: 0 0 20px rgba(170, 73, 255, .62);
  color: #fff;
  font: italic 1000 19px/1 system-ui, sans-serif;
}
.duel-result-summary { margin-top: 6px; }
.result-panel.is-duel-result .result-actions { margin-top: 18px; }
.result-panel.is-duel-result .result-note { margin-top: 10px; }

@media (max-width: 480px) {
  .result-panel.is-solo-result { padding: 23px 18px 18px; }
  .solo-result-title { margin-bottom: 18px !important; }
  .solo-result-avatar { width: 118px; height: 118px; }
  .solo-result-name { margin-bottom: 18px !important; }
  .solo-result-summary { padding-top: 25px; }
  .solo-result-summary strong { font-size: 25px !important; }
  .result-panel.is-solo-result .result-actions { grid-template-columns: 1fr; }
  .result-panel.is-duel-result { padding: 23px 14px 18px; }
  .duel-result-title { margin-bottom: 20px !important; }
  .duel-result-players { grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr); gap: 5px; }
  .duel-result-avatar { width: 86px; height: 86px; border-width: 4px; font-size: 25px; }
  .duel-result-vs { width: 36px; height: 36px; font-size: 14px; }
  .duel-result-badge { min-width: 75px; padding: 5px 8px; font-size: 12px; }
  .duel-result-name { font-size: 12px !important; }
  .result-panel.is-duel-result .result-actions { grid-template-columns: 1fr; }
}

@keyframes card-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes radar { to { transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1080px) { .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hero { grid-template-columns: 64px 1fr; grid-template-rows: auto; } .brand-mark, .hero-copy { grid-row: auto; } .brand-mark { width: 64px; height: 64px; } .identity, .merchant-credential { grid-column: 1 / -1; } }
@media (max-width: 760px) { .shell { width: min(100% - 22px, 620px); padding-top: 12px; } .hero { padding: 18px; border-radius: 20px; } .hero h1 { font-size: 34px; } .lede { font-size: 12px; } .lab-strip > div:nth-child(2), .lab-strip > div:nth-child(3) { display: none; } .lab-strip button { padding: 0 12px; } .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .game-card { min-height: 430px; padding: 14px; } .game-card.is-multiplayer .card-actions { grid-template-columns: 1fr; } .match-meta { display: none; } .frame-stage { height: 100vh; } }
@media (orientation: landscape) and (max-height: 620px) {
  .matchmaking-view { width: min(100%, 880px); padding-top: 48px; padding-bottom: 40px; }
  .matchmaking-rail { height: 34px; }
  .doodoo-wordmark, .matched-view .doodoo-wordmark { margin-top: 0; }
  .matchmaking-game-title { margin-top: 10px; }
  .matchmaking-heading { font-size: 34px; }
  .doodoo-loader { width: min(31vh, 190px); margin-top: 6px; }
  .searching-copy { margin-top: 5px; margin-bottom: 8px; }
  .queue-progress { margin-top: 9px; }
  .queue-cancel { margin-top: 8px; }
  .versus-stage { width: min(100%, 700px); height: 44vh; margin-top: 8px; }
  .match-player { height: 75%; padding: 16px 28px; }
  .opponent-player { top: 19%; }
  .match-avatar { width: 58px; }
  .pk-mark { top: 48%; transform: translate(-50%,-50%) rotate(-5deg) scale(.72); }
  .entering-copy { margin-bottom: 0; }
  .entering-progress { margin-top: 8px; }
}
@media (max-width: 470px) { .game-grid { grid-template-columns: 1fr; } .game-card { min-height: 290px; } .identity { min-width: 0; } .lab-strip > div { min-width: 95px; } }
@media (max-width: 480px) and (orientation: portrait) {
  .match-player { width: 72%; padding: 28px; }
  .local-player { left: 0; }
  .opponent-player { right: 0; }
  .match-player strong { max-width: 29vw; font-size: 18px; }
}
@media(max-width:620px){.voice-roster{top:max(6px,env(safe-area-inset-top));width:calc(100% - 14px);gap:4px}.voice-player{grid-template-columns:25px minmax(0,1fr) 19px;height:38px;padding:4px 6px;border-radius:12px}.voice-player img,.voice-player .voice-avatar{width:23px;height:23px;font-size:8px}.voice-player strong{font-size:8px}.voice-player small{font-size:6px}.voice-speaking{width:18px;height:18px;font-size:9px}.voice-controls{right:max(8px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom))}.voice-controls button{min-width:58px;height:42px;border-radius:13px}.merchant-voice>p{right:max(8px,env(safe-area-inset-right));bottom:calc(max(10px,env(safe-area-inset-bottom)) + 49px)}}

/* Merchant multiplayer voice placement: player row first, controls beneath it. */
.voice-speaking{transition:opacity .12s,transform .12s,filter .12s}
.voice-player.is-speaking .voice-speaking{transform:scale(1.1);filter:drop-shadow(0 0 7px #7bffd6);box-shadow:0 0 0 0 rgba(65,230,178,.85);animation-duration:.72s}
.voice-controls{left:max(14px,env(safe-area-inset-left));right:auto;top:calc(max(10px,env(safe-area-inset-top)) + 58px);bottom:auto}
.voice-controls button{height:42px}
.merchant-voice>p{left:max(14px,env(safe-area-inset-left));right:auto;top:calc(max(10px,env(safe-area-inset-top)) + 106px);bottom:auto;text-align:left}
@media(max-width:620px){.voice-controls{left:max(8px,env(safe-area-inset-left));right:auto;top:calc(max(6px,env(safe-area-inset-top)) + 44px);bottom:auto}.voice-controls button{height:36px}.merchant-voice>p{left:max(8px,env(safe-area-inset-left));right:auto;top:calc(max(6px,env(safe-area-inset-top)) + 84px);bottom:auto;text-align:left}}

/* Merchant games own their existing player HUD. Never render a duplicate
   voice roster above it; only the MIC/VOICE switches remain in this layer. */
.merchant-voice .voice-roster{display:none!important}