/* /Components/Layout/FactionBackdrop.razor.rz.scp.css */ /* The faction backdrop — the chosen path, playing behind everything in the player shell. Four layers over the void: __canvas the world itself, from js/achrona-backdrop.js (topo for the Purists, atlas for the Augmented). Held back to about half strength: on Choose Path it is the screen, here it is the ground a page of text has to stay readable on. __glow two pools of the faction's light, one high and one low __weave a faint diagonal weave, and only while there is no world yet, so the very first paint is not a flat rectangle. Over the canvas it would read as moire. __vignette pulls the corners down so page content keeps its contrast It sits at z-index 0 with .ach-shell__body lifted to 1. A negative z-index would be the obvious way to put it behind everything, and it does not work: bootstrap.min.css gives its own opaque background, and an element's background paints over every negative-z-index layer beneath it, so the whole thing was invisible. Everything that has to stay on top already clears 1 by a distance — the top bar is 50, the Oracle 200, the break overlay 2000, MudBlazor's overlays higher still — and all of them sit outside .ach-shell__body. A page that wants its own full-bleed art paints over this; the rest read through it. */ .ach-backdrop[b-7hs7u30gdj] { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--color-void); } .ach-backdrop__canvas[b-7hs7u30gdj] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; /* Long, because this crossfades when a team commits to a path, not on every navigation. */ transition: opacity 1.2s ease; } /* No world to show yet: nothing to fade out, and nothing to fade in either. */ .ach-backdrop[data-resolved="false"] .ach-backdrop__canvas[b-7hs7u30gdj] { opacity: 0; } /* Except when the module started a world from the one it remembered from last time — data-hinted, written by FactionBackdrop.razor.js and by nothing else. The canvas is safe to show before the track resolves in a way the accent colour is not: a world paints in its own colours, so the worst a wrong guess looks like is the other side's map, crossfading out a moment later. The glow below keeps guessing nothing and stays held back until the answer actually arrives. */ .ach-backdrop[data-resolved="false"][data-hinted] .ach-backdrop__canvas[b-7hs7u30gdj] { opacity: 0.5; } .ach-backdrop[data-resolved="false"][data-hinted] .ach-backdrop__weave[b-7hs7u30gdj] { opacity: 0; } .ach-backdrop__glow[b-7hs7u30gdj], .ach-backdrop__weave[b-7hs7u30gdj], .ach-backdrop__vignette[b-7hs7u30gdj] { position: absolute; inset: 0; transition: background 1.2s ease, opacity 1.2s ease; } .ach-backdrop__glow[b-7hs7u30gdj] { background: radial-gradient(ellipse 70% 55% at 78% 8%, rgb(var(--faction-accent-rgb) / 0.18), transparent 70%), radial-gradient(ellipse 80% 60% at 14% 96%, rgb(var(--faction-accent-rgb) / 0.13), transparent 72%), linear-gradient(170deg, rgb(var(--faction-accent-rgb) / 0.05), transparent 55%); } /* Before the team's track has been resolved the faction is only a default, so the light is held back rather than guessed at — a Purist team never gets a moment of Augmented blue. */ .ach-backdrop[data-resolved="false"] .ach-backdrop__glow[b-7hs7u30gdj] { opacity: 0.25; } .ach-backdrop__weave[b-7hs7u30gdj] { opacity: 0; background: repeating-linear-gradient(58deg, rgb(var(--faction-highlight-rgb) / 0.05) 0 1px, transparent 1px 46px), repeating-linear-gradient(-58deg, rgb(var(--faction-accent-rgb) / 0.04) 0 1px, transparent 1px 64px); } .ach-backdrop[data-resolved="false"] .ach-backdrop__weave[b-7hs7u30gdj] { opacity: 0.2; } .ach-backdrop__vignette[b-7hs7u30gdj] { background: radial-gradient(ellipse 78% 68% at 50% 45%, transparent 30%, rgb(4 6 16 / 0.7) 100%); } /* /Components/Layout/LeaderboardTopBar.razor.rz.scp.css */ .ach-wall-top__status[data-connected="true"][b-mi07yig7k2] { color: var(--pur-300); } .ach-wall-top__status[data-connected="false"][b-mi07yig7k2] { color: var(--color-gold-300); } /* /Components/Layout/MainLayout.razor.rz.scp.css */ [b-yvo6e7nuvw] .mud-layout { min-height: 100vh; } [b-yvo6e7nuvw] .mud-drawer { background: linear-gradient(180deg, #15161d 0%, #16111f 65%, #120d1a 100%) !important; border-right: 1px solid rgba(165, 43, 217, 0.28) !important; } [b-yvo6e7nuvw] .mud-main-content { position: relative; } /* The .assistant-drawer / .assistant-messages / .assistant-input rules that used to sit here styled an AI assistant drawer in the admin branch of MainLayout that no player or admin could ever reach. Both the markup and these rules are gone: players chat through the Oracle, admins through /admin/ai-assistants/{id}/playtest. */ /* Achrona player chrome. Admins keep the MudBlazor layout above; everything below only applies inside the player shell. */ .ach-shell[b-yvo6e7nuvw] { min-height: 100vh; /* FactionBackdrop covers this, so it is only what shows if the backdrop ever fails to paint — the abyss rather than the grey that bootstrap.min.css would otherwise leave. */ background: var(--color-abyss); color: var(--color-silver-100); font-family: var(--font-body); overflow-x: hidden; } /* Lifted above the backdrop, which sits at z-index 0 so that it clears 's own background. See FactionBackdrop.razor.css for why a negative z-index does not work here. */ .ach-shell__body[b-yvo6e7nuvw] { position: relative; z-index: 1; display: block; } /* /Components/Layout/NavMenu.razor.rz.scp.css */ .fantasy-divider[b-jg7uxkxzab] { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px 0; color: #c8a0ec; font-family: 'Cinzel', serif; font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; } .fantasy-divider[b-jg7uxkxzab]::before, .fantasy-divider[b-jg7uxkxzab]::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #a52bd955, #ff195a4d, #a52bd955); } /* /Components/Layout/PlayerTopBar.razor.rz.scp.css */ /* Top navigation, ported from the sticky header in "Achrona Challenge Site.dc.html". */ .ach-top[b-vhlsdvkl1f] { position: sticky; top: 0; z-index: var(--z-floating); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 62px; padding: 0 var(--space-6); background: rgb(7 9 24 / 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgb(var(--aug-500-rgb) / 0.22); } /* This bar is translucent over the backdrop canvas, and that canvas changes every frame — so the blur behind the bar is recomputed every frame too, for the full width of the viewport. It is worth it on a machine that can afford it. On one the backdrop worker has already stepped down (see achrona-backdrop-worker.js), it is not: a slightly more opaque bar reads almost the same and costs nothing per frame. */ :root[data-ach-tier="2"] .ach-top[b-vhlsdvkl1f], :root[data-ach-tier="3"] .ach-top[b-vhlsdvkl1f] { background: rgb(7 9 24 / 0.95); backdrop-filter: none; -webkit-backdrop-filter: none; } .ach-top__left[b-vhlsdvkl1f] { display: flex; align-items: center; gap: var(--space-6); min-width: 0; } .ach-top__wordmark[b-vhlsdvkl1f] { font-family: var(--font-display); font-size: 26px; color: var(--text-primary); letter-spacing: 0.5px; text-decoration: none; text-shadow: 0 0 14px rgb(var(--aug-600-rgb) / 0.6); white-space: nowrap; } .ach-top__nav[b-vhlsdvkl1f] { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .ach-top__nav[b-vhlsdvkl1f]::-webkit-scrollbar { display: none; } .ach-top__link[b-vhlsdvkl1f] { position: relative; display: block; padding: 20px 13px; font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-sm); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--color-silver-300); transition: color var(--transition-fast); } .ach-top__link:hover[b-vhlsdvkl1f] { color: var(--text-primary); } .ach-top__link--active[b-vhlsdvkl1f] { color: var(--text-primary); } /* Only the active link shows the glowing underline. */ .ach-top__underline[b-vhlsdvkl1f] { display: none; } .ach-top__link--active .ach-top__underline[b-vhlsdvkl1f] { display: block; position: absolute; left: 13px; right: 13px; bottom: 0; height: 2px; background: var(--aug-500); box-shadow: 0 0 10px rgb(var(--aug-600-rgb) / 0.9); } .ach-top__right[b-vhlsdvkl1f] { display: flex; align-items: center; gap: var(--space-4); } .ach-top__clock[b-vhlsdvkl1f] { font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--pur-300); white-space: nowrap; } .ach-top__user[b-vhlsdvkl1f] { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-silver-200); white-space: nowrap; } .ach-top__logout[b-vhlsdvkl1f] { text-decoration: none; font-size: var(--text-xs); } @media (max-width: 900px) { .ach-top[b-vhlsdvkl1f] { flex-wrap: wrap; padding: var(--space-2) var(--space-4); } .ach-top__left[b-vhlsdvkl1f] { order: 1; width: 100%; gap: var(--space-4); } .ach-top__right[b-vhlsdvkl1f] { order: 0; width: 100%; justify-content: space-between; } .ach-top__link[b-vhlsdvkl1f] { padding: 10px 10px; } .ach-top__user[b-vhlsdvkl1f] { display: none; } } /* /Components/Layout/ReconnectModal.razor.rz.scp.css */ .components-reconnect-first-attempt-visible[b-aj4opppsxl], .components-reconnect-repeated-attempt-visible[b-aj4opppsxl], .components-reconnect-failed-visible[b-aj4opppsxl], .components-pause-visible[b-aj4opppsxl], .components-resume-failed-visible[b-aj4opppsxl], .components-rejoining-animation[b-aj4opppsxl] { display: none; } #components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-aj4opppsxl], #components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-aj4opppsxl], #components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-aj4opppsxl], #components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-aj4opppsxl], #components-reconnect-modal.components-reconnect-retrying[b-aj4opppsxl], #components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-aj4opppsxl], #components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-aj4opppsxl], #components-reconnect-modal.components-reconnect-failed[b-aj4opppsxl], #components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-aj4opppsxl] { display: block; } #components-reconnect-modal[b-aj4opppsxl] { width: 20rem; margin: 20vh auto; padding: 2rem; font-family: var(--font-body); color: var(--color-silver-100); background: linear-gradient(160deg, #0d1428 0%, #060a18 100%); border: 1px solid rgb(var(--aug-400-rgb) / 0.35); border-radius: var(--radius-xl); box-shadow: 0 0 50px rgb(var(--aug-600-rgb) / 0.25), 0 20px 60px rgb(0 0 0 / 0.6); opacity: 0; transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete; animation: components-reconnect-modal-fadeOutOpacity-b-aj4opppsxl 0.5s both; &[open] { animation: components-reconnect-modal-slideUp-b-aj4opppsxl 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-aj4opppsxl 0.5s ease-in-out 0.3s; animation-fill-mode: both; } } #components-reconnect-modal[b-aj4opppsxl]::backdrop { background-color: rgba(0, 0, 0, 0.6); animation: components-reconnect-modal-fadeInOpacity-b-aj4opppsxl 0.5s ease-in-out; opacity: 1; } @keyframes components-reconnect-modal-slideUp-b-aj4opppsxl { 0% { transform: translateY(30px) scale(0.95); } 100% { transform: translateY(0); } } @keyframes components-reconnect-modal-fadeInOpacity-b-aj4opppsxl { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes components-reconnect-modal-fadeOutOpacity-b-aj4opppsxl { 0% { opacity: 1; } 100% { opacity: 0; } } .components-reconnect-container[b-aj4opppsxl] { display: flex; flex-direction: column; align-items: center; gap: 1rem; } #components-reconnect-modal p[b-aj4opppsxl] { margin: 0; text-align: center; color: var(--color-silver-300); } #components-reconnect-modal button[b-aj4opppsxl] { border: 1px solid var(--aug-400); background: linear-gradient(135deg, var(--aug-800), var(--aug-600)); color: var(--color-white); padding: 4px 24px; border-radius: var(--radius-md); box-shadow: 0 0 20px rgb(var(--aug-600-rgb) / 0.4); cursor: pointer; transition: box-shadow var(--transition-fast); } #components-reconnect-modal button:hover[b-aj4opppsxl] { box-shadow: 0 0 34px rgb(var(--aug-600-rgb) / 0.7); } #components-reconnect-modal button:active[b-aj4opppsxl] { box-shadow: 0 0 20px rgb(var(--aug-600-rgb) / 0.4); } .components-rejoining-animation[b-aj4opppsxl] { position: relative; width: 80px; height: 80px; } .components-rejoining-animation div[b-aj4opppsxl] { position: absolute; border: 3px solid var(--aug-400); opacity: 1; border-radius: 50%; animation: components-rejoining-animation-b-aj4opppsxl 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .components-rejoining-animation div:nth-child(2)[b-aj4opppsxl] { animation-delay: -0.5s; } @keyframes components-rejoining-animation-b-aj4opppsxl { 0% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; } 4.9% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; } 5% { top: 40px; left: 40px; width: 0; height: 0; opacity: 1; } 100% { top: 0px; left: 0px; width: 80px; height: 80px; opacity: 0; } } /* /Components/Pages/Leaderboard.razor.rz.scp.css */ /* The admin wall: two views over the same read, drawn on the layout's faction backdrop. The scrim below is all this screen adds, and it is translucent so that backdrop still reads through. */ .ach-wall[b-981savs6lb] { min-height: calc(100vh - 62px); background: linear-gradient(180deg, rgb(5 8 26 / 0.58) 0%, rgb(4 7 19 / 0.78) 100%); } .ach-wall__content[b-981savs6lb] { max-width: 1340px; } /* The Desync belongs to no path, and a team that has not chosen one has no colour either. */ .ach-wall [data-faction="void"][b-981savs6lb] { --faction-accent: var(--color-silver-200); --faction-accent-rgb: 148 163 184; --faction-panel-bg: radial-gradient(ellipse 70% 130% at 14% 50%, #14161f 0%, #0a0b12 45%, #05060c 100%); } .ach-wall__head[b-981savs6lb] { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; margin-bottom: var(--space-8); } .ach-wall__kicker[b-981savs6lb] { margin: 0 0 var(--space-2); color: var(--aug-400); letter-spacing: 0.3em; } .ach-wall__subtitle[b-981savs6lb] { margin-top: var(--space-3); } .ach-wall__tabs[b-981savs6lb] { display: flex; gap: var(--space-2); padding: 5px; border: 1px solid rgb(148 163 184 / 0.22); border-radius: var(--radius-lg); background: rgb(6 9 24 / 0.66); } .ach-wall__tab[b-981savs6lb] { padding: 9px 18px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; cursor: pointer; font-family: var(--font-heading); font-weight: var(--weight-extrabold); font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-silver-300); transition: color var(--transition-default), background var(--transition-default); } .ach-wall__tab:hover[b-981savs6lb] { color: var(--color-silver-100); } .ach-wall__tab[data-active="true"][b-981savs6lb] { border-color: rgb(var(--aug-300-rgb) / 0.6); background: rgb(var(--aug-500-rgb) / 0.16); color: var(--color-white); } .ach-wall__message[b-981savs6lb] { margin: 72px 0; text-align: center; } .ach-wall__message--error[b-981savs6lb] { color: #fca5a5; } /* ── Summary tiles ─────────────────────────────────────────────────────── */ .ach-wall__tiles[b-981savs6lb] { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-8); } .ach-wall__tile[b-981savs6lb] { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); border: 1px solid rgb(148 163 184 / 0.2); border-radius: var(--radius-lg); background: linear-gradient(150deg, rgb(20 24 44 / 0.6), rgb(6 9 24 / 0.6)); } .ach-wall__tile--aug[b-981savs6lb] { border-color: rgb(var(--aug-400-rgb) / 0.28); background: linear-gradient(150deg, rgb(12 30 62 / 0.6), rgb(6 9 24 / 0.6)); } .ach-wall__tile--pur[b-981savs6lb] { border-color: rgb(var(--pur-400-rgb) / 0.28); background: linear-gradient(150deg, rgb(6 35 26 / 0.55), rgb(6 9 24 / 0.6)); } .ach-wall__tile--gold[b-981savs6lb] { border-color: rgb(251 191 36 / 0.28); background: linear-gradient(150deg, rgb(58 40 6 / 0.5), rgb(6 9 24 / 0.6)); } .ach-wall__tile-value[b-981savs6lb] { font-weight: var(--weight-bold); font-size: var(--text-2xl); line-height: var(--leading-none); color: var(--color-silver-100); } .ach-wall__tile--aug .ach-wall__tile-value[b-981savs6lb] { color: var(--aug-300); } .ach-wall__tile--pur .ach-wall__tile-value[b-981savs6lb] { color: var(--pur-300); } .ach-wall__tile--gold .ach-wall__tile-value[b-981savs6lb] { color: var(--color-gold-300); } .ach-wall__tile-label[b-981savs6lb] { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-silver-300); } .ach-wall__slash[b-981savs6lb] { padding: 0 2px; color: var(--color-silver-500); } /* ── Tables ────────────────────────────────────────────────────────────── */ .ach-wall__table[b-981savs6lb] { overflow: hidden; border: 1px solid rgb(148 163 184 / 0.18); border-radius: var(--radius-xl); background: linear-gradient(150deg, rgb(20 24 44 / 0.35) 0%, rgb(6 9 24 / 0.8) 60%); backdrop-filter: blur(8px); } .ach-wall__table--puzzle[b-981savs6lb] { border-color: rgb(var(--faction-accent-rgb, var(--aug-400-rgb)) / 0.28); background: linear-gradient(150deg, rgb(var(--faction-accent-rgb, var(--aug-400-rgb)) / 0.08) 0%, rgb(6 9 24 / 0.82) 58%); } .ach-wall__columns[b-981savs6lb], .ach-wall__row[b-981savs6lb] { display: grid; align-items: center; column-gap: var(--space-3); padding: var(--space-4) var(--space-6); } .ach-wall__table--teams .ach-wall__columns[b-981savs6lb], .ach-wall__table--teams .ach-wall__row[b-981savs6lb] { grid-template-columns: 70px minmax(180px, 1fr) minmax(110px, 160px) minmax(64px, 92px) minmax(74px, 108px) minmax(70px, 96px) minmax(80px, 116px); } .ach-wall__table--puzzle .ach-wall__columns[b-981savs6lb], .ach-wall__table--puzzle .ach-wall__row[b-981savs6lb] { grid-template-columns: 70px minmax(180px, 1fr) minmax(80px, 118px) minmax(88px, 132px) minmax(74px, 108px) minmax(116px, 148px); } .ach-wall__columns[b-981savs6lb] { border-bottom: 1px solid rgb(148 163 184 / 0.16); background: rgb(255 255 255 / 0.035); font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-silver-200); } .ach-wall__num[b-981savs6lb] { text-align: right; } .ach-wall__group[b-981savs6lb] { border-top: 1px solid rgb(255 255 255 / 0.05); } .ach-wall__group:first-of-type[b-981savs6lb] { border-top: 0; } .ach-wall__row[b-981savs6lb] { min-height: 74px; cursor: pointer; transition: background var(--transition-default); } .ach-wall__row:hover[b-981savs6lb] { background: rgb(255 255 255 / 0.05); } .ach-wall__row[data-rank="1"][b-981savs6lb] { background: rgb(251 191 36 / 0.055); } .ach-wall__row[data-status="locked"][b-981savs6lb], .ach-wall__row[data-status="not-on-path"][b-981savs6lb] { opacity: 0.5; } .ach-wall__index[b-981savs6lb] { display: flex; align-items: center; gap: 11px; font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--color-silver-400); } .ach-wall__rail[b-981savs6lb] { width: 3px; height: 30px; border-radius: 2px; background: rgb(255 255 255 / 0.1); } .ach-wall__group[data-faction] .ach-wall__rail[b-981savs6lb] { background: var(--faction-accent, rgb(255 255 255 / 0.1)); } .ach-wall__row[data-rank="1"] .ach-wall__rail[b-981savs6lb] { background: var(--color-gold-300); } .ach-wall__row[data-rank="2"] .ach-wall__rail[b-981savs6lb] { background: var(--color-silver-200); } .ach-wall__row[data-rank="3"] .ach-wall__rail[b-981savs6lb] { background: var(--color-gold-500); } .ach-wall__row[data-rank="1"] .ach-wall__index[b-981savs6lb] { color: var(--color-gold-300); } .ach-wall__row[data-rank="2"] .ach-wall__index[b-981savs6lb] { color: var(--color-silver-200); } .ach-wall__row[data-rank="3"] .ach-wall__index[b-981savs6lb] { color: var(--color-gold-500); } .ach-wall__team[b-981savs6lb] { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .ach-wall__team-name[b-981savs6lb] { display: flex; align-items: center; gap: 9px; font-family: var(--font-heading); font-weight: var(--weight-extrabold); font-size: var(--text-xl); text-wrap: pretty; color: var(--color-silver-200); } .ach-wall__row[data-rank="1"] .ach-wall__team-name[b-981savs6lb], .ach-wall__row[data-rank="2"] .ach-wall__team-name[b-981savs6lb], .ach-wall__row[data-rank="3"] .ach-wall__team-name[b-981savs6lb] { color: var(--color-white); } .ach-wall__caret[b-981savs6lb] { display: inline-block; font-size: 11px; color: var(--color-silver-500); transition: transform var(--transition-fast), color var(--transition-fast); } .ach-wall__row[data-open="true"] .ach-wall__caret[b-981savs6lb] { transform: rotate(90deg); color: var(--color-silver-200); } .ach-wall__roster[b-981savs6lb] { display: flex; align-items: center; gap: 5px; padding-left: 20px; } .ach-wall__avatar[b-981savs6lb] { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border: 1px solid rgb(var(--faction-accent-rgb, var(--aug-400-rgb)) / 0.45); border-radius: 50%; background: rgb(var(--faction-accent-rgb, var(--aug-400-rgb)) / 0.14); font-size: 8px; font-weight: var(--weight-bold); color: var(--faction-accent, var(--aug-300)); } .ach-wall__avatar--lg[b-981savs6lb] { flex: 0 0 auto; width: 32px; height: 32px; font-size: 11px; } .ach-wall__roster-label[b-981savs6lb] { margin-left: 3px; font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-silver-400); } .ach-wall__path[b-981savs6lb] { border-color: rgb(var(--faction-accent-rgb, var(--aug-400-rgb)) / 0.45); background: rgb(var(--faction-accent-rgb, var(--aug-400-rgb)) / 0.13); color: var(--faction-accent, var(--color-silver-300)); } .ach-wall__value[b-981savs6lb] { color: var(--color-silver-200); } .ach-wall__value[data-complete="true"][b-981savs6lb] { color: var(--pur-300); } .ach-wall__score[b-981savs6lb] { font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--color-gold-200); } .ach-wall__status[data-status="completed"][b-981savs6lb] { border-color: rgb(var(--pur-400-rgb) / 0.6); background: rgb(2 44 34 / 0.6); color: var(--pur-300); } .ach-wall__status[data-status="active"][b-981savs6lb] { border-color: rgb(251 191 36 / 0.75); background: rgb(69 42 4 / 0.6); color: var(--color-gold-200); } .ach-wall__status[data-status="locked"][b-981savs6lb], .ach-wall__status[data-status="not-on-path"][b-981savs6lb] { border-color: rgb(148 163 184 / 0.25); background: rgb(255 255 255 / 0.03); color: var(--color-silver-400); } /* ── Expanded roster ───────────────────────────────────────────────────── */ .ach-wall__members[b-981savs6lb] { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-2); padding: 6px var(--space-6) 22px 86px; background: rgb(255 255 255 / 0.02); } .ach-wall__member[b-981savs6lb] { display: flex; align-items: center; gap: 11px; padding: var(--space-2) var(--space-3); border: 1px solid rgb(var(--faction-accent-rgb, var(--aug-400-rgb)) / 0.22); border-radius: var(--radius-lg); background: rgb(6 9 24 / 0.6); } .ach-wall__member-name[b-981savs6lb] { min-width: 0; font-weight: var(--weight-semibold); color: var(--color-silver-100); } /* ── Per-puzzle view ───────────────────────────────────────────────────── */ .ach-wall__puzzle-tabs[b-981savs6lb] { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: var(--space-6); } .ach-wall__puzzle-tab[b-981savs6lb] { padding: 9px 15px; border: 1px solid rgb(148 163 184 / 0.22); border-radius: var(--radius-md); background: rgb(6 9 24 / 0.6); cursor: pointer; font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-xs); letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-silver-300); transition: color var(--transition-default), border-color var(--transition-default), background var(--transition-default); } .ach-wall__puzzle-tab:hover[b-981savs6lb] { color: var(--color-silver-100); } .ach-wall__puzzle-tab[data-active="true"][b-981savs6lb] { border-color: rgb(var(--faction-accent-rgb, 148 163 184) / 0.65); background: rgb(var(--faction-accent-rgb, 148 163 184) / 0.16); color: var(--faction-accent, var(--color-silver-100)); } .ach-wall__hero[b-981savs6lb] { position: relative; overflow: hidden; padding: var(--space-8) var(--space-8); margin-bottom: var(--space-6); border: 1px solid rgb(var(--faction-accent-rgb, 148 163 184) / 0.4); border-radius: var(--radius-2xl); background: var(--faction-panel-bg, radial-gradient(ellipse 70% 130% at 14% 50%, #14161f 0%, #0a0b12 45%, #05060c 100%)); box-shadow: 0 0 44px rgb(var(--faction-accent-rgb, 148 163 184) / 0.12); } .ach-wall__halo[b-981savs6lb] { position: absolute; top: 50%; right: -60px; width: 340px; height: 340px; margin-top: -170px; border-radius: 50%; background: radial-gradient(circle at center, rgb(var(--faction-accent-rgb, 148 163 184) / 0.18) 0%, transparent 65%); pointer-events: none; } .ach-wall__hero-head[b-981savs6lb] { position: relative; display: flex; align-items: center; gap: var(--space-4); } .ach-wall__sigil[b-981savs6lb] { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 50px; height: 50px; border: 1px solid rgb(var(--faction-accent-rgb, 148 163 184) / 0.5); border-radius: var(--radius-lg); background: rgb(var(--faction-accent-rgb, 148 163 184) / 0.16); font-size: 24px; color: var(--faction-accent, var(--color-silver-100)); box-shadow: 0 0 18px rgb(var(--faction-accent-rgb, 148 163 184) / 0.3); } .ach-wall__hero-kicker[b-981savs6lb] { margin: 0 0 var(--space-1); color: var(--faction-accent, var(--color-silver-300)); letter-spacing: 0.22em; } .ach-wall__hero-title[b-981savs6lb] { margin: 0; font-size: var(--text-3xl); line-height: var(--leading-tight); color: var(--color-white); text-shadow: 0 0 22px rgb(var(--faction-accent-rgb, 148 163 184) / 0.4); } .ach-wall__hero-blurb[b-981savs6lb] { position: relative; max-width: 62ch; margin-top: var(--space-4); text-wrap: pretty; } .ach-wall__hero-stats[b-981savs6lb] { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-top: var(--space-6); } .ach-wall__hero-stats .ach-wall__tile[b-981savs6lb] { align-items: center; border-color: rgb(var(--faction-accent-rgb, 148 163 184) / 0.25); background: rgb(4 7 19 / 0.5); text-align: center; } .ach-wall__hero-stats .ach-wall__tile-value[b-981savs6lb] { color: var(--faction-accent, var(--color-silver-100)); } .ach-wall__hero-stats .ach-wall__tile--gold[b-981savs6lb] { border-color: rgb(251 191 36 / 0.3); } @media (max-width: 900px) { .ach-wall__table[b-981savs6lb] { overflow-x: auto; } .ach-wall__columns[b-981savs6lb], .ach-wall__row[b-981savs6lb] { min-width: 820px; } .ach-wall__members[b-981savs6lb] { padding-left: var(--space-6); } } /* /Components/Pages/Preview/ChoosePathPreview.razor.rz.scp.css */ /* Preview-only controls. Nothing here ships on a player screen. */ .preview-controls[b-87cw6u67tt] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); background: var(--color-shadow); border-bottom: 1px solid var(--border-subtle); } .preview-controls__label[b-87cw6u67tt] { font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-silver-400); } .preview-controls__label:not(:first-child)[b-87cw6u67tt] { margin-left: var(--space-4); } .preview-controls button[b-87cw6u67tt] { font-family: var(--font-mono); font-size: var(--text-xs); padding: var(--space-1) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: transparent; color: var(--color-silver-200); cursor: pointer; } .preview-controls button:hover:not(:disabled)[b-87cw6u67tt] { border-color: var(--aug-400); color: var(--color-white); } .preview-controls button:disabled[b-87cw6u67tt] { opacity: 0.4; cursor: not-allowed; } /* /Components/Pages/Preview/JourneyPreview.razor.rz.scp.css */ /* The state switcher above the preview map. Preview chrome only — nothing here ships to a player. */ .ach-preview-states[b-sw7gafjs4h] { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-6); border-bottom: 1px dashed rgb(245 158 11 / 0.25); } .ach-preview-states__link[b-sw7gafjs4h] { padding: 3px var(--space-3); border: 1px solid rgb(148 163 184 / 0.3); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--color-silver-400); } .ach-preview-states__link--on[b-sw7gafjs4h] { border-color: rgb(var(--aug-400-rgb) / 0.6); color: var(--aug-300); } /* /Components/Player/Challenge/ChallengeView.razor.rz.scp.css */ /* The challenge screen, ported from "Achrona Challenge Page (standalone).html". The design carries its own palette on the wrapper (--ac, --bd-h, --ink2 and friends, swapped wholesale between the two paths). Everything here is written against the faction tokens the app already has instead — data-faction on the root does the swapping, exactly as on Choose Path — so there is one palette in the codebase rather than two that have to be kept in step. ::deep is needed throughout: the columns are filled by child components, and scoped CSS does not cross a component boundary on its own. */ .ach-chal[b-65dczq8nrd] { position: relative; min-height: 100vh; color: var(--color-silver-100); font-family: var(--font-body); } /* ── backdrop ──────────────────────────────────────────────────────────────── */ /* The stage that used to live here — an opaque void, a canvas of its own and a veil over it — is down to the veil. MainLayout's FactionBackdrop plays the same two worlds behind every player screen, so this screen reads through it like the rest of them; all this layer still has to do is sink that world far enough back that code stays readable on top of it. Fixed rather than absolute, so it covers the viewport on a page that scrolls past it. */ .ach-chal__veil[b-65dczq8nrd] { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 70% at 25% 20%, rgb(7 9 24 / 0.32), rgb(7 9 24 / 0.58) 60%, rgb(4 5 15 / 0.7) 100%); } .ach-chal__content[b-65dczq8nrd] { position: relative; z-index: var(--z-raised, 10); max-width: 1560px; margin: 0 auto; padding: var(--space-5) var(--space-5) var(--space-20); } /* ── header ────────────────────────────────────────────────────────────────── */ .ach-chal__bar[b-65dczq8nrd] { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; border: 1px solid var(--faction-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-5); background: var(--faction-panel-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--faction-panel-shadow); } .ach-chal__identity[b-65dczq8nrd], .ach-chal__meters[b-65dczq8nrd] { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .ach-chal__difficulty[b-65dczq8nrd] { font-family: var(--font-heading); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-size: var(--text-sm); color: var(--color-silver-300); } .ach-chal__rule[b-65dczq8nrd] { width: 1px; height: 26px; background: rgb(148 163 184 / 0.3); } .ach-chal__title[b-65dczq8nrd] { margin: 0; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-2xl); line-height: 1; color: var(--color-gold-300, #fbbf24); } .ach-chal__count[b-65dczq8nrd] { font-size: var(--text-xs); color: var(--color-silver-400); } .ach-chal__clock[b-65dczq8nrd] { font-size: var(--text-sm); color: var(--pur-300); border: 1px solid rgb(var(--pur-400-rgb) / 0.35); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-4); background: rgb(var(--pur-700-rgb) / 0.3); white-space: nowrap; } /* A stopped clock is a finished puzzle, not a running one — it should not read as urgent. */ .ach-chal__clock[data-stopped="true"][b-65dczq8nrd] { color: var(--color-silver-300); border-color: rgb(148 163 184 / 0.3); background: rgb(148 163 184 / 0.1); } /* ── the three columns ─────────────────────────────────────────────────────── */ .ach-chal__grid[b-65dczq8nrd] { display: flex; gap: var(--space-4); align-items: flex-start; margin-top: var(--space-4); flex-wrap: wrap; } .ach-chal__col[b-65dczq8nrd] { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } .ach-chal__col--brief[b-65dczq8nrd] { flex: 1 1 320px; } .ach-chal__col--bench[b-65dczq8nrd] { flex: 2 1 520px; } .ach-chal__col--submit[b-65dczq8nrd] { flex: 1 1 300px; } /* Below this the three columns cannot hold their proportions, so they stack: the brief, then the workbench, then submission — the order someone actually works in. */ @media (max-width: 900px) { .ach-chal__grid[b-65dczq8nrd] { flex-direction: column; } .ach-chal__col[b-65dczq8nrd] { width: 100%; flex: 1 1 auto; } } [b-65dczq8nrd] .ach-chal__panel { padding: var(--space-5); } [b-65dczq8nrd] .ach-chal__heading { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-xl); line-height: 1.1; color: var(--color-white); } [b-65dczq8nrd] .ach-chal__brief-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; margin: 0 0 var(--space-3); padding: 0; border: none; background: transparent; cursor: pointer; color: inherit; font: inherit; text-align: left; } [b-65dczq8nrd] .ach-chal__heading--flush { margin: 0; } [b-65dczq8nrd] .ach-chal__heading--sm { font-family: var(--font-heading); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-size: var(--text-sm); color: var(--faction-highlight); } [b-65dczq8nrd] .ach-chal__subheading { margin: var(--space-5) 0 var(--space-2); font-family: var(--font-heading); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; font-size: var(--text-xs); color: var(--pur-300); } [b-65dczq8nrd] .ach-chal__prose { margin: 0; font-size: var(--text-sm); line-height: 1.7; color: var(--color-silver-200); } [b-65dczq8nrd] .ach-chal__notes, [b-65dczq8nrd] .ach-chal__rules { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); line-height: 1.55; color: var(--color-silver-200); } [b-65dczq8nrd] .ach-chal__rules { margin-top: 0; } [b-65dczq8nrd] .ach-chal__notes li, [b-65dczq8nrd] .ach-chal__rules li { display: flex; gap: var(--space-2); } [b-65dczq8nrd] .ach-chal__tick { color: var(--faction-accent); } [b-65dczq8nrd] .ach-chal__tick--go { color: var(--pur-400); } /* ── the spec panel ────────────────────────────────────────────────────────── */ [b-65dczq8nrd] .ach-chal__spec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-1); } [b-65dczq8nrd] .ach-chal__trials { font-size: var(--text-xs); color: var(--color-silver-400); } [b-65dczq8nrd] .ach-chal__spec-name { margin: 0; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-xl); line-height: 1.1; color: var(--color-white); } [b-65dczq8nrd] .ach-chal__signature { margin: var(--space-3) 0 0; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; color: var(--color-gold-300, #fbbf24); border: 1px solid rgb(245 158 11 / 0.25); border-radius: var(--radius-md); background: var(--color-void); padding: var(--space-3); overflow-x: auto; } [b-65dczq8nrd] .ach-chal__contract { margin-top: var(--space-4); border: 1px solid rgb(var(--pur-400-rgb) / 0.28); border-radius: var(--radius-md); background: var(--color-void); overflow: hidden; } [b-65dczq8nrd] .ach-chal__contract-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid rgb(var(--pur-400-rgb) / 0.18); background: rgb(var(--pur-800-rgb) / 0.25); font-family: var(--font-heading); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; font-size: var(--text-xs); } [b-65dczq8nrd] .ach-chal__contract-label { color: var(--pur-200); } [b-65dczq8nrd] .ach-chal__contract-note { color: var(--color-silver-400); } [b-65dczq8nrd] .ach-chal__contract-code { margin: 0; padding: var(--space-3) var(--space-4); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.7; color: var(--color-silver-200); white-space: pre; overflow-x: auto; } [b-65dczq8nrd] .ach-chal__example { margin-top: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--color-void); padding: var(--space-3) var(--space-4); } [b-65dczq8nrd] .ach-chal__example-label, [b-65dczq8nrd] .ach-chal__contract-label { font-family: var(--font-heading); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; font-size: var(--text-xs); color: var(--color-silver-400); } [b-65dczq8nrd] .ach-chal__example-body { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); font-size: var(--text-xs); line-height: 1.8; color: var(--color-silver-300); overflow-x: auto; } [b-65dczq8nrd] .ach-chal__example-in { font-style: normal; color: var(--pur-300); } [b-65dczq8nrd] .ach-chal__example-out { font-style: normal; color: var(--faction-highlight); } /* ── the workbench ─────────────────────────────────────────────────────────── */ [b-65dczq8nrd] .ach-chal__bench { display: flex; flex-direction: column; gap: var(--space-3); } [b-65dczq8nrd] .ach-chal__toolbar, [b-65dczq8nrd] .ach-chal__tabs { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-3); } [b-65dczq8nrd] .ach-chal__filename { font-size: var(--text-xs); color: var(--color-silver-400); padding-left: var(--space-1); margin-right: auto; } [b-65dczq8nrd] .ach-chal__tool { font-family: var(--font-heading); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; font-size: var(--text-xs); padding: var(--space-2) var(--space-3); } [b-65dczq8nrd] .ach-chal__tool[data-on="true"] { border-color: var(--faction-accent); color: var(--color-white); } [b-65dczq8nrd] .ach-chal__tab { font-family: var(--font-heading); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: var(--text-sm); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); cursor: pointer; border: 1px solid rgb(148 163 184 / 0.22); background: rgb(var(--aug-900-rgb) / 0.35); color: var(--color-silver-300); transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast); } [b-65dczq8nrd] .ach-chal__tab:hover { border-color: var(--faction-accent); color: var(--color-white); } [b-65dczq8nrd] .ach-chal__tab[aria-selected="true"] { border-color: var(--faction-accent); background: rgb(var(--faction-accent-rgb) / 0.35); color: var(--color-white); } /* ── one method ────────────────────────────────────────────────────────────── */ [b-65dczq8nrd] .ach-chal__slot { border: 1px solid rgb(148 163 184 / 0.16); border-radius: var(--radius-lg); overflow: hidden; background: rgb(8 10 24 / 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-sm, 0 4px 20px rgb(0 0 0 / 0.4)); } [b-65dczq8nrd] .ach-chal__slot[data-open="true"] { border-color: var(--faction-border); box-shadow: var(--faction-panel-shadow); } [b-65dczq8nrd] .ach-chal__slot-head { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-4); cursor: pointer; border: none; border-bottom: 1px solid transparent; background: rgb(10 12 28 / 0.7); text-align: left; color: inherit; font: inherit; } [b-65dczq8nrd] .ach-chal__slot[data-open="true"] .ach-chal__slot-head { background: var(--faction-panel-bg); border-bottom-color: var(--faction-border); } [b-65dczq8nrd] .ach-chal__slot-num { width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--text-xs); border: 1px solid rgb(148 163 184 / 0.3); color: var(--color-silver-300); } [b-65dczq8nrd] .ach-chal__slot[data-open="true"] .ach-chal__slot-num { border-color: var(--faction-accent); background: rgb(var(--faction-accent-rgb) / 0.4); color: var(--color-white); } [b-65dczq8nrd] .ach-chal__slot-sig { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); color: var(--color-silver-300); } [b-65dczq8nrd] .ach-chal__slot[data-open="true"] .ach-chal__slot-sig { color: var(--color-silver-100); } /* The one warning kept: a line in the usings slot that is not a using directive. */ [b-65dczq8nrd] .ach-chal__slot-warn { font-family: var(--font-heading); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: var(--text-xs); border: 1px solid var(--color-gold-300, #fbbf24); color: var(--color-gold-300, #fbbf24); border-radius: var(--radius-pill); padding: 1px var(--space-2); white-space: nowrap; } [b-65dczq8nrd] .ach-chal__chevron { font-size: var(--text-xs); color: var(--color-silver-400); width: 12px; text-align: center; } [b-65dczq8nrd] .ach-chal__slot-body { padding-bottom: var(--space-3); } [b-65dczq8nrd] .ach-chal__slot-hint { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--color-silver-300); border-bottom: 1px solid var(--border-subtle); } [b-65dczq8nrd] .ach-chal__slot-hint span { color: var(--pur-300); } [b-65dczq8nrd] .ach-chal__editor-shell { border-left: 2px solid var(--faction-border); background: #06081a; } [b-65dczq8nrd] .ach-chal__editor { height: 280px; } /* Holds the editor's place while Monaco's loader finishes, so nothing jumps when it arrives. */ [b-65dczq8nrd] .ach-chal__editor-wait { margin: 0; padding: var(--space-4); min-height: 120px; font-size: var(--text-xs); color: var(--color-silver-500); } [b-65dczq8nrd] .ach-chal__editor--short { height: 120px; } [b-65dczq8nrd] .ach-chal__editor--tall { height: min(62vh, 640px); } [b-65dczq8nrd] .ach-chal__editor-shell--solo { border: 1px solid var(--faction-border); border-radius: var(--radius-lg); overflow: hidden; } [b-65dczq8nrd] .ach-chal__slot-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4) 0; flex-wrap: wrap; } [b-65dczq8nrd] .ach-chal__slot-stats { font-size: var(--text-xs); color: var(--color-silver-500); } [b-65dczq8nrd] .ach-chal__slot-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } /* ── the assembled file ────────────────────────────────────────────────────── */ [b-65dczq8nrd] .ach-chal__file { border: 1px solid var(--faction-border); border-radius: var(--radius-lg); overflow: hidden; background: rgb(6 8 26 / 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--faction-panel-shadow); } [b-65dczq8nrd] .ach-chal__file-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--faction-panel-bg); border-bottom: 1px solid var(--faction-border); } [b-65dczq8nrd] .ach-chal__lights { display: flex; gap: var(--space-2); } [b-65dczq8nrd] .ach-chal__lights i { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--color-silver-500); } [b-65dczq8nrd] .ach-chal__lights i:first-child { background: #ea580c; } [b-65dczq8nrd] .ach-chal__lights i:nth-child(2) { background: #f59e0b; } [b-65dczq8nrd] .ach-chal__lights i:last-child { background: var(--pur-400); } [b-65dczq8nrd] .ach-chal__file-name { flex: 1; font-size: var(--text-xs); color: var(--color-silver-100); } [b-65dczq8nrd] .ach-chal__file-meta { font-family: var(--font-heading); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; font-size: var(--text-xs); color: var(--color-silver-300); } /* The one scroll box. Everything inside it is laid out to overflow rather than to scroll on its own, so the line numbers and the code can never drift apart — see .ach-chal__file-code. */ [b-65dczq8nrd] .ach-chal__file-body { display: flex; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.75; max-height: 620px; overflow: auto; } [b-65dczq8nrd] .ach-chal__file--inline .ach-chal__file-body { max-height: 300px; } [b-65dczq8nrd] .ach-chal__gutter { list-style: none; margin: 0; flex: none; padding: var(--space-3) var(--space-3); text-align: right; color: var(--color-silver-600); background: rgb(4 6 20 / 0.9); user-select: none; border-right: 1px solid var(--border-subtle); position: sticky; left: 0; } /* Bootstrap's reboot styles the bare

, and both of the declarations it lands here were doing
  visible damage: overflow:auto turned the code into a second scroll box nested in the body's, so
  the gutter and the code scrolled independently of one another; and font-size:.875em, with its own
  mono stack, shrank the text until forty numbered rows were taller than the forty lines they were
  numbering. An element selector beats anything the body passes down by inheritance, so both have
  to be turned back off here by name — font:inherit puts the size, the family and the line height
  back on the same footing as the gutter.

  It does not shrink either: the body is what scrolls sideways, and a shrunken pre would have
  scrolled on its own again.
*/
[b-65dczq8nrd] .ach-chal__file-code {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    flex: 1 0 auto;
    color: var(--color-silver-100);
    white-space: pre;
    overflow: visible;
    font: inherit;
}

[b-65dczq8nrd] .ach-chal__file-code code {
    font: inherit;
    color: inherit;
    background: none;
}

[b-65dczq8nrd] .ach-chal__file-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap;
}

[b-65dczq8nrd] .ach-chal__file-foot span {
    font-size: var(--text-xs);
    color: var(--color-silver-500);
}

/* ── submission ────────────────────────────────────────────────────────────── */

[b-65dczq8nrd] .ach-chal__submit-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

[b-65dczq8nrd] .ach-chal__submit,
[b-65dczq8nrd] .ach-chal__history {
    padding: var(--space-5);
}

[b-65dczq8nrd] .ach-chal__manifest {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

[b-65dczq8nrd] .ach-chal__manifest li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    background: var(--color-void);
}

[b-65dczq8nrd] .ach-chal__manifest-num {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-silver-400);
}

[b-65dczq8nrd] .ach-chal__manifest-sig {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    color: var(--color-silver-200);
}

[b-65dczq8nrd] .ach-chal__go {
    width: 100%;
    margin-top: var(--space-4);
    font-size: var(--text-lg);
    padding: var(--space-3);
}

[b-65dczq8nrd] .ach-chal__go:disabled {
    opacity: 0.6;
    cursor: progress;
}

[b-65dczq8nrd] .ach-chal__submit-note {
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    line-height: 1.55;
    color: var(--color-silver-400);
}

[b-65dczq8nrd] .ach-chal__history-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

[b-65dczq8nrd] .ach-chal__history-count,
[b-65dczq8nrd] .ach-chal__empty {
    font-size: var(--text-xs);
    color: var(--color-silver-400);
}

[b-65dczq8nrd] .ach-chal__empty { font-style: italic; margin: var(--space-3) 0 0; }

[b-65dczq8nrd] .ach-chal__attempts {
    list-style: none;
    margin: 0;
    padding: 0;
}

[b-65dczq8nrd] .ach-chal__attempt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    border: 1px solid rgb(148 163 184 / 0.14);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
    background: var(--color-void);
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
    transition: border-color var(--transition-fast);
}

[b-65dczq8nrd] .ach-chal__attempt:hover { border-color: var(--faction-accent); }

[b-65dczq8nrd] .ach-chal__attempt-id,
[b-65dczq8nrd] .ach-chal__attempt-result {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

[b-65dczq8nrd] .ach-chal__attempt-time,
[b-65dczq8nrd] .ach-chal__attempt-tests,
[b-65dczq8nrd] .ach-chal__attempt-go {
    font-size: var(--text-xs);
    color: var(--color-silver-400);
}

[b-65dczq8nrd] .ach-chal__firstsolve {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-size: var(--text-xs);
    color: var(--pur-300);
    border: 1px solid rgb(var(--pur-400-rgb) / 0.4);
    border-radius: var(--radius-pill);
    padding: 0 var(--space-2);
}

/* ── verdicts ──────────────────────────────────────────────────────────────── */

[b-65dczq8nrd] .ach-chal__verdict {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    font-size: var(--text-xs);
    border-radius: var(--radius-pill);
    padding: 1px var(--space-2);
    border: 1px solid currentColor;
    white-space: nowrap;
}

/*
  Four states, not three. "failed" means it ran and nothing passed; "error" means it never ran at
  all — a different problem, so it gets its own colour rather than being lumped in.
*/
[b-65dczq8nrd] .ach-chal__verdict[data-verdict="pass"] { color: var(--pur-400); }
[b-65dczq8nrd] .ach-chal__verdict[data-verdict="partial"] { color: var(--color-gold-300, #fbbf24); }
[b-65dczq8nrd] .ach-chal__verdict[data-verdict="failed"] { color: #fb7185; }
[b-65dczq8nrd] .ach-chal__verdict[data-verdict="error"] { color: #f97316; }

/* ── dialogs and overlays ──────────────────────────────────────────────────── */

[b-65dczq8nrd] .ach-chal__scrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 200);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: rgb(4 6 16 / 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[b-65dczq8nrd] .ach-chal__dialog {
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - var(--space-12));
    overflow-y: auto;
    border: 1px solid var(--faction-border);
    border-radius: var(--radius-xl);
    background: linear-gradient(170deg, var(--faction-surface), rgb(7 9 24 / 0.97));
    box-shadow: 0 26px 70px rgb(0 0 0 / 0.65);
    padding: var(--space-6);
    animation: ach-chal-pop-b-65dczq8nrd 0.35s ease-out;
}

[b-65dczq8nrd] .ach-chal__dialog--paste { max-width: 720px; }
[b-65dczq8nrd] .ach-chal__dialog--verdict { max-width: 560px; }

[b-65dczq8nrd] .ach-chal__dialog[data-verdict="pass"] { border-color: rgb(var(--pur-400-rgb) / 0.5); }
[b-65dczq8nrd] .ach-chal__dialog[data-verdict="partial"] { border-color: rgb(245 158 11 / 0.45); }
[b-65dczq8nrd] .ach-chal__dialog[data-verdict="failed"] { border-color: rgb(251 113 133 / 0.45); }
[b-65dczq8nrd] .ach-chal__dialog[data-verdict="error"] { border-color: rgb(249 115 22 / 0.5); }

@keyframes ach-chal-pop-b-65dczq8nrd {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    [b-65dczq8nrd] .ach-chal__dialog { animation: none; }
}

[b-65dczq8nrd] .ach-chal__dialog-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

[b-65dczq8nrd] .ach-chal__dialog-headline { flex: 1; min-width: 0; }

[b-65dczq8nrd] .ach-chal__verdict-sigil {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    border: 1px solid var(--faction-border);
    background: rgb(7 9 24 / 0.75);
    color: var(--faction-highlight);
}

[b-65dczq8nrd] .ach-chal__dialog-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: var(--text-2xl);
    line-height: 1;
    color: var(--color-white);
}

[b-65dczq8nrd] .ach-chal__dialog-sub {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--color-silver-200);
}

[b-65dczq8nrd] .ach-chal__dialog-close {
    align-self: flex-start;
    font-size: var(--text-lg);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-silver-400);
    padding: var(--space-1) var(--space-2);
}

[b-65dczq8nrd] .ach-chal__dialog-close:hover { color: var(--color-white); }

[b-65dczq8nrd] .ach-chal__dialog-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-5);
    flex-wrap: wrap;
}

[b-65dczq8nrd] .ach-chal__dialog-go { flex: 1 1 220px; }

/* ── result body ───────────────────────────────────────────────────────────── */

[b-65dczq8nrd] .ach-chal__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

[b-65dczq8nrd] .ach-chal__stat {
    text-align: center;
    border: 1px solid var(--faction-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-1);
    background: rgb(7 9 24 / 0.7);
}

[b-65dczq8nrd] .ach-chal__stat-value {
    display: block;
    font-weight: var(--weight-bold);
    font-size: var(--text-xl);
    color: var(--color-silver-100);
}

[b-65dczq8nrd] .ach-chal__stat-value[data-tone="good"] { color: var(--pur-300); }
[b-65dczq8nrd] .ach-chal__stat-value[data-tone="warn"] { color: var(--color-gold-300, #fbbf24); }
[b-65dczq8nrd] .ach-chal__stat-value[data-tone="marks"] { color: var(--color-gold-300, #fbbf24); }

[b-65dczq8nrd] .ach-chal__stat-label {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-silver-400);
}

[b-65dczq8nrd] .ach-chal__result-heading { margin: var(--space-5) 0 var(--space-2); }

[b-65dczq8nrd] .ach-chal__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

[b-65dczq8nrd] .ach-chal__row {
    border: 1px solid rgb(251 113 133 / 0.4);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    background: rgb(7 9 24 / 0.75);
}

[b-65dczq8nrd] .ach-chal__row[data-ok="true"] { border-color: rgb(var(--pur-400-rgb) / 0.3); }

[b-65dczq8nrd] .ach-chal__row-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

[b-65dczq8nrd] .ach-chal__row-mark { color: #fb7185; }
[b-65dczq8nrd] .ach-chal__row[data-ok="true"] .ach-chal__row-mark { color: var(--pur-400); }

[b-65dczq8nrd] .ach-chal__row-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
    color: var(--color-silver-100);
}

[b-65dczq8nrd] .ach-chal__row-tests {
    font-size: var(--text-xs);
    color: #fb7185;
}

[b-65dczq8nrd] .ach-chal__row[data-ok="true"] .ach-chal__row-tests { color: var(--pur-400); }

[b-65dczq8nrd] .ach-chal__row-note {
    margin: var(--space-2) 0 0;
    border-left: 2px solid #fb7185;
    padding-left: var(--space-3);
    font-size: var(--text-xs);
    line-height: 1.7;
    color: var(--color-silver-300);
    white-space: pre-line;
}

/* ── the error panel ───────────────────────────────────────────────────────── */

[b-65dczq8nrd] .ach-chal__error {
    border: 1px solid rgb(249 115 22 / 0.4);
    border-radius: var(--radius-lg);
    background: rgb(28 12 4 / 0.6);
    overflow: hidden;
}

[b-65dczq8nrd] .ach-chal__error-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgb(249 115 22 / 0.25);
    flex-wrap: wrap;
}

[b-65dczq8nrd] .ach-chal__error-kind {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-size: var(--text-xs);
    color: #f97316;
}

[b-65dczq8nrd] .ach-chal__error-where {
    font-size: var(--text-xs);
    color: var(--color-gold-300, #fbbf24);
}

[b-65dczq8nrd] .ach-chal__error-body {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.7;
    color: var(--color-silver-200);
    white-space: pre-wrap;
    max-height: 260px;
    overflow: auto;
}

[b-65dczq8nrd] .ach-chal__unlock {
    margin-top: var(--space-4);
    border: 1px solid rgb(var(--pur-400-rgb) / 0.35);
    border-radius: var(--radius-lg);
    background: rgb(var(--pur-900-rgb) / 0.35);
    padding: var(--space-3) var(--space-4);
}

[b-65dczq8nrd] .ach-chal__unlock-label {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-size: var(--text-xs);
    color: var(--pur-200);
}

[b-65dczq8nrd] .ach-chal__unlock-code {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-white);
    word-break: break-all;
}

[b-65dczq8nrd] .ach-chal__verdict-note {
    margin: var(--space-4) 0 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: rgb(7 9 24 / 0.75);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.65;
    color: var(--color-silver-200);
}

/* ── magic paste ───────────────────────────────────────────────────────────── */

[b-65dczq8nrd] .ach-chal__paste {
    display: block;
    width: 100%;
    min-height: 220px;
    resize: vertical;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.7;
    color: var(--color-silver-100);
    background: #06081a;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    outline: none;
}

[b-65dczq8nrd] .ach-chal__paste:focus { border-color: var(--faction-accent); }

[b-65dczq8nrd] .ach-chal__paste-report {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

[b-65dczq8nrd] .ach-chal__paste-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid rgb(251 113 133 / 0.4);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    background: rgb(7 9 24 / 0.75);
    font-size: var(--text-xs);
}

[b-65dczq8nrd] .ach-chal__paste-line[data-ok="true"] { border-color: rgb(148 163 184 / 0.18); }

[b-65dczq8nrd] .ach-chal__paste-line .ach-mono {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-silver-200);
}

[b-65dczq8nrd] .ach-chal__paste-tag {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-silver-400);
}

[b-65dczq8nrd] .ach-chal__paste-warn {
    margin: var(--space-3) 0 0;
    border: 1px solid rgb(245 158 11 / 0.35);
    border-radius: var(--radius-lg);
    background: rgb(7 9 24 / 0.75);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-silver-200);
}

[b-65dczq8nrd] .ach-chal__paste-warn strong { color: var(--color-gold-300, #fbbf24); }

/* ── the grading overlay ───────────────────────────────────────────────────── */

[b-65dczq8nrd] .ach-chal__grading {
    width: 100%;
    max-width: 470px;
    border: 1px solid var(--faction-border);
    border-radius: var(--radius-xl);
    background: linear-gradient(170deg, var(--faction-surface), rgb(7 9 24 / 0.96));
    box-shadow: 0 26px 70px rgb(0 0 0 / 0.65);
    padding: var(--space-8) var(--space-6) var(--space-6);
    text-align: center;
}

[b-65dczq8nrd] .ach-chal__orb {
    position: relative;
    width: 118px;
    height: 118px;
    margin: 0 auto;
}

[b-65dczq8nrd] .ach-chal__orb-ring {
    position: absolute;
    border-radius: var(--radius-pill);
}

[b-65dczq8nrd] .ach-chal__orb-ring--slow {
    inset: 0;
    border: 1px dashed var(--faction-border);
    animation: ach-chal-spin-b-65dczq8nrd 9s linear infinite;
}

[b-65dczq8nrd] .ach-chal__orb-ring--fast {
    inset: 14px;
    border: 1px solid rgb(var(--pur-400-rgb) / 0.45);
    animation: ach-chal-spin-b-65dczq8nrd 6s linear infinite reverse;
}

[b-65dczq8nrd] .ach-chal__orb-core {
    position: absolute;
    inset: 30px;
    border-radius: var(--radius-pill);
    background: radial-gradient(circle at 38% 32%,
        var(--faction-highlight) 0%, var(--faction-accent) 35%, var(--faction-accent-deep) 70%);
    box-shadow: var(--faction-glow-strong);
    animation: ach-chal-breathe-b-65dczq8nrd 3.4s ease-in-out infinite;
}

@keyframes ach-chal-spin-b-65dczq8nrd { to { transform: rotate(360deg); } }

@keyframes ach-chal-breathe-b-65dczq8nrd {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

[b-65dczq8nrd] .ach-chal__grading-title {
    margin: var(--space-5) 0 0;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: var(--text-2xl);
    color: var(--color-white);
    text-shadow: var(--faction-text-glow);
}

[b-65dczq8nrd] .ach-chal__progress {
    height: 4px;
    border-radius: var(--radius-pill);
    background: rgb(148 163 184 / 0.18);
    margin-top: var(--space-5);
    overflow: hidden;
}

[b-65dczq8nrd] .ach-chal__progress-bar {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--faction-gradient);
    box-shadow: var(--faction-glow-soft);
    transition: width 0.5s ease;
}

[b-65dczq8nrd] .ach-chal__stages {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: left;
}

[b-65dczq8nrd] .ach-chal__stage {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-silver-500);
}

[b-65dczq8nrd] .ach-chal__stage[data-state="done"] { color: var(--pur-400); }
[b-65dczq8nrd] .ach-chal__stage[data-state="live"] { color: var(--faction-highlight); }

[b-65dczq8nrd] .ach-chal__stage-mark { width: 16px; text-align: center; }

[b-65dczq8nrd] .ach-chal__stage[data-state="live"] .ach-chal__stage-mark {
    animation: ach-chal-pulse-b-65dczq8nrd 1.4s ease-in-out infinite;
}

@keyframes ach-chal-pulse-b-65dczq8nrd {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
    [b-65dczq8nrd] .ach-chal__orb-ring,
    [b-65dczq8nrd] .ach-chal__orb-core,
    [b-65dczq8nrd] .ach-chal__stage-mark {
        animation: none;
    }
}
/* /Components/Player/ChoosePathView.razor.rz.scp.css */
/*
  Choose Path — ported from "Achrona Choose Path Standalone.html".

  The screen is a stage: two canvas worlds full-bleed behind a centred content column. The clip-path
  that draws the Purist curtain across the Augmented atlas is written by ChoosePathView.razor.js,
  which also publishes the current split on the root as --ach-split (0..100) for anything that wants
  to react to it.
*/

.ach-path[b-4oweze6p57] {
    position: relative;
    /* 62px is the sticky PlayerTopBar; the stage fills whatever is left of the viewport. */
    min-height: calc(100vh - 62px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/*
  While the choice is open the two worlds seal the screen, so the void underneath them is what the
  curtain is cut out of. Once the path is locked in the stage is gone and the layout's faction
  backdrop is the ground here, exactly as on every other player screen — all this leaves behind is
  a scrim to keep the cards' surroundings readable over it.
*/
.ach-path[data-stage="on"][b-4oweze6p57] {
    background: var(--color-void);
}

.ach-path[data-stage="off"][b-4oweze6p57] {
    background: linear-gradient(180deg,
            rgb(5 8 26 / 0.52) 0%, rgb(4 7 19 / 0.68) 60%, rgb(3 5 15 / 0.78) 100%);
}

/* ── The two worlds ─────────────────────────────────────── */

.ach-path__stage[b-4oweze6p57] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ach-path__world[b-4oweze6p57] {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.ach-path__world--aug[b-4oweze6p57] {
    background: linear-gradient(180deg, #05081a 0%, #040713 60%, #03050f 100%);
}

/*
  The curtain. clip-path and its transition are set from JS; everything else is here so the first
  paint — before the module has loaded — is already a half-drawn curtain rather than a full one.
*/
.ach-path__world--pur[b-4oweze6p57] {
    background: linear-gradient(165deg, #04140e 0%, #06231a 45%, #04100c 100%);
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    will-change: clip-path;
}

/*
  Which edge the curtain hangs from follows the cards, not the design's original artboard: see the
  note on data-purist-side in ChoosePathView.razor. Everything that pools Purist light towards
  "their" half mirrors here, so the emerald wash and the feathered contours stay under the Purist
  card wherever the track list puts it.
*/
.ach-path[data-purist-side="right"] .ach-path__world--pur[b-4oweze6p57] {
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

/* Emerald light pooling on the side the Purist card sits on. */
.ach-path__world-wash[b-4oweze6p57] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 70% at 30% 50%, rgb(var(--pur-400-rgb) / 0.14), transparent 70%);
}

.ach-path[data-purist-side="right"] .ach-path__world-wash[b-4oweze6p57] {
    background: radial-gradient(ellipse 70% 70% at 70% 50%, rgb(var(--pur-400-rgb) / 0.14), transparent 70%);
}

.ach-path__canvas[b-4oweze6p57] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Feathers the contour lines out before they reach the curtain's edge. */
.ach-path__canvas--topo[b-4oweze6p57] {
    -webkit-mask-image: radial-gradient(ellipse 88% 92% at 32% 50%, #000 30%, transparent 92%);
    mask-image: radial-gradient(ellipse 88% 92% at 32% 50%, #000 30%, transparent 92%);
}

.ach-path[data-purist-side="right"] .ach-path__canvas--topo[b-4oweze6p57] {
    -webkit-mask-image: radial-gradient(ellipse 88% 92% at 68% 50%, #000 30%, transparent 92%);
    mask-image: radial-gradient(ellipse 88% 92% at 68% 50%, #000 30%, transparent 92%);
}

/* ── Content column ─────────────────────────────────────── */

.ach-path__content[b-4oweze6p57] {
    position: relative;
    z-index: var(--z-raised);
    width: 100%;
    max-width: 1080px;
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

/* The worlds behind are busy, so the heading needs its own ground rather than a glow. */
.ach-path__title[b-4oweze6p57] {
    text-shadow: 0 0 26px rgb(0 0 0 / 0.6);
}

.ach-path__content .ach-lead[b-4oweze6p57] {
    color: var(--color-silver-200);
    text-shadow: 0 1px 6px rgb(0 0 0 / 0.6);
}

.ach-path__member[b-4oweze6p57] {
    color: var(--color-silver-100);
    border-bottom: 1px solid rgb(148 163 184 / 0.4);
    padding-bottom: 1px;
}

.ach-path__error[b-4oweze6p57] {
    margin: var(--space-5) auto 0;
    max-width: 620px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid rgb(234 88 12 / 0.5);
    border-radius: var(--radius-lg);
    background: rgb(67 20 7 / 0.4);
    color: var(--color-ember-200);
    font-size: var(--text-sm);
}

.ach-path__grid[b-4oweze6p57] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-10);
    text-align: left;
}

/* ── Card ───────────────────────────────────────────────── */

.ach-path__card[b-4oweze6p57] {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--faction-border);
    border-radius: var(--radius-xl);
    padding: 30px;
    background: var(--faction-panel-bg);
    /* The worlds move behind the cards, so they are glass rather than opaque panels. */
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 0 20px rgb(var(--faction-accent-rgb) / 0.16);
    overflow: hidden;
    transition:
        box-shadow var(--transition-default),
        border-color var(--transition-default),
        opacity var(--transition-default),
        transform var(--transition-default);
}

.ach-path__card:hover[b-4oweze6p57] {
    box-shadow: 0 0 44px rgb(var(--faction-accent-rgb) / 0.45);
    border-color: rgb(var(--faction-accent-rgb) / 0.85);
}

/* The path this player is on: lit, and lifted a hair off the other one. */
.ach-path__card[data-state="chosen"][b-4oweze6p57] {
    border-color: rgb(var(--faction-accent-rgb) / 0.9);
    box-shadow: 0 0 44px rgb(var(--faction-accent-rgb) / 0.55);
    transform: scale(1.015);
}

.ach-path__card[data-state="dimmed"][b-4oweze6p57] {
    opacity: 0.55;
}

/* Faction light bleeding in from the top-right corner. */
.ach-path__corner-glow[b-4oweze6p57] {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(var(--faction-accent-rgb) / 0.32), transparent 70%);
    filter: blur(10px);
    pointer-events: none;
}

.ach-path__head[b-4oweze6p57] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
}

.ach-path__sigil[b-4oweze6p57] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 14px;
    border: 1px solid rgb(var(--faction-accent-rgb) / 0.5);
    background: var(--faction-surface);
    font-size: 30px;
    box-shadow: 0 0 16px rgb(var(--faction-accent-rgb) / 0.35);
}

.ach-path__name[b-4oweze6p57] {
    display: block;
    font-family: var(--font-display);
    font-size: 31px;
    line-height: 1.05;
    margin-bottom: 5px;
    color: var(--faction-accent);
    text-shadow: 0 0 18px rgb(var(--faction-accent-rgb) / 0.6);
}

.ach-path__tagline[b-4oweze6p57] {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    letter-spacing: 0.16em;
    font-size: var(--text-sm);
    text-transform: uppercase;
    color: var(--faction-highlight);
}

.ach-path__copy[b-4oweze6p57] {
    position: relative;
    margin: var(--space-5) 0 0;
    font-size: 15px;
    line-height: var(--leading-relaxed);
    color: var(--color-silver-200);
}

/* ── Part chips ─────────────────────────────────────────── */

.ach-path__parts[b-4oweze6p57] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
}

.ach-path__part[b-4oweze6p57] {
    flex: 1 1 90px;
    text-align: center;
    border: 1px solid rgb(var(--faction-accent-rgb) / 0.3);
    border-radius: var(--radius-lg);
    padding: 12px 6px;
    background: var(--faction-surface);
}

.ach-path__part-name[b-4oweze6p57] {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    color: var(--color-silver-100);
}

.ach-path__part-index[b-4oweze6p57] {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-silver-400);
}

.ach-path__choose[b-4oweze6p57] {
    width: 100%;
    /* auto keeps the button pinned to the bottom so cards of unequal length still align. */
    margin-top: auto;
    padding-top: 13px;
}

.ach-path__voters[b-4oweze6p57] {
    margin: var(--space-3) 0 0;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faction-accent);
}

/* ── Footer note ────────────────────────────────────────── */

.ach-path__foot[b-4oweze6p57] {
    margin: var(--space-6) 0 0;
    font-size: 14px;
    color: var(--color-silver-200);
    text-shadow: 0 1px 6px rgb(0 0 0 / 0.7);
}

.ach-path__foot-accent[b-4oweze6p57] { color: var(--color-gold-300); }

.ach-path__foot--conflict[b-4oweze6p57] {
    display: inline-block;
    max-width: 720px;
    padding: var(--space-3) var(--space-5);
    border: 1px solid rgb(245 158 11 / 0.45);
    border-radius: var(--radius-lg);
    background: rgb(69 26 3 / 0.35);
}

/*
  Once the team agrees, this button is the whole screen's purpose — and as a ghost button it read as
  a footnote under two lit cards. It keeps the faction treatment, gets room around it, and breathes
  so the eye lands on it before anything else.
*/
.ach-path__confirm[b-4oweze6p57] {
    margin-top: var(--space-6);
    min-width: 320px;
    padding: 18px var(--space-10);
    font-size: var(--text-xl);
    letter-spacing: 0.16em;
}

.ach-path__confirm--call[b-4oweze6p57] {
    animation: ach-path-confirm-b-4oweze6p57 2.4s ease-in-out infinite;
}

.ach-path__confirm--call:not(:disabled):hover[b-4oweze6p57] {
    animation: none;
    transform: translateY(-1px);
}

@keyframes ach-path-confirm-b-4oweze6p57 {
    0%, 100% {
        box-shadow: 0 0 20px rgb(var(--faction-accent-rgb) / 0.45);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 48px rgb(var(--faction-accent-rgb) / 0.85), 0 0 12px rgb(var(--faction-highlight-rgb) / 0.6);
        transform: scale(1.02);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ach-path__confirm--call[b-4oweze6p57] {
        animation: none;
        box-shadow: 0 0 40px rgb(var(--faction-accent-rgb) / 0.7);
    }
}

@media (max-width: 720px) {
    .ach-path[b-4oweze6p57] {
        /* The curtain needs a viewport-width stage to read; below that the cards come first. */
        min-height: 0;
    }

    .ach-path__content[b-4oweze6p57] {
        padding-top: var(--space-10);
    }
}
/* /Components/Player/HomeHeroView.razor.rz.scp.css */
/* The landing hero, ported from "Achrona - The Death of Randomness.html". */

.ach-hero[b-6o4c1opwme] {
    position: relative;
    /* 62px is the sticky PlayerTopBar; the hero owns the rest of the first screen. */
    min-height: calc(100vh - 62px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--space-10) var(--space-6) var(--space-16);
    text-align: center;
    font-family: var(--font-body);
    color: var(--color-silver-100);
    /*
      Translucent, so the layout's faction backdrop reads through it: the hero used to be the same
      blue whichever path the team had chosen. The stops keep their old shape, they just no longer
      seal the screen off.
    */
    background: radial-gradient(ellipse 100% 80% at 50% 20%,
            rgb(10 20 40 / 0.45) 0%, rgb(6 10 24 / 0.68) 55%, rgb(4 6 15 / 0.82) 100%);
}

/* ── Starfield ──────────────────────────────────────────── */

.ach-hero__sky[b-6o4c1opwme] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ach-hero__star[b-6o4c1opwme] {
    position: absolute;
    border-radius: 50%;
    background: var(--color-white);
    animation-name: ach-twinkle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* ── Logo slots ─────────────────────────────────────────── */

.ach-hero__mark[b-6o4c1opwme],
.ach-hero__title[b-6o4c1opwme] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
  These come after the shared rule above so their `position: absolute` wins the cascade —
  equal specificity (one class + the Blazor scope attribute) means source order decides.
*/
.ach-hero__mark--event[b-6o4c1opwme] {
    position: absolute;
    top: var(--space-6);
    right: var(--space-8);
    width: 170px;
    height: 52px;
}

.ach-hero__mark--involved[b-6o4c1opwme] {
    position: absolute;
    bottom: var(--space-6);
    left: var(--space-8);
    width: 150px;
    height: 48px;
}

.ach-hero__mark--cronos[b-6o4c1opwme] {
    position: absolute;
    bottom: var(--space-6);
    right: var(--space-8);
    width: 150px;
    height: 48px;
}

.ach-hero__mark img[b-6o4c1opwme],
.ach-hero__title img[b-6o4c1opwme] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/*
  Until the artwork exists the  404s and achrona.js sets data-missing, which swaps in the
  labelled dashed box so the layout still reads at the right size.
*/
.ach-hero__mark[data-missing] img[b-6o4c1opwme],
.ach-hero__title[data-missing] img[b-6o4c1opwme] {
    display: none;
}

.ach-hero__mark-hint[b-6o4c1opwme] {
    display: none;
}

.ach-hero__mark[data-missing] .ach-hero__mark-hint[b-6o4c1opwme],
.ach-hero__title[data-missing] .ach-hero__mark-hint[b-6o4c1opwme] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--space-2);
    border: 1px dashed rgb(var(--aug-400-rgb) / 0.35);
    border-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-silver-400);
}

/* ── Centre column ──────────────────────────────────────── */

.ach-hero__body[b-6o4c1opwme] {
    position: relative;
    z-index: var(--z-raised);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ach-hero__title[b-6o4c1opwme] {
    width: 560px;
    max-width: 90vw;
    height: 180px;
}

.ach-hero__subtitle[b-6o4c1opwme] {
    margin: 26px 0 0;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: clamp(2.25rem, 6vw, 52px);
    line-height: 1.05;
    letter-spacing: 1px;
    color: var(--color-silver-100);
    text-shadow: 0 0 24px rgb(var(--aug-600-rgb) / 0.6);
}

.ach-hero__intro[b-6o4c1opwme] {
    max-width: 620px;
    margin: var(--space-5) auto 0;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-silver-300);
}

.ach-hero__cta[b-6o4c1opwme] {
    margin-top: 34px;
}

/*
  The one button on the screen, so it is the Augmented gradient outright rather than the neutral
  --faction-* one: nothing has picked a faction yet at this point in the journey.
*/
.ach-hero__enter[b-6o4c1opwme] {
    font-size: 19px;
    letter-spacing: 0.14em;
    padding: 16px 46px;
    background: linear-gradient(135deg, var(--aug-800), var(--aug-600));
    border-color: var(--aug-400);
    color: var(--color-white);
    box-shadow: 0 0 30px rgb(var(--aug-600-rgb) / 0.55), 0 0 8px rgb(var(--aug-600-rgb) / 0.9);
}

.ach-hero__enter:not(:disabled):hover[b-6o4c1opwme] {
    box-shadow: 0 0 50px rgb(var(--aug-600-rgb) / 0.8), 0 0 14px rgb(var(--aug-400-rgb) / 0.9);
}

/* Where the button was, for a player who is already through the door. */
.ach-hero__greeting[b-6o4c1opwme] {
    margin: 34px 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3vw, 28px);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    text-shadow: 0 0 20px rgb(var(--aug-600-rgb) / 0.55);
}

.ach-hero__note[b-6o4c1opwme] {
    margin: var(--space-5) 0 0;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-silver-400);
}

@media (max-width: 860px) {
    /* The corner marks would sit on top of the copy; stack everything into the flow instead. */
    .ach-hero__mark--event[b-6o4c1opwme],
    .ach-hero__mark--involved[b-6o4c1opwme],
    .ach-hero__mark--cronos[b-6o4c1opwme] {
        position: static;
    }

    .ach-hero__mark--event[b-6o4c1opwme] {
        margin-bottom: var(--space-8);
    }

    .ach-hero__mark--involved[b-6o4c1opwme],
    .ach-hero__mark--cronos[b-6o4c1opwme] {
        display: inline-flex;
        margin-top: var(--space-10);
    }

    .ach-hero__mark--involved[b-6o4c1opwme] {
        margin-right: 14px;
    }
}
/* /Components/Player/TeamStatsView.razor.rz.scp.css */
/*
  Team Stats — "The Ledger of Attempts", ported from "Achrona Team Stats (standalone).html".

  The seven columns are declared once as --ach-ledger-cols and reused by the column header, every
  part row and the Desync, so the three grids can never drift apart. The whole ledger sits in one
  horizontal scroller: below about 900px the columns stop fitting, and scrolling the table is far
  kinder than reflowing a ledger whose whole point is aligned numbers.
*/

.ach-ledger[b-pdtchwwrg7] {
    --ach-ledger-cols: 52px minmax(0, 1fr) 92px 118px 100px 92px 128px;
    --ach-ledger-gap: 0 18px;
    --ach-ledger-pad: 0 22px;

    position: relative;
    /* 62px is the sticky PlayerTopBar; the ledger fills whatever is left of the viewport. */
    min-height: calc(100vh - 62px);
    overflow: hidden;
    /*
      Translucent, exactly as on the hero: the layout’s faction backdrop is the ground here too.
      A static contour canvas and one wash per faction used to seal this screen off — the ledger
      was the only player screen whose background neither moved nor followed the path the team
      chose. This scrim is all that is left of them, and it only has to keep the numbers readable
      over the world playing behind it.
    */
    background: linear-gradient(180deg,
            rgb(5 8 26 / 0.58) 0%, rgb(4 7 19 / 0.72) 60%, rgb(3 5 15 / 0.8) 100%);
}

.ach-ledger__content[b-pdtchwwrg7] {
    position: relative;
    z-index: 1;
    max-width: 1280px;
}

/* ── Masthead ───────────────────────────────────────────── */

.ach-ledger__head[b-pdtchwwrg7] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-10);
}

.ach-ledger__kicker[b-pdtchwwrg7] {
    margin: 0 0 var(--space-2);
    letter-spacing: 0.3em;
    color: var(--aug-400);
}

.ach-ledger__subtitle[b-pdtchwwrg7] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.ach-ledger__team[b-pdtchwwrg7] {
    color: var(--color-white);
    font-weight: var(--weight-semibold);
}

/* ── Score plaque and tiles ─────────────────────────────── */

.ach-ledger__summary[b-pdtchwwrg7] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.ach-ledger__total[b-pdtchwwrg7] {
    min-width: 230px;
    padding: var(--space-5) var(--space-8) 22px;
    text-align: center;
    border: 1px solid rgb(251 191 36 / 0.45);
    border-radius: 14px;
    background: linear-gradient(160deg, rgb(120 72 4 / 0.35), rgb(8 10 26 / 0.6));
    box-shadow: 0 0 44px rgb(251 191 36 / 0.16);
}

.ach-ledger__total-label[b-pdtchwwrg7] {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--weight-extrabold);
    font-size: var(--text-xs);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-gold-300);
}

.ach-ledger__total-value[b-pdtchwwrg7] {
    display: block;
    font-weight: var(--weight-bold);
    font-size: 62px;
    line-height: 1.05;
    color: var(--color-gold-200);
    animation: ach-ledger-score-glow-b-pdtchwwrg7 3.4s ease-in-out infinite;
}

@keyframes ach-ledger-score-glow-b-pdtchwwrg7 {
    0%, 100% { text-shadow: 0 0 18px rgb(251 191 36 / 0.55); }
    50% { text-shadow: 0 0 34px rgb(251 191 36 / 0.9); }
}

.ach-ledger__tiles[b-pdtchwwrg7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(118px, 1fr));
    gap: var(--space-3);
}

.ach-ledger__tile[b-pdtchwwrg7] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-4) 14px;
    text-align: center;
    border: 1px solid;
    border-radius: 13px;
}

.ach-ledger__tile--pur[b-pdtchwwrg7] {
    border-color: rgb(var(--pur-400-rgb) / 0.3);
    background: linear-gradient(150deg, rgb(6 35 26 / 0.55), rgb(6 9 24 / 0.6));
}

.ach-ledger__tile--aug[b-pdtchwwrg7] {
    border-color: rgb(var(--aug-500-rgb) / 0.3);
    background: linear-gradient(150deg, rgb(12 30 62 / 0.6), rgb(6 9 24 / 0.6));
}

.ach-ledger__tile--gold[b-pdtchwwrg7] {
    border-color: rgb(251 191 36 / 0.3);
    background: linear-gradient(150deg, rgb(58 40 6 / 0.5), rgb(6 9 24 / 0.6));
}

.ach-ledger__tile-value[b-pdtchwwrg7] {
    font-weight: var(--weight-bold);
    font-size: var(--text-2xl);
    line-height: 1.1;
}

.ach-ledger__tile--pur .ach-ledger__tile-value[b-pdtchwwrg7] { color: var(--pur-300); }
.ach-ledger__tile--aug .ach-ledger__tile-value[b-pdtchwwrg7] { color: var(--aug-300); }
.ach-ledger__tile--gold .ach-ledger__tile-value[b-pdtchwwrg7] { color: var(--color-gold-300); }

.ach-ledger__tile-slash[b-pdtchwwrg7] { color: var(--color-silver-500); }

.ach-ledger__tile-label[b-pdtchwwrg7] {
    margin-top: 6px;
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-silver-300);
}

/* ── The ledger ─────────────────────────────────────────── */

.ach-ledger__scroll[b-pdtchwwrg7] {
    margin-top: 44px;
    overflow-x: auto;
}

.ach-ledger__table[b-pdtchwwrg7] {
    min-width: 960px;
}

.ach-ledger__columns[b-pdtchwwrg7] {
    display: grid;
    grid-template-columns: var(--ach-ledger-cols);
    gap: var(--ach-ledger-gap);
    padding: var(--ach-ledger-pad);
    padding-bottom: var(--space-3);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-white);
}

.ach-ledger__num[b-pdtchwwrg7] { text-align: right; }

/* ── One path's block ───────────────────────────────────── */

.ach-ledger__group[b-pdtchwwrg7] {
    margin-bottom: 26px;
    border: 1px solid rgb(var(--faction-accent-rgb) / 0.28);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(150deg, rgb(var(--faction-accent-rgb) / 0.09) 0%, rgb(6 9 24 / 0.72) 55%);
    backdrop-filter: blur(8px);
    box-shadow: 0 0 34px rgb(var(--faction-accent-rgb) / 0.08);
}

.ach-ledger__group-head[b-pdtchwwrg7] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 22px;
    border-bottom: 1px solid rgb(var(--faction-accent-rgb) / 0.2);
    background: rgb(var(--faction-accent-rgb) / 0.07);
}

.ach-ledger__sigil[b-pdtchwwrg7] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    font-size: 21px;
    border: 1px solid rgb(var(--faction-accent-rgb) / 0.5);
    border-radius: 11px;
    background: rgb(var(--faction-accent-rgb) / 0.16);
    box-shadow: 0 0 16px rgb(var(--faction-accent-rgb) / 0.3);
}

.ach-ledger__group-name[b-pdtchwwrg7] { min-width: 0; }

.ach-ledger__group-title[b-pdtchwwrg7] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: 27px;
    line-height: 1.1;
    color: var(--faction-accent);
    text-shadow: 0 0 16px rgb(var(--faction-accent-rgb) / 0.45);
}

.ach-ledger__group-tagline[b-pdtchwwrg7] {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-silver-300);
}

.ach-ledger__group-stats[b-pdtchwwrg7] {
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 0 0 0 auto;
    text-align: right;
}

.ach-ledger__group-stats > div:last-child[b-pdtchwwrg7] { min-width: 70px; }

.ach-ledger__group-stats dd[b-pdtchwwrg7] {
    margin: 0;
    font-weight: var(--weight-bold);
    font-size: 17px;
    color: var(--faction-accent);
}

.ach-ledger__group-stats dt[b-pdtchwwrg7] {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-silver-400);
}

/* ── A part ─────────────────────────────────────────────── */

.ach-ledger__row[b-pdtchwwrg7] {
    display: grid;
    grid-template-columns: var(--ach-ledger-cols);
    gap: var(--ach-ledger-gap);
    align-items: center;
    padding: 17px 22px;
    border-top: 1px solid rgb(255 255 255 / 0.05);
    transition: background var(--transition-default);
}

.ach-ledger__row:hover[b-pdtchwwrg7] { background: rgb(255 255 255 / 0.045); }

/* A part still to come is dimmed rather than hidden: the shape of what is left stays readable. */
.ach-ledger__row[data-status="locked"][b-pdtchwwrg7] { opacity: 0.55; }

.ach-ledger__row[data-status="active"][b-pdtchwwrg7] { background: rgb(251 191 36 / 0.06); }

.ach-ledger__index[b-pdtchwwrg7] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-silver-500);
}

.ach-ledger__row[data-status="done"] .ach-ledger__index[b-pdtchwwrg7],
.ach-ledger__row[data-status="active"] .ach-ledger__index[b-pdtchwwrg7] { color: var(--color-silver-200); }

/* The rail carries the row's state in the corner of your eye, ahead of the badge. */
.ach-ledger__rail[b-pdtchwwrg7] {
    flex: 0 0 auto;
    width: 3px;
    height: 30px;
    border-radius: 2px;
    background: rgb(255 255 255 / 0.1);
}

.ach-ledger__row[data-status="done"] .ach-ledger__rail[b-pdtchwwrg7] { background: var(--faction-accent); }
.ach-ledger__row[data-status="active"] .ach-ledger__rail[b-pdtchwwrg7] { background: var(--color-gold-300); }

.ach-ledger__part[b-pdtchwwrg7] {
    display: block;
    min-width: 0;
}

.ach-ledger__part-title[b-pdtchwwrg7] {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: 20px;
    letter-spacing: 0.02em;
    text-wrap: pretty;
    color: var(--color-silver-300);
}

.ach-ledger__row[data-status="done"] .ach-ledger__part-title[b-pdtchwwrg7],
.ach-ledger__row[data-status="active"] .ach-ledger__part-title[b-pdtchwwrg7] { color: var(--color-white); }

.ach-ledger__part-meta[b-pdtchwwrg7] {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-silver-400);
}

.ach-ledger__value[b-pdtchwwrg7] {
    font-size: 15px;
    color: var(--color-silver-500);
}

.ach-ledger__row[data-status="done"] .ach-ledger__value[b-pdtchwwrg7],
.ach-ledger__row[data-status="active"] .ach-ledger__value[b-pdtchwwrg7] { color: var(--color-silver-200); }

.ach-ledger__score[b-pdtchwwrg7] {
    font-weight: var(--weight-bold);
    font-size: 15px;
    color: var(--color-silver-500);
}

.ach-ledger__row[data-status="done"] .ach-ledger__score[b-pdtchwwrg7] { color: var(--color-gold-200); }

/* ── Status badge ───────────────────────────────────────── */

.ach-ledger__status[b-pdtchwwrg7] {
    gap: 6px;
    padding: 4px var(--space-3);
    font-weight: var(--weight-extrabold);
    font-size: 11px;
    letter-spacing: 0.16em;
    border-radius: 14px;
}

[data-status="done"] .ach-ledger__status[b-pdtchwwrg7] {
    color: var(--pur-300);
    border-color: rgb(var(--pur-400-rgb) / 0.6);
    background: rgb(2 44 34 / 0.6);
    box-shadow: 0 0 16px rgb(var(--pur-400-rgb) / 0.25);
}

[data-status="active"] .ach-ledger__status[b-pdtchwwrg7] {
    color: var(--color-gold-200);
    border-color: rgb(251 191 36 / 0.75);
    background: rgb(69 42 4 / 0.6);
    box-shadow: 0 0 20px rgb(251 191 36 / 0.35);
}

[data-status="locked"] .ach-ledger__status[b-pdtchwwrg7] {
    color: var(--color-silver-400);
    border-color: rgb(148 163 184 / 0.25);
    background: rgb(255 255 255 / 0.03);
}

/* ── The Desync ─────────────────────────────────────────── */

/*
  The final card belongs to neither path, so it drops the faction tint entirely for a colourless
  hole in the page — a dark that the rest of the ledger is measured against.
*/
.ach-ledger__final[b-pdtchwwrg7] {
    position: relative;
    overflow: hidden;
    border: 1px solid rgb(226 232 240 / 0.28);
    border-radius: var(--radius-xl);
    background: radial-gradient(ellipse 70% 120% at 12% 50%, #14161f 0%, #0a0b12 45%, #05060c 100%);
    box-shadow: 0 0 40px rgb(148 163 184 / 0.12), inset 0 0 60px rgb(0 0 0 / 0.9);
}

.ach-ledger__void[b-pdtchwwrg7] {
    position: absolute;
    left: -80px;
    top: 50%;
    width: 420px;
    height: 420px;
    margin-top: -210px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgb(0 0 0 / 0.95) 0%, rgb(0 0 0 / 0.6) 40%, rgb(0 0 0 / 0) 62%);
    animation: ach-ledger-void-breathe-b-pdtchwwrg7 10s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ach-ledger-void-breathe-b-pdtchwwrg7 {
    0%, 100% { transform: scale(0.9); opacity: 0.82; }
    50% { transform: scale(1.2); opacity: 1; }
}

/* Lifts the row clear of the breathing void behind it. */
.ach-ledger__final-table[b-pdtchwwrg7] { position: relative; }

.ach-ledger__row--final[b-pdtchwwrg7] {
    padding: 22px;
    border-top: none;
}

.ach-ledger__row--final:hover[b-pdtchwwrg7] { background: transparent; }

.ach-ledger__row--final .ach-ledger__index[b-pdtchwwrg7] { justify-content: center; }

.ach-ledger__orb[b-pdtchwwrg7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-silver-100);
    border: 1.5px solid rgb(226 232 240 / 0.7);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #3a3f52, #14161f 55%, #05060c 100%);
    box-shadow: 0 0 26px rgb(148 163 184 / 0.4), inset 0 0 22px rgb(0 0 0 / 0.9);
}

.ach-ledger__final-title[b-pdtchwwrg7] {
    display: block;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: 30px;
    line-height: 1.1;
    color: var(--color-silver-100);
    text-shadow: 0 0 20px rgb(148 163 184 / 0.35);
}

.ach-ledger__final-meta[b-pdtchwwrg7] {
    display: block;
    margin-top: 2px;
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-silver-300);
}

/*
  The final card carries its status on the section, not on the row — the row rules above key off
  .ach-ledger__row[data-status], so it needs its own pair.
*/
.ach-ledger__final[data-status="done"] .ach-ledger__value[b-pdtchwwrg7],
.ach-ledger__final[data-status="active"] .ach-ledger__value[b-pdtchwwrg7] { color: var(--color-silver-200); }

.ach-ledger__final[data-status="done"] .ach-ledger__score[b-pdtchwwrg7] { color: var(--color-gold-200); }

/* ── Narrow screens ─────────────────────────────────────── */

@media (max-width: 720px) {
    .ach-ledger__summary[b-pdtchwwrg7] { width: 100%; }

    .ach-ledger__total[b-pdtchwwrg7] {
        flex: 1 1 100%;
        min-width: 0;
        padding: var(--space-4) var(--space-5);
    }

    .ach-ledger__total-value[b-pdtchwwrg7] { font-size: var(--text-4xl); }

    .ach-ledger__tiles[b-pdtchwwrg7] { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ach-ledger__total-value[b-pdtchwwrg7],
    .ach-ledger__void[b-pdtchwwrg7] { animation: none; }
}
/* /Components/Shared/BreakOverlay.razor.rz.scp.css */
/*
  Rest Mode — ported from the full-screen overlay in "Achrona Challenge Site.dc.html".
  Faction colours come from wwwroot/css/achrona/tokens/factions.css:
  Brand blue for The Augmented, Emerald green for The Purists.
*/

.ach-rest[b-mwc807mnq5] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-8) var(--space-6);
    font-family: var(--font-body);
    /* Centre stop is --aug-900 pulled toward the void, so the wash reads Brand-blue. */
    background: radial-gradient(ellipse 80% 80% at 50% 45%, #091942 0%, #0a0a1c 55%, #050510 100%);
}

/* ── Drifting motes ─────────────────────────────────────── */

.ach-rest__mote[b-mwc807mnq5] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ach-rest__mote--1[b-mwc807mnq5] {
    top: 60%;
    left: 20%;
    width: 8px;
    height: 8px;
    background: var(--aug-400);
    box-shadow: 0 0 14px rgb(var(--aug-400-rgb) / 0.9);
    animation: ach-rise 12s linear infinite;
}

.ach-rest__mote--2[b-mwc807mnq5] {
    top: 70%;
    left: 40%;
    width: 6px;
    height: 6px;
    background: var(--pur-300);
    box-shadow: 0 0 14px rgb(var(--pur-300-rgb) / 0.9);
    animation: ach-rise 14s linear infinite 2s;
}

.ach-rest__mote--3[b-mwc807mnq5] {
    top: 65%;
    left: 62%;
    width: 9px;
    height: 9px;
    background: var(--aug-500);
    box-shadow: 0 0 14px rgb(var(--aug-500-rgb) / 0.9);
    animation: ach-rise 11s linear infinite 4s;
}

.ach-rest__mote--4[b-mwc807mnq5] {
    top: 72%;
    left: 78%;
    width: 6px;
    height: 6px;
    background: var(--pur-300);
    box-shadow: 0 0 14px rgb(var(--pur-300-rgb) / 0.9);
    animation: ach-rise 15s linear infinite 1s;
}

/* ── Breathing orb ──────────────────────────────────────── */

.ach-rest__orb[b-mwc807mnq5] {
    position: relative;
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ach-rest__ring[b-mwc807mnq5] {
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    animation: ach-ring 4s ease-out infinite;
}

.ach-rest__ring--aug[b-mwc807mnq5] {
    border: 1px solid rgb(var(--aug-600-rgb) / 0.4);
}

.ach-rest__ring--pur[b-mwc807mnq5] {
    border: 1px solid rgb(var(--pur-400-rgb) / 0.4);
    animation-delay: 2s;
}

.ach-rest__orbit[b-mwc807mnq5] {
    position: absolute;
    width: 300px;
    height: 300px;
    animation: ach-spin-slow 26s linear infinite;
}

.ach-rest__satellite[b-mwc807mnq5] {
    position: absolute;
    border-radius: 50%;
}

.ach-rest__satellite--top[b-mwc807mnq5],
.ach-rest__satellite--right[b-mwc807mnq5] {
    width: 8px;
    height: 8px;
    background: var(--aug-400);
    box-shadow: 0 0 12px rgb(var(--aug-400-rgb) / 0.9);
}

.ach-rest__satellite--bottom[b-mwc807mnq5],
.ach-rest__satellite--left[b-mwc807mnq5] {
    width: 6px;
    height: 6px;
    background: var(--pur-300);
    box-shadow: 0 0 12px rgb(var(--pur-300-rgb) / 0.9);
}

.ach-rest__satellite--top[b-mwc807mnq5] {
    top: -4px;
    left: calc(50% - 4px);
}

.ach-rest__satellite--bottom[b-mwc807mnq5] {
    bottom: -4px;
    left: calc(50% - 4px);
}

.ach-rest__satellite--left[b-mwc807mnq5] {
    left: -4px;
    top: calc(50% - 4px);
}

.ach-rest__satellite--right[b-mwc807mnq5] {
    right: -4px;
    top: calc(50% - 4px);
}

.ach-rest__core[b-mwc807mnq5] {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    /* Brand at the highlight, deep Brand through the body, Emerald at the rim. */
    background: radial-gradient(circle at 40% 35%, var(--aug-400) 0%, var(--aug-600) 35%, var(--pur-400) 100%);
    filter: blur(2px);
    box-shadow: 0 0 60px rgb(var(--aug-600-rgb) / 0.7), 0 0 100px rgb(var(--pur-400-rgb) / 0.4);
    animation: ach-breathe 5s ease-in-out infinite;
}

.ach-rest__moon[b-mwc807mnq5] {
    position: absolute;
    font-family: var(--font-display);
    font-size: 2.125rem; /* 34px, as in the design */
    color: var(--text-primary);
    text-shadow: 0 0 18px rgb(0 0 0 / 0.6);
}

/* ── Copy ───────────────────────────────────────────────── */

.ach-rest__title[b-mwc807mnq5] {
    margin: var(--space-8) 0 0;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: clamp(2.25rem, 7vw, 54px);
    line-height: var(--leading-none);
    color: var(--text-primary);
    white-space: nowrap;
    text-shadow: 0 0 28px rgb(var(--aug-600-rgb) / 0.7);
    animation: ach-glow-pulse 4s ease-in-out infinite;
}

.ach-rest__lead[b-mwc807mnq5] {
    margin: var(--space-5) 0 0;
    max-width: 460px;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-silver-300);
}

/* ── Readouts ───────────────────────────────────────────── */

.ach-rest__stats[b-mwc807mnq5] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.ach-rest__stat[b-mwc807mnq5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.ach-rest__value[b-mwc807mnq5] {
    font-family: var(--font-mono);
    font-weight: var(--weight-bold);
    font-size: clamp(1.75rem, 5vw, 40px);
    line-height: var(--leading-none);
    font-variant-numeric: tabular-nums;
}

.ach-rest__value--pur[b-mwc807mnq5] {
    color: var(--pur-300);
    text-shadow: 0 0 16px rgb(var(--pur-400-rgb) / 0.6);
}

.ach-rest__value--gold[b-mwc807mnq5] {
    color: var(--color-gold-300);
    text-shadow: 0 0 16px rgb(245 158 11 / 0.5);
}

.ach-rest__label[b-mwc807mnq5] {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-silver-400);
}

.ach-rest__divider[b-mwc807mnq5] {
    width: 1px;
    height: 46px;
    background: rgb(148 163 184 / 0.25);
}

/*
  Sits where the design puts the "Exit rest mode (admin)" button. Participants
  cannot end a break, so the slot carries the status line instead.
*/
.ach-rest__note[b-mwc807mnq5] {
    margin: var(--space-10) 0 0;
    padding: var(--space-2) var(--space-5);
    border: 1px solid rgb(148 163 184 / 0.3);
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-silver-400);
}

@media (max-width: 600px) {
    .ach-rest__orb[b-mwc807mnq5] {
        transform: scale(0.72);
    }

    .ach-rest__stats[b-mwc807mnq5] {
        gap: var(--space-5);
    }
}
/* /Components/Shared/OracleCompanion.razor.rz.scp.css */
/*
  The Oracle companion — GYRO-HALO (The Augmented) and GROVE-SHELL (The Purists).

  Ported from "AI Companion Finalists (Standalone).html". The design computes most of its styling
  in JS and writes it out as inline styles; here that becomes data-attribute rules
  (data-faction / data-mood / data-curious / data-finish) so only the numeric knobs stay inline.

  ── How to tune this file ────────────────────────────────────────────────────
  Every line tagged TUNE is a design knob. Anything reading var(--oa-…) is also a
  [Parameter] on OracleCompanion.razor and has a live slider at /admin/ai-assistants/designs —
  change it there first, then paste the value you settled on into the parameter default.

  Careful: CSS comments do not nest. Writing the TUNE tag with its comment delimiters inside this
  block would close the block early, and everything below would be parsed as CSS — which is exactly
  how the Augmented palette went missing once already.

  ── Keyframe naming ──────────────────────────────────────────────────────────
  Blazor's scoped-CSS rewriter renames @keyframes declared here and every animation that references
  them (oa-a-happy becomes oa-a-happy-b-), so they cannot collide with the ach-* set in
  wwwroot/css/achrona/tokens/animations.css. The oa- prefix is kept anyway, to make it obvious at a
  glance which file an animation belongs to.

  The flip side: an animation defined here is NOT reachable from another stylesheet, and one defined
  in animations.css is not reachable from here. Keep every companion keyframe in this file.

  Class names are deliberately ach-companion__* so the global
  @media (prefers-reduced-motion: reduce) rule in that same file — which targets [class^="ach-"] —
  stills the whole character for free.

  ── Scope ────────────────────────────────────────────────────────────────────
  The design source also carries earlier concepts (a uranium nucleus, a reactor core) and unpicked
  variants (four eye shapes, six blob shapes). Only what the two finalists actually use is ported:
  the Purists shell is the "wavy" blob with "dot" eyes, which is what the design ships as its state
  default. The Augmented orb keeps all four finishes because orbFinish is an authored prop.
*/

/* ═══════════════════════════════════════════════════════════════════════
   PALETTES

   These are the design's own hex values, used verbatim per the design call.

   TODO: reconcile with wwwroot/css/achrona/tokens/factions.css. Findings so far —

     1. Augmented: the two ladders are off by one step. The design's brand.p500 (#004fe2) is the
        repo's --aug-600; the repo inserted #2e64f5 as --aug-500 and pushed #004fe2 down one.
        Rough mapping: p50->--aug-100, p100~--aug-200, p200/p300~--aug-300, p500->--aug-600,
        p700 #0038a8 vs --aug-700 #0040b5, p800 #022a7a vs --aug-800 #083080,
        p900 #0a1f4a vs --aug-900 #081f52. Close enough that the companion still reads on-brand;
        switching to the tokens would be a small, safe change if we want one source of truth.

     2. Purists: these are genuinely different hues, and there is a naming trap. The design's
        palette entry LABELLED "Emerald" (#dcfce7 / #86efac / #4ade80 / #16a34a / #14532d) is the
        Tailwind *green* ramp. The repo's --pur-* — and AchronaPalette.Purists, also named
        "Emerald" — is the Tailwind *emerald* ramp (#d1fae5 / #a7f3d0 / #6ee7b7 / #34d399 /
        #10b981). Same label, different hue: the design's green is yellower and more saturated,
        the repo's emerald bluer. So the companion reads slightly warmer than the rest of the
        Purists UI. Needs a design call on which one is correct before the event.

     3. The orbiting spheres are #ef4444, from neither palette, so they get their own variable
        rather than being derived from the faction.
   ═══════════════════════════════════════════════════════════════════════ */

.ach-companion[data-faction="augmented"][b-66pxo0ypxs] {
    /* Design PALETTES.brand */
    --oa-p50: #eaf1ff;
    --oa-p100: #d6e4ff;
    --oa-p200: #a8c4ff;
    --oa-p300: #6fa0ff;
    --oa-p500: #004fe2;
    --oa-p600: #1f5ff0;
    --oa-p700: #0038a8;
    --oa-p800: #022a7a;
    --oa-p900: #0a1f4a;

    --oa-p200-rgb: 168 196 255;
    --oa-p500-rgb: 0 79 226;

    --oa-eye-color: var(--oa-p900);               /* TUNE: eye fill */
    --oa-core-size: 130px;                        /* TUNE: orb diameter */
    --oa-core-glow: 0 0 44px rgb(var(--oa-p500-rgb) / 0.7),
                    inset 0 0 22px rgb(var(--oa-p200-rgb) / 0.6);  /* TUNE: orb glow */

    /* TUNE: the orbiting spheres and their dashed tracks. Red on purpose — it is the one warm
       accent on an otherwise cold character. */
    --oa-orbit-ball: #ef4444;
    --oa-track-a: rgb(239 68 68 / 0.6);
    --oa-track-b: rgb(248 113 113 / 0.5);

    /* TUNE: the halo is deliberately Purist-green on the Augmented companion — a hint that the two
       factions share one Oracle. Change to var(--oa-p300) to make it monochrome. */
    --oa-halo-color: rgb(74 222 128 / 0.4);
}

.ach-companion[data-faction="purists"][b-66pxo0ypxs] {
    /* Design GPALETTES.emerald — see finding 2 above: this is the Tailwind green ramp. */
    --oa-g50: #dcfce7;
    --oa-g100: #86efac;
    --oa-g200: #4ade80;
    --oa-g300: #16a34a;
    --oa-g600: #14532d;

    --oa-g100-rgb: 134 239 172;
    --oa-g200-rgb: 74 222 128;
    --oa-g300-rgb: 22 163 74;

    --oa-core-size: 118px;                        /* TUNE: cell diameter */
    --oa-core-glow: 0 0 46px rgb(var(--oa-g300-rgb) / 0.6),
                    inset 0 0 22px rgb(var(--oa-g100-rgb) / 0.4);  /* TUNE: cell glow */

    /* TUNE: cell interior. The two dark stops are the cytoplasm shading. */
    --oa-cell-bg: radial-gradient(circle at 35% 30%, var(--oa-g200), #14352a 55%, #081711 88%);

    /* TUNE: the odd bead out — amber against green, so one ring always reads as "other". */
    --oa-bead-amber: #fde68a;
    --oa-bead-amber-glow: #d97706;

    /* Purist eyes sit on a smaller face, so they track a little less than the Augmented ones.
       0.78 is the design's own multiplier. */
    --oa-gaze-damping: 0.78;                      /* TUNE: Purist gaze travel, relative to Augmented */
}

/* ═══════════════════════════════════════════════════════════════════════
   STAGE

   The character is authored at 180x180 design pixels. Everything inside stays in those pixels and
   the whole stage is scaled, so the launcher and the admin previews share one set of proportions.
   ═══════════════════════════════════════════════════════════════════════ */

/*
  Every element of the companion is a , so the launcher can host it inside a