/* Server selection and character creation share the entry skin in entry.css. */
#s-server {
  padding: 16px;
  align-items: safe center;
  justify-content: safe center;
}

.sv-win {
  position: relative;
  display: grid;
  flex: none;
  gap: 18px;
  width: min(100%, 640px);
  padding: clamp(10px, 3vw, 24px);
}

.sv-body {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 1.35fr);
  gap: 14px;
}

.sv-list {
  display: grid;
  align-content: start;
  gap: 6px;
  max-height: 36dvh;
  overflow: auto;
  padding: 3px;
}

.sv-info {
  padding: 10px 12px;
  border: 1px solid #866440;
  background: #171411;
  overflow-wrap: anywhere;
}

.sv-info strong { color: var(--amber); }
.sv-info p { margin: 6px 0 0; color: var(--muted); }
.sv-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

#s-create {
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px;
  background: linear-gradient(#131e27a0, transparent 25%, #121b2280 68%, #101820e0),
    #15232b url("../../assets/ui/tao_nv/newchar.webp") center / cover no-repeat;
}

.cc-top { flex: none; text-align: center; }
.cc-ver { color: var(--muted); font-size: 12px; }
.cc-mid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  align-items: end;
  flex: 1 0 auto;
  gap: 12px;
  width: min(100%, 660px);
}

.cc-char {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: min(100%, clamp(130px, 35dvh, 290px));
  padding: 0;
  border: 0;
  background: none;
}

.cc-vp {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}

.cc-vp i {
  position: absolute;
  inset: 0 auto 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

@keyframes ccWalk { to { transform: translateX(-100%); } }

.cc-char[aria-pressed="false"] .cc-vp { filter: brightness(.75) saturate(.65); }

#s-create .cc-tag { min-width: 116px; white-space: nowrap; pointer-events: none; }
#s-create .cc-char[aria-pressed="true"] .cc-tag,
#s-create .cc-se[aria-pressed="true"],
#s-server .sv-row[aria-pressed="true"] {
  border-image-source: url("../../assets/ui/entry-redesign/button-primary-slice.webp");
  border-image-slice: 11 24 fill;
  border-width: 11px 24px;
  color: var(--amber);
}

.cc-bot {
  display: grid;
  flex: none;
  gap: 8px;
  width: min(100%, 840px);
  padding: 8px clamp(4px, 2vw, 18px);
}

#cc-series { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.cc-desc { color: var(--muted); font-size: .875rem; }
.cc-warn, .cc-err { color: #ffd0b5; }
.cc-warn:empty, .cc-err:empty { display: none; }
.cc-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 6px;
}

.cc-name { display: grid; gap: 3px; font-size: .875rem; }
#cc-name {
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  background: #120f0c;
  border: 1px solid #9b774d;
  color: var(--paper);
  font: 400 16px/1.3 var(--font);
}

@media (max-width: 600px) {
  .sv-body { grid-template-columns: minmax(0, 1fr); }
  .sv-win { gap: 12px; }
  .cc-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .cc-name { grid-column: 1 / -1; }
  #s-create .cc-se { padding-inline: 0; }
}

@media (max-height: 460px) and (orientation: landscape) {
  #s-create { gap: 4px; padding: 4px 12px; }
  #s-create .entry-title { font-size: 1.4rem; }
  .cc-char { width: min(100%, 136px); }
  .cc-vp { width: min(100%, 21dvh); }
  #s-create .entry-title::after { margin-top: 2px; height: 7px; }
  .cc-bot { gap: 4px; padding-block: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-vp i { animation: none !important; }
}