/* Fethi Online - login / register / character create / character select (js/front.js).
   Art: assets/login/ (tools/build_login_art.py): orig_* = original client art, bg_* / logo = generated. */
#front {
  --fe-gold: #e3c278; --fe-gold-hi: #fbe7ae; --fe-gold-lo: #9c7a35; --fe-ink: #071319; --fe-teal: #0f2c37;
  --fe-teal2: #163d4b; --fe-line: rgba(227, 194, 120, .55); --fe-text: #ecE4cf; --fe-muted: #9fb3b5; --fe-red: #ff8f7a;
  --fe-ok: #9fe0a8; --fe-serif: "Palatino Linotype", "Book Antiqua", Palatino, "Hoefler Text", Georgia, serif;
  position: fixed; inset: 0; z-index: 60; overflow: hidden; color: var(--fe-text); background: #050b10;
  font: 14px/1.4 "Segoe UI", system-ui, -apple-system, sans-serif; transition: opacity .6s ease;
}
#front[hidden] { display: none; }
#front.fe-fade { opacity: 0; pointer-events: none; }

/* backgrounds: slow drift, cross-fade between the city (login / register) and the hall (characters) */
.fe-bg { position: absolute; inset: -3%; background: center / cover no-repeat; opacity: 0; transition: opacity 1.1s ease;
  animation: fe-drift 46s ease-in-out infinite alternate; }
.fe-bg-login { background-image: url(assets/login/bg_login.webp); }
.fe-bg-hall { inset: 0; background-image: url(assets/login/bg_hall.webp); animation: none;
  background-size: var(--bgw, cover); background-position: var(--bgx, center) var(--bgy, center); }   /* fixed: the hero stands on its dais */
#front[data-screen="login"] .fe-bg-login, #front[data-screen="register"] .fe-bg-login { opacity: 1; }
#front[data-screen="select"] .fe-bg-hall, #front[data-screen="enter"] .fe-bg-hall { opacity: 1; }
/* create: the teal stone of the client's create dialog (DialogRoleCreate1024.dds) behind the original scroll scene */
.fe-bg-stone { inset: 0; animation: none; background: radial-gradient(ellipse at 50% 42%, rgba(30, 70, 84, .15), rgba(2, 10, 14, .55) 80%),
  url(assets/login/scene_stone.webp) center / 960px auto repeat; }
#front[data-screen="create"] .fe-bg-stone { opacity: 1; }
@keyframes fe-drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1.2%, -.8%); } }
.fe-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(2, 8, 12, .55) 75%, rgba(2, 6, 9, .9) 100%),
    linear-gradient(to bottom, rgba(3, 10, 14, .35), transparent 22%, transparent 70%, rgba(3, 10, 14, .6)); }
.fe-embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fe-embers i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
  background: radial-gradient(circle, #ffe9a8, rgba(255, 196, 90, .0) 70%); box-shadow: 0 0 6px 2px rgba(255, 190, 90, .35);
  animation: fe-rise linear infinite; opacity: 0; }
@keyframes fe-rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 80% { opacity: .5; }
  100% { transform: translate(var(--dx, 40px), -105vh); opacity: 0; } }

/* screens */
.fe-screen { position: absolute; inset: 0; display: none; }
#front[data-screen="login"] .fe-login-screen, #front[data-screen="register"] .fe-register-screen,
#front[data-screen="enter"] .fe-enter-screen { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; padding: 16px; animation: fe-in .55s ease both; }
#front[data-screen="create"] .fe-create-screen, #front[data-screen="select"] .fe-select-screen { display: grid;
  animation: fe-in .55s ease both; }
@keyframes fe-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.fe-logo { width: min(460px, 36vw, 44vh); height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .65));
  margin-bottom: 14px; animation: fe-glow 6s ease-in-out infinite alternate; }
.fe-logo-sm { width: min(340px, 28vw, 30vh); }
/* the gold crest sits 40 px above the panel (.fe-crest top: -40px): the logo keeps clear of it */
.fe-login-screen .fe-logo, .fe-register-screen .fe-logo { margin-bottom: clamp(30px, 5vh, 50px); }
@keyframes fe-glow { from { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .65)); }
  to { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .65)) drop-shadow(0 0 14px rgba(240, 200, 110, .28)); } }

/* panels: dark teal glass, double gold rule, original dragon crest on top */
.fe-panel { position: relative; background: linear-gradient(180deg, rgba(16, 44, 56, .9), rgba(7, 21, 28, .93));
  border: 1px solid var(--fe-line); border-radius: 6px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55),
  inset 0 0 0 3px rgba(5, 15, 20, .85), inset 0 0 0 4px rgba(227, 194, 120, .22), inset 0 1px 30px rgba(120, 200, 210, .06);
  backdrop-filter: blur(6px); }
.fe-panel::before, .fe-panel::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border: 2px solid var(--fe-gold); opacity: .8; }
.fe-panel::before { left: 6px; top: 6px; border-right: 0; border-bottom: 0; }
.fe-panel::after { right: 6px; bottom: 6px; border-left: 0; border-top: 0; }
.fe-login { width: min(380px, calc(100vw - 32px)); padding: 46px 30px 22px; margin-top: 26px; }
.fe-crest { position: absolute; left: 50%; top: -40px; width: 250px; transform: translateX(-50%); pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .6)); }
.fe-title { margin: 0 0 6px; text-align: center; font: 600 22px/1.2 var(--fe-serif); letter-spacing: 3px;
  text-transform: uppercase; color: var(--fe-gold); text-shadow: 0 1px 0 #000, 0 0 12px rgba(227, 194, 120, .25); }
.fe-realm { text-align: center; font-size: 12.5px; color: var(--fe-muted); margin-bottom: 14px; }
.fe-realm b { color: var(--fe-text); font-weight: 600; }
.fe-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0;
  background: #7f8c8d; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.fe-dot.on { background: #4ade80; box-shadow: 0 0 8px #4ade80; } .fe-dot.off { background: #ef4444; }
.fe-muted { color: var(--fe-muted); font-style: normal; }

.fe-field { display: block; margin: 12px 0; }
.fe-field > span:first-child { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .6px; color: #c7d2cc; }
#front input:not([type="checkbox"]) { display: block; width: 100%; height: 40px; padding: 0 12px; border-radius: 4px;
  border: 1px solid rgba(160, 200, 205, .25); background: rgba(2, 10, 14, .72); color: #f4efe2; font-size: 15px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); outline: none; transition: border-color .2s, box-shadow .2s; }
#front input:focus { border-color: var(--fe-gold); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 0 0 3px rgba(227, 194, 120, .18); }
#front input.bad { border-color: #d0624f; } #front input.good { border-color: #5fae7a; }
.fe-pw { position: relative; display: block; }
.fe-pw input { padding-right: 44px !important; }
.fe-eye { position: absolute; right: 4px; top: 4px; width: 34px; height: 32px; border: 0; border-radius: 3px; cursor: pointer;
  background: transparent center / 20px no-repeat; opacity: .7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3c278' stroke-width='1.8'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.fe-eye.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3c278' stroke-width='1.8'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E"); }
.fe-eye:hover, .fe-eye:focus-visible { opacity: 1; background-color: rgba(227, 194, 120, .1); outline: none; }
.fe-hint { display: block; min-height: 1.2em; margin-top: 5px; font-size: 11.5px; line-height: 1.35; color: var(--fe-muted); }
.fe-hint.bad { color: var(--fe-red); } .fe-hint.good { color: var(--fe-ok); }
.fe-meter { display: flex; gap: 4px; margin-top: 8px; }
.fe-meter i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); transition: background .25s; }
.fe-meter[data-s="1"] i:nth-child(-n+1) { background: #d0624f; }
.fe-meter[data-s="2"] i:nth-child(-n+2) { background: #e0a040; }
.fe-meter[data-s="3"] i:nth-child(-n+3) { background: #c9c45a; }
.fe-meter[data-s="4"] i { background: #5fae7a; }
.fe-row { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 12px; font-size: 12.5px; }
.fe-check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: #c7d2cc; }
.fe-check input { accent-color: #c9a35a; width: 15px; height: 15px; margin: 0; }
.fe-caps { color: #f0c060; font-size: 11.5px; }

.fe-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px;
  padding: 0 22px; border-radius: 4px; cursor: pointer; font: 600 15px/1 var(--fe-serif); letter-spacing: 1.5px;
  transition: filter .15s, transform .08s, box-shadow .2s; user-select: none; }
.fe-btn:active:not(:disabled) { transform: translateY(1px); }
.fe-btn:disabled { cursor: wait; filter: grayscale(.6) brightness(.75); }
.fe-btn-gold { width: 100%; color: #2a1a05; border: 1px solid #f5dc9b;
  background: linear-gradient(180deg, #fbe39e 0%, #e0b85c 45%, #b98a35 55%, #d8b061 100%);
  box-shadow: 0 0 0 1px #5b3f12, 0 4px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
  text-shadow: 0 1px 0 rgba(255, 240, 200, .6); }
.fe-btn-gold:hover:not(:disabled), .fe-btn-gold:focus-visible { filter: brightness(1.08); outline: none;
  box-shadow: 0 0 0 1px #5b3f12, 0 0 18px rgba(240, 200, 110, .45), inset 0 1px 0 rgba(255, 255, 255, .6); }
.fe-btn-ghost { color: var(--fe-gold); background: rgba(5, 16, 22, .6); border: 1px solid var(--fe-line); }
.fe-btn-ghost:hover, .fe-btn-ghost:focus-visible { background: rgba(227, 194, 120, .1); outline: none; }
.fe-btn-red { color: #ffd2c6; background: linear-gradient(180deg, #7a2a22, #4d1712); border: 1px solid #a8453a; }
.fe-btn-red:hover, .fe-btn-red:focus-visible { filter: brightness(1.15); outline: none; }
.fe-btn-lg { height: 52px; font-size: 18px; letter-spacing: 3px; }
.fe-btn.busy::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor;
  border-right-color: transparent; animation: fe-spin .8s linear infinite; }
@keyframes fe-spin { to { transform: rotate(360deg); } }
.fe-login .fe-btn-gold { margin-top: 6px; }
.fe-alt { margin-top: 14px; text-align: center; font-size: 13px; color: var(--fe-muted); }
#front a { color: var(--fe-gold); text-decoration: none; border-bottom: 1px dotted rgba(227, 194, 120, .5); }
#front a:hover, #front a:focus-visible { color: var(--fe-gold-hi); outline: none; }
.fe-adv { margin-top: 12px; font-size: 12px; color: var(--fe-muted); }
.fe-adv summary { cursor: pointer; width: max-content; margin: 0 auto; }
.fe-adv input { height: 32px !important; font-size: 13px !important; }
.fe-help { font-size: 11.5px; margin: 6px 0 0; }

#status { position: absolute; left: 50%; bottom: 3.2vh; transform: translateX(-50%); z-index: 5; margin: 0;
  max-width: min(640px, calc(100vw - 32px)); padding: 0; text-align: center; font-size: 14px; color: #ffd6a0;
  text-shadow: 0 1px 2px #000, 0 0 8px #000; pointer-events: none; white-space: pre-line; }
#status:not(:empty) { padding: 9px 18px; border-radius: 4px; background: rgba(4, 12, 16, .82); border: 1px solid rgba(227, 194, 120, .35);
  animation: fe-in .3s ease both; }
#status.err { color: #ffb4a3; border-color: rgba(220, 110, 90, .55); } #status.ok { color: #c9f2cf; }

/* create + select layout */
.fe-create-screen { grid-template-columns: 1fr clamp(264px, 22vw, 380px);
  grid-template-rows: auto 1fr auto; gap: 0 22px; padding: 2.2vh 2.4vw 7vh; }
.fe-select-screen { grid-template-columns: 1fr minmax(300px, 380px) ; grid-template-rows: auto 1fr; gap: 0 3vw;
  padding: 2.2vh 6vw 7vh; }
.fe-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 18px; padding: 0 4px 1.6vh;
  border-bottom: 1px solid rgba(227, 194, 120, .25); margin-bottom: 1.8vh; }
.fe-head h2 { margin: 0; font: 600 26px/1.2 var(--fe-serif); color: var(--fe-gold); letter-spacing: 1px;
  text-shadow: 0 2px 4px #000, 0 0 14px rgba(227, 194, 120, .2); }
.fe-head .fe-muted { font-size: 13px; }

/* class portraits: the original colour illustrations, the choice is made with them */
.fe-classes { grid-column: 1 / -1; grid-row: 3; display: flex; justify-content: center; gap: clamp(6px, .9vw, 14px);
  min-height: 0; padding: 6px 4px 2px; }
.fe-class { position: relative; flex: 0 0 auto; height: clamp(96px, 15vh, 168px); aspect-ratio: 5 / 6; display: flex; align-items: flex-end;
  border: 1px solid rgba(227, 194, 120, .3); border-radius: 4px; overflow: hidden; cursor: pointer; text-align: center;
  background: linear-gradient(to bottom, #0d252e, #07141a); padding: 0; color: inherit;
  transition: border-color .2s, box-shadow .2s, transform .2s, filter .25s; filter: saturate(.55) brightness(.7); }
/* the bust crop (hero_*_card.webp, 5:6 like the card) fills the frame exactly */
.fe-class img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
  transform-origin: 50% 20%; transition: transform .4s; }
.fe-class::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(4, 12, 16, .95) 0, rgba(4, 12, 16, .55) 24%, transparent 46%); }
.fe-class span { position: relative; z-index: 2; width: 100%; padding: 0 4px 7px; font: 600 clamp(13px, 1.1vw, 15px)/1.1 var(--fe-serif); letter-spacing: .5px;
  color: #d9d1bb; text-shadow: 0 1px 2px #000; }
.fe-class:hover, .fe-class:focus-visible { border-color: rgba(227, 194, 120, .75); outline: none; filter: none; transform: translateY(-3px); }
.fe-class[aria-checked="true"] { border-color: var(--fe-gold); filter: none; transform: translateY(-5px);
  box-shadow: 0 0 0 1px var(--fe-gold), 0 0 18px rgba(227, 194, 120, .4); }
.fe-class[aria-checked="true"] img { transform: scale(1.04); }
.fe-class[aria-checked="true"] span { color: var(--fe-gold-hi); }

.fe-stage { position: relative; min-height: 0; min-width: 0; }
.fe-world { position: absolute; inset: 0; display: none; pointer-events: none; }
#front[data-screen="select"] .fe-world { display: block; }
.fe-world canvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; }
.fe-inlay { position: absolute; left: var(--dx, 50%); top: var(--dy, 75%); width: calc(var(--rx, 150px) * 1.86); aspect-ratio: 1;
  transform: translate(-50%, -50%) scaleY(var(--asp, .3)); }
.fe-inlay img { width: 100%; height: 100%; border-radius: 50%; opacity: .78; animation: fe-turn 80s linear infinite;
  box-shadow: 0 0 0 3px rgba(227, 194, 120, .55), 0 0 0 7px rgba(8, 24, 30, .7), 0 0 50px 16px rgba(130, 215, 235, .28); }
.fe-inlay::after { content: ""; position: absolute; inset: -20%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(150, 225, 245, .25), transparent 62%); animation: fe-pulse 4s ease-in-out infinite alternate; }
@keyframes fe-turn { to { transform: rotate(360deg); } }
@keyframes fe-pulse { from { opacity: .45; } to { opacity: 1; } }
.fe-world .fe-loading { position: absolute; left: var(--dx, 50%); top: calc(var(--dy, 75%) - 120px); transform: translateX(-50%);
  color: var(--fe-muted); font-size: 13px; text-shadow: 0 1px 2px #000; }

.fe-info { display: flex; flex-direction: column; padding: 24px 24px 20px; min-height: 0; overflow-y: auto; align-self: start;
  max-height: 100%; }
.fe-classname { font: 600 32px/1.1 var(--fe-serif); color: var(--fe-gold-hi); letter-spacing: 1px;
  text-shadow: 0 2px 4px #000, 0 0 16px rgba(227, 194, 120, .3); }
.fe-info > * { flex-shrink: 0; }
/* skill clip of the chosen class (art/login/videos, recorded in the game on the Training Ground) */
.fe-clip { position: relative; margin: 12px 0 12px; aspect-ratio: 16 / 9; border-radius: 3px; overflow: hidden;
  background: #04100f center / cover no-repeat; border: 1px solid rgba(227, 194, 120, .45);
  box-shadow: 0 0 0 3px rgba(4, 12, 16, .85), 0 6px 18px rgba(0, 0, 0, .5); }
.fe-clip[hidden] { display: none; }
.fe-clip video { display: block; width: 100%; height: 100%; object-fit: cover; }
.fe-clip { cursor: zoom-in; } .fe-clip:hover, .fe-clip:focus-visible { border-color: var(--fe-gold); outline: none; }
.fe-clipbig { width: min(1280px, calc(100vw - 48px), calc((100vh - 48px) * 16 / 9)); padding: 10px; }
.fe-clipbig video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 2px; }
.fe-clipclose { position: absolute; right: -14px; top: -14px; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  background: rgba(5, 16, 22, .95); }
.fe-clip::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 24px rgba(0, 0, 0, .55); }
.fe-desc { margin: 0 0 14px; padding: 12px 14px; font-size: clamp(12.5px, .95vw, 13.5px); line-height: 1.55; color: #dcd6c6; min-height: 6.5em;
  background: rgba(3, 12, 16, .5); border-left: 2px solid rgba(227, 194, 120, .6); border-radius: 0 3px 3px 0; }
.fe-group { margin: 6px 0 8px; }
.fe-glabel { display: block; margin-bottom: 5px; font-size: 12px; color: #c7d2cc; letter-spacing: .6px; }
.fe-seg { display: flex; border: 1px solid var(--fe-line); border-radius: 4px; overflow: hidden; }
.fe-seg button { flex: 1; height: 36px; border: 0; background: rgba(3, 12, 16, .6); color: #c9c2ae; cursor: pointer;
  font: 600 14px/1 var(--fe-serif); letter-spacing: 1px; transition: background .2s, color .2s; }
.fe-seg button + button { border-left: 1px solid var(--fe-line); }
.fe-seg button:hover, .fe-seg button:focus-visible { background: rgba(227, 194, 120, .1); outline: none; }
.fe-seg button[aria-checked="true"] { color: #2a1a05; background: linear-gradient(180deg, #f3d995, #c99c46); }
.fe-actions { display: flex; gap: 10px; margin-top: 12px; }
.fe-actions .fe-btn { flex: 1; width: auto; }

.fe-card { align-self: center; padding: 30px 28px 24px; text-align: center; }
.fe-card-name { font: 600 34px/1.1 var(--fe-serif); color: var(--fe-gold-hi); text-shadow: 0 2px 4px #000, 0 0 16px rgba(227, 194, 120, .3);
  word-break: break-word; }
.fe-card-line { margin: 6px 0 18px; color: #c7d2cc; font-size: 14px; letter-spacing: .5px; }
.fe-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.fe-card-stats div { padding: 10px 6px; background: rgba(3, 12, 16, .55); border: 1px solid rgba(227, 194, 120, .2); border-radius: 3px; }
.fe-card-stats span { display: block; font-size: 11.5px; color: var(--fe-muted); letter-spacing: .6px; }
.fe-card-stats b { display: block; margin-top: 3px; font: 600 18px/1.2 var(--fe-serif); color: var(--fe-text); }

.fe-loader { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 18px; color: var(--fe-gold);
  font: 600 16px/1 var(--fe-serif); letter-spacing: 2px; text-shadow: 0 1px 3px #000; }
.fe-loader i { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(227, 194, 120, .25);
  border-top-color: var(--fe-gold); animation: fe-spin 1s linear infinite; }

.fe-modal { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  background: rgba(2, 6, 9, .62); backdrop-filter: blur(3px); animation: fe-in .25s ease both; }
.fe-modal[hidden] { display: none; }
.fe-dialog { width: min(440px, calc(100vw - 32px)); padding: 26px 26px 20px; }
.fe-dialog h3 { margin: 0 0 10px; font: 600 20px/1.2 var(--fe-serif); color: var(--fe-gold); letter-spacing: 1px; }
.fe-dialog p { margin: 0 0 10px; color: #dcd6c6; white-space: pre-line; }
.fe-dialog .fe-summary { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 6px 0 4px; font-size: 13.5px; }
.fe-dialog .fe-summary dt { color: var(--fe-muted); } .fe-dialog .fe-summary dd { margin: 0; color: var(--fe-text); font-weight: 600; }
.fe-err { min-height: 1.2em; color: var(--fe-red) !important; font-size: 13px; }

@media (max-width: 960px), (max-height: 560px) {
  .fe-create-screen { grid-template-columns: 1fr; grid-template-rows: auto auto 46vh auto; overflow-y: auto; padding: 12px 16px 70px; }
  .fe-create-screen .fe-classes { order: 2; }
  .fe-select-screen { grid-template-columns: 1fr; grid-template-rows: auto 50vh auto; overflow-y: auto; padding: 12px 16px 70px; }
  .fe-classes { grid-row: auto; justify-content: flex-start; overflow-x: auto; padding-bottom: 6px; }
  .fe-class { height: 125px; }
  .fe-info { max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .fe-bg, .fe-inlay img, .fe-embers i, .fe-logo { animation: none !important; }
}
@media (max-height: 820px) {
  .fe-logo { width: min(400px, 32vw, 38vh); }
  .fe-logo-sm { width: min(260px, 24vw, 23vh); }
  .fe-login { padding: 38px 26px 16px; }
  .fe-field { margin: 8px 0; }
  .fe-hint { min-height: 1em; margin-top: 3px; }
  #front input:not([type="checkbox"]) { height: 36px; }
  .fe-alt { margin-top: 10px; }
}


/* ============================================================================================ create screen
   One screen, no scrolling at 1280x720 .. 2560x1440. Behind everything the original create-role scene of
   characterInAndOut.swf in its stage units (--u = viewport height / 768): the ink-landscape scroll between its rods
   and the row of the 14 figures standing in front of it (sepia; hovered / chosen in colour with the rising gold light);
   the row slides (front.js placeRow) so the chosen figure stands in the middle of the area left of the panel. */
.fe-create-screen { grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 430px); grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0 clamp(12px, 1.6vw, 28px); padding: clamp(8px, 1.6vh, 20px) clamp(12px, 2vw, 36px) clamp(10px, 2vh, 26px); overflow: hidden; }
.fe-create-screen .fe-head { position: relative; z-index: 2; grid-column: 1; grid-row: 1; align-self: start; border-bottom: 0; padding-bottom: 0;
  margin-bottom: clamp(6px, 1.4vh, 16px); text-shadow: 0 1px 3px #000; }
.fe-create-screen .fe-head h2 { font-size: clamp(20px, 2.6vh, 28px); }
.fe-pano { position: absolute; inset: 0; z-index: 0; overflow: hidden; --u: 1px; --pu: 1px; --cx: 40vw; --fy: 80vh;
  background: radial-gradient(ellipse at 40% 45%, transparent 50%, rgba(2, 8, 12, .45) 100%); }
/* the scroll keeps its own scale (--pu): whole, rods included, across the free area, centred on the figures' middle
   so they stand in front of it */
.fe-pano-bg { position: absolute; left: calc(var(--cx) - var(--pw) / 2 + var(--pu) * 98); top: var(--py);
  width: calc(var(--pw) - var(--pu) * 196); height: var(--ph); }
.fe-scroll { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.fe-rod { position: absolute; top: calc(var(--pu) * -61.55); width: calc(var(--pu) * 220); height: calc(var(--pu) * 700);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); }
.fe-rod-l { left: calc(var(--pu) * -97.65); } .fe-rod-r { right: calc(var(--pu) * -97.65); transform: scaleX(-1); }   /* the rod art sits left in its picture: mirrored */
.fe-pair { position: absolute; inset: 0; transition: opacity .22s ease; }
.fe-pano.swap .fe-pair { opacity: 0; }
/* a figure: the swf bitmap size in stage units, feet (bottom centre) on the scroll's ground line --fy. Front = the
   chosen sex, full size and lit; back = the other one, behind it to the right, smaller and dimmed. */
.fe-fig { position: absolute; left: var(--cx); top: var(--fy); transform-origin: 50% 100%;
  transform: translate(calc(-50% + var(--u) * 230), -100%) translateY(calc(var(--u) * -40)) scale(.78);
  filter: brightness(.55) saturate(.6) blur(.4px); z-index: 1; pointer-events: none;
  transition: transform .6s cubic-bezier(.25, .8, .25, 1), filter .6s ease; }
.fe-fig.front { transform: translate(calc(-50% - var(--u) * 90), -100%); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); z-index: 2; }
/* the one behind: its picture fades out at the bottom (some originals are cut off at the shins) */
.fe-fig:not(.front) img { -webkit-mask-image: linear-gradient(#000 80%, transparent 97%); mask-image: linear-gradient(#000 80%, transparent 97%); }
.fe-fig img { position: absolute; max-width: none; }
.fe-light { position: absolute; left: 50%; bottom: 8%; width: 95%; min-width: calc(var(--u) * 300); height: 85%;
  transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: url(assets/login/scene_glow.webp) 0 0 / 3000% 100% no-repeat; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 50% 55% at 50% 55%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 55% at 50% 55%, #000 55%, transparent 100%); }
.fe-fig.front .fe-light { opacity: 1; animation: fe-risegl 2.4s steps(29) infinite; }
@keyframes fe-risegl { to { background-position: 100% 0; } }
/* class cards: the bottom row under the scene */
.fe-create-screen .fe-classes { position: relative; z-index: 2; grid-column: 1; grid-row: 3; align-self: end; justify-self: center;
  padding: clamp(6px, .9vh, 10px); gap: clamp(6px, .8vw, 14px); }
.fe-create-screen .fe-class { height: clamp(74px, 11.5vh, 140px); }
.fe-create-screen .fe-class span { font-size: clamp(12px, 1.5vh, 15px); padding-bottom: clamp(4px, .7vh, 8px); }
.fe-create-screen .fe-info { position: relative; z-index: 2; grid-column: 2; grid-row: 1 / 4; align-self: stretch; max-height: none; overflow: hidden;
  padding: clamp(10px, 1.8vh, 22px) clamp(14px, 1.2vw, 22px); gap: clamp(6px, 1.3vh, 14px); justify-content: flex-start; }
.fe-create-screen .fe-info { justify-content: space-between; }
.fe-create-screen .fe-info { margin-top: calc(clamp(54px, 8vh, 92px) - clamp(8px, 1.6vh, 20px)); }   /* below the title band */
.fe-create-screen .fe-classname { font-size: clamp(22px, 3.1vh, 34px); }
.fe-create-screen .fe-desc { min-height: 0; margin: 0; padding: clamp(5px, .8vh, 10px) 12px; font-size: clamp(11.5px, 1.35vh, 13.5px);
  line-height: 1.45; min-height: calc(4 * 1.45em); }
.fe-skills { display: flex; gap: clamp(4px, .5vw, 8px); flex-wrap: nowrap; min-height: clamp(34px, 4.6vh, 50px); }
.fe-skill { position: relative; flex: 0 0 auto; width: clamp(34px, 4.6vh, 50px); height: clamp(34px, 4.6vh, 50px); padding: 0;
  border: 1px solid rgba(227, 194, 120, .35); border-radius: 4px; background: #061217 center / cover no-repeat; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); filter: saturate(.7) brightness(.82);
  transition: filter .2s, border-color .2s, box-shadow .2s, transform .12s; }
.fe-skill:hover, .fe-skill:focus-visible { filter: none; border-color: rgba(227, 194, 120, .8); outline: none; transform: translateY(-2px); }
.fe-skill:active { transform: translateY(0) scale(.96); }
.fe-skill[aria-checked="true"] { filter: none; border-color: var(--fe-gold-hi); box-shadow: 0 0 0 1px var(--fe-gold), 0 0 12px rgba(240, 200, 110, .45); }
.fe-skill.xp::after { content: "EG"; position: absolute; right: 1px; bottom: 0; font: 700 9px/1 var(--fe-serif); color: #ffe7a0;
  text-shadow: 0 0 3px #000, 0 0 2px #000; }
.fe-create-screen .fe-clip { margin: 0; flex: 0 1 auto; min-height: 0; width: 100%; max-height: 34vh; aspect-ratio: 16 / 9; }
.fe-clip video { opacity: 0; transition: opacity .35s ease; }
.fe-clip.ready video { opacity: 1; }
.fe-clip.missing { visibility: hidden; }
.fe-skillcap { display: flex; flex-direction: column; gap: 2px; min-height: calc(1.3em + 4 * 1.4em + 4px);
  font-size: clamp(11.5px, 1.3vh, 13px); line-height: 1.4; color: #cfd8d2; transition: opacity .25s; }
.fe-skillcap b { font: 600 clamp(14px, 1.7vh, 16px)/1.3 var(--fe-serif); color: var(--fe-gold); letter-spacing: .4px; }
.fe-skillcap span { display: block; }
.fe-swap { animation: fe-swapin .35s ease both; }
@keyframes fe-swapin { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.fe-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fe-create-screen .fe-group { margin: 0; }
.fe-create-screen .fe-glabel { margin-bottom: 3px; font-size: clamp(11px, 1.25vh, 12px); }
.fe-create-screen .fe-seg button { height: clamp(30px, 3.9vh, 38px); font-size: clamp(12.5px, 1.5vh, 14px); }
.fe-create-screen .fe-field { margin: 0; }
.fe-create-screen .fe-field > span:first-child { margin-bottom: 3px; font-size: clamp(11px, 1.25vh, 12px); }
.fe-create-screen #c-name { height: clamp(32px, 4.2vh, 40px); }
.fe-create-screen .fe-hint { min-height: 1.1em; margin-top: 2px; font-size: 11px; }
.fe-create-screen .fe-actions { margin-top: 0; }
.fe-create-screen .fe-btn { height: clamp(36px, 4.8vh, 46px); }
@media (prefers-reduced-motion: reduce) { .fe-fig .fe-light { animation: none !important; } .fe-fig { transition: none; } }
/* create: notices at the top (the figures' feet and the panel buttons stay free) */
#front[data-screen="create"] #status { top: clamp(10px, 1.6vh, 20px); bottom: auto; left: auto; transform: none;
  right: calc(clamp(300px, 24vw, 430px) + clamp(24px, 3.6vw, 64px)); max-width: 40vw; }

/* original-style frame of the create screen: the client's create dialog border (DialogRoleCreate1024.dds, 9-slice)
   around the whole screen, the login screen's title band (loginFlash bitmap 23) behind the title, the dialog's
   dragon recess behind the class cards, and the scene's light ray (bitmap 90) slowly breathing behind the scroll */
.fe-create-screen::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border: clamp(12px, 1.6vh, 20px) solid transparent; border-image: url(assets/login/scene_frame.webp) 80 / clamp(12px, 1.6vh, 20px) round; }
.fe-cband { position: absolute; left: 0; right: 0; top: 0; height: clamp(54px, 8vh, 92px); z-index: 1; pointer-events: none;
  background: url(assets/login/scene_band.webp) center / 100% 100% no-repeat; opacity: .95; }
.fe-create-screen .fe-classes { background: url(assets/login/scene_recess.webp) center / cover; border: 1px solid rgba(227, 194, 120, .35);
  border-radius: 4px; padding: clamp(6px, .9vh, 10px); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 0 0 3px rgba(5, 15, 20, .6); }
.fe-create-screen .fe-info { background: linear-gradient(180deg, rgba(14, 40, 50, .82), rgba(6, 20, 26, .9)),
  url(assets/login/scene_recess.webp) center / cover; }
.fe-ray { position: absolute; top: 0; width: calc(var(--pw) * .22); height: 100%; pointer-events: none; mix-blend-mode: screen;
  background: url(assets/login/scene_ray.webp) center / 100% 100% no-repeat; opacity: .35; animation: fe-ray 9s ease-in-out infinite alternate; }
.fe-ray-1 { left: calc(var(--cx) - var(--pw) * .34); transform: skewX(-8deg); }
.fe-ray-2 { left: calc(var(--cx) + var(--pw) * .13); transform: skewX(6deg); animation-delay: -4.5s; }
@keyframes fe-ray { from { opacity: .12; } to { opacity: .42; } }
@media (prefers-reduced-motion: reduce) { .fe-ray { animation: none; } }

/* ---- loading screens (js/loadscreen.js; index.html #fo-boot is the first-load one). Web-only layout: the original
   client has no loading screen; the frame is the gold dragon plate of rsDragon.swf (orig_loadplate.webp), the bar fill
   and the map-change backdrop follow the front screens' palette. */
.fo-ld { --fe-gold: #e3c278; --fe-gold-hi: #fbe7ae; --fe-gold-lo: #9c7a35; --fe-line: rgba(227, 194, 120, .55);
  --fe-text: #ecE4cf; --fe-muted: #9fb3b5; --fe-red: #ff8f7a;
  --fe-serif: "Palatino Linotype", "Book Antiqua", Palatino, "Hoefler Text", Georgia, serif;
  display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--fe-text); }
.fo-plate { position: relative; width: min(560px, 90vw); aspect-ratio: 754 / 220; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .6)); }
.fo-plate > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fo-plate::before { content: ""; position: absolute; left: 21%; right: 21%; top: 35%; bottom: 14%; border-radius: 6px;
  background: rgba(3, 10, 14, .88); }   /* the plate's box is see-through: keep the text readable on any backdrop */
#front[data-screen="enter"] #status { display: none; }   /* the plate says it */
/* the plate's empty box: x 21..79 %, y 36..86 % of the picture */
.fo-pl-in { position: absolute; left: 23%; right: 23%; top: 40%; bottom: 20%; display: flex; flex-direction: column;
  justify-content: center; gap: 6px; text-align: center; }
.fo-ld-msg { color: var(--fe-gold); font: 600 clamp(12px, 1.6vw, 15px)/1.2 var(--fe-serif); letter-spacing: .5px;
  text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-bar { display: block; height: 8px; border: 1px solid var(--fe-line); border-radius: 4px; background: rgba(0, 0, 0, .55); overflow: hidden; }
.fo-bar i { display: block; height: 100%; width: 0; background: linear-gradient(var(--fe-gold-hi), var(--fe-gold) 45%, var(--fe-gold-lo));
  box-shadow: 0 0 8px var(--fe-gold); transition: width .25s linear; }
[dir="rtl"] .fo-bar i { margin-left: auto; }
.fo-ld-pct { font-size: 12px; color: var(--fe-muted); direction: ltr; }
.fo-ld-note { min-height: 1.4em; max-width: min(520px, 90vw); margin: 0; text-align: center; color: var(--fe-muted);
  text-shadow: 0 1px 2px #000; }
.fo-ld-note.err { color: var(--fe-red); }
.fo-ld-retry { width: auto; padding: 0 26px; height: 36px; }
.fo-ld-retry[hidden] { display: none; }
#front[data-screen="enter"] .fe-enter-screen .fo-ld { margin-top: 10px; }
/* map change / teleport: covers the game view (canvases), below the HUD windows (z 40+) */
#fo-load { position: fixed; inset: 0; z-index: 39; justify-content: center; padding-bottom: 8vh;
  background: radial-gradient(ellipse at 50% 45%, rgba(18, 53, 67, .96), rgba(5, 11, 16, .98) 70%); transition: opacity .3s ease; }
#fo-load[hidden] { display: none; }
#fo-load.out { opacity: 0; pointer-events: none; }
#fo-load .fo-crest { width: min(300px, 50vw); height: auto; margin-bottom: -6px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)); }
#loading { display: none !important; }   /* replaced by #fo-load (main.js still toggles it) */