@font-face { font-family: "Avenorys UI"; src: url("/assets/fonts/inter-latin-variable.woff2") format("woff2"); font-style: normal; font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Avenorys Display"; src: url("/assets/fonts/spectral-latin-600.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Avenorys Display"; src: url("/assets/fonts/spectral-latin-700.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --night: #10182e;
  --map-blue: #1f3764;
  --map-blue-2: #172b50;
  --gold: #f2b84b;
  --gold-soft: #ffd88a;
  --resonance: #45d6c5;
  --danger: #e9675a;
  --parchment: #f2e7cf;
  --discord: #7c5cd6;
  --ink: #172033;
  --muted: #acc5cc;
  --glass: rgba(13, 28, 54, .86);
  --glass-soft: rgba(25, 52, 84, .72);
  --line: rgba(175, 223, 218, .24);
  --shadow: 0 22px 70px rgba(3, 9, 22, .42);
  --radius: 18px;
  --font-ui: "Avenorys UI", "Segoe UI", Arial, sans-serif;
  --font-display: "Avenorys Display", Georgia, serif;
  font-family: var(--font-ui);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; overflow: hidden; }
body { background: var(--night); color: var(--parchment); font: 16px/1.5 var(--font-ui); letter-spacing: -.008em; overscroll-behavior: none; }
body.game-view-open { overflow: hidden; }
#viewport-frame { position: fixed; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background: var(--night); }
#viewport-safe-area { position: absolute; inset: env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0); display: grid; place-items: center; overflow: hidden; background: #0a1629; }
#viewport-safe-area:has(#viewport-stage[data-scaling-mode="bounded-adaptive-v2"]) { background-image: image-set(url("/assets/images/confluenza-hub-0.2.avif") type("image/avif"),url("/assets/images/confluenza-hub-0.2.webp") type("image/webp"),url("/assets/images/confluenza-hub-0.2.png") type("image/png")); background-position: center; background-size: cover; background-repeat: no-repeat; }
#viewport-stage-host { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: visible; isolation: isolate; background: var(--night); }
#viewport-stage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; transform-origin: left top; container: avenorys-stage / size; }
#app, #viewport-portals { width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; }
#viewport-portals { position: absolute; z-index: 200; inset: 0; overflow: visible; pointer-events: none; }
#viewport-portals > * { pointer-events: auto; }
#viewport-stage[data-touch-input="true"] button, #viewport-stage[data-touch-input="true"] a, #viewport-stage[data-touch-input="true"] input, #viewport-stage[data-touch-input="true"] select, #viewport-stage[data-touch-input="true"] textarea { touch-action: manipulation; }
.orientation-gate { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; padding: max(1.25rem,env(safe-area-inset-top,0)) max(1.25rem,env(safe-area-inset-right,0)) max(1.25rem,env(safe-area-inset-bottom,0)) max(1.25rem,env(safe-area-inset-left,0)); background: radial-gradient(circle at 50% 35%,rgba(69,214,197,.16),transparent 34%),linear-gradient(145deg,#071425,#0e2038 58%,#07111f); color: var(--parchment); text-align: center; }
.orientation-gate[hidden] { display: none; }
.orientation-gate-card { width: min(100%,480px); display: grid; justify-items: center; gap: .65rem; padding: 1.5rem; border: 1px solid rgba(190,225,219,.3); border-radius: 24px; background: rgba(5,17,34,.88); box-shadow: var(--shadow); }
.orientation-gate h1 { margin: 0; color: #fff0c9; font: 600 2.2rem/1.05 var(--font-display); }
.orientation-gate p:last-child { max-width: 34rem; margin: 0; color: #c6d9d5; }
.orientation-device { position: relative; width: 74px; height: 112px; display: grid; place-items: center; border: 3px solid var(--gold-soft); border-radius: 13px; transform: rotate(90deg); box-shadow: 0 0 24px rgba(242,184,75,.18); }
.orientation-device::before { content: ""; position: absolute; top: 6px; width: 20px; height: 3px; border-radius: 999px; background: rgba(242,216,138,.72); }
.orientation-device i { width: 44px; height: 58px; border: 1px solid rgba(69,214,197,.58); border-radius: 8px; background: radial-gradient(circle,rgba(69,214,197,.28),rgba(5,18,35,.84)); }
button, input { font: inherit; }
button { color: inherit; }
button:not(:disabled), [role="button"] { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
:focus-visible { outline: 3px solid var(--resonance); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: -4rem; left: 1rem; padding: .7rem 1rem; background: var(--parchment); color: var(--ink); border-radius: 0 0 8px 8px; }
.skip-link:focus { top: 0; }
.eyebrow { margin: 0 0 .45rem; color: var(--resonance); font-size: .72rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.muted { color: var(--muted); }
.danger-text { color: #ff9b90; }

.loading-screen { min-height: 100cqh; display: grid; place-content: center; text-align: center; padding: 2rem; background: radial-gradient(circle at 50% 30%, #285c6b 0, #142f48 38%, var(--night) 100%); }
.loading-screen h1 { margin: .2rem; color: var(--gold); font: 700 clamp(3rem, 12cqw, 7rem)/1 var(--font-display); letter-spacing: .1em; }

.auth-layout { height: 100cqh; min-height: 0; display: grid; grid-template-columns: minmax(620px, 1.25fr) minmax(460px, .75fr); overflow: hidden; background: var(--night); }
.auth-world { position: relative; isolation: isolate; min-height: 0; display: flex; align-items: flex-end; padding: clamp(3rem, 7cqw, 8rem); overflow: hidden; background-color: #15223a; background-image: url("/assets/images/confluenza-hub-0.2.png"); background-image: image-set(url("/assets/images/confluenza-hub-0.2.avif") type("image/avif"), url("/assets/images/confluenza-hub-0.2.webp") type("image/webp"), url("/assets/images/confluenza-hub-0.2.png") type("image/png")); background-position: center; background-size: cover; background-repeat: no-repeat; }
.auth-world::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(7,15,32,.08), rgba(7,15,32,.12) 48%, rgba(7,15,32,.88)), linear-gradient(0deg, rgba(5,14,25,.9), transparent 58%); }
.auth-brand-lockup { position: absolute; left: clamp(2rem,5cqw,5rem); top: clamp(2rem,5cqw,4.5rem); display: flex; align-items: center; gap: .9rem; color: var(--parchment); text-shadow: 0 2px 18px rgba(0,0,0,.72); }
.auth-brand-lockup img { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; filter: drop-shadow(0 0 18px rgba(69,214,197,.26)); }
.auth-brand-lockup strong { display: block; font: 700 1.42rem/1 var(--font-display); letter-spacing: .16em; }
.auth-brand-lockup span { display: block; margin-top: .25rem; color: #d7e7e1; font-size: .7rem; letter-spacing: .13em; }
.auth-copy { max-width: 700px; text-shadow: 0 2px 20px rgba(0,0,0,.65); }
.auth-copy h1 { margin: .1rem 0 .8rem; font: 700 clamp(4rem, 8cqw, 8rem)/.88 var(--font-display); letter-spacing: .06em; color: var(--parchment); }
.auth-copy .lead { max-width: 600px; margin: 0; color: #e2f1ed; font-size: clamp(1.1rem, 2cqw, 1.45rem); }
.auth-panel { min-height: 0; display: grid; place-items: center; padding: 3rem; overflow: auto; background: radial-gradient(circle at 20% 0, rgba(69,214,197,.12), transparent 35%), var(--night); border-left: 1px solid var(--line); }
.auth-card { width: min(100%, 480px); padding: 2rem; background: rgba(25,55,100,.44); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.brand-mark { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; filter: drop-shadow(0 0 18px rgba(69,214,197,.18)); }
.auth-card h2 { margin: .8rem 0 .35rem; font: 600 2rem/1.1 var(--font-display); }
.tab-list { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin: 1.6rem 0; padding: .35rem; background: rgba(4,13,28,.46); border-radius: 12px; }
.tab-list button { padding: .72rem; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 750; }
.tab-list button[aria-selected="true"] { background: var(--map-blue); color: var(--parchment); box-shadow: 0 5px 18px rgba(0,0,0,.25); }
.field { display: grid; gap: .42rem; margin: 1rem 0; }
.field label { color: #cce0df; font-size: .86rem; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; box-sizing: border-box; padding: .85rem .95rem; border: 1px solid rgba(191,223,218,.28); border-radius: 10px; background: rgba(5,16,35,.72); color: white; color-scheme: dark; font: inherit; }
.field textarea { min-height: 5.8rem; resize: vertical; line-height: 1.45; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(69,214,197,.55); }
.field small { color: var(--muted); }
.form-error { min-height: 1.5rem; margin: .5rem 0; color: #ffaea5; }
.policy-confirmations { display: grid; gap: .7rem; margin: 1rem 0; padding: .9rem; border: 1px solid var(--line); border-radius: 12px; }
.policy-confirmations legend { padding: 0 .35rem; color: #cce0df; font-weight: 800; }
.policy-confirmations label { display: grid; grid-template-columns: 1.2rem 1fr; gap: .55rem; align-items: start; color: #cce0df; font-size: .82rem; }
.policy-confirmations input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--resonance); }
.policy-confirmations a, .profile-privacy-panel a { color: #bff9ef; }
.auth-form-actions { display: grid; gap: .72rem; margin-top: .3rem; }
.auth-forgot-button { min-height: 44px; padding: .68rem 1rem; border: 1px solid rgba(171,218,213,.24); border-radius: 10px; background: rgba(6,22,42,.48); color: #bff9ef; font-weight: 780; transition: background .18s ease,border-color .18s ease,color .18s ease; }
.auth-forgot-button:hover:not(:disabled) { border-color: rgba(69,214,197,.55); background: rgba(69,214,197,.13); color: #e2fff9; }

.primary-button, .secondary-button, .ghost-button, .danger-button, .icon-button { border: 1px solid transparent; border-radius: 10px; padding: .72rem 1rem; font-weight: 800; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.primary-button { background: var(--gold); color: #1b2635; box-shadow: 0 8px 24px rgba(242,184,75,.2); }
.primary-button:hover:not(:disabled) { background: var(--gold-soft); transform: translateY(-1px); }
.secondary-button { background: rgba(69,214,197,.13); border-color: rgba(69,214,197,.42); color: #bff9ef; }
.secondary-button:hover:not(:disabled) { background: rgba(69,214,197,.23); }
.ghost-button { background: rgba(9,23,45,.45); border-color: var(--line); color: var(--parchment); }
.ghost-button:hover:not(:disabled) { border-color: rgba(242,184,75,.48); background: rgba(31,55,100,.75); }
.danger-button { background: rgba(233,103,90,.15); border-color: rgba(233,103,90,.45); color: #ffb7b0; }
.wide-button { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.link-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.profile-body { max-width: 1560px; display: grid; align-content: start; gap: 1rem; padding: 1rem clamp(1rem,2.3cqw,2.4rem) 1.5rem; }
.profile-hero, .profile-card { border: 1px solid rgba(171,218,213,.24); background: linear-gradient(150deg,rgba(18,46,77,.94),rgba(5,17,35,.97)); box-shadow: 0 22px 58px rgba(1,7,17,.32), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(15px); }
.profile-hero { min-height: 116px; display: grid; grid-template-columns: 88px minmax(0,1fr) auto; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border-radius: 20px; background: radial-gradient(circle at 5% 20%,rgba(69,214,197,.13),transparent 30%),linear-gradient(145deg,rgba(20,50,82,.95),rgba(5,17,35,.97)); }
.profile-hero > img { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(242,216,138,.38),0 0 28px rgba(69,214,197,.16); }
.profile-hero-copy { min-width: 0; }
.profile-hero-copy .eyebrow { margin: 0 0 .18rem; }
.profile-hero-copy h2 { margin: 0; overflow: hidden; color: #fff0d6; font: 600 clamp(1.45rem,2.3cqw,2rem)/1.05 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.profile-hero-copy > p:not(.eyebrow) { max-width: 700px; margin: .34rem 0 0; color: #b8cecd; font-size: .78rem; line-height: 1.42; }
.profile-stat-strip { width: min(100%,530px); display: grid; grid-template-columns: repeat(3,minmax(118px,1fr)); gap: .5rem; margin: 0; }
.profile-stat-strip > div { min-width: 0; padding: .55rem .65rem; border: 1px solid rgba(171,218,213,.16); border-radius: 10px; background: rgba(3,14,29,.48); }
.profile-stat-strip dt { color: #8ea9ab; font-size: .66rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.profile-stat-strip dd { margin: .15rem 0 0; color: #f5e2ad; font: 600 .86rem/1.08 var(--font-display); }
.profile-stat-strip > .profile-xp-stat { grid-column: 1 / -1; padding: .58rem .7rem .65rem; }
.profile-xp-stat dd { display: grid; gap: .38rem; }
.profile-xp-values { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.profile-xp-values strong { color: #fff0c1; font: 600 .84rem/1.1 var(--font-display); white-space: nowrap; }
.profile-xp-values small { overflow: hidden; color: #a8c4c2; font: 750 .66rem/1.25 var(--font-ui); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.profile-xp-progress { position: relative; height: 9px; overflow: hidden; border: 1px solid rgba(171,218,213,.22); border-radius: 999px; background: rgba(2,10,23,.82); box-shadow: inset 0 2px 5px rgba(0,0,0,.35); }
.profile-xp-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#2cb8aa 0%,#45d6c5 52%,#f2c56b 100%); box-shadow: 0 0 14px rgba(69,214,197,.42); transition: width .45s ease; }
.profile-layout { min-height: 0; display: grid; grid-template-columns: minmax(610px,1.35fr) minmax(360px,.65fr); align-items: start; gap: 1rem; }
.profile-main-stack { min-width: 0; display: grid; gap: 1rem; }
.profile-side-stack { min-width: 0; display: grid; gap: 1rem; }
.profile-card { min-width: 0; padding: 1rem; border-radius: 18px; }
.profile-card h2 { margin: 0; color: #f4ead8; font: 600 1.23rem/1.08 var(--font-display); }
.profile-card > .eyebrow { margin: 0 0 .2rem; }
.profile-card-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: .72rem; border-bottom: 1px solid rgba(171,218,213,.14); }
.profile-card-heading .eyebrow { margin: 0 0 .18rem; }
.profile-card-heading > span { color: #8da8aa; font-size: .66rem; }
.profile-field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.profile-field-grid .field { margin: .8rem 0 0; }
.profile-language-field small { line-height: 1.35; }
.profile-toggle-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; margin-top: .85rem; }
.profile-toggle { min-width: 0; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: .65rem; padding: .72rem; border: 1px solid rgba(171,218,213,.17); border-radius: 12px; background: rgba(3,14,29,.44); cursor: pointer; }
.profile-toggle:hover { border-color: rgba(69,214,197,.42); background: rgba(12,38,61,.66); }
.profile-toggle-symbol { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(242,216,138,.3); border-radius: 50%; background: radial-gradient(circle,rgba(242,184,75,.14),rgba(5,18,36,.72)); color: #f2d48f; font-size: 1.05rem; }
.profile-toggle-copy { min-width: 0; display: grid; gap: .16rem; }
.profile-toggle-copy strong { color: #edf3ed; font-size: .76rem; }
.profile-toggle-copy small { color: #94adaf; font-size: .66rem; line-height: 1.35; }
.profile-toggle input { width: 34px; height: 18px; accent-color: var(--resonance); }
.profile-save-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .85rem; padding-top: .75rem; border-top: 1px solid rgba(171,218,213,.14); }
.profile-save-row p { margin: 0; color: #8fa9ab; font-size: .68rem; }
.profile-access-card { display: grid; gap: .6rem; }
.profile-access-card > .muted { margin: 0 0 .15rem; font-size: .72rem; line-height: 1.42; }
.profile-wide-action, .profile-access-card > .danger-button { width: 100%; }
.profile-password-card { display: grid; gap: .58rem; background: radial-gradient(circle at 100% 0,rgba(103,188,218,.12),transparent 32%),linear-gradient(150deg,rgba(18,46,77,.94),rgba(5,17,35,.97)); }
.profile-password-card > .muted { margin: 0; font-size: .72rem; line-height: 1.42; }
.profile-password-form { display: grid; gap: .55rem; margin-top: .2rem; }
.profile-password-form .field { margin: 0; }
.profile-password-form .form-error { min-height: 0; margin: 0; font-size: .68rem; }
.profile-password-actions { display: grid; gap: .6rem; padding-top: .65rem; border-top: 1px solid rgba(171,218,213,.14); }
.profile-password-actions small { line-height: 1.4; }
.profile-password-actions button { width: 100%; }
.profile-guide-card { position: relative; display: grid; grid-template-columns: 72px minmax(0,1fr); align-items: center; gap: .78rem; overflow: hidden; background: radial-gradient(circle at 10% 20%,rgba(242,184,75,.15),transparent 31%),radial-gradient(circle at 100% 100%,rgba(69,214,197,.12),transparent 36%),linear-gradient(150deg,rgba(21,49,78,.97),rgba(5,17,35,.98)); }
.profile-guide-card::after { content: ""; position: absolute; right: -36px; top: -38px; width: 120px; height: 120px; border: 1px solid rgba(242,216,138,.1); border-radius: 50%; box-shadow: inset 0 0 32px rgba(69,214,197,.05); pointer-events: none; }
.profile-guide-emblem { position: relative; width: 66px; height: 66px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(242,216,138,.38); border-radius: 18px 18px 18px 7px; background: linear-gradient(145deg,rgba(22,54,79,.94),rgba(5,18,36,.96)); box-shadow: 0 0 24px rgba(69,214,197,.1),inset 0 1px rgba(255,255,255,.08); }
.profile-guide-emblem::before, .profile-guide-emblem::after { content: ""; position: absolute; top: 14px; width: 24px; height: 36px; border: 1px solid rgba(190,225,219,.5); background: linear-gradient(155deg,rgba(69,214,197,.18),rgba(8,27,47,.9)); box-shadow: inset 0 0 11px rgba(69,214,197,.08); }
.profile-guide-emblem::before { left: 9px; border-radius: 5px 1px 2px 7px; transform: skewY(-8deg); }
.profile-guide-emblem::after { right: 9px; border-color: rgba(242,216,138,.48); border-radius: 1px 5px 7px 2px; transform: skewY(8deg); background: linear-gradient(205deg,rgba(242,184,75,.16),rgba(8,27,47,.9)); }
.profile-guide-emblem span { position: absolute; z-index: 2; width: 2px; height: 35px; background: linear-gradient(var(--gold-soft),rgba(69,214,197,.55)); box-shadow: 0 0 7px rgba(242,184,75,.4); }
.profile-guide-emblem i { position: absolute; z-index: 3; left: 15px; top: 28px; width: 35px; height: 14px; border-top: 2px solid var(--resonance); border-right: 2px solid var(--resonance); border-radius: 50%; transform: rotate(-12deg); filter: drop-shadow(0 0 4px rgba(69,214,197,.6)); }
.profile-guide-emblem b { position: absolute; z-index: 4; right: 14px; top: 20px; width: 8px; height: 8px; border: 1px solid var(--gold-soft); background: #173f55; transform: rotate(45deg); box-shadow: 0 0 10px rgba(242,184,75,.7); }
.profile-guide-copy { min-width: 0; }
.profile-guide-copy .eyebrow { margin: 0 0 .18rem; }
.profile-guide-copy h2 { margin: 0; }
.profile-guide-copy > .muted { margin: .38rem 0 0; font-size: .72rem; line-height: 1.42; }
.profile-guide-open { grid-column: 1 / -1; width: 100%; }
.profile-privacy-panel { display: grid; gap: .58rem; }
.profile-privacy-panel > .muted { margin: 0; font-size: .72rem; line-height: 1.42; }
.profile-policy-actions { display: grid; grid-template-columns: 1fr; gap: .45rem; margin-top: .25rem; }
.profile-policy-actions > * { width: 100%; box-sizing: border-box; }
.profile-danger-zone { margin-top: .2rem; border: 1px solid rgba(233,103,90,.28); border-radius: 11px; background: rgba(95,30,37,.13); }
.profile-danger-zone summary { padding: .62rem .7rem; color: #eab5ae; font-size: .7rem; font-weight: 800; cursor: pointer; }
.profile-danger-form { display: grid; gap: .5rem; margin: 0; padding: .7rem; border-top: 1px solid rgba(233,103,90,.26); }
.profile-danger-form h3 { margin: 0; color: #ffd0ca; font: 600 1rem/1.1 var(--font-display); }
.profile-danger-form .danger-text { margin: 0; color: #d9aaa7; font-size: .68rem; line-height: 1.38; }
.profile-danger-form .field { margin: .25rem 0; }
.profile-danger-form .form-error { min-height: 0; margin: 0; font-size: .68rem; }
.profile-timezone-card { overflow: hidden; background: radial-gradient(circle at 8% 55%,rgba(242,184,75,.12),transparent 28%),linear-gradient(150deg,rgba(19,48,78,.96),rgba(5,17,35,.98)); }
.timezone-layout { display: grid; grid-template-columns: 126px minmax(0,1fr); align-items: center; gap: 1rem; padding-top: .85rem; }
.timezone-orbit { position: relative; width: 104px; height: 104px; display: grid; place-items: center; margin: auto; border: 1px solid rgba(242,216,138,.3); border-radius: 50%; background: radial-gradient(circle,rgba(69,214,197,.2) 0 5%,transparent 6% 23%,rgba(69,214,197,.06) 24% 42%,transparent 43%),rgba(4,16,32,.48); box-shadow: inset 0 0 28px rgba(69,214,197,.08),0 0 28px rgba(242,184,75,.08); }
.timezone-orbit::before, .timezone-orbit::after { content: ""; position: absolute; inset: 17%; border: 1px solid rgba(69,214,197,.55); border-radius: 50%; transform: rotate(33deg) scaleY(.4); }
.timezone-orbit::after { border-color: rgba(242,216,138,.58); transform: rotate(-48deg) scaleY(.5); }
.timezone-orbit span { width: 13px; height: 13px; border: 2px solid var(--gold-soft); border-radius: 50%; background: #173f55; box-shadow: 0 0 16px rgba(242,184,75,.7); }
.timezone-orbit i, .timezone-orbit b { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--resonance); box-shadow: 0 0 9px rgba(69,214,197,.8); }
.timezone-orbit i { left: 15px; top: 42px; }
.timezone-orbit b { right: 21px; bottom: 20px; background: var(--gold-soft); }
.timezone-copy > p { margin: 0; color: #c1d4d1; font-size: .75rem; line-height: 1.45; }
.timezone-field { margin: .65rem 0 .45rem; }
.timezone-field select { padding-block: .68rem; }
.timezone-copy > small { display: block; font-size: .66rem; line-height: 1.4; }
.timezone-save-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1rem; margin-top: .8rem; padding-top: .75rem; border-top: 1px solid rgba(171,218,213,.14); }
.timezone-status { margin: 0; color: #aad0cc; font-size: .69rem; line-height: 1.4; }
.timezone-status.error { color: #ffaea5; }
.cartographer-archive-card { background: radial-gradient(circle at 92% 5%,rgba(69,214,197,.12),transparent 28%),linear-gradient(150deg,rgba(17,45,75,.96),rgba(5,17,35,.98)); }
.cartographer-archive-heading { border-bottom-color: rgba(242,216,138,.18); }
.trace-overview { display: grid; grid-template-columns: repeat(3,minmax(76px,.32fr)) minmax(240px,1.04fr); align-items: stretch; gap: .55rem; margin: .8rem 0; }
.trace-overview > div { display: grid; align-content: center; padding: .55rem .65rem; border: 1px solid rgba(171,218,213,.16); border-radius: 11px; background: rgba(3,14,29,.48); }
.trace-overview strong { color: #f4d891; font: 600 1.15rem/1 var(--font-display); }
.trace-overview small { margin-top: .2rem; color: #8fa9ab; font-size: .66rem; text-transform: uppercase; }
.trace-overview > p { display: flex; align-items: center; margin: 0; padding: .55rem .7rem; border-left: 2px solid var(--resonance); border-radius: 0 10px 10px 0; background: rgba(69,214,197,.05); color: #9fb9b9; font-size: .66rem; line-height: 1.4; }
.cartographer-trace-list { max-height: 430px; display: grid; gap: .55rem; padding-right: .2rem; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(69,214,197,.46) rgba(4,13,28,.36); }
.trace-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .65rem; }
.trace-toolbar select { min-width: 190px; padding: .58rem .7rem; border: 1px solid rgba(171,218,213,.24); border-radius: 10px; background: rgba(4,15,31,.76); color: #e8f1ec; }
.trace-pagination { display: flex; gap: .45rem; }
.cartographer-trace-entry { min-width: 0; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: .7rem; padding: .68rem .75rem; border: 1px solid rgba(171,218,213,.16); border-radius: 12px; background: linear-gradient(105deg,rgba(7,24,44,.82),rgba(19,47,71,.55)); }
.cartographer-trace-entry:hover { border-color: rgba(69,214,197,.36); background: linear-gradient(105deg,rgba(10,31,54,.9),rgba(24,57,82,.7)); }
.trace-route-mark { position: relative; width: 28px; height: 28px; border: 1px solid rgba(69,214,197,.48); border-radius: 50% 50% 50% 7px; transform: rotate(-45deg); background: rgba(4,17,33,.7); }
.trace-route-mark::before { content: ""; position: absolute; left: 7px; top: 12px; width: 13px; height: 3px; border-top: 1.5px solid var(--resonance); border-bottom: 1.5px solid var(--gold-soft); border-radius: 50%; transform: rotate(45deg); }
.cartographer-trace-entry.victory .trace-route-mark { border-color: rgba(242,216,138,.5); box-shadow: 0 0 12px rgba(242,184,75,.1); }
.trace-entry-copy { min-width: 0; }
.trace-entry-heading { display: flex; align-items: center; gap: .55rem; }
.trace-entry-heading h3 { min-width: 0; margin: 0; overflow: hidden; color: #f2eadb; font: 600 .83rem/1.2 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.trace-entry-heading .status-pill { flex: 0 0 auto; }
.trace-entry-copy time { display: block; margin-top: .18rem; color: #829fa2; font-size: .66rem; }
.trace-entry-copy p { margin: .22rem 0 0; overflow: hidden; color: #b4c9c7; font-size: .66rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.cartographer-trace-entry > button { min-width: 145px; padding: .55rem .7rem; font-size: .68rem; }
.cartographer-trace-empty { display: grid; grid-template-columns: 50px minmax(0,1fr); align-items: center; gap: .8rem; padding: 1rem; border: 1px dashed rgba(171,218,213,.23); border-radius: 12px; background: rgba(3,14,29,.35); }
.trace-empty-mark { width: 46px; height: 46px; border: 1px solid rgba(242,216,138,.35); border-radius: 50%; background: radial-gradient(circle,rgba(242,184,75,.18),transparent 58%); }
.cartographer-trace-empty h3 { margin: 0; color: #eee3cf; font: 600 .93rem/1.15 var(--font-display); }
.cartographer-trace-empty p { margin: .25rem 0 0; color: #95adae; font-size: .7rem; }

.game-shell { height: 100cqh; min-height: 0; display: grid; grid-template-rows: 84px minmax(0, 1fr); overflow: hidden; background: var(--night); }
.topbar { position: relative; z-index: 20; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 1.2rem; padding: 0 1.5rem; background: linear-gradient(180deg, rgba(7,15,31,.98), rgba(9,23,43,.9)); border-bottom: 1px solid rgba(205,229,221,.2); box-shadow: 0 16px 38px rgba(2,8,18,.32); backdrop-filter: blur(18px); }
.brand-lockup { display: flex; align-items: center; gap: .75rem; min-width: max-content; }
.brand-lockup img { width: 55px; height: 55px; border-radius: 50%; object-fit: cover; filter: drop-shadow(0 0 12px rgba(69,214,197,.2)); }
.brand-lockup strong { display: block; font: 700 1.22rem/1 var(--font-display); letter-spacing: .16em; }
.brand-lockup span { color: #a9c4c7; font-size: .66rem; letter-spacing: .13em; }
.resource-strip { justify-self: end; display: flex; align-items: center; gap: .55rem; }
.resource { min-width: 166px; height: 56px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: .62rem; padding: .42rem .72rem; border: 1px solid rgba(174,221,215,.24); border-radius: 15px; background: linear-gradient(145deg, rgba(29,59,91,.72), rgba(8,23,44,.82)); box-shadow: inset 0 1px rgba(255,255,255,.05), 0 9px 22px rgba(2,8,18,.16); }
.resource-icon { position: relative; width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(242,184,75,.5); border-radius: 50% 50% 50% 9px; background: radial-gradient(circle at 35% 28%, rgba(255,225,148,.38), rgba(242,184,75,.15) 42%, rgba(8,23,43,.88)); box-shadow: 0 0 18px rgba(242,184,75,.13), inset 0 1px rgba(255,255,255,.12); }
.resource-icon::before, .resource-icon::after { content: ""; position: absolute; }
.resource.marchi .resource-icon::before { width: 15px; height: 15px; border: 1.5px solid var(--gold-soft); border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(242,184,75,.14); }
.resource.marchi .resource-icon::after { width: 5px; height: 5px; border: 1px solid #fff0bd; transform: rotate(45deg); }
.resource.vigore .resource-icon { border-color: rgba(69,214,197,.56); background: radial-gradient(circle at 35% 28%, rgba(175,255,244,.34), rgba(69,214,197,.14) 44%, rgba(6,25,42,.9)); box-shadow: 0 0 18px rgba(69,214,197,.15), inset 0 1px rgba(255,255,255,.1); }
.resource.vigore .resource-icon::before { width: 12px; height: 18px; border: 1.5px solid #9ff5e9; border-radius: 10px 2px 10px 2px; transform: rotate(26deg); background: rgba(69,214,197,.1); }
.resource.vigore .resource-icon::after { width: 1px; height: 13px; background: #d7fff9; transform: rotate(27deg); box-shadow: 4px -3px 0 -0.2px rgba(215,255,249,.7); }
.resource.schegge .resource-icon { border-color: rgba(174,146,255,.58); background: radial-gradient(circle at 35% 28%, rgba(213,200,255,.34), rgba(124,92,214,.18) 44%, rgba(15,18,48,.9)); box-shadow: 0 0 18px rgba(124,92,214,.18), inset 0 1px rgba(255,255,255,.1); }
.resource.schegge .resource-icon::before { width: 12px; height: 20px; border: 1.5px solid #c9baff; background: linear-gradient(135deg, rgba(255,255,255,.2) 0 45%, rgba(124,92,214,.25) 46%); clip-path: polygon(50% 0, 100% 31%, 78% 100%, 22% 100%, 0 31%); }
.resource.schegge .resource-icon::after { width: 1px; height: 13px; background: rgba(242,235,255,.8); transform: rotate(18deg); }
.resource-copy { min-width: 0; display: grid; gap: .08rem; }
.resource-copy > small { overflow: hidden; color: #92b3b8; font-size: .66rem; font-weight: 750; letter-spacing: .06em; line-height: 1; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.resource-value { min-width: 0; display: flex; align-items: baseline; gap: .34rem; }
.resource-value strong { color: #f5ecd9; font: 600 1rem/1.08 var(--font-display); }
.resource-value em { overflow: hidden; color: #c2d7d6; font-size: .74rem; font-style: normal; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.top-actions { justify-self: end; display: flex; align-items: center; gap: .55rem; }
.top-actions button { position: relative; }
.top-command { width: max-content; min-width: 126px; height: 56px; flex: 0 0 auto; display: grid; grid-template-columns: 34px max-content; align-items: center; gap: .62rem; padding: .42rem .72rem; border: 1px solid rgba(174,221,215,.24); border-radius: 15px; background: linear-gradient(145deg, rgba(29,59,91,.72), rgba(8,23,44,.82)); color: var(--parchment); text-align: left; box-shadow: inset 0 1px rgba(255,255,255,.05), 0 9px 22px rgba(2,8,18,.16); transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.top-command:hover { border-color: rgba(242,216,138,.62); background: linear-gradient(145deg, rgba(40,75,108,.88), rgba(12,33,58,.9)); transform: translateY(-1px); }
.top-command-icon { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(69,214,197,.46); border-radius: 50% 50% 50% 9px; background: radial-gradient(circle at 38% 32%, rgba(69,214,197,.28), rgba(6,22,40,.84)); color: #d9fff8; font: 700 1rem/1 var(--font-display); box-shadow: 0 0 16px rgba(69,214,197,.1); }
.top-command-quests .top-command-icon::before { content: "✦"; color: var(--gold-soft); font-size: .95rem; }
.top-command-messages .top-command-icon::before { content: ""; width: 14px; height: 10px; border: 1.5px solid var(--resonance); border-radius: 2px; transform: rotate(-5deg); box-shadow: inset 0 -4px rgba(69,214,197,.08); }
.top-command-messages .top-command-icon::after { content: ""; position: absolute; width: 8px; height: 8px; border-left: 1.5px solid var(--resonance); border-bottom: 1.5px solid var(--resonance); transform: translateY(-2px) rotate(-45deg); }
.top-command-copy { min-width: max-content; display: grid; gap: .08rem; }
.top-command-copy small { color: #92b3b8; font-size: .67rem; font-weight: 750; letter-spacing: .12em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.top-command-copy strong { color: #f3ead7; font: 600 .96rem/1.12 var(--font-display); letter-spacing: .015em; white-space: nowrap; }
.profile-command { min-width: 172px; }
.profile-command .top-command-icon { border-color: rgba(242,184,75,.48); background: radial-gradient(circle at 38% 32%, rgba(242,184,75,.25), rgba(20,30,48,.88)); color: var(--gold-soft); }
.badge { position: absolute; top: -8px; right: -8px; min-width: 21px; height: 21px; display: grid; place-items: center; padding: 0 .3rem; border-radius: 999px; background: var(--danger); color: white; font-size: .7rem; font-weight: 800; border: 2px solid var(--night); }

.hub-main { min-height: 0; position: relative; overflow: hidden; background: #111c31; }
.hub-scene { position: absolute; inset: 0; isolation: isolate; overflow: hidden; background-color: #15223a; background-image: url("/assets/images/confluenza-hub-0.2.png"); background-image: image-set(url("/assets/images/confluenza-hub-0.2.avif") type("image/avif"), url("/assets/images/confluenza-hub-0.2.webp") type("image/webp"), url("/assets/images/confluenza-hub-0.2.png") type("image/png")); background-position: center; background-size: cover; background-repeat: no-repeat; }
.hub-scene::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6,14,30,.28), transparent 25%, transparent 64%, rgba(4,12,25,.48)), linear-gradient(90deg, rgba(5,14,29,.32), transparent 24%, transparent 72%, rgba(5,12,27,.2)); box-shadow: inset 0 0 120px rgba(2,8,18,.24); }
.hub-scene::after { content: ""; position: absolute; z-index: 1; left: 39%; top: 71.5%; width: 34rem; height: 18rem; pointer-events: none; transform: translate(-50%,-50%); background: radial-gradient(ellipse, rgba(69,214,197,.13), transparent 66%); mix-blend-mode: screen; }
.game-ambient { --ambient-primary: 69,214,197; --ambient-secondary: 242,184,75; position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; contain: strict; }
.game-ambient > span { position: absolute; display: block; will-change: transform,opacity; }
.ambient-depth { inset: -12%; opacity: .42; background: radial-gradient(circle at 18% 28%,rgba(var(--ambient-primary),.24),transparent 28%),radial-gradient(circle at 82% 70%,rgba(var(--ambient-secondary),.16),transparent 25%); animation: ambient-depth-drift 18s ease-in-out infinite alternate; }
.ambient-meridian { left: 50%; top: 51%; width: min(74cqw,980px); aspect-ratio: 1; opacity: .2; border: 1px solid rgba(var(--ambient-primary),.55); border-radius: 49% 51% 46% 54%; box-shadow: 0 0 48px rgba(var(--ambient-primary),.13),inset 0 0 38px rgba(var(--ambient-secondary),.08); transform: translate(-50%,-50%) rotate(8deg) scaleY(.42); animation: ambient-meridian-turn 24s linear infinite; }
.ambient-dust { inset: -20%; opacity: .28; background-image: radial-gradient(circle,rgba(255,244,211,.72) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(var(--ambient-primary),.62) 0 1px,transparent 1.6px); background-position: 0 0,37px 53px; background-size: 89px 89px,127px 127px; animation: ambient-dust-rise 26s linear infinite; }
.ambient-motes { left: 8%; right: 8%; bottom: 4%; height: 34%; opacity: .24; background: linear-gradient(105deg,transparent 12%,rgba(var(--ambient-secondary),.25) 13%,transparent 14% 46%,rgba(var(--ambient-primary),.22) 47%,transparent 48% 78%,rgba(255,255,255,.16) 79%,transparent 80%); filter: blur(1px); transform: skewY(-5deg); animation: ambient-motes-breathe 8s ease-in-out infinite alternate; }
.game-ambient-company { --ambient-primary: 242,184,75; --ambient-secondary: 119,174,209; }
.game-ambient-routes { --ambient-primary: 69,214,197; --ambient-secondary: 177,131,255; }
.game-ambient-time-journey { --ambient-primary: 199,148,255; --ambient-secondary: 69,214,197; }
.game-ambient-quests { --ambient-primary: 242,184,75; --ambient-secondary: 69,214,197; }
.game-ambient-arena,.game-ambient-battle { --ambient-primary: 233,103,90; --ambient-secondary: 242,184,75; }
.game-ambient-guilds { --ambient-primary: 69,214,197; --ambient-secondary: 145,194,122; }
.game-ambient-messages,.game-ambient-profile,.game-ambient-guide { --ambient-primary: 119,174,209; --ambient-secondary: 199,148,255; }
@keyframes ambient-depth-drift { to { opacity: .6; transform: translate3d(2.2%,-1.4%,0) scale(1.04); } }
@keyframes ambient-meridian-turn { from { transform: translate(-50%,-50%) rotate(8deg) scaleY(.42); } to { transform: translate(-50%,-50%) rotate(368deg) scaleY(.42); } }
@keyframes ambient-dust-rise { to { transform: translate3d(24px,-89px,0); } }
@keyframes ambient-motes-breathe { to { opacity: .4; transform: translate3d(1.5%,-2%,0) skewY(-2deg); } }
.hub-scene.choice-restaurare::before { background: linear-gradient(180deg, rgba(6,14,30,.18), transparent 30%, transparent 65%, rgba(4,12,25,.4)), radial-gradient(circle at 26% 42%, rgba(242,184,75,.12), transparent 38%); }
.hub-scene.choice-riconoscere::before { background: linear-gradient(115deg, rgba(69,214,197,.08) 48%, rgba(124,92,214,.14) 52%), linear-gradient(180deg, rgba(6,14,30,.24), transparent 38%, rgba(4,12,25,.42)); }
.hub-scene.choice-osservare::before { background: linear-gradient(180deg, rgba(17,24,53,.32), transparent 45%, rgba(5,12,27,.52)), linear-gradient(90deg, rgba(124,92,214,.08), transparent 58%); }
.route-layer { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.route-line { stroke: var(--gold-soft); stroke-width: 1.6; stroke-dasharray: 7 7; filter: drop-shadow(0 0 8px rgba(242,184,75,.75)); animation: trace 1.1s linear infinite; }
@keyframes trace { to { stroke-dashoffset: -28; } }
.astrolabe { position: absolute; z-index: 3; left: 39%; top: 71.5%; width: 92px; height: 92px; transform: translate(-50%,-50%); border: 1px solid rgba(242,216,154,.5); border-radius: 50%; background: radial-gradient(circle, rgba(216,255,248,.92) 0 3%, rgba(69,214,197,.24) 4% 10%, transparent 12%); box-shadow: 0 0 18px rgba(69,214,197,.34), inset 0 0 22px rgba(242,184,75,.13); animation: astrolabe-breathe 4.8s ease-in-out infinite; pointer-events: none; }
.astrolabe::before, .astrolabe::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(242,216,154,.48); border-radius: 50%; transform: rotate(38deg) scaleY(.38); }
.astrolabe::after { transform: rotate(-44deg) scaleY(.5); border-color: rgba(69,214,197,.5); }
@keyframes astrolabe-breathe { 50% { box-shadow: 0 0 34px rgba(69,214,197,.5), inset 0 0 28px rgba(242,184,75,.18); } }
.poi { position: absolute; z-index: 5; min-width: 188px; display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: .72rem; padding: .62rem .78rem .62rem .62rem; border: 1px solid rgba(219,235,229,.3); border-radius: 14px; background: linear-gradient(112deg, rgba(7,19,38,.9), rgba(19,46,74,.7)); color: var(--parchment); text-align: left; box-shadow: 0 12px 30px rgba(2,9,21,.4), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(12px) saturate(1.15); transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.poi::after { content: ""; position: absolute; left: 20px; bottom: -13px; width: 1px; height: 13px; background: linear-gradient(var(--resonance), transparent); }
.poi:hover, .poi[aria-pressed="true"] { border-color: rgba(255,216,138,.8); background: linear-gradient(112deg, rgba(18,40,70,.96), rgba(35,71,96,.88)); transform: translateY(-3px); box-shadow: 0 16px 38px rgba(2,9,21,.5), 0 0 24px rgba(69,214,197,.1); }
.poi[aria-pressed="true"] .poi-symbol { border-color: var(--gold-soft); color: var(--gold-soft); box-shadow: 0 0 18px rgba(242,184,75,.28); }
.poi-symbol { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(69,214,197,.58); border-radius: 50% 50% 50% 8px; transform: rotate(-45deg); background: rgba(5,18,35,.66); color: var(--resonance); font-weight: 900; box-shadow: inset 0 0 12px rgba(69,214,197,.08); }
.poi-symbol { font-size: 0; }
.poi-symbol::before { content: attr(data-symbol); display: block; font-size: .93rem; transform: rotate(45deg); }
.poi strong { display: block; font: 600 .9rem/1.18 var(--font-display); letter-spacing: .01em; }
.poi small { display: block; margin-top: .18rem; color: #b6d1d1; font-size: .66rem; letter-spacing: .03em; }
.poi.routes { left: 4.5%; top: 31%; }
.poi.company { left: 27%; top: 29%; }
.poi.arena { left: 54%; top: 42%; }
.poi.guilds { right: 5%; top: 25%; }
.poi.consonance { left: 53%; bottom: 8%; }
.poi.time_travel { right: 4%; top: 56%; }
.poi.planned, .poi.planned:hover { border-style: dashed; border-color: rgba(171,218,213,.25); background: linear-gradient(112deg, rgba(7,19,38,.78), rgba(19,46,74,.58)); color: #c8d8d5; transform: none; box-shadow: 0 12px 30px rgba(2,9,21,.3), inset 0 1px rgba(255,255,255,.04); cursor: default; }
.poi.planned small { color: var(--gold-soft); }
.poi-symbol-consonance::before { content: ""; width: 19px; height: 9px; display: block; border-top: 2px solid var(--resonance); border-bottom: 2px solid var(--gold-soft); border-radius: 50%; transform: rotate(45deg); }
.poi-symbol-consonance::after { content: ""; position: absolute; left: 18px; top: 9px; width: 2px; height: 20px; transform: rotate(45deg); background: linear-gradient(var(--gold-soft), var(--resonance)); box-shadow: 0 0 8px rgba(69,214,197,.4); }
.poi-symbol-guilds::before { content: ""; width: 22px; height: 22px; display: block; border: 1.5px solid var(--gold-soft); border-radius: 7px 50% 7px 50%; transform: rotate(45deg); box-shadow: 0 0 10px rgba(242,184,75,.28), inset 0 0 8px rgba(69,214,197,.16); }
.poi-symbol-guilds::after { content: ""; position: absolute; left: 14px; top: 7px; width: 10px; height: 20px; border-left: 2px solid var(--resonance); border-right: 2px solid rgba(69,214,197,.42); border-radius: 50%; transform: rotate(45deg); box-shadow: 0 0 8px rgba(69,214,197,.3); }
.poi-symbol-time_travel::before { content: ""; width: 17px; height: 22px; display: block; border-top: 2px solid var(--gold-soft); border-bottom: 2px solid var(--gold-soft); transform: rotate(45deg); background: linear-gradient(152deg,transparent 0 42%,rgba(69,214,197,.7) 44% 56%,transparent 58%); clip-path: polygon(0 0,100% 0,65% 50%,100% 100%,0 100%,35% 50%); filter: drop-shadow(0 0 5px rgba(69,214,197,.5)); }
.poi-symbol-time_travel::after { content: ""; position: absolute; left: 13px; top: 8px; width: 12px; height: 20px; border-left: 1px solid rgba(190,225,219,.48); border-right: 1px solid rgba(190,225,219,.48); transform: rotate(45deg); }
.world-caption { position: absolute; z-index: 5; left: 1.6rem; top: 1.5rem; max-width: 470px; padding: 1.05rem 1.3rem 1.1rem; border: 1px solid rgba(210,231,224,.24); border-left: 3px solid var(--gold); border-radius: 0 18px 18px 0; background: linear-gradient(102deg, rgba(7,18,36,.88), rgba(10,28,50,.55)); box-shadow: 0 18px 46px rgba(2,9,20,.25); backdrop-filter: blur(12px); text-shadow: 0 2px 16px rgba(0,0,0,.54); }
.world-caption h1 { margin: 0; font: 600 1.8rem/1.1 var(--font-display); letter-spacing: .02em; }
.world-caption p { margin: .4rem 0 0; color: #d4e3df; font-size: .86rem; }
.game-view { --view-background: image-set(url("/assets/images/confluenza-hub-0.2.avif") type("image/avif"), url("/assets/images/confluenza-hub-0.2.webp") type("image/webp"), url("/assets/images/confluenza-hub-0.2.png") type("image/png")); --view-position: center; position: fixed; z-index: 100; inset: 0; width: 100%; height: 100cqh; height: 100cqh; min-width: 0; display: grid; grid-template-rows: 88px minmax(0, 1fr); isolation: isolate; overflow: hidden; color: var(--parchment); background: #0a1629 var(--view-background) var(--view-position) / cover no-repeat; }
.game-view::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4,12,25,.5), rgba(5,15,30,.32) 28%, rgba(4,12,25,.72)), linear-gradient(90deg, rgba(4,12,25,.5), transparent 48%, rgba(4,12,25,.28)); backdrop-filter: saturate(.92); }
.game-view-routes { --view-background: image-set(url("/assets/images/areas/routes-varco-0.2.avif") type("image/avif"), url("/assets/images/areas/routes-varco-0.2.webp") type("image/webp"), url("/assets/images/areas/routes-varco-0.2.png") type("image/png")); }
.game-view-company { --view-background: image-set(url("/assets/images/areas/company-hall-0.2.avif") type("image/avif"), url("/assets/images/areas/company-hall-0.2.webp") type("image/webp"), url("/assets/images/areas/company-hall-0.2.png") type("image/png")); }
.game-view-quests { --view-background: image-set(url("/assets/images/areas/quests-board-0.2.avif") type("image/avif"), url("/assets/images/areas/quests-board-0.2.webp") type("image/webp"), url("/assets/images/areas/quests-board-0.2.png") type("image/png")); }
.game-view-arena { --view-background: image-set(url("/assets/images/areas/quests-board-0.2.avif") type("image/avif"), url("/assets/images/areas/quests-board-0.2.webp") type("image/webp"), url("/assets/images/areas/quests-board-0.2.png") type("image/png")); }
.game-view-messages { --view-background: image-set(url("/assets/images/areas/messages-landing-0.2.avif") type("image/avif"), url("/assets/images/areas/messages-landing-0.2.webp") type("image/webp"), url("/assets/images/areas/messages-landing-0.2.png") type("image/png")); }
.game-view-profile { --view-background: image-set(url("/assets/images/areas/profile-study-0.2.avif") type("image/avif"), url("/assets/images/areas/profile-study-0.2.webp") type("image/webp"), url("/assets/images/areas/profile-study-0.2.png") type("image/png")); }
.game-view-guide { --view-background: image-set(url("/assets/images/areas/profile-study-0.2.avif") type("image/avif"), url("/assets/images/areas/profile-study-0.2.webp") type("image/webp"), url("/assets/images/areas/profile-study-0.2.png") type("image/png")); }
.game-view-admin { --view-background: image-set(url("/assets/images/areas/profile-study-0.2.avif") type("image/avif"), url("/assets/images/areas/profile-study-0.2.webp") type("image/webp"), url("/assets/images/areas/profile-study-0.2.png") type("image/png")); }
.game-view-choice { --view-background: image-set(url("/assets/images/areas/choice-absent-district-0.2.avif") type("image/avif"), url("/assets/images/areas/choice-absent-district-0.2.webp") type("image/webp"), url("/assets/images/areas/choice-absent-district-0.2.png") type("image/png")); }
.game-view-report { --view-background: image-set(url("/assets/images/areas/report-chamber-0.2.avif") type("image/avif"), url("/assets/images/areas/report-chamber-0.2.webp") type("image/webp"), url("/assets/images/areas/report-chamber-0.2.png") type("image/png")); }
.game-view-battle { --view-background: image-set(url("/assets/images/battle/soglia-meridiana-0.2.avif") type("image/avif"), url("/assets/images/battle/soglia-meridiana-0.2.webp") type("image/webp"), url("/assets/images/battle/soglia-meridiana-0.2.png") type("image/png")); }
.game-view-deployment { --view-background: image-set(url("/assets/images/battle/soglia-meridiana-0.2.avif") type("image/avif"), url("/assets/images/battle/soglia-meridiana-0.2.webp") type("image/webp"), url("/assets/images/battle/soglia-meridiana-0.2.png") type("image/png")); }
.game-view-header { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(250px, 1fr) auto minmax(370px, 1fr); align-items: center; gap: 1.5rem; padding: 0 2rem; border-bottom: 1px solid rgba(190,225,219,.25); background: linear-gradient(180deg, rgba(6,16,33,.98), rgba(10,27,49,.94)); box-shadow: 0 18px 50px rgba(1,7,17,.32); backdrop-filter: blur(18px); }
.game-view-identity { text-align: center; }
.game-view-identity .eyebrow { margin: 0 0 .15rem; }
.game-view-identity h1 { margin: 0; font: 600 clamp(1.65rem, 2.4cqw, 2.25rem)/1.05 var(--font-display); letter-spacing: .025em; }
.view-back-button { justify-self: start; min-width: 214px; padding: .78rem 1rem; border: 1px solid rgba(161,218,211,.35); border-radius: 12px; background: rgba(18,43,72,.72); color: #e9f3ee; font-weight: 700; text-align: left; box-shadow: inset 0 1px rgba(255,255,255,.04); }
.view-back-button:hover:not(:disabled) { border-color: var(--gold); background: rgba(35,65,98,.88); }
.view-resource-strip { justify-self: end; display: flex; gap: .45rem; }
.view-resource-strip .resource { min-width: 126px; background: rgba(15,39,67,.82); }
#viewport-stage[data-scaling-mode="bounded-adaptive-v2"] :is(.game-view-routes,.game-view-company) .game-view-header { grid-template-columns: minmax(214px,.65fr) minmax(320px,1fr) minmax(570px,1.55fr); gap: .75rem; padding-inline: 1rem; }
#viewport-stage[data-scaling-mode="bounded-adaptive-v2"] :is(.game-view-routes,.game-view-company) .view-resource-strip { width: 100%; }
#viewport-stage[data-scaling-mode="bounded-adaptive-v2"] :is(.game-view-routes,.game-view-company) .view-resource-strip .resource { min-width: 0; flex: 1 1 0; }
.game-view-body { position: relative; z-index: 1; width: 100%; max-width: 1720px; min-height: 0; margin: 0 auto; padding: clamp(1.5rem, 3cqw, 3rem) clamp(2rem, 4cqw, 5rem) 4rem; overflow: auto; scrollbar-color: rgba(69,214,197,.5) rgba(4,13,28,.36); }
.game-view-body::before { content: ""; position: fixed; z-index: -1; inset: 88px 0 0; pointer-events: none; background: radial-gradient(circle at 50% 18%, rgba(69,214,197,.08), transparent 38%); }
.game-view-body > .muted:first-child { max-width: 900px; padding: .8rem 1rem; border-left: 3px solid var(--resonance); border-radius: 0 10px 10px 0; background: rgba(5,17,34,.68); color: #d2e2df; }

.game-view-guide::before { background: linear-gradient(180deg,rgba(3,10,23,.78),rgba(5,16,32,.66) 30%,rgba(3,10,23,.9)),linear-gradient(90deg,rgba(3,10,23,.62),transparent 50%,rgba(3,10,23,.62)); backdrop-filter: saturate(.82) brightness(.84); }
.game-guide-body { max-width: none; padding: .85rem clamp(1rem,2.2cqw,2.2rem) 1rem; overflow: hidden; }
.game-guide-shell { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: .58rem; }
.game-guide-first-access { margin: 0; padding: .48rem .72rem; border: 1px solid rgba(171,218,213,.22); border-left: 3px solid var(--resonance); border-radius: 0 10px 10px 0; background: rgba(6,24,43,.82); color: #c7d9d5; font-size: .7rem; line-height: 1.35; }
.game-guide-first-access.required { border-left-color: var(--gold); color: #f2e2b7; background: rgba(74,52,18,.3); }
.game-guide-stage { min-width: 0; min-height: 0; overflow: hidden; border: 1px solid rgba(185,222,216,.27); border-radius: 22px; background: linear-gradient(145deg,rgba(10,30,54,.96),rgba(4,15,31,.98)); box-shadow: 0 24px 64px rgba(1,7,17,.42),inset 0 1px rgba(255,255,255,.05); touch-action: pan-y; user-select: none; }
.game-guide-track { --guide-index: 0; width: 100%; height: 100%; min-height: 0; display: flex; transform: translateX(calc(var(--guide-index) * -100%)); transition: transform .32s cubic-bezier(.22,.74,.23,1); will-change: transform; }
.game-guide-slide { flex: 0 0 100%; width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0,1.14fr) minmax(350px,.86fr); gap: clamp(.9rem,2cqw,1.6rem); padding: clamp(.8rem,1.7cqw,1.35rem); overflow: auto; box-sizing: border-box; }
.game-guide-visual { position: relative; min-width: 0; min-height: 360px; height: 100%; margin: 0; overflow: hidden; border: 1px solid rgba(208,232,224,.24); border-radius: 18px; background: #09182b; box-shadow: 0 18px 44px rgba(1,7,17,.34),inset 0 1px rgba(255,255,255,.05); isolation: isolate; }
.game-guide-visual::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg,rgba(3,10,22,.12),rgba(3,10,22,.2) 52%,rgba(3,10,22,.86)),linear-gradient(90deg,rgba(3,10,22,.24),transparent 50%,rgba(3,10,22,.28)); pointer-events: none; }
.game-guide-picture { position: absolute; z-index: -2; inset: 0; }
.game-guide-picture img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.9) brightness(.82); }
.game-guide-visual figcaption { position: absolute; z-index: 5; left: .72rem; right: .72rem; bottom: .72rem; margin: 0; padding: .62rem .72rem; border: 1px solid rgba(210,231,224,.22); border-left: 3px solid var(--gold); border-radius: 0 11px 11px 0; background: rgba(4,15,31,.86); color: #dce9e4; font-size: .72rem; line-height: 1.4; box-shadow: 0 10px 28px rgba(1,7,17,.28); backdrop-filter: blur(10px); }
.game-guide-copy { min-width: 0; min-height: 0; display: grid; align-content: start; overflow: auto; padding: .3rem .25rem .3rem 0; }
.game-guide-copy > .eyebrow { margin: 0 0 .3rem; }
.game-guide-copy h2 { margin: 0; color: #fff0d5; font: 600 clamp(1.55rem,2.45cqw,2.45rem)/1.06 var(--font-display); letter-spacing: .01em; }
.game-guide-intro { margin: .75rem 0 .9rem; color: #c5d9d6; font-size: clamp(.78rem,1cqw,.94rem); line-height: 1.55; }
.game-guide-points { display: grid; gap: .58rem; margin: 0; padding: 0; list-style: none; counter-reset: guide-point; }
.game-guide-points li { position: relative; min-width: 0; padding: .72rem .78rem .72rem 2.8rem; border: 1px solid rgba(171,218,213,.17); border-radius: 12px; background: linear-gradient(135deg,rgba(20,48,76,.72),rgba(7,23,43,.78)); counter-increment: guide-point; }
.game-guide-points li::before { content: counter(guide-point); position: absolute; left: .72rem; top: .72rem; width: 1.42rem; height: 1.42rem; display: grid; place-items: center; border: 1px solid rgba(242,216,138,.38); border-radius: 50%; background: rgba(242,184,75,.1); color: var(--gold-soft); font-size: .66rem; font-weight: 900; }
.game-guide-points strong { color: #eff3eb; font-size: .78rem; }
.game-guide-points p { margin: .24rem 0 0; color: #a9c0c0; font-size: .72rem; line-height: 1.43; }
.game-guide-controls { min-width: 0; display: grid; grid-template-columns: minmax(150px,210px) minmax(0,1fr) minmax(150px,210px); align-items: center; gap: 1rem; padding: .62rem .72rem; border: 1px solid rgba(185,222,216,.23); border-radius: 16px; background: linear-gradient(145deg,rgba(12,34,59,.96),rgba(5,17,34,.98)); box-shadow: 0 14px 36px rgba(1,7,17,.3),inset 0 1px rgba(255,255,255,.04); }
.game-guide-arrow { min-height: 44px; }
.game-guide-arrow.previous::before { content: "‹"; margin-right: .45rem; font-size: 1.1rem; }
.game-guide-arrow.next::after { content: "›"; margin-left: .45rem; font-size: 1.1rem; }
.game-guide-arrow.finish { border-color: rgba(242,216,138,.62); box-shadow: 0 8px 24px rgba(242,184,75,.24); }
.game-guide-navigation { min-width: 0; display: grid; justify-items: center; gap: .3rem; }
.game-guide-progress { color: #d9e6e1; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.game-guide-dots { max-width: 100%; display: flex; justify-content: center; gap: .2rem; overflow-x: auto; scrollbar-width: thin; }
.game-guide-dot { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; padding: 0; overflow: hidden; border: 0; border-radius: 50%; background: transparent; color: transparent; font-size: 0; }
.game-guide-dot::before { content: ""; width: 8px; height: 8px; border: 1px solid rgba(190,225,219,.65); border-radius: 50%; background: rgba(190,225,219,.16); transition: transform .18s ease,background .18s ease,box-shadow .18s ease; }
.game-guide-dot:hover::before, .game-guide-dot:focus-visible::before { background: rgba(69,214,197,.52); transform: scale(1.25); }
.game-guide-dot[aria-current="page"]::before { background: var(--gold); border-color: var(--gold-soft); transform: scale(1.35); box-shadow: 0 0 10px rgba(242,184,75,.48); }
.game-guide-hero { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; justify-items: center; overflow: hidden; border: 1px solid rgba(198,229,222,.2); border-radius: 12px; background: linear-gradient(155deg,rgba(24,55,84,.76),rgba(5,17,34,.78)); box-shadow: 0 10px 24px rgba(1,7,17,.24); }
.game-guide-hero img { width: 100%; height: 100%; min-height: 0; display: block; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 10px 10px rgba(0,0,0,.35)); }
.game-guide-hero span { width: 100%; padding: .28rem .2rem; box-sizing: border-box; background: rgba(3,12,25,.78); color: #f5ead7; font-size: .66rem; font-weight: 850; text-align: center; }
.game-guide-formation-board { position: absolute; inset: .72rem .72rem 4.15rem; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: 29px repeat(2,minmax(0,1fr)); gap: .38rem; }
.game-guide-lane-label { display: grid; place-items: center; border: 1px solid rgba(190,225,219,.2); border-radius: 8px; background: rgba(5,17,34,.82); color: #dceae4; font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.game-guide-lane-label.rear { grid-column: 1; color: #91e9dc; }
.game-guide-lane-label.center { grid-column: 2; color: #c4b4ff; }
.game-guide-lane-label.front { grid-column: 3; color: #f4d68f; }
.game-guide-formation-board .slot-1 { grid-area: 2 / 1; }
.game-guide-formation-board .slot-2 { grid-area: 2 / 2; }
.game-guide-formation-board .slot-3 { grid-area: 2 / 3; }
.game-guide-formation-board .slot-4 { grid-area: 3 / 1; }
.game-guide-formation-board .slot-5 { grid-area: 3 / 2; }
.game-guide-formation-board .slot-6 { grid-area: 3 / 3; }
.game-guide-lane-board { position: absolute; inset: 1rem 1rem 4.2rem; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; }
.game-guide-lane { min-width: 0; display: grid; grid-template-rows: auto minmax(0,1fr); gap: .38rem; padding: .5rem; border: 1px solid rgba(190,225,219,.22); border-radius: 14px; background: rgba(4,15,31,.62); backdrop-filter: blur(8px); }
.game-guide-lane > strong { text-align: center; color: #edf4ee; font-size: .7rem; text-transform: uppercase; }
.game-guide-lane.rear { border-color: rgba(69,214,197,.42); }
.game-guide-lane.center { border-color: rgba(165,138,241,.46); }
.game-guide-lane.front { border-color: rgba(242,184,75,.46); }
.game-guide-battle-board { position: absolute; inset: 1.1rem 1rem 4.3rem; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,.68fr); align-items: center; gap: .6rem; }
.game-guide-battle-team { min-height: 0; height: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; }
.game-guide-round-limit { align-self: start; padding: .48rem .6rem; border: 1px solid rgba(242,216,138,.5); border-radius: 999px; background: rgba(4,15,31,.82); color: #f5d98f; font-size: .7rem; text-align: center; white-space: nowrap; }
.game-guide-enemy { min-width: 0; min-height: 0; height: 82%; display: grid; grid-template-rows: minmax(0,1fr) auto; align-self: center; overflow: hidden; }
.game-guide-enemy img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(0,0,0,.38)); }
.game-guide-enemy span { padding: .3rem; border-radius: 8px; background: rgba(3,12,25,.78); color: #f2e7cf; font-size: .66rem; font-weight: 850; text-align: center; }
.game-guide-growth-board { position: absolute; inset: 1rem 1rem 4.2rem; display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: stretch; gap: .75rem; }
.game-guide-upgrade-stack { display: grid; align-content: center; gap: .55rem; }
.game-guide-upgrade-stack > div { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: .6rem; padding: .62rem; border: 1px solid rgba(190,225,219,.22); border-radius: 12px; background: rgba(4,15,31,.76); backdrop-filter: blur(8px); }
.game-guide-upgrade-stack span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(242,216,138,.4); border-radius: 50%; color: var(--gold-soft); font-size: .7rem; font-weight: 900; }
.game-guide-upgrade-stack strong { color: #eff3eb; font-size: .74rem; }
.game-guide-recruitment-board { position: absolute; inset: 1rem 1rem 4.2rem; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; }
.game-guide-echo-badge { position: absolute; left: 50%; bottom: -.2rem; transform: translateX(-50%); min-width: 110px; padding: .5rem .7rem; border: 1px solid rgba(242,216,138,.5); border-radius: 999px; background: rgba(4,15,31,.92); color: var(--gold-soft); font-size: .72rem; text-align: center; box-shadow: 0 0 24px rgba(242,184,75,.15); }
.game-guide-resource-board { position: absolute; inset: 1rem 1rem 4.3rem; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; align-content: center; }
.game-guide-resource-token { min-width: 0; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: .55rem; padding: .62rem; border: 1px solid rgba(190,225,219,.22); border-radius: 12px; background: rgba(4,15,31,.76); backdrop-filter: blur(8px); }
.game-guide-resource-token > span { width: 38px; height: 38px; border: 1px solid rgba(69,214,197,.46); border-radius: 50%; background: radial-gradient(circle,rgba(69,214,197,.4),rgba(8,37,52,.8) 55%,rgba(4,15,31,.9)); box-shadow: inset 0 0 12px rgba(69,214,197,.16),0 0 12px rgba(69,214,197,.1); }
.game-guide-resource-token.marchi > span, .game-guide-resource-token.piastra > span { border-radius: 9px; border-color: rgba(242,184,75,.46); background: linear-gradient(135deg,rgba(242,184,75,.48),rgba(86,58,25,.9)); transform: rotate(45deg) scale(.72); }
.game-guide-resource-token.schegge > span, .game-guide-resource-token.vetro > span { border-color: rgba(165,138,241,.55); background: linear-gradient(145deg,rgba(203,185,255,.72),rgba(76,48,142,.88)); clip-path: polygon(50% 0,90% 32%,72% 100%,27% 100%,10% 32%); }
.game-guide-resource-token.fibra > span { border-radius: 50% 10px 50% 10px; background: linear-gradient(145deg,rgba(126,210,154,.72),rgba(32,89,68,.9)); }
.game-guide-resource-token strong { color: #edf3ed; font-size: .68rem; line-height: 1.22; }
.game-guide-daily-board { position: absolute; inset: 1rem 1rem 4.25rem; display: grid; align-content: center; gap: .58rem; }
.game-guide-daily-board > div { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: .62rem; padding: .65rem; border: 1px solid rgba(190,225,219,.22); border-radius: 12px; background: rgba(4,15,31,.8); backdrop-filter: blur(8px); }
.game-guide-daily-board span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(69,214,197,.5); border-radius: 50%; color: #aef6eb; font-size: .68rem; font-weight: 900; }
.game-guide-daily-board strong { color: #eef3ec; font-size: .7rem; }
.game-guide-time-board { position: absolute; inset: .8rem .8rem 4.15rem; display: grid; grid-template-columns: minmax(130px,.72fr) minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; gap: .72rem; align-items: center; padding: .8rem; border: 1px solid rgba(199,148,255,.28); border-radius: 16px; background: linear-gradient(145deg,rgba(8,18,37,.75),rgba(42,24,69,.68)); backdrop-filter: blur(8px); }
.game-guide-time-portal { position: relative; width: min(86%,190px); aspect-ratio: 1; justify-self: center; border: 2px solid rgba(242,197,107,.78); border-radius: 50%; box-shadow: 0 0 0 10px rgba(199,148,255,.08),0 0 34px rgba(103,232,219,.3),inset 0 0 32px rgba(89,37,135,.64); }
.game-guide-time-portal::before,.game-guide-time-portal::after,.game-guide-time-portal span,.game-guide-time-portal i,.game-guide-time-portal b { content: ""; position: absolute; inset: 14%; border: 1px solid rgba(105,228,215,.74); border-radius: 50% 46% 52% 44%; transform: rotate(20deg); }
.game-guide-time-portal::after { inset: 28%; border-color: rgba(242,197,107,.9); transform: rotate(-34deg); }
.game-guide-time-portal span { inset: 6% 36%; border-color: rgba(199,148,255,.78); transform: rotate(62deg); }
.game-guide-time-portal i { inset: 36%; border: 0; background: radial-gradient(circle,#f8e2a5 0 8%,#4bdacb 18%,rgba(90,48,141,.72) 42%,transparent 72%); }
.game-guide-time-portal b { inset: 19%; border-style: dashed; border-color: rgba(255,255,255,.36); transform: rotate(-10deg); }
.game-guide-time-stages { display: grid; gap: .55rem; }
.game-guide-time-stages span { min-height: 50px; display: grid; place-items: center; border: 1px solid rgba(69,214,197,.36); border-left: 3px solid var(--resonance); border-radius: 0 11px 11px 0; background: rgba(3,12,27,.72); color: #d7fff8; font-weight: 900; }
.game-guide-time-seals { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: .35rem; }
.game-guide-time-seals span { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(242,216,138,.52); border-radius: 50%; background: radial-gradient(circle,rgba(242,184,75,.25),rgba(46,30,67,.76)); color: #ffe3a2; font-size: .66rem; font-weight: 900; }
.game-guide-map-board { position: absolute; inset: .8rem .8rem 4.1rem; }
.game-guide-map-board span { position: absolute; padding: .46rem .58rem; border: 1px solid rgba(210,231,224,.3); border-left: 3px solid var(--resonance); border-radius: 0 9px 9px 0; background: rgba(4,15,31,.82); color: #eef4ee; font-size: .66rem; font-weight: 850; box-shadow: 0 8px 20px rgba(1,7,17,.25); }
.game-guide-map-board span::after { content: ""; position: absolute; width: 7px; height: 7px; border: 2px solid var(--gold-soft); border-radius: 50%; background: #173f55; box-shadow: 0 0 9px rgba(242,184,75,.65); }
.game-guide-map-board .routes { left: 5%; top: 22%; }
.game-guide-map-board .routes::after { right: -18px; top: 50%; }
.game-guide-map-board .company { left: 25%; bottom: 22%; }
.game-guide-map-board .company::after { right: -18px; top: 50%; }
.game-guide-map-board .arena { right: 9%; top: 26%; }
.game-guide-map-board .arena::after { left: -18px; top: 50%; }
.game-guide-map-board .time-travel { right: 4%; bottom: 20%; }
.game-guide-map-board .time-travel::after { left: -18px; top: 50%; }
.game-guide-map-board .cartographer { left: 44%; top: 8%; border-left-color: var(--gold); }
.game-guide-map-board .cartographer::after { left: 50%; bottom: -16px; }
.game-guide-first-route-board { position: absolute; inset: 1rem 1rem 4.3rem; display: flex; align-items: center; justify-content: center; gap: .35rem; }
.game-guide-first-route-board > div { position: relative; min-width: 0; flex: 1 1 0; display: grid; justify-items: center; gap: .35rem; }
.game-guide-first-route-board > div:not(:last-child)::after { content: "›"; position: absolute; transform: translateX(calc(50% + 38px)); color: var(--gold-soft); font-size: 1.15rem; }
.game-guide-first-route-board span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(242,216,138,.48); border-radius: 50%; background: rgba(4,15,31,.86); color: var(--gold-soft); font-size: .72rem; font-weight: 900; box-shadow: 0 0 18px rgba(242,184,75,.12); }
.game-guide-first-route-board strong { min-height: 32px; color: #eef3ec; font-size: .66rem; line-height: 1.2; text-align: center; }

.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.content-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { padding: 1.15rem; border: 1px solid rgba(171,218,213,.27); border-radius: 16px; background: linear-gradient(145deg, rgba(21,49,83,.78), rgba(8,23,45,.84)); box-shadow: 0 16px 40px rgba(2,8,18,.18), inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(13px); }
.card h3 { margin: 0 0 .3rem; font: 600 1.15rem/1.2 var(--font-display); }
.card p { margin: .35rem 0; color: var(--muted); font-size: .87rem; }

.quest-board-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; margin-bottom: 1.2rem; padding: 1.35rem 1.5rem; border: 1px solid rgba(205,229,221,.28); border-radius: 20px; background: linear-gradient(120deg, rgba(11,31,56,.92), rgba(26,57,83,.76) 55%, rgba(76,55,24,.54)); box-shadow: 0 20px 54px rgba(2,8,18,.28), inset 0 1px rgba(255,255,255,.07); backdrop-filter: blur(16px); }
.quest-board-copy h2 { margin: .12rem 0 .45rem; font: 600 clamp(1.45rem, 2.4cqw, 2.15rem)/1.08 var(--font-display); }
.quest-board-copy > p:last-child { max-width: 850px; margin: 0; color: #c8dcd9; line-height: 1.55; }
.quest-board-summary { display: grid; grid-template-columns: repeat(3, minmax(88px, 1fr)); gap: .55rem; }
.quest-summary-value { min-width: 94px; padding: .8rem .72rem; border: 1px solid rgba(242,201,111,.28); border-radius: 13px; background: rgba(5,18,35,.58); text-align: center; }
.quest-summary-value strong { display: block; color: var(--gold-soft); font: 700 1.35rem/1 var(--font-display); }
.quest-summary-value span { display: block; margin-top: .28rem; color: #adc5c6; font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.quest-board-layout { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(470px, .96fr); align-items: start; gap: 1.2rem; }
.quest-section, .store-section { min-width: 0; padding: 1.25rem; border: 1px solid rgba(171,218,213,.25); border-radius: 20px; background: linear-gradient(145deg, rgba(11,31,56,.86), rgba(6,19,38,.9)); box-shadow: 0 18px 48px rgba(2,8,18,.24), inset 0 1px rgba(255,255,255,.045); backdrop-filter: blur(15px); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-heading h2, .section-heading h3 { margin: .12rem 0 0; font: 600 1.45rem/1.12 var(--font-display); }
.section-heading > p, .section-heading > span { margin: 0; text-align: right; }
.section-heading.compact { align-items: center; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(171,218,213,.18); }
.section-heading.compact h3 { font-size: 1.1rem; }
.section-heading.compact span { color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.quest-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.quest-card { position: relative; min-height: 190px; display: flex; flex-direction: column; padding: 1rem; overflow: hidden; border: 1px solid rgba(166,214,208,.23); border-radius: 16px; background: linear-gradient(150deg, rgba(24,54,86,.76), rgba(7,24,45,.86)); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.quest-card::after { content: ""; position: absolute; right: -44px; bottom: -60px; width: 130px; height: 130px; border: 1px solid rgba(69,214,197,.1); border-radius: 50%; box-shadow: inset 0 0 28px rgba(69,214,197,.06); }
.quest-card.is-complete { border-color: rgba(242,197,103,.42); background: linear-gradient(150deg, rgba(49,58,74,.82), rgba(19,34,50,.9)); }
.quest-card[data-quest-state="claimable"] { order: -1; border-color: rgba(255,214,113,.72); box-shadow: 0 0 0 1px rgba(242,184,75,.14),0 14px 34px rgba(242,184,75,.1),inset 0 1px rgba(255,255,255,.08); }
.quest-card[data-quest-state="claimable"]::before { content: attr(data-claim-label); position: absolute; z-index: 1; right: .8rem; top: .75rem; color: #ffe2a0; font-size: .66rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.quest-card.is-claimed { opacity: .8; }
.quest-card-marker { width: 27px; height: 27px; margin-bottom: .72rem; transform: rotate(45deg); border: 1px solid rgba(69,214,197,.55); border-radius: 8px 50% 50%; background: radial-gradient(circle, rgba(69,214,197,.26), rgba(7,24,44,.84)); box-shadow: 0 0 18px rgba(69,214,197,.11); }
.quest-card.is-complete .quest-card-marker { border-color: rgba(242,197,103,.65); background: radial-gradient(circle, rgba(242,197,103,.28), rgba(39,31,18,.82)); }
.quest-card .card-header { align-items: start; }
.quest-card .card-header h3 { max-width: 70%; margin: 0; font: 600 1.04rem/1.2 var(--font-display); }
.quest-card > p { flex: 1; margin: .45rem 0 .8rem; color: #b8cece; font-size: .82rem; line-height: 1.45; }
.quest-card .progress-track { margin-bottom: .62rem; }
.quest-card-footer { display: flex; justify-content: space-between; gap: .65rem; color: #a9c2c3; font-size: .74rem; }
.quest-card-footer strong { color: #e9e3d4; }
.quest-card > button { position: relative; z-index: 1; width: 100%; margin-top: .75rem; }
.store-heading { align-items: center; }
.store-provider-state { padding: .4rem .62rem; border: 1px solid rgba(242,184,75,.3); border-radius: 999px; background: rgba(89,57,18,.2); color: #f2d18b; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.store-provider-state.ready { border-color: rgba(69,214,197,.42); background: rgba(15,91,81,.18); color: #a9f5ea; }
.store-trust-note { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .75rem; margin-bottom: 1rem; padding: .82rem; border: 1px solid rgba(69,214,197,.22); border-radius: 14px; background: rgba(7,25,44,.68); }
.store-trust-seal, .store-loading-seal { position: relative; width: 38px; height: 38px; border: 1px solid rgba(69,214,197,.58); border-radius: 50% 50% 50% 9px; background: radial-gradient(circle, rgba(69,214,197,.2), rgba(7,23,42,.8)); }
.store-trust-seal::before { content: ""; position: absolute; left: 11px; top: 9px; width: 13px; height: 16px; border: 2px solid #a9f5ea; border-top-width: 6px; border-radius: 8px 8px 4px 4px; clip-path: polygon(0 24%, 20% 24%, 20% 0, 80% 0, 80% 24%, 100% 24%, 100% 100%, 0 100%); }
.store-trust-note strong { display: block; color: #dff8f3; font-size: .86rem; }
.store-trust-note p { margin: .22rem 0 0; color: #a9c4c6; font-size: .75rem; line-height: 1.45; }
.store-package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .62rem; }
.store-package-card { position: relative; min-width: 0; display: flex; flex-direction: column; padding: .9rem; border: 1px solid rgba(171,218,213,.22); border-radius: 16px; background: linear-gradient(160deg, rgba(24,53,82,.78), rgba(8,23,43,.9)); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.store-package-card.featured { border-color: rgba(242,194,93,.52); background: linear-gradient(160deg, rgba(61,53,52,.82), rgba(17,31,47,.92)); box-shadow: 0 0 26px rgba(242,184,75,.08), inset 0 1px rgba(255,255,255,.06); }
.store-featured-label { position: absolute; top: -.55rem; right: .65rem; padding: .3rem .5rem; border-radius: 999px; background: #c28b2d; color: #101a28; font-size: .66rem; font-weight: 850; text-transform: uppercase; }
.store-package-emblem { position: relative; width: 38px; height: 38px; margin-bottom: .7rem; display: grid; place-items: center; transform: rotate(45deg); border: 1px solid rgba(242,194,93,.52); border-radius: 9px 50% 50%; background: radial-gradient(circle at 35% 30%, rgba(255,225,143,.3), rgba(60,42,18,.44)); }
.store-package-emblem span { width: 15px; height: 15px; transform: rotate(-45deg); border: 1.5px solid #f4d58d; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(242,184,75,.1); }
.store-package-card h3 { min-height: 2.3em; margin: .12rem 0 .35rem; font: 600 1rem/1.15 var(--font-display); }
.store-package-card > p:not(.eyebrow) { min-height: 4.4em; margin: 0; color: #afc6c7; font-size: .73rem; line-height: 1.45; }
.store-package-price { display: block; margin: .8rem 0; color: var(--gold-soft); font: 700 1.4rem/1 var(--font-display); }
.store-reward-list { display: grid; gap: .32rem; margin: 0 0 .9rem; padding: 0; list-style: none; }
.store-reward-list li { min-width: 0; display: grid; grid-template-columns: 17px max-content minmax(0, 1fr); align-items: center; gap: .32rem; color: #b8cdcc; font-size: .7rem; }
.store-reward-list li strong { color: #ece5d5; font-size: .72rem; }
.store-reward-list li span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-reward-icon { width: 13px; height: 13px; transform: rotate(45deg); border: 1px solid rgba(69,214,197,.58); border-radius: 3px 50% 50%; background: rgba(69,214,197,.15); }
.store-reward-icon.marchi { border-color: rgba(242,184,75,.7); background: rgba(242,184,75,.15); }
.store-reward-icon.vigore { border-radius: 9px 2px 9px 2px; }
.store-reward-icon.piastra_ferrombra { border-color: rgba(188,198,211,.62); background: rgba(166,180,198,.14); }
.store-reward-icon.vetro_eco { border-color: rgba(170,139,239,.7); background: rgba(141,103,221,.16); }
.store-package-card > button { width: 100%; margin-top: auto; padding-inline: .55rem; font-size: .72rem; }
.store-package-card button:disabled { cursor: not-allowed; opacity: .58; }
.store-loading, .store-unavailable { min-height: 260px; display: grid; place-items: center; align-content: center; gap: .75rem; text-align: center; }
.store-loading-seal { animation: astrolabe-breathe 2s ease-in-out infinite; }
.store-return-notice { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: .7rem; margin-bottom: 1rem; padding: .8rem; border: 1px solid rgba(242,184,75,.35); border-radius: 14px; background: rgba(75,52,19,.24); }
.store-return-notice.fulfilled { border-color: rgba(69,214,197,.42); background: rgba(14,82,73,.2); }
.store-return-notice.cancelled { border-color: rgba(164,188,194,.3); background: rgba(26,43,57,.38); }
.store-return-icon { width: 32px; height: 32px; border: 1px solid currentColor; border-radius: 50%; color: var(--gold-soft); }
.store-return-notice.fulfilled .store-return-icon { color: var(--resonance); }
.store-return-notice strong { color: #f1eadb; }
.store-return-notice p { margin: .16rem 0 0; color: #b7cccb; font-size: .75rem; line-height: 1.4; }
.store-order-list { display: grid; gap: .4rem; }
.store-order-row { display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content; align-items: center; gap: .65rem; padding: .62rem .7rem; border: 1px solid rgba(171,218,213,.16); border-radius: 10px; background: rgba(8,24,43,.56); }
.store-order-row strong, .store-order-row small { display: block; }
.store-order-row strong { font-size: .75rem; }
.store-order-row small { margin-top: .12rem; color: var(--muted); font-size: .66rem; }
.store-order-row > span { color: #e8ddc8; font-size: .75rem; font-weight: 750; }
.store-order-status { padding: .3rem .44rem; border-radius: 999px; background: rgba(116,137,147,.15); color: #bfd0d1; font-size: .66rem; font-style: normal; font-weight: 800; }
.store-order-status.fulfilled { background: rgba(69,214,197,.14); color: #a8f3e8; }
.store-order-status.failed, .store-order-status.expired { background: rgba(190,96,87,.14); color: #f0aaa2; }
.store-confirmation { max-width: 650px; margin: 0 auto; padding: 1.4rem; border: 1px solid rgba(242,194,93,.4); border-radius: 18px; background: linear-gradient(145deg, rgba(35,52,69,.92), rgba(10,25,43,.96)); text-align: center; box-shadow: 0 20px 54px rgba(2,8,18,.35); }
.store-confirmation-seal { width: 64px; height: 64px; margin: 0 auto 1rem; transform: rotate(45deg); border: 1px solid rgba(242,194,93,.65); border-radius: 13px 50% 50%; background: radial-gradient(circle, rgba(242,194,93,.28), rgba(28,26,28,.75)); box-shadow: 0 0 28px rgba(242,184,75,.12); }
.store-confirmation h2 { margin: .25rem 0 .5rem; font: 600 1.65rem/1.1 var(--font-display); }
.store-confirmation > p:not(.eyebrow) { color: #b8cdcc; line-height: 1.5; }
.store-confirmation-price { display: block; margin: .8rem 0 1rem; color: var(--gold-soft); font: 700 1.8rem/1 var(--font-display); }
.store-confirmation .store-reward-list { max-width: 330px; margin: 0 auto 1rem; text-align: left; }
.store-confirmation-actions { display: flex; justify-content: center; gap: .65rem; margin-top: 1rem; }
.store-purchase-acknowledgement { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; margin: 1rem 0; padding: .82rem .9rem; border: 1px solid rgba(242,194,93,.24); border-radius: 12px; background: rgba(5,17,31,.62); color: #abc0c1; font-size: .76rem; line-height: 1.5; text-align: left; }
.store-purchase-acknowledgement input { width: 1.08rem; height: 1.08rem; margin-top: .12rem; accent-color: var(--gold); }
.store-purchase-acknowledgement a { color: var(--gold-soft); }
.store-legal-note { margin: 1rem 0 0; color: #91acaf; font-size: .68rem; line-height: 1.45; text-align: center; }
.store-legal-note a { color: #bce8e2; }

@container avenorys-stage (max-width: 1450px) {
  .quest-board-layout { grid-template-columns: minmax(0, 1fr); }
  .store-package-card > p:not(.eyebrow) { min-height: 3.2em; }
}

@container avenorys-stage (max-width: 820px) {
  .quest-board-heading { grid-template-columns: minmax(0, 1fr); }
  .quest-board-summary { width: 100%; }
  .quest-card-grid, .store-package-grid { grid-template-columns: minmax(0, 1fr); }
  .store-package-card h3, .store-package-card > p:not(.eyebrow) { min-height: 0; }
  .store-confirmation-actions { flex-direction: column-reverse; }
  .store-order-row { grid-template-columns: minmax(0, 1fr) max-content; }
  .store-order-row > em { grid-column: 1 / -1; justify-self: start; }
}
.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; }
.status-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .24rem .48rem; border-radius: 999px; background: rgba(69,214,197,.12); color: #aff7eb; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.status-pill.locked { background: rgba(169,182,190,.1); color: #b2c0c3; }
.status-pill.completed, .status-pill.victory { background: rgba(242,184,75,.13); color: var(--gold-soft); }
.progress-track { height: 7px; margin: .7rem 0; overflow: hidden; border-radius: 99px; background: rgba(2,9,21,.55); }
.progress-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--resonance), var(--gold)); }
.progress-track > span { width: 0; }
.progress-track.complete > span { width: 100%; }
.meta-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .7rem 0; color: #c9dddc; font-size: .8rem; }
.battle-launch-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: .8rem; }

.hero-role { color: var(--hero-accent, var(--resonance)); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.company-body { max-width: none; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .8rem; padding: .8rem 1rem 1rem; overflow: hidden; }
.company-section-content { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); }
.company-section-back { min-width: 0; display: flex; align-items: center; justify-content: center; padding: .4rem; font-size: .67rem; white-space: nowrap; }
.company-section-back[hidden] { display: none; }
.company-overview { min-width: 0; display: grid; grid-template-columns: minmax(230px,.45fr) minmax(0,2.55fr); align-items: center; gap: .8rem; padding: .72rem .85rem; border: 1px solid rgba(171,218,213,.28); border-radius: 16px; background: linear-gradient(145deg, rgba(19,47,79,.92), rgba(6,20,40,.94)); box-shadow: 0 18px 46px rgba(1,7,17,.28), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(14px); }
.company-profile-summary { min-width: 0; }
.company-profile-summary .eyebrow { margin: 0 0 .12rem; }
.company-profile-summary h2 { margin: 0; overflow: hidden; font: 600 1.2rem/1.08 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.company-profile-summary p:not(.eyebrow) { margin: .18rem 0 .38rem; color: #a9c0c0; font-size: .66rem; }
.company-section-index { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .8rem; padding: clamp(.8rem, 2cqw, 1.5rem); overflow: hidden; border: 1px solid rgba(171,218,213,.26); border-radius: 20px; background: radial-gradient(circle at 50% 0, rgba(69,214,197,.11), transparent 38%), linear-gradient(155deg, rgba(14,39,68,.94), rgba(4,15,31,.97)); box-shadow: 0 24px 66px rgba(1,7,17,.4), inset 0 1px rgba(255,255,255,.05); }
.company-index-intro { max-width: 760px; justify-self: center; text-align: center; }
.company-index-intro .eyebrow { margin: 0 0 .25rem; }
.company-index-intro h2 { margin: 0; color: #fff0d5; font: 600 clamp(1.55rem,2.4cqw,2.35rem)/1.05 var(--font-display); }
.company-index-intro p:not(.eyebrow) { margin: .45rem 0 0; color: #b8ccca; font-size: .74rem; line-height: 1.45; }
.company-section-grid { min-height: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .9rem; }
.company-section-card { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(128px,.8fr) auto 36px; align-items: center; justify-items: center; gap: .45rem; padding: 1rem; overflow: hidden; border: 1px solid rgba(171,218,213,.27); border-radius: 17px; background: linear-gradient(155deg, rgba(27,59,91,.85), rgba(5,18,37,.95)); color: #edf4ee; text-align: center; box-shadow: inset 0 1px rgba(255,255,255,.05), 0 18px 40px rgba(1,7,17,.26); }
.company-section-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 18%, var(--section-glow,rgba(69,214,197,.18)), transparent 34%); pointer-events: none; }
.company-section-card:hover, .company-section-card:focus-visible { border-color: var(--section-accent,#45d6c5); transform: translateY(-2px); box-shadow: inset 0 0 38px color-mix(in srgb,var(--section-accent,#45d6c5) 9%,transparent), 0 22px 50px rgba(1,7,17,.36); }
.company-section-archive { --section-accent:#45d6c5; --section-glow:rgba(69,214,197,.19); }
.company-section-guide { --section-accent:#b5a0ff; --section-glow:rgba(122,94,219,.2); }
.company-section-recruitment { --section-accent:#f2b84b; --section-glow:rgba(242,184,75,.2); }
.company-section-emblem { z-index: 1; width: clamp(96px,8cqw,136px); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb,var(--section-accent) 64%,white); border-radius: 50%; background: rgba(4,16,33,.94); box-shadow: 0 0 34px color-mix(in srgb,var(--section-accent) 24%,transparent), inset 0 0 22px color-mix(in srgb,var(--section-accent) 10%,transparent); }
.company-section-emblem img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.015); }
.company-section-card-copy { z-index: 1; min-width: 0; display: grid; justify-items: center; gap: .28rem; }
.company-section-card-copy small { color: var(--section-accent); font-size: .67rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.company-section-card-copy strong { color: #fff0d5; font: 600 clamp(1.15rem,1.5cqw,1.55rem)/1.06 var(--font-display); }
.company-section-card-copy p { max-width: 380px; margin: .15rem 0; color: #b8cbca; font-size: .68rem; line-height: 1.42; }
.company-section-card-copy em { color: #e0d1b5; font-size: .69rem; font-style: normal; font-weight: 750; }
.company-section-arrow { z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--section-accent) 48%,transparent); border-radius: 50%; color: var(--section-accent); font-size: 1.2rem; }
.company-resource-ribbon { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .38rem; }
.company-resource-ribbon.has-back { grid-template-columns: repeat(6,minmax(0,1fr)); }
.company-resource-item { min-width: 0; display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: center; gap: .38rem; padding: .4rem .44rem; border: 1px solid rgba(171,218,213,.16); border-radius: 9px; background: rgba(2,12,27,.42); }
.company-resource-item .cost-icon { width: 27px; height: 27px; }
.company-resource-item > span:last-child { min-width: 0; display: grid; }
.company-resource-item small { overflow: hidden; color: #8faeb3; font-size: .66rem; font-weight: 800; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.company-resource-item strong { color: #f4e8ce; font: 600 .84rem/1.1 var(--font-display); }
.company-workspace { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(320px, 360px) minmax(0, 1fr); gap: .8rem; }
.company-roster-panel, .company-hero-detail { min-width: 0; min-height: 0; border: 1px solid rgba(171,218,213,.28); border-radius: 18px; background: linear-gradient(155deg, rgba(18,45,76,.95), rgba(5,17,35,.97)); box-shadow: 0 22px 58px rgba(1,7,17,.34), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(15px); }
.company-roster-panel { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: .4rem; padding: .8rem; }
.company-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.company-section-heading .eyebrow { margin: 0 0 .12rem; }
.company-section-heading h3 { margin: 0; font: 600 1.12rem/1.08 var(--font-display); }
.company-section-note { margin: 0; color: #9fb6b7; font-size: .73rem; line-height: 1.36; }
.company-hero-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .42rem; padding: .42rem 0 .16rem; border-top: 1px solid rgba(171,218,213,.12); }
.company-hero-filter { min-width: 0; display: grid; gap: .22rem; color: #a9c2c1; font-size: .66rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.company-hero-filter select { width: 100%; min-width: 0; height: 34px; padding: 0 1.65rem 0 .5rem; border: 1px solid rgba(69,214,197,.28); border-radius: 8px; background: #0c2943; color: #e6f0eb; font: 750 .58rem/1 var(--font-ui); color-scheme: dark; }
.company-hero-filter select:hover { border-color: rgba(69,214,197,.58); }
.company-hero-filter select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
.company-hero-selector { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: .42rem; padding: .1rem .18rem .1rem 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(69,214,197,.45) rgba(4,13,28,.3); }
.company-hero-select { --hero-accent: #45d6c5; position: relative; min-width: 0; min-height: 91px; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: .42rem; padding: .36rem .42rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--hero-accent) 28%, rgba(171,218,213,.2)); border-radius: 11px; background: linear-gradient(145deg, rgba(27,57,89,.78), rgba(5,18,37,.88)); color: #e9f2ed; text-align: left; }
.company-hero-select[hidden] { display: none; }
.company-hero-select:hover, .company-hero-select:focus-visible, .company-hero-select[aria-pressed="true"] { border-color: color-mix(in srgb, var(--hero-accent) 75%, white); background: linear-gradient(145deg, rgba(36,70,103,.92), rgba(7,25,47,.94)); box-shadow: inset 0 0 20px color-mix(in srgb, var(--hero-accent) 8%, transparent); }
.company-hero-select[aria-pressed="true"]::after { content: ""; position: absolute; inset: auto 10% 0; height: 2px; background: linear-gradient(90deg, transparent, var(--hero-accent), transparent); }
.company-hero-select img { width: 54px; height: 82px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 7px 9px rgba(1,6,15,.5)); pointer-events: none; }
.company-hero-select.locked img { filter: grayscale(.82) saturate(.45) opacity(.58) drop-shadow(0 7px 9px rgba(1,6,15,.45)); }
.company-hero-select-copy { min-width: 0; display: grid; gap: .16rem; }
.company-hero-select-copy strong { overflow: hidden; font: 600 .76rem/1.05 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.company-hero-select-copy small { overflow: hidden; color: var(--hero-accent); font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.company-hero-select-copy em { color: #a8bcbc; font-size: .66rem; font-style: normal; line-height: 1.2; }
.company-hero-select.locked .company-hero-select-copy small, .company-hero-select.locked .company-hero-select-copy em { color: #91a1a4; }
.company-lock-mark { position: absolute; right: .34rem; top: .28rem; color: var(--gold-soft); font-size: .66rem; opacity: .8; }
.company-hero-detail { --hero-accent: #45d6c5; display: grid; align-content: start; gap: .7rem; padding: .8rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--hero-accent) 48%, transparent) rgba(4,13,28,.3); }
.company-hero-showcase { min-height: 265px; display: grid; grid-template-columns: minmax(210px, 260px) minmax(0, 1fr); gap: .8rem; padding: .72rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--hero-accent) 30%, rgba(171,218,213,.22)); border-radius: 15px; background: radial-gradient(circle at 12% 22%, color-mix(in srgb, var(--hero-accent) 14%, transparent), transparent 34%), rgba(3,14,29,.5); }
.company-hero-portrait { position: relative; min-height: 250px; overflow: hidden; border-radius: 12px; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--hero-accent) 14%, transparent), transparent 54%); }
.company-hero-portrait::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 10px; height: 1px; background: linear-gradient(90deg, transparent, var(--hero-accent), transparent); }
.company-hero-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 13px 16px rgba(1,6,15,.55)); }
.company-hero-detail.locked .company-hero-portrait img { filter: grayscale(.82) saturate(.42) opacity(.66) drop-shadow(0 13px 16px rgba(1,6,15,.5)); }
.company-hero-detail.company-hero-filter-empty { place-items: center; align-content: center; }
.company-hero-empty-state { max-width: 520px; padding: 1.4rem; text-align: center; }
.company-hero-empty-state h2 { margin: .25rem 0 .5rem; color: #fff0d3; font: 600 clamp(1.35rem, 2cqw, 2rem)/1.1 var(--font-display); }
.company-hero-empty-state p:last-child { margin: 0; color: #a9bebc; font-size: .7rem; line-height: 1.45; }
.company-portrait-lock { position: absolute; z-index: 2; left: 50%; bottom: .8rem; width: max-content; max-width: calc(100% - 1rem); padding: .3rem .5rem; transform: translateX(-50%); border: 1px solid rgba(242,184,75,.26); border-radius: 7px; background: rgba(5,15,30,.86); color: #f1dca9; font-size: .66rem; font-weight: 800; text-align: center; }
.company-hero-identity { min-width: 0; }
.company-hero-status-row { display: flex; justify-content: space-between; align-items: center; gap: .7rem; }
.company-hero-identity h2 { margin: .28rem 0 .45rem; color: #fff0d3; font: 600 clamp(1.55rem, 2.2cqw, 2.2rem)/1 var(--font-display); text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.company-progression-summary { display: flex; flex-wrap: wrap; gap: .35rem; }
.company-progression-summary span { padding: .25rem .42rem; border: 1px solid color-mix(in srgb, var(--hero-accent) 24%, rgba(171,218,213,.14)); border-radius: 7px; background: rgba(3,13,28,.5); color: #dce9e6; font-size: .71rem; font-weight: 750; }
.company-stat-context { margin: .55rem 0 .35rem; color: #9db4b5; font-size: .69rem; }
.company-stat-grid { display: grid; grid-template-columns: repeat(6, minmax(78px, 1fr)); gap: .36rem; }
.company-stat-card { min-width: 0; display: grid; gap: .08rem; padding: .48rem .5rem; border: 1px solid rgba(171,218,213,.15); border-radius: 9px; background: rgba(9,31,53,.58); }
.company-stat-card small { color: #8eaaad; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.company-stat-card strong { color: #eff5ef; font: 600 1.02rem/1.05 var(--font-display); }
.company-stat-card span { color: #8fa5a7; font-size: .66rem; }
.company-stat-card.stat-power { border-color: color-mix(in srgb, var(--hero-accent) 38%, rgba(171,218,213,.2)); background: color-mix(in srgb, var(--hero-accent) 8%, rgba(9,31,53,.72)); }
.company-abilities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.company-ability-card { min-width: 0; padding: .68rem .75rem; border-left: 3px solid var(--hero-accent); border-radius: 0 12px 12px 0; background: linear-gradient(130deg, color-mix(in srgb, var(--hero-accent) 9%, rgba(4,17,34,.86)), rgba(4,17,34,.78)); }
.company-ability-card > div { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.company-ability-card small { color: var(--hero-accent); font-size: .66rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.company-ability-card > div span { padding: .18rem .35rem; border-radius: 999px; background: rgba(69,214,197,.1); color: #bfd8d5; font-size: .66rem; font-weight: 800; }
.company-ability-card h3 { margin: .25rem 0 .2rem; color: #f4ead6; font: 600 .96rem/1.1 var(--font-display); }
.company-ability-card p { margin: 0; color: #b9cdcb; font-size: .73rem; line-height: 1.4; }
.company-mechanic-lines { display: grid; gap: .22rem; margin: .45rem 0 0; padding: .45rem 0 0 1rem; border-top: 1px solid rgba(171,218,213,.13); color: #d3e1dd; font-size: .68rem; line-height: 1.38; }
.company-affinity-panel { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .8rem; padding: .68rem .75rem; border: 1px solid color-mix(in srgb, var(--hero-accent) 30%, rgba(171,218,213,.2)); border-radius: 14px; background: linear-gradient(120deg,color-mix(in srgb,var(--hero-accent) 8%,rgba(3,14,29,.62)),rgba(3,14,29,.48)); }
.company-affinity-panel .eyebrow { margin: 0 0 .12rem; }
.company-affinity-panel h3 { margin: 0; color: #f6ead6; font: 600 .93rem/1.1 var(--font-display); }
.company-affinity-panel p:not(.eyebrow) { margin: .25rem 0 0; color: #a9bfbd; font-size: .69rem; line-height: 1.4; }
.company-affinity-nodes { display: flex; gap: .3rem; }
.company-affinity-nodes span { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(171,218,213,.18); border-radius: 50%; background: rgba(3,13,28,.66); color: #71898b; font: 700 .54rem/1 var(--font-body); }
.company-affinity-nodes span.active { border-color: color-mix(in srgb,var(--hero-accent) 68%,#ffe1a1); background: color-mix(in srgb,var(--hero-accent) 25%,rgba(3,13,28,.72)); color: #fff0d3; box-shadow: 0 0 12px color-mix(in srgb,var(--hero-accent) 24%,transparent); }
.company-progression-panel { padding: .68rem .72rem .72rem; border: 1px solid color-mix(in srgb, var(--hero-accent) 22%, rgba(171,218,213,.2)); border-radius: 14px; background: rgba(3,14,29,.46); }
.company-upgrade-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .55rem; }
.company-locked-upgrades { margin-top: .55rem; padding: .65rem .72rem; border: 1px dashed rgba(242,184,75,.26); border-radius: 10px; background: rgba(49,38,19,.18); }
.company-locked-upgrades strong { color: #f1dca9; font: 600 .86rem/1.1 var(--font-display); }
.company-locked-upgrades p { margin: .28rem 0 0; color: #b8c3bf; font-size: .73rem; line-height: 1.4; }
.status-pill.rarity-fondatrice { color: #b8d9d5; background: rgba(135,180,180,.12); }
.status-pill.rarity-stabile { color: #aff7eb; background: rgba(69,214,197,.12); }
.status-pill.rarity-rara { color: #d4c7ff; background: rgba(122,94,219,.16); }
.status-pill.rarity-singolare { color: #ffe1a1; background: rgba(242,184,75,.16); }
.company-guide-scroll { min-width: 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(69,214,197,.45) rgba(4,13,28,.3); border: 1px solid rgba(171,218,213,.25); border-radius: 16px; background: linear-gradient(155deg,rgba(17,44,74,.95),rgba(5,17,35,.97)); box-shadow: 0 20px 48px rgba(1,7,17,.3),inset 0 1px rgba(255,255,255,.04); }
.company-guide-scroll { display: grid; align-content: start; gap: .65rem; padding: .8rem; }
.company-guide-full { width: 100%; }
.company-guide-lead { padding: .75rem .82rem; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; background: rgba(242,184,75,.07); }
.company-guide-lead .eyebrow { margin: 0 0 .12rem; }
.company-guide-lead h3, .company-guide-block h3 { margin: 0; color: #f5ead7; font: 600 1.03rem/1.1 var(--font-display); }
.company-guide-lead p:not(.eyebrow) { margin: .35rem 0 0; color: #c7d7d4; font-size: .75rem; line-height: 1.45; }
.company-guide-block { display: grid; gap: .45rem; padding: .72rem; border: 1px solid rgba(171,218,213,.16); border-radius: 12px; background: rgba(3,14,29,.42); }
.company-guide-definition-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .4rem; }
.company-guide-full .company-guide-definition-grid.factions,
.company-guide-full .company-guide-definition-grid.roles { grid-template-columns: repeat(3,minmax(0,1fr)); }
.company-guide-definition-grid.statistics { grid-template-columns: repeat(3,minmax(0,1fr)); }
.company-guide-definition { padding: .5rem .55rem; border: 1px solid rgba(171,218,213,.13); border-radius: 9px; background: rgba(14,39,63,.55); }
.company-guide-definition strong { color: #e8eee9; font-size: .67rem; }
.company-guide-definition p { margin: .22rem 0 0; color: #9fb6b7; font-size: .67rem; line-height: 1.38; }
.company-guide-definition .company-guide-placement { margin-top: .38rem; padding-top: .36rem; border-top: 1px solid rgba(181,160,255,.17); color: #d4c8f1; }
.company-formation-guide { display: grid; grid-template-columns: minmax(300px,.62fr) minmax(0,1.38fr); gap: .62rem; }
.company-formation-map { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .42rem; align-content: center; padding: .72rem; border: 1px solid rgba(69,214,197,.18); border-radius: 12px; background: linear-gradient(90deg,rgba(69,214,197,.08),rgba(4,17,34,.65) 50%,rgba(242,184,75,.06)); }
.company-formation-cell { min-height: 82px; display: grid; place-items: center; align-content: center; gap: .13rem; border: 1px solid rgba(171,218,213,.2); border-radius: 10px; background: rgba(14,39,63,.68); }
.company-formation-cell.lane-rear { border-color: rgba(69,214,197,.46); background: radial-gradient(circle at 50% 35%,rgba(69,214,197,.13),rgba(14,39,63,.72)); }
.company-formation-cell.lane-center { border-color: rgba(181,160,255,.58); background: radial-gradient(circle at 50% 35%,rgba(122,94,219,.22),rgba(14,39,63,.72)); box-shadow: inset 0 0 18px rgba(122,94,219,.1); }
.company-formation-cell.lane-front { border-color: rgba(242,184,75,.52); background: radial-gradient(circle at 50% 35%,rgba(242,184,75,.14),rgba(14,39,63,.72)); }
.company-formation-cell strong { color: #fff0d5; font: 600 1.2rem/1 var(--font-display); }
.company-formation-cell small { color: #a9c0c0; font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.company-formation-cell span { color: #cfc0f4; font-size: .66rem; font-weight: 800; }
.company-formation-rules { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .42rem; }
.company-formation-rules article { padding: .55rem .6rem; border-left: 2px solid var(--resonance); border-radius: 0 9px 9px 0; background: rgba(14,39,63,.5); }
.company-formation-rules strong { color: #eaf1ec; font-size: .74rem; }
.company-formation-rules p { margin: .22rem 0 0; color: #a8bdbc; font-size: .66rem; line-height: 1.38; }
.company-formation-rules .company-targeting-rule { grid-column: 1 / -1; border-left-color: var(--gold); }
.company-hero-placement-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .42rem; }
.company-placement-card { min-width: 0; display: grid; align-content: start; gap: .24rem; padding: .58rem .62rem; border: 1px solid rgba(171,218,213,.14); border-radius: 10px; background: linear-gradient(145deg,rgba(17,45,70,.66),rgba(5,19,37,.68)); }
.company-placement-card > div { display: flex; align-items: center; gap: .42rem; }
.company-placement-card > div strong { color: #f1eadc; font: 600 .73rem/1.1 var(--font-display); }
.company-placement-card b { color: #d4c7f1; font-size: .68rem; }
.company-placement-card p { margin: 0; color: #a7bcbb; font-size: .66rem; line-height: 1.38; }
.company-placement-card > small { padding-top: .25rem; border-top: 1px solid rgba(171,218,213,.1); color: #8fa8aa; font-size: .66rem; }
.company-consonance-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .4rem; }
.company-consonance-list article { padding: .48rem .55rem; border-left: 2px solid #b5a0ff; background: rgba(122,94,219,.07); }
.company-consonance-list strong, .company-consonance-list small { display: block; }
.company-consonance-list strong { color: #e8ddff; font: 600 .72rem/1.1 var(--font-display); }
.company-consonance-list small { margin-top: .18rem; color: #b9abdf; font-size: .66rem; }
.company-consonance-list p { margin: .25rem 0 0; color: #b8cbca; font-size: .67rem; line-height: 1.35; }
.company-recruitment-layout { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(310px,.42fr) minmax(0,1.58fr); gap: .75rem; }
.company-recruitment-ritual, .company-recruitment-catalog { min-width: 0; min-height: 0; border: 1px solid rgba(171,218,213,.25); border-radius: 17px; background: linear-gradient(155deg,rgba(18,46,76,.95),rgba(5,17,35,.97)); box-shadow: 0 21px 54px rgba(1,7,17,.34),inset 0 1px rgba(255,255,255,.04); }
.company-recruitment-ritual { display: grid; align-content: start; justify-items: center; gap: .55rem; padding: 1rem; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(242,184,75,.38) rgba(4,13,28,.3); text-align: center; }
.company-recruitment-ritual h3 { margin: 0; color: #fff0d3; font: 600 1.75rem/1.08 var(--font-display); }
.company-recruitment-ritual > p:not(.eyebrow) { max-width: 360px; margin: 0; color: #b9ccca; font-size: .75rem; line-height: 1.45; }
.company-recruitment-cost { min-width: 230px; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: .55rem; padding: .55rem .65rem; border: 1px solid rgba(242,184,75,.24); border-radius: 11px; background: rgba(52,38,17,.25); text-align: left; }
.company-recruitment-cost .cost-icon { width: 42px; height: 42px; }
.company-recruitment-cost > span:last-child { display: grid; }
.company-recruitment-cost small { color: #c6ad7b; font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.company-recruitment-cost strong { color: #ffe4ae; font: 600 .9rem/1.15 var(--font-display); }
.company-recruitment-cost em { color: #aebeb9; font-size: .66rem; font-style: normal; }
.company-recruitment-odds { padding: .32rem .52rem; border-radius: 999px; background: rgba(69,214,197,.08); color: #c7e4df !important; font-size: .66rem !important; font-weight: 800; }
.company-recruit-button { min-width: 230px; }
.company-recruitment-state { color: #d8e2dd !important; font-weight: 750; }
.company-recruitment-note { width: 100%; max-width: 350px; display: block; box-sizing: border-box; padding: .42rem .5rem; overflow-wrap: anywhere; border: 1px solid rgba(242,184,75,.12); border-radius: 8px; background: rgba(3,14,29,.36); color: #9bafb0; font-size: .66rem; line-height: 1.4; }
.company-recruitment-catalog { display: grid; grid-template-rows: auto auto minmax(0,1fr); gap: .55rem; padding: .8rem; }
.company-recruitment-legend { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .45rem; min-height: 28px; }
.company-recruitment-legend > span { display: inline-flex; align-items: center; gap: .38rem; padding: .3rem .58rem; border: 1px solid rgba(171,218,213,.24); border-radius: 999px; background: rgba(3,14,29,.72); color: #d9e8e5; font-size: .68rem; }
.company-recruitment-legend i { width: 10px; height: 10px; border-radius: 50%; background: #7292a1; box-shadow: 0 0 0 3px rgba(114,146,161,.12); }
.company-recruitment-legend .owned { border-color: rgba(255,216,118,.42); background: rgba(78,53,16,.34); color: #fff0bd; }
.company-recruitment-legend .owned i { background: #ffd876; box-shadow: 0 0 0 3px rgba(255,216,118,.14),0 0 12px rgba(255,216,118,.56); }
.company-recruitment-legend .unowned { border-color: rgba(114,146,161,.36); color: #bed0d4; }
.company-recruitment-pool { min-height: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-content: start; gap: .5rem; overflow-y: auto; scrollbar-width: thin; }
.company-recruitment-card { position: relative; min-width: 0; min-height: 345px; display: grid; grid-template-rows: 153px auto; overflow: hidden; border: 1px solid rgba(114,146,161,.42); border-radius: 12px; background: radial-gradient(circle at 50% 24%,rgba(76,108,128,.12),transparent 38%),rgba(3,14,29,.9); box-shadow: inset 0 1px rgba(255,255,255,.025); isolation: isolate; }
.company-recruitment-card::before { content: ""; position: absolute; z-index: 3; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg,#7899a8,rgba(54,83,102,.3)); box-shadow: 0 0 12px rgba(114,146,161,.25); }
.company-recruitment-card img { position: relative; z-index: 1; width: 100%; height: 153px; object-fit: contain; object-position: center bottom; filter: grayscale(.78) saturate(.38) brightness(.72) drop-shadow(0 8px 9px rgba(1,6,15,.65)); opacity: .78; }
.company-recruitment-card > div { position: relative; z-index: 2; display: grid; align-content: start; gap: .2rem; padding: .45rem .5rem .55rem; border-top: 1px solid rgba(114,146,161,.18); background: linear-gradient(180deg,rgba(5,20,39,.97),rgba(3,14,29,.99)); }
.company-recruitment-ownership { position: static; display: inline-flex; align-items: center; justify-self: start; gap: .3rem; max-width: 100%; padding: .27rem .46rem; border: 1px solid rgba(114,146,161,.46); border-radius: 999px; background: rgba(3,14,29,.9); color: #c2d1d4; font-size: .66rem; font-weight: 900; letter-spacing: .055em; line-height: 1; text-transform: uppercase; box-shadow: 0 4px 12px rgba(1,7,17,.28); }
.company-recruitment-ownership::before { content: "◇"; color: #91aeb7; font-size: .76rem; }
.company-recruitment-ownership.owned { border-color: rgba(255,216,118,.58); background: rgba(63,43,12,.9); color: #fff1bd; }
.company-recruitment-ownership.owned::before { content: "✓"; color: #ffe08a; }
.company-recruitment-card h3 { margin: .1rem 0 0; color: #f7ecd8; font: 600 1.275rem/1.05 var(--font-display); }
.company-recruitment-card p { margin: 0; color: #b3c5c6; font-size: .66rem; text-transform: capitalize; }
.company-recruitment-card > div > strong { color: #ffe3a8; font: 600 1.05rem/1 var(--font-display); }
.company-recruitment-card > div > b { color: #d5e3e1; font-size: .66rem; }
.company-recruitment-card.owned { border-color: rgba(255,216,118,.68); background: radial-gradient(circle at 50% 24%,rgba(255,216,118,.22),transparent 42%),linear-gradient(150deg,rgba(44,33,15,.92),rgba(4,17,34,.94)); box-shadow: 0 0 0 1px rgba(255,216,118,.08),0 10px 26px rgba(1,7,17,.35),inset 0 1px rgba(255,246,207,.08); }
.company-recruitment-card.owned::before { background: linear-gradient(180deg,#ffe08a,#c78a25 58%,rgba(199,138,37,.26)); box-shadow: 0 0 16px rgba(255,216,118,.55); }
.company-recruitment-card.owned img { filter: saturate(1.08) contrast(1.04) brightness(1.04) drop-shadow(0 10px 11px rgba(1,6,15,.58)) drop-shadow(0 0 12px rgba(255,216,118,.2)); opacity: 1; }
.company-recruitment-card.owned > div { border-top-color: rgba(255,216,118,.24); background: linear-gradient(180deg,rgba(35,27,14,.97),rgba(5,17,31,.99)); }
.company-recruitment-card.owned h3 { color: #fff1c4; }
.company-recruitment-card.owned > div > b { color: #ffe099; }
.company-recruitment-card > div > small { color: #aebfc0; font-size: .66rem; line-height: 1.25; }
.company-recruitment-outcome { display: block; color: #d8e5e2 !important; font-weight: 800; }
.company-recruitment-card.owned .company-recruitment-outcome { color: #ffe2a0 !important; }
.admin-body { max-width: none; min-height: 0; display: block; padding: clamp(.8rem,1.35cqw,1.35rem) clamp(.8rem,1.6cqw,1.6rem) 2rem; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-color: rgba(69,214,197,.72) rgba(4,13,28,.46); scrollbar-width: auto; }
.admin-body::-webkit-scrollbar { width: 12px; }
.admin-body::-webkit-scrollbar-track { background: rgba(4,13,28,.46); }
.admin-body::-webkit-scrollbar-thumb { border: 3px solid rgba(4,13,28,.46); border-radius: 999px; background: linear-gradient(180deg,rgba(69,214,197,.82),rgba(31,130,139,.8)); }
.admin-body[data-admin-mode="elevation"] { display: grid; place-items: center; }
.admin-elevation-card { width: min(520px,100%); display: grid; gap: .72rem; padding: 1.15rem; border: 1px solid rgba(242,184,75,.34); border-radius: 18px; background: linear-gradient(150deg,rgba(20,48,78,.97),rgba(4,16,33,.98)); box-shadow: 0 24px 70px rgba(1,7,17,.48); }
.admin-elevation-card h2 { margin: 0; color: #fff0d5; font: 600 1.55rem/1.08 var(--font-display); }
.admin-overview { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,auto); align-items: center; gap: 1.2rem; margin-bottom: 1rem; padding: 1rem 1.15rem; border: 1px solid rgba(171,218,213,.28); border-radius: 19px; background: radial-gradient(circle at 4% 45%,rgba(69,214,197,.12),transparent 25%),linear-gradient(145deg,rgba(12,36,62,.94),rgba(4,17,34,.9)); box-shadow: 0 18px 48px rgba(1,7,17,.28),inset 0 1px rgba(255,255,255,.05); }
.admin-overview-intro { min-width: 0; display: grid; grid-template-columns: 56px minmax(0,1fr); align-items: center; gap: .9rem; }
.admin-governance-mark { position: relative; width: 54px; height: 54px; display: block; border: 1px solid rgba(69,214,197,.48); border-radius: 50%; background: radial-gradient(circle,rgba(242,184,75,.2) 0 8%,transparent 9% 32%,rgba(69,214,197,.1) 33% 51%,transparent 52%),rgba(4,17,34,.72); box-shadow: inset 0 0 22px rgba(69,214,197,.1),0 0 24px rgba(69,214,197,.1); }
.admin-governance-mark::before, .admin-governance-mark::after { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(242,216,138,.58); border-radius: 50%; transform: rotate(36deg) scaleY(.42); }
.admin-governance-mark::after { inset: 15px 8px; border-color: rgba(69,214,197,.7); transform: rotate(-48deg) scaleY(.45); }
.admin-overview h2 { margin: 0; color: #fff0d5; font: 600 clamp(1.35rem,1.8cqw,1.7rem)/1.08 var(--font-display); }
.admin-overview p { max-width: 1160px; margin: .3rem 0 0; line-height: 1.42; }
.admin-elevation-status { min-width: 220px; display: grid; gap: .2rem; padding: .65rem .75rem; border-left: 2px solid rgba(242,184,75,.6); border-radius: 0 10px 10px 0; background: rgba(4,14,29,.4); text-align: right; }
.admin-elevation-status small { color: #9fb6b7; font-size: .68rem; }
.admin-elevation-status strong { overflow-wrap: anywhere; color: #f2d49a; font-size: .72rem; }
.admin-grid { min-width: 0; display: grid; grid-template-columns: minmax(390px,.92fr) minmax(520px,1.08fr); align-items: start; gap: 1rem; }
.admin-column { min-width: 0; display: grid; align-content: start; gap: 1rem; }
.admin-panel { min-width: 0; display: grid; align-content: start; gap: .8rem; padding: 1rem; overflow: visible; border: 1px solid rgba(171,218,213,.24); border-radius: 18px; background: radial-gradient(circle at 92% 2%,rgba(69,214,197,.06),transparent 25%),linear-gradient(155deg,rgba(17,44,74,.95),rgba(5,17,35,.98)); box-shadow: 0 18px 46px rgba(1,7,17,.25),inset 0 1px rgba(255,255,255,.045); }
.admin-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .7rem; border-bottom: 1px solid rgba(171,218,213,.15); }
.admin-panel h3 { margin: 0; color: #f4ead6; font: 600 1.14rem/1.1 var(--font-display); }
.admin-panel-count { min-width: 34px; height: 28px; display: grid; place-items: center; padding: 0 .55rem; border: 1px solid rgba(69,214,197,.32); border-radius: 999px; background: rgba(69,214,197,.09); color: #bff9ef; font-size: .69rem; font-weight: 850; }
.admin-panel .muted { margin: 0; font-size: .72rem; line-height: 1.45; }
.admin-search-form, .admin-invite-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: .65rem; }
.admin-search-form .field, .admin-invite-form .field { margin: .15rem 0 0; }
.admin-invite-form .form-error { grid-column: 1 / -1; margin: 0; }
.admin-account-list, .admin-invitation-list, .admin-announcement-list, .admin-audit-list { min-width: 0; display: grid; align-content: start; gap: .55rem; overflow: visible; }
.admin-account-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(205px,auto); align-items: center; gap: .55rem 1rem; padding: .72rem .78rem; border: 1px solid rgba(171,218,213,.16); border-radius: 12px; background: linear-gradient(110deg,rgba(3,14,29,.6),rgba(12,36,59,.44)); }
.admin-account-card > div:first-child, .admin-account-state { min-width: 0; display: grid; gap: .12rem; }
.admin-account-card strong { overflow-wrap: anywhere; color: #eef3ed; font-size: .78rem; }
.admin-account-card span, .admin-account-card small { overflow-wrap: anywhere; color: #9fb6b7; font-size: .66rem; }
.admin-account-state { text-align: right; }
.admin-account-state b { color: #e4c98f; font-size: .68rem; text-transform: capitalize; }
.admin-account-ipv4 { color: #bff9ef !important; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; }
.admin-account-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; padding-top: .45rem; border-top: 1px solid rgba(171,218,213,.1); }
.admin-account-actions:empty { display: none; }
.admin-account-actions button, .admin-invitation-card button { padding: .48rem .62rem; font-size: .68rem; }
.admin-qa-badge { color: #8ff2df !important; font-weight: 800; }
.admin-gameplay-tools { grid-column: 1 / -1; min-width: 0; border-top: 1px solid rgba(69,214,197,.16); }
.admin-gameplay-tools summary { padding: .6rem 0 .2rem; color: #bff9ef; cursor: pointer; font-size: .7rem; font-weight: 800; }
.admin-gameplay-sections { display: grid; gap: .65rem; padding-top: .55rem; }
.admin-gameplay-sections section { min-width: 0; display: grid; gap: .48rem; padding: .65rem; border: 1px solid rgba(69,214,197,.14); border-radius: 10px; background: rgba(3,14,29,.42); }
.admin-gameplay-sections h4 { margin: 0; color: #f0dfbd; font-size: .72rem; }
.admin-gameplay-form { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: end; gap: .5rem; }
.admin-gameplay-form > label { color: #aebcba; font-size: .66rem; }
.admin-gameplay-form select, .admin-gameplay-form input { width: 100%; min-width: 0; padding: .55rem .62rem; border: 1px solid rgba(171,218,213,.22); border-radius: 8px; background: rgba(3,13,27,.86); color: #eef3ed; font-size: .69rem; }
.admin-gameplay-form .field { margin: 0; gap: .2rem; }
.admin-gameplay-form .form-error { grid-column: 1 / -1; margin: 0; }
.admin-reset-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.admin-report-list, .admin-reset-list { display: grid; gap: .55rem; }
.admin-report-card, .admin-reset-card { min-width: 0; display: grid; gap: .45rem; padding: .68rem; border: 1px solid rgba(242,184,75,.18); border-radius: 11px; background: rgba(40,30,13,.2); }
.admin-report-card > div:first-child, .admin-reset-card > div:first-child { min-width: 0; display: grid; gap: .18rem; }
.admin-report-card strong, .admin-reset-card strong { color: #f2e5cc; font-size: .72rem; }
.admin-report-card p, .admin-reset-card p { margin: 0; overflow-wrap: anywhere; color: #d4ddda; font-size: .69rem; line-height: 1.4; }
.admin-report-card small, .admin-reset-card small { overflow-wrap: anywhere; color: #9fb6b7; font-size: .66rem; }
.admin-invitation-card { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; align-items: center; gap: .55rem; padding: .62rem .68rem; border: 1px solid rgba(242,184,75,.18); border-radius: 11px; background: rgba(40,30,13,.22); }
.admin-invitation-card > div { min-width: 0; display: grid; gap: .1rem; }
.admin-invitation-card strong, .admin-invitation-card small { overflow-wrap: anywhere; }
.admin-invitation-card strong { color: #f2e5cc; font-size: .72rem; }
.admin-invitation-card small { color: #9eaaab; font-size: .66rem; }
.admin-invitation-card b { color: #f1ca76; font-size: .67rem; text-transform: capitalize; }
.admin-announcements-panel { overflow: visible; }
.admin-announcement-form { display: grid; grid-template-columns: minmax(0,1fr); align-items: end; gap: .7rem; padding: .8rem; border: 1px solid rgba(181,160,255,.22); border-radius: 13px; background: rgba(15,11,39,.3); }
.admin-announcement-form .field { margin: 0; gap: .25rem; }
.admin-announcement-form .field label { font-size: .71rem; }
.admin-announcement-form .field input, .admin-announcement-form .field textarea { padding: .65rem .72rem; font-size: .72rem; }
.admin-announcement-form .field textarea { min-height: 6rem; }
.admin-announcement-form > .field, .admin-announcement-form > .form-error { grid-column: 1 / -1; }
.admin-announcement-locales { min-width: 0; display: grid; grid-template-columns: minmax(130px,.3fr) minmax(0,1.7fr); gap: .7rem; }
.admin-language-navigation { max-height: 250px; display: grid; align-content: start; gap: .35rem; padding-right: .25rem; overflow-y: auto; scrollbar-width: thin; }
.admin-language-tab { width: 100%; min-height: 38px; padding: .48rem .6rem; border: 1px solid rgba(181,160,255,.2); border-radius: 9px; background: rgba(17,13,46,.56); color: #bac8c6; text-align: left; font-size: .7rem; font-weight: 750; }
.admin-language-tab[aria-selected="true"] { border-color: rgba(69,214,197,.56); background: rgba(34,83,91,.42); color: #dffff9; box-shadow: inset 3px 0 #45d6c5; }
.admin-language-editors, .admin-announcement-language-editor { min-width: 0; }
.admin-announcement-language-editor { display: grid; gap: .55rem; }
.admin-announcement-language-editor[hidden] { display: none; }
.admin-announcement-submit-row { display: flex; justify-content: flex-end; }
.admin-announcement-card { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: .55rem; padding: .62rem .68rem; border: 1px solid rgba(181,160,255,.2); border-radius: 11px; background: rgba(28,18,65,.26); }
.admin-announcement-card > div { min-width: 0; display: grid; gap: .12rem; }
.admin-announcement-card strong, .admin-announcement-card small { overflow-wrap: anywhere; }
.admin-announcement-card strong { color: #efe8ff; font-size: .72rem; }
.admin-announcement-card small { color: #aebcba; font-size: .66rem; }
.admin-announcement-card b { color: #cbbaf7; font-size: .67rem; text-transform: capitalize; }
.admin-announcement-card button { padding: .48rem .62rem; font-size: .68rem; }
.admin-audit-list { margin: 0; padding: 0; list-style: none; }
.admin-audit-list li { display: grid; grid-template-columns: minmax(150px,.45fr) minmax(0,1fr); gap: .2rem .65rem; padding: .55rem .62rem; border-left: 2px solid rgba(181,160,255,.58); border-radius: 0 9px 9px 0; background: rgba(122,94,219,.08); }
.admin-audit-list strong { overflow-wrap: anywhere; color: #ded2f7; font-size: .69rem; }
.admin-audit-list span, .admin-audit-list small { overflow-wrap: anywhere; color: #aebcba; font-size: .66rem; }
.admin-audit-list small { grid-column: 1 / -1; }
.upgrade-option { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .55rem .7rem; padding: .72rem; border: 1px solid color-mix(in srgb, var(--hero-accent, #45d6c5) 25%, rgba(171,218,213,.24)); border-radius: 14px; background: linear-gradient(145deg, rgba(5,17,35,.9), rgba(14,35,61,.91)); box-shadow: inset 0 1px rgba(255,255,255,.04), 0 10px 24px rgba(1,7,17,.14); }
.upgrade-option.state-available { border-color: color-mix(in srgb, var(--hero-accent, #45d6c5) 54%, rgba(171,218,213,.28)); }
.upgrade-emblem { position: relative; grid-row: 1 / 3; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--hero-accent, #45d6c5) 58%, transparent); border-radius: 50% 50% 50% 10px; background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--hero-accent, #45d6c5) 32%, transparent), rgba(4,15,31,.82)); box-shadow: 0 0 17px color-mix(in srgb, var(--hero-accent, #45d6c5) 16%, transparent); }
.upgrade-emblem::before, .upgrade-emblem::after { content: ""; position: absolute; }
.upgrade-emblem-level::before { width: 15px; height: 16px; border-left: 2px solid var(--gold-soft); border-top: 2px solid var(--gold-soft); transform: rotate(45deg) translate(3px, 3px); }
.upgrade-emblem-level::after { width: 2px; height: 18px; background: var(--gold-soft); }
.upgrade-emblem-gear::before { width: 17px; height: 17px; border: 2px solid #d4e5e3; transform: rotate(45deg); }
.upgrade-emblem-gear::after { width: 7px; height: 7px; border: 1px solid var(--gold-soft); border-radius: 50%; background: rgba(4,15,31,.9); }
.upgrade-emblem-technique::before { width: 17px; height: 17px; border: 1.5px solid #cabaff; border-radius: 50%; box-shadow: inset 0 0 0 4px rgba(124,92,214,.16); }
.upgrade-emblem-technique::after { width: 5px; height: 18px; border: 1px solid #e6dcff; transform: rotate(42deg); }
.upgrade-details { min-width: 0; }
.upgrade-heading { display: flex; justify-content: space-between; align-items: center; gap: .7rem; }
.upgrade-heading > span { min-width: 0; display: grid; }
.upgrade-heading small { color: #8faeb3; font-size: .66rem; font-weight: 800; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
.upgrade-heading strong { overflow: hidden; color: #f5ecd9; font: 600 .94rem/1.25 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.upgrade-heading b { flex: none; padding: .2rem .42rem; border-radius: 7px; background: rgba(69,214,197,.1); color: #bdf6ed; font-size: .7rem; letter-spacing: .04em; }
.upgrade-costs { display: flex; flex-wrap: wrap; gap: .32rem; margin-top: .42rem; }
.upgrade-cost { min-width: 0; display: inline-grid; grid-template-columns: 23px minmax(0, 1fr); align-items: center; gap: .35rem; padding: .25rem .42rem; border: 1px solid rgba(171,218,213,.17); border-radius: 9px; background: rgba(1,9,22,.44); }
.upgrade-cost.missing { border-color: rgba(233,103,90,.27); background: rgba(79,24,29,.2); }
.upgrade-cost.maximum { display: inline-flex; color: var(--gold-soft); font-size: .7rem; font-weight: 800; }
.cost-icon { position: relative; width: 23px; height: 23px; display: inline-grid; place-items: center; border: 1px solid rgba(242,184,75,.44); border-radius: 50% 50% 50% 6px; background: radial-gradient(circle at 35% 28%, rgba(255,225,148,.32), rgba(242,184,75,.11) 44%, rgba(8,23,43,.9)); }
.cost-icon::before { content: ""; width: 8px; height: 8px; border: 1px solid var(--gold-soft); transform: rotate(45deg); }
.cost-schegge { border-color: rgba(174,146,255,.55); background: radial-gradient(circle at 35% 28%, rgba(213,200,255,.3), rgba(124,92,214,.18) 44%, rgba(15,18,48,.9)); }
.cost-schegge::before { width: 7px; height: 13px; border-color: #c9baff; clip-path: polygon(50% 0, 100% 30%, 76% 100%, 24% 100%, 0 30%); }
.cost-fibra_soglia { border-color: rgba(118,201,149,.5); background: radial-gradient(circle at 35% 28%, rgba(175,239,196,.28), rgba(45,116,76,.18) 48%, rgba(8,31,27,.9)); }
.cost-fibra_soglia::before { width: 7px; height: 13px; border-color: #a9e5bd; border-radius: 7px 2px 7px 2px; }
.cost-piastra_ferrombra { border-color: rgba(158,184,255,.46); background: radial-gradient(circle at 35% 28%, rgba(200,214,255,.25), rgba(65,79,119,.18) 48%, rgba(11,20,39,.9)); }
.cost-piastra_ferrombra::before { border-color: #c6d3f5; border-radius: 2px; }
.cost-vetro_eco { border-color: rgba(69,214,197,.5); background: radial-gradient(circle at 35% 28%, rgba(178,255,244,.28), rgba(69,214,197,.14) 48%, rgba(7,30,42,.9)); }
.cost-vetro_eco::before { width: 7px; height: 13px; border-color: #a9f2e8; clip-path: polygon(50% 0, 100% 34%, 78% 100%, 22% 100%, 0 34%); }
.cost-copy { min-width: 0; display: grid; }
.cost-copy strong { overflow: hidden; color: #dfeceb; font-size: .75rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.cost-copy small { color: #90aaaf; font-size: .68rem; line-height: 1.2; }
.upgrade-cost.missing .cost-copy small { color: #f1a29a; }
.upgrade-state { margin: .35rem 0 0; color: #9fb8bb; font-size: .74rem; line-height: 1.25; }
.state-available .upgrade-state { color: #8fe0c7; }
.state-maximum .upgrade-state { color: var(--gold-soft); }
.state-locked .upgrade-state, .state-insufficient .upgrade-state { color: #f0aaa3; }
.upgrade-button { grid-column: 2; width: 100%; padding: .5rem .65rem; border: 1px solid color-mix(in srgb, var(--hero-accent, #45d6c5) 58%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--hero-accent, #45d6c5) 19%, rgba(5,18,36,.9)); color: #eff8f4; font-size: .69rem; font-weight: 800; }
.upgrade-button:hover:not(:disabled) { border-color: var(--gold-soft); background: color-mix(in srgb, var(--hero-accent, #45d6c5) 30%, rgba(8,25,46,.9)); }
.upgrade-button.unavailable { border-color: rgba(151,177,179,.2); background: rgba(5,14,28,.55); color: #899ca0; }
.arena-body { display: grid; align-content: start; gap: 1rem; }
.arena-landing-body { max-width: none; grid-template-rows: minmax(0,1fr); align-content: stretch; padding: 1rem 1.5rem; overflow: hidden; }
.arena-landing-stage { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0,2fr) minmax(280px,1fr); gap: clamp(.8rem,1.4cqw,1.35rem); overflow: hidden; }
.arena-landing-stage > .arena-mode-grid { width: 100%; min-height: 0; grid-template-columns: minmax(0,1fr); grid-template-rows: repeat(2,minmax(0,1fr)); margin: 0; }
.arena-landing-stage .arena-mode-card { min-height: 0; padding: clamp(.85rem,1.8cqh,1.25rem) clamp(1rem,2cqw,1.5rem); }
.arena-landing-stage .arena-mode-card h3 { margin: .12rem 0 .38rem; font-size: clamp(1.2rem,2cqh,1.55rem); }
.arena-landing-stage .arena-mode-card > p:not(.eyebrow) { max-width: min(56%,560px); margin: 0 0 .45rem; font-size: clamp(.69rem,1.15cqh,.82rem); line-height: 1.38; }
.arena-landing-stage .arena-mode-emblem { width: clamp(72px,9cqh,106px); height: clamp(72px,9cqh,106px); margin: -.2rem 0 .18rem; }
.arena-landing-stage .arena-mode-card > button { min-height: 40px; padding-block: .58rem; }
.arena-dragon-stage { position: relative; isolation: isolate; min-width: 0; min-height: 0; height: 100%; display: grid; place-items: stretch center; margin: 0; overflow: hidden; border: 1px solid rgba(171,218,213,.24); border-radius: 24px; background: radial-gradient(ellipse at 50% 86%,rgba(242,184,75,.2),transparent 34%),radial-gradient(ellipse at 50% 28%,rgba(69,214,197,.15),transparent 48%),linear-gradient(165deg,rgba(15,39,67,.96),rgba(5,14,31,.98)); box-shadow: 0 24px 60px rgba(1,7,17,.38),inset 0 1px rgba(255,255,255,.06); }
.arena-dragon-stage::before { content: ""; position: absolute; z-index: -1; inset: 7% 2% 4%; border: 1px solid rgba(242,216,138,.18); border-radius: 50%; transform: perspective(700px) rotateX(70deg); box-shadow: 0 0 34px rgba(69,214,197,.12),inset 0 0 36px rgba(124,92,214,.1); }
.arena-dragon-stage::after { content: ""; position: absolute; z-index: 3; left: 12%; right: 12%; bottom: 1.5%; height: 11%; pointer-events: none; background: radial-gradient(ellipse,rgba(242,184,75,.18),rgba(69,214,197,.06) 38%,transparent 72%); filter: blur(8px); animation: arena-dragon-ground-light 10s ease-in-out infinite; }
.arena-dragon-source,.arena-dragon-rig { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block; }
.arena-dragon-source { object-fit: contain; object-position: center bottom; filter: drop-shadow(0 22px 18px rgba(0,0,0,.48)) drop-shadow(0 0 14px rgba(69,214,197,.14)); transition: opacity .28s ease; }
.arena-dragon-rig { z-index: 2; opacity: 0; filter: drop-shadow(0 22px 18px rgba(0,0,0,.48)) drop-shadow(0 0 14px rgba(69,214,197,.14)); transition: opacity .28s ease; }
.arena-dragon-stage.is-rig-ready .arena-dragon-source { opacity: 0; }
.arena-dragon-stage.is-rig-ready .arena-dragon-rig { opacity: 1; }
.arena-dragon-orbits { position: absolute; z-index: 0; inset: 7% 3% 5%; pointer-events: none; animation: arena-dragon-aura 10s ease-in-out infinite; }
.arena-dragon-orbits span,.arena-dragon-orbits i,.arena-dragon-orbits b { position: absolute; inset: 10% 4%; border: 1px solid rgba(69,214,197,.2); border-radius: 48% 52% 44% 56%; transform: rotate(9deg); }
.arena-dragon-orbits i { inset: 25% 13% 9%; border-color: rgba(242,184,75,.2); transform: rotate(-12deg); }
.arena-dragon-orbits b { inset: 4% 20% 20%; border-style: dashed; border-color: rgba(164,113,224,.2); transform: rotate(18deg); }
@keyframes arena-dragon-aura { 0%,100% { opacity: .48; transform: scale(.985) rotate(0deg); } 50% { opacity: .9; transform: scale(1.025) rotate(1.2deg); } }
@keyframes arena-dragon-ground-light { 0%,100% { opacity: .46; transform: scaleX(.9); } 50% { opacity: .82; transform: scaleX(1.08); } }
.arena-mode-heading { max-width: 900px; margin: .5rem auto 0; text-align: center; }
.arena-mode-heading h2 { margin: .25rem 0 .55rem; color: #f6ead2; font: 600 clamp(1.7rem,3cqw,2.6rem)/1.05 var(--font-display); }
.arena-mode-heading > p:last-child { color: #abc1c1; }
.arena-mode-grid { width: min(1160px,100%); margin: 0 auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.arena-mode-card { position: relative; min-height: 370px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; padding: clamp(1.2rem,3cqw,2rem); border: 1px solid rgba(171,218,213,.3); border-radius: 22px; background: radial-gradient(circle at 80% 0,rgba(69,214,197,.14),transparent 34%),linear-gradient(145deg,rgba(20,49,80,.95),rgba(5,17,36,.98)); box-shadow: 0 24px 60px rgba(1,7,17,.34); }
.arena-mode-card.arena-mode-echo { border-color: rgba(213,176,255,.38); background: radial-gradient(circle at 80% 0,rgba(164,113,224,.2),transparent 38%),linear-gradient(145deg,rgba(35,31,83,.96),rgba(8,16,39,.98)); }
.arena-mode-card > :not(.arena-mode-hero-backdrop) { position: relative; z-index: 2; }
.arena-mode-hero-backdrop { position: absolute; z-index: 1; top: -5%; right: -1%; width: min(48%,560px); height: 110%; display: block; object-fit: contain; object-position: right bottom; opacity: .94; pointer-events: none; user-select: none; filter: drop-shadow(-16px 18px 18px rgba(0,0,0,.38)) drop-shadow(0 0 18px rgba(69,214,197,.13)); -webkit-mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 13%,rgba(0,0,0,.72) 38%,#000 58%,#000 100%); mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 13%,rgba(0,0,0,.72) 38%,#000 58%,#000 100%); transition: opacity .24s ease; }
.arena-mode-echo .arena-mode-hero-backdrop { right: 1%; filter: drop-shadow(-16px 18px 18px rgba(0,0,0,.4)) drop-shadow(0 0 20px rgba(164,113,224,.2)); }
.arena-mode-card h3 { margin: .35rem 0 .7rem; color: #fff0cf; font: 600 1.8rem/1.08 var(--font-display); }
.arena-mode-card > p:not(.eyebrow) { max-width: 560px; color: #b6c9c8; line-height: 1.55; }
.arena-mode-card > button { margin-top: auto; }
.arena-mode-emblem { width: clamp(124px,10cqw,144px); height: clamp(124px,10cqw,144px); display: grid; place-items: center; margin: -.35rem 0 .55rem; border: 0; background: transparent; box-shadow: none; }
.arena-mode-emblem img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 0 20px rgba(69,214,197,.2)); }
.arena-mode-emblem.echo img { filter: drop-shadow(0 0 22px rgba(180,125,255,.24)); }
.echo-trial-pool-grid { display: grid; grid-template-columns: repeat(8,minmax(92px,1fr)); gap: .55rem; }
.echo-trial-run-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid rgba(213,176,255,.32); border-radius: 17px; background: linear-gradient(120deg,rgba(50,34,94,.58),rgba(9,28,50,.72)); }
.echo-trial-run-card h2 { margin: .2rem 0; font: 600 1.35rem/1.15 var(--font-display); }
.echo-deployment-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(300px,.5fr); gap: 1rem; }
.echo-deployment-layout > div,.echo-deployment-layout > aside { padding: 1rem; border: 1px solid rgba(171,218,213,.26); border-radius: 18px; background: rgba(6,20,39,.82); }
.echo-deployment-pool { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .6rem; }
.echo-deployment-hero { min-height: 185px; display: grid; grid-template-rows: minmax(0,1fr) auto; overflow: hidden; padding: .3rem; border: 1px solid rgba(171,218,213,.22); border-radius: 13px; background: rgba(16,41,67,.72); color: #e9f2ec; }
.echo-deployment-hero img { width: 100%; height: 135px; object-fit: contain; }
.echo-deployment-hero span { display: grid; padding: .35rem; }
.echo-deployment-hero.chosen { border-color: #f2d88a; box-shadow: 0 0 0 2px rgba(242,184,75,.16); }
.echo-deployment-hero.used { opacity: .45; }
.echo-deployment-slots { display: grid; gap: .5rem; margin-bottom: .8rem; }
.echo-deployment-slot { min-height: 50px; border: 1px dashed rgba(171,218,213,.3); border-radius: 10px; background: rgba(3,14,29,.48); color: #a8bcbd; text-align: left; }
.echo-deployment-slot.filled { border-style: solid; border-color: rgba(69,214,197,.5); color: #eafffa; }
.arena-hero-panel, .arena-defense-panel, .arena-section, .arena-empty-state, .arena-lock-card { border: 1px solid rgba(171,218,213,.27); border-radius: 20px; background: linear-gradient(145deg, rgba(16,42,72,.93), rgba(5,17,35,.96)); box-shadow: 0 24px 64px rgba(1,6,16,.38), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(15px); }
.arena-hero-panel { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(330px,.65fr); align-items: center; gap: 1.5rem; padding: 1.3rem 1.5rem; }
.arena-hero-panel h2, .arena-defense-panel h2, .arena-section h2, .arena-empty-state h2, .arena-lock-card h2 { margin: 0; color: #f4ead8; font: 600 clamp(1.25rem,2cqw,1.8rem)/1.1 var(--font-display); }
.arena-hero-panel p:not(.eyebrow), .arena-defense-panel p:not(.eyebrow), .arena-empty-state p:not(.eyebrow), .arena-lock-card p:not(.eyebrow) { margin: .45rem 0 0; color: #bcd0d0; line-height: 1.5; }
.arena-season-mark { display: grid; gap: .2rem; padding: .9rem 1rem; border: 1px solid rgba(242,216,138,.34); border-radius: 13px; background: radial-gradient(circle at 20% 0, rgba(242,184,75,.13), transparent 70%), rgba(4,17,34,.66); }
.arena-season-mark small, .arena-season-mark span { color: #a7bfc0; font-size: .68rem; }
.arena-season-mark strong { color: #fff0c6; font: 600 1.08rem/1.15 var(--font-display); }
.arena-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; }
.arena-stat { display: grid; gap: .2rem; padding: .85rem 1rem; border: 1px solid rgba(171,218,213,.22); border-radius: 14px; background: linear-gradient(145deg, rgba(22,54,84,.9), rgba(7,22,43,.94)); }
.arena-stat small { color: #8fa9ab; font-size: .69rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.arena-stat strong { color: #f7e5b5; font: 600 1.55rem/1 var(--font-display); }
.arena-stat span { color: #b6cbca; font-size: .76rem; }
.arena-defense-panel { display: grid; grid-template-columns: minmax(250px,.65fr) minmax(600px,1.35fr) auto; align-items: center; gap: 1rem; padding: 1rem 1.2rem; }
.arena-defense-team { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .45rem; }
.arena-hero-token { --hero-accent:#45d6c5; position: relative; min-height: 110px; display: grid; align-content: end; justify-items: center; overflow: hidden; border: 1px solid color-mix(in srgb,var(--hero-accent) 46%,rgba(171,218,213,.2)); border-radius: 11px; background: radial-gradient(circle at 50% 22%,color-mix(in srgb,var(--hero-accent) 14%,transparent),transparent 48%),rgba(3,14,29,.68); }
.arena-hero-token img { position: absolute; inset: 0 8% 15%; width: 84%; height: 85%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 8px 10px rgba(1,6,15,.55)); }
.arena-hero-token span { z-index: 1; width: 100%; display: grid; padding: .35rem .25rem; background: rgba(3,13,27,.82); text-align: center; }
.arena-hero-token strong { overflow: hidden; font: 600 .7rem/1 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.arena-hero-token small { color: #a9c5c4; font-size: .66rem; }
.arena-section { display: grid; gap: .9rem; padding: 1rem 1.15rem; }
.arena-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.arena-section-heading > span { color: #b3c9c8; font-size: .7rem; }
.arena-opponent-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; }
.arena-opponent-card { display: grid; gap: .7rem; padding: .9rem; border: 1px solid rgba(171,218,213,.2); border-radius: 13px; background: linear-gradient(145deg,rgba(25,58,88,.76),rgba(5,18,37,.84)); }
.arena-opponent-card h3 { margin: 0; font: 600 1.05rem/1.1 var(--font-display); }
.arena-card-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; margin: 0; }
.arena-card-stats > div { padding: .5rem; border-radius: 9px; background: rgba(3,14,29,.5); }
.arena-card-stats dt { color: #8ea8aa; font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.arena-card-stats dd { margin: .15rem 0 0; color: #eff3e9; font-size: .74rem; font-weight: 750; }
.arena-lower-grid { display: grid; grid-template-columns: minmax(390px,.7fr) minmax(570px,1.3fr); gap: 1rem; }
.arena-ranking-list { display: grid; gap: .35rem; }
.arena-ranking-list > div { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: .6rem; padding: .48rem .6rem; border: 1px solid rgba(171,218,213,.13); border-radius: 8px; background: rgba(4,17,34,.5); }
.arena-ranking-list > div.top { border-color: rgba(242,216,138,.32); background: rgba(91,67,31,.2); }
.arena-ranking-list b { color: #f4cf78; font: 600 .9rem/1 var(--font-display); }
.arena-ranking-list span { display: grid; }
.arena-ranking-list small { color: #91aaac; font-size: .67rem; }
.arena-ranking-list em { color: #e9f0e8; font-style: normal; font-weight: 850; }
.arena-history-list { display: grid; gap: .4rem; }
.arena-history-row { display: grid; grid-template-columns: minmax(160px,1fr) 80px 50px auto; align-items: center; gap: .65rem; padding: .5rem .6rem; border: 1px solid rgba(171,218,213,.14); border-left: 3px solid #cb7899; border-radius: 8px; background: rgba(4,17,34,.5); }
.arena-history-row.victory { border-left-color: #69c89a; }
.arena-history-row > div { display: grid; }
.arena-history-row small { color: #91aaac; font-size: .67rem; }
.arena-history-row > span { color: #cbdad7; font-size: .76rem; }
.arena-history-row > b { color: #f4cf78; }
.arena-rewards { padding: .8rem 1rem; border: 1px solid rgba(242,216,138,.25); border-radius: 13px; background: rgba(35,29,25,.58); }
.arena-rewards summary { color: #f5dfaa; cursor: pointer; font-weight: 800; }
.arena-reward-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .35rem .8rem; margin-top: .7rem; }
.arena-reward-list > div { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: .45rem; color: #b8cecc; font-size: .76rem; }
.arena-reward-list strong { color: #f4cf78; }
.arena-empty-state, .arena-lock-card { width: min(760px,100%); justify-self: center; display: grid; justify-items: center; gap: .8rem; padding: 2.4rem; text-align: center; }
.arena-lock-card { margin-top: min(10cqh,90px); }
.arena-seal { width: 86px; height: 86px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(242,216,138,.55); border-radius: 50%; background: rgba(7,22,43,.9); box-shadow: 0 0 35px rgba(242,184,75,.14); }
.arena-seal img { width: 100%; height: 100%; object-fit: cover; }
.arena-requirement-list { width: min(560px,100%); display: grid; gap: .45rem; }
.arena-requirement-list > div { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: .6rem; padding: .6rem .75rem; border: 1px solid rgba(203,120,153,.3); border-radius: 9px; background: rgba(91,31,57,.18); text-align: left; }
.arena-requirement-list > div.complete { border-color: rgba(105,200,154,.35); background: rgba(27,84,64,.18); }
.arena-requirement-list small { color: #a9c0c0; }

.deployment-body { max-width: none; padding: 1rem 1.5rem 1.5rem; overflow: hidden; }
.deployment-layout { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(600px, 1.25fr) minmax(430px, .75fr); gap: 1rem; }
.deployment-board, .deployment-roster-panel { min-width: 0; min-height: 0; border: 1px solid rgba(171,218,213,.3); border-radius: 20px; background: linear-gradient(155deg, rgba(16,42,72,.94), rgba(5,17,35,.96)); box-shadow: 0 24px 64px rgba(1,6,16,.4), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(15px); }
.deployment-board { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: .85rem; padding: 1rem; }
.deployment-board:has(.time-journey-method-picker) { grid-template-rows: auto auto auto minmax(0,1fr); }
.time-journey-deployment-board { grid-template-rows: auto auto auto minmax(230px,1fr); gap: .58rem; }
.time-journey-deployment-board .deployment-route-summary { padding: .62rem .72rem; }
.time-journey-deployment-board .deployment-route-summary p:not(.eyebrow) { margin-top: .22rem; font-size: .67rem; line-height: 1.32; }
.time-journey-deployment-board .deployment-route-stats > div { padding: .35rem .46rem; }
.time-journey-deployment-board .time-journey-method-picker { padding: .48rem .55rem; }
.time-journey-deployment-board .time-journey-method-picker .section-heading.compact { margin-bottom: .38rem; }
.time-journey-deployment-board .time-journey-method-picker .section-heading h3 { font-size: 1rem; }
.time-journey-deployment-board .time-journey-method { gap: .18rem; padding: .48rem .55rem; }
.time-journey-deployment-board .time-journey-method strong { font-size: .82rem; }
.time-journey-deployment-board .time-journey-method span { font-size: .66rem; line-height: 1.28; }
.time-journey-deployment-board .deployment-board-heading .eyebrow { margin-bottom: .12rem; }
.time-journey-deployment-board .deployment-team-grid { min-height: 230px; overflow: hidden; }
.time-journey-deployment-board .deployment-slot { min-height: 0; }
.deployment-route-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .75fr); gap: 1rem; padding: .8rem .9rem; border: 1px solid rgba(171,218,213,.2); border-radius: 14px; background: rgba(3,14,29,.5); }
.deployment-route-summary h2, .deployment-board-heading h3, .deployment-roster-panel h3 { margin: 0; font: 600 1.25rem/1.12 var(--font-display); }
.deployment-route-summary p:not(.eyebrow), .deployment-roster-panel > div > p:not(.eyebrow) { margin: .35rem 0 0; color: #bcd0d0; font-size: .72rem; line-height: 1.42; }
.deployment-route-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin: 0; }
.deployment-route-stats > div { padding: .45rem .55rem; border: 1px solid rgba(171,218,213,.14); border-radius: 9px; background: rgba(15,40,66,.58); }
.deployment-route-stats dt { color: #8ca8aa; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.deployment-route-stats dd { margin: .12rem 0 0; color: #edf4ee; font-size: .72rem; font-weight: 750; }
.deployment-board-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.deployment-live-stats { display: grid; justify-items: end; gap: .16rem; }
.deployment-counter { color: var(--gold-soft); font: 600 1.05rem/1 var(--font-display); }
.deployment-power { color: #a9c4c4; font-size: .68rem; }
.deployment-team-grid { min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .65rem; padding: .7rem; border: 1px solid rgba(69,214,197,.24); border-radius: 17px; background: radial-gradient(circle at center, rgba(69,214,197,.07), transparent 58%), rgba(2,11,25,.62); }
.deployment-slot { position: relative; min-width: 0; min-height: 130px; display: grid; place-items: center; align-content: center; gap: .3rem; padding: .5rem; overflow: hidden; border: 1px dashed rgba(159,206,202,.42); border-radius: 13px; background: linear-gradient(160deg, rgba(25,55,88,.44), rgba(5,18,37,.7)); color: #9bb2b5; text-align: center; }
.deployment-slot::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 12px; height: 1px; background: linear-gradient(90deg, transparent, rgba(69,214,197,.5), transparent); }
.deployment-slot.lane-rear { border-color: rgba(69,214,197,.48); }
.deployment-slot.lane-center { border-color: rgba(181,160,255,.5); background: linear-gradient(160deg,rgba(45,47,91,.48),rgba(5,18,37,.72)); }
.deployment-slot.lane-front { border-color: rgba(242,184,75,.5); background: linear-gradient(160deg,rgba(76,57,25,.42),rgba(5,18,37,.72)); }
.deployment-slot.filled { grid-template-columns: minmax(0, 1fr); align-content: end; border-style: solid; border-color: color-mix(in srgb, var(--hero-accent, #45d6c5) 68%, white); color: white; background: radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--hero-accent, #45d6c5) 18%, transparent), transparent 44%), rgba(4,18,35,.82); box-shadow: inset 0 0 30px color-mix(in srgb, var(--hero-accent, #45d6c5) 8%, transparent); }
.deployment-slot.drag-over { border-style: solid; border-color: var(--gold-soft); box-shadow: 0 0 0 3px rgba(242,184,75,.15), inset 0 0 34px rgba(242,184,75,.12); }
.deployment-slot.dragging { opacity: .55; }
.deployment-slot img { position: absolute; inset: 2% 8% 0; width: 84%; height: 92%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 10px 13px rgba(1,6,15,.55)); pointer-events: none; }
.deployment-slot > span:not(.deployment-slot-number) { position: relative; z-index: 1; display: grid; gap: .1rem; padding: .28rem .48rem; border-radius: 8px; background: rgba(3,13,27,.78); }
.deployment-slot strong { font: 600 .82rem/1.08 var(--font-display); }
.deployment-slot small { color: #acd2cf; font-size: .67rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.deployment-slot-number { color: rgba(242,231,207,.5); font: 600 1.25rem/1 var(--font-display); }
.deployment-requirements { margin: 0; padding: .55rem .7rem; border-left: 2px solid #cb7899; border-radius: 0 9px 9px 0; background: rgba(128,39,76,.16); color: #e4cbd4; font-size: .68rem; }
.deployment-roster-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: .75rem; padding: 1rem; }
.deployment-roster { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: .55rem; padding-right: .2rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(69,214,197,.46) rgba(4,13,28,.3); }
.deployment-hero-card { --hero-accent: #45d6c5; position: relative; min-height: 96px; display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: .55rem; padding: .45rem .55rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--hero-accent) 30%, rgba(171,218,213,.24)); border-radius: 12px; background: linear-gradient(145deg, rgba(26,54,86,.82), rgba(6,19,39,.9)); color: #eaf2ed; text-align: left; cursor: grab; }
.deployment-hero-card:hover, .deployment-hero-card:focus-visible { border-color: color-mix(in srgb, var(--hero-accent) 72%, white); background: linear-gradient(145deg, rgba(35,68,101,.94), rgba(8,25,47,.94)); }
.deployment-hero-card.selected { border-color: var(--gold-soft); box-shadow: inset 0 0 22px rgba(242,184,75,.1); }
.deployment-hero-card.dragging { opacity: .48; cursor: grabbing; }
.deployment-hero-card img { width: 62px; height: 88px; object-fit: contain; object-position: center bottom; pointer-events: none; filter: drop-shadow(0 7px 8px rgba(1,6,15,.5)); }
.deployment-hero-copy { min-width: 0; display: grid; gap: .22rem; }
.deployment-hero-copy strong { overflow: hidden; font: 600 .84rem/1.06 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.deployment-hero-copy small { color: #aac0c1; font-size: .69rem; line-height: 1.3; }
.deployment-hero-copy em { color: #f1b7cd; font-size: .66rem; font-style: normal; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.deployment-error { min-height: 1em; margin: 0; color: #ffb2aa; font-size: .7rem; }
.deployment-combat-button { width: 100%; min-height: 48px; font-size: .9rem; }

.game-view-messages::before { background: linear-gradient(180deg,rgba(3,11,24,.68),rgba(5,17,34,.54) 28%,rgba(3,11,24,.86)),linear-gradient(90deg,rgba(3,11,24,.68),transparent 52%,rgba(3,11,24,.5)); backdrop-filter: saturate(.82) brightness(.82); }
.game-view-messages .game-view-body { display: grid; align-items: stretch; }
.message-list { width: min(1320px,100%); min-height: min(680px,calc(100cqh - 160px)); display: grid; grid-template-columns: minmax(290px,.72fr) minmax(0,1.75fr); margin: 0 auto; overflow: hidden; border: 1px solid rgba(171,218,213,.28); border-radius: 22px; background: linear-gradient(145deg,rgba(14,39,66,.97),rgba(4,16,33,.985)); box-shadow: 0 28px 76px rgba(1,7,17,.54),inset 0 1px rgba(255,255,255,.055); }
.message-index { min-height: 0; padding: .75rem; overflow-y: auto; border-right: 1px solid rgba(171,218,213,.2); background: radial-gradient(circle at 15% 0,rgba(69,214,197,.11),transparent 30%),linear-gradient(180deg,rgba(15,44,72,.98),rgba(5,20,39,.99)); scrollbar-width: thin; scrollbar-color: rgba(69,214,197,.46) rgba(4,13,28,.36); }
.message-index-heading { display: grid; gap: .15rem; margin: .2rem .2rem .75rem; padding: .45rem .55rem .8rem; border-bottom: 1px solid rgba(242,216,138,.18); }
.message-index-heading .eyebrow { margin: 0; }
.message-index-heading strong { color: #f2eadb; font: 600 1.05rem/1.2 var(--font-display); }
.message-index button { position: relative; width: 100%; display: grid; gap: .3rem; margin: .35rem 0; padding: .78rem .85rem .78rem 1rem; overflow: hidden; border: 1px solid transparent; border-radius: 12px; background: rgba(3,15,31,.4); color: #a9bdbc; text-align: left; }
.message-index button::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 2px; border-radius: 2px; background: transparent; }
.message-index button strong { overflow: hidden; color: #dce8e3; font: 600 .84rem/1.25 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.message-index button small { color: #829fa2; font-size: .68rem; }
.message-index button:hover { border-color: rgba(69,214,197,.25); background: linear-gradient(105deg,rgba(10,31,54,.9),rgba(24,57,82,.66)); }
.message-index button[aria-selected="true"] { border-color: rgba(69,214,197,.38); background: linear-gradient(105deg,rgba(18,57,82,.98),rgba(30,72,92,.8)); color: var(--parchment); box-shadow: inset 0 1px rgba(255,255,255,.05),0 8px 22px rgba(1,8,18,.2); }
.message-index button[aria-selected="true"]::before { background: var(--resonance); box-shadow: 0 0 10px rgba(69,214,197,.65); }
.message-index button.unread strong::before { content: "•"; margin-right: .4rem; color: var(--gold); text-shadow: 0 0 8px rgba(242,184,75,.55); }
.message-detail { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.5rem,3.4cqw,3.4rem); overflow-y: auto; background: radial-gradient(circle at 91% 6%,rgba(69,214,197,.1),transparent 30%),linear-gradient(150deg,rgba(17,45,75,.96),rgba(5,17,35,.99)); }
.message-detail::before { content: ""; position: absolute; right: clamp(1.5rem,3cqw,3rem); top: clamp(1.4rem,3cqw,2.6rem); width: 54px; height: 54px; border: 1px solid rgba(242,216,138,.3); border-radius: 50% 50% 50% 9px; transform: rotate(45deg); background: radial-gradient(circle,rgba(242,184,75,.15),transparent 64%); }
.message-detail > .eyebrow { margin: 0 0 .45rem; padding-right: 74px; }
.message-detail h3 { max-width: 780px; margin: 0 0 .8rem; padding-right: 74px; color: #f5ecda; font: 600 clamp(1.65rem,2.8cqw,2.55rem)/1.08 var(--font-display); text-wrap: balance; }
.message-body { width: min(100%,840px); margin: 1rem 0 0; padding: 1.05rem 1.15rem; border-left: 2px solid var(--resonance); border-radius: 0 12px 12px 0; background: rgba(3,14,29,.54); color: #d4e2de; font-size: .94rem; line-height: 1.72; white-space: pre-wrap; }
.message-expiry { display: block; margin-top: .8rem; color: #91aaab; }
.status-pill.announcement { margin-bottom: .5rem; border-color: rgba(181,160,255,.42); color: #e4daff; background: rgba(122,94,219,.18); }
.attachment-box { width: min(100%,840px); margin-top: 1.2rem; padding: 1rem 1.1rem; border: 1px solid rgba(242,184,75,.35); border-radius: 13px; background: linear-gradient(115deg,rgba(91,66,25,.28),rgba(24,37,49,.45)); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.attachment-box > p { color: #e5d9b9; }
.message-detail-actions { width: min(100%,840px); display: flex; justify-content: flex-end; margin-top: auto; padding-top: 2rem; }
.message-detail-actions .danger-button { min-width: 180px; }
.message-delete-confirmation { position: fixed; z-index: 150; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(2,8,18,.82); backdrop-filter: blur(14px); }
.message-delete-card { width: min(520px,100%); display: grid; justify-items: center; gap: .75rem; padding: clamp(1.4rem,4cqw,2.5rem); border: 1px solid rgba(233,103,90,.38); border-radius: 22px; background: radial-gradient(circle at 50% 0,rgba(233,103,90,.13),transparent 36%),linear-gradient(145deg,rgba(25,46,65,.98),rgba(6,17,32,.99)); box-shadow: 0 30px 90px rgba(1,5,14,.68),inset 0 1px rgba(255,255,255,.06); text-align: center; }
.message-delete-mark { width: 62px; height: 62px; display: grid; place-items: center; border: 1px solid rgba(233,103,90,.48); border-radius: 50%; color: #ffb7b0; font: 600 1.5rem/1 var(--font-display); box-shadow: 0 0 26px rgba(233,103,90,.12); }
.message-delete-card .eyebrow,.message-delete-card h2,.message-delete-card p { margin: 0; }
.message-delete-card h2 { color: #f7e9e4; font: 600 1.7rem/1.12 var(--font-display); }
.message-delete-subject { color: #ffd0c8; }
.message-delete-card p:last-of-type { color: #b9cbca; line-height: 1.5; }
.message-delete-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: .45rem; }

.battle-layout { max-width: none; height: calc(100cqh - 88px); display: grid; grid-template-columns: minmax(760px, 1fr) 350px; grid-template-rows: minmax(0, 1fr); min-height: 0; margin: 0; padding: 0; overflow: hidden; }
.battle-layout::before { display: none; }
.battle-stage { position: relative; min-height: 0; height: 100%; overflow: hidden; background: #081426; box-shadow: inset -24px 0 45px rgba(3,9,20,.3); }
.battle-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 54px rgba(2,8,18,.34); }
.battle-stage canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; min-height: 0; }
.battle-stage canvas[data-animation-state="running"] { filter: saturate(1.1) contrast(1.035); }
.battle-completion { position: absolute; z-index: 4; left: 50%; top: 50%; width: min(520px, calc(100% - 3rem)); display: grid; justify-items: center; gap: .75rem; padding: 1.5rem 2rem 1.7rem; transform: translate(-50%, -50%); overflow: hidden; border: 1px solid rgba(242,216,138,.58); border-radius: 22px; background: radial-gradient(circle at 50% 0, rgba(242,184,75,.18), transparent 52%), linear-gradient(155deg, rgba(17,43,70,.95), rgba(5,16,34,.97)); box-shadow: 0 28px 80px rgba(1,6,16,.62), inset 0 1px rgba(255,255,255,.08); text-align: center; backdrop-filter: blur(18px); }
.battle-completion[hidden] { display: none; }
.battle-completion::before { content: ""; position: absolute; inset: 8px; pointer-events: none; border: 1px solid rgba(69,214,197,.2); border-radius: 16px; }
.battle-completion .eyebrow { margin: 0; }
.battle-completion h2 { position: relative; margin: 0; color: #fff0c6; font: 600 clamp(2rem, 4cqw, 3.25rem)/1 var(--font-display); letter-spacing: .025em; text-shadow: 0 0 24px rgba(242,184,75,.22); }
.battle-completion-actions { position: relative; width: min(100%, 340px); display: grid; gap: .65rem; }
.battle-completion-actions button { width: 100%; min-width: 230px; }
.battle-navigation-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: 1rem; }
.battle-navigation-actions button { width: 100%; }
.report-layout { max-width: none; padding: clamp(1rem, 1.8cqw, 2rem) clamp(1.25rem, 2.5cqw, 3rem) 3rem; }
.report-replay-grid { min-height: clamp(420px, calc(100cqh - 158px), 760px); min-height: clamp(420px, calc(100cqh - 158px), 760px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 340px); gap: 1rem; align-items: stretch; }
.report-replay-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid rgba(139,210,203,.4); border-radius: 18px; background: #081426; box-shadow: 0 20px 50px rgba(2,8,18,.28), inset 0 0 42px rgba(2,8,18,.34); }
.report-canvas { display: block; width: 100%; height: 100%; margin: 0; background: #081426; }
.report-summary-panel { display: flex; flex-direction: column; gap: 1rem; min-height: 0; padding: 1.1rem; border: 1px solid rgba(171,218,213,.28); border-radius: 18px; background: linear-gradient(160deg, rgba(21,49,83,.91), rgba(7,21,42,.94)); box-shadow: 0 18px 44px rgba(2,8,18,.24), inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(14px); }
.report-summary-panel h2 { margin: .15rem 0 .45rem; font: 600 1.55rem/1.1 var(--font-display); }
.report-summary-panel > .secondary-button { width: 100%; margin-top: auto; }
.report-summary-panel .battle-navigation-actions { grid-template-columns: 1fr; margin-top: auto; }
.report-metrics.content-grid.three { grid-template-columns: 1fr; gap: .65rem; }
.report-metrics .card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; }
.report-metrics .card h3, .report-metrics .card p { margin: 0; }
.report-events-title { margin: 2rem 0 .8rem; }
.hero-celebration-reveal { --hero-accent: #f2b84b; isolation: isolate; }
.hero-celebration-backdrop { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.hero-celebration-backdrop > span { position: absolute; display: block; pointer-events: none; will-change: transform,opacity; }
.hero-celebration-rays { inset: -48%; opacity: .92; background: conic-gradient(from 8deg at 38% 50%,transparent 0 6%,color-mix(in srgb,var(--hero-accent) 40%,transparent) 8% 12%,transparent 14% 21%,rgba(255,245,207,.26) 24% 28%,transparent 31% 41%,color-mix(in srgb,var(--hero-accent) 34%,transparent) 44% 49%,transparent 52% 61%,rgba(255,228,142,.22) 64% 68%,transparent 72% 100%); mix-blend-mode: screen; transform-origin: 38% 50%; animation: hero-celebration-rays 8.6s linear infinite; }
.hero-celebration-shimmer { inset: -8%; opacity: .84; background: linear-gradient(108deg,transparent 13%,color-mix(in srgb,var(--hero-accent) 16%,transparent) 25%,rgba(255,250,225,.46) 34%,color-mix(in srgb,var(--hero-accent) 24%,transparent) 43%,transparent 55%); mix-blend-mode: screen; transform: translateX(-110%); animation: hero-celebration-shimmer 4.2s ease-in-out infinite; }
.hero-celebration-glow { left: 1cqw; top: 2cqh; width: 68cqw; height: 96cqh; opacity: .92; border-radius: 48% 52% 46% 54%; background: radial-gradient(ellipse at 48% 48%,rgba(255,250,225,.56) 0 6%,color-mix(in srgb,var(--hero-accent) 52%,transparent) 18%,color-mix(in srgb,var(--hero-accent) 22%,transparent) 42%,transparent 70%); filter: blur(10px); animation: hero-celebration-pulse 2.9s ease-in-out infinite; }
.hero-celebration-halo { left: 7cqw; top: 10cqh; width: 52cqw; height: 80cqh; box-sizing: border-box; opacity: .84; border: 2px solid color-mix(in srgb,var(--hero-accent) 70%,transparent); border-radius: 48% 52% 46% 54%; box-shadow: 0 0 44px color-mix(in srgb,var(--hero-accent) 38%,transparent),inset 0 0 38px color-mix(in srgb,var(--hero-accent) 26%,transparent); animation: hero-celebration-halo 3.2s ease-in-out infinite; }
.hero-celebration-orbit { left: 14cqw; top: 18cqh; width: 38cqw; height: 64cqh; box-sizing: border-box; opacity: .78; border: 2px dashed rgba(255,241,191,.72); border-radius: 51% 49% 53% 47%; box-shadow: 0 0 28px color-mix(in srgb,var(--hero-accent) 36%,transparent); animation: hero-celebration-orbit 6.4s linear infinite; }
@keyframes hero-celebration-rays { to { transform: rotate(360deg); } }
@keyframes hero-celebration-shimmer { 0%,10% { transform: translateX(-110%); } 62%,100% { transform: translateX(110%); } }
@keyframes hero-celebration-pulse { 50% { opacity: .68; transform: scale(1.08); } }
@keyframes hero-celebration-halo { 50% { opacity: .48; transform: scale(1.07) rotate(2deg); } }
@keyframes hero-celebration-orbit { to { transform: rotate(-360deg); } }
.hero-unlock-reveal { position: fixed; z-index: 30; inset: 0; min-width: 0; display: grid; grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr); align-items: center; gap: clamp(1rem, 4cqw, 5rem); padding: clamp(2rem, 5cqw, 6rem); overflow: auto; background: radial-gradient(circle at 31% 42%, rgba(255,220,122,.28), transparent 28%), radial-gradient(circle at 70% 20%, rgba(242,184,75,.14), transparent 32%), linear-gradient(128deg, #050b18 0%, #15203a 45%, #090d19 100%); }
.hero-unlock-close { position: fixed; z-index: 3; top: 1.2rem; right: 1.4rem; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,225,148,.48); border-radius: 50%; background: rgba(7,14,28,.72); color: #fff1c5; font: 300 2rem/1 var(--font-display); backdrop-filter: blur(12px); }
.hero-unlock-close:hover, .hero-unlock-close:focus-visible { border-color: #fff1c5; background: rgba(76,55,24,.8); }
.hero-unlock-portrait { position: relative; z-index: 2; min-height: min(72cqh, 760px); display: grid; place-items: end center; isolation: isolate; }
.hero-unlock-portrait::before { content: ""; position: absolute; z-index: 0; inset: 12% 8% 5%; border: 1px solid rgba(255,220,122,.28); border-radius: 50% 50% 44% 44%; background: radial-gradient(circle at 50% 35%, rgba(255,235,177,.22), transparent 50%); box-shadow: 0 0 90px rgba(242,184,75,.18), inset 0 0 70px rgba(242,184,75,.08); }
.hero-unlock-portrait img { position: relative; z-index: 1; width: min(100%, 540px); max-height: 76cqh; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 32px 34px rgba(1,5,14,.7)) drop-shadow(0 0 22px rgba(242,184,75,.23)); animation: hero-unlock-arrival 1.05s cubic-bezier(.2,.72,.24,1) both; }
.hero-unlock-copy { position: relative; z-index: 2; max-width: 680px; display: grid; gap: 1rem; padding: clamp(1.2rem, 3cqw, 2.4rem); border: 1px solid rgba(255,224,142,.28); border-radius: 26px; background: linear-gradient(145deg, rgba(26,36,59,.72), rgba(7,14,28,.76)); box-shadow: 0 32px 90px rgba(1,5,14,.52), inset 0 1px rgba(255,255,255,.07); backdrop-filter: blur(20px); }
.hero-unlock-copy .eyebrow { margin: 0; color: #f8d87f; }
.hero-unlock-copy h2 { margin: 0; color: #fff2c9; font: 600 clamp(2.8rem, 6cqw, 5.8rem)/.92 var(--font-display); letter-spacing: .025em; text-shadow: 0 0 34px rgba(242,184,75,.3); }
.hero-unlock-intro { max-width: 620px; margin: 0; color: #e7dfc8; font-size: clamp(.92rem, 1.35cqw, 1.08rem); line-height: 1.6; }
.hero-unlock-traits { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-unlock-traits span { padding: .42rem .7rem; border: 1px solid rgba(255,222,132,.26); border-radius: 999px; background: rgba(242,184,75,.08); color: #ffe9af; font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.hero-unlock-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: 0; }
.hero-unlock-stats > div { padding: .7rem .8rem; border: 1px solid rgba(173,204,202,.18); border-radius: 12px; background: rgba(3,11,24,.44); }
.hero-unlock-stats dt { color: #9cb5b4; font-size: .68rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.hero-unlock-stats dd { margin: .18rem 0 0; color: #fff3cf; font: 600 1.12rem/1.1 var(--font-display); }
.hero-unlock-actions { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: .65rem; }
.hero-unlock-actions .ghost-button { grid-column: 1 / -1; }
@keyframes hero-unlock-arrival { from { opacity: 0; transform: translateY(7%) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.hero-upgrade-reveal { position: fixed; z-index: 40; inset: 0; box-sizing: border-box; display: grid; grid-template-columns: minmax(300px,.92fr) minmax(500px,1.08fr); align-items: center; gap: clamp(.8rem,2.2cqw,2.5rem); padding: clamp(1rem,2.6cqw,2.75rem); overflow: hidden; background: radial-gradient(circle at 29% 48%, color-mix(in srgb, var(--hero-accent) 28%, transparent), transparent 30%), linear-gradient(132deg, #040a17, #152744 48%, #080d1a); }
.hero-upgrade-portrait { position: relative; z-index: 2; min-height: min(68cqh,720px); max-height: calc(100cqh - 2rem); display: grid; place-items: end center; }
.hero-upgrade-portrait img { position: relative; z-index: 1; width: min(100%,480px); max-height: 72cqh; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 34px 38px rgba(1,5,14,.74)) drop-shadow(0 0 30px color-mix(in srgb, var(--hero-accent) 38%, transparent)); animation: hero-upgrade-arrival .85s cubic-bezier(.18,.76,.24,1) both; }
.hero-upgrade-effects { position: absolute; z-index: 3; inset: 0; overflow: visible; pointer-events: none; }
.hero-upgrade-forging-impact { position: absolute; left: 50%; top: 40%; width: 1px; height: 1px; pointer-events: none; }
.hero-upgrade-pressure-plume,.hero-upgrade-impact-core,.hero-upgrade-light-sweep,.hero-upgrade-spark,.hero-upgrade-ember { position: absolute; left: 0; top: 0; pointer-events: none; mix-blend-mode: screen; }
.hero-upgrade-pressure-plume { width: 370px; height: 300px; margin: -150px -185px; opacity: 0; border-radius: 44% 56% 52% 48% / 58% 44% 56% 42%; background: radial-gradient(ellipse at 43% 48%,rgba(255,248,213,.76) 0 6%,rgba(255,200,76,.6) 15%,transparent 34%),radial-gradient(ellipse at 67% 38%,rgba(239,144,30,.56),transparent 40%),radial-gradient(ellipse at 34% 68%,rgba(186,79,12,.48),transparent 46%); filter: blur(7px) drop-shadow(0 0 42px rgba(244,161,37,.72)); animation: hero-upgrade-pressure-bloom 1.55s cubic-bezier(.13,.68,.19,1) both; }
.hero-upgrade-impact-core { width: 205px; height: 176px; margin: -88px -102px; opacity: 0; border-radius: 46% 54% 43% 57% / 55% 42% 58% 45%; background: radial-gradient(ellipse at 49% 48%,#fffef0 0 7%,#fff1a3 16%,rgba(255,191,58,.92) 31%,rgba(218,101,13,.58) 49%,transparent 70%); filter: blur(1px) drop-shadow(0 0 28px #ffd15d) drop-shadow(0 0 64px rgba(236,132,22,.74)); animation: hero-upgrade-impact-core 1.32s cubic-bezier(.08,.7,.17,1) both; }
.hero-upgrade-light-sweep { width: 430px; height: 52px; margin: -26px -215px; opacity: 0; border-radius: 50%; background: linear-gradient(90deg,transparent 3%,rgba(236,149,31,.08) 18%,rgba(255,212,104,.5) 38%,rgba(255,255,232,.94) 50%,rgba(255,212,104,.5) 62%,rgba(236,149,31,.08) 82%,transparent 97%); filter: blur(3px) drop-shadow(0 0 20px rgba(255,210,91,.84)); animation: hero-upgrade-light-sweep 1.15s ease-out both; }
.hero-upgrade-spark { --spark-mid-x: 0px; --spark-mid-y: -70px; --spark-end-x: 0px; --spark-end-y: 120px; --spark-reduced-x: 0px; --spark-reduced-y: 52px; --spark-delay: 0ms; --spark-turn: 180deg; --spark-reduced-turn: 79deg; width: 4px; height: 34px; margin: -17px -2px; opacity: 0; border-radius: 60% 60% 48% 48%; background: linear-gradient(180deg,rgba(255,255,237,.98),#ffe184 36%,rgba(242,145,28,.7) 72%,transparent); transform-origin: 50% 84%; filter: drop-shadow(0 0 5px #ffe298) drop-shadow(0 0 12px rgba(240,139,25,.86)); animation: hero-upgrade-ballistic-spark 1.68s var(--spark-delay) cubic-bezier(.12,.58,.2,1) both; }
.hero-upgrade-spark.spark-2 { width: 3px; height: 27px; margin: -13px -1px; }
.hero-upgrade-spark.spark-3 { width: 2px; height: 20px; margin: -10px -1px; }
.hero-upgrade-spark.spark-4 { width: 2px; height: 14px; margin: -7px -1px; }
.hero-upgrade-ember { --ember-x: 0px; --ember-y: 80px; --ember-reduced-x: 0px; --ember-reduced-y: 42px; --ember-delay: 0ms; width: 7px; height: 7px; margin: -3px; opacity: 0; border-radius: 50%; background: #fff2a8; box-shadow: 0 0 7px #ffd45f,0 0 16px rgba(230,107,14,.88); animation: hero-upgrade-floating-ember 1.72s var(--ember-delay) cubic-bezier(.16,.56,.24,1) both; }
.hero-upgrade-ember.ember-2 { width: 5px; height: 5px; }
.hero-upgrade-ember.ember-3 { width: 3px; height: 3px; }
@keyframes hero-upgrade-pressure-bloom { 0% { opacity: 0; transform: scale(.16) rotate(-7deg); } 12% { opacity: .94; } 55% { opacity: .62; transform: scale(1.04) rotate(2deg); } 100% { opacity: 0; transform: scale(1.46) rotate(5deg); filter: blur(15px) drop-shadow(0 0 36px rgba(226,117,16,.3)); } }
@keyframes hero-upgrade-impact-core { 0% { opacity: 0; transform: scale(.12); } 9% { opacity: 1; transform: scale(.7); } 24% { opacity: .96; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.38); filter: blur(10px) drop-shadow(0 0 24px rgba(236,132,22,.28)); } }
@keyframes hero-upgrade-light-sweep { 0% { opacity: 0; transform: scaleX(.08) scaleY(.45); } 14% { opacity: .96; } 50% { opacity: .5; transform: scaleX(1) scaleY(1); } 100% { opacity: 0; transform: scaleX(1.22) scaleY(.3); } }
@keyframes hero-upgrade-ballistic-spark { 0% { opacity: 0; transform: translate(0,0) rotate(0) scale(.25); } 9% { opacity: 1; } 52% { opacity: .9; transform: translate(var(--spark-mid-x),var(--spark-mid-y)) rotate(calc(var(--spark-turn) * .58)) scale(.88); } 100% { opacity: 0; transform: translate(var(--spark-end-x),var(--spark-end-y)) rotate(var(--spark-turn)) scale(.18); } }
@keyframes hero-upgrade-floating-ember { 0% { opacity: 0; transform: translate(0,0) scale(.3); } 18% { opacity: .94; } 74% { opacity: .68; } 100% { opacity: 0; transform: translate(var(--ember-x),var(--ember-y)) scale(.12); } }
.hero-upgrade-copy { position: relative; z-index: 2; box-sizing: border-box; width: 100%; max-width: 720px; max-height: calc(100cqh - 2rem); display: grid; gap: clamp(.42rem,.95cqh,.72rem); padding: clamp(.78rem,1.6cqh,1.3rem) clamp(.9rem,1.7cqw,1.4rem); overflow: hidden; border: 1px solid color-mix(in srgb, var(--hero-accent) 42%, transparent); border-radius: 22px; background: linear-gradient(145deg,rgba(26,43,67,.91),rgba(5,14,29,.94)); box-shadow: 0 32px 90px rgba(1,5,14,.58), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(20px); animation: hero-upgrade-copy-in .7s .08s ease-out both; }
.hero-upgrade-result { display: grid; gap: clamp(.32rem,.7cqh,.56rem); }
.hero-upgrade-copy .eyebrow { margin: 0; color: #f8d87f; }
.hero-upgrade-copy h2 { margin: 0; color: #fff2c9; font: 600 clamp(2.15rem,5.4cqh,4.25rem)/.94 var(--font-display); text-shadow: 0 0 30px color-mix(in srgb, var(--hero-accent) 32%, transparent); }
.hero-upgrade-primary { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: .65rem; padding: .56rem .76rem; border: 1px solid color-mix(in srgb, var(--hero-accent) 44%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--hero-accent) 11%, rgba(3,11,24,.76)); }
.hero-upgrade-primary span { color: #d9e5df; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.hero-upgrade-primary strong { color: #fff0b4; font: 600 1.58rem/1 var(--font-display); }
.hero-upgrade-primary b { color: #fff; font: 600 1.08rem/1 var(--font-display); }
.hero-upgrade-intro { margin: 0; color: #d6e2df; font-size: .76rem; line-height: 1.32; }
.hero-upgrade-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .38rem; margin: 0; }
.hero-upgrade-stats > div { min-width: 0; padding: .46rem .54rem; border: 1px solid rgba(173,204,202,.2); border-radius: 10px; background: rgba(3,11,24,.56); }
.hero-upgrade-stats dt { color: #9eb7b5; font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.hero-upgrade-stats dd { display: flex; align-items: baseline; justify-content: space-between; gap: .34rem; margin: .16rem 0 0; }
.hero-upgrade-stats dd strong { color: #fff0b4; font: 600 1.05rem/1 var(--font-display); }
.hero-upgrade-stats dd span { min-width: 0; color: #d4dfdc; font-size: .68rem; white-space: nowrap; }
.hero-upgrade-next { display: grid; gap: .38rem; padding: .55rem .65rem; border: 1px solid rgba(248,216,127,.3); border-radius: 13px; background: linear-gradient(135deg,rgba(242,184,75,.1),rgba(3,11,24,.62)); }
.hero-upgrade-next-heading { display: flex; align-items: end; justify-content: space-between; gap: .8rem; }
.hero-upgrade-next-heading h3 { margin: 0; color: #fff3c9; font: 600 1rem/1.08 var(--font-display); text-align: right; }
.hero-upgrade-resources { display: grid; grid-template-columns: repeat(auto-fit,minmax(178px,1fr)); gap: .35rem; }
.hero-upgrade-resource { display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: .42rem; padding: .38rem .48rem; border: 1px solid rgba(173,204,202,.2); border-radius: 10px; background: rgba(3,11,24,.62); }
.hero-upgrade-resource.missing { border-color: rgba(241,119,107,.48); }
.hero-upgrade-resource .cost-icon { width: 28px; height: 28px; }
.hero-upgrade-resource-copy { display: grid; gap: .18rem; }
.hero-upgrade-resource-copy strong { color: #fff0b4; font-size: .72rem; }
.hero-upgrade-resource-copy small { color: #c7d8d4; font-size: .68rem; }
.hero-upgrade-maximum { margin: 0; color: #f8d87f; font-weight: 800; }
.hero-upgrade-next-status { margin: 0; color: #c8d8d5; font-size: .68rem; line-height: 1.25; }
.hero-upgrade-next-status.state-available { color: #9ee7c8; }
.hero-upgrade-next-status.state-insufficient, .hero-upgrade-next-status.state-locked { color: #ffd0a3; }
.hero-upgrade-actions { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: .65rem; }
.hero-upgrade-actions > button { width: 100%; min-height: 44px; padding: .62rem .8rem; }
.hero-upgrade-repeat.unavailable { opacity: .5; cursor: not-allowed; }
.hero-upgrade-reveal[aria-busy="true"] .hero-upgrade-actions { opacity: .68; pointer-events: none; }
.hero-upgrade-continue { margin-top: 0; }
@keyframes hero-upgrade-arrival { from { opacity: 0; transform: translateY(8%) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hero-upgrade-copy-in { from { opacity: .45; transform: translateX(3%); } to { opacity: 1; transform: translateX(0); } }
.hero-recruitment-reveal { position: fixed; z-index: 45; inset: 0; display: grid; grid-template-columns: minmax(300px,.9fr) minmax(430px,1.1fr); align-items: center; gap: clamp(1rem,4cqw,4.5rem); padding: clamp(2rem,5cqw,6rem); overflow: auto; background: radial-gradient(circle at 29% 48%,color-mix(in srgb,var(--hero-accent) 30%,transparent),transparent 30%),linear-gradient(132deg,#040a17,#152744 48%,#080d1a); }
.hero-recruitment-portrait { position: relative; z-index: 2; min-height: min(72cqh,760px); display: grid; place-items: end center; }
.hero-recruitment-portrait img { width: min(100%,520px); max-height: 76cqh; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 34px 38px rgba(1,5,14,.74)) drop-shadow(0 0 32px color-mix(in srgb,var(--hero-accent) 40%,transparent)); animation: hero-recruitment-arrival .92s cubic-bezier(.18,.76,.24,1) both; }
.hero-recruitment-copy { position: relative; z-index: 2; max-width: 690px; display: grid; gap: 1rem; padding: clamp(1.3rem,3cqw,2.5rem); border: 1px solid color-mix(in srgb,var(--hero-accent) 43%,transparent); border-radius: 26px; background: linear-gradient(145deg,rgba(26,43,67,.9),rgba(5,14,29,.93)); box-shadow: 0 32px 90px rgba(1,5,14,.58),inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(20px); animation: hero-recruitment-copy-in .72s .08s ease-out both; }
.hero-recruitment-copy .eyebrow { margin: 0; color: #f8d87f; }
.hero-recruitment-copy h2 { margin: 0; color: #fff2c9; font: 600 clamp(2.7rem,5cqw,5.2rem)/.94 var(--font-display); text-shadow: 0 0 30px color-mix(in srgb,var(--hero-accent) 32%,transparent); }
.hero-recruitment-primary { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: .8rem; padding: .85rem 1rem; border: 1px solid color-mix(in srgb,var(--hero-accent) 44%,transparent); border-radius: 15px; background: color-mix(in srgb,var(--hero-accent) 11%,rgba(3,11,24,.78)); }
.hero-recruitment-primary span { color: #d9e5df; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.hero-recruitment-primary strong { color: #fff0b4; font: 600 2rem/1 var(--font-display); }
.hero-recruitment-primary b { color: #fff; font: 600 1.28rem/1 var(--font-display); }
.hero-recruitment-intro { margin: 0; color: #d6e2df; line-height: 1.55; }
.hero-recruitment-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin: 0; }
.hero-recruitment-stats > div { padding: .72rem .82rem; border: 1px solid rgba(173,204,202,.2); border-radius: 12px; background: rgba(3,11,24,.52); }
.hero-recruitment-stats dt { color: #9eb7b5; font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.hero-recruitment-stats dd { margin: .24rem 0 0; color: #fff0b4; font: 600 1.18rem/1.1 var(--font-display); }
.hero-recruitment-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
@keyframes hero-recruitment-arrival { from { opacity: 0; transform: translateY(8%) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hero-recruitment-copy-in { from { opacity: .42; transform: translateX(3%); } to { opacity: 1; transform: translateX(0); } }
.report-layout > .battle-log { max-height: 360px; }
.battle-hud { position: relative; z-index: 2; min-height: 0; display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem; overflow-y: auto; border-left: 1px solid rgba(151,218,211,.28); background: radial-gradient(circle at 30% 0, rgba(69,214,197,.1), transparent 35%), linear-gradient(180deg, rgba(13,32,60,.98), rgba(7,19,38,.98)); box-shadow: -18px 0 42px rgba(2,8,18,.22); scrollbar-color: rgba(69,214,197,.45) rgba(4,13,28,.35); }
.battle-hud h2 { margin: 0; font: 600 1.45rem/1.2 var(--font-display); }
.battle-mode-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.battle-flow-indicator { flex: none; margin-top: .2rem; padding: .22rem .42rem; border: 1px solid rgba(171,218,213,.24); border-radius: 999px; color: #9eb7ba; font-size: .69rem; font-weight: 850; letter-spacing: .09em; }
.battle-flow-indicator.running { border-color: rgba(69,214,197,.48); background: rgba(69,214,197,.11); color: #baf7ed; box-shadow: 0 0 15px rgba(69,214,197,.12); }
.battle-speed-panel { display: grid; gap: .55rem; padding: .72rem; border: 1px solid rgba(171,218,213,.28); border-radius: 12px; background: rgba(4,17,34,.58); }
.battle-speed-panel > strong { color: #e9f4ed; font: 600 1rem/1.15 var(--font-display); }
.battle-speed-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.battle-speed-actions button { min-height: 42px; border: 1px solid rgba(171,218,213,.3); border-radius: 10px; background: rgba(19,45,73,.72); color: #dce9e5; font-weight: 800; }
.battle-speed-actions .battle-speed-button[aria-pressed="true"] { border-color: rgba(242,216,138,.68); background: linear-gradient(145deg, rgba(72,87,102,.88), rgba(37,64,82,.9)); color: #fff0c6; box-shadow: 0 0 0 2px rgba(242,184,75,.12), inset 0 1px rgba(255,255,255,.08); }
.battle-speed-actions .battle-finish-button { grid-column: 1 / -1; border-color: rgba(233,103,90,.5); background: rgba(105,36,43,.48); color: #ffd1ca; }
.battle-command-panel { display: grid; gap: .55rem; padding: .72rem; border: 1px solid rgba(69,214,197,.3); border-radius: 12px; background: linear-gradient(145deg, rgba(24,57,83,.68), rgba(4,17,34,.72)); }
.battle-command-panel > strong { color: #e9f4ed; font: 600 1rem/1.15 var(--font-display); }
.battle-command-panel > small { color: #9eb9bc; font-size: .7rem; line-height: 1.35; }
.battle-command-panel.automatic { border-color: rgba(242,184,75,.3); }
.battle-command-panel.error { border-color: rgba(233,103,90,.48); }
.battle-recovery-panel { background: rgba(91,25,31,.44); }
.battle-recovery-panel > p { margin: .1rem 0 0; line-height: 1.4; }
.battle-recovery-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; margin-top: .25rem; }
.battle-log { flex: 1; min-height: 190px; max-height: 290px; margin: 0; padding: .8rem; overflow: auto; list-style: none; border: 1px solid var(--line); border-radius: 10px; background: rgba(3,11,25,.48); font-size: .78rem; }
.battle-log li { position: relative; padding: .48rem .5rem .48rem 1rem; border-bottom: 1px solid rgba(172,197,204,.11); color: #d7e7e4; font-size: .84rem; line-height: 1.45; }
.battle-log li::before { content: ""; position: absolute; left: .1rem; top: .86rem; width: 5px; height: 5px; border-radius: 50%; background: #7897a1; box-shadow: 0 0 8px currentColor; }
.battle-log .battle-log-damage { color: #ffd0c7; }
.battle-log .battle-log-damage::before,.battle-log .battle-log-defeat::before { background: #ef7667; }
.battle-log .battle-log-heal { color: #bff4d6; }
.battle-log .battle-log-heal::before { background: #6fe0a2; }
.battle-log .battle-log-barrier { color: #c7eaff; }
.battle-log .battle-log-barrier::before { background: #75c9ef; }
.battle-log .battle-log-temporal_shift,.battle-log .battle-log-temporal_objective { color: #edd8ff; background: rgba(135,83,190,.11); }
.battle-log .battle-log-temporal_shift::before,.battle-log .battle-log-temporal_objective::before { background: #ca9cff; }
.technique-actions { display: grid; gap: .5rem; }
.technique-actions button { text-align: left; }
.technique-actions button.queued { box-shadow: 0 0 0 2px rgba(242,184,75,.2), 0 8px 24px rgba(242,184,75,.18); }
.battle-summary { padding: .8rem; border: 1px solid rgba(242,184,75,.32); border-radius: 10px; background: rgba(242,184,75,.08); }
.unit-fallback { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; font-size: .74rem; }
.unit-fallback ul { margin: .25rem 0; padding-left: 1rem; }

.toast-region { position: fixed; z-index: 200; right: 1rem; top: 5.5rem; display: grid; gap: .65rem; width: 360px; }
.toast { padding: .85rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--resonance); border-radius: 10px; background: rgba(10,26,49,.96); box-shadow: var(--shadow); animation: toast-in .2s ease-out; }
.toast.error { border-left-color: var(--danger); }
.battle-recovery-toast { display: grid; gap: .55rem; }
.battle-recovery-toast p { margin: 0; color: #dbe8e4; line-height: 1.42; }
.battle-recovery-toast button { justify-self: start; }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } }

/* Gilde presentation 0.6.9 · assets 0.6.8 */
.game-view-guilds { --view-background: url("/assets/images/guilds/guild-hall-0.6.8.webp"); --view-position: center top; }
.game-view-guilds::before { background: linear-gradient(180deg,rgba(2,9,19,.54),rgba(3,12,25,.3) 30%,rgba(2,9,19,.78)),linear-gradient(90deg,rgba(2,9,19,.54),transparent 46%,rgba(2,9,19,.42)); backdrop-filter: saturate(.9) brightness(.78); }
.game-view-guilds .game-view-header { border-bottom-color: rgba(242,184,75,.3); background: linear-gradient(180deg,rgba(4,13,27,.98),rgba(10,27,45,.94)); box-shadow: 0 18px 54px rgba(0,0,0,.46),inset 0 -1px rgba(69,214,197,.08); }
.game-view-guilds .game-view-body { max-width: 1580px; padding: 1.2rem clamp(1rem,3cqw,2.6rem) 2.6rem; }
.game-view-guilds .game-view-body::before { background: radial-gradient(circle at 22% 4%,rgba(69,214,197,.13),transparent 34%),radial-gradient(circle at 84% 16%,rgba(242,184,75,.12),transparent 29%),linear-gradient(180deg,rgba(2,9,20,.04),rgba(2,9,20,.5)); }
.guild-body { display: grid; gap: 1rem; isolation: isolate; }
.guild-discovery-grid { min-width: 0; display: grid; grid-template-columns: minmax(0,1.12fr) minmax(430px,.88fr); align-items: start; gap: 1rem; }
.guild-discovery-stage .guild-hero { padding: clamp(.9rem,1.7cqw,1.4rem); }
.guild-discovery-stage .guild-hero h2 { font-size: clamp(1.7rem,2.6cqw,2.75rem); }
.guild-pact-stage { position: relative; min-width: 0; min-height: clamp(330px,40cqh,440px); display: grid; grid-template-columns: minmax(0,2fr) minmax(320px,1fr); overflow: hidden; border: 1px solid rgba(205,226,216,.29); border-radius: 4px 28px 4px 28px; background: radial-gradient(ellipse at 82% 88%,rgba(242,184,75,.12),transparent 27%),radial-gradient(circle at 76% 35%,rgba(69,214,197,.09),transparent 32%),radial-gradient(circle at 18% 16%,rgba(69,214,197,.18),transparent 34%),linear-gradient(135deg,rgba(7,24,40,.97),rgba(4,14,28,.91)); box-shadow: 0 30px 70px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.08),inset 0 -1px rgba(242,184,75,.08); }
.guild-discovery-stage { min-height: clamp(280px,33cqh,350px); }
.guild-pact-stage::before { content: ""; position: absolute; z-index: 3; left: 0; right: 34%; top: 0; height: 2px; pointer-events: none; background: linear-gradient(90deg,#45d6c5,rgba(242,184,75,.7),transparent); box-shadow: 0 0 18px rgba(69,214,197,.35); }
.guild-pact-stage::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(112deg,transparent 0 62%,rgba(242,184,75,.08) 76%,transparent 91%); }
.guild-orc-stage { position: relative; z-index: 2; min-width: 0; min-height: 100%; height: 100%; margin: 0; overflow: hidden; isolation: isolate; background: transparent; -webkit-mask-image: linear-gradient(90deg,transparent 0,rgba(0,0,0,.72) 12%,#000 28%); mask-image: linear-gradient(90deg,transparent 0,rgba(0,0,0,.72) 12%,#000 28%); }
.guild-orc-stage::before { content: ""; position: absolute; z-index: 0; left: 8%; right: 4%; bottom: 3%; height: 13%; border: 1px solid rgba(242,184,75,.2); border-radius: 50%; background: radial-gradient(ellipse,rgba(242,184,75,.2),rgba(69,214,197,.06) 38%,transparent 72%); filter: blur(5px); animation: guild-forge-pulse 10s ease-in-out infinite; }
.guild-orc-source,.guild-orc-rig { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; display: block; }
.guild-orc-source { object-fit: contain; object-position: center bottom; filter: drop-shadow(0 24px 18px rgba(0,0,0,.52)) drop-shadow(0 0 15px rgba(69,214,197,.13)); transition: opacity .24s ease; }
.guild-orc-rig { opacity: 0; filter: drop-shadow(0 24px 18px rgba(0,0,0,.52)) drop-shadow(0 0 15px rgba(69,214,197,.13)); transition: opacity .24s ease; }
.guild-orc-stage.is-rig-ready .guild-orc-source { opacity: 0; }
.guild-orc-stage.is-rig-ready .guild-orc-rig { opacity: 1; }
.guild-orc-pact-rings { position: absolute; z-index: 0; inset: 8% 2% 5%; pointer-events: none; animation: guild-pact-rings 10s ease-in-out infinite; }
.guild-orc-pact-rings span,.guild-orc-pact-rings i,.guild-orc-pact-rings b { position: absolute; inset: 12% 3% 8%; border: 1px solid rgba(69,214,197,.19); border-radius: 50%; transform: perspective(620px) rotateX(68deg) rotateZ(8deg); box-shadow: 0 0 26px rgba(69,214,197,.08),inset 0 0 22px rgba(69,214,197,.05); }
.guild-orc-pact-rings i { inset: 25% 12% 3%; border-color: rgba(242,184,75,.22); transform: perspective(620px) rotateX(72deg) rotateZ(-13deg); }
.guild-orc-pact-rings b { inset: 4% 24% 22%; border-style: dashed; border-color: rgba(190,225,219,.17); transform: rotate(18deg); }
.guild-orc-embers { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.guild-orc-embers i { --ember-x: 12%; --ember-delay: 0s; --ember-size: 3px; position: absolute; left: var(--ember-x); bottom: -4%; width: var(--ember-size); height: var(--ember-size); border-radius: 50%; background: #ffd47b; box-shadow: 0 0 8px #f2b84b; opacity: 0; animation: guild-ember-rise 5s var(--ember-delay) linear infinite; }
.guild-orc-embers i:nth-child(2) { --ember-x: 27%; --ember-delay: -1.6s; --ember-size: 2px; }.guild-orc-embers i:nth-child(3) { --ember-x: 43%; --ember-delay: -3.1s; }.guild-orc-embers i:nth-child(4) { --ember-x: 58%; --ember-delay: -.8s; --ember-size: 2px; }.guild-orc-embers i:nth-child(5) { --ember-x: 69%; --ember-delay: -4.2s; }.guild-orc-embers i:nth-child(6) { --ember-x: 79%; --ember-delay: -2.4s; --ember-size: 2px; }.guild-orc-embers i:nth-child(7) { --ember-x: 88%; --ember-delay: -3.7s; }.guild-orc-embers i:nth-child(8) { --ember-x: 95%; --ember-delay: -1.1s; --ember-size: 2px; }
@keyframes guild-forge-pulse { 0%,100% { opacity: .45; transform: scaleX(.9); } 50% { opacity: .86; transform: scaleX(1.08); } }
@keyframes guild-pact-rings { 0%,100% { opacity: .48; transform: scale(.985) rotate(0); } 50% { opacity: .9; transform: scale(1.025) rotate(1deg); } }
@keyframes guild-ember-rise { 0% { opacity: 0; transform: translate3d(0,0,0) scale(.6); } 14% { opacity: .9; } 72% { opacity: .45; } 100% { opacity: 0; transform: translate3d(18px,-360px,0) scale(1.35); } }
.guild-loading,.guild-empty { min-height: 48cqh; display: grid; place-items: center; align-content: center; gap: .7rem; text-align: center; }
.guild-loading h2,.guild-empty h2 { margin: 0; font: 600 clamp(1.7rem,3cqw,2.8rem)/1.08 var(--font-display); color: #f4e8c8; }
.guild-empty.compact { min-height: 180px; padding: 1.3rem; border: 1px dashed rgba(171,218,213,.25); border-radius: 16px; }
.guild-emblem { --guild-primary: #45d6c5; --guild-secondary: #f2b84b; position: relative; flex: none; width: 76px; height: 88px; display: inline-grid; place-items: center; border: 1px solid color-mix(in srgb,var(--guild-secondary) 62%,transparent); border-radius: 38px 38px 18px 18px; background: radial-gradient(circle at 50% 28%, color-mix(in srgb,var(--guild-primary) 24%,transparent), transparent 42%),linear-gradient(165deg,rgba(22,48,70,.98),rgba(4,14,29,.98)); box-shadow: 0 18px 36px rgba(1,7,17,.42),inset 0 1px rgba(255,255,255,.08),0 0 24px color-mix(in srgb,var(--guild-primary) 16%,transparent); }
.guild-emblem::before,.guild-emblem::after { content: ""; position: absolute; }
.guild-emblem::after { inset: 10px; border: 1px solid color-mix(in srgb,var(--guild-primary) 38%,transparent); border-radius: inherit; }
.guild-emblem.shape-soglia::before { width: 26px; height: 38px; border: 5px solid var(--guild-primary); border-bottom: 0; border-radius: 18px 18px 0 0; box-shadow: inset 0 0 0 3px rgba(3,12,25,.7),0 0 14px color-mix(in srgb,var(--guild-primary) 35%,transparent); }
.guild-emblem.shape-astrolabio::before { width: 34px; height: 34px; border: 3px solid var(--guild-primary); border-radius: 50%; box-shadow: inset 0 0 0 7px rgba(3,12,25,.78),inset 0 0 0 9px var(--guild-secondary),0 0 14px color-mix(in srgb,var(--guild-primary) 35%,transparent); }
.guild-emblem.shape-onda::before { width: 40px; height: 20px; border-top: 6px solid var(--guild-primary); border-bottom: 4px solid var(--guild-secondary); border-radius: 50%; transform: rotate(-12deg); }
.guild-emblem.shape-fronda::before { width: 23px; height: 42px; border: 4px solid var(--guild-primary); border-radius: 100% 0 100% 0; transform: rotate(34deg); box-shadow: inset 7px -7px color-mix(in srgb,var(--guild-secondary) 45%,transparent); }
.guild-emblem.shape-cristallo::before { width: 28px; height: 38px; background: linear-gradient(135deg,var(--guild-primary),color-mix(in srgb,var(--guild-secondary) 72%,#fff)); clip-path: polygon(50% 0,100% 34%,78% 100%,22% 100%,0 34%); box-shadow: 0 0 18px color-mix(in srgb,var(--guild-primary) 44%,transparent); }
.guild-emblem.shape-bastione::before { width: 38px; height: 38px; background: linear-gradient(145deg,var(--guild-secondary),var(--guild-primary)); clip-path: polygon(0 0,22% 0,22% 17%,40% 17%,40% 0,60% 0,60% 17%,78% 17%,78% 0,100% 0,100% 76%,50% 100%,0 76%); }
.guild-emblem.primary-turchese { --guild-primary:#45d6c5; }.guild-emblem.primary-oro { --guild-primary:#f2b84b; }.guild-emblem.primary-viola { --guild-primary:#9b78e8; }.guild-emblem.primary-corallo { --guild-primary:#ec7b6b; }.guild-emblem.primary-argento { --guild-primary:#bed0d4; }.guild-emblem.primary-verde { --guild-primary:#70bd87; }
.guild-emblem.secondary-turchese { --guild-secondary:#45d6c5; }.guild-emblem.secondary-oro { --guild-secondary:#f2b84b; }.guild-emblem.secondary-viola { --guild-secondary:#9b78e8; }.guild-emblem.secondary-corallo { --guild-secondary:#ec7b6b; }.guild-emblem.secondary-argento { --guild-secondary:#bed0d4; }.guild-emblem.secondary-verde { --guild-secondary:#70bd87; }
.guild-hero,.guild-command-header { position: relative; z-index: 2; min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr); align-content: center; align-items: center; gap: clamp(.8rem,2cqw,1.5rem); padding: clamp(1.2rem,2.5cqw,2rem); background: transparent; }
.guild-hero h2,.guild-command-header h2 { margin: .18rem 0 .45rem; color: #f9e9bd; font: 600 clamp(1.8rem,3.1cqw,3.15rem)/1 var(--font-display); }
.guild-hero p,.guild-command-header p { margin: 0; color: #c9dbd8; line-height: 1.55; }
.guild-hero-mark .guild-emblem,.guild-command-identity > .guild-emblem { width: 96px; height: 112px; }
.guild-command-identity { display: contents; }
.guild-eligibility,.guild-command-metrics,.guild-card-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; margin: 0; }
.guild-eligibility > div,.guild-command-metrics > div,.guild-card-metrics > div { min-width: 0; padding: .65rem .72rem; border: 1px solid rgba(171,218,213,.17); border-radius: 11px; background: rgba(3,13,27,.45); }
.guild-eligibility dt,.guild-command-metrics dt,.guild-card-metrics dt { color: #91acab; font-size: .67rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.guild-eligibility dd,.guild-command-metrics dd,.guild-card-metrics dd { margin: .23rem 0 0; color: #fff0c3; font: 600 1.02rem/1.15 var(--font-display); overflow-wrap: anywhere; }
.guild-command-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
.guild-eligibility,.guild-command-metrics { grid-column: 1/-1; }
.guild-section { position: relative; isolation: isolate; display: grid; gap: 1rem; overflow: hidden; padding: 1.15rem; border: 1px solid rgba(190,225,219,.24); border-left: 2px solid rgba(242,184,75,.6); border-radius: 4px 20px 4px 20px; background: linear-gradient(145deg,rgba(12,35,56,.9),rgba(4,16,31,.91)); box-shadow: 0 20px 48px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.055); backdrop-filter: blur(14px) saturate(1.08); }
.guild-section::before,.guild-panel::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(circle at 92% 4%,rgba(242,184,75,.09),transparent 27%),linear-gradient(115deg,rgba(69,214,197,.055),transparent 38%); }
.guild-section-heading,.guild-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.guild-section-heading h2,.guild-panel-heading h2 { margin: .12rem 0 0; color: #f3e5bf; font: 600 1.55rem/1.15 var(--font-display); }
.guild-section-heading > p { max-width: 720px; margin: .15rem 0 0; color: #aebfbe; line-height: 1.5; }
.guild-card-grid,.guild-directory { display: grid; grid-template-columns: repeat(auto-fit,minmax(270px,1fr)); gap: .8rem; }
.guild-filter-form { display: grid; grid-template-columns: minmax(220px,1.3fr) minmax(150px,.75fr) minmax(170px,.85fr); align-items: end; gap: .7rem; padding: .8rem; border: 1px solid rgba(171,218,213,.2); border-radius: 3px 14px 3px 14px; background: linear-gradient(145deg,rgba(2,12,24,.7),rgba(14,37,54,.58)); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.guild-filter-form .field { min-width: 0; }.guild-checkbox { grid-column: 1 / 3; min-width: 0; min-height: 46px; display: flex; align-items: center; gap: .62rem; padding: .25rem .15rem; color: #d1dfdc; font-size: .82rem; line-height: 1.35; font-weight: 780; }.guild-checkbox input { flex: 0 0 20px; width: 20px; height: 20px; accent-color: #45d6c5; }.guild-filter-form > .secondary-button { grid-column: 3; min-width: 148px; justify-self: stretch; }
.guild-card { position: relative; display: grid; align-content: start; gap: .72rem; min-width: 0; overflow: hidden; padding: 1rem; border: 1px solid rgba(171,218,213,.25); border-bottom-color: rgba(242,184,75,.32); border-radius: 3px 17px 3px 17px; background: radial-gradient(circle at 8% 9%,rgba(69,214,197,.12),transparent 32%),linear-gradient(145deg,rgba(7,24,42,.92),rgba(3,13,27,.88)); box-shadow: 0 14px 30px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.04); }
.guild-card::after { content: ""; position: absolute; top: 0; right: 0; width: 64px; height: 64px; pointer-events: none; background: linear-gradient(225deg,rgba(242,184,75,.18),transparent 48%); clip-path: polygon(38% 0,100% 0,100% 62%); }
.guild-card.is-locked { opacity: .76; }.guild-card-heading { display: flex; align-items: center; gap: .8rem; }.guild-card-heading .guild-emblem { width: 60px; height: 70px; }.guild-card h3 { margin: .12rem 0 0; color: #f5e9c8; font: 600 1.35rem/1.1 var(--font-display); }.guild-card > p { margin: 0; color: #bfd0cf; line-height: 1.45; }.guild-card-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }.guild-card-metrics dd { font-size: .9rem; }.guild-requirement { color: #e7d89e!important; font-size: .75rem; font-weight: 800; }
.guild-lock-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px dashed rgba(242,184,75,.3); border-radius: 15px; background: rgba(72,53,20,.12); }.guild-lock-card h3 { margin: 0 0 .3rem; color: #f3e5bd; }.guild-lock-card p { margin: 0; color: #b7c8c7; }.guild-lock-card .guild-emblem { width: 58px; height: 68px; }
.guild-form { display: grid; gap: .85rem; }.guild-form-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; }.guild-form .field { min-width: 0; }.guild-form textarea { resize: vertical; }.guild-emblem-preview { display: flex; align-items: center; gap: .8rem; color: #aebfbe; }.guild-emblem-preview .guild-emblem { width: 58px; height: 68px; }
.guild-dashboard { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(330px,.65fr); align-items: start; gap: 1rem; }.guild-dashboard-main,.guild-dashboard-side { display: grid; gap: 1rem; min-width: 0; }.guild-panel { position: relative; isolation: isolate; min-width: 0; display: grid; gap: .8rem; overflow: hidden; padding: 1rem; border: 1px solid rgba(190,225,219,.23); border-left: 2px solid rgba(69,214,197,.48); border-radius: 4px 18px 4px 18px; background: linear-gradient(145deg,rgba(10,31,52,.93),rgba(3,14,28,.92)); box-shadow: 0 18px 42px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(14px) saturate(1.08); }.guild-activity-panel { border-left-color: rgba(242,184,75,.7); }.guild-chat-panel { background: linear-gradient(150deg,rgba(8,31,49,.95),rgba(2,12,25,.94)); }.guild-members-panel { border-left-color: rgba(155,120,232,.58); }.guild-recruitment-panel { border-left-color: rgba(112,189,135,.58); }.guild-governance-panel { border-left-color: rgba(190,208,212,.45); }.guild-panel > p { margin: 0; color: #bdd0cf; line-height: 1.5; }.guild-panel-heading > strong { color: #f9dfa0; font: 600 1.3rem/1 var(--font-display); }
.guild-progress-track { height: 14px; overflow: hidden; border: 1px solid rgba(171,218,213,.24); border-radius: 999px; background: rgba(2,10,23,.7); }.guild-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#2aa99b,#f2b84b); box-shadow: 0 0 16px rgba(69,214,197,.32); transition: width .35s ease; }.guild-milestones { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; }.guild-milestone { display: grid; gap: .35rem; padding: .7rem; border: 1px solid rgba(171,218,213,.16); border-radius: 12px; background: rgba(3,14,29,.55); }.guild-milestone.reached { border-color: rgba(242,184,75,.4); background: rgba(91,67,20,.18); }.guild-milestone strong { color: #f6e6b8; font: 600 1.25rem/1 var(--font-display); }.guild-milestone span { color: #afc2c1; font-size: .72rem; }
.guild-chat-feed { min-height: 280px; max-height: 460px; display: grid; align-content: start; gap: .55rem; padding: .65rem; overflow-y: auto; border: 1px solid rgba(171,218,213,.18); border-radius: 13px; background: rgba(2,10,23,.52); }.guild-chat-message { display: grid; gap: .28rem; padding: .65rem .72rem; border: 1px solid rgba(171,218,213,.13); border-radius: 11px; background: rgba(16,39,61,.62); }.guild-chat-message header { display: flex; justify-content: space-between; gap: .8rem; }.guild-chat-message header strong { color: #f0dfb7; }.guild-chat-message time { color: #87a4a6; font-size: .68rem; }.guild-chat-message p { margin: 0; color: #d6e1de; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.42; }.guild-chat-message.status-deleted,.guild-chat-message.status-moderated { opacity: .7; font-style: italic; }.guild-chat-actions { display: flex; flex-wrap: wrap; gap: .5rem; }.guild-chat-actions button { padding: 0; min-height: 0; font-size: .67rem; }.guild-chat-composer { display: grid; gap: .45rem; }.guild-chat-composer textarea { min-height: 76px; resize: vertical; }.guild-chat-composer > div { display: flex; justify-content: space-between; align-items: center; gap: .7rem; }.guild-chat-composer small { color: #8da9aa; }
.guild-member-list { display: grid; gap: .48rem; }.guild-member { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .65rem; align-items: center; padding: .65rem; border: 1px solid rgba(171,218,213,.14); border-radius: 12px; background: rgba(3,14,28,.47); }.guild-member-avatar { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(242,184,75,.35); border-radius: 50%; background: rgba(242,184,75,.09); color: #ffe7aa; font-weight: 900; }.guild-member-copy { min-width: 0; display: grid; }.guild-member-copy strong { color: #eaddb9; overflow-wrap: anywhere; }.guild-member-copy span,.guild-member-copy small { color: #98b1b0; font-size: .7rem; }.guild-member-actions { grid-column: 1/-1; display: flex; align-items: end; flex-wrap: wrap; gap: .5rem; }.guild-member-actions .field { flex: 1; min-width: 160px; }.guild-member-actions label { font-size: .66rem; }.danger-text { color: #ff9d94!important; }
.guild-invite-form,.guild-settings { display: grid; gap: .65rem; }.guild-application-list { display: grid; gap: .55rem; }.guild-application-list article { display: grid; gap: .5rem; padding: .65rem; border: 1px solid rgba(171,218,213,.14); border-radius: 11px; }.guild-application-list article > div:first-child { display: grid; }.guild-application-list small { color: #9bb1b1; }.guild-actions { display: flex; flex-wrap: wrap; gap: .55rem; }.guild-settings summary { cursor: pointer; color: #f0dfb7; font-weight: 850; }.guild-settings .guild-form { margin-top: .8rem; }.danger-outline { border-color: rgba(236,123,107,.48)!important; color: #ffc2b8!important; }
.guild-event-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }.guild-event-list li { display: flex; justify-content: space-between; gap: .7rem; padding: .65rem .75rem; border: 1px solid rgba(171,218,213,.13); border-radius: 10px; background: rgba(3,14,28,.43); }.guild-event-list strong { color: #d9e4df; font-size: .76rem; }.guild-event-list time { color: #88a6a6; font-size: .68rem; }
@container avenorys-stage (max-width: 1120px) { .guild-pact-stage { grid-template-columns: minmax(0,1.55fr) minmax(290px,.65fr); }.guild-command-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }.guild-dashboard,.guild-discovery-grid { grid-template-columns: 1fr; }.guild-form-grid,.guild-filter-form { grid-template-columns: repeat(2,minmax(0,1fr)); }.guild-filter-form .field:first-child { grid-column: 1 / -1; }.guild-checkbox,.guild-filter-form > .secondary-button { grid-column: auto; } }
@container avenorys-stage (max-width: 720px) { .game-view-guilds .game-view-body { padding: .75rem; }.guild-pact-stage { min-height: 390px; grid-template-columns: 1fr; }.guild-orc-stage { position: absolute; inset: 0 0 0 42%; opacity: .32; -webkit-mask-image: linear-gradient(90deg,transparent,#000 42%); mask-image: linear-gradient(90deg,transparent,#000 42%); }.guild-hero,.guild-command-header { grid-template-columns: 1fr; text-align: left; background: linear-gradient(90deg,rgba(6,22,39,.96),rgba(6,22,39,.72) 72%,transparent); }.guild-hero-mark .guild-emblem,.guild-command-identity > .guild-emblem { width: 72px; height: 84px; }.guild-command-identity { display: grid; grid-template-columns: auto 1fr; }.guild-eligibility,.guild-command-metrics,.guild-card-metrics,.guild-milestones,.guild-form-grid,.guild-filter-form { grid-template-columns: 1fr; }.guild-filter-form .field:first-child,.guild-checkbox,.guild-filter-form > .secondary-button { grid-column: auto; }.guild-section-heading,.guild-panel-heading { flex-direction: column; }.guild-chat-feed { max-height: 380px; } }
@media (prefers-reduced-motion: reduce) { .guild-progress-track span { transition: none; }.guild-orc-stage::before,.guild-orc-pact-rings,.guild-orc-embers i { animation: none; } }
.reduce-motion .guild-orc-stage::before,.reduce-motion .guild-orc-pact-rings,.reduce-motion .guild-orc-embers i { animation: none; }

.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.choice-card { min-height: 230px; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(31,55,100,.42); }
.choice-card h3 { color: var(--gold-soft); font: 600 1.25rem/1.2 var(--font-display); }
.choice-card p { color: var(--muted); font-size: .85rem; }

.game-view-routes .game-view-body { max-width: none; display: grid; grid-template-rows: auto auto minmax(0,1fr); padding: 1rem 1.5rem 1.5rem; overflow: hidden; }
.campaign-chapter-navigation { display: flex; gap: .42rem; width: 100%; padding: .16rem .1rem .55rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(69,214,197,.42) rgba(4,13,28,.28); }
.campaign-chapter-button { position: relative; flex: 1 0 54px; min-width: 54px; height: 38px; padding: 0; border: 1px solid rgba(171,218,213,.24); border-radius: 9px; background: rgba(8,25,47,.78); color: #9fb5b8; font-size: .7rem; font-weight: 850; letter-spacing: .08em; }
.campaign-chapter-button::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 5px; height: 2px; border-radius: 4px; background: rgba(145,167,173,.22); }
.campaign-chapter-button.completed { border-color: rgba(242,184,75,.42); color: var(--gold-soft); }
.campaign-chapter-button.completed::after { background: var(--gold); }
.campaign-chapter-button.active::after { background: var(--resonance); box-shadow: 0 0 8px rgba(69,214,197,.58); }
.campaign-chapter-button[aria-pressed="true"] { border-color: rgba(242,216,138,.82); background: linear-gradient(145deg, rgba(52,72,88,.94), rgba(18,47,67,.96)); color: #fff0c6; box-shadow: 0 0 0 2px rgba(242,184,75,.12); }
.campaign-chapter-copy { min-height: 58px; display: grid; grid-template-columns: minmax(290px, auto) minmax(0, 1fr); align-items: end; gap: 1.2rem; padding: .35rem .2rem .85rem; }
.campaign-chapter-copy .eyebrow { margin: 0 0 .18rem; }
.campaign-chapter-copy h2 { margin: 0; font: 600 clamp(1.35rem, 2cqw, 1.9rem)/1.05 var(--font-display); letter-spacing: .02em; }
.campaign-chapter-copy > p { max-width: 840px; margin: 0; color: #bed1d0; font-size: .8rem; line-height: 1.42; }
.campaign-map-layout { height: max(360px, calc(100cqh - 245px)); height: max(360px, calc(100cqh - 245px)); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 22cqw); gap: .9rem; }
.campaign-map-loading { grid-column: 1 / -1; display: grid; place-items: center; border: 1px solid rgba(171,218,213,.24); border-radius: 18px; background: rgba(5,17,34,.62); color: #c6dad8; font: 600 1.1rem/1.2 var(--font-display); }
.campaign-map { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid rgba(169,221,215,.38); border-radius: 20px; background: #071426; box-shadow: 0 24px 64px rgba(1,6,16,.38), inset 0 0 48px rgba(2,8,18,.38); }
.campaign-map::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(3,10,22,.12), transparent 35%, rgba(2,8,18,.18)), radial-gradient(ellipse at center, transparent 58%, rgba(2,8,18,.32)); box-shadow: inset 0 0 52px rgba(1,6,15,.34); }
.campaign-map-picture, .campaign-map-picture img { width: 100%; height: 100%; display: block; }
.campaign-map-picture img { object-fit: cover; object-position: center; filter: saturate(1.04) contrast(1.025); }
.campaign-route-nodes { position: absolute; z-index: 2; inset: 0; }
.campaign-route-node { position: absolute; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; transform: translate(-50%, -50%); border: 1px solid rgba(195,214,215,.52); border-radius: 50%; background: radial-gradient(circle at 38% 30%, #516579, #182a40 58%, #081426); color: #dbe5e2; font-size: .69rem; font-weight: 900; box-shadow: 0 3px 10px rgba(1,6,14,.68), inset 0 1px rgba(255,255,255,.16); text-shadow: 0 1px 4px #020711; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.campaign-route-node::after { content: ""; position: absolute; inset: -5px; border: 1px solid transparent; border-radius: inherit; }
.campaign-route-node:hover, .campaign-route-node:focus-visible, .campaign-route-node[aria-pressed="true"] { z-index: 3; transform: translate(-50%, -50%) scale(1.18); border-color: #fff0c6; box-shadow: 0 0 0 3px rgba(242,184,75,.18), 0 0 20px rgba(242,184,75,.45), 0 5px 12px rgba(1,6,14,.72); }
.campaign-route-node.available { border-color: rgba(126,255,233,.9); background: radial-gradient(circle at 38% 30%, #64d8c9, #13766f 50%, #082d36); color: white; box-shadow: 0 0 0 3px rgba(69,214,197,.18), 0 0 18px rgba(69,214,197,.58); animation: campaign-node-ready 2.2s ease-in-out infinite; }
.campaign-route-node.completed { border-color: rgba(255,225,148,.9); background: radial-gradient(circle at 38% 30%, #f6cf73, #9e661a 54%, #2f2111); color: #fff7de; }
.campaign-route-node.locked { opacity: .72; }
.campaign-route-node.grand-boss { width: 46px; height: 46px; border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border-width: 2px; border-color: rgba(255,215,123,.9); background: radial-gradient(circle at 35% 28%, rgba(255,224,148,.85), #7d3150 48%, #211025 75%); color: white; font-size: .8rem; }
.campaign-route-node.grand-boss:hover, .campaign-route-node.grand-boss:focus-visible, .campaign-route-node.grand-boss[aria-pressed="true"] { transform: translate(-50%, -50%) scale(1.15); }
.campaign-route-node.grand-boss::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255,244,210,.72); border-radius: 50%; }
.campaign-route-node.grand-boss { text-indent: -1px; }
@keyframes campaign-node-ready { 50% { box-shadow: 0 0 0 5px rgba(69,214,197,.08), 0 0 25px rgba(69,214,197,.7); } }
.campaign-route-detail { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .8rem; padding: 1rem; overflow-y: auto; border: 1px solid rgba(171,218,213,.3); border-radius: 18px; background: radial-gradient(circle at 80% 0, rgba(69,214,197,.1), transparent 38%), linear-gradient(160deg, rgba(20,48,80,.96), rgba(6,19,39,.98)); box-shadow: 0 20px 54px rgba(1,7,17,.28), inset 0 1px rgba(255,255,255,.05); scrollbar-width: thin; scrollbar-color: rgba(69,214,197,.44) rgba(4,13,28,.3); }
.campaign-route-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.campaign-route-heading .eyebrow { margin: 0 0 .22rem; }
.campaign-route-heading h3 { margin: 0; font: 600 1.38rem/1.08 var(--font-display); }
.campaign-route-description { margin: 0; color: #c6d8d6; font-size: .78rem; line-height: 1.46; }
.campaign-route-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin: 0; }
.campaign-route-stats > div { min-width: 0; padding: .5rem .55rem; border: 1px solid rgba(171,218,213,.16); border-radius: 9px; background: rgba(2,11,25,.36); }
.campaign-route-stats dt { color: #87a5a9; font-size: .67rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.campaign-route-stats dd { margin: .14rem 0 0; color: #edf4ee; font-size: .74rem; font-weight: 750; }
.campaign-rewards, .campaign-boss-requirements { padding: .65rem .72rem; border-left: 2px solid var(--gold); border-radius: 0 10px 10px 0; background: rgba(242,184,75,.07); }
.campaign-rewards strong, .campaign-boss-requirements strong { color: #fff0c6; font: 600 .9rem/1.15 var(--font-display); }
.campaign-rewards p, .campaign-boss-requirements p { margin: .3rem 0 0; color: #cbd9d4; font-size: .7rem; line-height: 1.4; }
.campaign-boss-requirements { border-left-color: #cb7899; background: rgba(128,39,76,.15); }
.campaign-route-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.campaign-route-actions button, .campaign-choice-button { width: 100%; }
.campaign-route-locked { margin: auto 0 0; padding: .72rem; border: 1px solid rgba(151,177,179,.2); border-radius: 10px; background: rgba(3,12,27,.4); color: #9eb1b3; font-size: .73rem; line-height: 1.4; }

@container avenorys-stage (max-width: 1500px) {
  .topbar { grid-template-columns: 55px minmax(0, 1fr) max-content; padding-inline: 1rem; gap: .75rem; }
  .brand-lockup { min-width: 55px; }
  .brand-lockup strong, .brand-lockup span { display: none; }
}

@container avenorys-stage (max-width: 1350px) {
  .resource { min-width: 154px; padding-inline: .58rem; }
  .resource-strip { gap: .35rem; }
  .top-actions { gap: .35rem; }
  .top-command { min-width: 112px; padding-inline: .55rem; }
  .profile-command { min-width: 154px; }
  .poi { min-width: 172px; }
  .poi.routes { left: 3%; }
  .poi.company { left: 26%; }
  .poi.guilds { right: 3%; }
  .poi.time_travel { right: 2.5%; }
  .battle-layout { grid-template-columns: minmax(720px, 1fr) 300px; }
  .campaign-map-layout { grid-template-columns: minmax(0, 1fr) 330px; }
  .arena-defense-panel { grid-template-columns: minmax(230px,.55fr) minmax(520px,1.45fr); }
  .arena-defense-panel > button { grid-column: 1 / -1; justify-self: end; }
  .arena-opponent-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .company-overview { grid-template-columns: minmax(190px,.42fr) minmax(0,2.58fr); }
  .company-guide-full .company-guide-definition-grid.factions,
  .company-guide-full .company-guide-definition-grid.roles { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .company-formation-guide { grid-template-columns: minmax(280px,.7fr) minmax(0,1.3fr); }
  .company-hero-placement-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .company-guide-definition-grid.statistics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .company-recruitment-pool { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .company-abilities { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-grid { grid-template-columns: minmax(340px,.86fr) minmax(470px,1.14fr); }
  .profile-layout { grid-template-columns: minmax(560px,1.15fr) minmax(330px,.85fr); }
  .profile-stat-strip { grid-template-columns: repeat(3,minmax(104px,auto)); }
  .arena-mode-hero-backdrop { width: 52%; opacity: .72; }
  .arena-landing-stage .arena-mode-card > p:not(.eyebrow) { max-width: 66%; }
}

@container avenorys-stage (max-width: 1100px) {
  .auth-layout { grid-template-columns: minmax(0,1fr) minmax(420px,.72fr); }
  .auth-world { padding: clamp(2rem,5cqw,4rem); }
  .auth-panel { padding: 1.5rem; }
  .topbar { grid-template-columns: 55px minmax(0, 1fr) max-content; gap: .45rem; padding-inline: .75rem; }
  .brand-lockup { min-width: 55px; }
  .brand-lockup strong, .brand-lockup span { display: none; }
  .resource-strip { width: 100%; min-width: 0; gap: .25rem; }
  .resource { min-width: 0; flex: 1 1 0; grid-template-columns: 32px minmax(0, 1fr); gap: .4rem; padding-inline: .42rem; }
  .resource-icon { width: 32px; height: 32px; }
  .resource-copy > small { display: none; }
  .top-actions { gap: .25rem; }
  .top-command { min-width: 0; grid-template-columns: 32px max-content; gap: .4rem; padding-inline: .45rem; }
  .top-command-icon { width: 32px; height: 32px; }
  .top-command-copy small { display: none; }
  .profile-command { min-width: 0; max-width: none; }
  .top-command-copy strong { font-size: .9rem; }
  .game-view-header { grid-template-columns: minmax(170px,.8fr) minmax(180px,1.2fr) minmax(300px,1fr); gap: .6rem; padding-inline: 1rem; }
  .view-back-button { min-width: 0; }
  .view-resource-strip { min-width: 0; width: 100%; }
  .view-resource-strip .resource { min-width: 0; }
  .arena-hero-panel { grid-template-columns: 1fr; }
  .arena-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .arena-defense-panel { grid-template-columns: 1fr; }
  .arena-defense-panel > button { grid-column: auto; justify-self: start; }
  .arena-lower-grid { grid-template-columns: 1fr; }
  .echo-trial-pool-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .echo-deployment-layout { grid-template-columns: 1fr; }
  .company-overview { grid-template-columns: minmax(180px,.42fr) minmax(0,2.58fr); }
  .admin-grid { grid-template-columns: minmax(0,1fr); }
  .admin-announcement-form { grid-template-columns: 1fr; }
  .admin-announcement-form > .field, .admin-announcement-form > .form-error { grid-column: auto; }
  .admin-announcement-locales { grid-template-columns: minmax(110px,.34fr) minmax(0,1.66fr); }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-side-stack { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .trace-overview { grid-template-columns: repeat(3,minmax(76px,.3fr)) minmax(260px,1.1fr); }
  .company-section-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .company-section-card { padding: .7rem; }
  .company-formation-guide { grid-template-columns: 1fr; }
  .company-guide-full .company-guide-definition-grid.factions,
  .company-guide-full .company-guide-definition-grid.roles { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .company-recruitment-layout { grid-template-columns: minmax(270px,.48fr) minmax(0,1.52fr); }
  .company-recruitment-pool { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .deployment-layout { grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); }
  .deployment-route-summary { grid-template-columns: minmax(0,1fr); gap: .55rem; }
  .hero-unlock-reveal, .hero-upgrade-reveal, .hero-recruitment-reveal { grid-template-columns: minmax(250px, .75fr) minmax(380px, 1.25fr); padding: 2rem; gap: 1rem; }
  .game-guide-slide { grid-template-columns: minmax(0,1.04fr) minmax(310px,.96fr); gap: .8rem; }
  .game-guide-resource-board { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .game-guide-controls { grid-template-columns: minmax(125px,170px) minmax(0,1fr) minmax(125px,170px); gap: .65rem; }
  .arena-mode-hero-backdrop { width: 56%; opacity: .38; }
  .arena-landing-stage .arena-mode-card > p:not(.eyebrow) { max-width: 78%; }
}

@container avenorys-stage (max-width: 760px) {
  .arena-mode-grid { grid-template-columns: 1fr; }
  .arena-mode-card { min-height: 330px; }
  .arena-mode-hero-backdrop { opacity: 0; }
  .arena-landing-stage .arena-mode-card > p:not(.eyebrow) { max-width: 100%; }
  .echo-trial-pool-grid,.echo-deployment-pool { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .echo-trial-run-card { align-items: stretch; flex-direction: column; }
  .profile-side-stack, .profile-field-grid, .profile-toggle-grid { grid-template-columns: 1fr; }
  .timezone-layout { grid-template-columns: 92px minmax(0,1fr); }
  .timezone-orbit { width: 82px; height: 82px; }
  .trace-overview { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .trace-overview > p { grid-column: 1 / -1; }
  .trace-toolbar { align-items: stretch; flex-direction: column; }
  .trace-toolbar select { width: 100%; }
  .trace-pagination > button { flex: 1; }
  .admin-announcement-locales { grid-template-columns: 1fr; }
  .admin-gameplay-form { grid-template-columns: 1fr; }
  .admin-language-navigation { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: 150px; }
  .cartographer-trace-entry { grid-template-columns: 30px minmax(0,1fr); }
  .cartographer-trace-entry > button { grid-column: 2; width: 100%; }
  .message-list { min-height: 0; grid-template-columns: 1fr; }
  .message-index { max-height: 230px; border-right: 0; border-bottom: 1px solid rgba(171,218,213,.2); }
  .message-detail { min-height: 440px; }
  .message-delete-actions,.hero-recruitment-actions { grid-template-columns: 1fr; }
  .hero-unlock-reveal, .hero-upgrade-reveal, .hero-recruitment-reveal { grid-template-columns: 1fr; align-items: start; padding: 4.5rem 1rem 1.5rem; }
  .hero-unlock-portrait, .hero-upgrade-portrait, .hero-recruitment-portrait { min-height: 280px; height: 38cqh; }
  .hero-unlock-portrait img, .hero-upgrade-portrait img, .hero-recruitment-portrait img { max-height: 42cqh; }
  .hero-unlock-copy, .hero-upgrade-copy, .hero-recruitment-copy { margin-top: -2rem; }
  .hero-unlock-stats, .hero-upgrade-stats, .hero-recruitment-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-upgrade-primary { grid-template-columns: 1fr auto; }
  .hero-upgrade-primary b { grid-column: 1 / -1; }
  .hero-unlock-actions, .battle-navigation-actions { grid-template-columns: 1fr; }
  .battle-recovery-actions { grid-template-columns: 1fr; }
  .hero-unlock-actions .ghost-button { grid-column: auto; }
  .campaign-route-actions { grid-template-columns: 1fr; }
  .game-guide-body { padding: .55rem; }
  .game-guide-shell { gap: .45rem; }
  .game-guide-slide { grid-template-columns: minmax(0,1fr); align-content: start; padding: .55rem; }
  .game-guide-visual { min-height: 310px; height: 44cqh; }
  .game-guide-copy { overflow: visible; padding: .15rem; }
  .game-guide-copy h2 { font-size: clamp(1.42rem,6.2cqw,1.9rem); }
  .game-guide-intro { margin: .5rem 0 .65rem; }
  .game-guide-controls { grid-template-columns: 74px minmax(0,1fr) 74px; gap: .32rem; padding: .4rem; }
  .game-guide-arrow { min-width: 0; padding: .5rem; font-size: 0; }
  .game-guide-arrow.previous::before, .game-guide-arrow.next::after { margin: 0; font-size: 1.25rem; }
  .game-guide-dot { width: 25px; height: 25px; flex-basis: 25px; }
  .game-guide-formation-board, .game-guide-lane-board, .game-guide-growth-board, .game-guide-recruitment-board { inset: .65rem .65rem 4rem; }
  .game-guide-battle-board, .game-guide-resource-board, .game-guide-daily-board, .game-guide-time-board, .game-guide-first-route-board { inset: .65rem .65rem 4.1rem; }
  .game-guide-first-route-board strong { font-size: .66rem; }
}

@container avenorys-stage (max-height: 700px) {
  .game-view-body { padding-top: 1rem; padding-bottom: 1rem; }
  .game-view-routes .game-view-body { padding: .65rem 1rem .8rem; }
  .campaign-chapter-navigation { padding-bottom: .35rem; }
  .campaign-chapter-copy { min-height: 0; padding: .2rem .1rem .5rem; }
  .campaign-map-layout { height: auto; min-height: 0; }
  .arena-lock-card { margin-top: 1rem; padding: 1.4rem; }
  .report-layout { padding-top: .8rem; padding-bottom: 1rem; }
  .game-guide-body { padding: .5rem .7rem .6rem; }
  .game-guide-shell { gap: .4rem; }
  .game-guide-slide { gap: .65rem; padding: .55rem; }
  .game-guide-visual { min-height: 290px; }
  .game-guide-copy h2 { font-size: 1.42rem; }
  .game-guide-intro { margin: .4rem 0 .5rem; font-size: .76rem; }
  .game-guide-points { gap: .34rem; }
  .game-guide-points li { padding: .48rem .55rem .48rem 2.45rem; }
  .game-guide-points li::before { left: .55rem; top: .5rem; }
  .game-guide-points p { margin-top: .14rem; }
  .game-guide-controls { padding: .34rem .5rem; }
}

@container avenorys-stage (max-height: 800px) {
  .company-recruitment-ritual { gap: .28rem; padding: .6rem; }
  .company-recruitment-ritual h3 { font-size: 1.45rem; }
  .company-recruitment-ritual > p:not(.eyebrow) { font-size: .67rem; line-height: 1.32; }
  .company-recruitment-cost { min-width: 205px; grid-template-columns: 34px minmax(0,1fr); gap: .42rem; padding: .34rem .48rem; }
  .company-recruitment-cost .cost-icon { width: 34px; height: 34px; }
  .company-recruitment-cost strong { font-size: .78rem; }
  .company-recruit-button { min-width: 205px; padding-block: .52rem; }
  .company-recruitment-state { font-size: .66rem !important; }
  .company-recruitment-note { max-width: 280px; padding: .3rem .4rem; font-size: .66rem; line-height: 1.3; }
}

.game-view-time-journey .game-view-header { border-bottom-color: rgba(199,148,255,.32); background: linear-gradient(180deg,rgba(8,13,29,.98),rgba(14,20,39,.94)); }
.time-journey-body { position: relative; min-height: 100%; background: radial-gradient(circle at 18% 20%,rgba(103,67,158,.24),transparent 34%), radial-gradient(circle at 82% 12%,rgba(69,214,197,.16),transparent 28%), linear-gradient(145deg,#08101f 0%,#10152b 50%,#08131f 100%); color: #eef8f4; }
.time-journey-body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .26; background-image: linear-gradient(rgba(135,211,205,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(135,211,205,.08) 1px,transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(circle at center,#000,transparent 78%); }
.time-journey-loading,.time-journey-lock { position: relative; z-index: 1; width: min(760px,92%); margin: 7cqh auto 0; padding: 2.4rem; text-align: center; border: 1px solid rgba(153,213,209,.28); border-radius: 24px; background: linear-gradient(145deg,rgba(11,22,42,.96),rgba(24,20,50,.94)); box-shadow: 0 30px 90px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.06); }
.time-journey-hourglass { display: block; position: relative; width: 72px; height: 88px; margin: 0 auto 1.2rem; border-top: 5px solid #f2c56b; border-bottom: 5px solid #f2c56b; filter: drop-shadow(0 0 16px rgba(242,197,107,.4)); }
.time-journey-hourglass::before,.time-journey-hourglass::after { content: ""; position: absolute; left: 12px; right: 12px; height: 38px; border: 3px solid rgba(121,230,217,.8); }
.time-journey-hourglass::before { top: 3px; clip-path: polygon(0 0,100% 0,50% 100%); background: linear-gradient(180deg,rgba(199,148,255,.58),transparent 75%); }
.time-journey-hourglass::after { bottom: 3px; clip-path: polygon(50% 0,100% 100%,0 100%); background: linear-gradient(0deg,rgba(69,214,197,.55),transparent 75%); }
.time-journey-requirements { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; margin: 1.4rem 0; text-align: left; }
.time-journey-requirements > div { display: grid; grid-template-columns: auto minmax(0,1fr); grid-template-areas: "marker label" ". status"; align-items: start; column-gap: .42rem; row-gap: .28rem; padding: .9rem; border: 1px solid rgba(181,207,220,.2); border-radius: 14px; background: rgba(3,10,24,.42); }
.time-journey-requirements > div > span { grid-area: marker; line-height: 1.3; }
.time-journey-requirements > div > strong { grid-area: label; min-width: 0; line-height: 1.3; }
.time-journey-requirements > div > small { grid-area: status; color: #b9cecf; line-height: 1.35; }
.time-journey-requirements > div.complete { border-color: rgba(69,214,197,.52); }
.time-journey-hero { position: relative; z-index: 1; display: grid; grid-template-columns: 210px minmax(0,1fr) minmax(260px,360px); gap: 1.4rem; align-items: center; padding: 1.1rem 1.3rem; border: 1px solid rgba(145,216,212,.24); border-radius: 24px; background: linear-gradient(120deg,rgba(10,22,40,.94),rgba(30,22,58,.9)); box-shadow: 0 22px 60px rgba(0,0,0,.28); overflow: hidden; }
.time-journey-portal { position: relative; width: 178px; aspect-ratio: 1; margin: auto; border: 2px solid rgba(242,197,107,.75); border-radius: 50%; box-shadow: 0 0 0 12px rgba(199,148,255,.08),0 0 42px rgba(103,232,219,.34),inset 0 0 38px rgba(89,37,135,.65); animation: time-portal-pulse 5s ease-in-out infinite; }
.time-journey-portal::before,.time-journey-portal::after,.time-journey-portal span,.time-journey-portal i,.time-journey-portal b { content: ""; position: absolute; inset: 13%; border: 1px solid rgba(105,228,215,.72); border-radius: 50% 46% 52% 44%; transform: rotate(20deg); }
.time-journey-portal::after { inset: 26%; border-color: rgba(242,197,107,.9); transform: rotate(-34deg); }
.time-journey-portal span { inset: 5% 35%; border-color: rgba(199,148,255,.75); transform: rotate(62deg); }
.time-journey-portal i { inset: 36%; background: radial-gradient(circle,#f8e2a5 0 8%,#4bdacb 18%,rgba(90,48,141,.7) 42%,transparent 72%); border: 0; filter: blur(1px); }
.time-journey-portal b { inset: 18%; border-style: dashed; border-color: rgba(255,255,255,.35); transform: rotate(-10deg); }
@keyframes time-portal-pulse { 0%,100% { transform: scale(.98) rotate(-1deg); filter: brightness(.92); } 50% { transform: scale(1.03) rotate(2deg); filter: brightness(1.16); } }
.time-journey-hero-copy h2 { margin: .15rem 0 .45rem; font-family: var(--font-display); font-size: clamp(1.8rem,3.1cqw,3rem); }
.time-journey-hero-copy > p:not(.eyebrow) { max-width: 720px; color: #bfd1d5; line-height: 1.55; }
.time-journey-timers { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.time-journey-timers > div { min-width: 155px; padding: .55rem .7rem; border-left: 2px solid #45d6c5; background: rgba(2,8,21,.4); }
.time-journey-timers small,.time-journey-timers strong { display: block; }
.time-journey-timers small { color: #8eaaa9; }
.time-journey-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; margin: 0; }
.time-journey-summary > div { padding: .75rem; border: 1px solid rgba(242,197,107,.2); border-radius: 12px; background: rgba(4,9,22,.48); }
.time-journey-summary dt { color: #91aaa9; font-size: .72rem; }
.time-journey-summary dd { margin: .18rem 0 0; color: #f3dd9f; font-weight: 800; }
.time-journey-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr); gap: 1rem; margin-top: 1rem; }
.time-journey-daily,.time-journey-week { padding: 1rem; border: 1px solid rgba(154,211,209,.2); border-radius: 20px; background: linear-gradient(155deg,rgba(8,18,35,.94),rgba(18,18,39,.91)); box-shadow: 0 18px 48px rgba(0,0,0,.2); }
.time-journey-stage-grid { display: grid; gap: .65rem; }
.time-journey-stage { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: .75rem; align-items: center; min-height: 86px; padding: .65rem .8rem; border: 1px solid rgba(153,184,192,.18); border-radius: 15px; background: rgba(3,9,22,.46); opacity: .68; }
.time-journey-stage.available { opacity: 1; border-color: rgba(242,197,107,.52); box-shadow: inset 0 0 28px rgba(242,197,107,.06); }
.time-journey-stage.completed { opacity: 1; border-color: rgba(69,214,197,.42); background: rgba(25,83,77,.15); }
.time-journey-stage-number { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(199,148,255,.52); border-radius: 50%; color: #d6b5ff; font-weight: 900; }
.time-journey-stage h3,.time-journey-stage p { margin: 0; }
.time-journey-stage p { margin-top: .2rem; color: #9fb7b9; font-size: .75rem; }
.time-journey-stage > strong { color: #6fe3d5; }
.time-journey-rule-note,.time-journey-selection-note { margin: .8rem 0 0; padding: .65rem .75rem; border-left: 2px solid rgba(199,148,255,.7); color: #aebfc6; background: rgba(45,26,71,.2); font-size: .76rem; line-height: 1.45; }
.time-journey-combat-rule { display: grid; grid-template-columns: minmax(160px,.42fr) minmax(0,1fr); gap: .5rem 1rem; align-items: center; margin-bottom: .75rem; padding: .8rem .9rem; border: 1px solid rgba(199,148,255,.42); border-radius: 14px; background: linear-gradient(120deg,rgba(77,39,118,.3),rgba(6,21,37,.62)); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.time-journey-combat-rule h3,.time-journey-combat-rule p { margin: .1rem 0; }
.time-journey-combat-rule h3 { color: #efdfff; font: 600 1.08rem/1.15 var(--font-display); }
.time-journey-combat-rule > p { color: #d5e5e2; line-height: 1.45; }
.time-journey-combat-rule > small { grid-column: 2; color: #9fb8bb; line-height: 1.4; }
.time-journey-method-picker { min-width: 0; padding: .7rem; border: 1px solid rgba(199,148,255,.28); border-radius: 14px; background: rgba(28,20,54,.42); }
.time-journey-method-picker .section-heading.compact { margin: 0 0 .6rem; padding: 0; border: 0; }
.time-journey-method-picker .section-heading > small { max-width: 280px; color: #a9bec2; text-align: right; }
.time-journey-method-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; }
.time-journey-method { min-width: 0; display: grid; gap: .3rem; padding: .68rem; border: 1px solid rgba(164,189,199,.22); border-radius: 12px; background: linear-gradient(145deg,rgba(20,40,65,.72),rgba(6,16,34,.82)); color: #d7e6e4; text-align: left; transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.time-journey-method:hover { transform: translateY(-2px); border-color: rgba(111,227,213,.52); }
.time-journey-method[aria-pressed="true"] { border-color: rgba(242,197,107,.78); background: linear-gradient(145deg,rgba(85,61,33,.62),rgba(45,27,73,.72)); box-shadow: 0 0 0 2px rgba(242,184,75,.11),0 12px 26px rgba(0,0,0,.22); }
.time-journey-method strong { color: #fff0bc; font: 600 .94rem/1.1 var(--font-display); }
.time-journey-method span { color: #c3d4d3; font-size: .69rem; line-height: 1.38; }
.time-journey-method small { color: #9de5da; font-size: .66rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.time-journey-objective-panel { display: grid; gap: .42rem; padding: .8rem; border: 1px solid rgba(199,148,255,.42); border-radius: 13px; background: linear-gradient(145deg,rgba(64,35,100,.36),rgba(7,19,37,.76)); }
.time-journey-objective-panel .eyebrow { margin: 0; }
.time-journey-objective-panel > strong { color: #f0e6f9; font-size: .82rem; line-height: 1.42; }
.time-journey-objective-panel > small { color: #9edfd5; line-height: 1.35; }
.time-journey-day-map { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: .42rem; }
.time-journey-day-map article { min-width: 0; padding: .55rem .42rem; border: 1px solid rgba(160,188,196,.16); border-radius: 12px; text-align: center; background: rgba(3,9,22,.48); }
.time-journey-day-map article.today { border-color: rgba(242,197,107,.72); box-shadow: 0 0 22px rgba(242,197,107,.12); }
.time-journey-day-map article.sealed { border-color: rgba(69,214,197,.5); background: linear-gradient(180deg,rgba(35,113,102,.27),rgba(5,19,27,.58)); }
.time-journey-day-map article.missed { border-color: rgba(231,94,96,.34); opacity: .62; }
.time-journey-day-map span,.time-journey-day-map strong,.time-journey-day-map small { display: block; }
.time-journey-day-map span { color: #e4ca82; font-weight: 900; }
.time-journey-day-map strong { margin: .35rem 0; overflow: hidden; text-overflow: ellipsis; font-size: .67rem; line-height: 1.25; }
.time-journey-day-map small { color: #91aaa9; font-size: .66rem; }
.time-journey-echo-choice { display: grid; grid-template-columns: minmax(0,1fr) minmax(170px,.55fr) auto; gap: .7rem; align-items: center; margin-top: .8rem; padding: .8rem; border: 1px solid rgba(199,148,255,.32); border-radius: 14px; background: rgba(54,29,85,.22); }
.time-journey-echo-choice p { margin: .2rem 0 0; color: #b3c0cb; font-size: .72rem; }
.time-journey-echo-select { width: 100%; min-height: 44px; padding: .72rem 2.35rem .72rem .82rem; border: 1px solid rgba(199,148,255,.52); border-radius: 11px; background-color: #11162d; color: #f3e9ff; color-scheme: dark; font: 750 .78rem/1.2 var(--font-ui); box-shadow: inset 0 1px rgba(255,255,255,.04),0 8px 22px rgba(0,0,0,.2); }
.time-journey-echo-select:hover { border-color: rgba(111,227,213,.68); background-color: #161d39; }
.time-journey-echo-select:focus-visible { border-color: var(--resonance); }
.time-journey-echo-select option { background: #11162d; color: #f3e9ff; }
.time-journey-finale { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-top: .8rem; padding: .85rem; border: 1px solid rgba(151,181,191,.17); border-radius: 15px; background: rgba(3,9,22,.48); }
.time-journey-finale.available { border-color: rgba(242,197,107,.55); background: linear-gradient(120deg,rgba(80,57,22,.28),rgba(46,23,74,.25)); }
.time-journey-finale.completed { border-color: rgba(69,214,197,.45); }
.time-journey-finale h2,.time-journey-finale p { margin: .1rem 0; }
.time-journey-finale p { color: #a8bbc0; font-size: .74rem; }
.time-journey-rules { margin-top: .75rem; padding: .65rem .75rem; border: 1px solid rgba(151,181,191,.15); border-radius: 12px; color: #b2c4c8; }
.time-journey-rules summary { cursor: pointer; color: #f0d796; font-weight: 800; }
.time-journey-rules p { line-height: 1.5; }
@container avenorys-stage (max-width: 980px) {
  .time-journey-hero { grid-template-columns: 130px minmax(0,1fr); }
  .time-journey-portal { width: 118px; }
  .time-journey-summary { grid-column: 1 / -1; grid-template-columns: repeat(4,minmax(0,1fr)); }
  .time-journey-layout { grid-template-columns: 1fr; }
  .time-journey-day-map { grid-template-columns: repeat(7,minmax(72px,1fr)); overflow-x: auto; }
  .time-journey-echo-choice { grid-template-columns: 1fr; }
}
@container avenorys-stage (max-width: 760px) {
  .time-journey-hero { grid-template-columns: 92px minmax(0,1fr); padding: .7rem; }
  .time-journey-portal { width: 82px; }
  .time-journey-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .time-journey-stage { grid-template-columns: 40px minmax(0,1fr); }
  .time-journey-stage > button,.time-journey-stage > strong,.time-journey-stage > span:last-child { grid-column: 2; justify-self: start; }
  .time-journey-finale { align-items: flex-start; flex-direction: column; }
  .time-journey-requirements { grid-template-columns: 1fr; }
  .time-journey-combat-rule,.time-journey-method-grid { grid-template-columns: 1fr; }
  .time-journey-combat-rule > small { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .hero-celebration-rays { animation: hero-celebration-rays 8.6s linear infinite !important; }
  .hero-celebration-shimmer { animation: hero-celebration-shimmer 4.2s ease-in-out infinite !important; }
  .hero-celebration-glow { animation: hero-celebration-pulse 2.9s ease-in-out infinite !important; }
  .hero-celebration-halo { animation: hero-celebration-halo 3.2s ease-in-out infinite !important; }
  .hero-celebration-orbit { animation: hero-celebration-orbit 6.4s linear infinite !important; }
  .hero-upgrade-pressure-plume { animation: hero-upgrade-pressure-bloom 1.55s cubic-bezier(.13,.68,.19,1) both !important; }
  .hero-upgrade-impact-core { animation: hero-upgrade-impact-core 1.32s cubic-bezier(.08,.7,.17,1) both !important; }
  .hero-upgrade-light-sweep { animation: hero-upgrade-light-sweep 1.15s ease-out both !important; }
  .hero-upgrade-spark { animation: hero-upgrade-ballistic-spark 1.68s var(--spark-delay) cubic-bezier(.12,.58,.2,1) both !important; }
  .hero-upgrade-ember { animation: hero-upgrade-floating-ember 1.72s var(--ember-delay) cubic-bezier(.16,.56,.24,1) both !important; }
  .arena-dragon-orbits { animation: arena-dragon-aura 10s ease-in-out infinite !important; }
  .arena-dragon-stage::after { animation: arena-dragon-ground-light 10s ease-in-out infinite !important; }
  .route-line { stroke-dasharray: none; }
}

body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
body.reduce-motion .hero-celebration-rays,body.reduce-motion .hero-celebration-shimmer,body.reduce-motion .hero-celebration-glow,body.reduce-motion .hero-celebration-halo,body.reduce-motion .hero-celebration-orbit { animation: none !important; }
body.reduce-motion .hero-celebration-rays { transform: rotate(14deg) !important; }
body.reduce-motion .hero-celebration-shimmer { opacity: .34 !important; transform: translateX(0) !important; }
body.reduce-motion .hero-celebration-glow { opacity: .7 !important; transform: scale(1.03) !important; }
body.reduce-motion .hero-celebration-halo { opacity: .48 !important; transform: scale(1.03) !important; }
body.reduce-motion .hero-celebration-orbit { opacity: .5 !important; transform: rotate(-12deg) !important; }
body.reduce-motion .hero-upgrade-pressure-plume { opacity: .72 !important; transform: scale(1.02) rotate(2deg) !important; }
body.reduce-motion .hero-upgrade-impact-core { opacity: .9 !important; transform: scale(.96) !important; }
body.reduce-motion .hero-upgrade-light-sweep { opacity: .72 !important; transform: scaleX(.92) scaleY(.68) !important; }
body.reduce-motion .hero-upgrade-spark { opacity: .72 !important; transform: translate(var(--spark-reduced-x),var(--spark-reduced-y)) rotate(var(--spark-reduced-turn)) scale(.66) !important; }
body.reduce-motion .hero-upgrade-ember { opacity: .72 !important; transform: translate(var(--ember-reduced-x),var(--ember-reduced-y)) !important; }
body.reduce-motion .route-line { stroke-dasharray: none; }