:root {
  --ink: #171816;
  --cream: #f1f0e8;
  --acid: #d8ff43;
  --orange: #ff6b35;
  --line: rgba(23, 24, 22, 0.17);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--cream); font-family: "Manrope", sans-serif; overflow-x: hidden; transition: background-color 1.35s ease; }
button, input { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.noise { position: fixed; inset: 0; opacity: .18; pointer-events: none; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); }

.header { height: 88px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 5vw, 76px); border-bottom: 1px solid var(--line); background: var(--cream); transition: opacity .45s ease, transform .45s ease, visibility .45s, border-color .45s ease; }
.header > * { transition: opacity 1.05s ease, transform 1.35s cubic-bezier(.62,0,.32,1), filter 1.1s ease; }
.logo { color: var(--ink); text-decoration: none; font: 700 25px/1 "Unbounded"; letter-spacing: -1.5px; }
.logo span { color: var(--orange); }
.game-info-nav { margin-left: auto; margin-right: 28px; display: flex; align-items: stretch; }
.header-tab { min-height: 42px; padding: 0 15px; display: inline-flex; align-items: center; border: 1px solid var(--ink); border-right: 0; background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; transition: background .18s, color .18s; }
.header-tab:last-child { border-right: 1px solid var(--ink); }
.header-tab:hover { background: var(--ink); color: var(--cream); }
.header-tab-short { display: none; }
.user-nav { display: flex; align-items: center; gap: 18px; }
.audio-toggle { padding: 7px 10px; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.audio-toggle:hover { border-color: var(--orange); color: var(--orange); }
.audio-toggle[aria-pressed="true"] { opacity: .48; }
.admin-link { color: inherit; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; text-underline-offset: 4px; }
.user-pill { min-width: 0; display: flex; align-items: center; gap: 9px; }
.user-identity { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.user-identity strong { max-width: 150px; overflow: hidden; font-size: 11px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.user-identity .nickname-edit-button { margin: 0; padding: 0; border: 0; background: transparent; color: #77786f; font-size: 7px; letter-spacing: .45px; line-height: 1.1; }
.user-identity .nickname-edit-button:hover { background: transparent; color: var(--orange); }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #4fc35d; box-shadow: 0 0 0 4px rgba(79,195,93,.15); }
.ghost-button { padding: 11px 18px; border: 1px solid var(--ink); background: transparent; border-radius: 999px; cursor: pointer; font-weight: 700; }
.ghost-button:hover { background: var(--ink); color: var(--cream); }

body.rank-modal-open { overflow: hidden; }
.rank-modal { position: fixed; inset: 0; z-index: 100; padding: 20px; display: grid; place-items: center; }
.rank-modal-backdrop { position: absolute; inset: 0; background: rgba(10,11,9,.78); backdrop-filter: blur(5px); }
.rank-modal-card { width: min(1040px, 100%); max-height: calc(100svh - 40px); position: relative; z-index: 1; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: var(--cream); box-shadow: 14px 14px 0 var(--orange); }
.rank-modal-card > header { min-height: 76px; padding: 18px 22px 18px 30px; position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: var(--cream); }
.rank-modal-card h2 { margin: 0; font: 700 clamp(23px, 3vw, 34px)/1 "Unbounded"; letter-spacing: -1.5px; }
.rank-modal-close { width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid var(--ink); background: transparent; cursor: pointer; font-size: 27px; line-height: 1; }
.rank-modal-close:hover { background: var(--orange); }
.rank-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rank-guide-section { min-width: 0; padding: 30px; }
.rank-guide-section + .rank-guide-section { border-left: 1px solid var(--line); }
.rank-guide-section h3 { margin: 0 0 15px; color: var(--orange); font: 700 24px "Unbounded"; }
.rank-guide-section > p { min-height: 88px; margin: 0 0 20px; color: #55564f; font-size: 13px; line-height: 1.55; }
.rank-guide-section table { width: 100%; border-collapse: collapse; font-size: 11px; }
.rank-guide-section th, .rank-guide-section td { padding: 9px 8px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.rank-guide-section th { color: #6c6d66; font-size: 8px; letter-spacing: .8px; text-transform: uppercase; }
.rank-guide-section td:first-child { font-weight: 800; }
.rank-formulas { margin-bottom: 20px; display: grid; gap: 8px; }
.rank-formulas code { padding: 11px 12px; display: block; overflow-wrap: anywhere; background: var(--ink); color: var(--acid); font-size: 11px; line-height: 1.45; }
.rank-formulas small { color: #686961; font-size: 10px; line-height: 1.45; }

.rank-mark { --rank-color: currentColor; --rank-glow: transparent; position: relative; display: inline-block; isolation: isolate; color: var(--rank-color) !important; font-weight: 800; line-height: inherit; text-shadow: none; }
.rank-mark::before { content: attr(data-rank-label); position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; opacity: 0; color: transparent; font: inherit; letter-spacing: inherit; line-height: inherit; white-space: inherit; background: linear-gradient(105deg, transparent 43%, rgba(255,255,255,.14) 47%, rgba(255,255,255,.92) 50%, rgba(255,255,255,.16) 53%, transparent 57%); background-size: 280% 100%; background-position: 145% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rank-mark::after { display: none; }
.rank-mark[data-rank-tier="0"] { --rank-color: #7d8481; --rank-glow: rgba(125,132,129,.2); }
.rank-mark[data-rank-tier="1"] { --rank-color: #2abf72; --rank-glow: rgba(42,191,114,.25); text-shadow: 0 0 .35px var(--rank-glow); animation: rank-letter-breathe 2.7s ease-in-out infinite; }
.rank-mark[data-rank-tier="2"] { --rank-color: #20b995; --rank-glow: rgba(32,185,149,.27); text-shadow: 0 0 .35px var(--rank-color), 0 0 .7px var(--rank-glow); }
.rank-mark[data-rank-tier="3"] { --rank-color: #18aeb9; --rank-glow: rgba(24,174,185,.29); text-shadow: 0 0 .4px var(--rank-color), 0 0 .85px var(--rank-glow); animation: rank-letter-echo 2.4s ease-in-out infinite; }
.rank-mark[data-rank-tier="4"] { --rank-color: #377fe8; --rank-glow: rgba(55,127,232,.31); text-shadow: 0 0 .4px var(--rank-color), 0 0 1px var(--rank-glow); animation: rank-letter-spark 3.4s ease-in-out infinite; }
.rank-mark[data-rank-tier="5"] { --rank-color: #b249b9; --rank-glow: rgba(178,73,185,.33); text-shadow: 0 0 .45px var(--rank-color), 0 0 1.15px var(--rank-glow); animation: rank-letter-electric 2.8s steps(1, end) infinite; }
.rank-mark[data-rank-tier="6"] { --rank-color: #ef493f; --rank-glow: rgba(239,73,63,.35); text-shadow: 0 0 .5px var(--rank-color), 0 0 1.3px var(--rank-glow); animation: rank-letter-epic 3s ease-in-out infinite; }
.rank-mark[data-rank-tier="2"]::before, .rank-mark[data-rank-tier="4"]::before, .rank-mark[data-rank-tier="6"]::before { opacity: 1; animation: rank-letter-scan 6.2s ease-in-out infinite; }
.rank-mark[data-rank-tier="2"]::before { background-image: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.22) 44%, rgba(255,255,255,1) 50%, rgba(255,255,255,.24) 56%, transparent 62%); background-size: 220% 100%; animation-duration: 3.2s; }
.rank-mark[data-rank-tier="4"]::before { animation-duration: 3.2s; }
.rank-mark[data-rank-tier="6"]::before { animation-duration: 3s; }
@keyframes rank-letter-breathe { 0%, 100% { filter: brightness(.9); text-shadow: 0 0 .25px var(--rank-glow); } 50% { filter: brightness(1.16); text-shadow: 0 0 1.05px var(--rank-glow); } }
@keyframes rank-letter-scan { 0%, 15% { background-position: 145% 0; } 75%, 100% { background-position: -45% 0; } }
@keyframes rank-letter-echo { 0%, 16%, 84%, 100% { filter: brightness(1); text-shadow: 0 0 .4px var(--rank-color), 0 0 .85px var(--rank-glow); } 30%, 62% { filter: brightness(1.12); text-shadow: 1.4px 0 .35px rgba(255,255,255,.52), -1.4px 0 .4px var(--rank-glow), 0 0 1.2px var(--rank-glow); } 46%, 74% { filter: brightness(1.18); text-shadow: -1.4px 0 .35px rgba(255,255,255,.52), 1.4px 0 .4px var(--rank-glow), 0 0 1.2px var(--rank-glow); } }
@keyframes rank-letter-spark { 0%, 42%, 54%, 100% { text-shadow: 0 0 .4px var(--rank-color), 0 0 1px var(--rank-glow); } 46%, 50% { text-shadow: 0 0 .7px rgba(255,255,255,.6), 0 0 1.35px var(--rank-glow); } }
@keyframes rank-letter-electric { 0%, 20%, 28%, 36%, 44%, 100% { text-shadow: 0 0 .45px var(--rank-color), 0 0 1.15px var(--rank-glow); } 23%, 31%, 39% { text-shadow: -1px 0 0 rgba(255,255,255,.55), 1px 0 0 var(--rank-color), 0 0 1.4px var(--rank-glow); } 25%, 33%, 41% { text-shadow: 1px 0 0 rgba(255,255,255,.48), -1px 0 0 var(--rank-color), 0 0 1.3px var(--rank-glow); } }
@keyframes rank-letter-epic { 0%, 100% { text-shadow: 0 0 .5px var(--rank-color), 0 0 1.3px var(--rank-glow); } 48% { text-shadow: 0 0 .65px rgba(255,255,255,.45), 0 0 1.6px var(--rank-glow); } 52% { text-shadow: 0 0 .5px var(--rank-color), 0 0 1.35px var(--rank-glow); } }
@media (prefers-reduced-motion: reduce) {
  .rank-mark, .rank-mark::before, .rank-mark::after { animation: none !important; }
}

main { min-height: calc(100vh - 150px); }
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); min-height: calc(100vh - 150px); }
.hero-copy { padding: clamp(52px, 8vw, 116px) clamp(24px, 7vw, 108px); border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; }
.eyebrow span { width: 30px; height: 2px; background: var(--orange); }
h1 { margin: 25px 0 28px; font: 700 clamp(48px, 6.3vw, 94px)/.94 "Unbounded"; letter-spacing: -5px; }
h1 em { color: var(--orange); font-style: normal; }
.hero-copy > p { max-width: 640px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: #55564f; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 58px; }
.steps div { border-top: 1px solid var(--line); padding-top: 16px; display: flex; gap: 13px; }
.steps b { color: var(--orange); font-size: 12px; }
.steps span { font-size: 13px; font-weight: 700; }

.auth-card { background: var(--ink); color: var(--cream); padding: clamp(38px, 6vw, 88px); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.auth-card::before { content: ""; position: absolute; width: 330px; height: 330px; border: 1px solid rgba(216,255,67,.2); border-radius: 50%; right: -150px; top: -150px; }
.founder-visual { width: 100%; margin: 0 0 clamp(32px, 5vw, 55px); position: relative; z-index: 1; border: 1px solid rgba(241,240,232,.2); overflow: hidden; box-shadow: 9px 9px 0 var(--orange); }
.founder-visual img { width: 100%; height: auto; display: block; object-fit: cover; }
.founder-visual figcaption { position: absolute; left: 0; bottom: 0; padding: 11px 14px; display: flex; flex-direction: column; gap: 3px; background: rgba(23,24,22,.9); backdrop-filter: blur(8px); }
.founder-visual figcaption span { color: var(--acid); font-size: 9px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
.founder-visual figcaption strong { color: var(--cream); font: 700 12px "Unbounded"; }
.demo-problem { background: var(--acid); color: var(--ink); transform: rotate(-3deg); align-self: flex-start; padding: 17px 22px; margin-bottom: 55px; box-shadow: 9px 9px 0 var(--orange); }
.demo-problem span { font: 700 27px "Unbounded"; }
.demo-problem b { margin-left: 22px; }
.auth-title { margin: 0 0 14px; font: 700 clamp(27px, 3vw, 39px)/1.1 "Unbounded"; letter-spacing: -2px; }
.auth-copy { margin: 0 0 24px; color: #b8b9b2; line-height: 1.55; }
.google-button { min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 0 22px; background: #fff; color: #242424; text-decoration: none; font-weight: 800; transition: transform .18s, box-shadow .18s; }
.google-button:hover { transform: translate(-4px, -4px); box-shadow: 7px 7px 0 var(--orange); }
.google-button svg { width: 23px; height: 23px; flex: 0 0 auto; }
.tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,.18); margin-bottom: 30px; }
.tab { border: 0; background: transparent; color: #888984; padding: 14px 0; margin-right: 30px; cursor: pointer; font-weight: 800; position: relative; }
.tab.active { color: var(--cream); }
.tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--acid); }
label { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; }
input { width: 100%; margin-top: 9px; padding: 15px 0; color: inherit; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.35); border-radius: 0; outline: 0; font-size: 17px; }
input:focus { border-color: var(--acid); }
.form-error { min-height: 20px; margin: 0 0 10px; color: #ff8b70; font-size: 13px; }
.primary-button { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border: 0; background: var(--acid); color: var(--ink); cursor: pointer; font-weight: 800; box-shadow: 0 0 0 var(--orange); transition: transform .18s, box-shadow .18s; }
.primary-button:hover { transform: translate(-4px, -4px); box-shadow: 7px 7px 0 var(--orange); }
.primary-button:disabled { opacity: .6; cursor: wait; }
.primary-button span { font-size: 22px; }

.nickname-view { min-height: calc(100vh - 150px); display: grid; place-items: center; padding: 28px; background: var(--ink); }
.nickname-card { width: min(560px, 100%); padding: clamp(35px, 6vw, 70px); background: var(--cream); }
.nickname-card h2 { margin: 24px 0 12px; font: 700 clamp(35px, 6vw, 56px)/1 "Unbounded"; letter-spacing: -3px; }
.nickname-card > p { color: #62635d; line-height: 1.55; }
.nickname-card form { margin-top: 32px; }
.nickname-card input { color: var(--ink); border-bottom-color: var(--ink); }
.nickname-card input:focus { border-color: var(--orange); }
.nickname-actions { display: grid; gap: 12px; }
.nickname-cancel { width: 100%; min-height: 52px; border-color: rgba(23,24,22,.45); color: var(--ink); }
.nickname-cancel:hover { border-color: var(--orange); background: var(--orange); color: var(--ink); }

.game-shell { min-height: calc(100vh - 150px); display: grid; grid-template-columns: minmax(500px, 1fr) minmax(390px, 450px) minmax(320px, 360px); }
.lobby-panel { padding: clamp(52px, 8vw, 115px); display: flex; flex-direction: column; justify-content: center; background: var(--cream); transition: transform 1s cubic-bezier(.62,0,.32,1); }
.lobby-panel > * { transition: opacity 1s ease, transform 1.35s cubic-bezier(.62,0,.32,1), filter 1s ease; }
.lobby-panel h2 { margin: 24px 0 12px; font: 700 clamp(45px, 6vw, 82px)/1 "Unbounded"; letter-spacing: -4px; }
.search-routes { width: min(620px, 100%); margin-top: 30px; display: grid; gap: 16px; }
.search-route { min-width: 0; padding: 24px 14px 14px; position: relative; border: 1px solid rgba(23,24,22,.38); }
.search-route-label { position: absolute; top: -8px; left: 14px; padding: 0 8px; background: var(--cream); font: 700 11px "Unbounded"; letter-spacing: 1px; }
.pvp-route { border-color: rgba(255,107,53,.72); }
.pvp-route .search-route-label { color: var(--orange); }
.pve-route .search-route-label { color: var(--ink); }
.search-route .match-button, .search-route .bot-button, .search-route .pve-route-controls { width: 100%; max-width: none; margin-top: 0; }
.pve-route { display: grid; gap: 10px; }
.match-button { margin-top: 45px; min-height: 118px; max-width: 620px; border: 0; background: var(--orange); text-align: left; display: grid; grid-template-columns: 65px 1fr; align-items: center; padding: 23px; cursor: pointer; transition: transform .2s; }
.match-button:hover { transform: rotate(-1deg) scale(1.01); }
.match-button .cross { font: 400 52px/1 "Manrope"; }
.match-button b { font: 700 25px "Unbounded"; }
.bot-button { margin-top: 14px; min-height: 76px; width: min(620px, 100%); border: 2px solid var(--ink); background: transparent; display: grid; grid-template-columns: 64px 1fr; grid-template-rows: 1fr 1fr; padding: 14px 18px; text-align: left; cursor: pointer; transition: background .18s, color .18s, transform .18s; }
.bot-button:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px); }
.bot-button.is-trace-ready { border-color: #a24fc0; box-shadow: 0 0 0 1px rgba(162,79,192,.28), 0 0 28px rgba(162,79,192,.18); }
.bot-button.is-trace-ready > span { background: #e8a6ff; }
.bot-button > span { grid-row: span 2; align-self: center; justify-self: start; padding: 7px 8px; background: var(--acid); color: var(--ink); font: 800 12px "Unbounded"; }
.bot-button b { align-self: end; font: 700 17px "Unbounded"; }
.bot-button small { align-self: start; opacity: .65; margin-top: 3px; }
.pve-route-controls { width: min(620px, 100%); margin-top: 14px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: stretch; }
.layer-choice { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border: 1px solid var(--ink); }
.layer-choice button { min-height: 58px; padding: 8px 12px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 9px; border: 0; border-right: 1px solid var(--ink); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.layer-choice button:last-child { border-right: 0; }
.layer-choice button b { grid-row: 1 / 3; color: var(--orange); font: 700 12px "Unbounded"; }
.layer-choice button span { font-size: 11px; font-weight: 800; }
.layer-choice button small { color: #71726b; font-size: 8px; }
.layer-choice button.is-selected { background: var(--ink); color: var(--cream); }
.layer-choice button:disabled { opacity: .38; cursor: not-allowed; }
.shard-meter { min-width: 138px; padding: 9px 12px; display: flex; flex-direction: column; justify-content: center; gap: 8px; border: 1px solid var(--ink); }
.shard-meter > span { display: flex; justify-content: space-between; gap: 10px; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.shard-meter > span b { color: var(--orange); }
.shard-meter > div { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.shard-meter i { height: 13px; display: block; border: 1px solid #8c8d85; transform: skew(-12deg); }
.shard-meter i.is-active { border-color: var(--orange); background: var(--orange); box-shadow: 0 0 9px rgba(255,107,53,.3); }
.stats-card { border-left: 1px solid var(--line); background: #e7e6dc; padding: clamp(42px, 6vw, 85px); display: flex; flex-direction: column; justify-content: center; transition: transform 1s cubic-bezier(.62,0,.32,1), border-color .8s ease; will-change: transform; }
.stats-card > * { transition: opacity 1s ease, transform 1.35s cubic-bezier(.62,0,.32,1), filter 1s ease; }
.card-label { text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; font-weight: 800; }
.stats-name-row { margin: 17px 0 48px; display: grid; justify-items: start; gap: 14px; }
.stats-name-row strong { min-width: 0; max-width: 100%; font: 700 clamp(24px, 2.3vw, 34px)/1.12 "Unbounded"; overflow-wrap: anywhere; }
.nickname-edit-button { padding: 7px 9px; border: 1px solid rgba(23,24,22,.42); background: transparent; color: #5f605a; cursor: pointer; font-size: 9px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; transition: border-color .18s, background .18s, color .18s; }
.nickname-edit-button:hover { border-color: var(--orange); background: var(--orange); color: var(--ink); }
.nickname-edit-button:disabled { opacity: .35; cursor: not-allowed; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.stats-grid div { padding: 24px 10px 0 0; }
.stats-grid b { display: block; font: 700 28px "Unbounded"; }
.stats-grid span { display: block; font-size: 11px; margin-top: 5px; color: #6c6d66; }
.pve-progress { margin-top: 42px; padding-top: 28px; border-top: 1px solid var(--line); }
.pve-progress > strong { display: block; margin: 12px 0 15px; font: 700 21px "Unbounded"; }
.pve-progress > strong b { color: var(--orange); font-size: 32px; }
.pve-progress > div { display: flex; flex-wrap: wrap; gap: 10px 24px; color: #6c6d66; font-size: 12px; }
.pve-progress > div b { color: var(--ink); }
.leaderboards-card { padding: clamp(26px, 3vw, 42px) 22px; border-left: 1px solid var(--line); background: var(--ink); color: var(--cream); transition: transform 1s cubic-bezier(.62,0,.32,1), border-color .8s ease; will-change: transform; }
.leaderboards-card > * { transition: opacity 1s ease, transform 1.35s cubic-bezier(.62,0,.32,1), filter 1s ease; }
.leaderboards-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.16); }
.leaderboards-head small { color: #777a72; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.leaderboards-grid { display: grid; gap: 18px; margin-top: 17px; }
.leaderboard-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.leaderboard-title strong { color: var(--acid); font: 700 15px "Unbounded"; }
.leaderboard-title span { color: #84867e; font-size: 10px; text-transform: uppercase; letter-spacing: .8px; }
.leaderboard-list { margin: 0; padding: 0; list-style: none; }
.leaderboard-list li { min-height: 39px; display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 7px; border-top: 1px solid rgba(255,255,255,.09); }
.leaderboard-list li:first-child { border-top: 0; }
.leaderboard-list li.is-current { margin: 0 -10px; padding: 0 10px; background: rgba(216,255,67,.1); }
.leaderboard-place { color: #6f716b; font: 700 10px "Unbounded"; }
.leaderboard-list li:nth-child(-n+3) .leaderboard-place { color: var(--orange); }
.leaderboard-player { min-width: 0; display: flex; flex-direction: column; }
.leaderboard-player strong { overflow: hidden; color: var(--cream); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-player small { margin-top: 1px; color: #73766e; font-size: 8px; }
.leaderboard-list li > b { color: var(--cream); font: 700 13px "Unbounded"; text-align: right; }
.leaderboard-list li > b small { display: block; margin-top: 2px; color: #6f716b; font: 700 7px "Manrope"; text-transform: uppercase; }
.leaderboard-empty { color: #74776f; font-size: 11px; }

.character-card { padding: clamp(32px, 3.5vw, 56px); justify-content: flex-start; position: relative; overflow: hidden; }
.character-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 24%, rgba(216,255,67,.2), transparent 29%); pointer-events: none; }
.character-card > * { position: relative; z-index: 1; }
.character-sigil { width: 118px; aspect-ratio: 1; margin: clamp(26px, 4vh, 42px) auto 22px; display: grid; place-items: center; position: relative; }
.character-sigil::before { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(23,24,22,.35); transform: rotate(45deg); }
.character-sigil i { position: absolute; inset: 0; border: 1px solid rgba(23,24,22,.24); border-radius: 50%; animation: character-orbit 9s linear infinite; }
.character-sigil i:nth-child(2) { inset: 14%; border-color: rgba(255,107,53,.48); animation-direction: reverse; animation-duration: 6s; }
.character-sigil i:nth-child(3) { inset: 29%; border-color: rgba(23,24,22,.42); animation-duration: 4s; }
.character-sigil b { color: var(--ink); font: 700 32px "Unbounded"; text-transform: uppercase; }
.character-card .stats-name-row { margin: 8px 0 9px; justify-items: center; text-align: center; }
.character-card .stats-name-row strong { font-size: clamp(25px, 2.25vw, 34px); }
.character-card .stats-grid { margin-top: 0; }
.character-card .pve-progress { margin-top: 30px; padding-top: 24px; }
@keyframes character-orbit { to { transform: rotate(360deg); } }

.social-card { min-height: calc(100vh - 150px); padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.social-tabs { order: 0; flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid rgba(255,255,255,.15); }
.social-tabs button { min-height: 54px; border: 0; border-right: 1px solid rgba(255,255,255,.12); background: transparent; color: #74776f; cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.social-tabs button:last-child { border-right: 0; }
.social-tabs button.is-active { background: rgba(216,255,67,.08); color: var(--cream); box-shadow: inset 0 -3px 0 var(--acid); }
.social-tabs button b { margin-left: 5px; color: var(--acid); }
.social-panel { padding: 20px 22px; }
.social-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.social-panel-head span { color: var(--cream); font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.social-panel-head small { color: #686b64; font-size: 8px; text-transform: uppercase; }
.online-list, .chat-messages { margin: 0; padding: 0; list-style: none; scrollbar-width: thin; scrollbar-color: #555 transparent; }
.online-list { max-height: 230px; overflow-y: auto; }
.online-player { min-height: 52px; padding: 8px 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) 8px; align-items: center; gap: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.online-player:first-child { border-top: 0; }
.online-player.is-current { margin: 0 -9px; padding-right: 9px; padding-left: 9px; background: rgba(216,255,67,.07); }
.online-avatar { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); color: var(--cream); font: 700 11px "Unbounded"; }
.online-player > span { min-width: 0; display: flex; flex-direction: column; }
.online-player strong { overflow: hidden; color: var(--cream); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.online-player small { margin-top: 2px; color: #777a72; font-size: 8px; letter-spacing: .3px; }
.online-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 12px rgba(216,255,67,.55); }
.online-player.is-searching .online-status-dot { background: var(--orange); box-shadow: 0 0 12px rgba(255,107,53,.55); animation: blink 1s infinite; }
.online-player.is-duel .online-status-dot { background: #ff5b46; box-shadow: 0 0 12px rgba(255,91,70,.5); }
.online-player.is-contour .online-status-dot { background: #b86ae0; box-shadow: 0 0 12px rgba(184,106,224,.55); }
.social-empty { padding: 24px 0; color: #73766e; font-size: 10px; line-height: 1.5; text-align: center; }
#ratingPanel { overflow-y: auto; }
#ratingPanel .leaderboards-grid { margin-top: 0; }

.chat-card { min-height: 340px; margin-top: auto; padding: 20px 22px 22px; display: flex; flex: 1 1 auto; flex-direction: column; border-top: 1px solid rgba(255,255,255,.15); background: #121310; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.chat-head > div { display: flex; flex-direction: column; gap: 4px; }
.chat-head small { display: inline-flex; align-items: center; gap: 6px; color: #70736b; font-size: 8px; letter-spacing: .7px; text-transform: uppercase; }
.chat-head small i { width: 5px; height: 5px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 9px rgba(216,255,67,.55); }
.chat-head > b { color: rgba(255,255,255,.08); font: 700 28px "Unbounded"; letter-spacing: -2px; }
.chat-messages { min-height: 150px; max-height: 310px; padding-right: 5px; overflow-y: auto; flex: 1 1 auto; }
.chat-message { padding: 10px 0; border-top: 1px solid rgba(255,255,255,.07); }
.chat-message:first-child { border-top: 0; }
.chat-message > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-message strong { color: var(--acid); font-size: 10px; }
.chat-message.is-current strong { color: var(--orange); }
.chat-message time { color: #5e615a; font-size: 8px; }
.chat-message p { margin: 4px 0 0; color: #c4c5bd; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.chat-error { min-height: 16px; margin: 5px 0 2px; color: #ff8b70; font-size: 9px; }
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) 42px; border-top: 1px solid rgba(255,255,255,.2); }
.chat-form input { min-width: 0; margin: 0; padding: 13px 8px 13px 0; border: 0; color: var(--cream); font-size: 12px; }
.chat-form input::placeholder { color: #62645e; }
.chat-form button { border: 0; background: var(--acid); color: var(--ink); cursor: pointer; font-size: 20px; transition: background .18s, transform .18s; }
.chat-form button:hover { background: var(--orange); transform: translateY(-2px); }


/* Character field and social column: chat above, scrollable roster below. */
.character-card { min-height: calc(100vh - 150px); padding: clamp(36px, 3.8vw, 62px); }
.character-card .stats-name-row { width: 100%; margin: 22px 0 8px; }
.character-card .stats-name-row strong {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(27px, 2.4vw, 38px);
  line-height: 1.08;
  text-overflow: clip;
  white-space: nowrap;
}
.character-card .character-sigil { width: clamp(176px, 15vw, 230px); margin: clamp(34px, 6vh, 68px) auto; }
.character-sigil::before { animation: character-diamond 7s ease-in-out infinite; }
.character-sigil::after {
  content: "";
  position: absolute;
  inset: 42%;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 32px rgba(255,107,53,.4);
  animation: character-core 2.8s ease-in-out infinite;
}
.character-sigil b { z-index: 2; font-size: clamp(38px, 4vw, 58px); animation: character-float 3.6s ease-in-out infinite; }
.character-stats { width: 100%; margin-top: auto; }
.stats-rank-line { margin-bottom: 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.stats-rank-line > span { color: #77786f; font-size: 8px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; }
.stats-rank-line > div { min-width: 0; display: flex; align-items: baseline; justify-content: flex-end; gap: 7px; text-align: right; }
.stats-rank-line b { overflow: hidden; color: var(--ink); font: 700 11px "Unbounded"; text-overflow: ellipsis; white-space: nowrap; }
.stats-rank-line small { flex: 0 0 auto; color: var(--orange); font-size: 8px; font-weight: 800; }
.character-stats .pve-progress { margin-top: 30px; }
.character-stats .pve-progress .stats-rank-line { margin-bottom: 15px; }
@keyframes character-diamond { 0%,100% { transform: rotate(45deg) scale(.94); } 50% { transform: rotate(135deg) scale(1.05); } }
@keyframes character-core { 0%,100% { opacity: .28; transform: scale(.75); } 50% { opacity: .72; transform: scale(1.35); } }
@keyframes character-float { 0%,100% { transform: translateY(-3px); } 50% { transform: translateY(5px); } }

.social-card { min-height: calc(100vh - 150px); display: flex; flex-direction: column; }
.social-card .chat-card { order: 1; min-height: 0; margin: 0; flex: 1 1 0; overflow: hidden; border-top: 0; }
.social-card .chat-messages { min-height: 0; max-height: none; }
.rating-card { order: 1; min-height: 0; padding: 20px 22px 22px; flex: 1 1 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: #121310; }
.rating-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.rating-card .leaderboards-grid { display: grid; gap: 22px; }
.rating-card .leaderboard-list li { min-height: 44px; }
.online-card { order: 2; min-height: 0; flex: 0 0 clamp(190px, 31%, 255px); padding: 20px 22px 22px; display: flex; flex-direction: column; overflow: hidden; border-top: 1px solid rgba(255,255,255,.16); background: #1a1b17; }
.online-card .social-panel-head span b { margin-left: 5px; color: var(--acid); }
.online-card .online-list { display: block; min-height: 0; max-height: none; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.online-card .online-player { width: 100%; }
.online-card .online-player.is-current { margin-right: 0; margin-left: 0; padding-right: 0; padding-left: 0; }
.chat-error.is-warning { color: #f4c86a; }
.chat-message.is-moderated p { color: #e4c98d; }

body.lobby-active { height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
body.lobby-active main { min-height: 0; overflow: hidden; }
body.lobby-active .game-shell { height: 100%; min-height: 0; overflow: hidden; }
body.lobby-active .lobby-panel { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
body.lobby-active .character-card, body.lobby-active .social-card { height: 100%; min-height: 0; }


.search-state { max-width: 620px; margin-top: 45px; padding: 35px; text-align: center; background: var(--ink); color: var(--cream); }
.search-state h3 { margin: 18px 0 5px; font: 700 21px "Unbounded"; }
.search-state p { margin: 0 0 22px; color: #aaa; }
.search-state .ghost-button { color: var(--cream); border-color: #777; }
.radar { width: 84px; height: 84px; margin: auto; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(216,255,67,.45); position: relative; }
.radar i { position: absolute; inset: 10px; border: 1px solid rgba(216,255,67,.25); border-radius: 50%; animation: ping 1.5s infinite; }
.radar i:nth-child(2) { inset: -8px; animation-delay: .7s; }
.radar strong { color: var(--acid); font: 700 25px "Unbounded"; }
@keyframes ping { 50% { transform: scale(1.18); opacity: .25; } }

.pve-encounter { min-height: calc(100vh - 150px); padding: 30px 20px; display: grid; place-items: center; background: var(--ink); color: var(--cream); }
.pve-signal-card { width: min(680px, 100%); min-height: 650px; padding: clamp(28px, 5vw, 58px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; border: 1px solid rgba(216,255,67,.28); background: radial-gradient(circle at 50% 39%, rgba(216,255,67,.07), transparent 44%); }
.pve-signal-card::before { content: ""; position: absolute; width: 440px; height: 440px; border: 1px solid rgba(216,255,67,.14); border-radius: 50%; }
.pve-signal-card > * { position: relative; z-index: 1; }
.pve-signal-card .eyebrow i { font-style: normal; }
.entity-stage { --entity-color: #d8ff43; --entity-scale: 1; --entity-brightness: 1.5; width: min(390px, 78vw); aspect-ratio: 1; margin: 14px 0 8px; display: grid; place-items: center; position: relative; isolation: isolate; }
.signal-probe, .entity-shell, .entity-canvas { position: absolute; inset: 0; display: grid; place-items: center; }
.entity-canvas { z-index: 1; overflow: visible; opacity: 0; transition: opacity .45s ease; }
.entity-canvas canvas { width: 100%; height: 100%; display: block; }
.entity-stage.has-canvas .entity-canvas { opacity: 1; }
.entity-stage.has-canvas .entity-shell { display: none; }
.entity-stage.canvas-failed .entity-canvas { display: none; }
.signal-probe { transition: opacity .35s; }
.signal-probe i { position: absolute; width: 38%; aspect-ratio: 1; border: 1px solid rgba(216,255,67,.32); border-radius: 50%; animation: contour-search 1.6s ease-in-out infinite; }
.signal-probe i:nth-child(2) { width: 58%; border-style: dashed; animation-delay: -.48s; animation-direction: reverse; }
.signal-probe i:nth-child(3) { width: 78%; border-color: rgba(255,107,53,.2); animation-delay: -.92s; }
.signal-probe b { width: 9px; height: 9px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 22px rgba(216,255,67,.8); animation: probe-beat 1s ease-in-out infinite; }
.entity-shell { opacity: 0; transform: scale(.72); }
.entity-aura { position: absolute; width: 67%; aspect-ratio: 1; border-radius: 50%; background: var(--entity-color); opacity: .16; filter: blur(42px); mix-blend-mode: screen; animation: aura-breathe 1.9s ease-in-out infinite; }
.entity-image { width: 88%; height: 88%; display: block; object-fit: contain; filter: brightness(var(--entity-brightness)) saturate(1.15) drop-shadow(0 0 8px var(--entity-color)) drop-shadow(0 0 24px color-mix(in srgb, var(--entity-color) 48%, transparent)); animation: entity-signal 2.1s ease-in-out infinite; }
.entity-stage.is-revealed .signal-probe { opacity: 0; }
.entity-stage.is-revealed .entity-shell { opacity: 1; }
.entity-stage.reveal-echo .entity-shell { animation: reveal-echo 2.25s cubic-bezier(.16,.9,.22,1) both; }
.entity-stage.reveal-archive .entity-shell { animation: reveal-archive 2.45s steps(10,end) both; }
.entity-stage.reveal-nameless .entity-shell { animation: reveal-nameless 2.55s cubic-bezier(.2,.75,.2,1) both; }
.entity-stage.reveal-watcher .entity-shell { animation: reveal-watcher 2.65s cubic-bezier(.12,.8,.18,1) both; }
.entity-stage.reveal-face .entity-shell { animation: reveal-face 3s cubic-bezier(.12,.8,.18,1) both; }
@keyframes contour-search { 0%,100% { transform: scale(.78) rotate(0); opacity: .18; } 48% { transform: scale(1.08) rotate(115deg); opacity: .8; } }
@keyframes probe-beat { 50% { transform: scale(2.2); opacity: .25; } }
@keyframes aura-breathe { 50% { transform: scale(1.18); opacity: .26; } }
@keyframes entity-signal { 0%,100% { transform: scale(var(--entity-scale)); } 50% { transform: scale(var(--entity-scale-pulse)); filter: brightness(var(--entity-brightness-pulse)) saturate(1.2) drop-shadow(0 0 12px var(--entity-color)) drop-shadow(0 0 32px color-mix(in srgb, var(--entity-color) 58%, transparent)); } }
@keyframes reveal-echo { 0% { opacity: 0; transform: scale(.56) rotate(-8deg); filter: blur(14px); } 55% { opacity: 1; transform: scale(1.08) rotate(2deg); filter: blur(2px); } 100% { opacity: 1; transform: scale(1); filter: none; } }
@keyframes reveal-archive { 0% { opacity: 0; transform: scaleX(.18) skewY(9deg); clip-path: inset(0 0 88% 0); } 72% { opacity: 1; transform: scaleX(1.04) skewY(-2deg); clip-path: inset(0); } 100% { opacity: 1; transform: none; clip-path: inset(0); } }
@keyframes reveal-nameless { 0% { opacity: 0; transform: translateX(-24px) scale(.82); clip-path: inset(0 82% 0 0); } 35% { opacity: .8; transform: translateX(18px) scale(1.06); clip-path: inset(0 12% 0 37%); } 62% { transform: translateX(-8px) scale(.97); clip-path: inset(0 31% 0 5%); } 100% { opacity: 1; transform: none; clip-path: inset(0); } }
@keyframes reveal-watcher { 0% { opacity: 0; transform: scale(1.32) rotate(22deg); filter: blur(12px); } 66% { opacity: 1; transform: scale(.96) rotate(-3deg); filter: blur(1px); } 100% { opacity: 1; transform: scale(1) rotate(0); filter: none; } }
@keyframes reveal-face { 0% { opacity: 0; transform: scale(1.55); filter: blur(20px); } 55% { opacity: .72; transform: scale(.92); filter: blur(4px); } 78% { opacity: .35; } 100% { opacity: 1; transform: scale(1); filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .entity-stage *, .entity-stage *::before, .entity-stage *::after,
  .character-sigil *, .character-sigil::before, .character-sigil::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  body.contour-departing *, body.contour-returning * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.pve-signal-card > small { color: var(--orange); font: 700 11px "Unbounded"; letter-spacing: 1.5px; text-transform: uppercase; }
.pve-signal-card h2 { margin: 10px 0 12px; min-height: 54px; font: 700 clamp(29px, 5.6vw, 52px)/1 "Unbounded"; letter-spacing: -2.5px; }
.pve-signal-card > p { min-height: 48px; max-width: 520px; margin: 0; color: #b9bab2; line-height: 1.55; }
.pve-countdown { margin-top: 16px; color: var(--acid); font: 700 clamp(48px, 8vw, 76px)/1 "Unbounded"; text-shadow: 0 0 34px rgba(216,255,67,.24); }
.pve-cancel { margin-top: 18px; color: var(--cream); border-color: #777; }

.pvp-preflight { min-height: calc(100vh - 150px); padding: clamp(28px, 5vw, 70px) 20px; display: grid; place-items: center; overflow: hidden; background: var(--ink); color: var(--cream); }
.pvp-preflight-card { width: min(920px, 100%); min-height: min(650px, calc(100vh - 210px)); padding: clamp(38px, 7vw, 90px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; border: 1px solid rgba(241,240,232,.15); background: radial-gradient(circle at 50% 52%, rgba(216,255,67,.08), transparent 38%); }
.pvp-preflight-card::before, .pvp-preflight-card::after { content: ""; position: absolute; width: min(44vw, 420px); aspect-ratio: 1; border: 1px solid rgba(216,255,67,.08); border-radius: 50%; animation: pvp-orbit 7s linear infinite; }
.pvp-preflight-card::after { width: min(30vw, 285px); border-color: rgba(255,107,53,.1); animation-direction: reverse; animation-duration: 5s; }
.pvp-preflight-card > * { position: relative; z-index: 1; }
.pvp-preflight-card .eyebrow { margin: 0 0 clamp(34px, 6vh, 68px); }
.pvp-ready-grid { width: min(720px, 100%); display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: clamp(16px, 4vw, 50px); }
.pvp-ready-grid > div { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pvp-ready-grid strong { max-width: 100%; overflow: hidden; font: 700 clamp(22px, 3.4vw, 44px)/1.1 "Unbounded"; text-overflow: ellipsis; white-space: nowrap; }
.pvp-ready-grid > b { color: var(--orange); font: 700 clamp(19px, 2.2vw, 28px) "Unbounded"; }
.pvp-ready-grid small { display: inline-flex; align-items: center; gap: 8px; color: #9b9d94; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.pvp-ready-grid small i { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 14px rgba(216,255,67,.65); }
.pvp-ready-grid small:not(.is-ready) i { background: #777; box-shadow: none; animation: blink 1s infinite; }
.pvp-preflight-card > p { margin: clamp(35px, 7vh, 76px) 0 8px; color: #aeb0a7; }
.pvp-preflight-countdown { min-height: 1em; color: var(--acid); font: 700 clamp(88px, 15vw, 180px)/.88 "Unbounded"; letter-spacing: -8px; text-shadow: 0 0 60px rgba(216,255,67,.2); animation: pvp-count-pulse 1s ease-out infinite; }
.pvp-preflight-countdown.is-waiting { color: #72746d; font-size: clamp(58px, 9vw, 100px); letter-spacing: 8px; animation: blink 1.2s ease-in-out infinite; }
.pvp-ready-actions { width: min(360px, 100%); margin: 8px 0 28px; display: grid; gap: 12px; }
.pvp-ready-actions .ghost-button { min-height: 46px; border-color: #666; color: var(--cream); }
.pvp-ready-actions .ghost-button:hover { border-color: var(--orange); background: var(--orange); color: var(--ink); }
.pvp-ready-actions button:disabled { opacity: .55; cursor: wait; transform: none; box-shadow: none; }
.pvp-sync-note { color: #70736b; font-size: 10px; letter-spacing: .7px; text-transform: uppercase; }
@keyframes pvp-count-pulse { 0% { opacity: .35; transform: scale(.82); } 32%,100% { opacity: 1; transform: scale(1); } }
@keyframes pvp-orbit { to { transform: rotate(360deg); } }

.duel { min-height: calc(100vh - 150px); padding: clamp(35px, 6vw, 80px) 24px; background: var(--ink); color: var(--cream); }
.versus { max-width: 780px; margin: 0 auto 35px; display: flex; align-items: center; justify-content: center; gap: 25px; font-weight: 800; }
.versus span { max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.versus b { color: var(--orange); font: 700 20px "Unbounded"; }
.duel-card { max-width: 780px; margin: auto; padding: clamp(35px, 6vw, 76px); background: var(--cream); color: var(--ink); text-align: center; }
.live-label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; }
.live-label i { width: 7px; height: 7px; background: var(--orange); border-radius: 50%; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.duel-card > p { color: #6a6b64; }
.problem { margin: clamp(35px, 6vw, 65px) 0; font: 700 clamp(52px, 10vw, 110px)/1 "Unbounded"; letter-spacing: -4px; }
.problem.is-textual { max-width: 900px; margin-left: auto; margin-right: auto; white-space: pre-line; font-size: clamp(25px, 4.2vw, 52px); line-height: 1.18; letter-spacing: -2px; }
.problem[data-kind="attention"] { color: #20211e; }
.problem-instruction { display: block; margin-bottom: 18px; font: 800 clamp(14px, 1.8vw, 21px)/1.25 "Manrope"; letter-spacing: .4px; }
.problem-challenge { display: block; font: 700 clamp(35px, 6vw, 70px)/1.1 "Unbounded"; letter-spacing: 2px; }
.problem-challenge.is-concealed { color: #9b9d94; letter-spacing: 8px; }
.captcha-code { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(2px, .7vw, 9px); width: min(580px, 100%); min-height: 104px; margin: 0 auto; overflow: hidden; border: 2px solid var(--ink); background: rgba(23,24,22,.04); }
.captcha-code i { position: relative; z-index: 1; display: inline-block; color: var(--ink); font-style: normal; transform: translateY(var(--captcha-shift)) rotate(var(--captcha-tilt)); text-shadow: 1px 0 rgba(255,100,55,.55), -1px 0 rgba(26,189,199,.55); }
.problem[data-presentation="captcha-damaged"] .captcha-code { background-image: repeating-linear-gradient(7deg, transparent 0 15px, rgba(23,24,22,.12) 16px 17px, transparent 18px 28px); }
.problem[data-presentation="captcha-damaged"] .captcha-code::after { content: ""; position: absolute; inset: 48% -6% auto; height: 2px; background: rgba(23,24,22,.64); transform: rotate(-4deg); }
.answer-puzzle { --puzzle-size: 3; position: relative; width: min(330px, 78vw); aspect-ratio: 1; margin: -28px auto 22px; display: grid; grid-template-columns: repeat(var(--puzzle-size), 1fr); gap: 3px; padding: 8px; border: 2px solid var(--ink); background: var(--ink); }
.answer-puzzle::before, .answer-puzzle::after { content: ""; position: absolute; top: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 12px rgba(216,255,67,.7); }
.answer-puzzle::before { left: -8px; }
.answer-puzzle::after { right: -8px; }
.circuit-tile { position: relative; min-width: 0; padding: 0; border: 1px solid rgba(241,240,232,.2); background: #242622; cursor: pointer; touch-action: manipulation; }
.circuit-tile:active { background: #30342a; }
.circuit-tile:disabled { cursor: default; }
.circuit-path { --circuit-rotation: 0deg; position: absolute; inset: 0; display: block; transform: rotate(var(--circuit-rotation)); transition: transform .13s ease-out; }
.circuit-path i, .circuit-path b { position: absolute; display: block; background: var(--acid); box-shadow: 0 0 7px rgba(216,255,67,.42); }
.circuit-path[data-shape="straight"] i { top: calc(50% - 2px); right: -1px; left: -1px; height: 4px; }
.circuit-path[data-shape="straight"] b { display: none; }
.circuit-path[data-shape="corner"] i { top: calc(50% - 2px); right: -1px; left: 50%; height: 4px; }
.circuit-path[data-shape="corner"] b { top: -1px; bottom: 50%; left: calc(50% - 2px); width: 4px; }
.answer-puzzle.is-solved { box-shadow: 0 0 24px rgba(216,255,67,.28); }
.duel-card form { display: grid; grid-template-columns: 1fr 190px; gap: 15px; }
.duel-card input { margin: 0; padding: 0 20px; border: 2px solid var(--ink); color: var(--ink); text-align: center; font: 700 26px "Unbounded"; }
.answer-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.answer-choice { min-height: 68px; padding: 14px 18px; border: 2px solid var(--ink); background: transparent; color: var(--ink); font: 700 clamp(15px, 2vw, 21px)/1.2 "Unbounded"; cursor: pointer; transition: transform .16s ease, background .16s ease, color .16s ease, opacity .16s ease; }
.answer-choice:hover:not(:disabled), .answer-choice:focus-visible { transform: translateY(-2px); background: var(--cyan); }
.answer-choice.is-pending { background: var(--ink); color: var(--cream); }
.answer-choice.is-wrong { border-color: var(--orange); color: var(--orange); opacity: .45; cursor: default; }
.answer-choice:disabled:not(.is-wrong) { opacity: .65; cursor: wait; }
.answer-message { min-height: 24px; margin-top: 18px; color: var(--orange); font-weight: 800; }

.result-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(23,24,22,.92); }
.result-card { width: min(520px, 100%); background: var(--cream); text-align: center; padding: clamp(40px, 6vw, 70px); }
.result-icon { font-size: 50px; }
.eyebrow.center { justify-content: center; margin-top: 20px; }
.eyebrow.center i { font-style: normal; }
.result-card h2 { margin: 20px 0 12px; font: 700 clamp(40px, 7vw, 62px) "Unbounded"; letter-spacing: -3px; }
.result-card p { min-height: 48px; color: #62635d; }

footer { min-height: 62px; border-top: 1px solid var(--line); background: var(--cream); display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(24px, 5vw, 76px); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; transition: opacity .45s ease, transform .45s ease, visibility .45s, border-color .45s ease; }
footer > * { transition: opacity 1.05s ease, transform 1.35s cubic-bezier(.62,0,.32,1), filter 1.1s ease; }
footer a { color: inherit; text-underline-offset: 4px; }
footer nav { display: flex; gap: 24px; }

body.contour-departing { overflow: hidden; background-color: var(--ink); }
body.contour-departing > .header {
  transform: translateY(-100%);
  border-color: transparent;
  transition-duration: 1s;
  transition-delay: .28s;
}
body.contour-departing .header > * {
  opacity: 0;
  transform: translateY(-120px) scale(.96);
  filter: blur(5px);
  pointer-events: none;
}
body.contour-departing .lobby-panel { transform: translateX(-105%); transition-delay: .28s; }
body.contour-departing .lobby-panel > * {
  opacity: 0;
  transform: translateX(-105vw) rotate(-2deg);
  filter: blur(5px);
  pointer-events: none;
}
body.contour-departing .lobby-panel > :nth-child(2) { transition-delay: .04s; }
body.contour-departing .lobby-panel > :nth-child(3) { transition-delay: .08s; }
body.contour-departing .lobby-panel > :nth-child(4) { transition-delay: .12s; }
body.contour-departing .lobby-panel > :nth-child(5) { transition-delay: .16s; }
body.contour-departing .stats-card,
body.contour-departing .leaderboards-card {
  transform: translate3d(110vw, 0, 0);
  border-color: transparent;
  transition-duration: 1.12s;
  transition-delay: .06s;
}
body.contour-departing .stats-card > *,
body.contour-departing .leaderboards-card > * {
  opacity: 0;
  transform: translateX(105vw) rotate(2deg);
  filter: blur(5px);
  pointer-events: none;
}
body.contour-departing .stats-card > :nth-child(2) { transition-delay: .06s; }
body.contour-departing .stats-card > :nth-child(3) { transition-delay: .12s; }
body.contour-departing .stats-card > :nth-child(4) { transition-delay: .18s; }
body.contour-departing > footer {
  transform: translateY(100%);
  border-color: transparent;
  transition-duration: 1s;
  transition-delay: .28s;
}
body.contour-departing footer > * {
  opacity: 0;
  transform: translateY(100px) scale(.96);
  filter: blur(4px);
  pointer-events: none;
}
body.contour-departing .noise { opacity: .1; transition: opacity 1.35s ease; }

body.contour-returning {
  overflow: hidden;
  background-color: var(--ink);
}
body.contour-returning > .header { animation: lobby-top-return 1.05s cubic-bezier(.22,.78,.28,1) both; }
body.contour-returning > footer { animation: lobby-bottom-return 1.05s cubic-bezier(.22,.78,.28,1) both; }
body.contour-returning .header > * { animation: lobby-item-top-return 1.12s .28s cubic-bezier(.22,.78,.28,1) both; }
body.contour-returning .lobby-panel { animation: lobby-panel-left-return 1.05s cubic-bezier(.22,.78,.28,1) both; }
body.contour-returning .lobby-panel > * { animation: lobby-item-left-return 1.12s .28s cubic-bezier(.22,.78,.28,1) both; }
body.contour-returning .lobby-panel > :nth-child(2) { animation-delay: .32s; }
body.contour-returning .lobby-panel > :nth-child(3) { animation-delay: .36s; }
body.contour-returning .lobby-panel > :nth-child(4) { animation-delay: .40s; }
body.contour-returning .lobby-panel > :nth-child(5) { animation-delay: .44s; }
body.contour-returning .stats-card { animation: stats-panel-right-return 1.05s cubic-bezier(.22,.78,.28,1) both; }
body.contour-returning .stats-card > * { animation: lobby-item-right-return 1.12s .28s cubic-bezier(.22,.78,.28,1) both; }
body.contour-returning .leaderboards-card { animation: stats-panel-right-return 1.05s cubic-bezier(.22,.78,.28,1) both; }
body.contour-returning .leaderboards-card > * { animation: lobby-item-right-return 1.12s .34s cubic-bezier(.22,.78,.28,1) both; }
body.contour-returning .stats-card > :nth-child(2) { animation-delay: .34s; }
body.contour-returning .stats-card > :nth-child(3) { animation-delay: .40s; }
body.contour-returning .stats-card > :nth-child(4) { animation-delay: .46s; }
body.contour-returning footer > * { animation: lobby-item-bottom-return 1.12s .28s cubic-bezier(.22,.78,.28,1) both; }
body.contour-returning .noise { animation: lobby-noise-return 1.5s ease both; }

@keyframes lobby-top-return { from { transform: translateY(-100%); border-color: transparent; } to { transform: none; border-color: var(--line); } }
@keyframes lobby-bottom-return { from { transform: translateY(100%); border-color: transparent; } to { transform: none; border-color: var(--line); } }
@keyframes lobby-item-top-return { from { opacity: 0; transform: translateY(-120px) scale(.96); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lobby-item-bottom-return { from { opacity: 0; transform: translateY(100px) scale(.96); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lobby-item-left-return { from { opacity: 0; transform: translateX(-105vw) rotate(-2deg); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lobby-item-right-return { from { opacity: 0; transform: translateX(105vw) rotate(2deg); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lobby-panel-left-return { from { transform: translateX(-105%); } to { transform: none; } }
@keyframes stats-panel-right-return { from { transform: translate3d(110vw, 0, 0); border-color: transparent; } to { transform: none; border-color: var(--line); } }
@keyframes lobby-noise-return { from { opacity: .1; } to { opacity: .18; } }

body.contour-mode { overflow: hidden; background: var(--ink); }
body.contour-mode > .header,
body.contour-mode > footer { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-12px); transition: none; }
body.contour-mode > footer { transform: translateY(12px); }
body.contour-mode .noise { z-index: 80; opacity: .12; }
body.contour-mode .pve-encounter {
  position: fixed;
  inset: 0;
  z-index: 30;
  width: 100vw;
  min-height: 100svh;
  padding: 0;
  animation: contour-screen-in .62s ease both;
}
body.contour-mode .pve-signal-card {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  padding: 40px clamp(20px, 5vw, 72px) clamp(28px, 5vh, 58px);
  justify-content: flex-end;
  overflow: visible;
  border: 0;
  background: var(--ink);
}
body.contour-mode .pve-signal-card::before { display: none; }
body.contour-mode .pve-signal-card .eyebrow {
  position: absolute;
  top: clamp(24px, 5vh, 54px);
  left: 50%;
  z-index: 4;
  margin: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
body.contour-mode .entity-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
  overflow: visible;
}
body.contour-mode .pve-signal-card > small,
body.contour-mode .pve-signal-card > h2,
body.contour-mode .pve-signal-card > p,
body.contour-mode .pve-countdown,
body.contour-mode .pve-cancel { z-index: 4; }
body.contour-mode .pve-signal-card > h2 { min-height: auto; font-size: clamp(34px, 5vw, 64px); }
body.contour-mode .pve-signal-card > p { min-height: auto; margin-bottom: 4px; }
body.contour-mode .pve-countdown { position: absolute; left: 50%; bottom: clamp(155px, 21vh, 215px); transform: translateX(-50%); }
body.contour-mode .pve-cancel { margin-top: 14px; }
body.contour-mode .duel {
  position: fixed;
  inset: 0;
  z-index: 30;
  width: 100vw;
  min-height: 100svh;
  padding: clamp(28px, 5vw, 70px) 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: contour-screen-in .45s ease both;
}
body.contour-mode .duel-card { width: min(780px, 100%); }
@keyframes contour-screen-in { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 850px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  html.contour-transition-lock { height: 100%; overflow: hidden !important; }
  body.lobby-active { height: auto; min-height: 100svh; display: block; overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: none; touch-action: pan-y; }
  body.lobby-active main { width: 100%; max-width: 100%; min-height: 0; overflow: visible; }
  body.lobby-active .game-shell { width: 100%; max-width: 100%; height: auto; min-height: 0; padding: 12px; gap: 12px; overflow: visible; background: #d9d8d0; }
  body.lobby-active .game-shell > * { max-width: 100%; }
  body.lobby-active .lobby-panel, body.lobby-active .character-card, body.lobby-active .social-card { width: 100%; min-width: 0; height: auto; }
  body.lobby-active .lobby-panel { min-height: 0; justify-content: flex-start; overflow: visible; }
  body.lobby-active #ratingPanel { min-height: 0; flex: 0 0 auto; overflow: visible; overscroll-behavior: auto; }
  body.lobby-active.contour-departing { width: 100%; position: fixed; top: var(--contour-lock-top, 0); right: 0; left: 0; overflow: hidden !important; touch-action: none; }
  body.lobby-active.contour-departing main, body.lobby-active.contour-departing .game-shell { overflow: hidden; overflow: clip; }
  body.lobby-active .game-shell { transition: opacity .42s ease, transform .52s cubic-bezier(.3,.72,.28,1); }
  body.lobby-active.contour-departing .game-shell { opacity: 0; transform: scale(.985); will-change: opacity, transform; }
  body.contour-departing > .header { opacity: 0; transform: translate3d(0, -24px, 0); transition-duration: .52s; transition-delay: 0s; will-change: transform, opacity; }
  body.contour-departing .lobby-panel, body.contour-departing .stats-card, body.contour-departing .leaderboards-card { opacity: 1; transform: none; transition: none; will-change: auto; }
  body.contour-departing .header > *, body.contour-departing .lobby-panel > *, body.contour-departing .stats-card > *, body.contour-departing .leaderboards-card > *, body.contour-departing footer > * { opacity: 1; transform: none; filter: none; transition: none; }
  body.contour-departing > footer { opacity: 0; transform: translate3d(0, 20px, 0); transition-duration: .5s; transition-delay: 0s; }
  body.contour-departing .noise { transition-duration: .62s; }
  .header { height: 72px; padding-right: 18px; padding-left: 18px; }
  .game-info-nav { margin-right: 12px; }
  .header-tab { min-height: 38px; padding: 0 11px; }
  .header-tab-full { display: none; }
  .header-tab-short { display: inline; }
  .user-nav { gap: 8px; }
  .audio-toggle { width: 34px; height: 32px; padding: 0; overflow: hidden; color: transparent; font-size: 0; }
  .audio-toggle::before { content: "♪"; color: var(--ink); font-size: 15px; }
  .hero, .game-shell { grid-template-columns: 1fr; }
  .hero-copy { border-right: 0; }
  .auth-card { min-height: 620px; }
  .stats-card, .leaderboards-card { border-left: 0; border-top: 1px solid var(--line); }
  h1 { letter-spacing: -3px; }
  .steps { margin-top: 35px; }
}

@media (min-width: 851px) and (max-width: 1250px) {
  .header { padding-right: 24px; padding-left: 24px; }
  .game-info-nav { margin-right: 14px; }
  .user-nav { gap: 10px; }
  .game-shell { grid-template-columns: minmax(350px, 1.3fr) minmax(240px, .8fr) minmax(245px, .85fr); }
  .lobby-panel { padding: clamp(28px, 3vw, 42px); }
  .lobby-panel h2 { font-size: clamp(38px, 4.6vw, 58px); }
  .character-card { padding: 28px; }
  .character-card .character-sigil { width: clamp(145px, 16vw, 190px); margin: clamp(24px, 4vh, 42px) auto; }
  .social-card { min-height: 0; display: flex; border-left: 1px solid var(--line); }
  .online-card { flex-basis: clamp(180px, 31%, 235px); }
  .chat-messages { max-height: none; }
}

@media (min-width: 851px) and (max-height: 720px) {
  .lobby-panel { padding: 20px 28px; }
  .lobby-panel h2 { margin: 12px 0 7px; font-size: clamp(34px, 4.2vw, 48px); }
  .search-routes { margin-top: 10px; gap: 8px; }
  .search-route { padding: 16px 8px 8px; }
  .search-route-label { top: -7px; left: 8px; font-size: 9px; }
  .match-button { min-height: 72px; margin-top: 14px; padding: 12px 16px; }
  .match-button .cross { font-size: 38px; }
  .match-button b { font-size: 17px; }
  .pve-route-controls { margin-top: 8px; }
  .layer-choice button { min-height: 45px; }
  .bot-button { min-height: 58px; margin-top: 8px; padding: 8px 12px; }
  .bot-button b { font-size: 14px; }
  .character-card { padding: 18px; }
  .character-card .stats-name-row { margin: 10px 0 4px; gap: 6px; }
  .character-card .character-sigil { width: 100px; margin: 10px auto; }
  .character-sigil b { font-size: 30px; }
  .character-card .stats-grid div { padding-top: 12px; }
  .character-card .stats-grid b { font-size: 22px; }
  .character-stats .pve-progress { margin-top: 14px; padding-top: 12px; }
  .stats-rank-line { margin-bottom: 6px; }
  .stats-rank-line b { font-size: 9px; }
  .character-stats .pve-progress .stats-rank-line { margin-bottom: 8px; }
  .character-card .pve-progress > strong { margin: 6px 0 8px; font-size: 16px; }
  .character-card .pve-progress > strong b { font-size: 25px; }
  .character-card .pve-progress > div { gap: 5px 12px; font-size: 9px; }
  .chat-card { padding: 14px 17px 16px; }
  .rating-card { padding: 14px 17px 16px; }
  .online-card { padding: 14px 17px 16px; }
}

@media (max-width: 520px) {
  .header { width: 100%; min-height: 72px; height: auto; padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
  .logo { font-size: 17px; }
  .game-info-nav { width: 100%; margin: 0; grid-column: 1 / -1; grid-row: 2; display: flex; }
  .header-tab { min-width: 0; min-height: 34px; flex: 1 1 50%; justify-content: center; padding: 0 8px; }
  .user-nav { min-width: 0; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
  .user-pill { min-width: 0; gap: 4px; }
  .user-pill .online-dot { display: none; }
  .admin-link { font-size: 9px; }
  .audio-toggle { width: 34px; height: 32px; padding: 0; overflow: hidden; color: transparent; font-size: 0; }
  .audio-toggle::before { content: "♪"; color: var(--ink); font-size: 15px; }
  .audio-toggle:hover::before { color: var(--orange); }
  .user-identity strong { max-width: min(24vw, 88px); }
  .user-nav .ghost-button { padding: 7px 8px; font-size: 10px; }
  .hero-copy { padding: 55px 20px; }
  h1 { font-size: 45px; }
  .steps { grid-template-columns: 1fr; }
  .auth-card { padding: 45px 22px; }
  body.lobby-active .game-shell { padding: 9px; gap: 9px; }
  body.lobby-active .lobby-panel, body.lobby-active .character-card, body.lobby-active .social-card { border: 1px solid rgba(23,24,22,.14); }
  .search-routes, .search-route, .match-button, .pve-route-controls, .layer-choice, .shard-meter, .bot-button, .character-stats, .social-tabs, .chat-card, .rating-card, .online-card { min-width: 0; max-width: 100%; }
  .bot-button b, .bot-button small { min-width: 0; overflow-wrap: anywhere; }
  .lobby-panel, .stats-card { padding: 38px 18px; }
  .lobby-panel { min-height: 0; }
  .search-routes { margin-top: 24px; gap: 14px; }
  .search-route { padding: 21px 11px 11px; }
  .match-button { min-height: 88px; grid-template-columns: 48px 1fr; padding: 17px; }
  .match-button .cross { font-size: 42px; }
  .match-button b { font-size: 19px; }
  .pve-route-controls { grid-template-columns: 1fr; }
  .layer-choice { grid-template-columns: 1fr; }
  .layer-choice button { border-right: 0; border-bottom: 1px solid var(--ink); }
  .layer-choice button:last-child { border-bottom: 0; }
  .leaderboards-card { padding: 34px 20px; }
  .social-card { min-height: 0; padding: 0; }
  .character-card { min-height: 0; padding: 38px 20px; }
  .character-card .stats-name-row { margin-top: 4px; }
  .character-card .character-sigil { width: min(150px, 46vw); margin: 28px auto 34px; }
  .character-stats { margin-top: 0; }
  .social-card .chat-card { min-height: min(520px, 68svh); flex: 0 0 min(520px, 68svh); }
  .social-card .chat-messages, .social-card .rating-card, .online-card .online-list { -webkit-overflow-scrolling: touch; }
  .online-card { min-height: 270px; flex: 0 0 270px; }
  .lobby-panel h2 { margin-top: 18px; font-size: 39px; letter-spacing: -3px; }
  .stats-grid { gap: 8px; }
  .duel { padding: 35px 14px; }
  .duel-card { padding: 35px 18px; }
  .duel-card form { grid-template-columns: 1fr; }
  .duel-card input { min-height: 65px; }
  .answer-choices { grid-template-columns: 1fr; gap: 9px; }
  .answer-choice { min-height: 58px; }
  .problem { font-size: 54px; }
  .problem-instruction { margin-bottom: 12px; }
  .problem-challenge { font-size: clamp(30px, 10vw, 48px); }
  .captcha-code { min-height: 86px; }
  .answer-puzzle { width: min(300px, 76vw); margin: -18px auto 18px; }
  body.contour-mode .duel { top: var(--duel-viewport-top, 0); bottom: auto; height: var(--duel-viewport-height, 100dvh); max-height: var(--duel-viewport-height, 100dvh); min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  body.contour-mode .duel:not(.hidden) { animation: contour-mobile-duel-in .28s ease-out both; will-change: opacity; }
  body.duel-keyboard-open .duel { position: fixed; top: 0; right: 0; bottom: auto; left: 0; z-index: 30; width: 100%; height: var(--duel-viewport-height, 100dvh); max-height: var(--duel-viewport-height, 100dvh); min-height: 0; justify-content: flex-start; padding: 48px 10px 10px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  body.duel-keyboard-open .versus,
  body.duel-keyboard-open .duel-card > .live-label,
  body.duel-keyboard-open .duel-card > p { display: none; }
  body.duel-keyboard-open .duel-card { width: 100%; margin: 0 auto; padding: 10px 12px; }
  body.duel-keyboard-open .problem { margin: 4px 0 10px; font-size: 36px; letter-spacing: -2px; }
  body.duel-keyboard-open .problem.is-textual { margin: 4px 0 10px; font-size: 24px; letter-spacing: -.5px; }
  body.duel-keyboard-open .problem-instruction { margin-bottom: 5px; font-size: 13px; }
  body.duel-keyboard-open .problem-challenge { font-size: 30px; }
  body.duel-keyboard-open .captcha-code { min-height: 54px; }
  body.duel-keyboard-open .duel-card form { gap: 6px; }
  body.duel-keyboard-open .duel-card input { min-height: 48px; font-size: 21px; }
  body.duel-keyboard-open .duel-card form .primary-button { min-height: 44px; padding: 9px 15px; }
  body.duel-keyboard-open .answer-message { min-height: 18px; margin-top: 5px; font-size: 12px; }
  .pvp-preflight { padding: 0; }
  .pvp-preflight-card { min-height: calc(100svh - 134px); padding: 38px 18px; border-left: 0; border-right: 0; }
  .pvp-ready-grid { gap: 10px; }
  .pvp-ready-grid strong { font-size: 19px; }
  .pvp-preflight-countdown { font-size: 88px; }
  .pve-signal-card { min-height: 520px; padding: 38px 22px; }
  .entity-stage { width: min(310px, 82vw); margin-top: 8px; }
  .pve-signal-card h2 { font-size: 30px; }
  body.contour-mode .pve-signal-card { min-height: 100svh; padding: 30px 18px 24px; }
  body.contour-mode .entity-stage { inset: 0; width: 100%; height: 100%; }
  body.contour-mode .pve-signal-card > h2 { font-size: 32px; }
  body.contour-mode .pve-signal-card > p { max-width: 92vw; font-size: 13px; }
  body.contour-mode .pve-countdown { bottom: 150px; }
  footer { display: none; }
  .rank-modal { padding: 10px; }
  .rank-modal-card { max-height: calc(100svh - 20px); box-shadow: 7px 7px 0 var(--orange); }
  .rank-modal-card > header { min-height: 64px; padding: 14px 16px; }
  .rank-guide-grid { grid-template-columns: 1fr; }
  .rank-guide-section { padding: 22px 16px; }
  .rank-guide-section + .rank-guide-section { border-top: 1px solid var(--line); border-left: 0; }
  .rank-guide-section > p { min-height: 0; }
}

@keyframes contour-mobile-duel-in { from { opacity: 0; } to { opacity: 1; } }