@font-face {
  font-family: Lora;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../assets/ui/fonts/lora-600-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: Lora;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../assets/ui/fonts/lora-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Entry screens share lacquer surfaces and independent nine-slice borders. */
#s-login, #s-select, #s-server, #s-create {
  --ink: #171513;
  --paper: #fff0d4;
  --muted: #e5cdb0;
  --amber: #ffcc81;
  color: var(--paper);
  font: 400 1rem/1.45 var(--font);
  overflow: auto;
}
#s-login {
  background: #172b2f url("../../assets/ui/entry-redesign/login-gate.webp") 35% center / cover no-repeat;
  flex-direction: column;
  align-items: end;
  justify-content: safe center;
  padding: 16px clamp(20px, 10vw, 160px);
}
#s-login::before { position: fixed; }
#s-select {
  flex-direction: column;
  align-items: center;
  background: linear-gradient(#101b27a6, transparent 32%, #10182057 60%, #101820df), #15232b url("../../assets/ui/entry-redesign/character-courtyard.webp") center / cover no-repeat;
  padding: 16px clamp(12px, 4vw, 56px);
  justify-content: flex-start;
  gap: 12px;
}
#s-login .entry-frame, #s-select .entry-frame, #s-server .entry-frame, #s-create .entry-frame {
  border: 14px solid #73502e;
  border-image: url("../../assets/ui/entry-redesign/bronze-frame.webp") 12% stretch;
  background: var(--ink) url("../../assets/ui/entry-redesign/lacquer-inlay.webp") 0 0 / 256px;
  background-clip: padding-box;
  box-shadow: 0 12px 30px #0007;
  color: var(--paper);
}
#s-login #lg-form {
  position: relative;
  flex: none;
  display: grid;
  gap: 6px;
  width: min(100%, 390px);
  height: auto;
  margin: 0;
  padding: clamp(10px, 2vw, 24px);
  text-align: left;
  filter: none;
}
#s-login #lg-form > * { position: static; }
.entry-title, #s-select h1 {
  margin: 0;
  font: 600 clamp(1.75rem, 4vw, 2.65rem)/1.2 Lora, Georgia, serif;
  color: var(--paper);
  text-align: center;
  letter-spacing: normal;
  text-shadow: 0 2px 6px #000;
}
.entry-title::after, #s-select h1::after {
  content: "";
  display: block;
  width: min(12rem, 70%);
  height: 12px;
  margin: 7px auto 0;
  background: url("../../assets/ui/entry-redesign/title-divider.webp") center / contain no-repeat;
}
#s-login .lg-sv { width: auto; height: auto; font: inherit; color: var(--muted); }
#s-login .lg-sv:empty { display: none; }
#s-login #lg-form .lg-in {
  width: 100%;
  height: 44px;
  padding: 0 10px;
  border: 1px solid #9b774d;
  background: #120f0c;
  color: var(--paper);
  font: inherit;
}
#s-login .lg-remember { min-height: 44px; display: flex; align-items: center; gap: 8px; }
#s-login .lg-remember input { accent-color: var(--amber); width: 18px; height: 18px; }
#s-login .lg-err, #s-login .lg-note { margin: 0; font: 400 .875rem/1.4 var(--font); color: var(--muted); }
#s-login .lg-err { color: #ffd0b5; }
#s-login .lg-err:empty, .entry-delete-error:empty { display: none; }
#s-login .lg-note { margin-top: 6px; }
#s-login .lg-note a { color: var(--amber); }

#s-login .entry-btn, #s-select .entry-btn, #s-server .entry-btn, #s-create .entry-btn {
  position: static;
  min-height: 44px;
  min-width: 44px;
  display: inline-grid;
  place-items: center;
  text-align: center;
  width: auto;
  height: auto;
  padding: 3px 4px;
  /* Slice coordinates and CSS border widths match the raster pixels. */
  border: solid #7d5836;
  border-width: 9px 22px;
  border-image-source: url("../../assets/ui/entry-redesign/button-secondary-slice.webp");
  border-image-slice: 9 22 fill;
  border-image-repeat: repeat;
  background: #191514;
  background-clip: padding-box;
  color: var(--paper);
  font: 600 .875rem/1.25 var(--font);
  cursor: pointer;
}
#s-login #lg-form .entry-btn, #s-select .entry-actions .entry-btn { background-image: none; }
#s-login .entry-btn.primary, #s-select .entry-btn.primary, #s-server .entry-btn.primary, #s-create .entry-btn.primary {
  border-image-source: url("../../assets/ui/entry-redesign/button-primary-slice.webp");
  border-image-slice: 11 24 fill;
  border-width: 11px 24px;
  color: #fff4d2;
}
#s-select .entry-btn.danger { border-image-source: url("../../assets/ui/entry-redesign/button-danger-slice.webp"); border-image-slice: 12 26 fill; border-width: 12px 26px; }
.entry-btn:not(:disabled):hover { filter: brightness(1.18); }
.entry-btn:not(:disabled):active { filter: brightness(.88); }
.entry-btn:disabled { opacity: .65; cursor: wait; }
#s-login :focus-visible, #s-select :focus-visible, #s-server :focus-visible, #s-create :focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

#s-select .cs-top { margin: 0; }
#s-select .cs-sub { font: 400 .875rem/1.3 var(--font); color: var(--muted); }
#s-select .cs-row {
  --stage-height: clamp(96px, 42dvh, 390px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(6px, 2vw, 28px);
  width: min(100%, 880px);
  flex: 1 0 auto;
  padding: 0;
}
#s-select .cs-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 0;
  gap: 6px;
  color: var(--paper);
  border: 0;
  border-radius: 0;
  background: none;
  transform: none;
  filter: none;
  font: inherit;
}
.entry-stage {
  position: relative;
  display: grid;
  width: 100%;
  height: var(--stage-height);
  place-items: end center;
  isolation: isolate;
  --plinth-width: min(94%, calc(var(--stage-height) * .66));
}
.entry-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  width: var(--plinth-width);
  aspect-ratio: 512 / 97;
  background: url("../../assets/ui/entry-redesign/stone-plinth.webp") center / contain no-repeat;
}
.entry-avatar {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center bottom;
  padding-bottom: calc(var(--plinth-width) * .075);
  transform-origin: center bottom;
  filter: brightness(.88);
}
#s-select.on .entry-avatar { animation: entry-idle 3.4s ease-in-out infinite; }
#s-select.on .cs-slot:nth-child(2) .entry-avatar { animation-delay: -1.15s; }
#s-select.on .cs-slot:nth-child(3) .entry-avatar { animation-delay: -2.3s; }
.cs-slot.on .entry-avatar { filter: none; --entry-stretch: 1.008; }
@keyframes entry-idle { 50% { transform: scaleY(var(--entry-stretch, 1.004)); } }
.entry-empty { align-self: center; font: 400 2.5rem/1 var(--font); color: var(--amber); }
.entry-nameplate {
  display: grid;
  width: 100%;
  min-height: 48px;
  align-content: center;
  padding: 3px 2px;
  text-align: center;
  border: solid #785234;
  border-width: 5px 14px;
  border-image: url("../../assets/ui/entry-redesign/hud-nameplate-slice.webp") 5 14 fill repeat;
  background: #201613;
  background-clip: padding-box;
  font-size: .875rem;
}
.cs-slot.on .entry-nameplate { outline: 2px solid var(--amber); outline-offset: -2px; }
.entry-nameplate strong, .entry-nameplate small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-nameplate small, .entry-details small { color: var(--muted); }

#s-select .cs-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  width: min(100%, 980px);
  height: auto;
  padding: 8px 12px;
  font: inherit;
  animation: none;
}
#s-select .cs-panel::before, #s-select .cs-panel::after { display: none; }
#s-select .cs-panel > :not(dialog) { position: static; }
.entry-details { display: grid; min-width: 0; overflow-wrap: anywhere; }
.entry-details strong { font: 600 1.25rem/1.2 var(--font); }
.entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#s-select .entry-dialog { width: min(420px, calc(100vw - 28px)); padding: 16px; }
.entry-dialog::backdrop { background: #0a0c10bb; }
.entry-dialog h2 { margin: 0; font: 600 1.6rem/1.2 Lora, Georgia, serif; }
.entry-dialog .entry-actions { justify-content: end; }
.entry-delete-error { margin-bottom: 10px; color: #ffd0b5; }

@media (max-width: 620px) {
  #s-login { align-items: center; }
  #s-select .cs-panel { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; padding-inline: 8px; }
  #s-select .cs-panel > .entry-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  #s-select .cs-panel > .entry-actions .primary { grid-column: 1 / -1; }
  #s-select { background-position: center, center bottom; }
  #s-select .cs-row { --stage-height: clamp(100px, min(36dvh, calc(100dvh - 390px)), 280px); position: relative; padding-top: var(--stage-height); }
  #s-select .cs-slot { position: static; }
  #s-select .entry-nameplate { height: 52px; font-size: 12px; line-height: 1.3; }
  #s-select .entry-details { text-align: center; }
  #s-select .cs-slot:not(.on) .entry-stage { display: none; }
  #s-select .entry-stage { position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%); width: min(58vw, 270px); height: var(--stage-height); pointer-events: none; }
  #s-select .entry-actions .entry-btn { min-width: 0; }
}
@media (max-height: 460px) and (orientation: landscape) {
  #s-select { gap: 6px; padding-block: 8px; background-position: center, center bottom; background-size: cover, max(115%, 90dvh * 16 / 9) auto; }
  #s-select h1 { font-size: 1.55rem; }
  #s-select .cs-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
  }
  #s-select .cs-panel > .entry-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: end;
  }
  #s-select .entry-details { text-align: left; font-size: 12px; line-height: 1.25; }
  #s-select .entry-details strong { font-size: 14px; }
  #s-select .entry-nameplate { min-height: 44px; height: 44px; }
  #s-select .cs-row { --stage-height: clamp(65px, calc(100dvh - 245px), 125px); padding-top: 0; }
  #s-select .cs-slot:not(.on) .entry-stage { display: grid; }
  #s-select .entry-stage { position: relative; bottom: auto; left: auto; width: 100%; transform: none; }
  #s-select .entry-stage { height: var(--stage-height); }
}
@media (max-width: 740px) and (max-height: 460px) and (orientation: landscape) {
  #s-select .cs-panel { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  #s-select .entry-details { grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; }
  #s-select .cs-panel > .entry-actions { justify-content: center; }
  #s-select .cs-row { --stage-height: clamp(60px, calc(100dvh - 263px), 115px); }
}
@media (prefers-reduced-motion: reduce) {
  #s-select.on .entry-avatar { animation: none; }
}