/* ==========================================================================\n   DOFUS RETRO LEGENDS — Premium launcher / account gate\n   Visual-only override. Existing auth, server and character logic stays intact.\n   ========================================================================== */

.account-gate {
  --p-night: #0c111a;
  --p-night-2: #121a26;
  --p-slate: #1d2a3b;
  --p-slate-2: #2b3e57;
  --p-line: rgba(255,255,255,.10);
  --p-gold: #ffc857;
  --p-gold-2: #f39a21;
  --p-gold-deep: #b75f0a;
  --p-sky: #67d9ff;
  --p-blue: #458cff;
  --p-green: #76dc77;
  --p-cream: #fff9e9;
  --p-paper: #f4ead0;
  --p-paper-2: #e3d2aa;
  --p-ink: #273246;
  --p-muted: #69758a;
  --p-shadow: 0 36px 90px rgba(0,0,0,.55);
  --p-card-shadow: 0 18px 40px rgba(22,30,42,.16);
  background:
    radial-gradient(circle at 10% 0%, rgba(52,139,224,.22), transparent 32%),
    radial-gradient(circle at 92% 84%, rgba(242,158,40,.14), transparent 28%),
    linear-gradient(145deg, #080c12 0%, #101927 52%, #11151e 100%);
  color: var(--p-ink);
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

.account-gate::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 42%, #000 0 40%, transparent 78%);
}

.account-gate__sky {
  opacity: 1;
  filter: saturate(1.15);
}
.account-gate__sky::before {
  background:
    radial-gradient(circle at 48% -10%, rgba(123,201,255,.24), transparent 34%),
    radial-gradient(circle at 88% 72%, rgba(255,189,78,.12), transparent 24%);
}
.account-gate__sky i {
  border-color: rgba(126,196,255,.08);
  box-shadow: inset 0 0 80px rgba(95,163,221,.025);
}

.premium-atmosphere { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.premium-atmosphere span { position: absolute; display: block; border-radius: 50%; filter: blur(2px); opacity: .72; }
.premium-atmosphere span:nth-child(1) { width: 6px; height: 6px; left: 8%; top: 18%; background: #9de8ff; box-shadow: 0 0 24px #67d9ff; animation: premiumFloat 9s ease-in-out infinite; }
.premium-atmosphere span:nth-child(2) { width: 4px; height: 4px; left: 84%; top: 24%; background: #ffe3a0; box-shadow: 0 0 22px #ffc857; animation: premiumFloat 11s 1.8s ease-in-out infinite; }
.premium-atmosphere span:nth-child(3) { width: 5px; height: 5px; left: 18%; top: 76%; background: #b4f6b2; box-shadow: 0 0 22px #76dc77; animation: premiumFloat 13s .8s ease-in-out infinite; }
.premium-atmosphere span:nth-child(4) { width: 3px; height: 3px; left: 73%; top: 84%; background: #d7e9ff; box-shadow: 0 0 20px #67d9ff; animation: premiumFloat 10s 2.7s ease-in-out infinite; }
@keyframes premiumFloat { 0%,100% { transform: translate3d(0,0,0) scale(1); opacity:.38; } 50% { transform: translate3d(18px,-22px,0) scale(1.45); opacity:.95; } }

.retro-client {
  width: min(1440px, calc(100vw - 38px));
  min-height: min(920px, calc(100vh - 28px));
  margin: 14px auto;
  grid-template-rows: 68px 1fr 34px;
  filter: drop-shadow(0 35px 60px rgba(0,0,0,.36));
}

/* Launcher top bar */
.retro-client__rail {
  min-height: 68px;
  padding: 0 19px 0 22px;
  border: 1px solid rgba(165,199,229,.18);
  border-bottom: 1px solid rgba(255,255,255,.05);
  border-radius: 24px 24px 0 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 42%),
    linear-gradient(100deg, #172131 0%, #111925 48%, #172331 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 18px 35px rgba(0,0,0,.18);
}
.retro-client__rail::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(103,217,255,.34), rgba(255,200,87,.25), transparent);
}

.retro-brand { gap: 12px; min-width: 255px; }
.retro-brand__egg {
  width: 42px; height: 42px;
  border: 2px solid rgba(255,230,156,.9);
  background:
    radial-gradient(circle at 33% 25%, rgba(255,255,255,.48), transparent 16%),
    radial-gradient(circle at 50% 58%, #6cc862 0 28%, #388d62 50%, #1e5363 76%, #162f43 100%);
  color: #fff3b5;
  box-shadow: 0 0 0 3px rgba(12,17,26,.88), 0 0 24px rgba(103,217,255,.20), inset 0 0 0 1px rgba(255,255,255,.22);
  font-size: 22px;
}
.retro-brand div { gap: 3px; }
.retro-brand strong { color: #f7fbff; font-size: 14px; letter-spacing: .055em; }
.retro-brand strong mark { padding: 2px 5px; border-radius: 5px; color: #1d2531; background: linear-gradient(180deg,#ffe28c,#f6b937); font-size: 9px; letter-spacing: .08em; vertical-align: 2px; box-shadow: inset 0 1px rgba(255,255,255,.7); }
.retro-brand small { color: #8295aa; font-size: 8px; letter-spacing: .13em; }

.retro-journey {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.retro-journey em { width: 24px; height: 1px; background: rgba(255,255,255,.11); }
.retro-journey__step { display: flex; align-items: center; gap: 6px; color: #64768c; font-style: normal; }
.retro-journey__step i { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; background: #121b28; color: #6f8197; font-size: 9px; font-style: normal; font-weight: 900; }
.retro-journey__step b { font-size: 8px; letter-spacing: .075em; text-transform: uppercase; }
.retro-journey__step.is-active { color: #e8f5ff; }
.retro-journey__step.is-active i { color: #17202d; border-color: #9ce7ff; background: linear-gradient(180deg,#9be8ff,#5bc9f4); box-shadow: 0 0 16px rgba(103,217,255,.30); }
.retro-journey__step.is-complete { color: #9baec0; }
.retro-journey__step.is-complete i { color: #152118; border-color: #a4eda1; background: linear-gradient(#98e791,#67c666); }

.retro-client__rail-actions { min-width: 214px; justify-content: flex-end; }
.retro-live-status { display: grid; grid-template-columns: 9px auto; grid-template-rows: auto auto; column-gap: 7px; align-items: center; padding: 7px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.035); }
.retro-live-status i { grid-row: 1/3; width: 7px; height: 7px; border-radius: 50%; background: #76dc77; box-shadow: 0 0 0 4px rgba(118,220,119,.09), 0 0 13px rgba(118,220,119,.55); }
.retro-live-status b { color: #eaf1f8; font-size: 9px; line-height: 1; }
.retro-live-status small { color: #6f8397; font-size: 7px; line-height: 1; text-transform: uppercase; letter-spacing: .09em; }
.retro-rail-button {
  width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,.18);
  color: #e8edf4;
  background: rgba(255,255,255,.055);
  box-shadow: none;
  transition: .16s ease;
}
.retro-rail-button:hover { color: #fff; background: #c75444; border-color: #e9897c; transform: translateY(-1px); }

/* Main framed client */
.retro-client__frame {
  border: 1px solid rgba(147,177,205,.14);
  border-top: 0;
  border-radius: 0 0 26px 26px;
  background: var(--p-paper);
  box-shadow: var(--p-shadow), inset 0 0 0 1px rgba(255,255,255,.38);
}
.retro-client__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(21,31,45,.08), inset 0 -20px 60px rgba(43,50,65,.035);
}
.retro-client__body { position: relative; min-height: 100%; }
.retro-client__footer { color: #7e8a99; font-size: 8px; letter-spacing: .045em; text-transform: uppercase; text-shadow: none; }
.retro-client__footer b { color: #3b536c; }
.retro-footer-secure { color: #8397aa; }

/* floating server/account badges */
.retro-top-tab {
  top: 12px;
  min-width: 185px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(16,24,36,.78);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(15,22,34,.16), inset 0 1px rgba(255,255,255,.05);
}
.retro-top-tab::before,.retro-top-tab::after { display:none; }
.retro-top-tab--server { left: 18px; }
.retro-top-tab--account { right: 18px; }
.retro-top-tab small { color: #7f97af; font-size: 7px; letter-spacing: .12em; }
.retro-top-tab strong { color: #f6f9fd; font-size: 11px; text-shadow: none; }
.retro-top-tab strong span { color: #9db3c9; font-size: 9px; }

.retro-kicker { color: #477fb8; font-size: 9px; letter-spacing: .17em; }

/* Buttons */
.retro-button {
  min-height: 43px;
  padding: 10px 22px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  font-size: 12px;
  letter-spacing: .02em;
  text-shadow: none;
  box-shadow: inset 0 1px rgba(255,255,255,.32), 0 5px 12px rgba(22,30,42,.12);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.retro-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.04); box-shadow: inset 0 1px rgba(255,255,255,.32), 0 9px 20px rgba(22,30,42,.18); }
.retro-button:active:not(:disabled) { transform: translateY(0); }
.retro-button--orange {
  border-color: #d77912;
  color: #1e2530;
  background: linear-gradient(180deg,#ffd36b 0%,#ffb63e 48%,#f69a21 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.55), 0 7px 18px rgba(231,135,16,.24);
}
.retro-button--brown { border-color: #34475e; color: #f0f5fa; background: linear-gradient(180deg,#435a76,#2e4056); }
.retro-button--wide { min-height: 52px; border-radius: 14px; font-size: 14px; }
.retro-button--play { min-width: 190px; min-height: 50px; font-size: 15px; }
.retro-button--select { min-width: 220px; }

/* LOGIN */
.retro-login-screen {
  min-height: 760px;
  grid-template-columns: minmax(0, 1.65fr) minmax(390px, .72fr);
  background: #f4ead0;
}
.retro-login-hero {
  min-height: 760px;
  background:
    linear-gradient(90deg, rgba(8,16,28,.32) 0%, rgba(8,16,28,.06) 40%, rgba(8,16,28,0) 72%),
    linear-gradient(180deg, rgba(9,16,27,.02) 50%, rgba(9,16,27,.52) 100%),
    url('/static/auth-original/login-hero.png') center center / cover no-repeat;
}
.retro-login-hero::before {
  opacity: 1;
  background:
    radial-gradient(circle at 16% 14%, rgba(255,255,255,.36), transparent 17%),
    linear-gradient(115deg, rgba(103,217,255,.09), transparent 32%);
}
.retro-login-hero::after { height: 330px; background: linear-gradient(180deg, transparent, rgba(8,14,23,.38)); }
.retro-login-hero__copy {
  left: 36px;
  top: 38px;
  width: 440px;
  padding: 24px 27px 22px;
  border: 1px solid rgba(255,255,255,.27);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,252,241,.94), rgba(242,235,215,.86));
  box-shadow: 0 22px 60px rgba(20,31,48,.18), inset 0 1px rgba(255,255,255,.75);
  backdrop-filter: blur(16px);
}
.retro-login-hero__copy::before { content:""; position:absolute; left:0; top:22px; bottom:22px; width:3px; border-radius:0 4px 4px 0; background: linear-gradient(#67d9ff,#ffc857); }
.retro-login-hero__copy h1 { margin: 7px 0 10px; color: #1e2c40; font-size: clamp(38px, 3.2vw, 54px); line-height: .94; letter-spacing: -.045em; max-width: 380px; }
.retro-login-hero__copy p { max-width: 380px; color: #58667a; font-size: 11px; line-height: 1.62; }
.retro-login-hero__chips { margin-top: 16px; gap: 7px; }
.retro-login-hero__chips span { padding: 6px 9px; border: 1px solid rgba(66,102,139,.14); border-radius: 999px; background: rgba(235,245,255,.72); color: #425873; font-size: 7px; letter-spacing: .05em; text-transform: uppercase; }
.retro-hero-proof {
  position: absolute;
  z-index: 5;
  left: 36px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 13px 18px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 15px;
  color: white;
  background: rgba(10,18,30,.55);
  box-shadow: 0 12px 35px rgba(0,0,0,.20);
  backdrop-filter: blur(14px);
}
.retro-hero-proof div { display:grid; gap:1px; }
.retro-hero-proof strong { color:#fff4cf; font-size:16px; }
.retro-hero-proof span { color:#b8c7d4; font-size:7px; letter-spacing:.08em; text-transform:uppercase; }
.retro-hero-proof > i { width:1px; height:25px; background:rgba(255,255,255,.14); }

.retro-form-panel {
  min-height: 760px;
  padding: 78px 38px 34px;
  border-left: 1px solid rgba(39,50,70,.11);
  background:
    radial-gradient(circle at 100% 0%, rgba(103,217,255,.14), transparent 22%),
    linear-gradient(180deg,#fffaf0 0%,#f0e4c6 100%);
}
.retro-panel-title {
  min-height: 52px;
  margin: -8px -8px 25px;
  padding: 0 17px;
  border: 1px solid #2c415c;
  border-radius: 14px;
  background: linear-gradient(145deg,#334c6b,#26384f);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 25px rgba(28,39,55,.13);
}
.retro-panel-title span { font-size: 16px; }
.retro-panel-title small { color: #91a9c1; font-size: 7px; }
.retro-form-panel__inner { padding: 7px 3px; }
.retro-form-intro { margin-bottom: 24px; padding: 13px 14px; border: 1px solid rgba(85,103,129,.13); border-radius: 13px; background: rgba(255,255,255,.49); }
.retro-form-intro__icon { width: 39px; height: 39px; color: #1d4057; background: linear-gradient(145deg,#a7eaff,#62cff7); box-shadow: 0 0 0 4px rgba(255,255,255,.62), 0 8px 20px rgba(74,160,205,.18); }
.retro-form-intro strong { color: #27364b; font-size: 12px; }
.retro-form-intro small { color: #758094; font-size: 8px; }
.retro-form { gap: 15px; }
.retro-form > label > span,.retro-account-fields label > span { color: #536176; font-size: 8px; letter-spacing: .09em; }
.retro-field {
  min-height: 48px;
  border: 1px solid #d5c6a5;
  border-radius: 11px;
  background: rgba(255,253,247,.92);
  box-shadow: inset 0 1px 2px rgba(45,54,67,.04);
  transition: .15s ease;
}
.retro-field:focus-within { border-color: #57a8ed; box-shadow: 0 0 0 4px rgba(79,163,237,.11), inset 0 1px 2px rgba(45,54,67,.03); background: #fff; }
.retro-field i { color: #8291a3; }
.retro-field input { color: #26364a; font-size: 12px; }
.retro-field input::placeholder { color: #9da5ae; }
.retro-remember { border: 1px solid rgba(115,100,69,.10); border-radius: 12px; background: rgba(255,255,255,.35); }
.retro-remember b { color: #46566b; }
.retro-remember small { color: #7f8792; }
.retro-separator span { color: #87909b; }
.retro-local-note { color: #7b7c79; line-height: 1.45; }
.gate-error { border-radius: 10px; }

/* REGISTER */
.retro-register-screen {
  min-height: 760px;
  padding: 44px 60px;
  grid-template-columns: minmax(320px,.78fr) minmax(560px,1.22fr);
  gap: 38px;
  background:
    radial-gradient(circle at 8% 10%, rgba(103,217,255,.16), transparent 18%),
    linear-gradient(135deg,#eaf8ff 0%,#f8eed7 48%,#eadab5 100%);
}
.retro-register-banner {
  min-height: 570px;
  padding: 35px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(12,22,37,.02), rgba(12,22,37,.52)),
    url('/static/auth-original/register-guide.png') center 32% / cover no-repeat;
  box-shadow: var(--p-card-shadow);
}
.retro-register-banner::before { background: linear-gradient(180deg, rgba(14,24,38,.04), rgba(14,24,38,.48)); }
.retro-register-banner__orb { width: 92px; height: 92px; margin: 0 0 22px; border: 5px solid rgba(255,255,255,.72); font-size: 42px; }
.retro-register-banner h1 { color:#fff; font-size: 40px; letter-spacing:-.035em; }
.retro-register-banner p { max-width:360px; color:#d9e4eb; font-size:10px; line-height:1.55; }
.retro-register-card { padding: 26px; border: 1px solid rgba(117,99,63,.12); border-radius: 22px; background: linear-gradient(180deg,#fffaf0,#efe1bf); box-shadow: var(--p-card-shadow); }
.retro-account-fields { gap: 15px; }
.retro-field-help { color:#89909a; }
.retro-text-button { color:#cfe4f9; }

/* SHARED SELECTION HEADERS */
.retro-selection-screen { min-height:760px; grid-template-rows: 250px 54px 1fr auto; background: linear-gradient(180deg,#fbf7ec,#efe2c3); }
.retro-selection-banner { border-bottom: 0; }
.retro-selection-banner::after { content:""; position:absolute; left:0; right:0; bottom:0; height:55px; background:linear-gradient(180deg,transparent,rgba(20,29,42,.42)); pointer-events:none; }
.retro-selection-banner--world {
  background:
    linear-gradient(90deg, rgba(7,16,28,.22), rgba(7,16,28,0) 50%),
    url('/static/auth-original/server-banner.png') center center / cover no-repeat;
}
.retro-selection-banner--world::before { background: radial-gradient(circle at 18% 24%,rgba(255,255,255,.20),transparent 18%), linear-gradient(90deg,rgba(13,25,40,.24),transparent 60%); }
.retro-selection-banner__world { left: 60px; top: 18px; width: 260px; height: 205px; }
.retro-world-orb--banner { width: 145px; height:145px; border-width:7px; box-shadow: 0 18px 30px rgba(10,30,54,.25), 0 0 0 8px rgba(255,255,255,.10), inset 0 0 0 4px rgba(255,255,255,.12); }
.retro-selection-banner__copy {
  top: 64px;
  right: 48px;
  width: 465px;
  padding: 20px 23px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  background: rgba(250,247,236,.88);
  box-shadow: 0 18px 48px rgba(25,34,45,.17);
  backdrop-filter: blur(13px);
}
.retro-selection-banner__copy h1 { margin: 5px 0 8px; color:#24344b; font-size:38px; letter-spacing:-.035em; }
.retro-selection-banner__copy p { color:#647186; line-height:1.5; }
.retro-title-strip {
  min-height:54px;
  padding:0 28px;
  background: linear-gradient(100deg,#192638,#22334a);
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 5px 18px rgba(25,34,48,.12);
}
.retro-title-strip strong { font-size:15px; letter-spacing:.02em; }
.retro-title-strip > span { color:#b7c6d8; font-size:8px; letter-spacing:.06em; }
.retro-title-strip > span i { background:#78df7c; box-shadow:0 0 0 4px rgba(120,223,124,.10), 0 0 13px rgba(120,223,124,.35); }

/* SERVER SELECTION */
.retro-server-deck { grid-template-columns: repeat(4,minmax(0,1fr)); gap:16px; padding:24px 26px 18px; align-items:stretch; }
.retro-server-card {
  min-height: 338px;
  grid-template-rows: 224px 47px 1fr;
  border: 1px solid #d1c4a8;
  border-radius: 18px;
  background: #f7f0df;
  box-shadow: 0 11px 28px rgba(29,39,54,.10);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}
.retro-server-card:hover { transform:translateY(-5px); border-color:#89bde8; filter:none; box-shadow:0 18px 34px rgba(29,39,54,.16); }
.retro-server-card.is-selected { transform:translateY(-3px); border-color:#4ca9ea; box-shadow:0 0 0 3px rgba(76,169,234,.16),0 18px 40px rgba(29,39,54,.18); }
.retro-server-card__scene {
  background:
    radial-gradient(circle at 50% 28%, rgba(178,235,255,.95), rgba(76,170,230,.88) 28%, rgba(35,91,142,.94) 54%, #13253d 100%);
}
.retro-server-card__scene::before { content:""; position:absolute; inset:0; background:repeating-radial-gradient(circle at 50% 56%,rgba(255,255,255,.08) 0 1px,transparent 1px 18px); opacity:.42; }
.retro-server-card__scene::after { background:rgba(179,229,255,.18); }
.retro-server-card__recommended { position:absolute; z-index:5; top:12px; left:12px; padding:5px 8px; border:1px solid rgba(255,255,255,.20); border-radius:999px; color:#1a2a37; background:linear-gradient(#ffe38d,#f8bd4a); box-shadow:0 4px 12px rgba(25,35,45,.16); font-size:7px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.retro-server-card__solo { top:12px; right:12px; color:#e7f5ff; background:rgba(9,24,40,.56); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(8px); }
.retro-world-orb { z-index:2; transition:transform .2s ease, filter .2s ease; }
.retro-server-card:hover .retro-world-orb { transform:translateY(-3px) scale(1.04); filter:drop-shadow(0 10px 12px rgba(14,35,58,.28)); }
.retro-server-card__name { padding:7px 12px; background:linear-gradient(100deg,#314c70,#3d638c); }
.retro-server-card__name strong { font-size:14px; }
.retro-server-card__name span { color:#cbe5fb; }
.retro-server-card__population { padding:10px 11px; background:linear-gradient(180deg,#fffdf7,#eee2c8); }
.retro-server-card__population b { color:#2d3b50; font-size:10px; }
.retro-server-card__population small { color:#79818e; }
.retro-card-selection { right:10px; bottom:10px; width:27px; height:27px; background:#52b5ee; box-shadow:0 0 0 4px rgba(82,181,238,.12); }
.retro-server-card--locked { opacity:.42; filter:saturate(.25); }
.retro-server-card--locked:hover { transform:none; border-color:#d1c4a8; box-shadow:0 11px 28px rgba(29,39,54,.10); }
.retro-server-card--locked .retro-server-card__recommended { display:none; }
.retro-bottom-controls { min-height:76px; padding:13px 26px; border-top:1px solid rgba(118,96,58,.12); background:linear-gradient(180deg,#eadcb9,#ddc99e); }
.retro-selection-summary { padding:7px 12px; border:1px solid rgba(89,75,52,.10); border-radius:12px; background:rgba(255,255,255,.28); }
.retro-selection-summary small { color:#7d7e78; }
.retro-selection-summary strong { color:#334258; }

/* CHARACTER SELECTION */
.retro-selection-screen--characters { grid-template-rows:250px 54px auto 1fr auto; }
.retro-selection-banner--characters {
  background:
    linear-gradient(90deg, rgba(10,18,29,.10), rgba(10,18,29,0) 45%),
    url('/static/auth-original/characters-banner.png') center center / cover no-repeat;
}
.retro-selection-banner--characters::before { background:linear-gradient(180deg,rgba(10,19,31,.02),rgba(10,19,31,.16)); }
.retro-selection-banner__copy--characters { top:66px; right:48px; width:430px; }
.retro-character-stage {
  min-height: 385px;
  padding: 22px 30px 18px;
  gap:20px;
  background:
    radial-gradient(ellipse at 50% 20%,rgba(255,255,255,.72),transparent 38%),
    linear-gradient(180deg,#f8f1df,#e9dbb8);
}
.retro-character-slot { height:338px; border-radius:18px; transition:transform .16s ease; }
.retro-character-slot:hover { transform:translateY(-3px); }
.retro-character-slot__select { border-radius:18px 18px 0 0; overflow:hidden; }
.retro-character-slot__select::before { content:""; position:absolute; inset:18px 13px 15px; border:1px solid rgba(94,94,82,.09); border-radius:22px 22px 45% 45%; background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0)); opacity:0; transition:.18s ease; }
.retro-character-slot:hover .retro-character-slot__select::before,.retro-character-slot.is-selected .retro-character-slot__select::before { opacity:1; }
.retro-character-slot__select img { width:224px; height:256px; bottom:38px; transition:transform .18s ease,filter .18s ease; }
.retro-character-slot:hover .retro-character-slot__select img { transform:translateX(-50%) translateY(-7px) scale(1.02); }
.retro-character-slot.is-selected .retro-character-slot__select img { transform:translateX(-50%) translateY(-10px) scale(1.055); filter:drop-shadow(0 10px 5px rgba(46,46,38,.22)) drop-shadow(0 0 18px rgba(86,183,241,.36)); }
.retro-character-aura { left:50%; top:48%; width:250px; height:250px; transform:translate(-50%,-50%); }
.retro-character-slot.is-selected .retro-character-aura { background:radial-gradient(circle,rgba(102,205,255,.26),rgba(102,205,255,.05) 49%,transparent 70%); }
.retro-character-level { position:absolute; z-index:7; top:17px; left:17px; padding:5px 8px; border:1px solid rgba(255,255,255,.55); border-radius:999px; color:#395271; background:rgba(255,255,255,.74); box-shadow:0 5px 14px rgba(46,57,70,.08); backdrop-filter:blur(8px); font-size:8px; font-weight:900; }
.retro-character-pedestal { width:232px; }
.retro-character-slot.is-selected .retro-character-pedestal { filter:drop-shadow(0 8px 3px rgba(52,45,34,.14)) drop-shadow(0 0 17px rgba(81,178,235,.40)); }
.retro-character-nameplate { min-height:58px; margin:0 6px; border:1px solid #c4af81; border-radius:13px; background:linear-gradient(180deg,#314d71 0 56%,#eddaa7 56%); box-shadow:0 6px 18px rgba(51,55,50,.10); }
.retro-character-nameplate strong { font-size:13px; letter-spacing:.02em; }
.retro-character-nameplate span { color:#43516a; font-size:7px; }
.retro-character-nameplate button { width:23px; height:23px; border:1px solid rgba(255,255,255,.15); background:rgba(16,29,47,.34); }
.retro-character-slot.is-selected .retro-character-nameplate { border-color:#57b5ec; box-shadow:0 0 0 3px rgba(87,181,236,.16),0 9px 18px rgba(50,62,76,.15); }
.retro-character-slot--empty { opacity:.72; }
.retro-character-slot--empty:hover { opacity:1; }
.retro-character-question { font-size:72px; color:rgba(69,87,108,.34); text-shadow:none; }
.retro-character-slot--empty .retro-character-slot__select:hover .retro-character-question { color:#4da8e1; }

/* CHARACTER CREATOR */
.retro-creator-screen { min-height:760px; grid-template-rows:54px 1fr 72px; background:linear-gradient(180deg,#fbf7ed,#ecddbb); }
.retro-title-strip--creator { border-bottom:0; }
.retro-creator-grid { padding:20px 24px; grid-template-columns:minmax(0,1.35fr) minmax(370px,.65fr); gap:18px; background:radial-gradient(circle at 52% 12%,rgba(255,255,255,.55),transparent 26%); }
.retro-class-panel,.retro-character-studio { border:1px solid rgba(112,94,59,.15); border-radius:18px; background:linear-gradient(180deg,#fffaf0,#efe2c2); box-shadow:0 12px 30px rgba(35,43,53,.10); }
.retro-class-panel { padding:14px; }
.retro-subtitle { min-height:50px; margin-bottom:12px; border-radius:12px; background:linear-gradient(105deg,#344f72,#29405d); }
.retro-subtitle > span { background:linear-gradient(#ffe186,#f7b83e); box-shadow:0 4px 11px rgba(183,111,20,.15); }
.retro-subtitle strong { font-size:12px; }
.retro-subtitle small { color:#a9bfd5; }
.retro-class-grid { gap:8px; }
.retro-class-choice { height:99px; border:1px solid #d8c7a3; border-radius:12px; background:linear-gradient(180deg,#fffdf7,#efe2c5); box-shadow:0 4px 12px rgba(53,52,44,.04); transition:.15s ease; }
.retro-class-choice:hover { transform:translateY(-2px); border-color:#82bee8; background:#fff; box-shadow:0 9px 18px rgba(41,56,71,.09); }
.retro-class-choice.is-selected { border-color:#4aa9e8; background:linear-gradient(180deg,#fff,#eaf7ff); box-shadow:0 0 0 3px rgba(74,169,232,.12),0 8px 16px rgba(41,56,71,.08); }
.retro-class-choice__portrait { border:1px solid rgba(83,111,136,.08); background:radial-gradient(circle,#f8fcff,#deeffa); }
.retro-class-choice__text strong { color:#34445b; }
.retro-class-choice__text small { color:#7a8797; }
.retro-character-studio { padding:14px; grid-template-rows:270px auto 1fr; }
.retro-studio-stage { border:1px solid rgba(255,255,255,.52); border-radius:16px; background:linear-gradient(180deg,rgba(19,32,50,.06),rgba(19,32,50,.15)),url('/static/auth-original/create-bg.png') center center / cover no-repeat; box-shadow:inset 0 0 0 1px rgba(65,86,110,.12); }
.retro-studio-stage::after { background:radial-gradient(circle at 50% 39%,rgba(255,255,255,.40),transparent 30%),linear-gradient(180deg,transparent,rgba(16,28,42,.12)); }
.retro-studio-rays { opacity:.48; }
.retro-studio-stage > img { width:250px; height:258px; filter:drop-shadow(0 10px 5px rgba(42,53,54,.20)); }
.retro-studio-class { left:11px; bottom:11px; border:1px solid rgba(255,255,255,.14); border-radius:10px; background:rgba(18,32,48,.74); backdrop-filter:blur(8px); }
.retro-studio-class small { color:#9bdcff; }
.retro-class-description { border:1px solid #d8c69f; border-left:4px solid #55b4ee; border-radius:10px; background:rgba(255,252,244,.85); }
.retro-class-description b { color:#3d91c9; }
.retro-class-description p { color:#6e7580; }
.retro-color-picker { border:1px solid #d5c39c; border-radius:10px; background:rgba(255,255,255,.40); }
.retro-color-picker input[type="color"] { height:40px; border:1px solid #bba77f; border-radius:9px; }
.retro-creator-footer { min-height:72px; padding:11px 24px; border-top:1px solid rgba(112,94,59,.14); background:linear-gradient(180deg,#e9dbb8,#ddc99e); }
.retro-creator-footer span { color:#77776f; }

/* In-game badge */
.in-game-account-badge { top:10px; right:10px; padding:7px 8px 7px 12px; border:1px solid rgba(255,255,255,.15); border-radius:13px; background:rgba(19,30,45,.82); backdrop-filter:blur(12px); box-shadow:0 8px 24px rgba(0,0,0,.24); }
.in-game-account-badge small { color:#9dcce8; }
.in-game-account-badge button { border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); }

/* Responsive */
@media (max-width: 1180px) {
  .retro-client { width:calc(100vw - 18px); margin:9px auto; }
  .retro-journey { display:none; }
  .retro-login-screen { grid-template-columns:minmax(0,1.28fr) 390px; }
  .retro-login-hero__copy { width:390px; }
  .retro-server-deck { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .retro-server-card { min-height:300px; }
  .retro-creator-grid { grid-template-columns:1fr; overflow:auto; }
  .retro-character-studio { min-height:590px; }
}

@media (max-width: 820px) {
  body.account-gate-active { overflow:auto; }
  .account-gate { position:absolute; min-height:100vh; }
  .retro-client { min-height:calc(100vh - 10px); margin:5px auto; grid-template-rows:60px 1fr 28px; }
  .retro-brand { min-width:0; }
  .retro-client__rail-actions { min-width:auto; }
  .retro-live-status { display:none; }
  .retro-login-screen { display:block; min-height:720px; }
  .retro-login-hero { display:block; min-height:260px; }
  .retro-login-hero__copy { left:18px; right:18px; top:26px; width:auto; padding:18px 20px; }
  .retro-login-hero__copy h1 { font-size:35px; max-width:none; }
  .retro-login-hero__copy p { max-width:none; }
  .retro-login-hero__chips,.retro-hero-proof { display:none; }
  .retro-form-panel { min-height:500px; padding:28px 24px 35px; border-left:0; }
  .retro-register-screen { padding:22px; grid-template-columns:1fr; }
  .retro-register-banner { display:none; }
  .retro-account-fields { grid-template-columns:1fr; }
  .retro-top-tab { min-width:150px; top:8px; }
  .retro-top-tab--server { left:10px; }
  .retro-top-tab--account { right:10px; }
  .retro-selection-screen,.retro-selection-screen--characters { overflow:auto; grid-template-rows:210px 52px auto 1fr auto; }
  .retro-selection-banner__world { display:none; }
  .retro-selection-banner__copy,.retro-selection-banner__copy--characters { left:18px; right:18px; top:54px; width:auto; }
  .retro-selection-banner__copy h1 { font-size:31px; }
  .retro-title-strip { padding:0 18px; }
  .retro-server-deck { grid-template-columns:1fr; padding:18px; }
  .retro-server-card { max-width:520px; width:100%; margin:0 auto; }
  .retro-character-stage { grid-template-columns:1fr; padding:22px 18px; }
  .retro-character-slot { width:min(400px,100%); margin:0 auto; }
  .retro-bottom-controls { grid-template-columns:1fr; gap:9px; padding:13px 18px; }
  .retro-bottom-controls > *,.retro-bottom-controls > :last-child,.retro-bottom-controls--characters > :nth-child(2) { justify-self:stretch; }
  .retro-selection-summary { justify-content:center; }
  .retro-class-grid { grid-template-columns:repeat(2,1fr); }
  .retro-creator-grid { padding:14px; }
  .retro-creator-footer { align-items:stretch; flex-direction:column; }
}

@media (max-width: 560px) {
  .retro-client { width:calc(100vw - 8px); }
  .retro-client__rail { padding:0 12px; border-radius:17px 17px 0 0; }
  .retro-brand__egg { width:36px; height:36px; font-size:18px; }
  .retro-brand strong { font-size:11px; }
  .retro-brand strong mark { display:none; }
  .retro-brand small { display:none; }
  .retro-client__frame { border-radius:0 0 19px 19px; }
  .retro-client__footer { font-size:6px; }
  .retro-footer-secure,.retro-client__footer b:last-of-type { display:none; }
  .retro-login-hero { min-height:235px; }
  .retro-login-hero__copy { top:20px; }
  .retro-login-hero__copy h1 { font-size:31px; }
  .retro-form-panel { padding:22px 16px 28px; }
  .retro-top-tab { display:none; }
  .retro-selection-banner__copy,.retro-selection-banner__copy--characters { top:44px; padding:16px; }
  .retro-selection-banner__copy h1 { font-size:28px; }
  .retro-title-strip { gap:8px; }
  .retro-title-strip > span { display:none; }
  .retro-server-deck { padding:14px; }
  .retro-class-grid { grid-template-columns:1fr; }
  .retro-character-studio { padding:10px; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-atmosphere span { animation:none; }
  .retro-button,.retro-server-card,.retro-world-orb,.retro-character-slot,.retro-character-slot__select img,.retro-class-choice { transition:none !important; }
}

/* ==========================================================================
   Single-page desktop refinement + selection performance polish
   Keeps the whole auth flow visible on one screen on large displays.
   ========================================================================== */
@media (min-width: 1181px) {
  body.account-gate-active { overflow: hidden; }

  .account-gate {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  .retro-client {
    width: min(1460px, calc(100vw - 24px));
    height: calc(100vh - 16px);
    min-height: 0;
    margin: 8px auto;
    grid-template-rows: 62px minmax(0, 1fr) 20px;
  }

  .retro-client__rail {
    min-height: 62px;
    padding: 0 16px 0 18px;
  }

  .retro-brand { min-width: 228px; }
  .retro-brand__egg { width: 38px; height: 38px; font-size: 20px; }
  .retro-brand strong { font-size: 13px; }
  .retro-brand small { font-size: 7px; }

  .retro-journey__step i { width: 21px; height: 21px; }
  .retro-journey em { width: 18px; }

  .retro-client__frame,
  .retro-client__body,
  .retro-login-screen,
  .retro-register-screen,
  .retro-selection-screen,
  .retro-selection-screen--characters,
  .retro-creator-screen {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .retro-client__frame { overflow: hidden; }
  .retro-client__body { display: block; }
  .retro-client__footer { font-size: 7px; }

  .retro-top-tab {
    top: 8px;
    min-width: 170px;
    min-height: 38px;
    padding: 7px 12px;
  }

  .retro-top-tab small { font-size: 6px; }
  .retro-top-tab strong { font-size: 10px; }
  .retro-top-tab strong span { font-size: 8px; }

  .retro-button {
    min-height: 40px;
    padding: 9px 18px;
    font-size: 11px;
  }

  .retro-button--wide { min-height: 48px; font-size: 13px; }
  .retro-button--play,
  .retro-button--select { min-height: 46px; font-size: 13px; }

  /* Login */
  .retro-login-screen {
    grid-template-columns: minmax(0, 1.58fr) minmax(350px, 0.72fr);
  }

  .retro-login-hero,
  .retro-form-panel {
    min-height: 0;
    height: 100%;
  }

  .retro-login-hero__copy {
    left: 22px;
    top: 22px;
    width: min(430px, calc(100% - 44px));
    padding: 20px 22px 18px;
  }

  .retro-login-hero__copy h1 {
    font-size: clamp(34px, 2.8vw, 50px);
    max-width: 340px;
  }

  .retro-login-hero__copy p {
    max-width: 360px;
    font-size: 10px;
    line-height: 1.5;
  }

  .retro-login-hero__chips { margin-top: 12px; }
  .retro-login-hero__chips span { padding: 5px 8px; }

  .retro-hero-proof {
    left: 22px;
    bottom: 16px;
    gap: 12px;
    padding: 10px 14px;
  }

  .retro-hero-proof strong { font-size: 14px; }

  .retro-form-panel {
    padding: 62px 28px 16px;
  }

  .retro-panel-title {
    min-height: 48px;
    margin: 0 0 16px;
  }

  .retro-panel-title span { font-size: 15px; }
  .retro-form-panel__inner { padding: 0; }
  .retro-form-intro { margin-bottom: 16px; padding: 11px 12px; }
  .retro-form-intro__icon { width: 34px; height: 34px; }
  .retro-form { gap: 12px; }
  .retro-field { min-height: 44px; }
  .retro-local-note { font-size: 9px; }

  /* Register */
  .retro-register-screen {
    grid-template-columns: minmax(280px, 0.76fr) minmax(0, 1.24fr);
    gap: 24px;
    padding: 24px 28px;
  }

  .retro-register-banner,
  .retro-register-card {
    min-height: 0;
  }

  .retro-register-banner {
    padding: 26px;
  }

  .retro-register-banner__orb {
    width: 76px;
    height: 76px;
    margin-bottom: 16px;
    font-size: 34px;
  }

  .retro-register-banner h1 { font-size: 32px; }
  .retro-register-card { padding: 18px; }
  .retro-account-fields { gap: 12px; }

  /* Shared selection */
  .retro-selection-screen {
    grid-template-rows: 160px 42px minmax(0, 1fr) 64px;
  }

  .retro-selection-screen--characters {
    grid-template-rows: 160px 42px auto minmax(0, 1fr) 64px;
  }

  .retro-selection-banner::after { height: 34px; }

  .retro-selection-banner__world {
    left: 28px;
    top: 10px;
    width: 170px;
    height: 140px;
  }

  .retro-world-orb--banner {
    width: 108px;
    height: 108px;
    border-width: 6px;
    font-size: 50px;
  }

  .retro-selection-banner__copy,
  .retro-selection-banner__copy--characters {
    top: 24px;
    right: 24px;
    width: min(410px, calc(100% - 48px));
    padding: 16px 18px;
  }

  .retro-selection-banner__copy h1 {
    margin: 4px 0 6px;
    font-size: 30px;
  }

  .retro-selection-banner__copy p {
    font-size: 10px;
    line-height: 1.42;
  }

  .retro-title-strip {
    min-height: 42px;
    padding: 0 18px;
  }

  .retro-title-strip strong { font-size: 14px; }

  .gate-error--selection {
    margin: 6px 18px 0;
    padding: 8px 10px;
  }

  .retro-bottom-controls {
    min-height: 64px;
    padding: 10px 18px;
    gap: 14px;
  }

  .retro-selection-summary strong { font-size: 11px; }

  /* Server selection */
  .retro-server-deck {
    min-height: 0;
    padding: 14px 18px 10px;
    gap: 12px;
  }

  .retro-server-card {
    min-height: 0;
    grid-template-rows: 158px 40px 1fr;
    contain: layout paint;
    will-change: transform;
  }

  .retro-server-card:hover { transform: translateY(-3px); }
  .retro-server-card.is-selected { transform: translateY(-2px); }

  .retro-world-orb {
    width: 104px;
    height: 104px;
    border-width: 8px;
    font-size: 44px;
  }

  .retro-world-orb i,
  .retro-world-orb b { border-top-width: 8px; }
  .retro-world-orb i { width: 50px; height: 24px; left: -14px; top: 18px; }
  .retro-world-orb b { width: 56px; height: 24px; right: -20px; bottom: 18px; }

  .retro-server-card__name { padding: 7px 11px; }
  .retro-server-card__name strong { font-size: 13px; }
  .retro-server-card__population { padding: 9px 10px; }
  .retro-server-card__population b { font-size: 10px; }
  .retro-server-card__population small { font-size: 8px; }

  /* Character selection */
  .retro-roster {
    left: 18px;
    right: 375px;
    bottom: -18px;
    height: 176px;
  }

  .retro-roster__hero {
    width: 110px;
    height: 170px;
    margin: 0 -18px;
  }

  .retro-selection-banner__copy--characters {
    width: min(390px, calc(100% - 48px));
  }

  .retro-character-stage {
    min-height: 0;
    height: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    padding: 10px 16px 8px;
    align-items: stretch;
    overflow: hidden;
  }

  .retro-character-slot {
    height: 250px;
    grid-template-rows: 1fr 52px;
    contain: layout paint;
  }

  .retro-character-slot__select::before {
    inset: 10px 8px 12px;
    border-radius: 18px 18px 40% 40%;
  }

  .retro-character-slot__select img {
    width: 132px;
    height: 160px;
    bottom: 26px;
  }

  .retro-character-aura {
    width: 140px;
    height: 140px;
    bottom: 44px;
  }

  .retro-character-level {
    top: 12px;
    left: 12px;
    padding: 4px 7px;
  }

  .retro-character-pedestal {
    width: 152px;
    height: 42px;
    bottom: 10px;
  }

  .retro-character-pedestal::after {
    left: 18px;
    right: 18px;
    top: 7px;
    bottom: 11px;
  }

  .retro-character-pedestal i,
  .retro-character-pedestal b {
    width: 24px;
    height: 12px;
  }

  .retro-character-pedestal i { left: 10px; top: 18px; }
  .retro-character-pedestal b { right: 12px; top: 16px; }

  .retro-character-question {
    bottom: 56px;
    font-size: 84px;
  }

  .retro-character-nameplate {
    height: 52px;
    padding: 6px 30px 6px 10px;
  }

  .retro-character-nameplate strong { font-size: 12px; }
  .retro-character-nameplate span { font-size: 6px; }

  .retro-character-nameplate button {
    right: 5px;
    top: 14px;
    width: 20px;
    height: 20px;
    font-size: 14px;
  }

  .retro-bottom-controls--characters {
    grid-template-columns: 1fr auto auto;
  }

  /* Character creator */
  .retro-creator-screen {
    grid-template-rows: 42px minmax(0, 1fr) 58px;
  }

  .retro-title-strip--creator { min-height: 42px; }

  .retro-creator-grid {
    min-height: 0;
    padding: 12px 16px;
    gap: 12px;
  }

  .retro-class-panel,
  .retro-character-studio { overflow: hidden; }

  .retro-class-panel { padding: 12px; }
  .retro-subtitle { min-height: 44px; margin-bottom: 10px; }
  .retro-class-grid { gap: 6px; }

  .retro-class-choice {
    height: 82px;
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .retro-class-choice__portrait { height: 64px; }
  .retro-class-choice__portrait img { width: 58px; height: 72px; }
  .retro-class-choice__text strong { font-size: 11px; }
  .retro-class-choice__text small { font-size: 7px; }

  .retro-character-studio {
    grid-template-rows: 220px auto 1fr;
    padding: 12px;
  }

  .retro-studio-stage > img {
    width: 182px;
    height: 190px;
  }

  .retro-character-pedestal--studio {
    width: 170px;
    height: 42px;
  }

  .retro-class-description {
    min-height: 48px;
    padding: 8px 9px;
  }

  .retro-character-form { gap: 10px; }
  .retro-color-picker { padding: 8px; }
  .retro-color-picker input[type="color"] { height: 34px; }

  .retro-creator-footer {
    min-height: 58px;
    padding: 8px 16px;
  }

  .retro-creator-footer span { font-size: 9px; }
}

/* ==========================================================================
   CHARACTER SELECTION — coherent final layout
   One source of truth. No stacked portrait/position overrides below this.
   ========================================================================== */

/* Remove GPU-heavy glass / blur effects from the launcher. */
.account-gate,
.account-gate * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.account-gate .premium-atmosphere { display: none !important; }
.account-gate .premium-atmosphere span { animation: none !important; filter: none !important; }
.account-gate .retro-server-card__scene::after { filter: none !important; opacity: .08; }
.account-gate .retro-client,
.account-gate .retro-roster__hero,
.account-gate .retro-character-slot__select img,
.account-gate .retro-character-pedestal,
.account-gate .retro-studio-stage > img,
.account-gate .retro-world-orb { filter: none !important; }

@media (min-width: 1181px) {
  /* The character screen is a simple vertical composition:
     banner -> title -> selection -> actions. */
  .retro-selection-screen--characters {
    grid-template-rows: 148px 40px auto minmax(0, 1fr) 70px;
  }

  .retro-selection-screen--characters .gate-error--selection[hidden] {
    display: none;
  }

  .retro-selection-banner__copy--characters {
    top: 18px;
    right: 20px;
    width: 380px;
    padding: 14px 17px;
  }

  .retro-selection-banner__copy--characters h1 {
    margin: 3px 0 5px;
    font-size: 29px;
  }

  .retro-selection-banner__copy--characters p {
    font-size: 9px;
    line-height: 1.4;
  }

  .retro-roster {
    left: 16px;
    right: 365px;
    bottom: -11px;
    height: 166px;
  }

  .retro-roster__hero {
    width: 106px;
    height: 164px;
    margin: 0 -17px;
  }

  /* Five clean, equal selection columns. */
  .retro-character-stage {
    height: 100%;
    min-height: 0;
    padding: 16px 18px 14px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    align-items: center;
    align-content: center;
    background:
      radial-gradient(ellipse at 50% 12%, rgba(255,255,255,.72), transparent 42%),
      linear-gradient(180deg, #faf4e5 0%, #efe1bd 100%);
  }

  .retro-character-slot {
    width: 100%;
    height: min(390px, 47vh);
    min-height: 330px;
    max-height: 390px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 68px;
    align-self: center;
    border-radius: 18px;
    transform: none;
    contain: layout paint;
  }

  .retro-character-slot:hover {
    transform: none;
  }

  .retro-character-slot__select {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(75, 93, 111, .10);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background:
      radial-gradient(circle at 50% 62%, rgba(111, 204, 241, .13), transparent 30%),
      linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.05));
  }

  .retro-character-slot__select::before {
    inset: 12px 10px 8px;
    border: 1px solid rgba(66, 91, 116, .07);
    border-radius: 18px 18px 42% 42%;
    opacity: 1;
    background: linear-gradient(180deg, rgba(255,255,255,.12), transparent 70%);
  }

  .retro-character-slot.is-selected .retro-character-slot__select {
    border-color: rgba(74, 171, 230, .50);
    box-shadow: inset 0 0 0 1px rgba(74, 171, 230, .14);
  }

  /* The URL uses the server-side alpha-trimmed portrait. Height is what
     matters for these tall/narrow Dofus sprites. */
  .retro-character-slot__select img {
    z-index: 4;
    width: 260px;
    height: min(320px, 38vh);
    max-width: 96%;
    max-height: 320px;
    bottom: 18px;
    object-fit: contain;
    object-position: 50% 100%;
    transform: translateX(-50%);
    image-rendering: auto;
    transition: transform 80ms ease !important;
  }

  .retro-character-slot:hover .retro-character-slot__select img {
    transform: translateX(-50%) translateY(-2px) scale(1.01);
  }

  .retro-character-slot.is-selected .retro-character-slot__select img {
    transform: translateX(-50%) translateY(-3px) scale(1.025);
  }

  .retro-character-aura {
    left: 50%;
    top: auto;
    bottom: 42px;
    width: 205px;
    height: 205px;
    transform: translateX(-50%);
    background: transparent;
  }

  .retro-character-slot.is-selected .retro-character-aura {
    background: radial-gradient(circle, rgba(90, 194, 244, .18), rgba(90,194,244,.05) 48%, transparent 70%);
  }

  .retro-character-level {
    top: 12px;
    left: 12px;
    z-index: 7;
    padding: 6px 10px;
    border: 1px solid rgba(41, 63, 86, .13);
    border-radius: 999px;
    color: #263d5b;
    background: #fffdf8;
    box-shadow: 0 3px 8px rgba(40, 50, 62, .06);
    font-size: 9px;
    font-weight: 900;
  }

  .retro-character-pedestal {
    z-index: 3;
    width: min(88%, 205px);
    height: 52px;
    bottom: 3px;
    filter: none !important;
  }

  .retro-character-slot.is-selected .retro-character-pedestal {
    filter: none !important;
  }

  /* Empty slots should be visually secondary, not compete with a character. */
  .retro-character-slot--empty {
    opacity: .78;
  }

  .retro-character-slot--empty:hover {
    opacity: .94;
  }

  .retro-character-slot--empty .retro-character-slot__select {
    background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.03));
  }

  .retro-character-question {
    bottom: 66px;
    color: rgba(63, 79, 96, .24);
    font-size: 88px;
    text-shadow: none;
  }

  .retro-character-slot--empty .retro-character-slot__select:hover .retro-character-question {
    color: rgba(61, 146, 201, .48);
  }

  /* Readable identity card. */
  .retro-character-nameplate {
    height: 68px;
    min-height: 68px;
    margin: 0;
    padding: 9px 38px 8px 12px;
    display: grid;
    align-content: center;
    gap: 5px;
    border: 1px solid #bfa873;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(180deg, #34557d 0 58%, #efd99f 58% 100%);
    box-shadow: 0 5px 14px rgba(48, 54, 62, .08);
  }

  .retro-character-nameplate strong {
    color: #fff;
    font-size: 15px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: .01em;
    text-shadow: 0 1px rgba(0,0,0,.18);
  }

  .retro-character-nameplate span {
    color: #35465e;
    font-size: 8px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: .01em;
  }

  .retro-character-nameplate button {
    right: 8px;
    top: 13px;
    width: 27px;
    height: 27px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(14, 29, 47, .45);
    font-size: 17px;
  }

  .retro-character-slot.is-selected .retro-character-nameplate {
    border-color: #55b9ef;
    box-shadow: 0 0 0 2px rgba(85,185,239,.15), 0 6px 16px rgba(48,54,62,.10);
  }

  .retro-character-slot--empty .retro-character-nameplate {
    opacity: .82;
    padding-right: 12px;
    background: linear-gradient(180deg, #7f8c92 0 58%, #ead7a5 58% 100%);
  }

  .retro-character-slot--empty .retro-character-nameplate strong {
    color: #fff;
    font-size: 13px;
  }

  .retro-character-slot--empty .retro-character-nameplate span {
    color: #65707a;
    font-size: 8px;
  }

  /* Action row: three deliberate buttons, no giant stretched back button. */
  .retro-bottom-controls--characters {
    min-height: 70px;
    padding: 11px 18px;
    display: grid;
    grid-template-columns: 190px minmax(220px, 1fr) 190px;
    align-items: center;
    gap: 16px;
    border-top: 1px solid rgba(116, 92, 52, .15);
    background: linear-gradient(180deg, #ead9ad, #ddc691);
  }

  .retro-bottom-controls--characters > :first-child {
    justify-self: start;
    width: 190px;
  }

  .retro-bottom-controls--characters > :nth-child(2) {
    justify-self: center;
    width: 220px;
  }

  .retro-bottom-controls--characters > :last-child {
    justify-self: end;
    width: 190px;
  }

  .retro-bottom-controls--characters .retro-button {
    min-height: 46px;
  }

  .retro-bottom-controls--characters .retro-button--play {
    min-width: 220px;
    font-size: 14px;
  }

  .retro-server-card,
  .retro-character-slot,
  .retro-character-slot__select img,
  .retro-world-orb,
  .retro-class-choice,
  .retro-button {
    will-change: auto !important;
  }
}