@font-face { font-family: "Ruln Display"; src: url("assets/fonts/ruln-display.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Ruln Narrow"; src: url("assets/fonts/ruln-narrow.otf") format("opentype"); font-display: swap; }

:root {
  --blue: #075fc7;
  --blue-2: #0056bd;
  --navy: #0b3568;
  --paper: #f1f1ef;
  --paper-2: #e8e9e8;
  --white: #fff;
  --green: #00b778;
  --line: rgba(7, 95, 199, .72);
  --display: "Ruln Display", "Arial Narrow", sans-serif;
  --mono: "Roboto Mono", "IBM Plex Mono", "Courier New", monospace;
  --sans: "Ruln Narrow", "Arial Narrow", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--blue); }
body { font-family: var(--mono); overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 192px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--blue); color: white; padding: 22px 15px 18px; display: flex; flex-direction: column; z-index: 20; }
.brand { all: unset; cursor: pointer; display: flex; align-items: center; gap: 11px; margin: 0 4px 38px; }
.brand-mark { width: 45px; height: 45px; background: var(--paper); display: grid; place-items: center; clip-path: polygon(7% 3%,93% 3%,100% 14%,94% 89%,84% 100%,13% 97%,2% 86%,0 13%); }
.brand-mark::after { content: ""; width: 27px; height: 20px; background: var(--blue); clip-path: polygon(0 15%,23% 43%,34% 8%,52% 43%,75% 5%,100% 17%,88% 72%,12% 72%); }
.brand-copy { font-family: var(--display); font-size: 18px; letter-spacing: .4px; line-height: 1.05; display: grid; }
.nav { display: grid; gap: 4px; }
.nav-item { border: 0; background: transparent; color: white; height: 42px; padding: 0 11px 0 8px; display: grid; grid-template-columns: 31px 1fr auto; align-items: center; text-align: left; cursor: pointer; font-weight: 700; font-size: 12px; letter-spacing: .4px; }
.nav-item:hover, .nav-item.active { background: var(--paper); color: var(--blue); }
.nav-item i { font-size: 16px; font-style: normal; }
.nav-icon { width: 24px; height: 24px; display: block; object-fit: contain; filter: brightness(0) invert(1); transform: translateZ(0); }
.nav-item:hover .nav-icon, .nav-item.active .nav-icon { filter: none; }
.sidebar-foot { margin-top: auto; padding: 0 7px; font-family: var(--sans); }
.short-rule { width: 70px; height: 1px; background: white; margin-bottom: 20px; }
.sidebar-foot p { line-height: 1.35; font-size: 12px; letter-spacing: .9px; }
.sidebar-foot small { display: block; margin-top: 18px; opacity: .55; }

.main { min-width: 0; }
.topbar { height: 62px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 23px; }
.page-title { display: flex; align-items: center; gap: 14px; }
.page-title b { font-family: var(--display); font-size: 22px; letter-spacing: .4px; }
.page-title span:not(.live-dot) { font-size: 11px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.top-actions { display: flex; align-items: center; gap: 24px; min-width: 0; }
.network { font-size: 11px; display: flex; gap: 10px; align-items: center; }
.network i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.wallet { min-width: 184px; height: 41px; border: 1px solid var(--line); background: transparent; font-weight: 700; font-size: 12px; cursor: pointer; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; }
.wallet:hover { color: white; background: var(--blue); }
.wallet:disabled { opacity: .58; cursor: wait; }
.auth-cluster { display: flex; align-items: center; gap: 6px; min-width: 0; }
#privyRoot { display: contents; }
.privy-wallet { min-width: 182px; }
.page { padding: 23px 12px 18px; min-width: 0; }

.arena-layout { display: grid; grid-template-columns: minmax(0, 2.15fr) clamp(286px, 24.5vw, 342px); gap: 10px; width: min(100%, 1560px); margin: auto; min-width: 0; }
.left-stack, .right-stack { display: grid; gap: 10px; align-content: start; }
.hero-row { display: grid; grid-template-columns: minmax(0, 2.55fr) minmax(190px, .95fr); gap: 10px; min-width: 0; }
.panel { border: 1px solid var(--line); background: rgba(255,255,255,.08); }
.panel-pad { padding: 14px; }
.eyebrow { font-weight: 800; font-size: 10px; margin-bottom: 3px; }
.display { font-family: var(--display); text-transform: uppercase; letter-spacing: .4px; margin: 0; line-height: .9; }
.king-panel { min-height: 346px; padding: 15px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.king-panel h1 { font-size: clamp(44px, 5vw, 80px); letter-spacing: -1px; overflow-wrap: anywhere; }
.king-content { display: grid; grid-template-columns: minmax(205px, 1.15fr) minmax(175px, .9fr); gap: 18px; margin-top: 10px; flex: 1; min-width: 0; }
.king-symbol { background: var(--blue); display: grid; place-items: center; min-height: 215px; }
.pixel-crown { width: 160px; height: 135px; position: relative; background: var(--paper); clip-path: polygon(9% 27%,25% 42%,35% 42%,35% 25%,45% 25%,45% 0,57% 0,57% 25%,67% 25%,67% 42%,77% 42%,91% 27%,91% 73%,9% 73%); }
.pixel-crown::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 4px; height: 12px; background: var(--paper); }
.king-data { display: flex; flex-direction: column; min-width: 0; }
.token-name { font-family: var(--display); font-size: 30px; margin-top: 3px; }
.agent-id { font-size: 18px; margin: 1px 0 13px; }
.class-line { font-size: 12px; margin-bottom: 10px; }
.tag { border: 1px solid var(--line); padding: 3px 9px; margin-left: 10px; font-size: 11px; background: var(--paper); }
.stat-line { display: flex; justify-content: space-between; align-items: center; min-height: 27px; border-top: 1px solid var(--line); font-size: 12px; }
.stat-line strong { font-size: 13px; }
.primary-btn, .outline-btn { border: 1px solid var(--blue); min-height: 39px; padding: 0 14px; cursor: pointer; font-weight: 800; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.primary-btn { color: white; background: var(--blue); }
.primary-btn:hover { background: var(--navy); }
.outline-btn { color: var(--blue); background: transparent; }
.outline-btn:hover { color: white; background: var(--blue); }
.king-data .primary-btn { margin-top: auto; }

.challenge-panel { padding: 14px; display: flex; flex-direction: column; min-height: 346px; min-width: 0; overflow: hidden; }
.challenge-panel h2 { font-size: 20px; margin: 7px 0 10px; }
.challenge-panel .rule { height: 1px; background: var(--line); width: 18px; margin: 0 0 28px; }
.muted-label { font-size: 11px; margin: 0 0 4px; }
.countdown { font-family: var(--display); font-size: 50px; letter-spacing: 1px; line-height: 1; margin-bottom: 25px; }
.challenge-panel .outline-btn { margin-top: auto; }
.challenge-meta { border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 8px; font-size: 12px; }
.challenge-meta b { display: block; }

.section-head { min-height: 46px; display: flex; align-items: center; gap: 16px; }
.section-head .eyebrow { margin: 0; }
.section-head h2 { font-size: 34px; }
.tabs { display: flex; align-self: stretch; }
.tab { border: 0; background: transparent; color: var(--blue); padding: 0 18px; cursor: pointer; font-size: 10px; }
.tab.active { background: var(--blue); color: white; }
.search { margin-left: auto; width: 265px; height: 32px; border: 1px solid var(--line); background: transparent; padding: 0 12px; color: var(--blue); outline: none; }
.search::placeholder { color: rgba(7,95,199,.7); }
.agents-panel { padding: 0 14px 12px; overflow: hidden; min-width: 0; }
.agent-grid { display: grid; grid-template-columns: repeat(5, minmax(108px, 1fr)); gap: 8px; }
.agent-card { border: 1px solid var(--line); padding: 9px; min-height: 132px; min-width: 0; display: flex; flex-direction: column; cursor: pointer; background: transparent; text-align: left; overflow: hidden; }
.agent-card:hover { background: white; }
.rank { font-size: 11px; font-weight: 800; }
.agent-shape { height: 58px; display: grid; place-items: center; min-width: 0; }
.agent-art { display: block; width: 74px; height: 74px; max-width: 92%; object-fit: contain; object-position: center; filter: saturate(.9) contrast(.98); }
.mini-crown { width: 64px; height: 46px; background: var(--blue); clip-path: polygon(0 20%,24% 51%,38% 51%,38% 18%,50% 44%,64% 18%,64% 51%,76% 51%,100% 20%,90% 84%,10% 84%); }
.agent-card strong { font-size: 12px; }
.agent-card small { font-size: 9px; margin-top: 1px; }
.agent-score { font-size: 11px; margin-top: auto; display: flex; justify-content: space-between; align-items: end; }
.bars { display: flex; gap: 2px; align-items: end; height: 25px; }
.bars i { width: 4px; background: var(--blue); display: block; }
.bars i:nth-child(1){height:7px}.bars i:nth-child(2){height:12px}.bars i:nth-child(3){height:18px}.bars i:nth-child(4){height:25px}
.pager { width: 100%; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(4px, .8vw, 8px); margin: 10px auto 0; padding: 0 4px; overflow: hidden; }
.pager button { flex: 0 0 34px; width: 34px; height: 31px; border: 1px solid var(--line); background: transparent; color: var(--blue); cursor: pointer; }
.pager button.active, .pager button:hover { background: var(--blue); color: white; }

.panel-header { height: 47px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 18px; padding: 0 14px; }
.panel-header h3 { font-family: var(--display); font-size: 17px; margin: 0; letter-spacing: .4px; }
.panel-header .status { margin-left: auto; color: var(--blue); font-size: 9px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.status i { width: 6px; height: 6px; background: var(--green); border-radius: 50%; }
.feed { padding: 14px; min-height: 253px; display: grid; align-content: start; gap: 10px; font-size: 10px; }
.feed-row { display: grid; grid-template-columns: 48px 1fr; gap: 8px; }
.feed-row p { margin: 0; overflow-wrap: anywhere; font-weight: 700; }
.your-agent { padding: 12px; }
.empty-agent { border: 1px dashed var(--line); min-height: 80px; display: grid; place-items: center; text-align: center; margin-bottom: 11px; font-size: 10px; }
.empty-agent .plus { font-size: 30px; line-height: 1; font-weight: 200; }
.owned-agent { border: 1px dashed var(--line); min-height: 80px; margin-bottom: 11px; padding: 7px 10px; display: grid; grid-template-columns: 62px 1fr; grid-template-rows: 1fr 1fr; align-items: center; column-gap: 9px; }
.owned-agent .agent-shape { grid-row: 1 / 3; height: 62px; }
.owned-agent .agent-art { width: 70px; height: 70px; }
.owned-agent strong { align-self: end; font-family: var(--display); font-size: 19px; }
.owned-agent small { align-self: start; font-size: 9px; overflow-wrap: anywhere; }
.your-agent .primary-btn { width: 100%; justify-content: center; }
.leaderboard { padding: 0 14px 13px; }
.leader-head { display: grid; grid-template-columns: 22px 1fr 42px 54px; border-bottom: 1px solid var(--line); height: 30px; align-items: center; font-size: 9px; }
.leader-row { display: grid; grid-template-columns: 22px 1fr 42px 54px; height: 29px; align-items: center; border-bottom: 1px solid rgba(7,95,199,.35); font-size: 11px; }
.leader-row strong { font-size: 11px; }.leader-row span:last-child{text-align:right}

.content-wrap { max-width: 1170px; margin: auto; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); padding: 12px 0 18px; margin-bottom: 12px; min-width: 0; overflow: hidden; }
.page-heading > div { min-width: 0; }
.page-heading h1 { max-width: 100%; font-size: clamp(44px, 5vw, 66px); line-height: .88; letter-spacing: -.4px; overflow-wrap: anywhere; }
.page-heading p { max-width: 330px; font-size: 11px; line-height: 1.6; margin: 0 0 6px; }
.wide-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.info-card { border: 1px solid var(--line); padding: 18px; min-height: 180px; }
.info-card h3 { font-family: var(--display); font-size: 25px; margin: 8px 0 16px; }
.info-card p { font-size: 11px; line-height: 1.6; }
.metric { font-family: var(--display); font-size: 48px; line-height: 1; }
.data-table { border: 1px solid var(--line); }
.data-row { display: grid; grid-template-columns: 70px 1fr 1fr 100px 100px; min-height: 48px; align-items: center; padding: 0 15px; border-bottom: 1px solid rgba(7,95,199,.35); font-size: 11px; }
.data-row:last-child { border: 0; }.data-row.head{font-size:9px;font-weight:800}
.agent-directory { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.directory-card { border: 1px solid var(--line); padding: 15px; min-height: 215px; min-width: 0; cursor: pointer; overflow: hidden; }
.directory-card:hover { background: white; }.directory-card .agent-shape{height:96px}.directory-card .agent-art{width:112px;height:112px}.directory-card h3{font-family:var(--display);font-size:25px;margin:8px 0 2px}.directory-card p{font-size:10px;margin:0}.directory-stats{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:13px;padding-top:9px;font-size:10px}

.launch-layout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(320px,.75fr); gap: 10px; }
.launch-form, .launch-preview { border: 1px solid var(--line); padding: 22px; }
.steps { display: flex; gap: 8px; margin: 8px 0 25px; }
.step { height: 32px; flex: 1; border: 1px solid var(--line); display: grid; place-items: center; font-size: 9px; }
.step.active { background: var(--blue); color: white; }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label { font-size: 9px; font-weight: 800; }
.field input, .field textarea { width: 100%; border: 1px solid var(--line); background: transparent; color: var(--blue); padding: 12px; outline: none; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.builds { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.build { border: 1px solid var(--line); min-height: 91px; background: transparent; color: var(--blue); cursor: pointer; padding: 10px; text-align:left; }
.build:hover, .build.active { background: var(--blue); color:white; }.build b{display:block;font-family:var(--display);font-size:18px;margin-bottom:6px}.build small{font-size:8px;line-height:1.3;display:block}
.avatar-builder { border: 1px solid var(--line); display: grid; grid-template-columns: 116px 1fr; min-height: 116px; }
.avatar-stage { border-right: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.avatar-stage img { width: 104px; height: 104px; object-fit: contain; }
.avatar-placeholder { font-family: var(--display); font-size: 62px; opacity: .28; }
.avatar-controls { padding: 14px; display: grid; align-content: center; gap: 10px; }
.avatar-controls .outline-btn { width: 100%; }
.avatar-controls small { font-size: 8px; line-height: 1.45; }
.preview-token { background: var(--blue); color:white; min-height: 310px; padding: 25px; display: flex; flex-direction: column; }
.preview-avatar { min-height: 150px; display: grid; place-items: center; margin-bottom: 4px; }
.preview-avatar { background: var(--paper); }
.preview-avatar img { width: 150px; height: 150px; object-fit: contain; }
.preview-avatar .avatar-placeholder { color: var(--blue); }
.preview-token .pixel-crown{width:120px;height:100px}.preview-token h2{font-family:var(--display);font-size:48px;margin:0}.preview-token p{font-size:10px;line-height:1.5}.preview-token .preview-class{margin-top:auto;border-top:1px solid white;padding-top:10px;display:flex;justify-content:space-between;font-size:10px}
.preview-note { font-size:9px; line-height:1.6; }
.launch-actions { display:flex;gap:8px;margin-top:20px}.launch-actions button{flex:1}
.primary-btn:disabled { opacity: .58; cursor: wait; }

.docs-wrap { max-width: 1220px; }
.docs-heading h1 { font-size: clamp(40px,4.4vw,60px); }
.docs-layout { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 10px; align-items: start; }
.docs-nav { position: sticky; top: 76px; border: 1px solid var(--line); padding: 14px; display: grid; }
.docs-nav button { border: 0; border-top: 1px solid rgba(7,95,199,.35); background: transparent; color: var(--blue); min-height: 38px; padding: 0; text-align: left; font-size: 9px; cursor: pointer; }
.docs-nav button:hover { padding-left: 7px; background: var(--blue); color: white; }
.docs-content { display: grid; gap: 10px; min-width: 0; }
.doc-section { scroll-margin-top: 76px; border: 1px solid var(--line); padding: clamp(18px,3vw,34px); background: rgba(255,255,255,.08); }
.doc-section h2 { font-family: var(--display); font-size: clamp(30px,4vw,52px); line-height: .9; margin: 8px 0 20px; }
.doc-section p,.doc-section li { font-size: 11px; line-height: 1.75; }
.doc-section ul,.doc-section ol { padding-left: 18px; margin: 12px 0 0; }
.doc-flow { display: flex; align-items: center; gap: 8px; margin-top: 24px; }
.doc-flow span { flex: 1; min-height: 48px; border: 1px solid var(--line); display: grid; place-items: center; text-align: center; padding: 7px; font-size: 9px; font-weight: 800; }
.doc-flow i { font-style: normal; }
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.doc-grid > div { border: 1px solid rgba(7,95,199,.45); padding: 16px; }
.doc-grid b { font-family: var(--display); font-size: 21px; }
.doc-table { border: 1px solid var(--line); }
.doc-table > div { display: grid; grid-template-columns: 150px 1fr 1fr; min-height: 42px; align-items: center; padding: 0 12px; border-bottom: 1px solid rgba(7,95,199,.35); font-size: 10px; gap: 12px; }
.doc-table > div:last-child { border-bottom: 0; }
.score-strip { display: grid; grid-template-columns: minmax(0,7fr) minmax(90px,2fr) minmax(90px,1fr); margin: 22px 0; }
.score-strip span { min-height: 92px; border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; padding: 12px; font-size: 9px; }
.score-strip b { font-family: var(--display); font-size: 38px; }
.api-list { border: 1px solid var(--line); }
.api-list > div { display: grid; grid-template-columns: 58px minmax(180px,.8fr) 1fr; gap: 12px; align-items: center; min-height: 43px; padding: 0 12px; border-bottom: 1px solid rgba(7,95,199,.35); font-size: 10px; }
.api-list > div:last-child { border-bottom: 0; }
.api-list code { color: var(--blue); font-size: 10px; overflow-wrap: anywhere; }
.doc-section details { border-top: 1px solid var(--line); padding: 14px 0; }
.doc-section summary { cursor: pointer; font-weight: 800; font-size: 10px; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(11,53,104,.5); z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal { width: min(560px, 100%); background: var(--paper); border: 1px solid var(--blue); padding: 22px; box-shadow: 12px 12px 0 var(--blue); }
.modal-top { display:flex;justify-content:space-between;align-items:start}.modal h2{font-size:48px}.close{border:1px solid var(--line);background:transparent;width:35px;height:35px;cursor:pointer}.modal p{font-size:11px;line-height:1.6}.versus{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;margin:25px 0}.versus div{border:1px solid var(--line);padding:15px;text-align:center}.versus b{font-family:var(--display);font-size:24px}.versus span{font-family:var(--display);font-size:26px;text-align:center}.modal-actions{display:flex;gap:8px}.modal-actions button{flex:1}.toast{position:fixed;right:20px;bottom:20px;background:var(--blue);color:white;padding:14px 18px;font-size:10px;z-index:200;transform:translateY(120px);transition:.25s}.toast.show{transform:none}

@media (max-width: 1260px) {
  .arena-layout { grid-template-columns: minmax(0, 1fr); }.right-stack{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}.agent-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.king-panel h1{font-size:clamp(58px,7.2vw,84px)}
  .feed{min-height:236px}.leaderboard{min-width:0}
}
@media (max-width: 960px) {
  .hero-row{grid-template-columns:minmax(0,2.2fr) minmax(180px,.9fr)}
  .right-stack{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .right-stack .panel:last-child{grid-column:1/-1}
  .agent-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .king-content{grid-template-columns:minmax(190px,1.1fr) minmax(165px,.9fr)}
  .king-panel h1{font-size:clamp(52px,7.7vw,72px)}
  .docs-heading h1{font-size:clamp(40px,5.6vw,54px)}
}
@media (max-width: 780px) {
  .app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;height:66px;padding:4px 8px;display:block}.brand,.sidebar-foot{display:none}.nav{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}.nav-item{height:58px;padding:3px 0;grid-template-columns:1fr;grid-template-rows:30px 14px;place-items:center;text-align:center;font-size:8px;line-height:1}.nav-item .nav-icon{width:27px;height:27px}.nav-item i{display:none}.main{padding-bottom:66px;min-width:0}.topbar{height:56px;padding-left:12px}.top-actions{gap:8px}.network{display:none}.wallet{min-width:168px;height:36px}.privy-wallet{min-width:168px}.page{padding:10px}.arena-layout,.hero-row,.king-content,.right-stack,.wide-grid,.launch-layout{grid-template-columns:minmax(0,1fr)}.right-stack .panel:last-child{grid-column:auto}.king-panel,.challenge-panel{min-width:0}.king-panel h1{font-size:clamp(43px,12vw,64px)}.king-symbol{min-height:180px}.agent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-head{flex-wrap:wrap;padding:8px 0}.section-head .search{order:3;width:100%;margin:0}.tabs{margin-left:auto}.agent-directory{grid-template-columns:repeat(2,minmax(0,1fr))}.page-heading{display:block;padding-top:8px}.page-heading h1{font-size:clamp(42px,10vw,58px)}.data-row{grid-template-columns:45px minmax(0,1fr) 80px}.data-row span:nth-child(3),.data-row span:nth-child(4){display:none}.builds{grid-template-columns:repeat(2,minmax(0,1fr))}.docs-layout{grid-template-columns:minmax(0,1fr)}.docs-nav{position:static;grid-template-columns:repeat(5,1fr);padding:7px}.docs-nav .eyebrow{grid-column:1/-1}.docs-nav button{font-size:7px;text-align:center;padding:0 3px}.docs-nav button:hover{padding-left:3px}.docs-heading h1{font-size:clamp(38px,9vw,52px)}
}
@media (max-width: 540px) { .privy-wallet{min-width:172px}.page-title{gap:7px}.page-title b{font-size:18px}.doc-flow{display:grid;grid-template-columns:1fr}.doc-flow i{transform:rotate(90deg);text-align:center}.doc-grid{grid-template-columns:1fr}.doc-table>div{grid-template-columns:90px 1fr}.doc-table>div>*:last-child{display:none}.score-strip{grid-template-columns:1fr 1fr 1fr}.api-list>div{grid-template-columns:48px 1fr}.api-list>div span{grid-column:1/-1;padding-bottom:10px}.docs-nav{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 440px) { .agent-directory{grid-template-columns:1fr}.topbar .page-title span{display:none}.page-heading h1{font-size:clamp(40px,12vw,52px)}.docs-heading h1{font-size:clamp(34px,10vw,46px);letter-spacing:-.5px}.field-row{grid-template-columns:1fr}.avatar-builder{grid-template-columns:92px 1fr}.avatar-stage img{width:84px;height:84px}.modal h2{font-size:38px}.versus{grid-template-columns:1fr}.versus span{padding:8px}.tabs .tab{padding:0 9px}.king-panel h1{font-size:clamp(39px,11.4vw,49px)}.pager{gap:4px}.pager button{flex-basis:31px;width:31px}.doc-section{padding:16px}.score-strip b{font-size:30px} }

/* Launch: lighter typography */
.launch-wrap .page-heading h1 { font-size: clamp(34px, 3.6vw, 46px); }
.launch-wrap .eyebrow, .launch-wrap .field label, .launch-wrap .step { font-weight: 600; }
.launch-wrap .field { font-size: 10px; letter-spacing: .3px; }
.launch-wrap .field input, .launch-wrap .field textarea { font-size: 12px; padding: 10px 12px; }
.launch-wrap .build { min-height: 72px; }
.launch-wrap .build b { font-size: 14px; margin-bottom: 4px; letter-spacing: .3px; }
.launch-wrap .avatar-placeholder { font-size: 44px; }
.launch-wrap .preview-token h2 { font-size: 34px; }
.launch-wrap .preview-token p, .launch-wrap .preview-note { font-weight: 400; }
.launch-wrap .primary-btn, .launch-wrap .outline-btn { font-weight: 600; font-size: 10px; }
@media (max-width: 440px) { .launch-wrap .page-heading h1 { font-size: clamp(32px, 10vw, 40px); } }


/* ---- Components added after the original layout (same editorial language) ---- */
.mono { font-family: var(--mono); }
button.token-name { all: unset; cursor: pointer; font-family: var(--display); font-size: 30px; margin-top: 3px; }
button.token-name:hover, .king-symbol[data-open-agent]:hover { opacity: .85; }
.king-symbol { position: relative; cursor: pointer; overflow: hidden; }
.king-art { width: 72%; max-width: 190px; aspect-ratio: 1; object-fit: contain; }
.crown-badge { position: absolute; left: 10px; top: 10px; background: var(--paper); color: var(--blue); font-size: 10px; font-weight: 800; padding: 4px 8px; }
.panel-kicker { display: flex; justify-content: space-between; align-items: center; }
.pill { font-size: 9px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.panel-title { margin-top: 2px; }
.class-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.class-line .tag { margin-left: 0; }
.tag { display: inline-block; white-space: nowrap; }
.tag-ok { background: var(--blue); color: white; border-color: var(--blue); }
.tag-warn { background: transparent; border-style: dashed; }
.tag-live { background: var(--navy); color: white; border-color: var(--navy); }
.stat-grid { display: grid; margin-bottom: 12px; }
.stat { display: flex; justify-content: space-between; align-items: center; min-height: 27px; border-top: 1px solid var(--line); font-size: 12px; gap: 10px; }
.stat strong { font-size: 13px; white-space: nowrap; }
.challenge-meta > div { display: flex; justify-content: space-between; gap: 10px; }
.challenge-meta > div b { display: inline; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.challenge-panel .rule { display: none; }
.challenge-panel h2 { margin-bottom: 26px; }
.section-title { display: flex; align-items: center; gap: 16px; }
.search { background: transparent; }
.agent-score b { font-weight: 400; }
.power-dot { width: 7px; height: 7px; border: 1px solid var(--blue); border-radius: 50%; display: block; }
.power-dot.on { background: var(--green); border-color: var(--green); }
.panel-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 9px; font-weight: 800; }
.link-btn { border: 0; background: none; color: var(--blue); font-size: 10px; font-weight: 800; cursor: pointer; padding: 4px 0; }
.link-btn:hover { text-decoration: underline; }
.empty-block { grid-column: 1 / -1; min-height: 90px; border: 1px dashed var(--line); display: grid; place-items: center; align-content: center; gap: 12px; padding: 16px; text-align: center; font-size: 10px; font-weight: 800; }
.feed { max-height: 330px; overflow-y: auto; }
.feed-row { grid-template-columns: 40px minmax(0, 1fr); align-items: start; }
.feed-row time { opacity: .75; }
.row-link { cursor: pointer; }
.feed-row.row-link:hover p { text-decoration: underline; }
.empty-agent { gap: 4px; align-content: center; }
.empty-agent small { font-size: 9px; opacity: .75; }
.owned-agent { cursor: pointer; grid-template-rows: auto; }
.owned-agent:hover { background: white; }
.owned-agent .agent-shape { grid-row: auto; }
.owned-copy { display: grid; gap: 3px; min-width: 0; }
.owned-copy strong { font-family: var(--display); font-size: 19px; }
.owned-copy small { font-size: 9px; }
.your-agent .fuel { margin-bottom: 11px; }
.fuel { display: grid; gap: 5px; }
.fuel-top { display: flex; justify-content: space-between; gap: 10px; font-size: 9px; font-weight: 800; }
.fuel-bar { height: 8px; border: 1px solid var(--line); }
.fuel-bar i { display: block; height: 100%; background: var(--blue); }
.fuel.is-empty .fuel-bar { border-style: dashed; }
.leader-head span:nth-child(n+3), .leader-row span:nth-child(n+3) { text-align: right; }
.leader-row { cursor: pointer; }
.leader-row:hover { background: white; }
.leader-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-row em { font-style: normal; }
.leaderboard .empty-block { margin-top: 10px; }

/* Agents directory: compact cards */
.directory-card { min-height: 0; background: transparent; color: var(--blue); text-align: left; display: flex; flex-direction: column; font: inherit; }
.directory-card .agent-shape { height: 104px; margin: 6px 0; }
.directory-card h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 4px 0 0; }

/* Tables */
.data-row { width: 100%; background: transparent; border-left: 0; border-right: 0; border-top: 0; color: var(--blue); text-align: left; font: inherit; font-size: 11px; }
.data-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-row strong small { display: block; font-size: 9px; font-weight: 400; opacity: .75; }
button.data-row:hover { background: white; cursor: pointer; }
.data-row.empty { grid-template-columns: 1fr; justify-items: center; min-height: 90px; font-weight: 800; }
.table-note { font-size: 10px; margin: 8px 2px 0; }
.wide-grid + .data-table { margin-top: 10px; }

/* Launch */
.form-section { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 18px; }
.form-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.form-section-head b { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.form-section-head small { display: block; font-size: 10px; margin-top: 2px; }
.step-num { width: 28px; height: 28px; flex: none; background: var(--blue); color: white; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.field > span { font-size: 10px; font-weight: 800; text-transform: uppercase; }
.field em { font-style: normal; font-weight: 400; opacity: .7; text-transform: none; }
.field:last-child { margin-bottom: 0; }
.launch-actions { margin-top: 0; }
.preview-token { gap: 10px; }
.preview-copy { margin-top: 8px; min-width: 0; }
.preview-token h2 { overflow-wrap: anywhere; }
.preview-token p { overflow-wrap: anywhere; }
.preview-class { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
.preview-class span { display: block; opacity: .75; }
.preview-class b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.launch-preview { display: grid; gap: 12px; align-content: start; }
.launch-facts { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); }
.launch-facts li { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.launch-facts li:last-child { border-bottom: 0; }
.launch-facts li::before { content: "✓"; grid-row: 1 / 3; width: 18px; height: 18px; background: var(--blue); color: white; font-size: 10px; display: grid; place-items: center; }
.launch-facts b { font-size: 10px; font-weight: 800; text-transform: uppercase; }
.launch-facts span { font-size: 10px; line-height: 1.5; }

/* Back link + profile */
.back-link { border: 0; background: none; color: var(--blue); font-size: 10px; font-weight: 800; padding: 0 0 10px; cursor: pointer; display: block; }
.back-link:hover { text-decoration: underline; }
.page-heading .vs { font-size: .45em; vertical-align: middle; opacity: .6; }
.profile-layout { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.4fr); gap: 10px; margin-bottom: 18px; }
.profile-art { position: relative; border: 1px solid var(--line); background: var(--blue); min-height: 300px; display: grid; place-items: center; }
.profile-art .agent-shape { height: auto; }
.profile-art .agent-art { width: 220px; height: 220px; }
.profile-art .mini-crown { width: 150px; height: 110px; background: var(--paper); }
.profile-main { border: 1px solid var(--line); padding: 18px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.profile-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); }
.profile-stats > div { padding: 12px; border-right: 1px solid var(--line); min-width: 0; }
.profile-stats > div:last-child { border-right: 0; }
.profile-stats span, .profile-token span { display: block; font-size: 9px; font-weight: 800; margin-bottom: 4px; }
.profile-stats b { font-family: var(--display); font-weight: 400; font-size: 24px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-token { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.profile-token > div { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.profile-token span { width: 100%; margin: 0; }
.profile-token b { font-size: 12px; }
.mini-btn { border: 1px solid var(--line); background: transparent; color: var(--blue); font-size: 9px; font-weight: 800; padding: 4px 8px; cursor: pointer; text-decoration: none; }
.mini-btn:hover { background: var(--blue); color: white; }
.profile-main .primary-btn { margin-top: auto; justify-content: center; }
.section-label { display: flex; justify-content: space-between; align-items: center; font-size: 10px; margin-bottom: 8px; }
.section-label .eyebrow { margin: 0; }

/* Match */
.match-banner { border: 1px solid var(--line); padding: 16px 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.match-banner span { font-size: 10px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.match-banner b { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3vw, 40px); line-height: 1; }
.match-banner small { margin-left: auto; font-family: var(--display); font-size: 30px; }
.match-banner.is-live, .match-banner.is-done { background: var(--blue); color: white; border-color: var(--blue); }
.match-banner.is-live .live-dot { background: white; animation: pulse 1s infinite; }
.match-banner.is-void { border-style: dashed; }
.task-panel { border: 1px solid var(--line); padding: 18px; margin-bottom: 10px; }
.task-prompt { font-size: 15px; line-height: 1.6; margin: 10px 0 14px; color: var(--navy); }
.task-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 10px; }
.task-meta b { margin-left: 6px; }
.fighters { display: grid; grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); gap: 10px; align-items: stretch; }
.fighters-vs { display: grid; place-items: center; font-family: var(--display); font-size: 26px; }
.fighter { border: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fighter.is-winner { box-shadow: inset 0 0 0 2px var(--blue); background: white; }
.fighter.is-loser { opacity: .78; }
.fighter-top { display: flex; justify-content: space-between; align-items: center; }
.fighter-id { all: unset; cursor: pointer; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.fighter-id:hover b { text-decoration: underline; }
.fighter-id .agent-shape { height: 64px; }
.fighter-id .agent-art { width: 64px; height: 64px; }
.fighter-id b { display: block; font-family: var(--display); font-weight: 400; font-size: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fighter-id small { font-size: 10px; }
.fighter-score { display: flex; align-items: baseline; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.fighter-score b { font-family: var(--display); font-weight: 400; font-size: 56px; line-height: 1; }
.fighter-score span { font-size: 12px; }
.score-bar { display: grid; gap: 4px; }
.score-bar > div { display: flex; justify-content: space-between; font-size: 9px; font-weight: 800; }
.score-bar i { display: block; height: 7px; border: 1px solid var(--line); }
.score-bar em { display: block; height: 100%; background: var(--blue); }
.answer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); padding: 10px 12px; }
.answer span { font-size: 9px; font-weight: 800; }
.answer b { font-size: 13px; overflow-wrap: anywhere; }
.answer i { font-style: normal; font-weight: 800; font-size: 16px; }
.answer.is-right { background: var(--blue); color: white; border-color: var(--blue); }
.answer.is-wrong { border-style: dashed; }
.fighter-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 10px; }
.solving { min-height: 150px; border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 10px; font-weight: 800; }
.solving i { width: 6px; height: 22px; background: var(--blue); animation: think 1s infinite ease-in-out; }
.solving i:nth-child(2) { animation-delay: .15s; }
.solving i:nth-child(3) { animation-delay: .3s; }
.solving span { margin-left: 8px; }
@keyframes think { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes pulse { 50% { opacity: .3; } }

@media (max-width: 780px) {
  .profile-layout, .fighters { grid-template-columns: minmax(0, 1fr); }
  .fighters-vs { min-height: 30px; }
  .profile-art { min-height: 220px; }
  .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-stats > div:nth-child(2) { border-right: 0; }
  .profile-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .profile-token { grid-template-columns: minmax(0, 1fr); }
  .data-row > :nth-child(3), .data-row > :nth-child(4) { display: none; }
  .doc-flow i { display: none; }
}
@media (max-width: 540px) { .score-strip b { font-size: 26px; } .match-banner small { margin-left: 0; } }
.versus b, .versus small { display: block; }
.versus small { font-size: 10px; margin-top: 4px; }
.data-row .tag { margin-left: 0; padding: 2px 6px; font-size: 9px; }
@media (max-width: 780px) { .data-row { grid-template-columns: 45px minmax(0,1fr) auto; } }

/* Token market */
.market-panel { border: 1px solid var(--line); padding: 16px; margin-bottom: 18px; display: grid; gap: 14px; min-width: 0; }
.market-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.market-head .eyebrow { margin: 0; }
.market-head .tabs { border: 1px solid var(--line); height: 28px; }
.market-links { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.market-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); }
.market-stats > div { padding: 12px; border-right: 1px solid var(--line); min-width: 0; }
.market-stats > div:last-child { border-right: 0; }
.market-stats span { display: block; font-size: 9px; font-weight: 800; margin-bottom: 4px; }
.market-stats b { display: block; font-family: var(--display); font-weight: 400; font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market-stats b small { font-family: var(--mono); font-size: 9px; }
.market-stats .is-up { color: var(--green); }
.market-stats .is-down { color: #d23c3c; }
.curve { display: grid; gap: 5px; }
.chart-wrap { border: 1px solid var(--line); min-width: 0; }
.chart-readout { font-size: 10px; font-weight: 800; padding: 8px 12px; border-bottom: 1px solid var(--line); min-height: 31px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart { display: block; width: 100%; height: auto; cursor: crosshair; }
.chart .grid { stroke: rgba(7, 95, 199, .16); stroke-width: 1; }
.chart .axis { fill: var(--blue); font-family: var(--mono); font-size: 13px; }
.chart .wick { stroke: var(--blue); stroke-width: 1.2; }
.chart .up { fill: var(--blue); }
.chart .down { fill: var(--paper); stroke: var(--blue); stroke-width: 1.2; }
.chart .last { stroke: var(--blue); stroke-dasharray: 4 4; stroke-width: 1; }
.chart .last-tag { fill: var(--blue); }
.chart .last-text { fill: white; font-family: var(--mono); font-size: 13px; font-weight: 700; }
.chart .cross { stroke: var(--navy); stroke-width: 1; stroke-dasharray: 2 3; }
.chart-empty { min-height: 160px; border: 1px dashed var(--line); display: grid; place-items: center; text-align: center; padding: 16px; font-size: 10px; font-weight: 800; }
@media (max-width: 960px) { .market-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .market-stats > div:nth-child(3) { border-right: 0; } .market-stats > div:nth-child(-n+3) { border-bottom: 1px solid var(--line); } }
@media (max-width: 540px) { .market-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .market-stats > div { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line); } .market-stats > div:nth-child(2n) { border-right: 0 !important; } .market-stats > div:last-child { grid-column: 1 / -1; border-bottom: 0; } .market-links { margin-left: 0; } .chart .axis, .chart .last-text { font-size: 22px; } }

/* ---- Typography rhythm ---- */
.page-heading .eyebrow { display: block; margin-bottom: 12px; letter-spacing: .6px; }
.page-heading .back-link { padding-bottom: 14px; }
.page-heading h1 { line-height: .95; }
.page-heading p { align-self: end; }
.king-panel .eyebrow, .challenge-panel .eyebrow { margin-bottom: 8px; }
.panel-kicker { margin-bottom: 6px; }
.section-label { margin-top: 4px; }

/* Rewards cards */
.info-card { min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.info-card .eyebrow { margin: 0; }
.info-card .metric { display: flex; align-items: baseline; gap: 10px; }
.info-card .metric small { font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .5px; }
.info-card p { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }

/* Tables: numbers right-aligned */
.data-row > :nth-child(4), .data-row > :nth-child(5) { text-align: right; justify-self: end; }

/* Launch: avatar picker */
.form-section-head .avatar-random { margin-left: auto; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.avatar-option { aspect-ratio: 1; border: 1px solid rgba(7, 95, 199, .28); background: transparent; padding: 6px; cursor: pointer; display: grid; place-items: center; transition: border-color .12s, background .12s; }
.avatar-option img { width: 100%; height: 100%; object-fit: contain; }
.avatar-option:hover { border-color: var(--blue); background: white; }
.avatar-option.active { border-color: var(--blue); background: white; box-shadow: inset 0 0 0 2px var(--blue); }

/* Launch: light preview so the blue voxel avatars read clearly */
.launch-wrap .preview-token { background: white; color: var(--blue); border: 1px solid var(--line); min-height: 0; padding: 0; gap: 0; }
.launch-wrap .preview-avatar { height: 240px; min-height: 0; margin: 0; border-bottom: 1px solid var(--line); background-color: var(--paper); background-image: linear-gradient(rgba(7,95,199,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(7,95,199,.07) 1px, transparent 1px); background-size: 24px 24px; background-position: center; }
.launch-wrap .preview-avatar img { width: 190px; height: 190px; filter: drop-shadow(0 14px 18px rgba(11, 53, 104, .18)); }
.launch-wrap .preview-avatar .avatar-placeholder { font-size: 54px; color: var(--blue); opacity: .25; }
.launch-wrap .preview-copy { margin: 0; padding: 16px 18px 14px; }
.launch-wrap .preview-token h2 { color: var(--blue); }
.launch-wrap .preview-token p { margin-top: 4px; opacity: .8; }
.launch-wrap .preview-class { padding: 12px 18px 16px; border-top: 1px solid var(--line); margin: 0; }
.launch-wrap .preview-class span { font-size: 9px; font-weight: 800; opacity: .7; margin-bottom: 3px; }
.launch-wrap .preview-class b { font-size: 12px; }
.launch-facts li { grid-template-columns: 22px auto 1fr; align-items: center; column-gap: 10px; }
.launch-facts li::before { grid-row: auto; }
.launch-facts span { text-transform: uppercase; opacity: .8; }

/* ---- Launch form: one consistent field system ---- */
.launch-form .field-row { align-items: start; gap: 12px; }
.launch-form .field, .launch-form .field-row .field { margin: 0 0 14px; align-content: start; gap: 7px; }
.launch-form .form-section > .field:last-child { margin-bottom: 0; }
.launch-form .field > span { font-size: 10px; font-weight: 800; line-height: 1; }
.launch-form .field input { height: 40px; padding: 0 12px; }
.launch-form .field textarea { min-height: 64px; padding: 10px 12px; line-height: 1.5; }
.launch-form .field input, .launch-form .field textarea { font-size: 12px; }

/* King tile: light, same language as the launch preview */
.king-symbol { background-color: var(--paper); border: 1px solid var(--line); background-image: linear-gradient(rgba(7,95,199,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(7,95,199,.07) 1px, transparent 1px); background-size: 24px 24px; background-position: center; }
.king-art { filter: drop-shadow(0 14px 18px rgba(11, 53, 104, .18)); }
.king-symbol .pixel-crown, .king-symbol .pixel-crown::after { background: var(--blue); }
.crown-badge { background: var(--blue); color: white; }
.profile-art { background-color: var(--paper); background-image: linear-gradient(rgba(7,95,199,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(7,95,199,.07) 1px, transparent 1px); background-size: 24px 24px; background-position: center; }
.profile-art .agent-art { filter: drop-shadow(0 16px 20px rgba(11, 53, 104, .18)); }
.profile-art .mini-crown { background: var(--blue); }

/* Topbar: title only */
.page-title b { font-size: 22px; }

/* Sidebar socials */
.sidebar-foot { display: grid; gap: 6px; padding: 0 4px; }
.social-link { display: grid; grid-template-columns: 31px 1fr; align-items: center; height: 38px; padding: 0 8px; border: 1px solid rgba(255,255,255,.45); color: white; text-decoration: none; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .4px; }
.social-link svg { width: 16px; height: 16px; fill: currentColor; }
.social-link:hover { background: var(--paper); color: var(--blue); border-color: var(--paper); }

/* Brand */
.brand { margin-bottom: 34px; }
.brand-mark { width: 46px; height: 46px; clip-path: none; background: var(--paper); display: grid; place-items: center; }
.brand-mark::after { content: none; }
.brand-mark img { width: 36px; height: 36px; display: block; }
.brand-copy { gap: 3px; }
.brand-copy b { font-size: 26px; line-height: .9; letter-spacing: .6px; }
.brand-copy small { font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .6px; opacity: .8; }
.topbar-logo { display: none; }

/* Menu icons keep their own colours on a light tile */
.nav-icon, .nav-item:hover .nav-icon, .nav-item.active .nav-icon { filter: none; width: 26px; height: 26px; padding: 2px; background: var(--paper); box-sizing: border-box; }
.nav-item.active .nav-icon, .nav-item:hover .nav-icon { box-shadow: inset 0 0 0 1px var(--line); }

/* Search: lighter */
.search { font-size: 11px; height: 30px; }
.search::placeholder { font-size: 11px; }

@media (max-width: 780px) {
  .topbar-logo { display: block; width: 28px; height: 28px; background: var(--paper); }
  .nav-item .nav-icon { width: 28px; height: 28px; }
}

/* No tiles behind the logo and menu icons */
.brand-mark { background: none; width: 42px; height: 42px; }
.brand-mark img { width: 42px; height: 42px; filter: drop-shadow(0 2px 3px rgba(4, 30, 70, .35)); }
.nav-icon, .nav-item:hover .nav-icon, .nav-item.active .nav-icon { background: none; padding: 0; box-shadow: none; width: 26px; height: 26px; filter: drop-shadow(0 1px 2px rgba(4, 30, 70, .35)); }
.nav-item.active .nav-icon, .nav-item:hover .nav-icon { filter: none; }
@media (max-width: 780px) { .topbar-logo { background: none; } }

/* Original icon sizes */
.nav-icon, .nav-item:hover .nav-icon, .nav-item.active .nav-icon { width: 24px; height: 24px; }
.brand-mark, .brand-mark img { width: 45px; height: 45px; }
@media (max-width: 780px) { .nav-item .nav-icon, .nav-item:hover .nav-icon, .nav-item.active .nav-icon { width: 27px; height: 27px; } }

/* ---- Coin spin ---- */
.coin { display: grid; place-items: center; perspective: 900px; width: 100%; height: 100%; }
.coin-body { position: relative; display: grid; transform-style: preserve-3d; animation: coin-spin 7s linear infinite; }
.coin-body > img { grid-area: 1 / 1; object-fit: contain; backface-visibility: visible; }
.coin-edge { transform: translateZ(calc(var(--z) * -1.6px)); filter: brightness(.55) saturate(1.2); }
.coin-face { transform: translateZ(0); }
@keyframes coin-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
@keyframes coin-flip { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }

/* sizes per placement */
.king-symbol .coin-body > img { width: min(190px, 34vw); height: min(190px, 34vw); }
.king-symbol .coin-face, .profile-art .coin-face, .launch-wrap .preview-avatar .coin-face { filter: drop-shadow(0 14px 18px rgba(11, 53, 104, .18)); }
.launch-wrap .preview-avatar .coin-body > img { width: 190px; height: 190px; }
.profile-art .coin-body > img { width: 220px; height: 220px; }
.profile-art .coin { min-height: 260px; }

/* one turn on hover for small icons */
.agent-shape, .avatar-option, .leader-row { perspective: 500px; }
/* hover flip only on the arena agent cards */
.agent-card:hover .agent-art { animation: coin-flip .9s cubic-bezier(.45, .05, .35, 1); }

@media (prefers-reduced-motion: reduce) {
  .coin-body, .agent-card:hover .agent-art { animation: none; }
  .coin-edge { display: none; }
}

/* Live agent activity */
.mind { border: 1px solid var(--line); background: white; padding: 12px; max-height: 300px; overflow-y: auto; display: grid; gap: 10px; align-content: start; font-size: 11px; }
.mind.is-live { min-height: 170px; }
.mind-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.mind-log li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; }
.mind-log time { opacity: .6; }
.mind-log li:last-child span { font-weight: 800; }
.mind-block { display: grid; gap: 4px; border-top: 1px dashed var(--line); padding-top: 8px; }
.mind-block span { font-size: 9px; font-weight: 800; opacity: .75; }
.mind-text { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--navy); max-height: 150px; overflow-y: auto; }
.mind-cursor { display: block; width: 8px; height: 13px; background: var(--blue); animation: pulse 1s steps(2) infinite; }
.mind-done { border-top: 1px solid var(--line); padding-top: 10px; }
.mind-done summary { cursor: pointer; font-size: 10px; font-weight: 800; }
.mind-done .mind { margin-top: 10px; max-height: 240px; }

/* Sidebar pinned to the viewport: stays put when a modal (Privy) locks page scroll */
@media (min-width: 781px) {
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 192px; height: 100vh; overflow-y: auto; }
  .main { grid-column: 2; }
}

/* Challenge dialog */
.challenge-modal { width: min(520px, 100%); display: grid; gap: 18px; }
.challenge-modal .modal-top h2 { font-size: clamp(34px, 6vw, 44px); margin-top: 6px; line-height: .95; }
.challenge-modal .eyebrow { display: block; }
.duel { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: stretch; gap: 8px; }
.duel:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.duel-card { border: 1px solid var(--line); background: white; padding: 12px 12px 14px; display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; min-width: 0; }
.duel-card .agent-shape { height: 76px; margin: 2px 0 4px; perspective: 500px; }
.duel-card .agent-art { width: 76px; height: 76px; }
.duel-card b { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-card small { font-size: 9px; font-weight: 700; letter-spacing: .3px; }
.duel-card .tag { margin: 6px 0 0; font-size: 9px; padding: 2px 6px; }
.duel-role { justify-self: start; font-size: 9px; font-weight: 800; letter-spacing: .6px; opacity: .7; }
.duel-card.is-empty { background: transparent; border-style: dashed; }
.duel-slot { height: 76px; display: grid; place-items: center; font-family: var(--display); font-size: 46px; opacity: .3; margin: 2px 0 4px; }
.duel-card.is-empty b { opacity: .55; }
.duel-vs { display: grid; place-items: center; font-family: var(--display); font-size: 22px; }
.duel-note { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.6; }
.challenge-modal .modal-actions button { justify-content: center; }
@media (max-width: 440px) { .duel { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); } .duel-card b { font-size: 19px; } .duel-card .agent-art, .duel-card .agent-shape, .duel-slot { width: 60px; height: 60px; } .challenge-modal .modal-actions { flex-direction: column-reverse; } }

/* ===== Match page ===== */
.match-wrap .page-heading .eyebrow b { font-weight: 800; }
.match-wrap .page-heading .eyebrow .mini-btn { margin-left: 6px; vertical-align: middle; }
.scoreboard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 1.25fr) minmax(0, 1fr); border: 1px solid var(--line); margin-bottom: 10px; }
.sb-side { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px; min-width: 0; }
.sb-side + .sb-center { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.sb-side .agent-shape { height: 64px; perspective: 500px; }
.sb-side .agent-art { width: 64px; height: 64px; }
.sb-side small { display: block; font-size: 9px; font-weight: 800; letter-spacing: .6px; opacity: .7; }
.sb-side b { display: block; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-total { font-family: var(--display); font-weight: 400; font-size: 54px; line-height: 1; font-variant-numeric: tabular-nums; transition: color .3s; }
.sb-total.is-counting { color: var(--green); }
.sb-side.is-winner { background: white; box-shadow: inset 0 -3px 0 var(--blue); }
.sb-crown { position: absolute; left: 30px; top: -6px; font-size: 22px; animation: crown-drop .7s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes crown-drop { from { transform: translateY(-26px) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.sb-center { display: grid; justify-items: center; align-content: center; gap: 8px; padding: 14px 12px; text-align: center; }
.sb-center > span { font-size: 9px; font-weight: 800; letter-spacing: .6px; display: flex; align-items: center; gap: 6px; }
.sb-center > b { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; }
.sb-center .live-dot { background: var(--green); animation: pulse 1s infinite; }
.tracker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; margin-top: 4px; }
.tracker-round { border: 1px solid var(--line); background: transparent; color: var(--blue); padding: 6px 4px; display: grid; gap: 2px; justify-items: center; cursor: pointer; font: inherit; min-width: 0; }
.tracker-round span { font-size: 9px; font-weight: 800; opacity: .7; }
.tracker-round b { font-size: 9px; font-weight: 800; letter-spacing: .3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracker-round em { display: flex; gap: 4px; font-style: normal; min-height: 14px; }
.tracker-round em i { width: 14px; height: 14px; display: grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 800; border: 1px solid var(--line); }
.tracker-round em i.ok { background: var(--blue); color: white; border-color: var(--blue); }
.tracker-round em i.no { border-style: dashed; }
.tracker-round.is-pending { opacity: .45; cursor: default; }
.tracker-round.is-live { background: var(--blue); color: white; border-color: var(--blue); animation: live-glow 1.6s ease-in-out infinite; }
.tracker-round.is-live em i { border-color: rgba(255,255,255,.5); }
.tracker-round.is-selected, .tracker-round:not(.is-pending):hover { box-shadow: inset 0 0 0 2px var(--blue); }
@keyframes live-glow { 50% { box-shadow: 0 0 0 4px rgba(7, 95, 199, .18); } }
.final-banner { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; background: var(--blue); color: white; padding: 14px 18px; margin-bottom: 10px; animation: banner-in .6s cubic-bezier(.2, .9, .3, 1) both; }
.final-banner b { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; }
.final-banner span { font-size: 11px; font-weight: 800; letter-spacing: .6px; }
.final-banner em { margin-left: auto; font-style: normal; font-family: var(--display); font-size: 30px; }
@keyframes banner-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.round-panel { border: 1px solid var(--line); margin-bottom: 10px; }
.round-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.round-head .eyebrow { margin: 0; }
.round-clock, .round-answer { font-size: 10px; font-weight: 800; }
.round-clock b { font-variant-numeric: tabular-nums; }
.round-answer b { background: var(--blue); color: white; padding: 3px 8px; margin-left: 6px; font-family: var(--mono); }
.task-text { margin: 0; padding: 14px; font-family: var(--mono); font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--navy); max-height: 300px; overflow-y: auto; }
.task-hidden { padding: 28px 14px; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .6px; opacity: .6; }
.consoles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.console { border: 1px solid var(--line); background: white; display: grid; grid-template-rows: auto 1fr auto; min-width: 0; transition: box-shadow .3s; }
.console header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.console-id { all: unset; cursor: pointer; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; min-width: 0; }
.console-id .agent-shape { height: 40px; perspective: 400px; }
.console-id .agent-art { width: 40px; height: 40px; }
.console-id b { display: block; font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console-id small { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .3px; opacity: .75; }
.console-state { flex: none; font-size: 9px; font-weight: 800; letter-spacing: .6px; padding: 4px 8px; border: 1px solid var(--line); }
.console.is-live .console-state { background: var(--blue); color: white; border-color: var(--blue); animation: pulse 1.2s infinite; }
.console.is-locked .console-state { background: var(--navy); color: white; border-color: var(--navy); animation: stamp .35s cubic-bezier(.3, 1.6, .5, 1); }
.console.is-right { box-shadow: inset 0 0 0 2px var(--blue); }
.console.is-right .console-state { background: var(--blue); color: white; border-color: var(--blue); animation: stamp .4s cubic-bezier(.3, 1.6, .5, 1); }
.console.is-wrong .console-state { border-style: dashed; animation: stamp .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes stamp { from { transform: scale(1.8) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
.console-body { height: 360px; overflow-y: auto; padding: 12px; display: grid; align-content: start; gap: 10px; scroll-behavior: smooth; }
.think { border-left: 2px solid var(--line); padding: 2px 0 2px 10px; }
.think span { font-size: 8.5px; font-weight: 800; letter-spacing: .6px; opacity: .55; }
.think p { margin: 4px 0 0; font-family: var(--mono); font-size: 10.5px; line-height: 1.5; color: var(--navy); opacity: .5; max-height: 64px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 45%); mask-image: linear-gradient(transparent, #000 45%); white-space: pre-wrap; overflow-wrap: anywhere; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; padding: 5px 8px 5px 0; border-left: 2px solid transparent; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--navy); }
.steps li b { font-size: 9px; font-weight: 800; color: var(--blue); padding: 2px 0 0 6px; }
.steps li span { overflow-wrap: anywhere; }
.steps li.is-new { animation: step-in .45s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes step-in { from { transform: translateY(8px); opacity: 0; border-left-color: var(--blue); background: rgba(7, 95, 199, .08); } 60% { border-left-color: var(--blue); background: rgba(7, 95, 199, .06); } to { transform: none; opacity: 1; } }
.typing { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--navy); padding-left: 34px; overflow-wrap: anywhere; min-height: 18px; }
.caret { display: inline-block; width: 7px; height: 13px; background: var(--blue); vertical-align: -2px; margin-left: 2px; animation: pulse .8s steps(2) infinite; }
.console-idle { font-size: 10px; font-weight: 700; opacity: .55; padding: 6px 0; }
.answer-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--blue); padding: 9px 12px; animation: stamp .4s cubic-bezier(.3, 1.6, .5, 1); }
.answer-line span { font-size: 9px; font-weight: 800; letter-spacing: .6px; }
.answer-line b { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.answer-line em { font-style: normal; font-size: 10px; font-weight: 700; opacity: .75; }
.answer-line.is-right { background: var(--blue); color: white; }
.answer-line.is-wrong { border-style: dashed; }
.console footer { border-top: 1px solid var(--line); padding: 9px 12px; }
.round-meter, .round-points { display: flex; align-items: center; gap: 14px; font-size: 10px; font-weight: 700; }
.round-meter b, .round-points b { font-variant-numeric: tabular-nums; }
.round-points strong { margin-left: auto; font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1; animation: stamp .4s cubic-bezier(.3, 1.6, .5, 1); }
@media (max-width: 900px) {
  .scoreboard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sb-center { grid-column: 1 / -1; grid-row: 1; border: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .sb-side + .sb-center + .sb-side { border-left: 1px solid var(--line); }
  .consoles { grid-template-columns: minmax(0, 1fr); }
  .console-body { height: 300px; }
}
@media (max-width: 520px) {
  .sb-side { grid-template-columns: 40px minmax(0, 1fr); padding: 12px; }
  .sb-side .agent-shape, .sb-side .agent-art { width: 40px; height: 40px; }
  .sb-total { grid-column: 1 / -1; font-size: 40px; }
  .sb-side b { font-size: 19px; }
  .final-banner em { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .steps li.is-new, .answer-line, .console-state, .sb-crown, .final-banner, .round-points strong, .tracker-round.is-live { animation: none !important; } }
.think.is-main { border-left-color: var(--blue); }
.think.is-main p { max-height: 260px; opacity: .8; font-size: 11px; -webkit-mask-image: linear-gradient(transparent, #000 18%); mask-image: linear-gradient(transparent, #000 18%); }
.round-answer { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: 100%; }
.round-answer b { margin-left: 0; overflow-wrap: anywhere; word-break: break-all; }
.sb-side > div { min-width: 0; }
.sb-side small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1180px) {
  .scoreboard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sb-center { grid-column: 1 / -1; grid-row: 1; border: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .sb-side + .sb-center + .sb-side { border-left: 1px solid var(--line); }
}
.challenge-meta { min-width: 0; }
.challenge-meta > div { min-width: 0; }
.challenge-meta > div span { flex: none; }
.challenge-meta > div b { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-row > * { min-width: 0; }

/* ===== Typography pass: readable sizes, real leading, breathing room ===== */
body { line-height: 1.45; }
.display { line-height: 1; }
.page-heading h1 { line-height: .98; }
.doc-section h2, .king-panel h1, .panel-title, .modal h2, .challenge-modal .modal-top h2, .info-card .metric, .countdown { line-height: 1; }

/* No label below 10px */
.eyebrow, .tag, .mini-btn, .pill, .panel-header .status, .leader-head span, .panel-foot span, .data-row.head, .data-row .tag,
.data-row strong small, .fuel-top span, .fuel-top b, .doc-flow span, .score-strip span, .docs-nav button, .agent-card small,
.build small, .brand-copy small, .launch-facts span, .launch-facts b, .stat span, .duel-role, .duel-card small, .console-id small,
.console-state, .tracker-round span, .tracker-round b, .sb-side small, .round-meter, .round-points, .task-meta, .challenge-meta span,
.profile-stats span, .profile-token span, .market-stats span, .form-section-head small, .field > span, .directory-stats,
.preview-class span, .avatar-controls small, .info-card p, .table-note, .section-label, .feed, .think span, .mind-block span,
.answer-line span, .owned-copy small, .empty-block, .empty-agent small, .link-btn, .back-link, .round-clock, .round-answer, .sb-center > span { font-size: 10px; }
.tag, .mini-btn, .pill { letter-spacing: .3px; }
.agent-card small, .build small, .duel-card small, .owned-copy small, .console-id small { line-height: 1.4; }

/* Label → value spacing */
.brand-copy { gap: 6px; }
.king-data .agent-id { margin: 6px 0 14px; }
.agent-card strong { line-height: 1.2; }
.agent-card small { margin-top: 4px; }
.form-section-head small { margin-top: 4px; }
.preview-class span, .stat span, .profile-stats span, .profile-token span, .market-stats span, .info-card .eyebrow { margin-bottom: 6px; }
.docs-nav .eyebrow { margin-bottom: 10px; }
.section-head { margin-bottom: 12px; }
.content-wrap > .section-head { margin-bottom: 16px; }
.challenge-panel h2 { margin: 8px 0 22px; }
.muted-label { margin-bottom: 8px; }
.countdown { margin-bottom: 22px; }
.owned-copy { gap: 6px; }
.directory-card h3 { margin: 8px 0 6px; }
.fuel { gap: 7px; }
.doc-section p + p { margin-top: 12px; }
.doc-section h2 { margin: 10px 0 18px; }
.feed-row { padding: 2px 0; }
.leader-row { min-height: 32px; }
.stat-line, .stat { min-height: 30px; }

/* Page headings: title and intro never touch */
.page-heading { gap: 28px; }
.page-heading > div { display: grid; gap: 0; }
@media (max-width: 780px) {
  .page-heading { display: grid; gap: 14px; }
  .page-heading p { max-width: none; }
  .nav-item { font-size: 10px; }
  .docs-nav button { font-size: 10px; }
}
.launch-wrap .preview-class span { font-size: 10px; margin-bottom: 6px; }
.brand-copy small { line-height: 1.4; }
.nav-item { line-height: 1.2; }
.doc-section h2 { line-height: 1.08; }
.agent-score { padding-top: 10px; }
.tracker-round { gap: 4px; padding: 7px 4px; }
.tracker-round b, .tracker-round em i { font-size: 10px; }
.tracker-round em i { width: 16px; height: 16px; }
.sb-side small { margin-bottom: 5px; }
.console-id small { margin-top: 4px; }
.steps li b { font-size: 10px; }

/* Arena hero panels share the panel-header pattern of the side panels */
.king-panel, .challenge-panel { padding: 0; min-height: 346px; display: flex; flex-direction: column; }
.king-panel .panel-header h1, .challenge-panel .panel-header h2 { font-family: var(--display); font-weight: 400; font-size: 17px; margin: 0; letter-spacing: .4px; line-height: 1; }
.king-panel .panel-header .status i { background: var(--green); }
.panel-body { padding: 16px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.king-panel .king-content { margin-top: 0; }
.challenge-panel .muted-label { margin-top: 2px; }

/* KING OF THE HILL: a light sweep crosses the title every few seconds */
.king-panel .panel-header h1 {
  background: linear-gradient(100deg, var(--blue) 0%, var(--blue) 42%, #9fd0ff 48%, #ffffff 50%, #9fd0ff 52%, var(--blue) 58%, var(--blue) 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: koth-shine 4s ease-in-out infinite;
}
@keyframes koth-shine {
  0%, 20% { background-position: 100% 0; filter: drop-shadow(0 0 0 rgba(7, 95, 199, 0)); }
  55% { filter: drop-shadow(0 0 6px rgba(7, 95, 199, .35)); }
  70%, 100% { background-position: 0% 0; filter: drop-shadow(0 0 0 rgba(7, 95, 199, 0)); }
}
@media (prefers-reduced-motion: reduce) { .king-panel .panel-header h1 { animation: none; color: var(--blue); background: none; } }

/* ---- King rocket: hover + pixel exhaust (replaces the coin spin) ---- */
.rocket { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.rocket-art { width: min(180px, 32vw); height: min(180px, 32vw); object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 14px 18px rgba(11, 53, 104, .18)); animation: rocket-hover 2.6s ease-in-out infinite; }
.exhaust { position: absolute; left: 50%; top: calc(50% + min(78px, 14vw)); width: 0; height: 0; z-index: 0; animation: rocket-hover 2.6s ease-in-out infinite; }
.exhaust i { position: absolute; left: var(--x); top: 0; width: var(--s); height: var(--s); background: var(--c); box-shadow: 0 0 0 1px rgba(7, 95, 199, .12); opacity: 0; animation: pixel-fall 2.1s steps(7) var(--d) infinite; }
@keyframes rocket-hover { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(6px); } }
@keyframes pixel-fall {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  10% { opacity: 1; }
  70% { opacity: .85; }
  100% { opacity: 0; transform: translate(calc(var(--x) * .35), 64px) scale(.5); }
}
.coin, .coin-body, .coin-edge { display: none; }
@media (prefers-reduced-motion: reduce) { .rocket-art, .exhaust { animation: none; } .exhaust { display: none; } }

/* ---- King frame: cobalt + ice-blue gradient border with a slow moving glint ---- */
@property --king-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.king-symbol {
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(7,95,199,.07) 1px, transparent 1px) padding-box,
    linear-gradient(90deg, rgba(7,95,199,.07) 1px, transparent 1px) padding-box,
    linear-gradient(var(--paper), var(--paper)) padding-box,
    conic-gradient(from var(--king-angle), #075fc7 0deg, #5ad0ff 70deg, #ffffff 100deg, #5ad0ff 130deg, #075fc7 200deg, #0b3568 290deg, #075fc7 360deg) border-box;
  background-size: 24px 24px, 24px 24px, auto, auto;
  background-position: center, center, 0 0, 0 0;
  box-shadow: 0 0 0 1px rgba(90, 208, 255, .25), 0 0 22px rgba(90, 208, 255, .28);
  animation: king-frame 6s linear infinite, king-glow 3s ease-in-out infinite;
}
@keyframes king-frame { to { --king-angle: 360deg; } }
@keyframes king-glow { 50% { box-shadow: 0 0 0 1px rgba(90, 208, 255, .45), 0 0 34px rgba(90, 208, 255, .45); } }
.crown-badge { background: linear-gradient(90deg, #075fc7, #2f9be8); color: white; box-shadow: 0 0 12px rgba(90, 208, 255, .45); }
@media (prefers-reduced-motion: reduce) { .king-symbol { animation: none; } }

/* ===== King of the Hill tile ===== */
.king-fx { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.king-fx-art { width: min(176px, 30vw); height: min(176px, 30vw); object-fit: contain; position: relative; z-index: 2; margin-bottom: 22px; filter: drop-shadow(0 12px 14px rgba(11, 53, 104, .22)); }

/* ===== Stronger King of the Hill presence ===== */
.king-panel { position: relative; border: 2px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, conic-gradient(from var(--king-angle), #075fc7, #5ad0ff, #ffffff, #5ad0ff, #075fc7, #0b3568, #075fc7) border-box; box-shadow: 0 0 0 1px rgba(90, 208, 255, .2), 0 10px 40px rgba(90, 208, 255, .22); animation: king-frame 6s linear infinite; }
.king-panel .panel-header { background: linear-gradient(90deg, #0b3568, #075fc7 55%, #2f9be8); color: white; border-bottom: 0; }
.king-panel .panel-header .eyebrow { color: rgba(255, 255, 255, .75); }
.king-panel .panel-header .status { color: white; }
.king-panel .panel-header h1 { background: linear-gradient(100deg, #ffffff 0%, #ffffff 40%, #5ad0ff 47%, #ffffff 50%, #5ad0ff 53%, #ffffff 60%, #ffffff 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 20px; text-shadow: none; }
.agent-card.is-king { border: 2px solid #5ad0ff; box-shadow: 0 0 0 1px rgba(7, 95, 199, .25), 0 0 18px rgba(90, 208, 255, .45); background: linear-gradient(180deg, rgba(90, 208, 255, .12), transparent 60%); }
.agent-card.is-king .rank { color: #075fc7; }
.leader-row.is-king { background: linear-gradient(90deg, rgba(90, 208, 255, .22), transparent); box-shadow: inset 3px 0 0 #5ad0ff; }
@media (prefers-reduced-motion: reduce) { .king-panel { animation: none !important; } }
.king-rays { display: none; }
.king-fx-art { filter: drop-shadow(0 14px 16px rgba(11, 53, 104, .22)); }
.challenge-panel .countdown small { font-size: .45em; margin-left: 4px; opacity: .6; }
.challenge-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: auto; }
.challenge-actions button { justify-content: center; }
.challenge-panel .panel-body > .primary-btn, .challenge-panel .panel-body > .outline-btn { margin-top: auto; justify-content: center; width: 100%; }

/* Connect wallet: compact, label and arrow sit together */
.wallet, .privy-wallet { min-width: 0; width: auto; justify-content: center; gap: 10px; padding: 0 14px; }
@media (max-width: 780px) { .wallet, .privy-wallet { min-width: 0; } }

/* Launch: optional socials dropdown */
.socials { border: 1px solid var(--line); margin-top: 2px; }
.socials summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 11px 12px; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.socials summary::-webkit-details-marker { display: none; }
.socials summary::after { content: "+"; margin-left: auto; font-size: 14px; line-height: 1; }
.socials[open] summary::after { content: "−"; }
.socials summary em { font-style: normal; font-weight: 400; text-transform: none; opacity: .7; }
.socials-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 12px 12px; }
.socials-body .field { margin: 0; }
@media (max-width: 640px) { .socials-body { grid-template-columns: minmax(0, 1fr); } }




/* ===== King: highlighted by colour only, no animation ===== */
.king-panel, .king-symbol, .king-panel .panel-header h1 { animation: none !important; }
.king-panel { background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(135deg, #075fc7, #5ad0ff 55%, #075fc7) border-box; box-shadow: 0 0 0 1px rgba(90, 208, 255, .2), 0 10px 30px rgba(90, 208, 255, .18); }
.king-panel .panel-header h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #ffffff; filter: none; }
.king-symbol {
  background:
    linear-gradient(rgba(7,95,199,.07) 1px, transparent 1px) padding-box,
    linear-gradient(90deg, rgba(7,95,199,.07) 1px, transparent 1px) padding-box,
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(135deg, #075fc7, #5ad0ff 50%, #075fc7) border-box;
  background-size: 24px 24px, 24px 24px, auto, auto; background-position: center, center, 0 0, 0 0;
  box-shadow: 0 0 0 1px rgba(90, 208, 255, .25), 0 0 18px rgba(90, 208, 255, .22);
}
.king-fx-art { margin-bottom: 0; }

/* Launch: upload your own avatar */
.avatar-actions { margin-left: auto; display: flex; gap: 6px; }
.avatar-upload { border-style: dashed; }
.avatar-upload span { display: grid; place-items: center; gap: 2px; font-size: 10px; font-weight: 800; letter-spacing: .3px; color: var(--blue); }
.avatar-upload span b { font-size: 20px; line-height: 1; font-weight: 400; }
.avatar-upload.has-image { border-style: solid; }
.avatar-upload.has-image img, .preview-avatar img { object-fit: contain; }
.avatar-grid.is-drop { outline: 2px dashed var(--blue); outline-offset: 4px; background: rgba(7, 95, 199, .05); }
.avatar-hint { margin: 10px 0 0; font-size: 10px; opacity: .75; }

/* ===== Rewards: treasury proof ===== */
.treasury-panel { border: 2px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(135deg, #075fc7, #5ad0ff 55%, #075fc7) border-box; margin-bottom: 10px; }
.treasury-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; background: linear-gradient(90deg, #0b3568, #075fc7 60%, #2f9be8); color: white; }
.treasury-head .eyebrow { color: rgba(255, 255, 255, .85); margin: 0; }
.treasury-head .status { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; }
.treasury-head .status i { width: 7px; height: 7px; border-radius: 50%; background: #5ad0ff; box-shadow: 0 0 0 3px rgba(90, 208, 255, .3); }
.treasury-main { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 16px; padding: 18px 16px 14px; align-items: end; }
.treasury-balance span, .treasury-address > span, .treasury-next span { display: block; font-size: 10px; font-weight: 800; margin-bottom: 6px; }
.treasury-balance b { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 5vw, 60px); line-height: 1; display: flex; align-items: baseline; gap: 10px; }
.treasury-balance small { font-family: var(--mono); font-size: 12px; font-weight: 800; }
.treasury-address { min-width: 0; }
.treasury-address b { display: block; font-size: 12px; overflow-wrap: anywhere; margin-bottom: 8px; }
.treasury-address div { display: flex; gap: 6px; flex-wrap: wrap; }
.treasury-bar { display: flex; height: 14px; margin: 0 16px; border: 1px solid var(--line); background: white; overflow: hidden; }
.treasury-bar i { display: block; height: 100%; }
.seg-pool { background: #075fc7; } .seg-fuel { background: #5ad0ff; } .seg-owed { background: #0b3568; } .seg-reserve { background: repeating-linear-gradient(45deg, rgba(7,95,199,.35) 0 4px, transparent 4px 8px); }
.treasury-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 16px; padding: 12px 16px; }
.treasury-legend div { display: grid; grid-template-columns: 12px auto 1fr; align-items: center; gap: 8px; font-size: 10px; }
.treasury-legend i { width: 12px; height: 12px; border: 1px solid var(--line); }
.treasury-legend span { font-weight: 800; }
.treasury-legend b { text-align: right; font-weight: 700; }
.treasury-next { border-top: 1px solid var(--line); padding: 12px 16px 14px; display: grid; gap: 2px; }
.treasury-next b { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.1; }
.treasury-next em { font-style: normal; font-size: 10px; opacity: .75; margin-top: 4px; }
.rewards-wrap .wide-grid { margin-bottom: 18px; }
.agent-cell { display: grid !important; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; white-space: normal !important; }
.agent-cell > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-avatar { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--paper); }
.mini-avatar .agent-art { width: 28px; height: 28px; }
.mini-avatar .mini-crown { width: 22px; height: 16px; }
.activity { border: 1px solid var(--line); margin-bottom: 18px; }
.activity-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 14px; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid rgba(7, 95, 199, .35); color: var(--blue); text-decoration: none; font-size: 11px; }
.activity-row:last-child { border-bottom: 0; }
.activity-row:hover { background: white; }
.activity-row b { display: block; font-weight: 700; }
.activity-row small { display: block; font-size: 10px; opacity: .7; margin-top: 3px; }
.activity-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--paper); }
.activity-icon .agent-art { width: 28px; height: 28px; }
.activity-icon .dot { width: 8px; height: 8px; background: var(--blue); }
.activity-icon .dot.is-failed { background: transparent; border: 1px dashed var(--blue); }
@media (max-width: 780px) { .treasury-main { grid-template-columns: minmax(0, 1fr); } }

/* ===== History: match cards ===== */
.history-wrap .tab small { opacity: .6; margin-left: 4px; font-size: 10px; }
.match-list { display: grid; gap: 8px; }
.match-card { display: grid; grid-template-columns: 70px minmax(0, 1fr) 34px minmax(0, 1fr) minmax(0, .9fr) 112px; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--line); background: transparent; color: var(--blue); font: inherit; text-align: left; cursor: pointer; transition: background .12s; }
.match-card:hover { background: white; }
.mc-meta b { display: block; font-size: 13px; }
.mc-meta small { display: block; font-size: 10px; opacity: .7; margin-top: 3px; }
.mc-side { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; }
.mc-name { min-width: 0; }
.mc-name b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-name small { display: block; font-size: 10px; opacity: .65; margin-top: 3px; }
.mc-side strong { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; opacity: .5; font-variant-numeric: tabular-nums; }
.mc-side.is-winner strong { opacity: 1; }
.mc-side.is-winner .mini-avatar { border-color: #5ad0ff; box-shadow: 0 0 0 1px #5ad0ff; }
.mc-vs { font-family: var(--display); font-size: 16px; text-align: center; opacity: .5; }
.mc-cats { display: flex; flex-wrap: wrap; gap: 4px; }
.mc-cats i { font-style: normal; font-size: 10px; font-weight: 700; border: 1px solid var(--line); padding: 3px 6px; }
.mc-result { justify-self: end; font-size: 10px; font-weight: 800; letter-spacing: .4px; padding: 6px 10px; border: 1px solid var(--line); text-align: center; }
.match-card.is-dethroned { border-left-color: #5ad0ff; }
.match-card.is-dethroned .mc-result { background: linear-gradient(90deg, #075fc7, #2f9be8); color: white; border-color: transparent; }
.match-card.is-defended { border-left-color: var(--blue); }
.match-card.is-defended .mc-result { background: var(--blue); color: white; border-color: var(--blue); }
.match-card.is-live { border-left-color: var(--green); }
.match-card.is-live .mc-result { background: var(--green); color: white; border-color: var(--green); }
.match-card.is-voided { opacity: .65; }
.match-card.is-voided .mc-result { border-style: dashed; }
@media (max-width: 980px) {
  .match-card { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); grid-template-areas: "meta meta result" "a vs b" "cats cats cats"; row-gap: 12px; }
  .mc-meta { grid-area: meta; display: flex; gap: 10px; align-items: baseline; } .mc-meta small { margin: 0; }
  .match-card > .mc-side:nth-of-type(2) { grid-area: a; } .mc-vs { grid-area: vs; } .match-card > .mc-side:nth-of-type(3) { grid-area: b; }
  .mc-cats { grid-area: cats; } .mc-result { grid-area: result; }
}
@media (max-width: 480px) { .mc-side { grid-template-columns: 28px minmax(0, 1fr); } .mc-side strong { grid-column: 1 / -1; font-size: 22px; } .mc-side .mini-avatar { width: 28px; height: 28px; } }
.activity-row small, .mc-name small { margin-top: 5px; }
@media (min-width: 981px) { .mc-meta small { margin-top: 5px; } }
.treasury-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(7, 95, 199, .35); padding-bottom: 2px; }
.treasury-link i { font-style: normal; font-size: 12px; }
.treasury-link:hover { border-bottom-color: var(--blue); }
.treasury-legend { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 20px; }
.treasury-legend div { grid-template-columns: 12px minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.treasury-legend i { margin-top: 2px; }
.treasury-legend span b { display: block; font-size: 10px; font-weight: 800; }
.treasury-legend span small { display: block; font-size: 10px; opacity: .7; margin-top: 4px; }
.treasury-legend strong { font-size: 13px; font-weight: 700; white-space: nowrap; }

/* ===== Agents directory ===== */
.directory { display: grid; gap: 10px; }
.dir-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dir-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dir-card { position: relative; display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); background: transparent; color: var(--blue); font: inherit; text-align: left; cursor: pointer; min-width: 0; transition: border-color .12s, background .12s, transform .12s; }
.dir-card:hover { background: white; border-color: var(--blue); transform: translateY(-2px); }
.dir-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 22px; }
.dir-rank { font-family: var(--display); font-size: 20px; line-height: 1; }
.dir-crown { font-size: 10px; font-weight: 800; letter-spacing: .4px; padding: 4px 8px; color: white; background: linear-gradient(90deg, #075fc7, #2f9be8); }
.dir-art { display: grid; place-items: center; height: 120px; background-color: var(--paper); border: 1px solid rgba(7, 95, 199, .2); background-image: linear-gradient(rgba(7,95,199,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(7,95,199,.06) 1px, transparent 1px); background-size: 20px 20px; background-position: center; }
.dir-art .agent-art { width: 96px; height: 96px; filter: drop-shadow(0 10px 12px rgba(11, 53, 104, .18)); }
.dir-art .mini-crown { width: 70px; height: 50px; }
.dir-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.dir-name b { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-name i { flex: none; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .3px; border: 1px solid var(--line); padding: 3px 6px; }
.dir-rating { display: flex; justify-content: space-between; align-items: baseline; font-size: 10px; }
.dir-rating span { font-weight: 800; opacity: .7; }
.dir-rating b { font-size: 14px; font-variant-numeric: tabular-nums; }
.dir-bar { height: 4px; background: rgba(7, 95, 199, .12); }
.dir-bar i { display: block; height: 100%; background: linear-gradient(90deg, #075fc7, #5ad0ff); }
.dir-card.is-featured .dir-art { height: 170px; }
.dir-card.is-featured .dir-art .agent-art { width: 140px; height: 140px; }
.dir-card.is-featured .dir-rank { font-size: 28px; }
.dir-card.is-featured .dir-name b { font-size: 30px; }
.dir-card.is-king { border: 2px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(135deg, #075fc7, #5ad0ff 55%, #075fc7) border-box; box-shadow: 0 8px 24px rgba(90, 208, 255, .2); }
.dir-card.is-king:hover { background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #075fc7, #5ad0ff 55%, #075fc7) border-box; }
@media (max-width: 1100px) { .dir-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px) { .dir-podium { grid-template-columns: minmax(0, 1fr); } .dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dir-card.is-featured .dir-art { height: 140px; } }
@media (max-width: 440px) { .dir-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .dir-card { transition: none; } .dir-card:hover { transform: none; } }
/* Treasury breakdown as an aligned list */
.treasury-legend { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px 16px 6px; }
.treasury-legend div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(7, 95, 199, .2); }
.treasury-legend div:last-child { border-bottom: 0; }
.treasury-legend i { margin-top: 0; align-self: center; }
.treasury-legend span b { font-size: 11px; }
.treasury-legend span small { margin-top: 3px; }
.treasury-legend strong { font-size: 14px; text-align: right; min-width: 92px; font-variant-numeric: tabular-nums; }
/* Legend: square and amount aligned to the label line, the hint sits below */
.treasury-legend div { align-items: start; }
.treasury-legend span b { line-height: 16px; }
.treasury-legend i { margin-top: 2px; align-self: start; }
.treasury-legend strong { line-height: 16px; align-self: start; }

/* Treasury breakdown: one line per part */
.treasury-legend div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; padding: 11px 0; }
.treasury-legend span { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.treasury-legend span b { flex: none; line-height: 1.3; }
.treasury-legend span small { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.treasury-legend span small::before { content: "· "; }
.treasury-legend strong { line-height: 1.3; }
@media (max-width: 520px) { .treasury-legend span small { display: none; } }

/* Launch: build cards with icons; the active card stays white so blue icons stay visible */
.build { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; }
.build-icon { width: 44px; height: 44px; object-fit: contain; }
.build > span { min-width: 0; display: grid; gap: 3px; }
.build:hover, .build.active { background: white; color: var(--blue); }
.build.active { box-shadow: inset 0 0 0 2px var(--blue); }
.launch-wrap .build b { color: var(--blue); }
.build-icon-sm { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; margin-right: 6px; }
.build { grid-template-columns: minmax(0, 1fr); justify-items: start; align-content: start; gap: 8px; }
.build-icon { width: 40px; height: 40px; }
.build > span { width: 100%; }
.build b, .build small { overflow-wrap: anywhere; }

/* ===== Docs ===== */
.docs-nav button { display: flex; align-items: center; gap: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: .3px; border-left: 2px solid transparent; padding-left: 8px; }
.docs-nav button b { font-weight: 800; opacity: .5; }
.docs-nav button.active { border-left-color: var(--blue); background: white; }
.docs-nav button.active b { opacity: 1; }
.doc-section { background: transparent; }
.doc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.doc-num { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: var(--blue); color: white; font-family: var(--display); font-size: 16px; }
.doc-head h2 { margin: 0; }
.doc-section > p { max-width: 720px; }
.doc-flow { display: flex; align-items: stretch; gap: 8px; margin-top: 20px; }
.doc-flow span { flex: 1; display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 92px; padding: 12px 8px; text-align: center; border: 1px solid var(--line); background: white; font-size: 10px; font-weight: 800; }
.doc-flow span img { width: 30px; height: 30px; }
.doc-flow i { align-self: center; font-style: normal; opacity: .6; }
.doc-steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.doc-steps li { counter-increment: step; border: 1px solid var(--line); background: white; padding: 14px; display: grid; gap: 6px; align-content: start; }
.doc-steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--display); font-size: 22px; line-height: 1; }
.doc-steps b { font-size: 12px; text-transform: uppercase; }
.doc-steps span { font-size: 11px; line-height: 1.55; }
.doc-builds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.doc-builds > div { border: 1px solid var(--line); background: white; padding: 14px; display: grid; gap: 6px; }
.doc-builds img { width: 44px; height: 44px; }
.doc-builds b { font-size: 13px; }
.doc-builds span { font-size: 11px; line-height: 1.5; }
.doc-builds em { display: block; font-style: normal; font-size: 10px; font-weight: 800; opacity: .6; }
.doc-rounds { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.doc-rounds span { flex: 1; border: 1px solid var(--blue); padding: 10px 12px; font-size: 10px; font-weight: 700; display: grid; gap: 4px; }
.doc-rounds span b { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1; }
.doc-rounds i { font-style: normal; opacity: .6; }
.doc-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px; margin-bottom: 14px; }
.doc-cats div { border: 1px solid rgba(7, 95, 199, .35); padding: 10px 12px; display: grid; gap: 4px; }
.doc-cats b { font-size: 11px; }
.doc-cats span { font-size: 11px; opacity: .8; }
.doc-checks { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; }
.doc-checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 12px; line-height: 1.55; }
.doc-checks li::before { content: "✓"; width: 18px; height: 18px; margin-top: 1px; background: var(--blue); color: white; font-size: 10px; display: grid; place-items: center; }
.score-bar-doc { display: flex; gap: 4px; margin: 4px 0 14px; }
.score-bar-doc span { min-width: 0; padding: 12px; background: var(--blue); color: white; font-size: 10px; font-weight: 800; display: grid; gap: 4px; }
.score-bar-doc span:nth-child(2) { background: #2f86ea; } .score-bar-doc span:nth-child(3) { background: #5ad0ff; color: var(--navy); }
.score-bar-doc b { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; }
.score-formula { font-size: 13px; }
.score-formula b { font-family: var(--display); font-weight: 400; font-size: 26px; }
.score-formula i { font-style: normal; margin: 0 6px; opacity: .6; }
.fee-flow { display: grid; gap: 4px; margin: 4px 0 16px; }
.fee-row { display: flex; gap: 4px; }
.fee-row span { min-width: 0; padding: 12px; font-size: 10px; font-weight: 800; display: grid; gap: 4px; overflow: hidden; }
.fee-row b { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; }
.fee-creator { background: white; border: 1px solid var(--line); }
.fee-arena { background: var(--blue); color: white; }
.fee-fuel { background: #2f86ea; color: white; } .fee-king { background: linear-gradient(135deg, #075fc7, #5ad0ff); color: white; }
.fee-gap { visibility: hidden; padding: 0 !important; }
.fee-sub span { padding: 10px 8px; } .fee-sub b { font-size: 20px; }
.doc-treasury { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; font-size: 11px; font-weight: 700; }
.api-list b { justify-self: start; padding: 3px 7px; color: white; }
.api-list b.method-get { background: var(--green); } .api-list b.method-post { background: var(--blue); }
.doc-section details summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-transform: uppercase; }
.doc-section details summary::-webkit-details-marker { display: none; }
.doc-section details summary::after { content: "+"; font-size: 16px; font-weight: 400; line-height: 1; }
.doc-section details[open] summary::after { content: "−"; }
@media (max-width: 900px) { .doc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .doc-builds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .doc-steps, .doc-builds { grid-template-columns: minmax(0, 1fr); }
  .doc-flow, .doc-rounds { flex-direction: column; } .doc-flow i, .doc-rounds i { transform: rotate(90deg); align-self: center; }
  .fee-row b { font-size: 20px; } .fee-sub span { font-size: 10px; padding: 8px 4px; } .fee-sub b { font-size: 16px; }
}

/* ===== Throne marker (the RULN logo marks the King) ===== */
.throne { display: inline-block; width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; }
.throne.lg { width: 30px; height: 30px; }
.crown-badge, .dir-crown { display: inline-flex; align-items: center; gap: 6px; background: white !important; color: var(--blue) !important; border: 1px solid #5ad0ff; box-shadow: 0 0 0 1px rgba(90, 208, 255, .25) !important; }
.crown-badge .throne, .dir-crown .throne { width: 14px; height: 14px; }
.sb-crown { left: 26px; top: -12px; }
.primary-btn .throne { filter: brightness(0) invert(1); }

/* Launch preview placeholder */
.placeholder-art { width: 150px; height: 150px; object-fit: contain; opacity: .9; }
.launch-wrap .preview-avatar .placeholder-art { width: 160px; height: 160px; filter: none; }

/* ===== Arena polish ===== */
.agent-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dir-card.is-compact { padding: 10px; gap: 8px; }
.dir-card.is-compact .dir-rank { font-size: 15px; }
.dir-card.is-compact .dir-art { height: 84px; }
.dir-card.is-compact .dir-art .agent-art { width: 66px; height: 66px; }
.dir-card.is-compact .dir-name { flex-direction: column; align-items: flex-start; gap: 5px; }
.dir-card.is-compact .dir-name b { font-size: 18px; max-width: 100%; }
.dir-card.is-compact .dir-crown { padding: 3px 6px; font-size: 10px; }
.feed-row { grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(7, 95, 199, .15); }
.feed-row:last-child { border-bottom: 0; }
.feed-row p { font-weight: 600; line-height: 1.4; }
.feed-row time { font-size: 10px; opacity: .6; white-space: nowrap; }
.feed-mark { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(7, 95, 199, .25); background: var(--paper); }
.feed-mark .feed-event-icon { width: 26px; height: 26px; display: block; object-fit: contain; }
.feed-mark .agent-art { width: 22px; height: 22px; }
.feed-mark .throne { width: 20px; height: 20px; }
.feed-mark > i { width: 6px; height: 6px; background: var(--blue); }
.feed-row.kind-king-dethroned .feed-mark { border-color: #5ad0ff; box-shadow: 0 0 0 1px #5ad0ff; background: white; }
.feed-row.kind-king-defended .feed-mark { border-color: var(--blue); }
.feed-row.kind-agent-launched .feed-mark, .feed-row.kind-rewards-paid .feed-mark { border-color: var(--green); }
.feed-row.kind-challenge-failed { opacity: .6; }
.leader-head, .leader-row { grid-template-columns: 22px minmax(0, 1fr) 40px 56px; }
.leader-row strong { display: flex; align-items: center; gap: 8px; }
.leader-row .mini-avatar { width: 26px; height: 26px; flex: none; }
.leader-row .mini-avatar .agent-art { width: 21px; height: 21px; }
.leader-row { min-height: 38px; }
@media (max-width: 1260px) { .agent-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 960px) { .agent-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 780px) { .agent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.challenge-panel .panel-header h2, .king-panel .panel-header h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }